/* =====================================================================
   survey.css — shared kagerou-glass design system + survey components.
   Loaded by every test page (index.html, spi.html); page-specific styling
   (type hero, roles, strengths/growth) stays inline in the page.
   ===================================================================== */
:root{
  --void:#0a0710; --base:#0d0a10; --panel:#161019; --raise:#1d1422;
  --ink:#f2e7ef; --ink-soft:#e7d8e4; --ink-dim:#b6a3b4; --ink-faint:#7a6876;
  --pink:#ff86bf; --pink-hot:#ff5fa6; --pink-soft:#ffb3d6;
  --lilac:#c2a4f2; --lilac-soft:#d9c6f7;
  --cyan:#76e6e0; --cyan-hot:#3ff0e6; --green:#a6f0a0; --crimson:#e8447e;
  --line:rgba(255,134,191,0.20); --line-soft:rgba(255,134,191,0.11); --line-hair:rgba(255,134,191,0.06);
  --line-cyan:rgba(118,230,224,0.22);
  --f-display:'IM Fell English','Shippori Mincho',serif;
  --f-head:'Zen Kaku Gothic New',system-ui,sans-serif;
  --f-digital:'DotGothic16','JetBrains Mono',monospace;
  --f-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --f-frag:'EB Garamond','Zen Kaku Gothic New',serif;
  --f-frag-ja:'Shippori Mincho',serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(194,164,242,0.10), transparent 60%),
    radial-gradient(ellipse 90% 70% at 80% 110%, rgba(118,230,224,0.07), transparent 55%),
    var(--base);
  background-attachment:fixed;
  color:var(--ink-soft); font-family:var(--f-head); min-height:100vh;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:760px;margin:0 auto;padding:clamp(1.2rem,4vw,2.5rem);}
