/* QUELLO MOTION POLISH — layered hero, calm global transitions, mobile-safe effects */
:root { --q-motion-ease: cubic-bezier(.22,.75,.25,1); }
html { scroll-behavior:smooth; }
.hero-visual { isolation:isolate; contain:layout style; }
.hero-visual::before { animation: qAmbientPulse 9s ease-in-out infinite; }
.hero-visual::after { animation: qStarDrift 12s ease-in-out infinite alternate; }
/* Multiple orbital planes with distinct speeds create depth without making the scene noisy. */
.hero-orbit { transform-origin:50% 50%; }
.hero-orbit-one { border-width:1.5px; filter:drop-shadow(0 0 8px rgba(159,112,255,.22)); animation:qOrbitBreathA 17s var(--q-motion-ease) infinite alternate; }
.hero-orbit-two { animation:qOrbitBreathB 23s var(--q-motion-ease) infinite alternate; }
.hero-orbit-three { border-style:dashed; animation:qOrbitSpinC 46s linear infinite; }
.hero-orbit-four { animation:qOrbitBreathD 26s var(--q-motion-ease) infinite alternate; }
.hero-orbit-five { animation:qOrbitSpinE 58s linear infinite reverse; }
.hero-orbit-six { animation:qOrbitBreathF 19s var(--q-motion-ease) infinite alternate; }
.hero-orbit-three::before,.hero-orbit-five::after { width:6px;height:6px;background:#f0e8ff; box-shadow:0 0 9px 3px rgba(196,157,255,.8),0 0 25px 7px rgba(122,80,255,.38); }
.hero-orbit-four::after { width:3px;height:3px; box-shadow:0 0 10px 4px rgba(105,168,255,.62); }
.qotd-floating-card { box-shadow:0 32px 80px rgba(0,0,0,.36),0 0 0 1px rgba(190,163,255,.05),0 0 55px rgba(110,57,255,.2); transition:border-color .4s ease,box-shadow .4s ease; }
.qotd-floating-card:hover { border-color:rgba(194,164,255,.75); box-shadow:0 38px 90px rgba(0,0,0,.4),0 0 70px rgba(110,57,255,.28); }
.hero-bot-glow { animation:qBotHover 6.8s ease-in-out infinite; }
.hero-spark { animation:qSparkPulse 4.5s ease-in-out infinite; }
.hero-spark-two { animation-delay:-1.8s; }
.hero-spark-three { animation-delay:-3.1s; }
/* General interface motion: subtle hover feedback, not constant movement. */
.button,.site-tab,.theme-toggle,.header-language-button,.hero-feature,.extra-card,.command-embed,.faq details,.setup-step { transition:color .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .25s ease,transform .25s var(--q-motion-ease); }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(0) scale(.985); }
.hero-feature { position:relative; overflow:hidden; }
.hero-feature::after { content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 20%,rgba(175,143,255,.09) 50%,transparent 78%);transform:translateX(-70%);transition:opacity .3s ease,transform .65s var(--q-motion-ease); }
.hero-feature:hover::after { opacity:1;transform:translateX(70%); }
.site-tab::after { transition:left .25s ease,right .25s ease,opacity .25s ease; }
/* One coordinated scroll-reveal system: enough travel to read as a gentle slide, not a pop. */
.q-motion-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.99);
  transition-property: opacity, transform;
  transition-duration: 860ms;
  transition-timing-function: cubic-bezier(.22, .72, .18, 1);
  will-change: opacity, transform;
}
.q-motion-reveal.q-motion-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
@keyframes qAmbientPulse { 0%,100%{opacity:.72;transform:scale(.96)} 50%{opacity:1;transform:scale(1.045)} }
@keyframes qStarDrift { 0%{transform:translate3d(-4px,2px,0);opacity:.55} 100%{transform:translate3d(5px,-8px,0);opacity:1} }
@keyframes qOrbitBreathA { 0%{transform:rotate(-30deg) scale(.985);opacity:.55} 100%{transform:rotate(-17deg) scale(1.02);opacity:.96} }
@keyframes qOrbitBreathB { 0%{transform:rotate(30deg) translateY(4px);opacity:.42} 100%{transform:rotate(44deg) translateY(-4px);opacity:.82} }
@keyframes qOrbitSpinC { from{transform:rotate(24deg)} to{transform:rotate(384deg)} }
@keyframes qOrbitBreathD { 0%{transform:rotate(-48deg) scale(.97);opacity:.36} 100%{transform:rotate(-35deg) scale(1.025);opacity:.72} }
@keyframes qOrbitSpinE { from{transform:rotate(53deg)} to{transform:rotate(413deg)} }
@keyframes qOrbitBreathF { 0%{transform:rotate(-13deg) translateY(5px);opacity:.34} 100%{transform:rotate(-3deg) translateY(-5px);opacity:.76} }
@keyframes qBotHover { 0%,100%{translate:0 0;rotate:7deg} 50%{translate:0 -10px;rotate:10deg} }
@keyframes qSparkPulse { 0%,100%{opacity:.48;scale:.92} 50%{opacity:1;scale:1.12} }
@media(max-width:640px) {
  .hero-visual { contain:none; }
  .hero-orbit-one { width:96%;right:2%; }
  .hero-orbit-three { width:98%;right:1%; }
  .hero-orbit-five { width:91%;right:4%; }
  .qotd-floating-card { max-width:360px; }
  .hero-spark-two { right:2%; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important; }
  .q-motion-reveal { opacity:1;transform:none; }
}

