@font-face{font-family:'Bagel Fat One';font-weight:400;font-display:swap;src:url(fonts/bagel-fat-one-400.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-weight:200 800;font-display:swap;src:url(fonts/bricolage-grotesque.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Reddit Mono';font-weight:200 900;font-display:swap;src:url(fonts/reddit-mono.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --orange:#e8742a; --paste:#ffd978; --rind:#a8471a; --eye:#6e2c0e; --ink:#2a160b; --vein:#2b5f73;
  --display:'Bagel Fat One',ui-rounded,'Arial Rounded MT Bold',sans-serif;
  --body:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --mono:'Reddit Mono',ui-monospace,Menlo,Consolas,monospace;
  --pop:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{background:var(--orange);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.5;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--vein);outline-offset:3px;border-radius:4px}
code{font-family:var(--mono);font-size:.88em}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paste);padding:.5rem 1rem;z-index:20}
.skip:focus{left:1rem}
.small{font-size:.86rem}

/* ---------- hero: the cut wedge ---------- */
.hero{position:relative;min-height:max(860px,min(100svh,960px));overflow:hidden;isolation:isolate}
.cheese{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
.topnav{position:relative;z-index:3;display:flex;gap:1.4rem;align-items:center;padding:1.1rem clamp(1rem,4vw,3rem);font-weight:600}
.topnav a{text-decoration:none}
.topnav a:hover{text-decoration:underline}
.brand{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:1.5rem;font-weight:400;margin-right:auto;letter-spacing:.01em}
.dial{position:relative;z-index:3;margin:clamp(.5rem,3vh,2rem) 0 0 clamp(1rem,4vw,3rem);display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;max-width:min(92vw,560px)}
.dial-label{margin:0;font-weight:800}
.dial-note{flex-basis:100%;margin:.2rem 0 0;font-size:.85rem;max-width:26em}
.seg{display:inline-flex;background:var(--ink);border-radius:999px;padding:4px;gap:2px}
.seg button{font:600 .95rem var(--mono);color:var(--paste);background:transparent;border:0;border-radius:999px;padding:.38rem .8rem;cursor:pointer}
.seg button[aria-checked=true]{background:var(--paste);color:var(--ink)}
.seg button:hover{text-decoration:underline}

.eyes-layer{position:absolute;inset:0;z-index:2;pointer-events:none}
.eye{position:absolute;left:0;top:0;transform:translate(-50%,-50%);pointer-events:auto;background:none;border:0;padding:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);font:500 .78rem/1.1 var(--mono)}
.eye[hidden]{display:none}
.eye .hole{display:block;width:var(--d,64px);height:calc(var(--d,64px) * .78);border-radius:50%;background:var(--eye);box-shadow:inset 0 calc(var(--d,64px) * -.1) 0 var(--rind);transform:scale(var(--s,.12));transition:transform .55s var(--pop)}
.eye .name{white-space:nowrap;transition:opacity .3s}
.eye .fix{font-weight:600;color:var(--vein);min-height:1em;white-space:nowrap;transition:opacity .3s}
.eye[data-st=ready] .name{opacity:.55}
.eye[data-st=ready] .hole{--s:.14}
.eye[data-st=skip] .hole{--s:0}
.eye[data-st=build] .hole{--s:.32}
.eye[data-st=bump] .hole{--s:.5}
.eye[data-st=blocked] .hole,.eye[data-st=excluded] .hole{--s:1}
.eye[data-st=excluded] .hole{border-radius:46% 54% 50% 50%/60% 52% 48% 40%}
.eye:not([data-st=bump]) .fix{opacity:0}
.eye.pending .hole{--s:0}
.eye.pending .name,.eye.pending .fix{opacity:0}

.face-copy{position:absolute;z-index:3;right:clamp(1rem,5vw,5rem);bottom:calc(6vw + clamp(1rem,4vh,3rem));width:min(720px,54vw)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,4.6vw,4.4rem);line-height:.98;margin:0 0 .9rem;letter-spacing:.005em}
.h1-py{white-space:nowrap}
.lede{font-size:clamp(1rem,1.45vw,1.2rem);max-width:40em;margin:0 0 .8rem}
.verdict{font:600 1rem var(--mono);margin:0;min-height:1.5em}
.verdict b{background:var(--ink);color:var(--paste);padding:.1rem .45rem;border-radius:999px;font-weight:600}

.slip{position:absolute;z-index:5;background:var(--ink);color:var(--paste);border-radius:18px 18px 18px 4px;padding:.7rem .9rem;font:500 .85rem/1.35 var(--mono);max-width:300px;pointer-events:none}
.slip b{font-family:var(--body);font-weight:800;font-size:1rem;display:block}
.slip .st{display:inline-block;margin-top:.2rem;color:var(--orange);font-weight:600}