.digital{font-family:var(--f-digital);letter-spacing:0.08em;}
.grad{background:linear-gradient(100deg,var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.grad-l{background:linear-gradient(100deg,var(--lilac),var(--pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ============ START ============ */
.intro{min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:0.2rem;}
.intro-mark{font-family:var(--f-digital);font-size:0.72rem;letter-spacing:0.42em;text-indent:0.42em;color:var(--cyan);text-shadow:0 0 8px rgba(118,230,224,0.5);margin-bottom:1.4rem;}
.intro h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,8vw,4.4rem);line-height:1.05;letter-spacing:0.01em;margin-bottom:0.4rem;}
.intro .ja{font-family:var(--f-frag-ja);font-size:clamp(0.95rem,2.4vw,1.2rem);color:var(--lilac-soft);letter-spacing:0.18em;margin-bottom:1.6rem;}
.intro p{font-family:var(--f-frag);font-weight:300;font-size:clamp(1rem,2.2vw,1.22rem);line-height:1.85;color:var(--ink-dim);max-width:40ch;margin-bottom:0.6rem;}
.intro .meta{font-family:var(--f-digital);font-size:0.72rem;letter-spacing:0.1em;color:var(--ink-faint);margin:1.4rem 0 2rem;}
.intro .meta b{color:var(--pink-soft);font-weight:400;}
.start-btn,.btn{
  font-family:var(--f-digital);font-size:0.84rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--cyan);background:transparent;cursor:pointer;
  padding:0.8rem 2.2rem;border:1px dashed var(--line-cyan);border-radius:999px;
  transition:color .25s,background .25s,border-style .25s,box-shadow .25s;
}
.start-btn:hover,.btn:hover{color:var(--base);background:var(--cyan);border-style:solid;box-shadow:0 0 22px -4px var(--cyan);}
.intro-links{margin-top:1.6rem;display:flex;gap:0.8rem;align-items:center;font-family:var(--f-digital);font-size:0.72rem;letter-spacing:0.06em;color:var(--ink-faint);}
.intro-links a{color:var(--lilac-soft);text-decoration:none;transition:color .2s;}
.intro-links a:hover{color:var(--cyan);}
.disclaim{margin-top:2.4rem;font-family:var(--f-frag);font-style:italic;font-size:0.84rem;color:var(--ink-faint);max-width:44ch;}

/* ============ QUIZ ============ */
#quiz{display:none;padding-top:1rem;}
.pbar-wrap{position:sticky;top:0;z-index:20;padding:0.9rem 0 0.3rem;background:linear-gradient(180deg,var(--base) 70%,transparent);}
.pbar-track{height:3px;background:var(--line-hair);border-radius:2px;overflow:hidden;}
.pbar{height:100%;width:0;background:linear-gradient(90deg,var(--lilac),var(--pink),var(--cyan));border-radius:2px;transition:width .45s ease;}
.pcount{font-family:var(--f-digital);font-size:0.66rem;letter-spacing:0.12em;color:var(--ink-faint);text-align:center;margin-top:0.55rem;}
/* no card-level animation — only the statement transitions (typewriter + height).
   the dial, glyph and progress just stay put between questions. */
.card{position:relative;padding:clamp(2.5rem,9vh,5rem) 0 2rem;}
.q-glyph{position:absolute;top:clamp(2rem,7.5vh,4.2rem);right:0;width:52px;height:52px;opacity:0.62;cursor:pointer;transition:opacity .3s,transform .5s;}
.q-glyph:hover{opacity:1;transform:rotate(8deg) scale(1.08);}
.q-glyph::after{content:'what is this?';position:absolute;top:100%;right:0;margin-top:4px;font-family:var(--f-digital);font-size:0.52rem;letter-spacing:0.08em;color:var(--cyan);white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none;}
.q-glyph:hover::after{opacity:0.75;}
.q-glyph .glyph,.glyph{display:block;width:100%;height:100%;overflow:visible;}
@media(max-width:560px){.q-glyph{width:42px;height:42px;top:1.6rem;}}
/* ===== live mode ===== */
.live-panel{margin-top:1.6rem;padding:1.4rem 1.4rem 1.1rem;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,0.012);animation:lpIn .5s ease;}
@keyframes lpIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.lp-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;font-family:var(--f-digital);font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;}
.lp-head .lph-t{color:var(--cyan);opacity:0.6;}
.lp-hide{background:none;border:1px solid var(--line-hair);border-radius:999px;color:var(--ink-faint);font-family:var(--f-digital);font-size:0.58rem;letter-spacing:0.08em;text-transform:none;cursor:pointer;padding:0.25rem 0.7rem;transition:color .2s,border-color .2s;}
.lp-hide:hover{color:var(--pink-soft);border-color:var(--line);}
.lp-body{display:flex;gap:1.3rem;align-items:flex-start;}
#liveRadar{width:200px;height:200px;flex:0 0 auto;}
.lp-side{flex:1;min-width:0;padding-top:0.4rem;}
.live-delta{display:flex;flex-wrap:wrap;gap:0.4rem;min-height:1.4rem;margin-bottom:0.7rem;}
.live-delta .dl{font-family:var(--f-digital);font-size:0.62rem;letter-spacing:0.04em;padding:0.12rem 0.5rem;border-radius:20px;border:1px solid var(--line);color:var(--ink-dim);}
.live-delta .dl.up{color:var(--cyan);border-color:rgba(118,230,224,0.4);}
.live-delta .dl.dn{color:var(--pink-soft);border-color:rgba(255,134,191,0.35);}
.live-delta .dl.prev{color:var(--base);background:linear-gradient(120deg,var(--lilac),var(--cyan));border-color:transparent;font-weight:500;}
.live-think{font-family:var(--f-frag);font-style:italic;font-size:0.95rem;line-height:1.6;color:var(--ink-soft);min-height:3rem;text-wrap:pretty;}
.live-think .cur{color:var(--cyan);font-style:normal;animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:0;}}
.live-strip{display:flex;flex-wrap:wrap;gap:0.3rem;margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);}
.live-chip{width:30px;height:30px;border-radius:8px;cursor:pointer;opacity:0.5;transition:opacity .2s,background .2s,transform .2s;padding:1px;}
.live-chip:hover,.live-chip.hot{opacity:1;background:rgba(118,230,224,0.07);transform:translateY(-2px);}
.live-chip .glyph{width:100%;height:100%;}
@media(max-width:560px){.lp-body{flex-direction:column;align-items:center;}.lp-side{width:100%;}}
/* hidden toggle */
.live-toggle{position:fixed;bottom:8px;right:8px;padding:10px;display:flex;align-items:center;gap:0.5rem;z-index:60;cursor:pointer;opacity:0.22;transition:opacity .35s;user-select:none;}
.live-toggle:hover{opacity:0.92;}
.live-toggle svg{width:22px;height:22px;flex:0 0 auto;transition:transform .6s ease;}
.live-toggle:hover svg{transform:rotate(72deg);}
.live-toggle svg line{stroke:var(--lilac);stroke-width:1.2;}
.live-toggle svg circle{fill:var(--cyan);}
.live-toggle.on svg line{stroke:var(--cyan);}
.live-toggle .lt-label{max-width:0;overflow:hidden;white-space:nowrap;font-family:var(--f-digital);font-size:0.62rem;letter-spacing:0.1em;color:var(--ink-dim);transition:max-width .4s ease,opacity .3s;opacity:0;}
.live-toggle:hover .lt-label{max-width:140px;opacity:1;}
.live-toggle.on .lt-label{color:var(--cyan);}
/* replay (results) */
.replay-sect .replay-stage{display:flex;gap:1.4rem;align-items:flex-start;margin-top:0.4rem;}
#replayRadar{width:200px;height:200px;flex:0 0 auto;}
.replay-side{flex:1;min-width:0;padding-top:0.3rem;}
.replay-item{font-family:var(--f-frag);font-size:clamp(1.05rem,2.6vw,1.3rem);line-height:1.45;color:var(--ink);margin-bottom:0.8rem;text-wrap:pretty;min-height:2.6rem;}
/* seekable scrubber — click or drag anywhere to jump through the replay */
.replay-bar{position:relative;height:6px;background:var(--line);border-radius:3px;margin:1.5rem 0;cursor:pointer;touch-action:none;}
.replay-bar::before{content:'';position:absolute;inset:-11px 0;}  /* taller invisible hit area for touch */
.replay-prog{position:relative;height:100%;width:0;background:linear-gradient(90deg,var(--lilac),var(--pink),var(--cyan));border-radius:3px;transition:width .2s ease;}
.replay-prog::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px -1px var(--cyan);transition:transform .12s;}
.replay-bar:hover .replay-prog::after{transform:translateY(-50%) scale(1.18);}
.replay-actions{display:flex;gap:0.7rem;flex-wrap:wrap;}
@media(max-width:560px){.replay-sect .replay-stage{flex-direction:column;align-items:center;}.replay-side{width:100%;}}
.q-facet{font-family:var(--f-digital);font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--pink);opacity:0.55;margin-bottom:1rem;}
/* height is driven by JS (two lines reserved); transition slides the dial for 3-line statements */
.q-text{font-family:var(--f-frag);font-weight:400;font-size:clamp(1.35rem,4.2vw,1.9rem);line-height:1.5;color:var(--ink);margin:0.4rem 0 2.4rem;text-wrap:pretty;overflow:hidden;transition:height .3s ease;}
.q-text .cur{color:var(--cyan);font-style:normal;animation:blink 1s steps(2) infinite;}
.scale-ends{display:flex;justify-content:space-between;margin-top:0.9rem;font-family:var(--f-digital);font-size:0.64rem;letter-spacing:0.06em;color:var(--ink-faint);}
.scale-ends .l{color:var(--lilac-soft);} .scale-ends .r{color:var(--cyan);}
.q-back{margin-top:2.2rem;background:none;border:none;color:var(--ink-faint);font-family:var(--f-digital);font-size:0.66rem;letter-spacing:0.1em;cursor:pointer;transition:color .2s;}
.q-back:hover{color:var(--pink-soft);}

