/* =====================================================================
   ZK site — base styles shared by both modes.
   Mode files (modes/<mode>/mode.css) set fonts and accents through these variables.
   ===================================================================== */
:root{
  --ease:cubic-bezier(.65,0,.35,1); --app-dur:.9s;
  --f-head:'Space Grotesk',system-ui,sans-serif; --f-body:Inter,system-ui,sans-serif; --f-name:'Inter Tight',system-ui,sans-serif;
  --accent:#ff6a4d; --page:#f3efe6;
}
[data-theme=dark]{ --page:#131119; color-scheme:dark; }
*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:auto}
body{background:var(--page);font-family:var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
.noanim *,.noanim *::before,.noanim *::after{transition:none!important}
#bg{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
main{position:relative;z-index:1;overflow-x:clip}
.sec{position:relative;color:var(--ink)}
.sec h1,.sec h2,.sec h3{font-family:var(--f-head)}
a{color:inherit}

/* sun & moon theme switch (assets/sun_moon is lazy-loaded) */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none}
#sky-night{opacity:0}
/* the sun & moon (and their glow) live at the top of the PAGE, not the screen: scrolled down, a theme switch
   happens up there out of view, and the yin-yang stays at the top right of the first section */
#glows,#stage{position:absolute!important;left:0;right:0;top:0;bottom:auto!important;height:100vh;height:100svh}
#glows{z-index:2!important;pointer-events:none}
#themeToggle{position:absolute;top:16px;right:16px;z-index:30;width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
#themeToggle:focus-visible{outline:3px solid #4b7bff;outline-offset:4px}
/* glass yin-yang coin. The shadow is on the button (it doesn't spin); the SVG spins. */
#themeToggle{--yy-line:rgba(14,26,54,.45);--yy-clear:rgba(255,255,255,.1);--yy-mist:.35;--yy-edge:rgba(14,26,54,.28);
  filter:drop-shadow(0 5px 8px rgba(14,26,54,.22));transition:filter .3s}
#themeToggle:hover{filter:drop-shadow(0 7px 12px rgba(14,26,54,.3)) drop-shadow(0 0 5px rgba(159,187,230,.55))}
[data-theme=dark] #themeToggle{--yy-line:rgba(234,243,255,.75);--yy-clear:rgba(225,235,255,.08);--yy-mist:.6;--yy-edge:rgba(234,243,255,.4);
  filter:drop-shadow(0 0 6px rgba(159,187,230,.35))}
[data-theme=dark] #themeToggle:hover{filter:drop-shadow(0 0 10px rgba(159,187,230,.6))}
#themeToggle svg{width:100%;height:100%;display:block;overflow:visible;transition:transform 1.2s cubic-bezier(.65,0,.35,1)}
#themeToggle .yy-clear{fill:var(--yy-clear)}
#themeToggle .yy-mist{opacity:var(--yy-mist)}
#themeToggle .yy-rimcol{flood-color:var(--yy-line)}
#themeToggle .yy-edgeline{stroke:var(--yy-edge)}
html:not([data-sm-edit]) #styleToggle,html:not([data-sm-edit]) #ctlBtn,html:not([data-sm-edit]) #ctl{display:none!important}

/* access-code dialog + flash message */
.zk-dlg{border:0;border-radius:18px;padding:26px 26px 22px;width:min(92vw,380px);background:#fffdf8;color:#1b1a22;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);font-family:var(--f-body)}
.zk-dlg::backdrop{background:rgba(10,10,20,.45);backdrop-filter:blur(3px)}
.zk-dlg h3{margin:0 0 6px;font:700 22px/1.1 var(--f-head)}
.zk-dlg p{margin:0 0 16px;opacity:.75;font-size:14px;line-height:1.5}
.zk-dlg input[name=code]{width:100%;font:600 20px/1 ui-monospace,Consolas,monospace;letter-spacing:.18em;text-transform:uppercase;padding:12px 14px;border-radius:12px;border:2px solid #1b1a22;background:#fff;color:#1b1a22}
.zk-dlg .row{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.zk-dlg button{font:600 14px/1 var(--f-body);padding:11px 18px;border-radius:99px;border:2px solid #1b1a22;background:none;color:#1b1a22;cursor:pointer}
.zk-dlg button.pri{background:#1b1a22;color:#fffdf8}
/* contact dialog (same look as the access-code one) */
.zk-contact{width:min(94vw,520px);position:relative}
.zk-contact .x{position:absolute;top:12px;right:12px;width:34px;height:34px;padding:0;border:0;border-radius:50%;font-size:15px;opacity:.6}
.zk-contact .x:hover{opacity:1;background:rgba(0,0,0,.06)}
.zk-contact label{display:block;margin:0 0 12px;font:600 13px/1.2 var(--f-body)}
.zk-contact input,.zk-contact textarea{display:block;width:100%;margin-top:6px;font:400 15px/1.45 var(--f-body);padding:11px 13px;border-radius:12px;border:2px solid #1b1a22;background:#fff;color:#1b1a22;box-sizing:border-box}
.zk-contact textarea{resize:vertical;min-height:130px}
.zk-contact input:focus,.zk-contact textarea:focus{outline:3px solid color-mix(in srgb,#2c8bcb 45%,transparent);outline-offset:1px}
.zk-contact .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zk-contact .msg{margin:2px 0 0;min-height:1.4em;font-size:14px;opacity:1}
.zk-contact .msg.ok{color:#16804f}.zk-contact .msg.err{color:#c0392b}
.zk-contact button:disabled{opacity:.5;cursor:wait}
[data-site-mode=comic] .zk-dlg{border:3px solid #1b1a22;box-shadow:6px 6px 0 #1b1a22}
#flash{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:50;padding:12px 18px;border-radius:99px;font:600 14px/1.2 var(--f-body);box-shadow:0 14px 30px -10px rgba(0,0,0,.4);transition:opacity .6s,transform .6s}
#flash.ok{background:#1b1a22;color:#fff}
#flash.err{background:#c0392b;color:#fff}
#flash.gone{opacity:0;transform:translate(-50%,-20px);pointer-events:none}

@media (max-width:640px){ #themeToggle{width:42px;height:42px;top:12px;right:12px} }

/* pro mode, dark theme: the "Carbon Signal" weave on every section below the top one (a fine diagonal hatch in the text colour,
   7%). It sits behind the content and above the painted section colour; fades with the theme. (2026-10-05) */
[data-site-mode=pro] main > .sec:not(#top_prism)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  color:var(--ink);background:repeating-linear-gradient(135deg,currentColor 0 1px,transparent 1px 14px),repeating-linear-gradient(45deg,currentColor 0 1px,transparent 1px 14px)}
:root[data-site-mode=pro][data-theme=dark] main > .sec:not(#top_prism)::before{opacity:.07}

/* access code dialog: answer line, wrong code = the box shakes and greys out while it waits (site.js, 2026-10-05) */
.zk-dlg .msg{margin:10px 0 0;min-height:1.4em;font-size:14px;line-height:1.4;opacity:1}
.zk-dlg .msg.ok{color:#16804f}.zk-dlg .msg.err{color:#c0392b}
.zk-dlg input[name=code]{transition:background .3s,color .3s,border-color .3s}
.zk-dlg input[name=code]:disabled{background:#e6e6ea;color:#9b9ba6;border-color:#b9b9c3;cursor:not-allowed}
.zk-dlg button:disabled{opacity:.4;cursor:not-allowed}
.zk-dlg input[name=code].shake{animation:zkShake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes zkShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}