/* ---------- slices ---------- */
.slice{position:relative;margin-top:-6vw;padding:calc(6vw + 3.5rem) clamp(1rem,6vw,6rem) calc(3.5rem + 2vw);clip-path:polygon(0 6vw,100% 0,100% 100%,0 100%)}
.s-orange{background:var(--orange)}
.s-paste{background:var(--paste)}
.s-paste a{color:var(--vein)}
.slant-inner{max-width:1100px;margin:0 auto}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3.6vw,3.1rem);line-height:1.02;margin:0 0 1.2rem;max-width:18em}
.prose{max-width:44em;margin:0 0 1.1rem}
.rind{max-width:100%;background:var(--ink);color:var(--paste);border-radius:22px 22px 22px 22px;padding:1.1rem 1.3rem;margin:1.4rem 0;position:relative;overflow:auto}
.rind::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:var(--rind);border-radius:22px 22px 0 0}
.rind pre{margin:.3rem 0 0;font:400 .9rem/1.6 var(--mono);white-space:pre}
.rind .c{color:#d9a463}
.steps{list-style:none;padding:0;margin:1.6rem 0 0;counter-reset:s}
.steps li{counter-increment:s;margin:0 0 1rem;padding-left:3.4rem;position:relative;max-width:40em}
.steps li:nth-child(2){margin-left:clamp(0rem,8vw,7rem)}
.steps li:nth-child(3){margin-left:clamp(0rem,16vw,14rem)}
.steps li::before{content:counter(s);position:absolute;left:0;top:-.2rem;width:2.5rem;height:2rem;border-radius:50%;background:var(--eye);color:var(--paste);font:400 1.1rem/2rem var(--display);text-align:center;box-shadow:inset 0 -4px 0 var(--rind)}
.legend{list-style:none;padding:0;margin:0 0 1.6rem}
.legend li{display:flex;align-items:center;gap:.9rem;margin:0 0 .5rem;max-width:46em}
.legend li:nth-child(2){margin-left:clamp(0rem,4vw,3rem)}
.legend li:nth-child(3){margin-left:clamp(0rem,8vw,6rem)}
.legend li:nth-child(4){margin-left:clamp(0rem,12vw,9rem)}
.legend li:nth-child(5){margin-left:clamp(0rem,16vw,12rem)}
.legend svg{width:64px;height:64px;flex:none}
.legend b{font-family:var(--mono);font-weight:600;min-width:6.3em;flex:none}
.legend span{min-width:0}
.legend .pore{fill:var(--ink);opacity:.55}
.legend .hole{fill:var(--eye)}
.legend .soft{opacity:.75}
.legend .lip{fill:var(--rind)}
.legend .arr{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.pair{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.2rem;align-items:start}
.pair .rind:nth-child(2){margin-top:3rem}

/* slicer */
.slicer{margin-top:1.6rem}
.slicer-file{font:600 clamp(.95rem,2.2vw,1.45rem) var(--mono);background:var(--paste);border-radius:999px;padding:.6rem 1.2rem;display:inline-block;max-width:100%;overflow-wrap:anywhere}
.slices{display:flex;gap:0;margin:1.2rem 0 .6rem;flex-wrap:wrap}
.cut{position:relative;background:var(--paste);padding:1.4rem 1.6rem 1.1rem 2rem;margin-right:-.6rem;clip-path:polygon(1.2rem 0,100% 0,calc(100% - 1.2rem) 100%,0 100%);transition:transform .6s var(--pop),margin .6s var(--pop);min-width:11rem}
.slicer.open .cut{margin-right:1rem}
.slicer.open .cut:nth-child(2){transform:translateY(.7rem)}
.slicer.open .cut:nth-child(3){transform:translateY(1.4rem)}
.cut .k{display:block;font:600 .75rem var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.cut .t{display:block;font:600 1.15rem var(--mono)}
.cut .why{display:block;font-size:.85rem;max-width:15rem}
.cut .pit{position:absolute;right:1.6rem;top:.9rem;width:30px;height:24px;border-radius:50%;background:var(--eye);box-shadow:inset 0 -3px 0 var(--rind);transform:scale(0);transition:transform .5s var(--pop)}
.cut.no .pit{transform:scale(1)}
.slicer-out{font:600 1.05rem var(--mono);margin:1.6rem 0 .8rem}
.slicer-pick{display:flex;flex-wrap:wrap;gap:.5rem}
.slicer-pick button{font:600 .85rem var(--body);background:transparent;border:2px solid var(--ink);color:var(--ink);border-radius:999px;padding:.3rem .8rem;cursor:pointer}
.slicer-pick button[aria-pressed=true]{background:var(--ink);color:var(--paste)}

.foot{background:var(--paste);margin-top:-6vw;padding:calc(6vw + 2rem) 1.5rem 2.5rem;clip-path:polygon(0 6vw,100% 0,100% 100%,0 100%);text-align:center}
.foot p{margin:.3rem 0}
.foot a{color:var(--vein)}

@media (max-width:760px){
  .legend li{flex-wrap:wrap;gap:.2rem .7rem;margin-left:0!important;margin-bottom:1rem}
  .legend svg{width:48px;height:48px}
  .legend span{flex:1 1 100%}

  html{font-size:17px}
  .hero{min-height:1240px}
  .face-copy{left:1rem;right:1rem;width:auto;bottom:calc(6vw + 1rem)}
  .pair{grid-template-columns:minmax(0,1fr)}
  .pair .rind:nth-child(2){margin-top:0}
  .eye{font-size:.7rem}
  .cut{min-width:0;flex:1 1 100%;margin-right:0;margin-bottom:.4rem}
  .slicer.open .cut{margin-right:0}
  .slicer.open .cut:nth-child(2),.slicer.open .cut:nth-child(3){transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}