/* ===== the answer dial — a 180° arc (radial, but still an ordered 1..6 line) ===== */
.dial{position:relative;width:min(440px,92%);margin:1.5rem auto 0.1rem;aspect-ratio:200 / 114;--fill:0;}
.dial-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.dial-track{fill:none;stroke:var(--line-soft);stroke-width:2.6;stroke-linecap:round;}
.dial-fill{fill:none;stroke:url(#dialGrad);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:100 100;stroke-dashoffset:calc(100 - var(--fill));filter:drop-shadow(0 0 6px rgba(118,230,224,0.35));
  transition:stroke-dashoffset .3s cubic-bezier(.3,.7,.3,1);}
.dial-cap{position:absolute;left:0;right:0;bottom:1%;text-align:center;font-family:var(--f-frag);font-style:italic;
  font-size:clamp(0.86rem,2.4vw,1rem);color:var(--ink-dim);pointer-events:none;text-wrap:balance;padding:0 16%;}
/* faint slice dividers — make the segmented tap targets legible without hover */
.dsep{stroke:rgba(255,134,191,0.12);stroke-width:0.5;pointer-events:none;stroke-linecap:round;}
/* the interactive wedges — the whole angular slice is the hit target */
.dwedge{fill:transparent;cursor:pointer;outline:none;transition:fill .18s;}
.dwedge:hover,.dwedge:focus-visible,.dwedge.hot{fill:rgba(118,230,224,0.06) !important;}
/* the visible dots (decoration; clicks pass through to the wedge beneath) */
.dpip{pointer-events:none;transition:filter .22s;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6));}
.dpip.hot{filter:drop-shadow(0 0 4px rgba(118,230,224,0.95));}
.dpip.chosen{filter:drop-shadow(0 0 6px rgba(63,240,230,1));}
.dp1{fill:#9a7bd6;} .dp2{fill:#b97ec9;} .dp3{fill:#d782bf;}
.dp4{fill:#ff86bf;} .dp5{fill:#93c8d2;} .dp6{fill:#3ff0e6;}
.dnum{pointer-events:none;fill:var(--ink-faint);font-family:var(--f-digital);font-size:5px;text-anchor:middle;dominant-baseline:middle;}
.dial-keys{margin-top:0.4rem;text-align:center;font-family:var(--f-digital);font-size:0.56rem;letter-spacing:0.08em;color:var(--ink-faint);opacity:0.65;}
.dial-keys b{color:var(--ink-dim);font-weight:400;}
/* small / touch screens: no hover to discover the targets, so the slices read as a
   faint rainbow of tappable segments with stronger dividers */
@media(max-width:560px),(hover:none){
  .dial-keys{display:none;}
  /* radial borders + a faint outline on every slice → each tap target is a visible
     bounded region, no hover needed to discover it */
  .dsep{stroke:rgba(255,134,191,0.32);stroke-width:1;}
  .dwedge{stroke:rgba(214,196,222,0.16);stroke-width:0.5;}
  .dwedge.hot{fill:rgba(118,230,224,0.40) !important;stroke:rgba(118,230,224,0.7);}
}
@media(max-width:560px){.dial{width:96%;}}

/* ============ RESULTS (shared bits) ============ */
#results{display:none;padding-top:1.5rem;}
.r-mark{font-family:var(--f-digital);font-size:0.66rem;letter-spacing:0.3em;text-indent:0.3em;color:var(--cyan);text-align:center;opacity:0.6;margin-bottom:0.6rem;}
.sect{margin:2.6rem 0;}
.sect-h{display:flex;align-items:baseline;gap:0.7rem;margin-bottom:0.4rem;flex-wrap:wrap;}
.sect-h .jp{font-family:var(--f-display);font-size:clamp(1.2rem,3.4vw,1.7rem);color:var(--ink);}
.sect-h .en{font-family:var(--f-frag);font-size:clamp(0.85rem,1.7vw,1rem);color:var(--pink-soft);letter-spacing:0.04em;text-transform:lowercase;}
.sect-sub{font-family:var(--f-frag);font-weight:300;font-size:1.02rem;line-height:1.75;color:var(--ink-soft);margin-bottom:1.4rem;max-width:58ch;}

.radar-wrap{display:flex;justify-content:center;margin:0.5rem 0 1.5rem;}
#radar{max-width:100%;height:auto;}
.share-mini{display:flex;gap:0.6rem;flex-wrap:wrap;justify-content:flex-end;margin:-0.2rem 0 2.6rem;}
.share-mini .copy-btn{font-size:0.7rem;padding:0.5rem 1.2rem;}
.axes{display:flex;flex-direction:column;gap:0.6rem;}
.axis{background:color-mix(in srgb,var(--panel) 90%,transparent);border:1px solid var(--line);border-left:2px solid var(--accentc,var(--pink));border-radius:4px;padding:0.85rem 1.05rem;}
.axis-top{display:flex;align-items:baseline;justify-content:space-between;gap:0.6rem;}
.axis-name{font-family:var(--f-head);font-weight:500;font-size:1.02rem;color:var(--ink);}
.axis-name .soft{font-family:var(--f-digital);font-size:0.58rem;letter-spacing:0.08em;color:var(--ink-faint);margin-left:0.5rem;vertical-align:0.1em;}
.axis-score{font-family:var(--f-display);font-size:1.5rem;color:var(--ink);}
.axis-score b{background:linear-gradient(100deg,var(--pink),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.axis-score .pm{font-family:var(--f-digital);font-size:0.66rem;color:var(--ink-faint);-webkit-text-fill-color:var(--ink-faint);}
.axis-bar{position:relative;height:16px;margin:0.85rem 0 0.6rem;background:var(--void);border-radius:8px;}
.axis-fill{position:absolute;top:0;bottom:0;left:0;border-radius:8px;background:linear-gradient(90deg,var(--lilac),var(--pink),var(--cyan));transition:width 1s cubic-bezier(.2,.7,.3,1);opacity:0.85;}
/* the confidence interval: a cyan bracket centered on the score, visible on BOTH sides of the mark */
.axis-band{position:absolute;top:0;bottom:0;background:rgba(118,230,224,0.12);border:1.5px solid rgba(118,230,224,0.8);border-radius:5px;box-sizing:border-box;}
.axis-tick{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);border-radius:1px;box-shadow:0 0 5px rgba(0,0,0,0.75);z-index:2;}
.axis-poles{display:flex;justify-content:space-between;font-family:var(--f-digital);font-size:0.6rem;letter-spacing:0.04em;color:var(--ink-faint);}
.axis-poles .hi{color:var(--cyan);} .axis-poles .lo{color:var(--lilac-soft);}
.axis-blurb{font-family:var(--f-frag);font-weight:400;font-size:1.02rem;line-height:1.7;color:var(--ink-soft);margin-top:0.6rem;text-wrap:pretty;}
.axis-read{font-family:var(--f-frag);font-weight:300;font-style:italic;font-size:0.98rem;line-height:1.65;color:var(--ink-dim);margin-top:0.5rem;padding-top:0.5rem;border-top:1px solid var(--line-soft);}
.axis-note{display:flex;gap:0.5rem;font-family:var(--f-frag);font-weight:400;font-size:0.98rem;line-height:1.6;color:var(--lilac-soft);margin-top:0.7rem;padding:0.6rem 0.8rem;background:linear-gradient(120deg,rgba(118,230,224,0.08),rgba(255,134,191,0.08));border:1px solid var(--line-soft);border-radius:5px;text-wrap:pretty;}
.axis-note::before{content:'✦';color:var(--cyan);flex:none;opacity:0.85;}
.axis.soft-axis{opacity:0.86;border-left-style:dashed;}
.soft-note{font-family:var(--f-digital);font-size:0.58rem;letter-spacing:0.06em;color:var(--ink-faint);margin-top:0.5rem;}

/* Big Five rows */
.b5{display:flex;flex-direction:column;gap:0.7rem;margin-bottom:1.4rem;}
.b5-row{display:flex;align-items:center;gap:0.9rem;}
.b5-label{width:140px;flex-shrink:0;font-family:var(--f-frag);font-size:1rem;color:var(--ink-soft);}
.b5-track{flex:1;height:16px;background:var(--void);border-radius:8px;overflow:hidden;}
.b5-fill{height:100%;border-radius:8px;transition:width .9s ease;}
.b5-pct{width:42px;text-align:right;font-family:var(--f-mono);font-size:0.82rem;color:var(--ink-dim);flex-shrink:0;}

/* 27 facet rows */
.facet-domain{margin-bottom:1.4rem;}
.facet-dh{font-family:var(--f-head);font-weight:600;font-size:1rem;margin-bottom:0.5rem;padding-bottom:0.35rem;border-bottom:1px solid var(--line-soft);}
.facet-row{display:flex;align-items:center;gap:0.8rem;margin-bottom:0.4rem;}
.facet-label{width:150px;flex-shrink:0;font-family:var(--f-frag);font-size:0.96rem;color:var(--ink-dim);}
.facet-track{flex:1;height:9px;background:var(--void);border-radius:5px;overflow:hidden;}
.facet-fill{height:100%;border-radius:5px;opacity:0.85;transition:width .8s ease;}
.facet-pct{width:34px;text-align:right;font-family:var(--f-mono);font-size:0.72rem;color:var(--ink-faint);flex-shrink:0;}

/* actions */
.r-actions{text-align:center;margin:3rem 0 2rem;display:flex;flex-direction:column;align-items:center;gap:1rem;}
.share-row{display:flex;gap:0.8rem;flex-wrap:wrap;justify-content:center;}
.copy-btn{font-family:var(--f-digital);font-size:0.78rem;letter-spacing:0.1em;color:var(--pink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:0.7rem 1.8rem;cursor:pointer;transition:all .2s;}
.copy-btn:hover{border-color:var(--pink);background:var(--raise);}
.copy-btn.done{color:var(--green);border-color:var(--green);}
.copy-btn.primary{color:var(--base);background:linear-gradient(120deg,var(--cyan),var(--pink));border-color:transparent;font-weight:500;box-shadow:0 6px 22px -8px var(--pink-hot);}
.copy-btn.primary:hover{box-shadow:0 8px 26px -6px var(--pink-hot);transform:translateY(-1px);}
.copy-btn.primary.done{background:var(--green);}
.copy-btn.ghost{border-color:var(--line-hair);color:var(--ink-dim);font-size:0.68rem;padding:0.5rem 1.4rem;}
.copy-btn.ghost:hover{color:var(--cyan);border-color:var(--line-cyan);background:transparent;}
.share-link{width:100%;max-width:540px;text-align:center;}
.share-link .sl-label{font-family:var(--f-digital);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:0.55rem;}
.share-link .sl-row{display:flex;gap:0.5rem;}
.share-link input{flex:1;min-width:0;font-family:var(--f-mono);font-size:0.74rem;color:var(--ink-soft);background:var(--void);border:1px solid var(--line);border-radius:999px;padding:0.6rem 1rem;text-overflow:ellipsis;}
.share-link input:focus{outline:none;border-color:var(--line-cyan);}
.share-link .copy-btn{padding:0.6rem 1.3rem;font-size:0.68rem;white-space:nowrap;}
.share-link .sl-hint{font-family:var(--f-frag);font-style:italic;font-size:0.8rem;color:var(--ink-faint);margin-top:0.55rem;line-height:1.5;}
.r-nav{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;margin-top:0.6rem;}
.r-nav a{font-family:var(--f-digital);font-size:0.7rem;letter-spacing:0.06em;color:var(--lilac-soft);text-decoration:none;transition:color .2s;}
.r-nav a:hover{color:var(--cyan);}
.retake{background:none;border:none;color:var(--ink-faint);font-family:var(--f-digital);font-size:0.68rem;letter-spacing:0.1em;cursor:pointer;}
.retake:hover{color:var(--cyan);}
.foot-note{font-family:var(--f-frag);font-size:0.95rem;color:var(--ink-dim);text-align:left;margin:1.5rem 0 0;line-height:1.7;overflow-wrap:break-word;}
.foot-note a{color:var(--cyan);text-decoration:underline;text-decoration-color:var(--line-cyan);text-underline-offset:0.15em;}

/* =====================================================================
   REBALANCED RESULTS (v2) — weight tracks importance.
   Hero + radar lead; share/react is a sticky bar; the story gets a beat;
   reference data (Big Five + 27 facets) collapses behind a disclosure.
   See DESIGN-SYSTEM.md.
   ===================================================================== */
:root{ --gap-hero:clamp(3rem,8vh,5rem); --gap-beat:clamp(2.2rem,6vh,3.4rem); }

/* results top nav — quick way back to the collection (+ retake) */
.r-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;}
.r-home{font-family:var(--f-digital);font-size:0.68rem;letter-spacing:0.1em;color:var(--ink-faint);text-decoration:none;background:none;border:none;cursor:pointer;padding:0;transition:color .2s;}
.r-home:hover{color:var(--cyan);}

/* hero shape — the radar promoted to co-star beside a short read */
.hero-shape{display:flex;align-items:center;justify-content:center;gap:clamp(1.2rem,5vw,2.6rem);flex-wrap:wrap;margin:0.4rem 0 0;}
.hero-shape .radar-wrap{margin:0;}
.shape-read{max-width:30ch;text-align:left;}
.shape-read .sr-h{font-family:var(--f-frag);font-size:1.08rem;color:var(--ink);margin-bottom:0.5rem;}
.shape-read p{font-family:var(--f-frag);font-weight:300;font-size:0.98rem;line-height:1.7;color:var(--ink-dim);text-wrap:pretty;}
.shape-read .peak{color:var(--cyan);} .shape-read .dip{color:var(--lilac-soft);}
@media(max-width:560px){.shape-read{text-align:center;}}

/* action + react bar — the consolidated, sticky conversion surface */
.actbar{position:sticky;top:0.5rem;z-index:30;margin:var(--gap-hero) 0 var(--gap-beat);
  background:linear-gradient(180deg,rgba(29,20,34,0.95),rgba(22,16,25,0.93));
  border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem;
  box-shadow:0 14px 40px -18px rgba(0,0,0,0.85),inset 0 1px 0 rgba(255,255,255,0.04);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}
.react{display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap;margin-bottom:0.85rem;padding-bottom:0.85rem;border-bottom:1px solid var(--line-hair);}
.react .rq{font-family:var(--f-frag);font-style:italic;font-size:1rem;color:var(--ink-soft);}
.react-btn{font-family:var(--f-head);font-weight:500;font-size:0.84rem;color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:0.5rem 1.2rem;cursor:pointer;transition:color .18s,background .18s,transform .12s,box-shadow .18s;}
.react-btn:hover{transform:translateY(-1px);}
.react-btn.yes.on{color:var(--base);background:linear-gradient(120deg,var(--cyan),var(--green));border-color:transparent;box-shadow:0 6px 18px -8px var(--cyan);}
.react-btn.no.on{color:var(--base);background:linear-gradient(120deg,var(--lilac),var(--pink));border-color:transparent;}
.react .react-ack{font-family:var(--f-digital);font-size:0.6rem;letter-spacing:0.08em;color:var(--green);margin-left:auto;opacity:0;transition:opacity .3s;}
.react .react-ack.show{opacity:0.85;}
.actbar .share-row{display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap;justify-content:flex-start;margin:0;}
.actbar .share-row .grow{flex:1;min-width:0;}
@media(max-width:560px){.actbar .share-row .grow{display:none;}}

/* story beat — the 'more than a quiz' lever */
.story{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:18px;padding:1.5rem 1.6rem;
  background:linear-gradient(120deg,rgba(118,230,224,0.06),rgba(194,164,242,0.06));display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap;}
.story .glow{position:absolute;inset:0;background:radial-gradient(circle at 88% 28%,rgba(118,230,224,0.16),transparent 55%);pointer-events:none;}
.story-vis{flex:0 0 auto;position:relative;z-index:1;}
.story-txt{flex:1;min-width:230px;position:relative;z-index:1;}
.story-kicker{font-family:var(--f-digital);font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--cyan);opacity:0.8;margin-bottom:0.5rem;}
.story-h{font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,3.6vw,1.8rem);color:var(--ink);line-height:1.15;margin-bottom:0.6rem;text-wrap:balance;}
.story-p{font-family:var(--f-frag);font-weight:300;font-size:1rem;line-height:1.7;color:var(--ink-soft);margin-bottom:0.9rem;max-width:52ch;text-wrap:pretty;}
/* inline prose links in results copy — cyan, not the default browser blue */
.story-p a,.sect-sub a,.axis-blurb a,.shape-read a{color:var(--cyan);text-decoration:underline;text-decoration-color:var(--line-cyan);text-underline-offset:0.15em;transition:color .2s;}
.story-p a:hover,.sect-sub a:hover,.axis-blurb a:hover,.shape-read a:hover{color:var(--cyan-hot);text-decoration-color:var(--cyan);}
.story-link{font-family:var(--f-digital);font-size:0.72rem;letter-spacing:0.08em;color:var(--cyan);text-decoration:none;border-bottom:1px solid var(--line-cyan);padding-bottom:2px;transition:color .2s,border-color .2s;}
.story-link:hover{color:var(--cyan-hot);border-color:var(--cyan);}

/* five axes — deeper read tucked behind a disclosure */
.axis-blurb{margin-top:0.5rem;}
.axis-more{margin-top:0.5rem;}
.axis-more summary{font-family:var(--f-digital);font-size:0.58rem;letter-spacing:0.08em;color:var(--ink-faint);cursor:pointer;list-style:none;transition:color .2s;}
.axis-more summary::-webkit-details-marker{display:none;}
.axis-more summary::after{content:'＋ the deeper read';}
.axis-more[open] summary::after{content:'－ hide';}
.axis-more summary:hover{color:var(--cyan);}
.axis-more .axis-read{margin-top:0.5rem;}

/* full breakdown — collapsed reference data */
.breakdown{border:1px solid var(--line-hair);border-radius:12px;background:rgba(255,255,255,0.01);margin:var(--gap-beat) 0;}
.breakdown>summary{font-family:var(--f-digital);font-size:0.76rem;letter-spacing:0.12em;color:var(--ink-dim);cursor:pointer;padding:1.1rem 1.3rem;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;transition:color .2s;}
.breakdown>summary::-webkit-details-marker{display:none;}
.breakdown>summary:hover{color:var(--cyan);}
.breakdown>summary::after{content:'▾';font-size:0.7rem;color:var(--ink-faint);flex:none;}
.breakdown[open]>summary::after{content:'▴';}
.breakdown>summary .bd-sub{font-family:var(--f-frag);font-style:italic;font-size:0.78rem;color:var(--ink-faint);letter-spacing:0;text-transform:none;font-weight:300;display:block;margin-top:0.3rem;}
.bd-body{padding:0 1.3rem 1.3rem;}

/* footer hub doorway */
.foot{margin-top:var(--gap-hero);text-align:center;}
.hub-h{font-family:var(--f-digital);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1rem;}
.hubrow{display:flex;gap:0.8rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.8rem;}
.hubcard{flex:1;min-width:200px;max-width:240px;text-align:left;border:1px solid var(--line-soft);border-radius:12px;padding:1rem 1.1rem;background:var(--panel);text-decoration:none;transition:border-color .2s,transform .2s;display:block;}
/* four cards -> a symmetric 2×2 grid (equal widths, centered) instead of an orphaned 3+1 */
.hubrow:has(.hubcard:nth-child(4)){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px;margin-left:auto;margin-right:auto;}
.hubrow:has(.hubcard:nth-child(4)) .hubcard{flex:none;min-width:0;max-width:none;}
@media(max-width:460px){.hubrow:has(.hubcard:nth-child(4)){grid-template-columns:1fr;max-width:280px;}}
.hubcard:hover{border-color:var(--line-cyan);transform:translateY(-2px);}
.hubcard .hc-k{font-family:var(--f-digital);font-size:0.54rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:0.4rem;}
.hubcard .hc-t{font-family:var(--f-frag);font-size:1.05rem;color:var(--ink);margin-bottom:0.2rem;}
.hubcard .hc-t .arr{color:var(--cyan);}
.hubcard .hc-d{font-family:var(--f-frag);font-weight:300;font-size:0.82rem;color:var(--ink-dim);line-height:1.45;}

/* =========================================================================
   SHARED ENTRY / HUB + RESUME (moved out of index.html so the SPI pages
   share the same anti-drop-off entry treatment) + the type-free SPI hero.
   ========================================================================= */
/* identity line shared by the type hero (index) and the SPI hero */
.type-kicker{font-family:var(--f-digital);font-size:0.66rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--pink);opacity:0.7;}
.type-name{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,7vw,3.2rem);line-height:1.08;margin:0.4rem 0 0.3rem;}
.type-tag{font-family:var(--f-frag);font-style:italic;font-size:clamp(1rem,2.6vw,1.25rem);color:var(--lilac-soft);margin-bottom:1.4rem;}
/* SPI hero: a lighter, type-free identity (no emblem / no panel) */
.spi-id{text-align:center;margin-bottom:1.4rem;}
.spi-id .type-name{margin-top:0.3rem;}
.spi-id .type-tag{margin-bottom:0;}

