/* Page navigation for Forecourt, Console, Velocity, Solstice and iCandy (built by theme-navs.js). Each replaces the
   page sidebar only once it has mounted (html.sn-on). Motion is transform / opacity only. */

/* ---------- Layout: Forecourt's pylon stands in a left column; the others span the top of the station page ---------- */
html.sn-on:is([data-theme="forecourt"],[data-theme="console"],[data-theme="velocity"],[data-theme="solstice"],[data-theme="icandy"],[data-theme="atelier"],[data-theme="locker"],[data-theme="loupe"])[data-mode] .station-rail-left { display:none !important; }
html.sn-on[data-theme="loupe"][data-mode] .station-layout { grid-template-columns:minmax(0,1fr) 240px !important; }
html.sn-on[data-theme="loupe"][data-mode] .station-layout:not(.has-right) { grid-template-columns:minmax(0,1fr) !important; }
html.sn-on[data-theme="locker"][data-mode] .station-layout { grid-template-columns:minmax(0,1fr) 230px !important; }
html.sn-on[data-theme="locker"][data-mode] .station-layout:not(.has-right) { grid-template-columns:minmax(0,1fr) !important; }
html.sn-on[data-theme="locker"][data-mode] #app-view { padding-bottom:140px; }
html.sn-on:is([data-theme="console"],[data-theme="velocity"],[data-theme="solstice"],[data-theme="icandy"])[data-mode] .station-layout { grid-template-columns:minmax(0,1fr) 230px !important; }
html.sn-on:is([data-theme="console"],[data-theme="velocity"],[data-theme="solstice"],[data-theme="icandy"])[data-mode] .station-layout:not(.has-right) { grid-template-columns:minmax(0,1fr) !important; }
html.sn-on:is([data-theme="forecourt"],[data-theme="atelier"])[data-mode] .station-layout { grid-template-rows:auto 1fr; }
html.sn-on[data-theme="forecourt"][data-mode] :is(.station-layout,.station-layout:not(.has-right)) { grid-template-columns:236px minmax(0,1fr) !important; column-gap:26px; }
html.sn-on[data-theme="atelier"][data-mode] :is(.station-layout,.station-layout:not(.has-right)) { grid-template-columns:220px minmax(0,1fr) !important; column-gap:48px; }
html.sn-on:is([data-theme="forecourt"],[data-theme="atelier"])[data-mode] .station-layout > .sn { grid-column:1; grid-row:1 / 3; align-self:start; position:sticky; top:84px; z-index:6; }
html.sn-on:is([data-theme="forecourt"],[data-theme="atelier"])[data-mode] .station-layout > .station-rail-right { grid-column:2; grid-row:1; }
html.sn-on:is([data-theme="forecourt"],[data-theme="atelier"])[data-mode] .station-layout > .station-main { grid-column:2; grid-row:2; }
@media (max-width:980px) {
  html.sn-on:is([data-theme="forecourt"],[data-theme="console"],[data-theme="velocity"],[data-theme="solstice"],[data-theme="icandy"],[data-theme="atelier"])[data-mode] :is(.station-layout,.station-layout:not(.has-right)) { grid-template-columns:minmax(0,1fr) !important; grid-template-rows:none; }
  html.sn-on:is([data-theme="forecourt"],[data-theme="atelier"])[data-mode] .station-layout > :is(.sn,.station-rail-right,.station-main) { grid-column:1; grid-row:auto; position:static; }
  html.sn-on:is([data-theme="forecourt"],[data-theme="atelier"])[data-mode] .station-layout > .sn { order:-3; }
}
.sn :is(.fp-pylon,.cr-rack,.vg-box,.ss-sky,.ij-shop,.at-index) button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:left; box-shadow:none; }
.sn :is(.cr-rack,.vg-box,.ss-sky,.ij-shop) { margin:0 0 20px; }

