/* ===== Per-letter personalities. Everything scoped to #pane[data-theme=K]; the keyboard home stays minimal. ===== */
#pane[data-theme]{transition:background-color .3s}
#pane[data-theme] .pane-nav{background:transparent;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* ---------- Q · Qwerty: a sheet in a typewriter ---------- */
#pane[data-theme=Q]{background:#f4f1ea}
#pane[data-theme=Q] #pane-body{font-family:"Courier New",Courier,ui-monospace,monospace;background:#fffdf8;padding:48px 40px;box-shadow:0 1px 0 #e7e1d3,0 18px 40px -24px #0003;border-radius:2px;position:relative;
 background-image:repeating-linear-gradient(#fffdf8 0 27px,#ece6d8 27px 28px)}
#pane[data-theme=Q] #pane-body::before{content:"";position:absolute;left:28px;top:0;bottom:0;border-left:1px solid #e9b8b0}
#pane[data-theme=Q] h2{font-family:inherit;font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:clamp(26px,4vw,40px)}
#pane[data-theme=Q] p{line-height:28px;font-size:16px;color:#2a2a2a}
#pane[data-theme=Q] p.tw-wait{visibility:hidden}
.tw-ghost{visibility:hidden}.tw-caret{display:inline-block;width:.55em;height:1.05em;margin:0 -.55em -.15em 0;background:#333;animation:twblink .9s steps(1) infinite;vertical-align:baseline}
p:not(.tw-on) .tw-caret{display:none}.term-cmd .tw-caret{background:#7ee787}
@keyframes twblink{50%{opacity:0}}

/* ---------- F · Ode to Flash: 2004 called ---------- */
#pane[data-theme=F]{background:#2b2b2b;color:#ddd;background-image:radial-gradient(#3a3a3a 1px,transparent 1px);background-size:6px 6px}
#pane[data-theme=F] .pane-nav button{font:11px Verdana,Tahoma,sans-serif;background:linear-gradient(#f4f4f4,#cfcfcf);color:#222;border:1px solid #888;border-radius:3px;box-shadow:inset 0 1px #fff}
#pane[data-theme=F] .kcap{color:#fff}
#pane[data-theme=F] #pane-body{background:#fff;color:#333;border:1px solid #000;box-shadow:6px 6px 0 #000;padding:30px 34px;font:13px/1.7 Verdana,Tahoma,Geneva,sans-serif;position:relative;overflow:hidden;min-height:320px}
#pane[data-theme=F] h2{font:bold 30px/1.1 Verdana,Tahoma,sans-serif;letter-spacing:-1px;color:#cc0000;text-shadow:2px 2px 0 #ffcccc;margin-top:0}
#pane[data-theme=F] h2::after{content:"";display:block;height:8px;margin-top:12px;background:repeating-linear-gradient(90deg,#cc0000 0 8px,#fff 8px 12px)}
#pane[data-theme=F] code{background:#ffffcc;border:1px solid #e0d890;color:#0000cc}
.fl-loader{position:absolute;inset:0;background:#fff;display:grid;place-items:center;z-index:2;transition:opacity .35s}
.fl-loader.out{opacity:0;pointer-events:none}
.fl-box{width:min(260px,80%);text-align:center;font:10px Verdana,sans-serif;letter-spacing:2px;color:#555}
.fl-logo{width:56px;height:56px;margin:0 auto 14px;border-radius:12px;background:linear-gradient(135deg,#e2231a,#8a0b06);color:#fff;font:italic bold 40px/56px Georgia,serif;box-shadow:inset 0 2px #fff6;animation:flspin 1.6s ease-in-out infinite}
@keyframes flspin{50%{transform:rotateY(180deg)}}
.fl-bar{height:6px;border:1px solid #999;margin:8px 0 16px;padding:1px}.fl-bar i{display:block;height:100%;width:0;background:#cc0000}
.fl-lbl{margin:0!important}
.fl-skip{font:10px Verdana,sans-serif;background:none;border:0;color:#0000ee;text-decoration:underline;cursor:pointer;letter-spacing:1px;padding:8px}

/* ---------- N · New York: subway signage ---------- */
#pane[data-theme=N]{background:#fff}
#pane[data-theme=N] h2{background:#111;color:#fff;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;letter-spacing:-.01em;padding:18px 22px;border-top:6px solid #fff;outline:2px solid #111;display:flex;align-items:center;gap:16px;border-radius:2px}
#pane[data-theme=N] h2::before{content:"N";flex:0 0 auto;width:1.15em;height:1.15em;border-radius:50%;background:#fccc0a;color:#111;font-weight:700;font-size:.8em;display:grid;place-items:center;line-height:1}
#pane[data-theme=N] .meta{font:600 13px "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#111;border-bottom:4px solid #111;padding-bottom:10px;margin-top:6px}
#pane[data-theme=N] .meta span::after{content:" ↓"}
#pane[data-theme=N] p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:19px;line-height:1.5}
#pane[data-theme=N] #pane-body::after{content:"";display:block;height:28px;margin-top:40px;background:linear-gradient(90deg,#0039a6 0 14.3%,#ff6319 0 28.6%,#6cbe45 0 42.9%,#fccc0a 0 57.2%,#ee352e 0 71.5%,#00933c 0 85.8%,#b933ad 0)}

/* ---------- X · moonshot factory: blueprint ---------- */
#pane[data-theme=X]{background:#0f3a68;color:#dbe9ff;background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px),linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px}
#pane[data-theme=X] .pane-nav button{background:transparent;color:#dbe9ff;border-color:#8fb4e6}
#pane[data-theme=X] .kcap{color:#fff}
#pane[data-theme=X] h2{color:#fff;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:500;text-transform:uppercase;letter-spacing:.06em;border:1px dashed #8fb4e6;padding:14px 18px;position:relative}
#pane[data-theme=X] h2::after{content:"DWG. X-01 · REV —";position:absolute;right:10px;bottom:-9px;font-size:10px;letter-spacing:.2em;background:#0f3a68;padding:0 6px;color:#8fb4e6}
#pane[data-theme=X] .meta{color:#8fb4e6;font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
#pane[data-theme=X] p,#pane[data-theme=X] li{color:#dbe9ff}
#pane[data-theme=X] h3{font-family:ui-monospace,monospace;color:#fff;text-transform:uppercase;letter-spacing:.08em;font-size:14px;display:flex;align-items:center;gap:10px}
#pane[data-theme=X] h3::after{content:"";flex:1;border-top:1px dashed #8fb4e6}
#pane[data-theme=X] .media{border:1px solid #8fb4e6;background:#0b2e54}#pane[data-theme=X] figcaption{background:#0b2e54;color:#8fb4e6;border-color:#8fb4e6;font-family:ui-monospace,monospace}
#pane[data-theme=X] a{color:#fff}

/* ---------- M · MDew: neon green energy ---------- */
#pane[data-theme=M]{background:#0a0d08;color:#e8ffe0;background-image:repeating-linear-gradient(115deg,transparent 0 40px,#7cff0008 40px 80px)}
#pane[data-theme=M] .pane-nav button{background:#0a0d08;color:#b6ff6a;border-color:#3d5a1f}
#pane[data-theme=M] .kcap{color:#b6ff6a}
#pane[data-theme=M] h2{font-family:Impact,"Arial Black","Helvetica Neue",sans-serif;font-style:italic;font-weight:900;text-transform:uppercase;font-size:clamp(48px,11vw,110px);line-height:.9;letter-spacing:-.01em;color:#b6ff00;text-shadow:0 0 18px #9dff0066,4px 4px 0 #1d5c00;transform:skew(-6deg);margin-bottom:18px}
#pane[data-theme=M] .meta{color:#b6ff6a;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:12px}
#pane[data-theme=M] p,#pane[data-theme=M] li{color:#d8f5cc}
#pane[data-theme=M] h3{font-family:Impact,"Arial Black",sans-serif;font-style:italic;text-transform:uppercase;color:#0a0d08;background:#b6ff00;display:inline-block;padding:2px 12px;transform:skew(-8deg);letter-spacing:.03em}
#pane[data-theme=M] .media{border:2px solid #b6ff00;box-shadow:6px 6px 0 #1d5c00;background:#000}#pane[data-theme=M] figcaption{background:#000;color:#b6ff6a;border-color:#b6ff00}
#pane[data-theme=M] a{color:#b6ff00}

/* ---------- R · Recognition: award ribbons ---------- */
#pane[data-theme=R]{background:#fbf8f1}
#pane[data-theme=R] h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;font-size:clamp(36px,7vw,64px);text-align:center}
#pane[data-theme=R] h2::after{content:"";display:block;width:120px;height:3px;margin:14px auto 0;background:linear-gradient(90deg,transparent,#c9a24a,transparent)}
#pane[data-theme=R] .list{border:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;counter-reset:rb}
#pane[data-theme=R] .list li{border:1px solid #e6dcc4;background:#fff;border-radius:10px;padding:56px 16px 16px;text-align:center;position:relative;box-shadow:0 10px 20px -16px #8a6d2a66}
#pane[data-theme=R] .list li::before{content:"";position:absolute;top:12px;left:50%;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,#d4a73a 55%,#9a7417);box-shadow:0 0 0 3px #fff,0 0 0 4px #d4a73a}
#pane[data-theme=R] .list li::after{content:"";position:absolute;top:36px;left:50%;margin-left:-11px;width:22px;height:16px;background:linear-gradient(90deg,#b22a1f 50%,#8c1d15 50%);clip-path:polygon(0 0,100% 0,100% 100%,50% 70%,0 100%);z-index:-0}
#pane[data-theme=R] .list li>*{position:relative;z-index:1}
#pane[data-theme=R] .list small{margin-top:4px}

/* ---------- K · Kinetic V5: fanzine collage ---------- */
#pane[data-theme=K]{background:#f7d6dc;background-image:radial-gradient(#e9a7b4 1px,transparent 1.2px);background-size:9px 9px}
#pane[data-theme=K] h2{font-family:"Times New Roman",Georgia,serif;font-style:italic;font-size:clamp(44px,9vw,92px);color:#1a1a1a;transform:rotate(-2deg);display:inline-block;background:#fff;padding:4px 18px;box-shadow:4px 4px 0 #1a1a1a}
#pane[data-theme=K] .meta{font-family:"Courier New",monospace;text-transform:uppercase;letter-spacing:.2em;color:#7a2b3a}
#pane[data-theme=K] #pane-body>p{background:#fffdf7;padding:14px 18px;transform:rotate(.6deg);box-shadow:2px 3px 0 #0002;max-width:56ch}
#pane[data-theme=K] .gallery .media{transform:rotate(-1.5deg);border:8px solid #fff;border-bottom-width:30px;border-radius:2px;box-shadow:0 10px 24px -12px #0006;position:relative;overflow:visible}
#pane[data-theme=K] .gallery .media:nth-child(2){transform:rotate(2deg) translateY(14px)}
#pane[data-theme=K] .gallery .media::before{content:"";position:absolute;top:-16px;left:50%;width:84px;height:24px;margin-left:-42px;background:#fff8;border:1px solid #fff;transform:rotate(-4deg);z-index:2}
#pane[data-theme=K] figcaption{border:0;background:transparent;font-family:"Courier New",monospace;font-size:11px;position:absolute;bottom:-27px;left:0;right:0;padding:5px 2px}
#pane[data-theme=K] h3{font-family:"Times New Roman",serif;font-style:italic;font-size:28px;font-weight:400;margin-top:44px}
#pane[data-theme=K] .cs ul{background:#1a1a1a;color:#fff;padding:18px 18px 10px 36px;transform:rotate(-.6deg);box-shadow:5px 5px 0 #e9a7b4}
#pane[data-theme=K] .cs ul a{color:#ffd1dc}

/* ---------- O · Open Source: terminal ---------- */
#pane[data-theme=O]{background:#0d1117;color:#c9d1d9}
#pane[data-theme=O] .pane-nav button{background:#161b22;color:#c9d1d9;border-color:#30363d;font-family:ui-monospace,monospace}
#pane[data-theme=O] .kcap{color:#7ee787}
#pane[data-theme=O] #pane-body{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:14px}
#pane[data-theme=O] h2{font-family:inherit;color:#7ee787;font-size:clamp(24px,4vw,34px);font-weight:600}
#pane[data-theme=O] h2::before{content:"# ";color:#484f58}
.term-prompt{color:#c9d1d9;margin:6px 0 18px!important}.term-ps{color:#79c0ff}
#pane[data-theme=O] p{color:#8b949e}
#pane[data-theme=O] .list{border-top:1px solid #21262d}
#pane[data-theme=O] .list li{border-color:#21262d;padding-left:22px;position:relative}
#pane[data-theme=O] .list li::before{content:"*";position:absolute;left:2px;top:14px;color:#e3b341}
#pane[data-theme=O] .list a{color:#e3b341;text-decoration:none}#pane[data-theme=O] .list a:hover{text-decoration:underline}
#pane[data-theme=O] .list small{color:#8b949e}

/* ---------- U · Users: big type ---------- */
#pane[data-theme=U] h2{font-size:clamp(48px,10vw,104px);letter-spacing:-.04em}
#pane[data-theme=U] p{font-size:22px;line-height:1.45;max-width:30ch}

/* ---------- H · How to Pronounce: waveform ---------- */
.wave{display:flex;align-items:center;gap:3px;height:56px;margin:4px 0 18px;max-width:520px}
.wave i{flex:1;height:var(--h);background:#333;border-radius:2px;transform-origin:center;animation:wv 1.4s ease-in-out infinite;animation-delay:calc(var(--i)*-60ms)}
@keyframes wv{50%{transform:scaleY(.35)}}
#pane[data-theme=H] .meta{font-family:"Lucida Sans Unicode","Arial Unicode MS",serif}
#pane[data-theme=H] h2::after{content:" /haʊ tə prəˈnaʊns/";font-weight:300;font-size:.42em;color:#999;letter-spacing:0;white-space:nowrap}

/* ---------- A · About: a personal touch (highlighter) ---------- */
#pane[data-theme=A] h2 span,#pane[data-theme=A] h2{background:linear-gradient(transparent 62%,#fff27a 62%,#fff27a 90%,transparent 90%) no-repeat;background-size:100% 100%;display:inline}
#pane[data-theme=A] .grp h3,#pane[data-theme=A] .cs h3{background:linear-gradient(transparent 60%,#ffe9a8 60%) no-repeat;display:inline-block}

/* motion off: freeze decorative animation */
@media (prefers-reduced-motion:reduce){.wave i,.fl-logo,.tw-caret{animation:none!important}}
@media (max-width:700px){#pane[data-theme=Q] #pane-body{padding:32px 20px 32px 30px}#pane[data-theme=Q] #pane-body::before{left:16px}
 #pane[data-theme=F] #pane-body{padding:22px 18px;box-shadow:4px 4px 0 #000}
 #pane[data-theme=U] p{font-size:19px}}

/* ===== v2 (Kinetic standard: one bold physical metaphor, hard ink shadows, tactile motion) ===== */
/* ---------- W · Workflows: a live node graph ---------- */
#pane[data-theme=W]{background:#eeede8;background-image:radial-gradient(#c8c6bd 1.2px,transparent 1.4px);background-size:22px 22px}
#pane[data-theme=W] #pane-body{max-width:none}
.wf-graph{position:relative;display:flex;flex-direction:column;gap:84px;padding-bottom:20px}
.wf-wires{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.wf-wire path{fill:none!important;stroke:#1a1a1a;stroke-width:2.5;opacity:.12;transition:opacity .6s}
.wf-wire path.flow{stroke:#7c5cff;stroke-dasharray:7 9;animation:wfflow 1s linear infinite;opacity:0}
.wf-wire:nth-child(3n+2) path.flow{stroke:#16a37f}.wf-wire:nth-child(3n+2) circle{fill:#16a37f}.wf-wire:nth-child(3n) path.flow{stroke:#f08c00}.wf-wire:nth-child(3n) circle{fill:#f08c00}
.wf-wire circle{fill:#7c5cff;opacity:0;transition:opacity .6s}
.wf-wire.lit path{opacity:.85}.wf-wire.lit path.flow{opacity:1}.wf-wire.lit circle{opacity:1}
@keyframes wfflow{to{stroke-dashoffset:-16}}
#pane[data-theme=W] .wf-node{position:relative;z-index:1;width:min(660px,74%);box-sizing:border-box;background:#fff;border:2px solid #1a1a1a;border-radius:12px;padding:0 22px 16px;margin:0;box-shadow:6px 6px 0 #1a1a1a;
 opacity:0;transform:translateY(26px) scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.2,1.4,.4,1)}
#pane[data-theme=W] .wf-node.lit{opacity:1;transform:none}
#pane[data-theme=W] .wf-node:nth-of-type(even){align-self:flex-end}
#pane[data-theme=W] .wf-node>h3,.wf-hd{margin:0 -22px 14px;padding:10px 22px;border-bottom:2px solid #1a1a1a;border-radius:10px 10px 0 0;background:#7857fb;color:#fff;font:600 12px/1.3 ui-monospace,"SF Mono",Menlo,monospace;text-transform:uppercase;letter-spacing:.1em}
.wf-hd{background:#1a1a1a;display:flex;align-items:center;gap:8px}.wf-hd i{width:8px;height:8px;border-radius:50%;background:#16a37f;box-shadow:0 0 0 3px #16a37f44}
#pane[data-theme=W] .wf-node:nth-of-type(3n+2)>h3{background:#16a37f}#pane[data-theme=W] .wf-node:nth-of-type(3n)>h3{background:#f08c00}
#pane[data-theme=W] .wf-intro h2{font-size:clamp(40px,7vw,76px);letter-spacing:-.03em;margin:.1em 0 .05em}
#pane[data-theme=W] .wf-intro .meta{font-family:ui-monospace,monospace;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
#pane[data-theme=W] .wf-node .media{border:2px solid #1a1a1a;border-radius:6px}
.wf-port{position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;border:2.5px solid #1a1a1a;box-sizing:border-box}
.wf-port.in{left:56px;top:-8px}.wf-port.out{right:56px;bottom:-8px;background:#1a1a1a}
#pane[data-theme=W] .wf-graph>a.more{align-self:center;position:relative;z-index:1}
@media (max-width:700px){.wf-graph{gap:64px}#pane[data-theme=W] .wf-node{width:100%;padding:0 16px 14px}#pane[data-theme=W] .wf-node>h3,.wf-hd{margin:0 -16px 12px;padding:10px 16px}
 .wf-port.in{left:50%;top:-8px;margin-left:-7px}.wf-port.out{right:auto;left:50%;bottom:-8px;margin-left:-7px}}

/* ---------- I · Installations: a breadboard with LEDs ---------- */
#pane[data-theme=I]{background:#f4f1e6;background-image:radial-gradient(circle,#b8af98 1.6px,#ddd6c3 1.8px 2.6px,transparent 2.8px);background-size:15px 15px;background-attachment:local}
#pane[data-theme=I] .pane-nav button{background:#fffdf6;border-color:#cfc6ae}
.bb-panel{position:relative;background:#fbf9f2;border:1px solid #d6cdb4;border-radius:10px;padding:34px 22px;margin:0 0 30px;box-shadow:0 2px 0 #e3dcc8,0 18px 30px -22px #5a4b2a88}
.bb-rail{position:absolute;left:18px;right:18px;height:10px;border-top:2px solid #d64541;border-bottom:2px solid #2f6fd1;background:radial-gradient(circle,#b8af98 1.5px,transparent 1.7px) 0 50%/12px 10px repeat-x}
.bb-rail.rt{top:9px}.bb-rail.rb{bottom:9px}
.bb-jump{position:absolute;left:8%;right:8%;bottom:16px;height:26px;width:84%;overflow:visible}.bb-jump path{fill:none;stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.9}
.bb-leds{display:block;width:100%;height:auto;position:relative}
.bb-leds .hole{fill:#cfc6ae}
.led .bulb{fill:#5a2321;transition:fill .12s}.led .glow{fill:#ff4b3a;opacity:0;filter:blur(2.5px);transition:opacity .2s}
.bb-panel.on .led .bulb{fill:#ff5a46;transition-delay:var(--d)}.bb-panel.on .led .glow{opacity:.75;transition-delay:var(--d)}
.bb-panel.on .led:nth-child(7n) .glow{animation:ledflick 3s ease-in-out infinite;animation-delay:calc(var(--d) + 1.2s)}
@keyframes ledflick{50%{opacity:.35}}
#pane[data-theme=I] .cs{background:#1f1f1f;color:#eee;border-radius:6px;padding:6px 22px 18px;margin:34px 0;position:relative;box-shadow:6px 6px 0 #c9bfa5}
#pane[data-theme=I] .cs::before,#pane[data-theme=I] .cs::after{content:"";position:absolute;left:24px;right:24px;height:7px;background:repeating-linear-gradient(90deg,#c9ccd1 0 7px,transparent 7px 15px)}
#pane[data-theme=I] .cs::before{top:-7px}#pane[data-theme=I] .cs::after{bottom:-7px}
#pane[data-theme=I] .cs h3{font:600 15px ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#fff;display:flex;gap:10px;align-items:center}
#pane[data-theme=I] .cs h3::before{content:"";width:10px;height:10px;border-radius:50%;background:#2ee26d;box-shadow:0 0 10px #2ee26d}
#pane[data-theme=I] .cs p{color:#d7d7d7}#pane[data-theme=I] .cs a{color:#ffcf5a}
#pane[data-theme=I] .cs .media{border:0;background:#000}#pane[data-theme=I] .cs figcaption{background:#000;color:#aaa;border:0;font-family:ui-monospace,monospace}
#pane[data-theme=I] #pane-body>p{background:#fffdf6e6;padding:14px 18px;border-left:4px solid #d64541;border-radius:2px}
@media (max-width:700px){.bb-panel{padding:30px 12px}#pane[data-theme=I] .cs{padding:6px 14px 14px}}

/* ---------- S · Singapore: the island first, then a drifting food list ---------- */
#pane[data-theme=S]{background:#f6ead5}
#pane[data-theme=S] .pane-nav button{background:#fff8ec;border-color:#d8c3a0}
.sg-hero{margin:28px 0 18px;padding-top:6px;overflow:hidden;position:relative}
.sg-map{display:block;width:100%;height:auto;overflow:visible;will-change:transform}
.sg-shadow{fill:#1a1a1a;transform:translate(9px,9px);opacity:0;transition:opacity .6s .9s}
.sg-land{fill:transparent;stroke:#b22a1f;stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.3,1),fill .6s .9s}
.sg-hero.go .sg-land{stroke-dashoffset:0;fill:#d6402f}.sg-hero.go .sg-shadow{opacity:1}
.sg-pin{opacity:0;transform:translateY(-14px);transition:opacity .3s,transform .5s cubic-bezier(.2,1.6,.4,1);transition-delay:var(--d)}
.sg-hero.go .sg-pin{opacity:1;transform:none}.sg-hero.still *{transition:none!important}
.sg-pin circle{fill:#fff6e0;stroke:#1a1a1a;stroke-width:3}.sg-pin line{stroke:#1a1a1a;stroke-width:2}
.sg-pin text{font:italic 600 24px Georgia,serif;fill:#1a1a1a;paint-order:stroke;stroke:#f6ead5;stroke-width:6px}
.sg-credit{font:11px/1.4 "Courier New",monospace!important;color:#8a5a3a!important;margin:6px 0 0!important}.sg-credit a{color:inherit!important}
#pane[data-theme=S] h2{font-family:Georgia,"Songti SC","STSong",serif;font-style:italic;font-size:clamp(48px,10vw,104px);line-height:.95;color:#1a1a1a;display:inline-block;background:#fff6e0;padding:4px 20px 8px;box-shadow:5px 5px 0 #b22a1f;transform:rotate(-2deg);margin:0 0 10px;position:relative}
#pane[data-theme=S] h2::after{content:"新加坡";position:absolute;right:-46px;top:6px;font:600 14px/1.1 "Songti SC","STSong",serif;font-style:normal;writing-mode:vertical-rl;color:#fff6e0;background:#b22a1f;padding:8px 4px;border-radius:3px;transform:rotate(6deg)}
#pane[data-theme=S] .meta{font-family:"Courier New",monospace;text-transform:uppercase;letter-spacing:.2em;color:#8a5a3a}
#pane[data-theme=S] p,#pane[data-theme=S] li{color:#3d2a1e;font-family:Georgia,"Iowan Old Style",serif;font-size:17px}
#pane[data-theme=S] #pane-body>p{background:#fffaf0;padding:14px 18px;box-shadow:2px 3px 0 #0002;transform:rotate(-.5deg);max-width:56ch}
#pane[data-theme=S] .cs h3{font-family:Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(30px,5vw,44px);margin:40px 0 6px}
#pane[data-theme=S] #eat ul{list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:22px}
.sg-item{background:#fffaf0;padding:16px 20px;box-shadow:3px 3px 0 #1a1a1a;border:1.5px solid #1a1a1a;position:relative}
.sg-item.has-ph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;align-items:center;padding:22px;margin:30px 0}
.sg-item.has-ph:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.sg-item.has-ph:nth-child(even) .sg-ph{order:2}
.sg-ph{margin:-46px 0;background:#fff;padding:8px 8px 4px;box-shadow:0 14px 24px -12px #0007;transform:translateY(var(--py,0)) rotate(var(--rot,0deg));will-change:transform}
.sg-ph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.sg-ph figcaption{font:10px/1.4 "Courier New",monospace;color:#7a6a5a;padding:5px 2px 2px;background:none;border:0}.sg-ph figcaption a{color:inherit}
#pane[data-theme=S] a{color:#b22a1f}
@media (max-width:700px){#pane[data-theme=S] h2::after{display:none}.sg-item.has-ph,.sg-item.has-ph:nth-child(even){grid-template-columns:1fr;gap:14px;margin:12px 0}.sg-item.has-ph:nth-child(even) .sg-ph{order:0}.sg-ph{margin:-34px 0 0}.sg-pin text{font-size:30px}}

@media (prefers-reduced-motion:reduce){.wf-wire path.flow,.led .glow{animation:none!important}#pane[data-theme=W] .wf-node{transition:none}.sg-ph{transform:rotate(var(--rot,0deg))!important}}

/* no vertical centering anywhere: content starts below the header, centered horizontally only */
#pane.centered .pane-inner{justify-content:flex-start}#pane.centered #pane-body{margin:0 auto}

/* ===== Vertical rhythm, enforced for every themed page except W (its node graph keeps its own layout) =====
   No flex/grid/min-height on the body column, no stacked margins: prose sits tight (12px), blocks 20px, section headings 36px. */
#pane[data-theme]:not([data-theme=W]) .pane-inner{min-height:0;display:block}
#pane[data-theme]:not([data-theme=W]) #pane-body{display:block;min-height:0;margin-top:0;margin-bottom:0}
#pane[data-theme]:not([data-theme=W]) #pane-body:not(.wf-graph)>*{margin-top:0;margin-bottom:0}
#pane[data-theme]:not([data-theme=W]) #pane-body:not(.wf-graph)>*+*{margin-top:20px}
#pane[data-theme]:not([data-theme=W]) #pane-body:not(.wf-graph)>p+p{margin-top:12px}
#pane[data-theme]:not([data-theme=W]) #pane-body:not(.wf-graph)>:is(section,.cs,.grp,h3,.list-title,.arc,.tl,.tabs)+*,#pane[data-theme]:not([data-theme=W]) #pane-body:not(.wf-graph)>*+:is(section,.cs,.grp,.list-title,h3){margin-top:36px}
#pane[data-theme]:not([data-theme=W]) #pane-body:not(.wf-graph)>.more+.more{margin-top:0}
#pane[data-theme]:not([data-theme=W]) :is(.cs,.grp)>*{margin-top:0;margin-bottom:0}
#pane[data-theme]:not([data-theme=W]) :is(.cs,.grp)>*+*{margin-top:12px}
#pane[data-theme]:not([data-theme=W]) .cs>h3:first-child{margin-top:0}
#pane[data-theme=S] .sg-hero{margin-top:28px}

/* main's staggered page exits drive W nodes with GSAP; no CSS transform transition fighting it */
#pane.nav-next .wf-node,#pane.nav-prev .wf-node{transition:none!important}

/* ---------- D · Devil Yogurt: a Flash-era candy underworld ---------- */
#pane[data-theme=D]{background:linear-gradient(180deg,#f7cfdc 0%,#eec3e0 45%,#cfa9df 100%) fixed;color:#3b1530}
#pane[data-theme=D] .pane-nav button{background:#fff3f7;border-color:#e3a6be;color:#5a1236}
#pane[data-theme=D] #pane-body{position:relative}
#pane[data-theme=D] h2{display:inline-block;position:relative;background:#1d1418;color:#ffe9f1;font:700 clamp(30px,5.4vw,56px)/1.05 Georgia,"Times New Roman",serif;letter-spacing:-.01em;padding:18px 28px 20px;border-radius:14px;
 box-shadow:0 0 0 3px #f7cfdc,0 0 0 5px #1d1418,8px 10px 0 5px #5a1236;transform:rotate(-1.5deg);margin-top:26px}
#pane[data-theme=D] h2::before,#pane[data-theme=D] h2::after{content:"";position:absolute;top:-20px;width:22px;height:28px;background:#d6245c;clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:2px}
#pane[data-theme=D] h2::before{left:22px;transform:rotate(-18deg)}#pane[data-theme=D] h2::after{right:22px;transform:rotate(18deg)}
#pane[data-theme=D] .meta{display:flex;flex-wrap:wrap;gap:8px}
#pane[data-theme=D] .meta span{background:#d6245c;color:#fff;font:700 12px/1 Verdana,Tahoma,sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;box-shadow:2px 2px 0 #5a1236}
#pane[data-theme=D] .meta span+span::before{content:none}
#pane[data-theme=D] #pane-body>p:not(.meta){background:#fffaf6;color:#3b1530;font:17px/1.6 Georgia,serif;padding:18px 22px 30px;max-width:56ch;border-radius:16px 16px 0 0;position:relative;box-shadow:0 14px 24px -18px #5a123688;
 -webkit-mask:radial-gradient(14px at 50% 100%,#0000 98%,#000) 50% 100%/28px 100% repeat-x;mask:radial-gradient(14px at 50% 100%,#0000 98%,#000) 50% 100%/28px 100% repeat-x}
#pane[data-theme=D] .cs h3{font:italic 700 30px Georgia,serif;color:#5a1236}
#pane[data-theme=D] .gallery{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
#pane[data-theme=D] .gallery .media{background:#fff;border:0;padding:10px 10px 6px;border-radius:6px;box-shadow:5px 6px 0 #5a1236;transform:rotate(-2deg)}
#pane[data-theme=D] .gallery .media:nth-child(2){transform:rotate(1.5deg) translateY(10px)}#pane[data-theme=D] .gallery .media:nth-child(3){transform:rotate(-1deg)}
#pane[data-theme=D] .gallery img{border-radius:3px}
#pane[data-theme=D] figcaption{border:0;background:none;font:11px Verdana,sans-serif;color:#8a4a6a;padding:6px 2px 0}
#pane[data-theme=D] a.more{display:inline-block;background:#1d1418;color:#ffe9f1;text-decoration:none;font:700 13px Verdana,sans-serif;letter-spacing:.06em;padding:10px 16px;border-radius:999px;box-shadow:3px 3px 0 #d6245c;margin-top:8px}
#pane[data-theme=D] a.more:hover{background:#d6245c}
.dy-spider{position:absolute;right:16%;top:calc(100% + 5px);width:2px;height:90px;z-index:2;background:#1d1418;transform-origin:top center;animation:dyswing 3.2s ease-in-out infinite;pointer-events:none}
.dy-spider i{position:absolute;bottom:-14px;left:-11px;width:24px;height:20px;border-radius:50% 50% 45% 45%;background:#1d1418}
.dy-spider i::before,.dy-spider i::after{content:"";position:absolute;top:6px;width:36px;height:2px;left:-6px;background:#1d1418;box-shadow:0 5px 0 #1d1418,0 -4px 0 #1d1418}
.dy-spider i::after{transform:rotate(14deg)}.dy-spider b{position:absolute;bottom:-6px;left:-5px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:7px 0 0 #fff}
@keyframes dyswing{0%,100%{transform:rotate(7deg)}50%{transform:rotate(-7deg)}}
@media (prefers-reduced-motion:reduce){.dy-spider{animation:none}}
@media (max-width:700px){#pane[data-theme=D] h2{padding:14px 18px 16px}.dy-spider{right:12%;height:56px}}