/* resume banner — anti-drop-off: offer to continue a saved partial run */
.resume-banner{width:100%;max-width:30rem;margin:0 auto 1.6rem;border:1px solid var(--line-cyan);border-radius:16px;background:linear-gradient(120deg,rgba(118,230,224,0.10),rgba(194,164,242,0.06));padding:1.1rem 1.2rem;text-align:left;box-shadow:0 10px 30px -16px rgba(0,0,0,0.8);}
.resume-banner .rb-t{font-family:var(--f-frag);font-size:1.05rem;color:var(--ink);}
.resume-banner .rb-s{font-family:var(--f-digital);font-size:0.58rem;letter-spacing:0.08em;color:var(--cyan);margin:0.15rem 0 0.7rem;}
.resume-banner .rb-bar{height:5px;background:var(--void);border-radius:3px;overflow:hidden;margin-bottom:0.9rem;}
.resume-banner .rb-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lilac),var(--pink),var(--cyan));border-radius:3px;}
.resume-banner .rb-act{display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap;}
.resume-banner .rb-cont{font-family:var(--f-digital);font-size:0.74rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--base);background:linear-gradient(120deg,var(--cyan),var(--green));border:none;border-radius:999px;padding:0.6rem 1.5rem;cursor:pointer;}
.resume-banner .rb-fresh{font-family:var(--f-digital);font-size:0.66rem;letter-spacing:0.06em;color:var(--ink-faint);background:none;border:none;cursor:pointer;}
.resume-banner .rb-fresh:hover{color:var(--pink-soft);}