/* QUELLO COSMIC GLASS — site-wide finish, responsive-safe and accessible */
:root {
  --q-glass-bg: color-mix(in srgb, var(--surface) 86%, #7861c8 14%);
  --q-glass-line: rgba(183, 158, 255, .22);
  --q-glass-shadow: 0 18px 50px rgba(5, 4, 18, .16);
  --q-focus: #c8b5ff;
}
html { max-width:100%; overflow-x:clip; }
body { position:relative; width:100%; max-width:100%; overflow-x:clip; }
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 8% 9%, rgba(105,72,210,.10), transparent 34%),
             radial-gradient(ellipse at 92% 32%, rgba(52,113,198,.07), transparent 30%),
             radial-gradient(ellipse at 55% 94%, rgba(145,75,219,.06), transparent 36%);
}
/* Keep animated artwork visible vertically; only the document's horizontal edge is clipped. */
.hero-redesign,.hero-copy,.hero-visual,.hero-feature-strip,.hero-visual-caption { min-width:0; }
.hero-redesign,.hero-visual { overflow:visible; }
.hero-visual { isolation:isolate; }
.hero-visual .hero-orbit { pointer-events:none; }
/* Glass depth on major panels without changing their layout or interaction model. */
.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,
.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,
.community-spotlight,.changelog-card,.faq details,.setup-step,.permission-line,
.troubleshoot-embed details,.command-detail-list details,.hero-feature {
  border-color:color-mix(in srgb, var(--line) 76%, rgba(176,145,255,.42));
  box-shadow:var(--q-glass-shadow);
  transition:background-color .28s ease,border-color .28s ease,box-shadow .32s ease,transform .32s var(--q-motion-ease);
}
.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,
.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,
.community-spotlight,.changelog-card,.faq details,.setup-step,.permission-line,
.troubleshoot-embed details,.command-detail-list details {
  background-image:linear-gradient(145deg,rgba(168,143,255,.035),transparent 58%);
}
.command-embed:hover,.faq details:hover,.setup-step:hover,.permission-line:hover,
.extra-card:hover,.community-spotlight:hover,.hero-feature:hover {
  border-color:rgba(176,145,255,.52);
  box-shadow:0 18px 48px rgba(4,3,16,.22),0 0 0 1px rgba(163,126,255,.07);
}
.button,.primary-button,.secondary-button,.text-button,.flow-language,
.command-picker-trigger,.site-tab,.header-language-button,.theme-toggle { -webkit-tap-highlight-color:transparent; }
/* Restore a clear keyboard focus indicator even where older rules removed outlines. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:2px solid var(--q-focus) !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 4px rgba(151,111,255,.18) !important;
}
:where(input,select,textarea):focus-visible { border-color:var(--q-focus) !important; }
/* Long commands, translations and user-entered text must wrap instead of widening the page. */
:where(h1,h2,h3,h4,p,li,a,button,label,small,strong,span,code,pre,.embed-content,.command-details) {
  overflow-wrap:anywhere;
}
pre,.generated-command { max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; }
img,svg,video,canvas,iframe { max-width:100%; }
.container,.nav-inner,.site-tabs-inner,.hero-redesign,.builder,.extras-grid,.playground-grid { min-width:0; }
@media (hover:hover) and (pointer:fine) {
  .discord-embed:hover,.hero-embed:hover,.builder-panel:hover,.playground-card:hover,
  .changelog-card:hover { border-color:rgba(176,145,255,.35); }
}
@media (max-width:700px) {
  .hero-visual { width:100%; max-width:100%; margin-inline:0; }
  .hero-orbit-one { right:2%; width:94%; }
  .hero-orbit-two { right:8%; width:82%; }
  .hero-orbit-three { right:-2%; width:104%; }
  .hero-orbit-four { right:12%; width:76%; }
  .hero-orbit-five { right:0; width:96%; }
  .hero-orbit-six { right:7%; width:86%; }
  .qotd-floating-card { max-width:calc(100% - 28px); }
  .nav-inner { flex-wrap:wrap; }
  .hero-buttons { min-width:0; }
  .builder { grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:360px) {
  .hero-redesign h1 { font-size:clamp(48px,16vw,64px); }
  .hero-buttons { grid-template-columns:minmax(0,1fr) !important; }
  .qotd-floating-card { padding:14px; }
  .command-head { flex-wrap:wrap; }
  .command-tag { margin-left:0; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .q-motion-reveal,.q-reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-visual::before,.hero-visual::after { transform:none !important; }
}

/* QUELLO MOTION FINISH — balanced ambient motion and glass interaction polish.
   Deliberately does not override .q-motion-reveal / .q-motion-in or card reveal timing. */
:root {
  --q-glass-hover-line: rgba(199, 176, 255, .62);
  --q-glass-hover-shadow: 0 20px 48px rgba(5, 3, 22, .24), 0 0 0 1px rgba(165, 128, 255, .10), 0 0 28px rgba(117, 75, 255, .10);
  --q-hover-lift: -3px;
}

/* Keep the orbital scene smooth and GPU-friendly without changing its composition. */
.hero-orbit {
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.hero-orbit-one { filter: drop-shadow(0 0 8px rgba(159,112,255,.24)); }
.hero-orbit-two { filter: drop-shadow(0 0 7px rgba(113,124,255,.16)); }
.hero-orbit-three { filter: drop-shadow(0 0 6px rgba(176,145,255,.16)); }
.hero-orbit-four { filter: drop-shadow(0 0 5px rgba(105,168,255,.13)); }
.hero-orbit-five { filter: drop-shadow(0 0 7px rgba(170,130,255,.15)); }
.hero-orbit-six { filter: drop-shadow(0 0 5px rgba(133,117,255,.12)); }

/* A few extra pinprick stars: restrained, low-contrast and independent of layout. */
.hero-visual::after {
  box-shadow:
    0 0 14px 3px rgba(168,124,255,.58),
    225px 205px 0 1px rgba(190,160,255,.82),
    250px 35px 0 0 rgba(190,160,255,.68),
    75px 270px 0 0 rgba(190,160,255,.68),
    42px 118px 0 -1px rgba(170,190,255,.72),
    185px 82px 0 -1px rgba(215,197,255,.68),
    292px 155px 0 -1px rgba(157,145,255,.62),
    128px 238px 0 -1px rgba(195,174,255,.60);
}

/* Glass interaction: a quiet specular sweep, never clipping card content or shadows. */
@media (hover:hover) and (pointer:fine) {
  .discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,
  .permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,
  .community-spotlight,.changelog-card,.faq details,.setup-step,.permission-line,
  .troubleshoot-embed details,.command-detail-list details,.hero-feature {
    transition:
      background-color .28s ease,
      border-color .34s ease,
      box-shadow .38s ease,
      transform .38s var(--q-motion-ease);
  }
  .discord-embed:hover,.hero-embed:hover,.setup-embed:hover,.builder-panel:hover,
  .discord-message-preview:hover,.permission-note:hover,.notice:hover,.command-embed:hover,
  .playground-card:hover,.flow-card:hover,.extra-card:hover,.community-spotlight:hover,
  .changelog-card:hover,.faq details:hover,.setup-step:hover,.permission-line:hover,
  .troubleshoot-embed details:hover,.command-detail-list details:hover,.hero-feature:hover {
    border-color: var(--q-glass-hover-line);
    box-shadow: var(--q-glass-hover-shadow);
    transform: translateY(var(--q-hover-lift));
  }
  .hero-feature,.command-embed,.extra-card,.playground-card,.community-spotlight,.changelog-card {
    position:relative;
    isolation:isolate;
  }
  .hero-feature::before,.command-embed::before,.extra-card::before,.playground-card::before,
  .community-spotlight::before,.changelog-card::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(118deg, transparent 18%, rgba(218,204,255,.075) 46%, rgba(151,122,255,.035) 54%, transparent 78%);
    background-size:220% 100%;
    background-position:120% 0;
    transition:opacity .28s ease, background-position .7s var(--q-motion-ease);
  }
  .hero-feature > *, .command-embed > *, .extra-card > *, .playground-card > *,
  .community-spotlight > *, .changelog-card > * { position:relative; z-index:1; }
  .hero-feature:hover::before,.command-embed:hover::before,.extra-card:hover::before,
  .playground-card:hover::before,.community-spotlight:hover::before,.changelog-card:hover::before {
    opacity:1;
    background-position:-20% 0;
  }
  .qotd-floating-card:hover {
    border-color:rgba(207,187,255,.82);
    box-shadow:0 34px 78px rgba(0,0,0,.38),0 0 0 1px rgba(196,164,255,.12),0 0 62px rgba(110,57,255,.26);
    filter:brightness(1.025);
  }
  .button,.primary-button,.secondary-button,.text-button,.flow-language,
  .command-picker-trigger,.site-tab,.header-language-button,.theme-toggle,.qotd-next {
    transition:color .22s ease,background-color .28s ease,border-color .28s ease,
      box-shadow .3s ease,transform .28s var(--q-motion-ease),filter .28s ease;
  }
  .button:hover,.primary-button:hover,.secondary-button:hover,.text-button:hover,
  .flow-language:hover,.command-picker-trigger:hover,.header-language-button:hover,.theme-toggle:hover {
    filter:brightness(1.06);
    box-shadow:0 10px 28px rgba(106,66,235,.16);
  }
}

/* Clear press feedback; does not interfere with the card's existing float animation. */
.button:active,.primary-button:active,.secondary-button:active,.text-button:active,
.flow-language:active,.command-picker-trigger:active,.site-tab:active,.qotd-next:active {
  transition-duration:.12s;
  filter:brightness(.98);
}

@media (max-width:700px) {
  /* Touch devices get lightweight state changes rather than hover sweeps. */
  .hero-visual::after { opacity:.72; }
  .hero-orbit { filter:none; }
  .discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,
  .permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,
  .community-spotlight,.changelog-card,.faq details,.setup-step,.permission-line,
  .troubleshoot-embed details,.command-detail-list details,.hero-feature { transition-duration:.22s; }
}

@media (prefers-reduced-motion:reduce) {
  .hero-orbit,.hero-visual::after,.hero-feature::before,.command-embed::before,
  .extra-card::before,.playground-card::before,.community-spotlight::before,.changelog-card::before {
    animation:none !important;
    transition:none !important;
  }
  .discord-embed:hover,.hero-embed:hover,.setup-embed:hover,.builder-panel:hover,
  .discord-message-preview:hover,.permission-note:hover,.notice:hover,.command-embed:hover,
  .playground-card:hover,.flow-card:hover,.extra-card:hover,.community-spotlight:hover,
  .changelog-card:hover,.faq details:hover,.setup-step:hover,.permission-line:hover,
  .troubleshoot-embed details:hover,.command-detail-list details:hover,.hero-feature:hover {
    transform:none !important;
  }
}

/* LIGHT THEME MOTION: luminous, readable glass instead of dark neon treatment. */
:root[data-theme="light"] .hero-visual::before {
  background: radial-gradient(ellipse at 50% 48%, rgba(126,101,239,.15), transparent 62%);
}
:root[data-theme="light"] .hero-visual::after {
  opacity: .62;
  filter: drop-shadow(0 0 4px rgba(126,101,239,.25));
}
:root[data-theme="light"] .hero-orbit-one { filter: drop-shadow(0 0 8px rgba(125,101,236,.18)); }
:root[data-theme="light"] .hero-orbit-two { filter: drop-shadow(0 0 7px rgba(104,122,230,.14)); }
:root[data-theme="light"] .hero-orbit-three { filter: drop-shadow(0 0 6px rgba(145,108,232,.16)); }
:root[data-theme="light"] .hero-orbit-four { filter: drop-shadow(0 0 5px rgba(79,153,225,.14)); }
:root[data-theme="light"] .hero-orbit-five { filter: drop-shadow(0 0 7px rgba(130,103,229,.15)); }
:root[data-theme="light"] .hero-orbit-six { filter: drop-shadow(0 0 5px rgba(103,123,226,.13)); }
:root[data-theme="light"] .hero-visual::after {
  box-shadow:
    0 0 12px 2px rgba(145,112,239,.42),
    225px 205px 0 1px rgba(143,116,229,.62),
    250px 35px 0 0 rgba(143,116,229,.54),
    75px 270px 0 0 rgba(143,116,229,.52),
    42px 118px 0 -1px rgba(99,146,222,.56),
    185px 82px 0 -1px rgba(160,139,229,.56),
    292px 155px 0 -1px rgba(125,115,225,.52),
    128px 238px 0 -1px rgba(150,130,226,.50);
}
@media (hover:hover) and (pointer:fine) {
  :root[data-theme="light"] .discord-embed:hover,
  :root[data-theme="light"] .hero-embed:hover,
  :root[data-theme="light"] .setup-embed:hover,
  :root[data-theme="light"] .builder-panel:hover,
  :root[data-theme="light"] .discord-message-preview:hover,
  :root[data-theme="light"] .permission-note:hover,
  :root[data-theme="light"] .notice:hover,
  :root[data-theme="light"] .command-embed:hover,
  :root[data-theme="light"] .playground-card:hover,
  :root[data-theme="light"] .flow-card:hover,
  :root[data-theme="light"] .extra-card:hover,
  :root[data-theme="light"] .community-spotlight:hover,
  :root[data-theme="light"] .changelog-card:hover,
  :root[data-theme="light"] .faq details:hover,
  :root[data-theme="light"] .setup-step:hover,
  :root[data-theme="light"] .permission-line:hover,
  :root[data-theme="light"] .troubleshoot-embed details:hover,
  :root[data-theme="light"] .command-detail-list details:hover,
  :root[data-theme="light"] .hero-feature:hover {
    box-shadow: 0 18px 42px rgba(55,52,120,.12), 0 0 0 1px rgba(123,77,255,.08), 0 0 26px rgba(123,77,255,.08);
  }
  :root[data-theme="light"] .hero-feature::before,
  :root[data-theme="light"] .command-embed::before,
  :root[data-theme="light"] .extra-card::before,
  :root[data-theme="light"] .playground-card::before,
  :root[data-theme="light"] .community-spotlight::before,
  :root[data-theme="light"] .changelog-card::before {
    background: linear-gradient(118deg, transparent 18%, rgba(119,98,208,.075) 46%, rgba(151,122,255,.045) 54%, transparent 78%);
  }
  :root[data-theme="light"] .qotd-floating-card:hover {
    filter: brightness(1.015);
  }
}

/* Final polish: consistent theme contrast, gentle glass feedback, and restrained motion. */
:root {
  --q-motion-ease: cubic-bezier(.22,.75,.25,1);
  --q-card-transition: 420ms;
}
html { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* Keep all card surfaces readable in the light palette, including nested text. */
:root[data-theme="light"] .qotd-floating-card,
:root[data-theme="light"] .qotd-floating-card :is(h1,h2,h3,p,strong,b,span,small,button) {
  -webkit-text-fill-color: currentColor;
}
:root[data-theme="light"] .qotd-floating-card { color:#292640; }
:root[data-theme="light"] .qotd-floating-card .qotd-author strong,
:root[data-theme="light"] .qotd-floating-card .hero-question,
:root[data-theme="light"] .qotd-floating-card #heroQotdQuestion { color:#292640 !important; }
:root[data-theme="light"] .qotd-floating-card .qotd-number,
:root[data-theme="light"] .qotd-floating-card .app-pill { color:#6552c8 !important; }
:root[data-theme="light"] .qotd-floating-card .qotd-author small,
:root[data-theme="light"] .qotd-floating-card #heroQotdPrompt,
:root[data-theme="light"] .qotd-floating-card .qotd-card-footer { color:#5e5b75 !important; }
:root[data-theme="light"] .qotd-floating-card .qotd-reaction,
:root[data-theme="light"] .qotd-floating-card .qotd-next { color:#5544b8 !important; }

/* A unified glass system across cards, panels, previews, and expandable sections. */
:root {
  --q-glass-hover-line: rgba(190,164,255,.62);
  --q-glass-hover-shadow: 0 20px 50px rgba(8,5,28,.22), 0 0 0 1px rgba(165,128,255,.10), 0 0 30px rgba(117,75,255,.12);
}
:root[data-theme="light"] {
  --q-glass-bg: rgba(255,255,255,.86);
  --q-glass-line: rgba(100,83,190,.18);
  --q-glass-shadow: 0 12px 32px rgba(54,52,105,.075), 0 2px 7px rgba(54,52,105,.035);
  --q-glass-hover-line: rgba(103,82,211,.40);
  --q-glass-hover-shadow: 0 18px 42px rgba(57,51,121,.12), 0 0 0 1px rgba(123,77,255,.075), 0 0 24px rgba(123,77,255,.07);
}
:where(.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,.community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,.timeline article,.hero-feature) {
  transition: background-color 380ms var(--q-motion-ease), color 260ms ease, border-color 380ms ease, box-shadow 420ms ease, transform 420ms var(--q-motion-ease);
}
:where(.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,.community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,.timeline article,.hero-feature) { overflow-wrap:anywhere; }

/* Light theme: luminous lavender glass, clear contrast, no white-on-white text. */
:root[data-theme="light"] body::before {
  background: radial-gradient(36vmax 28vmax at 12% 7%,rgba(117,99,235,.13),transparent 72%),
              radial-gradient(34vmax 28vmax at 88% 22%,rgba(181,143,255,.14),transparent 72%),
              radial-gradient(40vmax 30vmax at 55% 96%,rgba(76,158,219,.09),transparent 72%);
}
:root[data-theme="light"] :is(.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,.community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,.timeline article,.hero-feature) {
  color:#29283f;
  background-color:rgba(255,255,255,.84);
  border-color:rgba(104,91,174,.17);
  box-shadow:var(--q-glass-shadow);
}
:root[data-theme="light"] :is(.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,.community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,.timeline article,.hero-feature) :is(h1,h2,h3,h4,p,span,strong,b,label,small,summary) { color:inherit; }
:root[data-theme="light"] :is(input,textarea,select) {
  color:#29283f;
  background:rgba(255,255,255,.94);
  border-color:rgba(100,86,176,.28);
}
:root[data-theme="light"] :is(input,textarea,select)::placeholder { color:#77748f; opacity:1; }
:root[data-theme="light"] :is(.button,.primary-button,.secondary-button,.text-button,.flow-language,.command-picker-trigger,.site-tab,.header-language-button,.theme-toggle,.qotd-next) { transition:color 240ms ease,background-color 300ms ease,border-color 300ms ease,box-shadow 340ms ease,transform 340ms var(--q-motion-ease); }

/* Glass reflection sweep is limited to pointer devices and never affects layout. */
@media (hover:hover) and (pointer:fine) {
  :is(.hero-feature,.command-embed,.extra-card,.playground-card,.community-spotlight,.changelog-card) { position:relative; isolation:isolate; }
  :is(.hero-feature,.command-embed,.extra-card,.playground-card,.community-spotlight,.changelog-card)::before {
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
    background:linear-gradient(112deg,transparent 22%,rgba(255,255,255,.075) 44%,rgba(174,146,255,.10) 51%,transparent 72%);
    opacity:0; transform:translateX(-9%); transition:opacity 420ms ease,transform 700ms var(--q-motion-ease);
  }
  :is(.hero-feature,.command-embed,.extra-card,.playground-card,.community-spotlight,.changelog-card):hover::before { opacity:1; transform:translateX(0); }
  :root[data-theme="light"] :is(.hero-feature,.command-embed,.extra-card,.playground-card,.community-spotlight,.changelog-card)::before {
    background:linear-gradient(112deg,transparent 22%,rgba(111,91,210,.035) 44%,rgba(156,133,245,.10) 51%,transparent 72%);
  }
  .qotd-floating-card { transition:box-shadow 500ms ease,border-color 400ms ease,filter 500ms ease; }
  .qotd-floating-card:hover { filter:brightness(1.015); }
  :root[data-theme="light"] .qotd-floating-card:hover { box-shadow:0 30px 76px rgba(56,49,112,.17),0 0 0 1px rgba(120,96,222,.10),0 0 42px rgba(130,102,239,.14); }
}

/* Avoid continuous visual noise on small screens; retain the same design language. */
@media (max-width:700px) {
  .hero-orbit { filter:none !important; }
  .hero-visual::after { opacity:.5; }
  :is(.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,.community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,.timeline article,.hero-feature) { scroll-margin-top:90px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; }
  :is(.hero-feature,.command-embed,.extra-card,.playground-card,.community-spotlight,.changelog-card)::before { display:none !important; }
}

/* QUELLO REVEAL SOFT-FADE FIX — make opacity visibly ease in instead of popping. */
.q-motion-reveal {
  opacity: 0 !important;
  transform: translate3d(0, 26px, 0) scale(.985) !important;
  transition: opacity 1.35s cubic-bezier(.16, 1, .3, 1),
              transform 1.35s cubic-bezier(.16, 1, .3, 1) !important;
  transition-delay: 0ms;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.q-motion-reveal.q-motion-in {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}
@media (prefers-reduced-motion: reduce) {
  .q-motion-reveal, .q-motion-reveal.q-motion-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* QUELLO VISUAL FINISH — cohesive cosmic atmosphere and restrained glass surfaces */
:root {
  --q-surface-ease: cubic-bezier(.2,.72,.2,1);
  --q-card-radius: 18px;
}
body::before {
  background:
    radial-gradient(ellipse 42% 34% at 8% 8%, rgba(116,82,232,.15), transparent 76%),
    radial-gradient(ellipse 38% 32% at 92% 28%, rgba(65,112,210,.10), transparent 78%),
    radial-gradient(ellipse 48% 38% at 52% 100%, rgba(145,87,238,.09), transparent 78%);
  animation: qCosmicAtmosphere 28s ease-in-out infinite alternate;
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 42% 34% at 8% 8%, rgba(135,112,239,.13), transparent 76%),
    radial-gradient(ellipse 38% 32% at 92% 28%, rgba(94,150,224,.09), transparent 78%),
    radial-gradient(ellipse 48% 38% at 52% 100%, rgba(168,130,239,.08), transparent 78%);
}
@keyframes qCosmicAtmosphere { from { background-position:0 0, 0 0, 0 0; } to { background-position:18px -12px, -16px 14px, 12px -10px; } }
:where(.hero-feature,.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,.community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,.timeline article) {
  border-radius:var(--q-card-radius);
  transition: transform 520ms var(--q-surface-ease), background-color 380ms ease, border-color 380ms ease, box-shadow 520ms var(--q-surface-ease), color 260ms ease;
}
@media (hover:hover) and (pointer:fine) {
  :where(.hero-feature,.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,.community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,.timeline article):hover {
    transform:translateY(-3px);
    border-color:var(--q-glass-hover-line);
    box-shadow:var(--q-glass-hover-shadow);
  }
}
:where(button,a,input,textarea,select,[tabindex]):focus-visible {
  outline:2px solid var(--q-focus, #bda8ff);
  outline-offset:3px;
}
/* Modals and drawers: backdrop settles first, panel follows with a soft ease. */
.command-drawer-backdrop,.menu-overlay { transition:opacity 420ms ease, backdrop-filter 420ms ease; }
.command-drawer-panel { transition:transform 560ms cubic-bezier(.16,1,.3,1), opacity 420ms ease !important; }
.command-drawer:not(.open) .command-drawer-panel { opacity:.96; }
/* Tab content gets a longer, calmer entrance instead of a quick pop. */
.tab-panel-active { animation:qTabEnter 460ms cubic-bezier(.16,1,.3,1) both; }
@keyframes qTabEnter { from { opacity:0; transform:translate3d(0,10px,0); filter:blur(2px); } to { opacity:1; transform:translate3d(0,0,0); filter:blur(0); } }
@media (max-width:700px) {
  body::before { animation-duration:40s; }
  :where(.hero-feature,.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,.community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,.timeline article):hover { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  body::before { animation:none !important; }
  .tab-panel-active { animation:none !important; }
  .command-drawer-backdrop,.menu-overlay,.command-drawer-panel { transition:none !important; }
}

/* QUELLO VISUAL EXPANSION — signature cosmic details, polished surfaces and responsive-safe accents */
:root {
  --q-violet: #9a78ff;
  --q-violet-soft: rgba(154,120,255,.16);
  --q-blue-soft: rgba(92,151,255,.12);
  --q-amber-soft: rgba(255,157,91,.075);
  --q-panel-highlight: rgba(255,255,255,.055);
}
/* A second, very quiet atmospheric layer adds depth without adding DOM or blocking input. */
body::after {
  content:""; position:fixed; inset:-12%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 22% 19% at 18% 42%, var(--q-violet-soft), transparent 76%),
    radial-gradient(ellipse 18% 22% at 83% 70%, var(--q-blue-soft), transparent 78%),
    radial-gradient(ellipse 13% 16% at 70% 12%, var(--q-amber-soft), transparent 80%);
  opacity:.72; filter:blur(24px); transform:translate3d(0,0,0);
  animation:qCosmicLayer 38s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes qCosmicLayer {
  0% { transform:translate3d(-1.2%,.5%,0) scale(1); }
  100% { transform:translate3d(1.4%,-1%,0) scale(1.035); }
}
:root[data-theme="light"] { --q-panel-highlight:rgba(255,255,255,.68); }
:root[data-theme="light"] body::after { opacity:.48; filter:blur(30px); }
/* Unified glass finish: subtle top-edge reflection and restrained depth. */
:where(.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,.community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,.timeline article,.hero-feature) {
  background-image:linear-gradient(145deg,var(--q-panel-highlight),transparent 44%);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
:root[data-theme="light"] :where(.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,.community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,.timeline article,.hero-feature) {
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
/* Soft ambient edge on key cards; no constant pulsing. */
:where(.hero-feature,.playground-card,.command-embed,.extra-card,.community-spotlight,.changelog-card) {
  position:relative; isolation:isolate;
}
:where(.hero-feature,.playground-card,.command-embed,.extra-card,.community-spotlight,.changelog-card)::after {
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg,rgba(185,157,255,.24),transparent 36%,rgba(105,160,255,.13) 72%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.48;
}
/* Small controls respond with consistent, quiet feedback. */
:where(button,a,.theme-toggle,.header-language-button,.site-tab,.qotd-next) { transition-timing-function:cubic-bezier(.2,.72,.2,1); }
:where(button,a,.theme-toggle,.header-language-button,.site-tab) svg,
:where(button,a,.theme-toggle,.header-language-button,.site-tab) .icon { transition:transform 260ms cubic-bezier(.2,.72,.2,1),opacity 220ms ease; }
@media (hover:hover) and (pointer:fine) {
  :where(button,a,.theme-toggle,.header-language-button,.site-tab):hover svg,
  :where(button,a,.theme-toggle,.header-language-button,.site-tab):hover .icon { transform:translateY(-1px); }
}
/* Refined page scrollbar, with safe native fallback. */
html { scrollbar-color:rgba(151,119,235,.62) rgba(110,100,145,.10); scrollbar-width:thin; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:rgba(110,100,145,.08); }
::-webkit-scrollbar-thumb { background:linear-gradient(180deg,rgba(165,137,255,.72),rgba(103,112,210,.62)); border:3px solid transparent; background-clip:padding-box; border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,rgba(190,164,255,.9),rgba(120,139,235,.82)); background-clip:padding-box; }
/* Footer gets a deliberate finish without changing its content or layout. */
footer { position:relative; isolation:isolate; border-top:1px solid color-mix(in srgb,var(--line) 72%,rgba(157,125,255,.3)); }
footer::before { content:""; position:absolute; width:min(420px,70vw); height:1px; top:-1px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,transparent,rgba(166,137,255,.62),rgba(105,155,255,.36),transparent); pointer-events:none; }
footer a { text-decoration-color:rgba(166,137,255,.42); text-underline-offset:3px; }
/* Preserve a light, readable palette rather than carrying dark-theme glow values over. */
:root[data-theme="light"] :where(.hero-feature,.playground-card,.command-embed,.extra-card,.community-spotlight,.changelog-card) { box-shadow:0 12px 34px rgba(58,48,112,.075); }
:root[data-theme="light"] :where(.hero-feature,.playground-card,.command-embed,.extra-card,.community-spotlight,.changelog-card)::after { opacity:.34; }
@media(max-width:700px) {
  body::after { animation-duration:52s; filter:blur(34px); opacity:.45; }
  :where(.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,.permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,.community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,.timeline article,.hero-feature) { backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
  ::-webkit-scrollbar { width:5px; height:5px; }
}
@media(prefers-reduced-motion:reduce) {
  body::after { animation:none !important; }
  :where(button,a,.theme-toggle,.header-language-button,.site-tab) svg,
  :where(button,a,.theme-toggle,.header-language-button,.site-tab) .icon { transition:none !important; }
}

/* SIGNATURE EXPERIENCE — interactive spotlight, holographic glass and refined navigation. */
:root {
  --q-signature-violet: 158, 126, 255;
  --q-signature-blue: 111, 159, 255;
  --q-signature-amber: 255, 166, 112;
}
/* Local spotlight: pointer coordinates are set by signature-effects.js. */
.q-spotlight-surface { position:relative; isolation:isolate; }
.q-spotlight-surface::before {
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none;
  opacity:0; background:radial-gradient(260px circle at var(--q-spot-x,50%) var(--q-spot-y,50%),rgba(var(--q-signature-violet),.16),rgba(var(--q-signature-blue),.055) 42%,transparent 72%);
  transition:opacity 360ms ease;
}
.q-spotlight-surface:hover::before { opacity:1; }
.q-spotlight-surface > * { position:relative; z-index:1; }
/* Restrained iridescent edge, visible mostly while interacting. */
@media (hover:hover) and (pointer:fine) {
  :where(.discord-embed,.hero-feature,.playground-card,.command-embed,.extra-card,.community-spotlight,.changelog-card,.setup-step,.builder-panel):hover {
    border-color:rgba(174,148,255,.38);
    box-shadow:0 18px 48px rgba(8,5,24,.22),0 0 28px rgba(133,94,255,.105),inset 0 1px 0 rgba(255,255,255,.075);
  }
}
/* The main navigation becomes a calm floating glass rail after scrolling. */
.site-tabs { transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease; }
.site-tabs.is-floating {
  background:color-mix(in srgb,var(--nav-bg) 88%,transparent);
  box-shadow:0 12px 34px rgba(8,5,24,.13);
  border-bottom-color:color-mix(in srgb,var(--line) 72%,rgba(155,124,255,.3));
}
.site-tabs-inner { position:relative; }
.site-tab { position:relative; }
.site-tab.active { text-shadow:0 0 18px rgba(160,130,255,.2); }
.site-tab.active::before {
  content:""; position:absolute; left:15px; right:15px; bottom:5px; height:2px; border-radius:99px;
  background:linear-gradient(90deg,rgba(145,111,255,.25),rgba(177,145,255,.95),rgba(112,159,255,.5));
  box-shadow:0 0 12px rgba(151,116,255,.4);
}
/* A small signature shimmer for the brand mark; no layout shift. */
.brand-avatar { filter:drop-shadow(0 0 7px rgba(145,105,255,.2)); transition:filter .35s ease,transform .5s cubic-bezier(.2,.72,.2,1); }
@media (hover:hover) and (pointer:fine) {
  .brand:hover .brand-avatar { filter:drop-shadow(0 0 12px rgba(159,125,255,.55)); transform:rotate(-7deg) scale(1.045); }
}
.brand span { background:linear-gradient(100deg,currentColor 0%,currentColor 42%,rgba(184,158,255,.95) 50%,currentColor 60%,currentColor 100%); background-size:220% 100%; background-clip:text; -webkit-background-clip:text; }
@media (hover:hover) and (pointer:fine) { .brand:hover span { color:transparent; animation:qBrandSheen 1.05s ease both; } }
@keyframes qBrandSheen { from{background-position:100% 0} to{background-position:0 0} }
/* Image placeholders are only active while an actual asset is loading. */
.q-image-loading { background:linear-gradient(105deg,rgba(130,112,177,.12) 25%,rgba(190,170,255,.25) 42%,rgba(130,112,177,.12) 62%); background-size:220% 100%; animation:qImageShimmer 1.25s ease-in-out infinite; }
@keyframes qImageShimmer { to{background-position-x:-220%} }
:root[data-theme="light"] .q-spotlight-surface::before { background:radial-gradient(260px circle at var(--q-spot-x,50%) var(--q-spot-y,50%),rgba(128,94,220,.10),rgba(95,135,220,.035) 44%,transparent 72%); }
@media(max-width:700px) {
  .q-spotlight-surface::before { display:none; }
  .site-tabs.is-floating { box-shadow:0 7px 22px rgba(8,5,24,.09); }
}
@media(prefers-reduced-motion:reduce) {
  .q-spotlight-surface::before,.brand-avatar,.brand span,.q-image-loading { animation:none !important; transition:none !important; }
  .site-tabs,.site-tab { transition:none !important; }
}


/* HEADER WORDMARK CONTRAST + MOBILE PERFORMANCE SAFETY PATCH */
/* Keep the Quello wordmark readable in both themes; avoid transparent animated text. */
.nav .brand span {
  display:inline-block !important;
  color:var(--text-strong, var(--text)) !important;
  -webkit-text-fill-color:currentColor !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  opacity:1 !important;
  text-shadow:none !important;
  animation:none !important;
  font-weight:800;
  letter-spacing:-.035em;
}
:root[data-theme="light"] .nav .brand span { color:#29243d !important; -webkit-text-fill-color:#29243d !important; }
:root[data-theme="dark"] .nav .brand span,
:root:not([data-theme="light"]) .nav .brand span { color:#f0eaff !important; -webkit-text-fill-color:#f0eaff !important; }

/* Mobile: retain the visual identity, but remove costly continuous effects. */
@media (max-width:700px), (hover:none) and (pointer:coarse) {
  .nav .brand span { display:inline-block !important; font-size:16px; }
  .nav .brand { gap:8px; min-width:0; }
  .nav .brand-avatar { flex:0 0 auto; }
  body::before, body::after,
  .hero-visual::before, .hero-visual::after,
  .hero-orbit, .hero-bot-glow, .hero-particles,
  .qotd-floating-card {
    animation:none !important;
  }
  body::before { transform:none !important; }
  body::after { opacity:.22 !important; filter:none !important; transform:none !important; }
  :where(.discord-embed,.hero-embed,.setup-embed,.builder-panel,.discord-message-preview,
    .permission-note,.notice,.command-embed,.playground-card,.flow-card,.extra-card,
    .community-spotlight,.changelog-card,.setup-step,.permission-line,.faq details,
    .timeline article,.hero-feature,.nav,.site-tabs) {
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
  .q-spotlight-surface::before { display:none !important; }
  .brand-avatar { filter:none !important; }
  .site-tabs.is-floating { box-shadow:0 4px 14px rgba(8,5,24,.08); }
}