/* ============================================================
   DUCK INTEL ACADEMY — v8 "SPATIAL" REDESIGN
   Every layer below leans on the 120-pattern modern CSS set:
   @property gradients, scroll()/view() timelines, :has(), @scope,
   container queries, subgrid, @starting-style, color-mix,
   relative color syntax, light-dark tokens, mask/clip/offset-path,
   native nesting, cascade layers, logical props, and more.
   ============================================================ */

/* #001 registered custom property — animatable angle for conic glows */
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --glow-o{syntax:"<number>";initial-value:.55;inherits:false}

/* #101-104 token architecture — cascade layers + light-dark + color-mix */
@layer reset, base, layout, components, motion, states;

@layer reset{
  *,*::before,*::after{box-sizing:border-box;margin:0}
  img,svg{display:block;max-width:100%}
  button,input,select,output{font:inherit;color:inherit}
}

@layer base{
  :root{
    color-scheme:dark;
    /* spatial palette — warm near-black, lime signal, amber warmth */
    --bg:light-dark(#f7f8f3,#0a0c07);
    --bg-2:light-dark(#eef0e6,#0e110a);
    --card:light-dark(#ffffff,#12160c);
    --card-2:light-dark(#f4f6ec,#161b0f);
    --line:light-dark(#dfe3d2,#232a17);
    --line-2:light-dark(#cdd3ba,#2f381d);
    --txt:light-dark(#131709,#eef3df);
    --mut:light-dark(#4c5540,#a9b48e);
    --dim:light-dark(#7a8467,#6d7857);
    --lime:#a8e04b;
    --lime-2:#c8f169;
    --amber:#f5b83d;
    /* #106 relative color syntax — derived tints, no hardcoded rgba */
    --lime-soft:hsl(from var(--lime) h s l / .10);
    --lime-softer:hsl(from var(--lime) h s l / .055);
    --lime-line:hsl(from var(--lime) h s l / .35);
    --amber-soft:hsl(from var(--amber) h s l / .12);
    /* rotating conic glow (the reel technique) */
    --glow:conic-gradient(from var(--a),transparent 0 12%,var(--lime) 22%,var(--amber) 30%,transparent 42% 58%,var(--lime) 70%,transparent 82%);
    --r-lg:28px;--r-md:18px;--r-sm:12px;
    --shadow-1:0 1px 0 hsl(from var(--lime) h s l / .06) inset,0 24px 60px -28px hsl(0 0% 0% / .55);
    --font:'Sora',system-ui,sans-serif;
  }
  html{scroll-behavior:smooth;scroll-padding-top:110px;accent-color:var(--lime);caret-color:var(--lime)}
  body{
    background:var(--bg);color:var(--txt);
    font-family:var(--font);line-height:1.65;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:hidden;overflow-x:clip;
    min-block-size:100dvh;display:grid;
    grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,100%);
  }
  /* #002 layered spatial backdrop — dot grid + ambient radial glows, fixed */
  body::before{
    content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
    background:
      radial-gradient(60rem 40rem at 85% -10%,hsl(from var(--lime) h s l / .07),transparent 60%),
      radial-gradient(50rem 36rem at -15% 30%,hsl(from var(--amber) h s l / .05),transparent 60%),
      radial-gradient(45rem 45rem at 50% 115%,hsl(from var(--lime) h s l / .05),transparent 60%),
      var(--bg);
  }
  body::after{
    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
    background-image:radial-gradient(hsl(from var(--txt) h s l / .055) 1px,transparent 1.6px);
    background-size:34px 34px;
    mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 30%,transparent 78%);
  }
  ::selection{background:var(--lime);color:#0c1006}
  /* #090 thin styled scrollbars */
  body{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid var(--bg)}
  :focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
  h1,h2,h3{text-wrap:balance;letter-spacing:-.02em}
  p,li{text-wrap:pretty}
  a{color:var(--lime);text-decoration-thickness:.08em;text-underline-offset:.2em;text-decoration-skip-ink:auto}
  /* #115 safe-area insets */
  @supports(padding:env(safe-area-inset-top)){
    body{padding-inline:env(safe-area-inset-left) env(safe-area-inset-right)}
  }
}

@layer layout{
  .wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .skip-link{position:fixed;top:-60px;left:16px;z-index:99;background:var(--lime);color:#0c1006;padding:10px 18px;border-radius:99px;font-weight:700;transition:top .25s}
  .skip-link:focus{top:14px}
  .block{padding-block:clamp(4rem,9vw,7.5rem)}
  /* #118 content-visibility — skip offscreen rendering work */
  .block,.cats,.grid{content-visibility:auto;contain-intrinsic-size:auto 800px}
}

/* ============ NAV — floating glass pill ============ */
@layer components{
  nav{position:sticky;top:14px;z-index:50;padding-inline:clamp(12px,3vw,28px);margin-block-start:14px}
  .navpill{
    display:flex;align-items:center;gap:8px;
    max-width:720px;margin-inline:auto;padding:9px 12px;
    background:hsl(from var(--card) h s l / .72);
    backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid var(--line);border-radius:99px;
    box-shadow:0 18px 50px -22px hsl(0 0% 0% / .6);
    /* #045 transition on discrete props for future hide/show */
    transition:transform .35s,box-shadow .35s;
  }
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:.98rem;color:var(--txt);text-decoration:none;min-width:0}
  .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand img{width:38px;height:40px;border-radius:12px;object-fit:cover;object-position:top;border:1px solid var(--line-2)}
  nav .sp{flex:1}
  nav a.nl{color:var(--mut);font-size:.88rem;padding:9px 18px;border-radius:99px;text-decoration:none;transition:color .2s,background .2s}
  nav a.nl:hover{color:var(--txt);background:var(--lime-soft)}
  /* #117 scroll progress bar — pure scroll() timeline */
  .progress{
    position:fixed;inset-inline:0;top:0;height:3px;z-index:60;
    background:linear-gradient(90deg,var(--lime),var(--amber));
    transform-origin:0 50%;scale:0 1;
    animation:progressbar linear both;animation-timeline:scroll(root);
  }
  @keyframes progressbar{to{scale:1 1}}
}

/* ============ HERO — spatial stage ============ */
@layer components{
  .hero{padding-block:clamp(4.5rem,10vh,8rem) clamp(3rem,7vh,5rem);position:relative}
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
  .kicker{
    display:inline-flex;align-items:center;gap:9px;padding:8px 18px;
    border:1px solid var(--lime-line);border-radius:99px;
    color:var(--lime);font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
    background:var(--lime-softer);
  }
  .kicker::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--lime);box-shadow:0 0 14px var(--lime);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.35;scale:.75}}
  h1{font-size:clamp(2.5rem,5.6vw,4.35rem);line-height:1.04;margin:26px 0 22px;font-weight:800;font-variation-settings:"wght" 800}
  /* #074 gradient text */
  h1 em{
    font-style:normal;
    background:linear-gradient(100deg,var(--lime) 10%,var(--amber) 55%,var(--lime-2) 95%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .lead{color:var(--mut);font-size:1.12rem;max-width:56ch}
  .typeline{margin-top:22px;font-family:ui-monospace,'SF Mono',monospace;font-size:.95rem;color:var(--lime);min-height:1.6em}
  /* #042 typing effect with steps() + blinking caret */
  .typing{
    display:inline-block;overflow:hidden;white-space:nowrap;max-width:100%;
    border-inline-end:2px solid var(--lime);
    animation:typing 3.2s steps(28) .8s both,caret 1s step-end infinite;
  }
  @keyframes typing{from{width:0}to{width:100%}}
  @keyframes caret{50%{border-color:transparent}}
  .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
  .stats>div{
    padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);
    background:hsl(from var(--card) h s l / .6);
    transition:border-color .25s,transform .25s;
  }
  .stats>div:hover{border-color:var(--lime-line);transform:translateY(-3px)}
  .stats b{font-size:1.7rem;display:block;font-weight:800;letter-spacing:-.02em}
  .stats b i{color:var(--lime);font-style:normal}
  .stats span{color:var(--dim);font-size:.68rem;letter-spacing:.14em}

  /* --- spatial duck stage: layered depth, 3D flip, orbiting light --- */
  .stage{position:relative;isolation:isolate;display:grid;place-items:center;min-block-size:420px}
  /* #089 view-transition name on the scene (NOT the flip element — that flattens 3D) */
  .scene{perspective:75rem;view-transition-name:duckhero;position:relative;z-index:1}
  .duckframe{position:relative;isolation:isolate;width:min(340px,100%);border-radius:30px}
  /* #001/#003 rotating conic glow ring + soft bloom */
  .duckframe::before,.duckframe::after{
    content:"";position:absolute;inset:-3px;border-radius:33px;background:var(--glow);
    animation:spin 9s linear infinite;z-index:-1;
  }
  .duckframe::before{opacity:.9}
  .duckframe::after{inset:-6px;opacity:.4;filter:blur(38px);mix-blend-mode:screen}
  @keyframes spin{to{--a:360deg}}
  .flip3d{transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.8,.2,1);position:relative}
  .flip3d .back{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;border-radius:30px}
  .flip3d .front{backface-visibility:hidden}
  .scene:hover .flip3d{transform:rotateY(180deg)}
  .duck{border-radius:30px;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
  /* #008 orbiting light dot on an offset-path */
  .orb{
    position:absolute;width:14px;height:14px;border-radius:99px;z-index:2;
    background:var(--amber);box-shadow:0 0 18px 4px hsl(from var(--amber) h s l / .5);
    offset-path:path("M-40,150 C60,-30 320,300 420,120");
    animation:travel 8s ease-in-out infinite alternate;
  }
  @keyframes travel{to{offset-distance:100%}}
  /* floating glass chips, staggered */
  .chip{
    position:absolute;z-index:2;padding:12px 18px;border-radius:16px;
    background:hsl(from var(--card) h s l / .78);backdrop-filter:blur(12px);
    border:1px solid var(--line);box-shadow:var(--shadow-1);
    font-size:.78rem;color:var(--mut);line-height:1.45;
    animation:float 6s ease-in-out infinite;
  }
  .chip b{display:block;color:var(--lime);font-size:.86rem;margin-bottom:2px}
  .chip.c1{top:6%;left:-4%;animation-delay:0s}
  .chip.c2{bottom:16%;right:-5%;animation-delay:1.6s}
  .chip.c3{bottom:-3%;left:8%;animation-delay:3.1s}
  @keyframes float{50%{translate:0 -12px}}
  /* #087 data-tip tooltips */
  [data-tip]{position:relative}
  [data-tip]:hover::after{
    content:attr(data-tip);position:absolute;inset:auto auto calc(100% + 10px) 50%;translate:-50% 0;
    background:var(--card-2);border:1px solid var(--line-2);color:var(--txt);
    padding:7px 13px;border-radius:10px;font-size:.72rem;white-space:nowrap;z-index:20;
    animation:tipin .2s ease both;
  }
  @keyframes tipin{from{opacity:0;translate:-50% 6px}}
}

/* ============ SEARCH ZONE ============ */
@layer components{
  .secthead{max-width:640px;margin-bottom:2.6rem}
  .secthead h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;margin-bottom:12px}
  .secthead p{color:var(--mut)}
  .searchzone{position:relative;isolation:isolate}
  /* glowing frame — #001 conic spin, brighter on focus-within (#026 :has/#027 focus-within) */
  .searchbar{
    position:relative;padding:22px;border-radius:var(--r-lg);
    background:var(--card);
    border:1px solid var(--line);box-shadow:var(--shadow-1);
    transition:border-color .3s;
  }
  .searchbar::before,.searchbar::after{
    content:"";position:absolute;inset:-2px;border-radius:calc(var(--r-lg) + 2px);
    background:var(--glow);animation:spin 10s linear infinite;z-index:-1;
    opacity:var(--glow-o,.4);transition:opacity .4s;
  }
  .searchbar::after{filter:blur(30px);opacity:.18;mix-blend-mode:screen}
  .searchzone:has(#q:focus) .searchbar{--glow-o:.85;border-color:var(--lime-line)}
  .searchrow{display:flex;align-items:center;gap:14px;color:var(--dim)}
  .searchrow svg{flex:none}
  .field{flex:1;min-width:0}
  /* #021 floating label */
  .floatfield{position:relative;display:block}
  .floatfield input{
    width:100%;background:transparent;border:0;outline:none;
    font-size:1.15rem;padding:10px 2px;color:var(--txt);
    border-block-end:1px solid var(--line);transition:border-color .3s;
  }
  .floatfield input:focus{border-color:var(--lime)}
  .floatfield label{
    position:absolute;inset-inline-start:2px;top:10px;color:var(--dim);pointer-events:none;
    font-size:.95rem;transition:.22s cubic-bezier(.2,.8,.2,1);
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .floatfield input:focus+label,.floatfield input:not(:placeholder-shown)+label{
    top:-14px;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);
  }
  .icon-btn{
    flex:none;width:44px;height:44px;border-radius:14px;border:1px solid var(--line-2);
    background:var(--card-2);color:var(--lime);font-weight:800;cursor:pointer;
    transition:.25s;
  }
  .icon-btn:hover{border-color:var(--lime);box-shadow:0 0 0 4px var(--lime-soft);rotate:8deg}
  .hints{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
  .hint{
    border:1px dashed var(--line-2);background:transparent;color:var(--mut);
    padding:8px 14px;border-radius:99px;font-size:.76rem;cursor:pointer;
    transition:.22s;
  }
  .hint code{color:var(--amber);font-weight:700}
  .hint:hover{border-color:var(--lime);border-style:solid;color:var(--txt);background:var(--lime-softer);translate:0 -2px}

  /* toolbar */
  .toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-block:26px 8px}
  #count{color:var(--dim);font-size:.85rem;margin-inline-end:auto}
  #count b{color:var(--lime);font-size:1.05rem}
  .select-wrap select{
    appearance:none;background:var(--card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a8e04b' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;
    border:1px solid var(--line);border-radius:99px;padding:9px 38px 9px 16px;
    color:var(--mut);font-size:.82rem;cursor:pointer;transition:border-color .2s;
  }
  .select-wrap select:hover{border-color:var(--lime-line)}
  .rangewrap{display:flex;align-items:center;gap:12px;font-size:.8rem;color:var(--dim)}
  /* #059 styled range input */
  input[type="range"]{appearance:none;-webkit-appearance:none;width:150px;height:4px;border-radius:99px;background:var(--line-2);cursor:pointer}
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;width:18px;height:18px;border-radius:99px;background:var(--lime);
    border:3px solid var(--bg);box-shadow:0 0 12px hsl(from var(--lime) h s l / .6);transition:scale .15s;
  }
  input[type="range"]::-webkit-slider-thumb:hover{scale:1.25}
  input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:99px;background:var(--lime);border:3px solid var(--bg)}
  output{color:var(--lime);font-weight:700}

  /* filter rail + tabs */
  .rail{display:grid;gap:18px;margin-block:20px 34px}
  .raillabel{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
  .tabs{display:flex;gap:8px;overflow-x:auto;padding-block:4px;scrollbar-width:none;scroll-snap-type:x proximity}
  .tabs::-webkit-scrollbar{display:none}
  .tabs>*{scroll-snap-align:start}
  /* #111 mask fade on the scrollable tab strip */
  .tabs{mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .tab{
    flex:none;border:1px solid var(--line);background:hsl(from var(--card) h s l / .6);
    color:var(--mut);padding:9px 18px;border-radius:99px;font-size:.82rem;cursor:pointer;
    transition:.22s;white-space:nowrap;
  }
  .tab:hover{color:var(--txt);border-color:var(--lime-line);translate:0 -2px}
  .tab.active{background:var(--lime);border-color:var(--lime);color:#0c1006;font-weight:700;box-shadow:0 8px 24px -8px hsl(from var(--lime) h s l / .5)}
}

/* ============ RESULTS / CARDS — spotlight + stagger ============ */
@layer components{
  #results{overflow-anchor:none}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:20px}
  /* container query context for cards */
  .card,.catc{
    position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;
    padding:26px;border-radius:var(--r-lg);text-decoration:none;
    background:var(--card);
    border:1px solid var(--line);
    transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;
    /* #031 staggered entrance driven by --i */
    animation:cardin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*55ms);
  }
  @keyframes cardin{from{opacity:0;translate:0 26px;scale:.97}}
  /* #006 pointer spotlight — radial glow follows --mx/--my (set in app.js) */
  .card::before,.catc::before{
    content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),hsl(from var(--lime) h s l / .12),transparent 70%);
    opacity:0;transition:opacity .35s;
  }
  .card:hover::before,.catc:hover::before{opacity:1}
  /* gradient border reveal on hover */
  .card::after,.catc::after{
    content:"";position:absolute;inset:-1px;border-radius:calc(var(--r-lg) + 1px);z-index:-2;
    background:var(--glow);opacity:0;transition:opacity .35s;animation:spin 6s linear infinite paused;
  }
  .card:hover::after,.catc:hover::after{opacity:.7;animation-play-state:running}
  .card:hover,.catc:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 30px 60px -24px hsl(0 0% 0% / .65)}
  .card h3{font-size:1.02rem;font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:var(--txt)}
  .card h3 mark,.card .what mark{background:var(--amber-soft);color:var(--amber);border-radius:5px;padding-inline:3px}
  .badge{
    font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    padding:4px 10px;border-radius:99px;
  }
  .badge.gh{background:var(--lime-soft);color:var(--lime);border:1px solid var(--lime-line)}
  .badge.web{background:var(--amber-soft);color:var(--amber);border:1px solid hsl(from var(--amber) h s l / .35)}
  .catlink{margin-inline-start:auto;font-size:.68rem;color:var(--dim);text-decoration:none;letter-spacing:.06em}
  .catlink:hover{color:var(--lime)}
  .card .u{font-family:ui-monospace,monospace;font-size:.74rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .card .what{color:var(--mut);font-size:.88rem;flex:1}
  .card details{font-size:.85rem;color:var(--mut)}
  .card summary{
    cursor:pointer;color:var(--lime);font-weight:600;font-size:.84rem;list-style:none;
    display:flex;align-items:center;gap:8px;padding-block:6px;
  }
  .card summary::before{content:"▸";transition:rotate .25s;color:var(--amber)}
  .card details[open] summary::before{rotate:90deg}
  .card details p{margin-top:8px;padding-inline-start:16px;border-inline-start:2px solid var(--lime-line)}
  .visit{font-size:.84rem;font-weight:700;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
  .visit:hover{text-decoration:underline}
  .visit::before{content:"›";color:var(--amber)}
}

/* ============ CATEGORY GRID (home) ============ */
@layer components{
  .cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px}
  .catc .num{font-size:.64rem;letter-spacing:.24em;color:var(--amber);font-weight:700}
  .catc h3{font-size:1.05rem;color:var(--txt)}
  .catc p{font-size:.84rem;color:var(--mut);flex:1}
  .catc .n{font-size:.78rem;font-weight:700;color:var(--lime)}
}

/* ============ DIVIDER / FOOTER / SUGGEST ============ */
@layer components{
  .divider{
    display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);
    align-items:center;padding:clamp(2rem,4vw,3.5rem);
    border:1px solid var(--line);border-radius:var(--r-lg);
    background:linear-gradient(120deg,var(--lime-softer),transparent 55%),hsl(from var(--card) h s l / .7);
  }
  /* #075/#076 mask fade + vignette on the duck */
  .divider img{
    width:100%;aspect-ratio:1;object-fit:cover;object-position:top;border-radius:22px;
    mask-image:radial-gradient(circle at 50% 42%,#000 55%,transparent 98%);
  }
  .divider h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-bottom:10px}
  .divider p{color:var(--mut);max-width:60ch}

  footer{margin-top:5rem;border-block-start:1px solid var(--line);padding-block:3.5rem 2.5rem;background:hsl(from var(--bg-2) h s l / .8)}
  footer .cols{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:clamp(2rem,5vw,4rem)}
  footer h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
  footer a{display:block;color:var(--mut);text-decoration:none;font-size:.86rem;padding-block:4px}
  footer a:hover{color:var(--lime)}
  .note{color:var(--dim);font-size:.78rem;margin-top:2.5rem}
  /* suggest form */
  .suggest{display:grid;gap:12px}
  .suggest .field-row{display:grid;gap:6px}
  .suggest label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .suggest input,.suggest textarea{
    background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-sm);
    padding:11px 14px;color:var(--txt);outline:none;transition:border-color .25s;
    /* #062 field-sizing */
    field-sizing:content;min-height:44px;
  }
  .suggest input:focus,.suggest textarea:focus{border-color:var(--lime)}
  /* #064 :user-invalid */
  .suggest input:user-invalid{border-color:#e05c5c}
  .suggest input:user-valid{border-color:var(--lime-line)}
  .sgnote{font-size:.76rem;color:var(--lime);min-height:1.2em}
  .button{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--lime);color:#0c1006;font-weight:800;border:0;cursor:pointer;
    padding:13px 26px;border-radius:99px;font-size:.9rem;
    box-shadow:0 14px 34px -12px hsl(from var(--lime) h s l / .55);
    transition:transform .2s,box-shadow .2s;
  }
  .button:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px hsl(from var(--lime) h s l / .7)}
  .button:active{scale:.97}
  /* motion kill switch */
  .switch{display:flex;align-items:center;gap:10px;cursor:pointer;margin-top:20px}
  .switch input{position:absolute;opacity:0}
  .switch .track{
    width:44px;height:24px;border-radius:99px;background:var(--line-2);position:relative;transition:.25s;flex:none;
  }
  .switch .track::after{
    content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:99px;
    background:var(--txt);transition:.25s cubic-bezier(.2,.8,.2,1);
  }
  .switch input:checked+.track{background:var(--lime)}
  .switch input:checked+.track::after{translate:20px 0;background:#0c1006}
  .switch input:focus-visible+.track{outline:2px solid var(--lime);outline-offset:3px}
}

/* ============ CATEGORY PAGES — holy grail ============ */
@layer components{
  .crumbs{font-size:.8rem;color:var(--dim);margin-block:2.2rem 0}
  .crumbs a{color:var(--mut);text-decoration:none}
  .crumbs a:hover{color:var(--lime)}
  .cathead{padding-block:2rem 1rem;max-width:760px}
  .cathead h1{font-size:clamp(2rem,4.5vw,3.4rem);margin:16px 0 14px}
  .cathead p{color:var(--mut);font-size:1.05rem}
  /* #034 holy-grail named-area grid */
  .catholy{display:grid;grid-template:"side main" auto/15rem minmax(0,1fr);gap:clamp(1.5rem,3vw,2.8rem);align-items:start;padding-block-end:5rem}
  .catside{
    grid-area:side;position:sticky;top:96px;display:flex;flex-direction:column;gap:2px;
    max-height:calc(100dvh - 130px);overflow:auto;scrollbar-width:thin;
    padding:18px 10px 18px 0;border-inline-end:1px solid var(--line);
    overscroll-behavior:contain;
  }
  .catside .sidetitle{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;padding-inline-start:12px}
  .catside a{
    font-size:.79rem;color:var(--mut);padding:8px 12px;border-radius:10px;text-decoration:none;
    border-inline-start:2px solid transparent;transition:.2s;
  }
  .catside a:hover{color:var(--lime);background:var(--lime-softer);border-inline-start-color:var(--lime)}
  .catholy .grid{grid-area:main;padding-top:6px}
  .faq{margin-top:3.5rem;display:grid;gap:12px;max-width:760px}
  .faq details{border:1px solid var(--line);border-radius:var(--r-md);padding:4px 20px;background:hsl(from var(--card) h s l / .6)}
  .faq summary{cursor:pointer;font-weight:600;padding-block:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .faq summary::after{content:"+";color:var(--lime);font-size:1.2rem;transition:rotate .25s}
  .faq details[open] summary::after{rotate:45deg}
  .faq details p{color:var(--mut);padding-block-end:16px;font-size:.92rem}
}

/* ============ ABOUT PAGE — editorial prose ============ */
@layer components{
  .prose{max-width:70ch;padding-block:3rem}
  .prose h2{margin-block:2.4rem 1rem;font-size:1.6rem}
  .prose p{margin-block:1.1rem;color:var(--mut)}
  /* #044 drop cap */
  .dropcap::first-letter{
    initial-letter:2;font-size:3.4em;float:left;line-height:.85;
    padding-inline-end:12px;color:var(--lime);font-weight:800;
  }
  /* #046 fancy quotes */
  .duckquote{
    margin-block:2.2rem;padding:26px 30px;border-inline-start:3px solid var(--lime);
    background:var(--lime-softer);border-radius:0 var(--r-md) var(--r-md) 0;
    font-size:1.15rem;font-style:italic;color:var(--txt);
    quotes:"“" "”";
  }
  .duckquote::before{content:open-quote;color:var(--amber);font-size:1.6em;line-height:0;margin-inline-end:4px}
  .duckquote::after{content:close-quote;color:var(--amber);font-size:1.6em;line-height:0;margin-inline-start:4px}
  /* #048 stepped list with counters */
  .steps{counter-reset:step;display:grid;gap:14px;margin-block:1.6rem;padding:0;list-style:none}
  .steps li{counter-increment:step;position:relative;padding-inline-start:52px;color:var(--mut)}
  .steps li::before{
    content:counter(step,decimal-leading-zero);position:absolute;inset-inline-start:0;top:0;
    width:36px;height:36px;display:grid;place-items:center;border-radius:12px;
    background:var(--lime-soft);color:var(--lime);font-weight:800;font-size:.8rem;
    border:1px solid var(--lime-line);
  }
  .steps.outline li::before{background:transparent}
  .callout{
    margin-block:2rem;padding:20px 24px;border-radius:var(--r-md);
    background:var(--amber-soft);border:1px solid hsl(from var(--amber) h s l / .3);
    color:var(--txt);font-size:.94rem;
  }
  .callout b{color:var(--amber)}
}

/* ============ DIALOG ============ */
@layer components{
  dialog{
    margin:auto;max-width:min(520px,92vw);border:1px solid var(--line-2);border-radius:var(--r-lg);
    background:var(--card);color:var(--txt);padding:32px;
    box-shadow:0 40px 100px -20px hsl(0 0% 0% / .7);
    overscroll-behavior:contain;
  }
  dialog::backdrop{background:hsl(80 30% 4% / .7);backdrop-filter:blur(8px)}
  dialog h3{font-size:1.3rem;margin-bottom:18px}
  dialog .steps li{font-size:.9rem}
  dialog form{margin-top:22px;text-align:end}
  /* #036 @starting-style dialog entrance */
  dialog[open]{animation:dlgin .35s cubic-bezier(.2,.8,.2,1)}
  @keyframes dlgin{from{opacity:0;translate:0 24px;scale:.96}}
}

/* ============ MOTION — scroll reveals ============ */
@layer motion{
  /* #014 view()-driven section reveals, no JS */
  @supports (animation-timeline: view()){
    .secthead,.divider,.faq>details{
      animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%;
    }
    .catc{animation-timeline:view();animation-range:entry 0% entry 30%;animation-name:rise2}
  }
  @keyframes rise{from{opacity:0;translate:0 40px}}
  @keyframes rise2{from{opacity:0;translate:0 30px;scale:.98}}
  /* #052 global motion kill switch */
  html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
    animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;
  }
  html[data-motion="off"] .card::after,html[data-motion="off"] .catc::after,
  html[data-motion="off"] .searchbar::before,html[data-motion="off"] .searchbar::after,
  html[data-motion="off"] .duckframe::before,html[data-motion="off"] .duckframe::after{opacity:0!important}
}

/* ============ RESPONSIVE / STATES ============ */
@layer states{
  @media(max-width:1100px){
    .catholy{grid-template:"side" auto "main" 1fr/minmax(0,1fr)}
    .catside{position:static;flex-direction:row;flex-wrap:wrap;max-height:none;border-inline-end:0;border-block-end:1px solid var(--line);padding:0 0 16px}
    .catside a{border-inline-start:0;border:1px solid var(--line);border-radius:99px;font-size:.74rem;padding:7px 13px}
    .catside a:hover{border-color:var(--lime)}
  }
  @media(max-width:960px){
    footer .cols{grid-template-columns:1fr 1fr}
    .hero .wrap{grid-template-columns:minmax(0,1fr);gap:3.5rem}
    .stage{min-block-size:380px;order:-1}
    .duckframe{width:min(300px,78vw)}
    .chip.c1{left:0}.chip.c2{right:0}
  }
  @media(max-width:860px){
    .flip3d .back{display:none}
    .scene:hover .flip3d{transform:none}
    .orb{display:none}
    .divider{grid-template-columns:1fr;text-align:center}
    .divider img{max-width:200px;margin-inline:auto}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
    .hero{min-block-size:auto}
  }
  @media(max-width:520px){
    h1{font-size:clamp(1.85rem,9vw,2.4rem)}
    .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .stats>div{padding:14px 16px}
    .stats b{font-size:1.35rem}
    footer .cols{grid-template-columns:1fr}
    .toolbar{gap:10px}
    .chip{padding:9px 13px;font-size:.7rem}
    .searchbar{padding:16px}
  }
  @media (hover:none){.card:hover,.catc:hover{transform:none}.card:hover::after,.catc:hover::after,.card:hover::before,.catc:hover::before{opacity:0}}
  /* #112 coarse pointers — 44px touch targets */
  @media (pointer:coarse){
    .tab,.hint,summary,nav a.nl,.icon-btn{min-block-size:44px;display:inline-flex;align-items:center}
    .tab{display:inline-flex}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
    .progress{display:none}
  }
  /* #108 forced colors / #109 high contrast */
  @media (forced-colors:active){
    .tab.active,.button,.icon-btn{border:1px solid ButtonText}
    .badge{forced-color-adjust:none}
  }
  @media (prefers-contrast:more){
    .card,.catc,.searchbar,.catside a{border-width:2px}
    .card::after,.catc::after,.duckframe::before,.duckframe::after{display:none}
  }
  /* #119 print stylesheet */
  @media print{
    body::before,body::after,nav,.progress,.searchzone,.rail,.toolbar,.orb,.suggest{display:none!important}
    body{background:#fff;color:#111;display:block}
    .card,.catc{break-inside:avoid;border:1px solid #ccc;background:#fff;animation:none}
    a{color:#111}
  }
}