/* ===== ENTRY / HUB (landing) — hook, de-risk, payoff, collection ===== */
.entry{display:flex;flex-direction:column;}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0.4rem 0 0;font-family:var(--f-digital);font-size:0.62rem;letter-spacing:0.18em;}
.topbar .mark{color:var(--cyan);text-shadow:0 0 8px rgba(118,230,224,0.4);}
.topbar a{color:var(--ink-faint);text-decoration:none;transition:color .2s;letter-spacing:0.06em;}
.topbar a:hover{color:var(--cyan);}
.ehero{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 0 1rem;}
.ehero .kick{font-family:var(--f-digital);font-size:0.7rem;letter-spacing:0.4em;text-indent:0.4em;color:var(--cyan);text-shadow:0 0 8px rgba(118,230,224,0.5);margin-bottom:1.3rem;}
.ehero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,8vw,4.4rem);line-height:1.04;margin-bottom:0.4rem;text-wrap:balance;}
.ehero .ja{font-family:var(--f-frag-ja);font-size:clamp(0.95rem,2.4vw,1.2rem);color:var(--lilac-soft);letter-spacing:0.18em;margin-bottom:1.4rem;}
.ehero .lede{font-family:var(--f-frag);font-weight:300;font-size:clamp(1.05rem,2.3vw,1.28rem);line-height:1.8;color:var(--ink-dim);max-width:42ch;margin-bottom:1.8rem;text-wrap:pretty;}
.begin{font-family:var(--f-digital);font-size:0.92rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--base);background:linear-gradient(120deg,var(--cyan),var(--pink));border:none;border-radius:999px;padding:1.05rem 3rem;cursor:pointer;box-shadow:0 12px 34px -10px var(--pink-hot);transition:transform .18s,box-shadow .18s;}
.begin:hover{transform:translateY(-2px);box-shadow:0 16px 40px -8px var(--pink-hot);}
.begin .sub{display:block;font-size:0.58rem;letter-spacing:0.08em;text-transform:none;opacity:0.75;margin-top:0.2rem;}
.assure{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem;max-width:34rem;}
.assure .chip{font-family:var(--f-digital);font-size:0.6rem;letter-spacing:0.06em;color:var(--ink-dim);border:1px solid var(--line-hair);border-radius:999px;padding:0.35rem 0.85rem;display:inline-flex;gap:0.4rem;align-items:center;}
.assure .chip b{color:var(--cyan-hot);font-weight:400;}
.assure .chip .i{color:var(--cyan);}
.cue{margin-top:2.4rem;font-family:var(--f-digital);font-size:0.58rem;letter-spacing:0.2em;color:var(--ink-faint);opacity:0.7;}
.esection{margin:clamp(3rem,9vh,5.5rem) 0;}
.esection .sec-h{font-family:var(--f-display);font-weight:400;font-size:clamp(1.4rem,3.6vw,2rem);color:var(--ink);text-align:center;margin-bottom:0.4rem;text-wrap:balance;}
.esection .sec-sub{font-family:var(--f-frag);font-weight:300;font-size:1.02rem;line-height:1.7;color:var(--ink-dim);text-align:center;max-width:48ch;margin:0 auto 1.8rem;text-wrap:pretty;}
.preview-card{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:clamp(1.5rem,4vw,2.4rem);box-shadow:0 14px 40px -22px rgba(0,0,0,0.8);}
.dial-preview{pointer-events:none;margin-top:1.2rem;}
.preview-card .pc-tag{font-family:var(--f-digital);font-size:0.56rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--pink);opacity:0.6;margin-bottom:0.8rem;}
.preview-card .pc-q{font-family:var(--f-frag);font-size:clamp(1.25rem,3.6vw,1.7rem);line-height:1.5;color:var(--ink);margin-bottom:1.8rem;text-wrap:pretty;}
.preview-ends{display:flex;justify-content:space-between;margin-top:0.8rem;font-family:var(--f-digital);font-size:0.62rem;color:var(--ink-faint);}
.preview-ends .l{color:var(--lilac-soft);} .preview-ends .r{color:var(--cyan);}
.preview-mid{text-align:center;font-family:var(--f-frag);font-style:italic;font-size:0.84rem;color:var(--ink-faint);margin-top:0.6rem;}
.payoff{border:1px solid var(--line-soft);border-radius:16px;background:linear-gradient(120deg,rgba(194,164,242,0.05),rgba(118,230,224,0.04));padding:clamp(1.6rem,4vw,2.4rem);text-align:center;}
.emblems{display:flex;gap:clamp(0.6rem,3vw,1.6rem);justify-content:center;flex-wrap:wrap;margin-bottom:1.4rem;}
.emblems .type-art{width:clamp(48px,12vw,68px);height:auto;margin:0;opacity:0.9;filter:drop-shadow(0 4px 14px rgba(0,0,0,0.4));}
.po-list{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;font-family:var(--f-frag);color:var(--ink-soft);font-size:0.98rem;}
.po-list span{display:inline-flex;gap:0.4rem;align-items:center;}
.po-list .i{color:var(--cyan);}
.hub{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.testcard{border:1px solid var(--line-soft);border-radius:16px;background:var(--panel);padding:1.4rem 1.5rem;text-decoration:none;display:block;text-align:left;width:100%;font:inherit;color:inherit;transition:border-color .2s,transform .2s;cursor:pointer;}
.testcard:hover{border-color:var(--line-cyan);transform:translateY(-3px);}
.testcard.flagship{grid-column:1 / -1;background:linear-gradient(120deg,rgba(255,134,191,0.07),rgba(118,230,224,0.05)),var(--panel);border-color:var(--line);}
.testcard .tc-k{font-family:var(--f-digital);font-size:0.56rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--pink);opacity:0.7;margin-bottom:0.5rem;}
.testcard .tc-t{font-family:var(--f-display);font-weight:400;font-size:1.5rem;color:var(--ink);margin-bottom:0.35rem;line-height:1.1;}
.testcard .tc-d{font-family:var(--f-frag);font-weight:300;font-size:0.95rem;line-height:1.6;color:var(--ink-dim);margin-bottom:0.8rem;text-wrap:pretty;}
.testcard .tc-meta{font-family:var(--f-digital);font-size:0.58rem;letter-spacing:0.06em;color:var(--ink-faint);}
.testcard .tc-go{color:var(--cyan);}
.testcard.soon{opacity:0.55;cursor:default;}
.testcard.soon:hover{transform:none;border-color:var(--line-soft);}
.testcard.soon .tc-k{color:var(--ink-faint);}
.entry-disclaim{font-family:var(--f-frag);font-style:italic;font-size:0.9rem;color:var(--ink-faint);max-width:48ch;margin:2.4rem auto 0;text-align:center;line-height:1.7;}
@media(max-width:620px){.hub{grid-template-columns:1fr;}}