/* ===================== Forecourt: the price pylon ===================== */
@keyframes fp-on { 0% { opacity:.2; } 12% { opacity:1; } 18% { opacity:.4; } 30%,100% { opacity:1; } }
@keyframes fp-blink { 50% { opacity:.25; } }
.sn .fp-pylon { --cut:12px; font-family:var(--fc-sign); }
.sn .fp-cap {
  display:flex; flex-direction:column; gap:6px; padding:16px 16px 14px; background:var(--fc-yellow); color:#090b10;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%,0 var(--cut));
}
.sn .fp-cap b { font:900 21px/1 var(--fc-sign); font-stretch:125%; text-transform:uppercase; letter-spacing:.02em; }
.sn .fp-open { display:inline-flex; align-items:center; gap:7px; font:700 11px var(--fc-led); letter-spacing:.18em; }
.sn .fp-open i { width:8px; height:8px; border-radius:50%; background:#d1000e; box-shadow:0 0 8px #ff2a38; animation:fp-blink 1.6s steps(1) infinite; }
.sn .fp-panels { display:flex; flex-direction:column; gap:4px; padding:6px; background:#05070b; border:2px solid #1c212b; border-top:0; }
.sn .fp-panel { background:linear-gradient(180deg,#111621,#0b0e15); border:1px solid #1e2430; }
.sn .fp-pylon .fp-row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 12px; color:#f3f4f7; transition:background .2s; }
.sn .fp-row:hover { background:#161c29; }
.sn .fp-name { font:800 13px var(--fc-sign); font-stretch:115%; text-transform:uppercase; letter-spacing:.06em; }
.sn .fp-led { font:700 22px/1 var(--fc-led); letter-spacing:.04em; color:#3a2f00; padding:3px 7px 2px; background:#000; border:1px solid #1d1d1d; transition:color .25s, text-shadow .25s; }
.sn .fp-row:hover .fp-led, .sn .fp-panel.open .fp-led { color:var(--fc-yellow); text-shadow:0 0 10px rgba(255,212,0,.6); animation:fp-on .6s steps(1); }
.sn .fp-ticker { display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.sn .fp-panel.open .fp-ticker { grid-template-rows:1fr; }
.sn .fp-ticker > div { overflow:hidden; display:flex; flex-direction:column; }
.sn .fp-pylon .fp-pg {
  position:relative; display:block; padding:8px 12px 8px 26px; font:600 13px var(--fc-led); letter-spacing:.06em; text-transform:uppercase;
  color:#7f8696; border-top:1px dashed #1e2430; transition:color .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.sn .fp-pg::before { content:"▶"; position:absolute; left:10px; top:50%; font-size:9px; transform:translateY(-50%); opacity:0; color:var(--fc-yellow); transition:opacity .2s; }
.sn .fp-pylon .fp-pg:hover { color:#e9ecf2; transform:translateX(3px); }
.sn .fp-pylon .fp-pg.on { color:var(--fc-yellow); text-shadow:0 0 10px rgba(255,212,0,.55); }
.sn .fp-pg.on::before { opacity:1; animation:fp-blink 1.1s steps(1) infinite; }
.sn .fp-pole { display:flex; justify-content:center; gap:46px; height:34px; }
.sn .fp-pole i { width:12px; background:linear-gradient(90deg,#2a303b,#4a5160 45%,#1a1e26); }
html[data-mode="light"] .sn .fp-pole i { background:linear-gradient(90deg,#9aa1ad,#c9ced6 45%,#7d8490); }
@media (max-width:980px) {
  .sn .fp-pole { display:none; }
  .sn .fp-panels { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
}

/* ===================== Console: the rack unit ===================== */
@keyframes cr-cur { 50% { opacity:0; } }
@keyframes cr-in { from { opacity:0; transform:translateY(-6px); } }
.sn .cr-rack {
  position:relative; padding:16px 34px 14px; border-radius:18px; font-family:var(--cn-mono);
  background:linear-gradient(180deg,#2a2b2d,#1b1c1d); border:1px solid #333537;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -2px 0 rgba(0,0,0,.4) inset,0 18px 34px -22px #000;
}
html[data-mode="light"] .sn .cr-rack { background:linear-gradient(180deg,#f1efea,#dedbd3); border-color:#cbc7be; box-shadow:0 1px 0 #fff inset,0 -2px 0 rgba(0,0,0,.08) inset,0 18px 34px -24px rgba(0,0,0,.4); }
.sn .cr-screw { position:absolute; left:12px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#8a8d90,#3a3c3e); box-shadow:inset 0 0 0 1px #111; }
.sn .cr-screw::after { content:""; position:absolute; left:2px; right:2px; top:4px; height:2px; background:#1a1a1a; transform:rotate(35deg); }
.sn .cr-screw.r { left:auto; right:12px; }
.sn .cr-top { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.sn .cr-lcd {
  flex:0 1 360px; min-width:220px; display:flex; flex-direction:column; gap:2px; padding:10px 28px 10px 14px; border-radius:10px; position:relative;
  background:#0b0d0b; color:var(--cn-lcd); box-shadow:inset 0 2px 8px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07);
  background-image:repeating-linear-gradient(0deg,rgba(163,238,121,.035) 0 1px,transparent 1px 3px);
}
.sn .cr-lcd small { font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.55; }
.sn .cr-read { font:500 14px var(--cn-mono); letter-spacing:.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:1.2em; text-shadow:0 0 8px rgba(163,238,121,.55); }
.sn .cr-cur { position:absolute; right:12px; bottom:12px; width:8px; height:14px; background:var(--cn-lcd); animation:cr-cur 1s steps(1) infinite; }
.sn .cr-keys { display:flex; flex-wrap:wrap; gap:8px; }
.sn .cr-rack .cr-key {
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; font:500 12px var(--cn-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); background:linear-gradient(180deg,#3a3c3f,#2a2c2e); border:1px solid #111;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 3px 0 #0e0f10,0 5px 8px -4px #000; transition:transform .12s, box-shadow .12s;
}
html[data-mode="light"] .sn .cr-rack .cr-key { background:linear-gradient(180deg,#fbfaf7,#e7e4dc); border-color:#bdb8ad; box-shadow:0 1px 0 #fff inset,0 3px 0 #b9b4a8,0 5px 8px -5px rgba(0,0,0,.35); }
.sn .cr-rack .cr-key:hover { transform:translateY(-1px); }
.sn .cr-rack .cr-key:active, .sn .cr-rack .cr-key.on { transform:translateY(3px); box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 #0e0f10,0 2px 4px -2px #000; }
.sn .cr-led { width:7px; height:7px; border-radius:50%; flex:none; background:#26301f; box-shadow:inset 0 1px 1px rgba(0,0,0,.6); transition:background .2s, box-shadow .2s; }
.sn :is(.cr-key,.cr-pg).on .cr-led { background:var(--cn-lcd); box-shadow:0 0 8px var(--cn-lcd),0 0 2px var(--cn-lcd); }
.sn .cr-bay { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:12px; border-top:1px solid var(--cn-hair); }
.sn .cr-rack .cr-pg {
  display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:8px; font:500 12px var(--cn-mono); color:var(--muted);
  background:rgba(0,0,0,.18); border:1px solid var(--cn-hair); animation:cr-in .3s cubic-bezier(.2,.8,.2,1) calc(var(--d) * 25ms) backwards;
  transition:color .15s, background .15s, transform .12s;
}
html[data-mode="light"] .sn .cr-rack .cr-pg { background:rgba(255,255,255,.55); }
.sn .cr-rack .cr-pg:hover { color:var(--text); background:rgba(163,238,121,.1); }
.sn .cr-rack .cr-pg:active { transform:translateY(2px); }
.sn .cr-rack .cr-pg.on { color:var(--cn-lcd); border-color:rgba(163,238,121,.35); background:rgba(163,238,121,.12); }
html[data-mode="light"] .sn .cr-rack .cr-pg.on { color:#2f6b10; }
.sn .cr-pg em { font-style:normal; }

/* ===================== Velocity: the gearbox ===================== */
@keyframes vg-kick { 0% { transform:translateY(10px) scale(.8); opacity:.2; } 60% { transform:translateY(-2px) scale(1.06); opacity:1; } }
.sn .vg-box {
  display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:14px 26px; padding:16px 22px; border-radius:20px;
  background:linear-gradient(180deg,#151922,#0f1218); border:1px solid #232835; color:#f3f5f8;
}
html[data-mode="light"] .sn .vg-box { background:linear-gradient(180deg,#ffffff,#f1f2ee); border-color:#e1e3dc; color:#0e1014; }
.sn .vg-hud { display:flex; align-items:center; gap:14px; min-width:170px; }
.sn .vg-gear { font:700 54px/1 var(--vl-display); color:var(--vl-lime); width:46px; text-align:center; text-shadow:0 0 22px rgba(212,255,58,.35); }
html[data-mode="light"] .sn .vg-gear { color:#7a9a00; text-shadow:none; }
.sn .vg-gear.vg-kick { animation:vg-kick .45s cubic-bezier(.3,1.6,.5,1); }
.sn .vg-hud small { display:block; font:600 10px var(--font); letter-spacing:.18em; text-transform:uppercase; opacity:.55; }
.sn .vg-hud b { display:block; font:700 15px var(--vl-display); letter-spacing:-.01em; }
.sn .vg-now { display:block; font:500 12px var(--font); opacity:.7; }
.sn .vg-gate { position:relative; display:grid; grid-template-columns:repeat(var(--cols), 74px); grid-template-rows:auto 26px auto; align-items:center; justify-items:center; }
.sn .vg-rail { grid-column:1 / -1; grid-row:2; width:calc(100% - 74px); height:4px; border-radius:2px; background:#2a3040; }
.sn .vg-slot { grid-row:1 / 4; width:4px; height:100%; border-radius:2px; background:#2a3040; }
html[data-mode="light"] .sn :is(.vg-rail,.vg-slot) { background:#dadcd4; }
.sn .vg-box .vg-pos { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:2px 4px; }
.sn .vg-pos b { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; font:700 13px var(--vl-display); background:#1d222d; border:1px solid #2e3546; transition:color .2s; }
html[data-mode="light"] .sn .vg-pos b { background:#fff; border-color:#d6d8cf; }
.sn .vg-pos span { font:700 10px var(--font); letter-spacing:.12em; text-transform:uppercase; opacity:.6; transition:opacity .2s; }
.sn .vg-pos.on span, .sn .vg-pos:hover span { opacity:1; }
.sn .vg-knob {
  position:absolute; left:0; top:0; width:32px; height:32px; margin:-16px 0 0 -16px; border-radius:50%; z-index:2; pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#f2ffb0,#d4ff3a 45%,#93b800); box-shadow:0 6px 16px -4px rgba(212,255,58,.6),0 0 0 3px rgba(212,255,58,.18);
  transition:transform .55s cubic-bezier(.3,1.5,.5,1);
}
.sn .vg-tape { position:relative; min-width:0; align-self:stretch; display:flex; align-items:center; border-left:1px solid #232835; padding-left:20px; }
html[data-mode="light"] .sn .vg-tape { border-color:#e1e3dc; }
.sn .vg-pages { display:flex; gap:4px; min-width:0; overflow-x:auto; scrollbar-width:none; padding:10px 0 14px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,currentColor 30%,transparent) 0 1px,transparent 1px 12px) 0 100%/100% 6px no-repeat; }
.sn .vg-pages::-webkit-scrollbar { display:none; }
.sn .vg-box .vg-pg { flex:none; padding:7px 12px; border-radius:999px; font:700 13px var(--font); opacity:.62; transition:opacity .2s, transform .35s cubic-bezier(.3,1.5,.5,1); white-space:nowrap; }
.sn .vg-box .vg-pg:hover { opacity:1; transform:translateY(-2px); }
.sn .vg-box .vg-pg.on { opacity:1; color:var(--vl-lime); }
html[data-mode="light"] .sn .vg-box .vg-pg.on { color:#5f7800; }
.sn .vg-mark { position:absolute; left:20px; bottom:0; height:4px; border-radius:2px; background:var(--vl-lime); box-shadow:0 0 12px rgba(212,255,58,.55); pointer-events:none;
  transition:transform .5s cubic-bezier(.3,1.4,.5,1), width .35s cubic-bezier(.3,1.4,.5,1), opacity .2s; }
@media (max-width:1100px) { .sn .vg-box { grid-template-columns:auto minmax(0,1fr); } .sn .vg-tape { grid-column:1 / -1; border-left:0; padding-left:0; } .sn .vg-mark { left:0; } }
@media (max-width:640px) { .sn .vg-box { grid-template-columns:minmax(0,1fr); } .sn .vg-gate { justify-self:start; } }

/* ===================== Solstice: the sun's path ===================== */
@keyframes ss-rise { from { opacity:0; transform:translateY(12px) rotate(-4deg); } }
@keyframes ss-glow { 50% { transform:scale(1.25); opacity:.35; } }
.sn .ss-sky { padding:18px 26px 16px; border-radius:28px; background:linear-gradient(180deg,color-mix(in srgb,#ffd9b8 38%,var(--panel)),var(--panel) 75%); border:1px solid var(--surface-border-color); box-shadow:var(--elev); overflow:hidden; }
html[data-mode="dark"] .sn .ss-sky { background:linear-gradient(180deg,#2a1b38,var(--panel) 80%); }
.sn .ss-arc { position:relative; height:150px; margin:0 6% 24px; }
.sn .ss-arc svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sn .ss-arc path { fill:none; stroke:color-mix(in srgb,var(--accent) 45%,transparent); stroke-width:1.5; stroke-dasharray:3 6; }
.sn .ss-sun { position:absolute; left:0; top:0; width:46px; height:46px; margin:-23px 0 0 -23px; z-index:1; pointer-events:none; transition:transform .7s cubic-bezier(.22,1,.36,1); }
/* a page flip in the same group: the sun stays put and turns once on itself (its highlight goes round) */
.sn .ss-sun.ss-turn::before { animation:ss-turn .8s cubic-bezier(.45,0,.2,1); }
@keyframes ss-turn { to { rotate:360deg; } }
.sn .ss-sun::before { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 40% 35%,#fff3c9,#ffb347 40%,#ff6a3d 75%,#e23d8a); box-shadow:0 0 30px rgba(255,138,61,.7); }
.sn .ss-sun i { position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(closest-side,rgba(255,179,71,.55),transparent); animation:ss-glow 3.2s ease-in-out infinite; }
.sn .ss-sky .ss-stop { position:absolute; z-index:2; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; }
.sn .ss-stop i { width:12px; height:12px; border-radius:50%; background:var(--panel); border:2px solid color-mix(in srgb,var(--accent) 70%,transparent); transition:transform .4s var(--so-spring, ease), opacity .3s; }
.sn .ss-stop span { position:absolute; top:20px; white-space:nowrap; font:700 11px var(--so-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); transition:color .2s; }
.sn .ss-stop:hover i { transform:scale(1.5); }
.sn .ss-stop:hover span, .sn .ss-stop.on span { color:var(--text); }
.sn .ss-stop.on i { opacity:0; }
.sn .ss-title { position:absolute; left:50%; bottom:0; transform:translateX(-50%); text-align:center; pointer-events:none; }
.sn .ss-title small { display:block; font:500 11px var(--so-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sn .ss-title b { font:800 24px/1.1 var(--so-display); letter-spacing:-.02em; white-space:nowrap; }
.sn .ss-horizon { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding-top:14px; border-top:2px solid; border-image:linear-gradient(90deg,transparent,#ff8a3d,#e23d8a,#6a4cff,transparent) 1; }
.sn .ss-sky .ss-ray { padding:8px 15px; border-radius:999px; font:700 13px var(--font); color:var(--text); background:color-mix(in srgb,var(--panel) 80%,transparent); border:1px solid var(--surface-border-color);
  animation:ss-rise .55s var(--so-spring, ease) calc(var(--d) * 40ms) backwards; transition:transform .45s var(--so-spring, ease), border-color .2s; }
.sn .ss-sky .ss-ray:hover { transform:translateY(-3px); border-color:var(--accent); }
.sn .ss-sky .ss-ray.on { color:#fff; background:var(--grad-primary); border-color:transparent; box-shadow:0 10px 22px -12px rgba(226,61,138,.7); }
@media (max-width:640px) { .sn .ss-arc { height:118px; margin:0 2% 20px; } .sn .ss-stop span { font-size:9px; letter-spacing:.06em; } .sn .ss-title b { font-size:19px; } }

/* ===================== iCandy: jars on a candy shop shelf ===================== */
@keyframes ij-pour { 0% { opacity:0; transform:translateY(-22px) scale(.7, 1.2); } 60% { opacity:1; transform:translateY(3px) scale(1.08, .9); } }
@keyframes ij-wobble { 25% { transform:rotate(-5deg); } 50% { transform:rotate(4deg); } 75% { transform:rotate(-2deg); } }
.sn .ij-shop { padding:18px 20px 16px; border-radius:26px; background:var(--surface); border:1px solid var(--surface-border-color); box-shadow:var(--elev); }
.sn .ij-shelf { display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; padding:10px 6px 0; border-bottom:7px solid; border-image:linear-gradient(180deg,#e8d4b8,#c9a77c) 1; }
html[data-mode="dark"] .sn .ij-shelf { border-image:linear-gradient(180deg,#4a3a63,#2c2240) 1; }
.sn .ij-shelf::-webkit-scrollbar { display:none; }
.sn .ij-shop .ij-jar { flex:none; width:96px; display:flex; flex-direction:column; align-items:center; transform-origin:50% 100%; transition:transform .5s var(--ic-jelly, ease); }
.sn .ij-shop .ij-jar:hover { animation:ij-wobble .6s ease-out; }
.sn .ij-shop .ij-jar.on { transform:translateY(-6px); }
.sn .ij-lid { width:58px; height:12px; border-radius:6px 6px 3px 3px; background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),linear-gradient(180deg,var(--a),var(--b)); box-shadow:0 3px 6px -3px var(--b); transition:transform .4s var(--ic-jelly, ease); }
.sn .ij-jar.on .ij-lid { transform:translateY(-5px) rotate(-8deg); }
.sn .ij-glass {
  position:relative; width:76px; height:68px; margin-top:2px; border-radius:14px 14px 18px 18px; overflow:hidden;
  display:flex; flex-wrap:wrap-reverse; align-content:flex-start; justify-content:center; gap:2px; padding:6px;
  background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 30%,rgba(255,255,255,.05) 70%,rgba(255,255,255,.35)); border:2px solid rgba(255,255,255,.75);
  box-shadow:inset 0 -6px 12px -8px var(--b), 0 8px 16px -10px rgba(20,50,90,.4);
}
html[data-mode="dark"] .sn .ij-glass { border-color:rgba(255,255,255,.25); background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 30%,transparent 70%,rgba(255,255,255,.1)); }
.sn .ij-ball { width:14px; height:14px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--c) 45%); box-shadow:inset 0 -2px 3px rgba(0,0,0,.18); }
.sn .ij-label { display:flex; align-items:center; gap:5px; margin:7px 0 8px; padding:3px 9px; border-radius:999px; font:600 12px var(--ic-display, var(--font)); color:#fff; white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 55%),linear-gradient(180deg,var(--a),var(--b)); text-shadow:0 1px 0 rgba(0,0,0,.18); }
.sn .ij-label small { font:500 10px var(--ic-mono, monospace); opacity:.85; }
.sn .ij-tray { display:flex; flex-wrap:wrap; gap:9px; padding-top:14px; }
/* each page is a glossy gel candy in its gumball's flavor: a wet highlight over the top half, a bright rim, a
   darker belly and coloured light under it */
@keyframes ij-twinkle { 0%, 100% { opacity:0; transform:scale(.3) rotate(0); } 50% { opacity:1; transform:scale(1) rotate(90deg); } }
.sn .ij-shop .ij-bean {
  position:relative; display:inline-flex; align-items:center; gap:6px; padding:9px 17px 10px; border-radius:999px; overflow:hidden;
  font:600 13px var(--ic-display, var(--font)); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.22);
  background:linear-gradient(180deg,var(--a),var(--b)); border:1px solid color-mix(in srgb,var(--b) 70%,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 6px -2px color-mix(in srgb,var(--b) 70%,#000), 0 8px 16px -9px var(--b);
  animation:ij-pour .6s var(--ic-jelly, ease) calc(var(--d) * 45ms) backwards; transition:transform .5s var(--ic-jelly, ease), box-shadow .3s;
}
.sn .ij-shop .ij-bean::before {          /* the gloss */
  content:""; position:absolute; left:8%; right:8%; top:2px; height:48%; border-radius:999px; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.12));
}
.sn .ij-shop .ij-bean > * { position:relative; }
.sn .ij-shop .ij-bean:hover { transform:translateY(-3px) rotate(-2deg) scale(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 6px -2px color-mix(in srgb,var(--b) 70%,#000), 0 14px 22px -10px var(--b); }
.sn .ij-shop .ij-bean:active { transform:scale(.9, .84); transition-duration:.08s; }
.sn .ij-shop .ij-bean.on { transform:translateY(-4px) scale(1.08); outline:3px solid #fff; outline-offset:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 6px -2px color-mix(in srgb,var(--b) 70%,#000), 0 0 0 7px color-mix(in srgb,var(--a) 30%,transparent), 0 16px 26px -10px var(--b); }
html[data-mode="dark"] .sn .ij-shop .ij-bean.on { outline-color:rgba(255,255,255,.85); }
.sn .ij-shop .ij-bean.on::after {         /* a sparkle on the open page's candy */
  content:"✦"; position:absolute; right:7px; top:1px; font-size:10px; color:#fff; text-shadow:0 0 6px #fff; animation:ij-twinkle 2.4s ease-in-out infinite;
}
.sn .ij-bean em { font-style:normal; }

/* ===================== Atelier: the catalogue index ===================== */
.sn .at-index { position:relative; padding-left:22px; font-family:var(--font); color:var(--at-bone); }
.sn .at-ix-h { display:flex; flex-direction:column; gap:3px; margin-bottom:22px; }
.sn .at-ix-h small, .sn .at-index .at-sec-h { font:500 11.5px var(--font); letter-spacing:.2em; text-transform:uppercase; color:var(--at-dim); }
.sn .at-ix-h b { font:500 20px var(--font); letter-spacing:-.01em; text-transform:uppercase; }
.sn .at-ix-h span { font:400 11px var(--at-mono); letter-spacing:.2em; color:var(--at-dim); }
.sn .at-ruler { position:absolute; left:0; top:4px; bottom:4px; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; justify-content:space-between; }
.sn .at-ruler li { width:6px; height:1px; background:var(--at-hair-2); transform-origin:0 50%; transition:transform .6s var(--at-ease), background .3s; }
.sn .at-ruler li.on { background:var(--at-bone); transform:scaleX(2.4); }
.sn .at-sec { border-top:1px solid var(--at-hair); }
.sn .at-index .at-sec-h { display:block; width:100%; padding:12px 0; transition:color .3s; }
.sn .at-index .at-sec-h:hover, .sn .at-sec.open .at-sec-h { color:var(--at-bone); }
.sn .at-fold { display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--at-ease); }
.sn .at-sec.open .at-fold { grid-template-rows:1fr; }
.sn .at-fold > div { overflow:hidden; display:flex; flex-direction:column; }
.sn .at-index .at-pg { position:relative; display:block; padding:6px 0 6px 0; font:400 15px var(--font); letter-spacing:-.005em; color:var(--at-dim); transition:color .3s, padding-left .5s var(--at-ease); }
.sn .at-index .at-pg::before { content:"—"; position:absolute; left:0; opacity:0; transition:opacity .3s; }
.sn .at-index .at-pg:hover { color:var(--at-bone); padding-left:8px; }
.sn .at-index .at-pg.on { color:var(--at-bone); padding-left:22px; }
.sn .at-index .at-pg.on::before { opacity:1; }
.sn .at-sec.open .at-fold > div { padding-bottom:12px; }

/* ===================== Loupe: the trail and the full-screen menu ===================== */
@keyframes lp-word { from { opacity:0; transform:translateY(40%); } }
.sn .lp-trail { display:flex; align-items:center; gap:14px; margin:0 0 22px; padding:8px 8px 8px 18px; border-radius:999px; background:var(--lp-card); border:1px solid var(--lp-line); box-shadow:var(--elev); }
.sn .lp-path { flex:none; font:400 12px var(--lp-mono); color:var(--muted); white-space:nowrap; }
.sn .lp-path b { font-weight:500; color:var(--lp-ink); }
.sn .lp-path i { font-style:normal; margin:0 8px; color:var(--lp-red); }
.sn .lp-pills { flex:1; min-width:0; display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.sn .lp-pills::-webkit-scrollbar { display:none; }
.sn .lp-trail button, .sn .lp-menu button { font:inherit; color:inherit; background:none; border:0; padding:0; }
.sn .lp-trail .lp-pill { flex:none; font:500 14px var(--font); padding:8px 14px; border-radius:999px; color:var(--muted); transition:color .2s, background .2s; }
.sn .lp-trail .lp-pill:hover { color:var(--lp-ink); background:var(--lp-soft); }
.sn .lp-trail .lp-pill.on { color:var(--lp-paper); background:var(--lp-ink); }
.sn .lp-trail .lp-open { flex:none; width:40px; height:40px; border-radius:50%; background:var(--lp-ink); display:grid; place-content:center; gap:4px; transition:transform .45s var(--lp-spring); }
.sn .lp-trail .lp-open i { display:block; width:14px; height:2px; border-radius:1px; background:var(--lp-paper); transition:transform .4s var(--lp-spring); }
.sn .lp-trail .lp-open:hover { transform:scale(1.08); }
.sn .lp-trail .lp-open:hover i:first-child { transform:translateX(-2px); }
.sn .lp-trail .lp-open:hover i:last-child { transform:translateX(2px); }
.sn .lp-menu { position:fixed; inset:0; z-index:95; background:#121214; color:#f4f4f2; display:flex; flex-direction:column; padding:22px 40px 40px; opacity:0; transition:opacity .35s var(--lp-ease); }
.sn .lp-menu.in { opacity:1; }
.sn .lp-menu[hidden] { display:none; }   /* closed: gone, so it can't sit invisibly over the page catching clicks */
.sn .lp-menu:not(.in) { pointer-events:none; }
.sn .lp-menu-top { display:flex; align-items:center; gap:20px; }
.sn .lp-menu-top span { font:600 22px var(--font); letter-spacing:-.03em; }
.sn .lp-menu-top em { font-style:normal; color:var(--lp-red); }
.sn .lp-menu-top small { margin-left:auto; font:400 11px var(--lp-mono); color:rgba(244,244,242,.55); }
.sn .lp-menu .lp-close { width:42px; height:42px; border-radius:50%; background:#f4f4f2; color:#121214; font-size:15px; transition:transform .45s var(--lp-spring); }
.sn .lp-menu .lp-close:hover { transform:rotate(90deg); }
.sn .lp-menu-body { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:40px; margin-top:30px; }
.sn .lp-secs { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; justify-content:center; gap:2px; overflow:auto; }
.sn .lp-menu .lp-sec { display:flex; align-items:baseline; gap:16px; text-align:left; font:500 clamp(40px,6.2vw,84px)/1 var(--lp-display); letter-spacing:-.045em; color:rgba(244,244,242,.32); transition:color .25s, transform .5s var(--lp-spring); }
.sn .lp-menu.in .lp-sec { animation:lp-word .7s var(--lp-ease) backwards; }
.sn .lp-secs li:nth-child(2) .lp-sec { animation-delay:.04s; } .sn .lp-secs li:nth-child(3) .lp-sec { animation-delay:.08s; }
.sn .lp-secs li:nth-child(4) .lp-sec { animation-delay:.12s; } .sn .lp-secs li:nth-child(5) .lp-sec { animation-delay:.16s; } .sn .lp-secs li:nth-child(n+6) .lp-sec { animation-delay:.2s; }
.sn .lp-menu .lp-sec small { font:400 12px var(--lp-mono); letter-spacing:0; color:rgba(244,244,242,.45); }
.sn .lp-menu .lp-sec:hover, .sn .lp-menu .lp-sec.on, .sn .lp-menu .lp-sec:focus-visible { color:#f4f4f2; transform:translateX(10px); outline:none; }
.sn .lp-menu .lp-sec.on span::after { content:"."; color:var(--lp-red); }
.sn .lp-pages { display:flex; flex-direction:column; justify-content:center; gap:4px; border-left:1px solid rgba(244,244,242,.14); padding-left:36px; overflow:auto; }
.sn .lp-menu .lp-page { display:flex; align-items:baseline; gap:16px; text-align:left; font:500 clamp(20px,2.2vw,30px)/1.2 var(--font); letter-spacing:-.02em; color:rgba(244,244,242,.75); padding:6px 0;
  animation:lp-word .5s var(--lp-ease) calc(var(--d) * 30ms) backwards; transition:color .2s, transform .45s var(--lp-spring); }
.sn .lp-menu .lp-page span { font:400 11px var(--lp-mono); color:rgba(244,244,242,.4); }
.sn .lp-menu .lp-page:hover { color:#fff; transform:translateX(8px); }
.sn .lp-menu .lp-page.on { color:#fff; }
.sn .lp-menu .lp-page.on::after { content:""; width:9px; height:9px; border-radius:50%; background:var(--lp-red); align-self:center; }
@media (max-width:760px) {
  .sn .lp-menu { padding:18px 20px 28px; }
  .sn .lp-menu-body { grid-template-columns:1fr; gap:18px; }
  .sn .lp-pages { border-left:0; padding-left:0; border-top:1px solid rgba(244,244,242,.14); padding-top:14px; justify-content:flex-start; }
  .sn .lp-path { display:none; }
}

/* ===================== Locker Room: the number rail ===================== */
@keyframes lk-cup { 0%, 100% { box-shadow:0 0 0 2px var(--lk-gold), 0 0 18px rgba(232,171,54,.55); } 50% { box-shadow:0 0 0 2px var(--lk-gold-hi), 0 0 30px rgba(255,197,112,.8); } }
.sn .lk-rail { position:fixed; left:50%; bottom:42px; transform:translateX(-50%); z-index:65; width:min(820px, calc(100vw - 32px)); display:flex; flex-direction:column; align-items:center; gap:10px; }
.sn .lk-tip { padding:8px 18px; border-radius:14px; text-align:center; background:linear-gradient(180deg, rgba(42,20,16,.94), rgba(18,10,8,.94)); border:1px solid var(--lk-line); box-shadow:0 18px 30px -16px #000; }
html[data-mode="light"] .sn .lk-tip { background:rgba(255,252,247,.96); }
.sn .lk-tip small { display:block; font:600 10px var(--lk-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--lk-gold-hi); }
html[data-mode="light"] .sn .lk-tip small { color:#9a5e0a; }
.sn .lk-tip b { font:600 16px var(--font); color:var(--text); }
.sn .lk-bar { display:flex; align-items:center; gap:8px; width:100%; padding:6px; border-radius:999px; background:rgba(14,8,6,.9); border:1px solid rgba(232,171,54,.55); box-shadow:0 0 0 1px rgba(232,171,54,.18), 0 0 24px rgba(232,171,54,.18), 0 20px 34px -18px #000; }
html[data-mode="light"] .sn .lk-bar { background:rgba(255,252,247,.96); }
.sn .lk-rail button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.sn .lk-rail .lk-arrow { flex:none; width:38px; height:38px; border-radius:50%; font-size:22px; line-height:1; color:var(--text); background:rgba(246,250,249,.08); border:1px solid var(--lk-line); transition:transform .35s var(--lk-spring), border-color .2s; }
.sn .lk-rail .lk-arrow:hover { border-color:var(--lk-gold); transform:scale(1.08); }
.sn .lk-rail .lk-arrow:active { transform:scale(.92); }
.sn .lk-nums { flex:1; display:flex; align-items:center; gap:2px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; padding:4px 6px; }
.sn .lk-nums::-webkit-scrollbar { display:none; }
.sn .lk-rail .lk-num { flex:none; width:32px; height:32px; border-radius:50%; font:600 12px var(--lk-mono); letter-spacing:.03em; color:var(--muted); transition:color .2s, transform .35s var(--lk-spring), background .2s; }
.sn .lk-rail .lk-num:hover { color:var(--text); background:rgba(246,250,249,.08); transform:translateY(-3px); }
.sn .lk-rail .lk-num.on { width:38px; height:38px; background:radial-gradient(circle at 40% 35%, rgba(255,214,140,.35), rgba(232,171,54,.12)); animation:lk-cup 2.4s ease-in-out infinite; }
.sn .lk-cup { font-size:17px; filter:drop-shadow(0 0 6px rgba(255,197,112,.8)); }
.sn .lk-gap { flex:none; font:italic 900 11px var(--lk-display); color:var(--lk-red-hi); text-transform:uppercase; padding:0 6px 0 10px; opacity:.85; }

@media (prefers-reduced-motion: reduce) {
  .sn :is(.fp-pylon,.cr-rack,.vg-box,.ss-sky,.ij-shop,.at-index,.lk-rail,.lp-trail,.lp-menu) *, .sn :is(.fp-pylon,.cr-rack,.vg-box,.ss-sky,.ij-shop,.at-index,.lk-rail,.lp-trail,.lp-menu) *::before { animation:none !important; transition:none !important; }
}