/* ARABBITHOLE "fun" layer (operator-approved prototype ops/mockups/rabbit-hole/mobile-fun-v1, 2026-10-30).
   Every class is f- prefixed so it never collides with the case/home/v7 styles. Colours come from each page's own tokens. */
:root{--ug:#0F1B2D;--ug-2:#18294A;--ug-ink:#F3EEE4;--ug-ink-2:#C9C3B6;--ug-rule:rgba(243,238,228,.16);--f-soft:0 1px 2px rgba(15,27,45,.06),0 12px 28px -16px rgba(15,27,45,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ug:#070E1A;--ug-2:#111D33;--f-soft:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.7)}}
:root[data-theme="dark"]{--ug:#070E1A;--ug-2:#111D33;--f-soft:0 1px 2px rgba(0,0,0,.3),0 12px 30px -14px rgba(0,0,0,.7)}
svg.f-i{width:24px;height:24px;flex:none;overflow:visible;color:inherit}
svg.f-mono{--acc:currentColor}
.f-lbl{font:700 13px/1.2 var(--f-data);letter-spacing:.06em;color:var(--ink-3)}
.f-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the rabbit companion: the keyhole logo's own shapes ---------- */
.f-rb{display:block;width:100%;height:100%;overflow:visible;fill:var(--mark);stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.f-rb .eye{fill:var(--ink);stroke:none}
.f-rb .el,.f-rb .er,.f-rb .rbb{transform-box:view-box;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.f-rb .el{transform-origin:27px 31px}.f-rb .er{transform-origin:37px 31px}.f-rb .rbb{transform-origin:32px 74px}
.f-rb[data-mood="up"] .el{transform:rotate(-7deg) translateY(-2px)}.f-rb[data-mood="up"] .er{transform:rotate(7deg) translateY(-2px)}
.f-rb[data-mood="flop"] .el{transform:rotate(-112deg)}.f-rb[data-mood="flop"] .er{transform:rotate(112deg)}
.f-rb[data-mood="tilt"] .rbb{transform:rotate(-11deg)}.f-rb[data-mood="tilt"] .er{transform:rotate(38deg)}
.f-rb.tw .er{animation:f-tw .45s ease-in-out}.f-rb.tw .el{animation:f-tw .45s ease-in-out .08s}
@keyframes f-tw{30%{transform:rotate(-16deg)}60%{transform:rotate(10deg)}}
.f-under .f-rb,.f-guess .f-rb,.f-bottom .f-rb{stroke:var(--ug-ink)}.f-under .f-rb .eye,.f-guess .f-rb .eye,.f-bottom .f-rb .eye{fill:var(--ug-ink)}

/* ---------- home hero: the hole ---------- */
.f-holebox{position:relative;width:min(360px,100%);margin:18px auto 6px;aspect-ratio:360/150;color:var(--ink)}
.f-holebox svg.f-h{position:absolute;inset:0;width:100%;height:auto;overflow:visible}
.f-holebox .ring{transform-box:fill-box;transform-origin:center;animation:f-breathe 4.8s ease-in-out infinite}
.f-holebox .r1{animation-delay:-.6s}.f-holebox .r2{animation-delay:-1.2s}.f-holebox .r3{animation-delay:-1.8s}.f-holebox .r4{animation-delay:-2.4s}.f-holebox .r5{animation-delay:-3s}
@keyframes f-breathe{50%{transform:scale(.94)}}
.f-rbtn{position:absolute;left:calc(50% + 34px);top:calc(43% - 50px);width:48px;height:56px;padding:0;border:0;background:none;border-radius:10px;cursor:pointer}
.f-rbtn .f-rb{width:40px;height:48px;margin:0 auto}
.f-rb-hero{animation:f-idle 7s ease-in-out infinite}
@keyframes f-idle{0%,92%,100%{transform:none}95%{transform:translateY(-5px)}}
.f-rb-hero.hop{animation:f-hop .42s cubic-bezier(.4,0,.8,.6) forwards}
@keyframes f-hop{0%{transform:none}45%{transform:translate(-26px,-30px) rotate(-20deg)}100%{transform:translate(-52px,22px) scale(.15) rotate(-40deg);opacity:0}}
.f-go{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:420px;margin:4px auto 0;min-height:62px;border:0;border-radius:16px;background:var(--ink);color:var(--bg);font:800 20px/1 var(--f-display);text-decoration:none;box-shadow:0 5px 0 var(--mark);cursor:pointer}
.f-go:active{transform:translateY(3px);box-shadow:0 2px 0 var(--mark)}
.f-go svg{width:32px;height:32px}

/* ---------- fall transition ---------- */
.f-fx{position:fixed;inset:0;z-index:80;overflow:hidden;pointer-events:none;display:grid;place-items:center;opacity:0}
.f-fx > svg{width:150vmax;height:auto;color:var(--ink);transform:scale(.2)}
.f-fx.go{animation:f-fxbg .7s ease-in forwards}
.f-fx.go > svg{animation:f-fxz .7s cubic-bezier(.6,0,.9,.4) forwards}
@keyframes f-fxbg{0%{opacity:0;background:transparent}30%{opacity:1}100%{opacity:1;background:var(--ink)}}
@keyframes f-fxz{to{transform:scale(3.2) rotate(18deg)}}
.f-fxr{position:absolute;left:50%;top:50%;width:54px;height:64px;margin:-32px 0 0 -27px;opacity:0}
.f-fx.go .f-fxr{animation:f-fxr .7s ease-in forwards}
@keyframes f-fxr{0%{opacity:1;transform:translateY(-38vh)}100%{opacity:1;transform:translateY(0) scale(.25) rotate(200deg)}}

/* ---------- section heads ---------- */
.f-sec{padding:34px 0 0}
.f-sh{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.f-sh > svg{width:40px;height:40px}
.f-sh h2{font:800 28px/1 var(--f-display);letter-spacing:-.01em;margin:0}
.f-sh p{margin:3px 0 0;font-size:15px;color:var(--ink-2)}

/* ---------- filters + sorts (filled tiles, never bordered pills) ---------- */
.f-filt{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 8px;margin:0 -16px;scroll-snap-type:x proximity;scrollbar-width:none}
.f-filt::-webkit-scrollbar{display:none}
.f-ft{flex:none;scroll-snap-align:start;display:grid;grid-template-rows:30px auto auto;justify-items:center;align-content:center;gap:3px;width:90px;min-height:96px;padding:8px 6px;border:0;border-radius:16px 16px 16px 4px;background:var(--surface);color:var(--ink);box-shadow:var(--f-soft);text-align:center;cursor:pointer}
.f-ft svg{width:30px;height:30px}
.f-ft span{font:700 13.5px/1.1 var(--f-data);color:var(--ink-2)}
.f-ft b{font:800 19px/1 var(--f-display)}
.f-ft[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.f-ft[aria-pressed="true"] span{color:var(--bg)}
.f-ft:disabled{opacity:.4;cursor:default}
.f-fdef{margin:4px 0 0;font-size:14.5px;color:var(--ink-2);min-height:2.6em}
.f-sorts{display:flex;gap:2px;overflow-x:auto;margin:6px -16px 0;padding:0 16px;scrollbar-width:none}
.f-sorts::-webkit-scrollbar{display:none}
.f-sorts button{flex:none;min-height:44px;padding:0 10px;border:0;background:none;font:700 15px/1 var(--f-data);color:var(--ink-3);border-radius:8px;cursor:pointer}
.f-sorts button[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--mark)}
.f-pcount{font:600 15px/1.2 var(--f-data);color:var(--ink-2);margin:12px 0 50px}
.f-pcount b{font:800 18px/1 var(--f-display);color:var(--ink)}

/* ---------- the pile: a swipe deck ---------- */
.f-pile{position:relative;height:392px;max-width:440px;margin:0 auto;touch-action:pan-y}
.f-cc{position:absolute;inset:0 0 auto 0;height:372px;perspective:1200px;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.f-cc[data-pos="1"]{transform:translate(8px,10px) rotate(2.4deg);z-index:1}
.f-cc[data-pos="2"]{transform:translate(-6px,18px) rotate(-2.2deg);z-index:0}
.f-cc[data-pos="0"]{z-index:2;cursor:grab}
.f-cc.drag{transition:none;cursor:grabbing}
.f-cin{position:relative;width:100%;height:100%;transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.f-cc.flipped .f-cin{transform:rotateY(180deg)}
.f-cf{position:absolute;inset:0;background:var(--surface);color:var(--ink);border-radius:20px 20px 20px 6px;box-shadow:var(--f-soft);padding:18px 18px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.f-cf.back{transform:rotateY(180deg);background:var(--ink);color:var(--bg)}
.f-cf .wm-ic{position:absolute;right:-18px;bottom:30px;width:140px;height:140px;opacity:.12;pointer-events:none}
.f-cf > *:not(.wm-ic):not(.f-stl):not(.f-str){position:relative}
.f-cf .top{display:flex;align-items:center;gap:10px}
.f-cf .top svg{width:42px;height:42px}
.f-cf .top .f-lbl{line-height:1.25}
.f-cf .q{font:800 26px/1.06 var(--f-display);letter-spacing:-.01em;margin:0}
.f-core{display:flex;gap:2px;height:16px;border-radius:4px;overflow:hidden}
.f-core i{flex:1;background:var(--cc)}
.f-core.v{flex-direction:column;height:auto;width:14px}
.f-cf .dm{display:flex;flex-wrap:wrap;gap:4px 12px;font:600 14.5px/1.2 var(--f-data);color:var(--ink-2)}
.f-cf .dm b{color:var(--ink);font-weight:700}
.f-why2{display:flex;align-items:flex-start;gap:7px;margin:0;font:600 14px/1.25 var(--f-ui);color:var(--ink-2)}
.f-why2 svg{width:20px;height:20px}
.f-why2 span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.f-cf .tap{margin-top:auto;display:flex;align-items:center;gap:6px;font:600 13.5px/1 var(--f-data);color:var(--signal-ink)}
.f-cf .tap svg{width:18px;height:18px}
.f-cf.back .f-lbl{color:color-mix(in srgb,var(--bg) 70%,transparent)}
.f-cf.back .ab{font:800 22px/1.08 var(--f-display)}
.f-cf.back .al{margin:0;font-size:15.5px;line-height:1.4;color:color-mix(in srgb,var(--bg) 85%,transparent);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.f-cf.back .th{margin:auto 0 0;font-size:14.5px;line-height:1.35}
.f-cf.back .th span{display:block;font:700 12.5px/1 var(--f-data);color:color-mix(in srgb,var(--bg) 65%,transparent);margin-bottom:3px}
.f-cf.back .f-chip{margin-top:6px;color:var(--bg);background:color-mix(in srgb,var(--bg) 14%,transparent)}
.f-cf.back .pk{margin:0;font:600 12.5px/1.2 var(--f-data);color:#FF9A5C}
.f-stl,.f-str{position:absolute;top:22px;z-index:3;font:800 22px/1 var(--f-display);padding:6px 10px;border-radius:8px;border:3px solid currentColor;pointer-events:none}
.f-stl{right:16px;color:var(--ink-3);transform:rotate(-12deg);opacity:var(--l,0)}
.f-str{left:16px;color:var(--mark);opacity:var(--r,0);transform:rotate(12deg)}
.f-rb-peek{position:absolute;right:26px;top:-50px;width:40px;height:50px;z-index:5;pointer-events:none}
.f-ctl{display:flex;justify-content:center;gap:10px;margin-top:2px}
.f-ctl[hidden]{display:none}
.f-pbtn{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 14px;border:0;border-radius:14px;background:var(--surface-2);color:var(--ink);font:800 16px/1 var(--f-display);text-decoration:none;cursor:pointer}
.f-pbtn svg{width:26px;height:26px}
.f-pbtn.ink{background:var(--ink);color:var(--bg)}
.f-nomatch{display:flex;align-items:center;gap:14px;padding:18px;border-radius:16px;background:var(--surface);box-shadow:var(--f-soft);color:var(--ink-2)}
.f-nomatch b{display:block;font:800 19px/1.15 var(--f-display);color:var(--ink)}
.f-rb-sit{width:46px;height:56px;flex:none}
.f-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 8px 4px 5px;border-radius:7px;font:700 13px/1 var(--f-data);letter-spacing:.03em;color:var(--cc);background:color-mix(in srgb,var(--cc) 13%,transparent)}
.f-chip svg{width:18px;height:18px}

/* ---------- underground: topic doors ---------- */
.f-under{background:var(--ug);color:var(--ug-ink);margin-top:38px;padding:0 0 36px;position:relative}
.f-under::before,.f-bottom::before{content:"";display:block;height:26px;background:var(--bg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V12C380 18 360 8 340 14S300 22 280 13 240 6 220 15 180 24 160 14 120 6 100 16 60 22 40 12 10 10 0 15Z'/%3E%3C/svg%3E") center/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 26' preserveAspectRatio='none'%3E%3Cpath d='M0 0H400V12C380 18 360 8 340 14S300 22 280 13 240 6 220 15 180 24 160 14 120 6 100 16 60 22 40 12 10 10 0 15Z'/%3E%3C/svg%3E") center/100% 100%}
.f-under .f-sh p,.f-under .f-lbl{color:var(--ug-ink-2)}
.f-under .f-sh h2{color:var(--ug-ink)}
.f-doors{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;grid-auto-flow:dense}
.f-door{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;text-decoration:none;color:var(--ink);padding:0 12px 14px;min-height:178px;text-align:center}
.f-door.tall{grid-row:span 2;min-height:230px;align-self:stretch;justify-content:center;padding-top:40px}
.f-door.wide{grid-column:span 2;min-height:160px}
.f-door .bg{position:absolute;inset:0;width:100%;height:100%;color:var(--ink);z-index:1;pointer-events:none}
.f-door .fill{position:absolute;left:5.7%;right:5.7%;top:4%;bottom:0;background:var(--surface);border-radius:50% 50% 4px 4px/31% 31% 4px 4px}
.f-door > *:not(.bg):not(.fill){position:relative;z-index:2}
.f-door .ic{width:58px;height:58px;transition:transform .2s}
.f-door.tall .ic{width:74px;height:74px}
.f-door b{font:800 18px/1.05 var(--f-display)}
.f-door small{font:600 14px/1.2 var(--f-data);color:var(--ink-3)}
.f-door:hover .ic{transform:rotate(-4deg) scale(1.05)}
.f-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:120px;margin:4px auto 0}
.f-dots i{width:8px;height:8px;border-radius:50%;background:var(--surface-2);box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.f-dots i.lit{background:var(--mark);box-shadow:none}
.f-teaser{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px;border-radius:16px;background:var(--ug-2);text-decoration:none;color:var(--ug-ink);min-height:44px}
.f-teaser > svg{width:54px;height:54px}
.f-teaser b{display:block;font:800 19px/1.1 var(--f-display)}
.f-teaser span{font-size:15px;color:var(--ug-ink-2)}

/* ---------- topic header + rows ---------- */
.f-th{display:flex;align-items:center;gap:14px;margin:6px 0 4px}
.f-th > svg{width:64px;height:64px}
.f-rows{display:grid;gap:10px;margin-top:12px}
.f-crow{display:grid;grid-template-columns:14px 1fr auto;gap:12px;align-items:stretch;padding:12px 14px 12px 12px;border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:var(--f-soft);text-decoration:none}
.f-crow b{display:block;font:800 18px/1.15 var(--f-display)}
.f-crow span{font:600 13.5px/1.2 var(--f-data);color:var(--ink-3)}
.f-crow em{font-style:normal;align-self:center;font:700 12.5px/1 var(--f-data);padding:5px 7px;border-radius:6px;background:var(--mark);color:#0F1B2D}

/* ---------- my burrow ---------- */
.f-count{display:flex;align-items:baseline;gap:8px;margin-top:14px;font:600 16px/1.2 var(--f-data);color:var(--ink-2)}
.f-count b{font:800 44px/1 var(--f-display);color:var(--ink)}
.f-map{position:relative;margin-top:16px;background:var(--ug);color:var(--ug-ink);border-radius:20px;padding:18px 14px 8px}
.f-map::before{content:"";position:absolute;left:37px;top:12px;bottom:28px;width:4px;background:repeating-linear-gradient(var(--ug-ink-2) 0 9px,transparent 9px 14px);opacity:.5}
.f-lane{position:relative;display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:start;padding:6px 0 14px}
.f-lane > svg{width:48px;height:48px;background:var(--ug);border-radius:50%;padding:4px}
.f-lane .ln{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;font:700 16px/1.15 var(--f-ui)}
.f-bdg{font:700 12.5px/1 var(--f-data);padding:5px 7px;border-radius:6px;white-space:nowrap;background:var(--mark);color:#0F1B2D}
.f-bdg.dim{background:transparent;color:var(--ug-ink-2);box-shadow:inset 0 0 0 1.5px var(--ug-rule)}
.f-cham{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.f-cham a{display:grid;place-items:center;width:44px;height:44px;border-radius:50% 50% 45% 45%;background:var(--ug-2);text-decoration:none;font:700 13px/1 var(--f-data);color:var(--ug-ink-2)}
.f-cham a.lit{background:var(--mark);color:#0F1B2D}
.f-tally{margin-top:18px;background:var(--surface);border-radius:18px;box-shadow:var(--f-soft);padding:16px}
.f-tally h3{display:flex;align-items:center;gap:10px;font:800 20px/1.1 var(--f-display);margin:0}
.f-tally h3 svg{width:34px;height:34px}
.f-tally ul{list-style:none;margin:10px 0 0;padding:0}
.f-tally li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-top:1px solid var(--rule);font-size:15px}
.f-tally li span{color:var(--ink-3);font:600 13.5px/1.2 var(--f-data)}
.f-tally li em{font-style:normal;font:700 13px/1 var(--f-data);align-self:center;padding:5px 7px;border-radius:6px;background:var(--surface-2)}
.f-tally li em.yes{background:var(--mark);color:#0F1B2D}
.f-empty{padding:18px;border-radius:16px;background:var(--surface);box-shadow:var(--f-soft);margin-top:16px;color:var(--ink-2);overflow:hidden}
.f-empty b{display:block;font:800 20px/1.15 var(--f-display);color:var(--ink);margin-bottom:6px}
.f-empty .f-rb-sit{float:right;margin:0 0 6px 12px}
.f-clear{display:inline-flex;align-items:center;min-height:44px;margin-top:14px;border:0;background:none;font:600 15px var(--f-ui);color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- case: phone-only top (jump bar, guess, theories, meters) ---------- */
.f-case{display:none}
.fci{width:28px;height:28px;margin-right:2px}
@media (max-width:767.98px){
  .f-case{display:block}
  .f-jump{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:16px -6px 0;padding:4px;background:var(--bg);border-radius:0 0 14px 14px;box-shadow:0 8px 14px -12px rgba(15,27,45,.45);z-index:25}
  .f-jump.fixed{position:fixed;left:10px;right:10px;margin:0;top:var(--f-top,62px)}
  .f-jump-ph{height:0}
  .f-jump a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;border-radius:10px;text-decoration:none;font:700 13px/1 var(--f-data);color:var(--ink-2)}
  .f-jump a svg{width:22px;height:22px}
  .f-jump a[aria-current]{background:var(--ink);color:var(--bg)}
  .f-anch,#branches,#srclist{scroll-margin-top:132px}
  /* guess first */
  .f-guess{position:relative;margin-top:62px;background:var(--ug);color:var(--ug-ink);border-radius:20px 20px 6px 20px;padding:18px}
  .f-guess .gh{display:flex;align-items:center;gap:10px;font:800 21px/1.1 var(--f-display)}
  .f-guess .gh svg{width:36px;height:36px}
  .f-guess .claim{margin:12px 0 4px;font:700 19px/1.25 var(--f-ui)}
  .f-guess .sub{font-size:14.5px;color:var(--ug-ink-2);margin:0}
  .f-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .f-opt{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 12px;border:0;border-radius:14px;background:var(--ug-2);text-align:left;font:700 16px/1.15 var(--f-ui);color:var(--ug-ink);cursor:pointer;transition:transform .12s}
  .f-opt:active{transform:scale(.97)}
  .f-opt svg{width:32px;height:32px}
  .f-skip{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;border:0;background:none;font:600 15px var(--f-ui);color:var(--ug-ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .f-reveal{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
  .f-reveal .stamp{width:78px;height:78px}.f-reveal .stamp svg{width:78px;height:78px}
  .f-reveal.anim .stamp{animation:f-stamp .55s cubic-bezier(.2,1.6,.4,1) both}
  .f-reveal .you{font:600 14.5px/1.3 var(--f-ui);color:var(--ug-ink-2)}
  .f-reveal .rec{font:800 22px/1.1 var(--f-display);margin:3px 0}
  .f-reveal .match{display:inline-block;font:700 13.5px/1 var(--f-data);letter-spacing:.04em;padding:6px 8px;border-radius:6px;background:var(--ug-2)}
  .f-reveal .match.yes{background:var(--mark);color:#0F1B2D}
  .f-reveal .why{grid-column:1/-1;font-size:15px;color:var(--ug-ink-2);margin:0}
  .f-rb-react{position:absolute;right:18px;top:-50px;width:40px;height:50px;pointer-events:none}
  .f-rb-react.react{animation:f-pop .5s cubic-bezier(.3,1.7,.5,1) .3s both}
  .f-lock{display:none;margin-top:16px;border-radius:20px;padding:16px 18px;background:repeating-linear-gradient(-41deg,var(--surface-2) 0 6px,var(--surface) 6px 12px);color:var(--ink-2);font:600 15.5px/1.35 var(--f-ui)}
  html.f-locked .ans9{display:none}
  html.f-locked .f-lock{display:block}
  html.f-locked .f-hk{display:none}
  html:not(.f-locked) .f-hk-q{display:none}
  /* theories: roots + tiles */
  .f-dh{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:30px 0 10px;position:relative}
  .f-dh h2{font:800 28px/1 var(--f-display);margin:0;text-transform:none}
  .f-dh .f-lbl{text-align:right;max-width:46%}
  .f-roots{position:relative;max-width:520px}
  .f-rootsvg{display:block;width:100%;height:auto;color:var(--ink)}
  .f-rootsvg .gr{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round}
  .f-rootsvg .gr2{fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.35;stroke-dasharray:3 6}
  .f-rootsvg .pit{fill:var(--ink)}
  .f-rootsvg .rt{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
  .f-rootsvg .chm{fill:var(--cc);stroke:var(--ink);stroke-width:1.6}
  .f-rootsvg .chm.hol{fill:var(--bg);stroke:var(--cc);stroke-dasharray:2.6 2.2;stroke-width:2}
  .f-rootsvg .chm.key{stroke:var(--mark);stroke-width:3}
  .f-rootsvg .rn{font:800 15px var(--f-display);fill:var(--ink);text-anchor:middle}
  .f-rootsvg .hitr{fill:transparent;cursor:pointer}
  .f-rootsvg .hitr:focus-visible{outline:none;stroke:var(--signal);stroke-width:3}
  .f-mfor{margin:4px 0 0;font-size:14.5px;color:var(--ink-2)}
  .f-trow{display:flex;gap:10px;overflow-x:auto;margin:8px -16px 0;padding:4px 16px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .f-trow::-webkit-scrollbar{display:none}
  .f-tt{flex:none;width:204px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;padding:12px;border:0;border-radius:16px 16px 16px 4px;background:var(--surface);color:var(--ink);box-shadow:var(--f-soft);text-align:left;cursor:pointer;font:inherit}
  .f-tt .tr1{display:flex;align-items:center;gap:6px;color:var(--cc);font:700 13.5px/1.1 var(--f-data)}
  .f-tt .tr1 svg{width:24px;height:24px}
  .f-tt em{font-style:normal;font:700 12px/1 var(--f-data);color:var(--signal-ink)}
  .f-tt b{display:flex;gap:7px;align-items:flex-start;font:800 17px/1.15 var(--f-display);min-height:2.3em}
  .f-tt .no{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--bg);font:800 13px/1 var(--f-display)}
  .f-tbs{display:block;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
  .f-tbs i{display:block;height:100%;background:var(--c-disproven)}
  .f-tbl{font:600 13px/1.1 var(--f-data);color:var(--ink-3)}
  /* meters */
  .f-rb-meter{position:absolute;right:6px;bottom:-4px;width:34px;height:42px;pointer-events:none}
  .f-mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .f-mt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px;border:0;border-radius:16px 16px 16px 4px;background:var(--surface);color:var(--ink);box-shadow:var(--f-soft);text-align:center;min-height:44px;cursor:pointer;font:inherit}
  .f-mt.wide{grid-column:1/-1;flex-direction:row;text-align:left;gap:14px}
  .f-mt .mg{position:relative;display:grid;place-items:center;width:100%;max-width:120px}
  .f-mt.wide .mg{width:70px;flex:none}
  .f-mt .dial{width:100%;height:auto;color:var(--ink)}
  .f-mt .mv{font:800 22px/1 var(--f-display);margin-top:2px}
  .f-mt .ml b{display:block;font:800 16px/1.1 var(--f-display)}
  .f-mt .ml small{display:block;font:600 13px/1.2 var(--f-data);color:var(--ink-3);margin-top:3px}
  .f-ring{position:relative;width:64px;height:64px}
  .f-ring svg{width:64px;height:64px;transform:rotate(-90deg)}
  .f-ring b{position:absolute;inset:0;display:grid;place-items:center;font:800 21px/1 var(--f-display)}
  .f-anim .dv,.f-anim .arc{transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
  .f-anim .nd{transition:transform 1.1s cubic-bezier(.3,1.4,.5,1)}
  .nd{transform-box:view-box;transform-origin:50px 52px}
  .f-tly{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:34px;align-content:center;max-width:110px}
  .f-tly i{width:6px;height:24px;border-radius:2px;background:var(--ink);transform:rotate(8deg)}
  .f-tly i:nth-child(5n){transform:rotate(-55deg) translate(6px,-6px);background:var(--mark)}
  .f-tly .none{font:600 13px/1.2 var(--f-data);color:var(--ink-3)}
  /* phone layout of the existing page around the new top */
  .head .facts,.head .cta-row{display:none}
  .v5-nav{display:none!important} /* the jump bar above replaces the desktop pill bar on phones */
  /* timeline as chambers on a drawn shaft (enhanced by fun.js; the plain list stays when JS is off) */
  html.f-ch ol.tl::before{left:9px;width:4px;background:repeating-linear-gradient(var(--ink) 0 10px,transparent 10px 15px);border-radius:2px;opacity:.75}
  html.f-ch #tl .step{display:block;position:relative;margin:0 0 14px 28px;padding:0;background:var(--surface);border-radius:6px 18px 18px 18px;box-shadow:var(--f-soft);transition:opacity .45s,transform .45s}
  html.f-ch #tl .step.pre{opacity:0;transform:translateY(18px)}
  html.f-ch #tl .step::before{content:"";position:absolute;left:-26px;top:18px;width:18px;height:18px;border-radius:50%;background:var(--cc);box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}
  html.f-ch #tl .step .node{display:none}
  html.f-ch #tl .step .date{padding:14px 14px 0;text-align:left;font:700 14px/1 var(--f-data);color:var(--ink-3)}
  html.f-ch #tl .step .body{padding:6px 14px 12px}
  html.f-ch #tl .step h3{margin:8px 0 0;font-size:17.5px}
  .f-dig{display:inline-flex;align-items:center;gap:4px;min-height:44px;border:0;background:none;padding:0;font:700 14px/1 var(--f-data);color:var(--signal-ink);cursor:pointer}
  .f-dig svg{width:16px;height:16px;transition:transform .2s}
  .f-dig[aria-expanded="true"] svg{transform:rotate(180deg)}
  .f-more[hidden]{display:none}
  .f-srcs{display:grid;gap:8px;margin-top:10px}
  .f-flip{position:relative;perspective:900px;display:grid}
  .f-flip .face{grid-area:1/1;min-height:84px;border-radius:12px;padding:10px 12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .45s;display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:hidden;overflow-wrap:anywhere}
  .f-flip .f1{background:var(--surface-2)}
  .f-flip .f2{background:var(--ink);color:var(--bg);transform:rotateY(180deg);font-size:13.5px;line-height:1.3}
  .f-flip.on .f1{transform:rotateY(-180deg)}.f-flip.on .f2{transform:none}
  .f-flip .tier{display:flex;align-items:center;gap:6px;font:700 13px/1 var(--f-data);color:var(--ink-3)}
  .f-flip .tier i{display:inline-flex;gap:2px}.f-flip .tier u{display:block;width:5px;height:12px;border-radius:1px;background:var(--ink)}.f-flip .tier u.off{background:var(--rule)}
  .f-flip .f1 b{font:700 15px/1.25 var(--f-ui)}
  .f-flip .f1 .tp{display:flex;align-items:center;gap:5px;font:600 13px/1 var(--f-data);color:var(--signal-ink)}
  .f-flip .f1 .tp svg{width:16px;height:16px}
  .f-flip .hit{grid-area:1/1;position:relative;z-index:2;border:0;background:none;border-radius:12px;min-height:44px;cursor:pointer}
  .f-flip.on .hit{align-self:start;height:44px}
  .f-flip .f2 a{color:var(--bg);font-weight:700;position:relative;z-index:3;display:inline-flex;align-items:center;min-height:44px}
  .f-flip .chq{color:#FF9A5C;font-weight:700}
  html.f-ch #tl .fork{border:0;background:none;padding:12px 14px 12px 0;margin:4px 0 0 -42px;width:calc(100% + 42px);max-width:none;min-height:64px;gap:12px}
  html.f-ch #tl .fork .tn{flex:none;width:58px;height:48px;color:var(--ink)}
  html.f-ch #tl .fork .t{background:color-mix(in srgb,var(--mark) 11%,var(--bg));border-radius:14px 14px 14px 4px;padding:10px 12px;font:800 17px/1.15 var(--f-display)}
  html.f-ch #tl .fork .t small{display:block;font:700 12.5px/1.2 var(--f-data);color:var(--signal-ink);letter-spacing:.02em;opacity:1;margin-top:3px}
  html.f-ch #tl .fork .arr{display:none}
  /* depth gauge: a core sample of the case, lighting up as you go down */
  .f-gauge{position:fixed;right:4px;top:130px;bottom:96px;width:10px;z-index:30;display:flex;flex-direction:column;gap:2px;pointer-events:none}
  .f-gauge i{flex:1;border-radius:2px;background:var(--cc);opacity:.18;transition:opacity .3s}
  .f-gauge i.on{opacity:1}
  .f-gauge .bun{position:absolute;right:-6px;width:22px;height:28px;transition:top .25s ease-out}
  html.f-ch .living .wrap,html.f-ch .lower .wrap{padding-right:22px}
}
@keyframes f-stamp{0%{transform:scale(2.4) rotate(-20deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes f-pop{0%{transform:translateY(16px)}100%{transform:none}}

/* ---------- branch sheet (phones) ---------- */
.f-scrim{position:fixed;inset:0;z-index:70;background:rgba(8,17,32,.55);opacity:0;pointer-events:none;transition:opacity .25s}
.f-sheet{position:fixed;left:0;right:0;bottom:0;z-index:71;max-height:88vh;overflow-y:auto;background:var(--bg);color:var(--ink);border-radius:22px 22px 0 0;transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);padding:10px 16px calc(24px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto;overscroll-behavior:contain}
html.f-sheet-on .f-scrim{opacity:1;pointer-events:auto}
html.f-sheet-on .f-sheet{transform:none}
.f-sheet .grab{width:44px;height:5px;border-radius:3px;background:var(--ink-3);opacity:.4;margin:0 auto 6px}
.f-sheet .top{display:flex;align-items:flex-start;gap:10px}
.f-sheet h2{font:800 25px/1.08 var(--f-display);margin:4px 0 0;flex:1;text-transform:none}
.f-sheet .x{display:inline-grid;place-items:center;min-width:44px;height:44px;border:0;border-radius:12px;background:var(--surface-2);color:var(--ink);cursor:pointer}
.f-sheet .bq{color:var(--ink-2);margin:8px 0 14px}
.f-sheet .f-mgrid{grid-template-columns:repeat(3,1fr)}
.f-sch{position:relative;margin:0 0 12px;padding:12px 14px;background:var(--surface);border-radius:6px 18px 18px 18px;box-shadow:var(--f-soft)}
.f-sch.key{box-shadow:0 0 0 3px var(--mark),var(--f-soft)}
.f-sch h3{font:700 17px/1.28 var(--f-ui);margin:8px 0 0;text-transform:none}
.f-sch p{margin:6px 0 0;font-size:15.5px;color:var(--ink-2)}
.f-sch .str{display:block;font:600 13px/1.1 var(--f-data);color:var(--ink-3);margin-top:8px}
.f-kc{margin:6px 0 0;padding:14px;border-radius:14px;background:var(--surface-2);font-size:15.5px;color:var(--ink-2)}
.f-kc b{color:var(--ink)}
.f-reasons{margin-top:18px;display:grid;gap:12px}
.f-rs{background:var(--surface);border-radius:16px;padding:14px;box-shadow:var(--f-soft)}
.f-rs h3{font:800 19px/1.15 var(--f-display);margin:0;text-transform:none}
.f-rs ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.f-rs li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:15px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.f-rs li svg{width:20px;height:20px}
.f-rs .sig{font-weight:700;color:var(--ink);text-align:center}
.f-sref{font:600 13px/1.2 var(--f-data);color:var(--ink-3)}

/* ---------- case bottom: you hit the bottom + the next hole (all widths) ---------- */
.f-bottom{background:var(--ug);color:var(--ug-ink);padding:0 0 30px}
.f-bottom .wrap{max-width:900px}
.f-landed{display:flex;align-items:center;gap:14px;padding-top:18px}
.f-landed > svg{width:62px;height:62px}
.f-landed b{display:block;font:800 23px/1.05 var(--f-display)}
.f-landed span{font-size:15px;color:var(--ug-ink-2)}
.f-prog{margin-top:16px;padding:14px;border-radius:14px;background:var(--ug-2)}
.f-prog .pt{display:flex;align-items:center;gap:10px;font:700 16px/1.2 var(--f-ui)}
.f-prog .pt > svg{width:34px;height:34px}
.f-prog .f-bdg{margin-left:auto}
.f-prog .f-dots{justify-content:flex-start;max-width:none;margin-top:10px;gap:6px}
.f-prog .f-dots i{width:14px;height:14px;background:transparent;box-shadow:inset 0 0 0 2px var(--ug-ink-2)}
.f-prog .f-dots i.lit{background:var(--mark);box-shadow:none}
.f-bottom .f-sh h2{color:var(--ug-ink)}.f-bottom .f-sh p{color:var(--ug-ink-2)}
.f-next{display:grid;gap:12px;margin-top:20px}
.f-nx{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:14px;border-radius:16px 16px 16px 4px;background:var(--surface);color:var(--ink);text-decoration:none}
.f-nx > svg{width:44px;height:44px;grid-row:span 2}
.f-nx .f-lbl.wild{color:var(--signal-ink)}
.f-nx b{font:800 19px/1.1 var(--f-display)}
.f-nx .f-core{grid-column:1/-1;margin-top:8px;height:10px}

@media (min-width:700px){
  .f-ft{width:96px}
  .f-doors{grid-template-columns:repeat(3,1fr)}
  .f-door.wide{grid-column:span 2}
  .f-pile{height:392px}.f-cc{height:372px}
  .f-next{grid-template-columns:repeat(3,1fr)}.f-nx{grid-template-columns:1fr}.f-nx > svg{grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
  .f-holebox .ring,.f-rb-hero,.f-rb.tw .er,.f-rb.tw .el,.f-reveal.anim .stamp,.f-rb-react.react{animation:none!important}
  .f-cc,.f-cin,.f-flip .face,.f-rb .el,.f-rb .er,.f-rb .rbb,.f-scrim,.f-sheet,.f-gauge i,.f-gauge .bun{transition:none!important}
  html.f-ch #tl .step.pre{opacity:1;transform:none}
}

/* ---------- follow + like (operator 2026-10-30). Drawn only when the account layer answers; likes only once real counts exist ---------- */
.f-mfor{margin:4px 0 0;font-size:14.5px;color:var(--ink-2)}
.f-sb{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:var(--surface-2);color:var(--ink);font:700 15px/1 var(--f-data);cursor:pointer}
.f-sb svg{width:20px;height:20px}
.f-sb[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.f-sb[data-like][aria-pressed="true"]{--hf:var(--mark)}
.f-sb b{font:800 16px/1 var(--f-display)}
.f-cact{display:flex;gap:8px;flex-wrap:wrap}
.f-cact:empty,.f-acts:empty{display:none}
.f-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.f-ctalike{display:inline-flex}
.f-stu{position:absolute;left:50%;top:40%;z-index:3;transform:translateX(-50%) rotate(-6deg);font:800 26px/1 var(--f-display);padding:6px 12px;border-radius:8px;border:3px solid var(--mark);color:var(--mark);opacity:var(--u,0);pointer-events:none}
.f-hint{text-align:center;font:600 13.5px/1.2 var(--f-data);color:var(--ink-3);margin:10px 0 0}
/* explore: the deck fills the screen between the filters and the slim bar */
.f-explore{padding:6px 0 10px;overflow-x:clip}
.f-explore .f-sec{padding-top:0}
.f-explore .f-fdef{min-height:0;margin:2px 0 0}
.f-explore .f-pcount{margin:8px 0 34px}
.f-explore .f-pile{height:max(340px,calc(100dvh - 476px));max-width:520px}
.f-explore .f-hint{margin-top:6px}
.f-explore .f-cc{height:calc(100% - 20px);touch-action:none}
.f-explore .f-cf .q{font-size:clamp(26px,7.5vw,34px)}