/* ============ science contribution flow (opt-in; rendered by science.js) ============ */
.sci-card{margin:1.6rem 0;padding:1.5rem 1.5rem 1.3rem;border:1px solid var(--line-cyan);border-radius:16px;
  background:linear-gradient(180deg,rgba(118,230,224,0.05),rgba(255,134,191,0.02));
  box-shadow:0 0 30px -16px var(--cyan);animation:sciIn .5s ease;}
@keyframes sciIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.sci-card.dismissed{opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s;}
.sci-k{font-family:var(--f-digital);font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:0.5rem;}
.sci-h{font-family:var(--f-display);font-weight:400;font-size:clamp(1.3rem,3vw,1.7rem);color:var(--ink);margin:0 0 0.6rem;line-height:1.2;}
.sci-p{font-family:var(--f-frag);font-size:0.98rem;line-height:1.7;color:var(--ink-dim);margin:0 0 0.7rem;max-width:60ch;}
.sci-p a{color:var(--cyan);border-bottom:1px dotted var(--line-cyan);}
.sci-p a:hover{color:var(--cyan-hot);}
.sci-fine{font-family:var(--f-frag);font-size:0.9rem;line-height:1.65;color:var(--ink-faint);margin:0 0 1rem;max-width:60ch;}
.sci-fine b{color:var(--ink-soft);font-weight:500;}
.sci-actions{display:flex;flex-wrap:wrap;gap:0.7rem;align-items:center;margin-top:0.4rem;}
.sci-btn{font-family:var(--f-digital);font-size:0.74rem;letter-spacing:0.08em;color:var(--pink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:0.65rem 1.6rem;cursor:pointer;transition:all .2s;}
.sci-btn:hover{border-color:var(--pink);background:var(--raise);}
.sci-btn.primary{color:var(--base);background:linear-gradient(120deg,var(--cyan),var(--pink));border-color:transparent;font-weight:500;box-shadow:0 6px 22px -8px var(--pink-hot);}
.sci-btn.primary:hover{box-shadow:0 8px 26px -6px var(--pink-hot);transform:translateY(-1px);}
.sci-btn.ghost{border-color:var(--line-hair);color:var(--ink-dim);font-size:0.68rem;padding:0.5rem 1.3rem;}
.sci-btn.ghost:hover{color:var(--cyan);border-color:var(--line-cyan);}

/* consent modal */
.sci-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center;
  padding:max(2vh,1rem) 1rem;overflow:auto;background:rgba(6,4,10,0.82);backdrop-filter:blur(6px);animation:sciFade .25s ease;}
@keyframes sciFade{from{opacity:0;}to{opacity:1;}}
.sci-panel{width:min(620px,100%);margin:auto;padding:1.9rem 1.8rem;border:1px solid var(--line-cyan);border-radius:18px;
  background:var(--panel);box-shadow:0 24px 80px -20px rgba(0,0,0,0.8);}
.sci-panel .sci-h{font-size:clamp(1.4rem,3.4vw,1.9rem);}
.sci-sub{font-family:var(--f-digital);font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--pink-soft);margin:1.3rem 0 0.5rem;}
.sci-list{list-style:none;margin:0;padding:0;}
.sci-list li{position:relative;font-family:var(--f-frag);font-size:0.95rem;line-height:1.6;color:var(--ink-dim);padding:0.22rem 0 0.22rem 1.1rem;}
.sci-list li::before{content:'·';position:absolute;left:0.15rem;color:var(--cyan);}
.sci-list li b{color:var(--ink-soft);font-weight:500;}
.sci-list li em{color:var(--pink-soft);font-style:italic;}
.sci-choose{margin-top:1.4rem;padding:0.9rem 1rem;border:1px solid var(--line-hair);border-radius:12px;background:rgba(255,255,255,0.015);font-size:0.92rem;}
.sci-panel .sci-actions{margin-top:1.5rem;}

/* accuracy rating */
.sci-rating .sci-scale{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;margin-top:0.6rem;}
.sci-end{font-family:var(--f-digital);font-size:0.6rem;letter-spacing:0.1em;color:var(--ink-faint);}
.sci-dot{width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink-dim);
  font-family:var(--f-display);font-size:1rem;cursor:pointer;transition:all .18s;}
.sci-dot:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan);}
.sci-dot.on{border-color:transparent;background:linear-gradient(120deg,var(--cyan),var(--pink));color:var(--base);}
.sci-dot:disabled{cursor:default;}
.sci-thanks{margin-top:0.9rem;font-family:var(--f-frag);font-style:italic;color:var(--cyan);font-size:0.95rem;}

/* page footer — the research disclaimer (.foot-note) + privacy note (left-aligned
   prose) over a centered web-furniture footer in the kagerou.glass house style. */
.page-foot{margin-top:0.9rem;text-align:center;}
.sci-privacy{margin:0;font-family:var(--f-frag);font-size:0.95rem;line-height:1.7;color:var(--ink-dim);text-align:left;overflow-wrap:break-word;}
.sci-privacy b{color:var(--ink-soft);font-weight:500;}
.sci-privacy a{color:var(--cyan);text-decoration:underline;text-decoration-color:var(--line-cyan);text-underline-offset:0.15em;}
/* links row */
.foot-links{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:0.45rem 0.7rem;align-items:center;justify-content:center;font-family:var(--f-digital);font-size:0.72rem;letter-spacing:0.06em;}
.foot-links a{color:var(--ink-dim);text-decoration:none;transition:color .2s;}
.foot-links a:hover{color:var(--cyan);}
.foot-links .fl-sep{color:var(--pink);opacity:0.45;}
.foot-logo{font-family:var(--f-frag-ja);font-size:0.95rem;letter-spacing:0.16em;color:var(--pink-soft)!important;text-shadow:0 0 10px rgba(255,134,191,0.35);}
.foot-logo:hover{color:var(--cyan)!important;text-shadow:0 0 12px rgba(118,230,224,0.45);}
/* the something-in-between: webring badge · blinky · the ward door */
.foot-furniture{margin-top:1.15rem;display:flex;flex-wrap:wrap;gap:0.6rem 1.1rem;align-items:center;justify-content:center;font-family:var(--f-digital);font-size:0.64rem;letter-spacing:0.08em;color:var(--ink-faint);}
.foot-furniture .webring{display:inline-flex;gap:0.5rem;align-items:center;padding:0.28rem 0.6rem;border:1px solid var(--line-hair);border-radius:999px;}
.foot-furniture .webring a{color:var(--ink-dim);text-decoration:none;}
.foot-furniture .webring a:hover{color:var(--cyan);}
.foot-furniture .ring-badge{color:var(--cyan);opacity:0.85;}
.foot-furniture .blinky{color:var(--pink-soft);animation:blink 1.5s steps(2,end) infinite;}
.foot-furniture .ward-door{font-family:var(--f-frag-ja);font-size:0.85rem;letter-spacing:0.12em;color:var(--ink-faint);opacity:0.4;text-decoration:none;transition:color .2s,opacity .2s;}
.foot-furniture .ward-door:hover{color:var(--crimson);opacity:0.95;}
.foot-craft{margin-top:1.2rem;font-family:var(--f-frag);font-style:italic;font-size:0.82rem;color:var(--ink-faint);}
.foot-craft a{color:var(--ink-dim);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:0.15em;}
.foot-craft a:hover{color:var(--cyan);}
@media(max-width:620px){.sci-panel{padding:1.5rem 1.2rem;}}