/* =====================================================================
   ♡ L31-COM // the Wired ♡   —   shared stylesheet  (LIGHT cyber-blue)
   bright icy-blue persocom homepage · frutiger-aero meets the Wired
   100% hand-coded · neocities · no orange, only blue ♡
   ===================================================================== */

/* ---- palette ------------------------------------------------------- */
:root{
  --paper:#eef5ff;
  --bg:#e7f1ff;          /* base icy blue        */
  --bg2:#ffffff;         /* panels / screens     */
  --bg3:#d8e8ff;
  --well:#e9f2ff;        /* light inset wells    */
  --panel:rgba(255,255,255,.85);
  --line:#bcd6f5;        /* light blue border    */
  --ink:#16273f;         /* deep navy text       */
  --dim:#4d6890;
  --faint:#8198bb;

  /* "copper" tokens are repurposed to BLUE so every old accent goes blue */
  --copper:#2b8fff;      /* primary azure        */
  --copper-hi:#1573e6;   /* strong azure         */
  --wire:#46a8ff;        /* wired-map wires      */
  --node:#2b8fff;        /* node blue            */
  --node-hi:#1573e6;     /* readable accent blue */
  --cyan:#0bb3d6;        /* bright cyan          */
  --phosphor:#0c84b3;    /* teal "screen" text   */
  --magenta:#2b8fff;     /* (alias) azure        */
  --magenta-soft:#1f74d6;/* readable medium blue */
  --violet:#6a6aff;
  --warn:#b07400;        /* amber, readable      */
  --err:#d11a5e;         /* corrupt red-magenta  */

  --argyle-base:#cfe1f4; --argyle-diamond:rgba(86,150,214,.16); --argyle-line:rgba(64,126,198,.15);

  --mono:'Share Tech Mono',ui-monospace,'Courier New',monospace;
  --term:'VT323',ui-monospace,monospace;
  --pixel:'Pixelify Sans',var(--mono);
}

/* ---- reset --------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--ink);
  font-family:var(--mono);font-size:16px;line-height:1.6;letter-spacing:.2px;overflow-x:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #ffffff 0%, var(--bg) 46%, #dbe9fc 100%),
    repeating-linear-gradient(0deg, rgba(40,110,200,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(40,110,200,.05) 0 1px, transparent 1px 44px),
    var(--bg);
}
/* very faint scanline nod (no dark vignette) */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(40,110,200,.028) 0 1px, transparent 1px 3px);
}
/* whisper of paper noise */
body::before{
  content:"";position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noise .5s steps(3) infinite;mix-blend-mode:multiply;
}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
@keyframes flicker{0%,100%{opacity:1}93%{opacity:.85}94%{opacity:1}}
@keyframes noise{0%{transform:translate(0,0)}33%{transform:translate(-4%,2%)}66%{transform:translate(3%,-3%)}100%{transform:translate(0,0)}}
::selection{background:var(--copper);color:#fff}

/* ---- links --------------------------------------------------------- */
a{color:var(--node-hi)}
a:hover{color:var(--cyan);text-shadow:0 0 8px rgba(11,179,214,.35)}
a:focus-visible{outline:1px dashed var(--copper);outline-offset:2px}

/* ---- layout shell -------------------------------------------------- */
.site{max-width:1024px;margin:0 auto;padding:18px 16px 60px;position:relative;z-index:1}

/* ---- top status / bracket nav ------------------------------------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13px;color:var(--dim);border-bottom:1px solid var(--line);
  padding:6px 4px;margin-bottom:14px;text-transform:lowercase;
}
.topbar .blink-dot{color:var(--cyan);animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}

.nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:15px;margin:0 0 18px}
.nav a{color:var(--dim);padding:4px 10px;border:1px solid transparent;position:relative;text-transform:lowercase;letter-spacing:1px;transition:.15s}
.nav a::before{content:"[ ";color:var(--faint)}
.nav a::after{content:" ]";color:var(--faint)}
.nav a:hover{color:var(--copper-hi)}
.nav a.current{color:var(--copper-hi);font-weight:bold;text-shadow:0 0 10px rgba(43,143,255,.3)}
.nav a.current::before,.nav a.current::after{color:var(--copper)}

/* ---- bracketed page title ----------------------------------------- */
.wired-title{font-family:var(--mono);font-weight:400;color:var(--node-hi);font-size:13px;letter-spacing:3px;text-transform:uppercase;opacity:.85;margin:0 0 2px}
.wired-title::before{content:"< "}
.wired-title::after{content:" >"}

/* ---- window chrome ------------------------------------------------- */
.win{
  border:1px solid var(--line);background:linear-gradient(180deg,#ffffff,#f3f8ff);
  box-shadow:0 1px 0 #fff inset, 0 10px 26px rgba(40,80,140,.13);
  margin-bottom:20px;position:relative;border-radius:4px;overflow:hidden;
}
.titlebar{
  display:flex;justify-content:space-between;align-items:center;padding:5px 10px;
  font-size:13px;letter-spacing:1px;color:#0c2340;
  background:linear-gradient(180deg,#8fd0ff,#2b8fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.titlebar .winbtns{font-family:var(--mono);letter-spacing:2px;opacity:.7}

/* ---- terminal boot (light console) -------------------------------- */
.terminal{
  font-family:var(--term);font-size:20px;line-height:1.3;letter-spacing:1px;color:#1c4f8f;
  padding:14px 16px;background:linear-gradient(#f4f9ff,#e8f2ff);border-top:1px solid var(--line);
}
.terminal p{margin:.1em 0}
.terminal .t-bar{color:var(--copper-hi)}
.terminal b{color:var(--node)}
.terminal .t-on{color:var(--phosphor)}
.t-cursor{animation:blink 1s steps(2) infinite}

/* ---- marquee ------------------------------------------------------- */
.marquee{
  overflow:hidden;white-space:nowrap;border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(180deg,#ffffff,#eef5ff);color:var(--copper-hi);font-size:14px;
  padding:6px 0;margin-bottom:20px;
}
.marquee span{display:inline-block;padding-left:100%;animation:marq 26s linear infinite}
.marquee:hover span{animation-play-state:paused}
.marquee b{color:var(--cyan)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* ---- two-column layout -------------------------------------------- */
.layout{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:start}
@media (max-width:760px){.layout{grid-template-columns:1fr}}

/* ---- panels -------------------------------------------------------- */
.panel{border:1px solid var(--line);background:var(--panel);padding:16px 18px;margin-bottom:18px;position:relative;border-radius:4px;box-shadow:0 4px 14px rgba(40,80,140,.06)}
.panel.tinted{background:linear-gradient(160deg, rgba(43,143,255,.10), rgba(11,179,214,.06)),#ffffff;border-color:#a9cdf3}
.section{font-family:var(--pixel);font-weight:700;font-size:20px;margin:0 0 12px;color:var(--magenta-soft);letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.section::before{content:"✦";color:var(--cyan);font-size:.8em}
h1,h2,h3{font-family:var(--pixel)}
p{margin:.5em 0}

.note{margin-top:12px;padding:8px 12px;border:1px dashed var(--warn);color:#8a5b00;background:rgba(255,196,77,.14);font-size:14px;border-radius:3px}

.starlist{list-style:none;padding:0;margin:0}
.starlist li{padding:6px 0 6px 22px;border-bottom:1px dotted var(--line);position:relative}
.starlist li::before{content:"›";position:absolute;left:4px;color:var(--copper-hi)}
.starlist b{color:var(--node-hi)}
.new{font-family:var(--pixel);color:#fff;background:var(--copper);padding:0 6px;font-size:11px;border-radius:3px;animation:blink 1.2s steps(2) infinite}

/* ---- sidebar widgets ---------------------------------------------- */
.sidebar{display:flex;flex-direction:column;gap:16px}
.widget{border:1px solid var(--line);background:#ffffff;border-radius:4px;overflow:hidden;box-shadow:0 4px 14px rgba(40,80,140,.06)}
.widget h3{margin:0;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#0c2340;padding:5px 8px;background:linear-gradient(180deg,#9fd8ff,#49a8f5)}
.w-body{padding:10px 12px;font-size:14px}
.counter{font-family:var(--term);font-size:30px;color:#2563c9;text-align:center;letter-spacing:2px}
html.dark .counter{color:#7aa6ec}
.stat{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px dotted var(--line)}
.stat span{color:var(--dim)}
.stat b{color:var(--magenta-soft);font-weight:400}

/* persocom portrait frame (kept as a soft screen) */
.sona-frame{border:1px solid var(--copper);padding:6px;border-radius:4px;background:radial-gradient(80% 60% at 50% 30%, #eaf4ff, #ffffff 75%);position:relative;box-shadow:inset 0 0 0 1px #fff}
.sona-frame svg{display:block;width:100%;height:auto}
.sona-cap{font-size:11px;color:var(--faint);text-align:center;padding-top:4px;letter-spacing:1px}

/* ---- dividers ------------------------------------------------------ */
.divider{height:18px;margin:6px 0 18px;display:flex;align-items:center;justify-content:center;color:var(--copper);letter-spacing:6px;font-size:13px;opacity:.9}
.divider::before{content:"· · · ✦ · · ◈ · · ✦ · · ·"}

/* ---- blinkies & buttons (pure css, all blue/cyan) ----------------- */
.collection{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.blinkie{width:150px;height:20px;border:1px solid #0c2340;display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--pixel);font-size:10px;letter-spacing:.5px;color:#fff;text-shadow:0 1px 1px #04203f;overflow:hidden;image-rendering:pixelated;box-shadow:0 0 0 1px #fff}
.blinkie::before{content:"●";font-size:8px;animation:blink .7s steps(2) infinite}
.blinkie::after{content:"●";font-size:8px;animation:blink .7s steps(2) infinite .35s}
.bk-angel{background:repeating-linear-gradient(90deg,#1f6fe0,#1f6fe0 6px,#2b8fff 6px,#2b8fff 12px)}
.bk-wired{background:repeating-linear-gradient(90deg,#0e7fa8,#0e7fa8 6px,#13a0cf 6px,#13a0cf 12px)}
.bk-guest{background:repeating-linear-gradient(90deg,#2b6fd6,#2b6fd6 6px,#3a8cf0 6px,#3a8cf0 12px)}
.bk-construction{background:repeating-linear-gradient(45deg,#caa000,#caa000 8px,#1a2740 8px,#1a2740 16px);color:#ffe08a}
.bk-new{background:repeating-linear-gradient(90deg,#1763c7,#1763c7 6px,#2b8fff 6px,#2b8fff 12px)}
.bk-love{background:linear-gradient(90deg,#1670d6,#0bb3d6,#1670d6)}

.btn88{width:88px;height:31px;border:1px solid #0c2340;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1;font-family:var(--pixel);font-size:9px;letter-spacing:.3px;color:#fff;text-shadow:0 1px 1px #04203f;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);cursor:pointer}
.btn88 small{font-size:7px;opacity:.9;letter-spacing:0}
.b-mine{background:linear-gradient(135deg,#1f6fe0,#56b0ff);color:#fff}
.b-hand{background:linear-gradient(135deg,#0e7fa8,#26b6d8);color:#fff}
.b-neo{background:linear-gradient(135deg,#1a8cff,#7fd0ff);color:#073257}
.b-wired{background:linear-gradient(135deg,#1763c7,#46a6ff);color:#fff}
.b-view{background:linear-gradient(135deg,#4a6aff,#8fb0ff);color:#fff}
.b-lain{background:#eef5ff;color:var(--node-hi);box-shadow:inset 0 0 0 1px var(--node)}

.take{font-size:13px;color:var(--dim);margin:10px 0 4px}

/* ---- footer -------------------------------------------------------- */
.footer{border-top:1px solid var(--line);margin-top:28px;padding-top:16px;text-align:center;font-size:13px;color:var(--faint)}
.footer .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.webring{font-family:var(--mono);letter-spacing:2px;color:var(--copper-hi);margin-bottom:8px}
.webring a{color:var(--cyan)}

/* =====================================================================
   GLITCH TEXT (multiply so it shows on light)
   ===================================================================== */
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;clip-path:inset(0 0 0 0);mix-blend-mode:multiply}
.glitch::before{color:var(--copper);transform:translate(-1.5px,0);animation:gl1 2.6s infinite linear alternate-reverse}
.glitch::after{color:var(--cyan);transform:translate(1.5px,0);animation:gl2 3.4s infinite linear alternate-reverse}
@keyframes gl1{0%{clip-path:inset(10% 0 86% 0)}20%{clip-path:inset(80% 0 4% 0)}40%{clip-path:inset(40% 0 43% 0)}60%{clip-path:inset(15% 0 70% 0)}80%{clip-path:inset(60% 0 20% 0)}100%{clip-path:inset(30% 0 55% 0)}}
@keyframes gl2{0%{clip-path:inset(70% 0 12% 0)}25%{clip-path:inset(20% 0 65% 0)}50%{clip-path:inset(48% 0 30% 0)}75%{clip-path:inset(8% 0 80% 0)}100%{clip-path:inset(62% 0 10% 0)}}
@media (prefers-reduced-motion:reduce){.glitch::before,.glitch::after{display:none}}

/* =====================================================================
   AUTHORIZE USER  (index.html)
   ===================================================================== */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.auth{width:min(620px,94vw);text-align:center;position:relative;z-index:1;animation:poweron 1s ease-out both}
@keyframes poweron{0%{opacity:0;transform:scaleY(.01);filter:brightness(2)}55%{opacity:1;transform:scaleY(1)}100%{opacity:1;transform:scaleY(1);filter:brightness(1)}}
.auth .mark{font-family:var(--pixel);font-weight:700;font-size:clamp(40px,9vw,76px);line-height:.9;color:var(--ink);letter-spacing:5px;margin:0 0 6px;text-shadow:0 2px 0 #fff,0 0 22px rgba(43,143,255,.35)}
.auth .mark b{color:var(--copper);text-shadow:0 0 22px rgba(43,143,255,.5)}
.auth .sub{font-family:var(--mono);color:var(--dim);letter-spacing:4px;font-size:13px;text-transform:uppercase}
.auth .bootlog{font-family:var(--term);font-size:18px;color:var(--phosphor);text-align:left;margin:24px auto;max-width:430px;min-height:150px;background:#f3f9ff;border:1px solid var(--line);border-radius:4px;padding:12px 16px}
.auth .bootlog .ok{color:var(--copper)}
.menu{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:10px auto 0}
.menu-item{font-family:var(--mono);font-size:18px;letter-spacing:2px;text-transform:uppercase;border:1px solid var(--line);background:#ffffff;color:var(--ink);padding:12px 16px;cursor:pointer;transition:.15s;position:relative;text-align:center;border-radius:4px}
.menu-item:hover,.menu-item.sel{border-color:var(--copper);color:#fff;background:linear-gradient(180deg,#56b0ff,#1573e6);box-shadow:0 0 22px rgba(43,143,255,.4)}
.menu-item .arrow{position:absolute;left:14px;opacity:0;transition:.15s}
.menu-item:hover .arrow,.menu-item.sel .arrow{opacity:1}
.menu-item.disabled{opacity:.45;cursor:not-allowed;color:var(--faint)}
.menu-item.disabled:hover{background:#fff;color:var(--faint);box-shadow:none;border-color:var(--line)}
.menu-item .tag{font-size:11px;color:var(--faint);letter-spacing:1px;display:block;margin-top:2px}
.menu-item:hover .tag,.menu-item.sel .tag{color:#eaf4ff}
.auth .hint{margin-top:22px;color:var(--dim);font-size:13px;letter-spacing:1px}
.auth .hint b{color:var(--copper-hi)}
.auth .micro{margin-top:30px;color:var(--faint);font-size:11px;letter-spacing:1px}
.auth-art{max-width:400px;margin:8px auto 16px}
.auth .bootlog{min-height:90px}

/* ---- Authorize / boot screen is ALWAYS dark (fills the neocities thumbnail) ---- */
.auth-body{
  background:
    radial-gradient(130% 105% at 50% -5%, #22386e 0%, #101c40 52%, #070b1c 100%),
    repeating-linear-gradient(0deg, rgba(110,160,255,.07) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, rgba(110,160,255,.07) 0 1px, transparent 1px 42px),
    #0a1430 !important;
  color:#e2e8ff;
}
.auth .wired-title{color:#8fb6ff;opacity:1}
.auth .mark{color:#eef3ff;text-shadow:0 2px 0 #0a1430,0 0 26px rgba(90,150,255,.55)}
.auth .mark b{color:#6fb6ff;text-shadow:0 0 26px rgba(80,150,255,.85)}
.auth .sub{color:#a6b6e0}
.auth .imgframe{border-color:#5f86d8;background:radial-gradient(80% 60% at 50% 30%, #16285e, #0b1538 76%);box-shadow:0 16px 44px rgba(0,0,0,.55)}
.auth .imgframe .ph{color:#9fb0e0;border-color:#33508f}
.auth .menu-item{background:rgba(18,28,62,.78);border-color:#37508c;color:#eef3ff}
.auth .menu-item .tag{color:#93a3cf}
.auth .menu-item:hover,.auth .menu-item.sel{background:linear-gradient(180deg,#46a0ff,#1f63d6);border-color:#8fc8ff;color:#fff;box-shadow:0 0 24px rgba(60,140,255,.55)}
.auth .menu-item:hover .tag,.auth .menu-item.sel .tag{color:#e7f1ff}
.auth .menu-item.disabled{color:#6a78a4}
.auth .menu-item.disabled:hover{background:rgba(18,28,62,.78);color:#6a78a4;border-color:#37508c;box-shadow:none}
.auth .hint{color:#a6b6e0}
.auth .hint b{color:#7cc4ff}
.auth .bootlog{background:#0a1430;border-color:#2a3c70;color:#86ffae}
.auth .bootlog .ok{color:#6fb6ff}
.auth .micro{color:#6f7ea8}

#warp{position:fixed;inset:0;z-index:99999;background:#eaf3ff;opacity:0;pointer-events:none;display:flex;align-items:center;justify-content:center;font-family:var(--term);font-size:26px;color:var(--copper-hi);letter-spacing:3px}
#warp.go{animation:warp .9s ease-in forwards}
@keyframes warp{0%{opacity:0}30%{opacity:1}70%{opacity:1;letter-spacing:16px;filter:blur(1px)}100%{opacity:1;letter-spacing:40px;filter:blur(3px)}}

/* =====================================================================
   THE WIRED  —  node map (wired.html)
   ===================================================================== */
.wired-body{min-height:100vh;position:relative;overflow:hidden}
.grid-floor{position:fixed;left:-25%;right:-25%;bottom:-10%;height:60vh;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(43,143,255,.16) 0 1px, transparent 1px 60px),repeating-linear-gradient(0deg, rgba(11,179,214,.14) 0 1px, transparent 1px 60px);
  transform:perspective(380px) rotateX(68deg);transform-origin:50% 100%;
  mask-image:linear-gradient(transparent, #000 60%);-webkit-mask-image:linear-gradient(transparent, #000 60%);
  animation:floor 14s linear infinite;opacity:.6}
@keyframes floor{from{background-position:0 0,0 0}to{background-position:0 60px,0 60px}}

.hud{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:14px 18px}
.hud .id{font-family:var(--mono);font-size:12px;color:var(--dim);line-height:1.7;letter-spacing:1px}
.hud .id b{color:var(--phosphor)}
.hud .id .glitch{font-family:var(--pixel);font-size:22px;color:var(--magenta-soft)}

.stage{position:relative;z-index:3;height:62vh;min-height:420px;margin:6px auto 0;max-width:980px}
.wires{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}
.wires path{fill:none;stroke:var(--wire);stroke-width:1.6;opacity:.7;stroke-dasharray:6 10;animation:flow 3s linear infinite;filter:drop-shadow(0 0 3px rgba(70,180,255,.6))}
@keyframes flow{to{stroke-dashoffset:-32}}

.node{position:absolute;transform:translate(-50%,-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-decoration:none;animation:bob 6s ease-in-out infinite}
.node:nth-child(2){animation-delay:-1.2s}.node:nth-child(3){animation-delay:-2.4s}.node:nth-child(4){animation-delay:-3.6s}.node:nth-child(5){animation-delay:-4.8s}
@keyframes bob{50%{transform:translate(-50%,calc(-50% - 12px))}}
.node-core{width:54px;height:54px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 35% 30%, #ffffff, var(--node) 48%, #0a4f9c 85%);
  box-shadow:0 0 16px rgba(43,143,255,.7),0 0 36px rgba(43,143,255,.4),inset 0 0 10px rgba(255,255,255,.7);transition:.2s}
.node-core::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(43,143,255,.4);animation:ring 4s linear infinite}
@keyframes ring{to{transform:rotate(360deg)}}
.node-label{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--dim);background:rgba(255,255,255,.85);border:1px solid var(--line);padding:2px 8px;white-space:nowrap;transition:.2s;border-radius:3px}
.node-label small{display:block;color:var(--faint);font-size:9px;letter-spacing:1px}
.node:hover .node-core{background:radial-gradient(circle at 35% 30%, #ffffff, var(--cyan) 48%, #075a86 85%);box-shadow:0 0 24px rgba(11,179,214,.8),0 0 54px rgba(11,179,214,.5),inset 0 0 12px #fff;transform:scale(1.12)}
.node:hover .node-label{color:var(--copper-hi);border-color:var(--copper)}
.node.self .node-core{width:72px;height:72px;background:radial-gradient(circle at 35% 30%, #ffffff, #19c3e6 48%, #0a6aa8 85%);box-shadow:0 0 26px rgba(25,195,230,.7),0 0 60px rgba(25,195,230,.45),inset 0 0 14px #fff}
.node.self:hover .node-core{box-shadow:0 0 34px rgba(25,195,230,.9),0 0 80px rgba(25,195,230,.6),inset 0 0 16px #fff}

.console{position:relative;z-index:5;max-width:980px;margin:8px auto 0;border:1px solid var(--line);background:#ffffff;font-family:var(--mono);font-size:12px;border-radius:4px;overflow:hidden}
.console .c-head{display:flex;justify-content:space-between;align-items:center;padding:4px 10px;background:#eaf3ff;color:var(--dim);border-bottom:1px solid var(--line);letter-spacing:1px;text-transform:uppercase;font-size:11px}
.console .c-head .dot{color:var(--cyan);animation:blink 1.1s steps(2) infinite}
.console .c-log{padding:8px 10px;height:84px;overflow:hidden;color:var(--phosphor);line-height:1.5}
.console .c-log .ts{color:var(--faint)}
.console .c-log .warn{color:var(--warn)}
.console .c-log .pink{color:var(--copper-hi)}

.wired-foot{position:relative;z-index:5;text-align:center;color:var(--faint);font-size:12px;padding:14px;letter-spacing:1px}
.wired-foot a{color:var(--cyan)}

/* shrine altar */
.altar{text-align:center;padding:26px 18px;border:1px solid var(--copper);border-radius:4px;position:relative;background:radial-gradient(80% 90% at 50% 0%, rgba(43,143,255,.12), transparent 70%),#ffffff;box-shadow:0 4px 16px rgba(40,80,140,.08)}
.altar .halo{font-family:var(--pixel);font-weight:700;font-size:clamp(28px,6vw,46px);color:var(--magenta-soft);text-shadow:0 0 24px rgba(43,143,255,.4);margin:6px 0}
.candles{font-size:26px;letter-spacing:18px;color:var(--copper-hi);animation:flame 2.4s ease-in-out infinite}
@keyframes flame{50%{opacity:.6;letter-spacing:20px}}
.litany{font-family:var(--term);font-size:19px;color:var(--phosphor);line-height:1.4;margin-top:14px}
.quote{border-left:2px solid var(--copper);padding:6px 14px;margin:14px 0;color:var(--dim);font-style:italic}

/* blog entries */
.entry{border:1px solid var(--line);background:var(--panel);margin-bottom:18px;border-radius:4px;overflow:hidden;box-shadow:0 4px 14px rgba(40,80,140,.06)}
.entry .e-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:6px 12px;background:#eaf3ff;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:1px;text-transform:lowercase}
.entry .e-head b{color:var(--node-hi)}
.entry .e-body{padding:14px 16px}
.entry .e-body p{margin:.5em 0;font-style:italic}
.entry.upright .e-body p{font-style:normal}
.tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.tag-row span{font-size:11px;color:var(--copper-hi);border:1px solid #9fc4ee;padding:1px 7px;border-radius:3px}

/* small helpers */
.center{text-align:center}
.dim{color:var(--dim)}
.kao{color:var(--magenta-soft)}
.back-wired{display:inline-block;margin:8px 0 0;font-family:var(--mono);color:var(--copper-hi)}
hr.wire{border:none;border-top:1px dashed var(--line);margin:18px 0}

/* =====================================================================
   PRODUCT MANUAL · GALLERY CARDS · OVERLOAD · GUESTBOOK · OPERATOR FN
   ===================================================================== */
.imgframe{border:1px solid var(--copper);padding:6px;position:relative;border-radius:4px;background:radial-gradient(80% 60% at 50% 30%, #eaf4ff, #ffffff 75%);box-shadow:inset 0 0 0 1px #fff}
.imgframe img{display:block;width:100%;height:auto;image-rendering:pixelated;border-radius:2px}
.imgframe .ph{padding:34px 10px;text-align:center;color:var(--faint);font-family:var(--mono);font-size:12px;line-height:1.7;border:1px dashed var(--line);border-radius:3px}
.imgframe .ph b{color:var(--node-hi)}

.manual{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start}
@media (max-width:680px){.manual{grid-template-columns:1fr}}
.manual .fig{font-size:11px;color:var(--faint);text-align:center;letter-spacing:1px;padding-top:6px}
.spec{width:100%;border-collapse:collapse;font-size:13px}
.spec th,.spec td{border:1px solid var(--line);padding:5px 9px;text-align:left;vertical-align:top}
.spec th{background:#eaf3ff;color:var(--dim);font-weight:400;width:40%;text-transform:lowercase;letter-spacing:1px}
.spec td{color:var(--magenta-soft)}
.manual .blurb{margin-top:12px}
.barcode{height:34px;margin-top:14px;opacity:.85;background:repeating-linear-gradient(90deg,#16273f 0 2px,transparent 2px 3px,#16273f 3px 4px,transparent 4px 7px,#16273f 7px 9px,transparent 9px 11px,#16273f 11px 12px,transparent 12px 15px)}
.barcode-cap{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:3px;text-align:center;margin-top:3px}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.gcard{border:1px solid var(--line);background:#ffffff;overflow:hidden;transition:.18s;position:relative;border-radius:4px;box-shadow:0 4px 12px rgba(40,80,140,.07)}
.gcard:hover{border-color:var(--copper);box-shadow:0 8px 20px rgba(43,143,255,.22);transform:translateY(-3px)}
.gcard .pic{aspect-ratio:3/4;overflow:hidden;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 60% at 50% 35%, #eaf4ff, #ffffff 78%)}
.gcard .pic img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.gcard .pic .ph{color:var(--faint);font-family:var(--mono);font-size:10px;text-align:center;padding:6px;line-height:1.5}
.gcard .meta{padding:8px 10px}
.gcard .nm{font-family:var(--pixel);font-size:14px;color:var(--magenta-soft);line-height:1.1}
.gcard .sr{font-size:11px;color:var(--dim);margin:2px 0 6px}
.gcard .wh{font-size:12px;color:var(--ink);line-height:1.45}
.gcard .hearts{color:var(--copper);font-size:12px;margin-top:6px;letter-spacing:1px}
.gcard .badge{position:absolute;top:6px;right:6px;font-size:9px;font-family:var(--mono);background:rgba(255,255,255,.9);border:1px solid var(--copper);color:var(--copper-hi);padding:1px 5px;letter-spacing:1px;border-radius:2px}

.featured{display:grid;grid-template-columns:170px 1fr;gap:16px;align-items:center;border:1px solid var(--copper);border-radius:4px;background:radial-gradient(80% 90% at 50% 0%, rgba(43,143,255,.1), transparent 70%),#ffffff;padding:16px}
@media (max-width:560px){.featured{grid-template-columns:1fr}}

.overload{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:14px;border:1px solid var(--line);border-radius:4px;background:repeating-linear-gradient(45deg,rgba(43,143,255,.05) 0 10px,transparent 10px 20px),#f4f9ff}
.overload .gfx{width:84px;height:84px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--mono);font-size:11px;color:#fff;text-shadow:0 1px 2px rgba(4,32,63,.6);overflow:hidden;image-rendering:pixelated;transition:.15s;border-radius:3px}
.overload .gfx:hover{border-color:var(--copper);transform:scale(1.08) rotate(-1deg);z-index:2}
.overload .gfx img{width:100%;height:100%;object-fit:cover}
.overload .g1{background:radial-gradient(circle at 50% 40%,#56b0ff,#1763c7)}
.overload .g2{background:repeating-linear-gradient(45deg,#1573e6,#1573e6 6px,#2b8fff 6px,#2b8fff 12px)}
.overload .g3{background:radial-gradient(circle at 50% 40%,#19c3e6,#0e7fa8)}
.overload .g4{background:conic-gradient(from 0deg,#1573e6,#19c3e6,#56b0ff,#1573e6)}
.overload .g5{background:repeating-radial-gradient(circle,#2b8fff 0 4px,#bfe0ff 4px 8px)}
.overload .g6{background:linear-gradient(135deg,#6a6aff,#56b0ff)}

.gb-form{display:grid;gap:10px;max-width:540px}
.gb-row{display:flex;gap:10px;flex-wrap:wrap}
.gb-row > div{flex:1;min-width:140px}
.gb-form label{font-size:12px;color:var(--dim);display:block;margin-bottom:3px;letter-spacing:1px}
.gb-form input,.gb-form textarea,.gb-form select{width:100%;background:#f7fbff;border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:14px;padding:8px 10px;border-radius:3px}
.gb-form input:focus,.gb-form textarea:focus,.gb-form select:focus{outline:none;border-color:var(--node);box-shadow:0 0 10px rgba(43,143,255,.3)}
.gb-form textarea{min-height:74px;resize:vertical}
.gb-btn{font-family:var(--mono);font-size:15px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;border:1px solid var(--copper);color:#fff;padding:9px 16px;justify-self:start;border-radius:3px;background:linear-gradient(180deg,#56b0ff,#1573e6);transition:.15s}
.gb-btn:hover{box-shadow:0 0 20px rgba(43,143,255,.5);filter:brightness(1.05)}
.gb-entry{border:1px solid var(--line);background:#f7fbff;padding:10px 12px;margin-bottom:10px;border-radius:3px}
.gb-entry .gb-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--faint);margin-bottom:4px}
.gb-entry .gb-name{color:var(--node-hi);font-family:var(--pixel);font-size:15px}
.gb-entry .gb-msg{color:var(--ink);white-space:pre-wrap;word-break:break-word}
.gb-entry .gb-mood{color:var(--magenta-soft)}
.gb-note{font-size:12px;color:var(--dim);border:1px dashed var(--line);padding:8px 10px;background:#eef6ff;border-radius:3px}

/* corrupted diary text (blog) */
.help-run{font-family:var(--term);font-size:18px;line-height:1.55;color:var(--copper-hi);word-break:break-word}
.corrupt{color:var(--err);text-shadow:0 0 5px rgba(209,26,94,.3);letter-spacing:.5px;animation:flicker 4s steps(40) infinite}
.jp{color:var(--node-hi);text-shadow:0 0 8px rgba(43,143,255,.35)}
.entry.glitched .e-head{color:var(--err)}

/* operator functions — horizontal scroll (shrine) */
.hscroll{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:12px 12px 6px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(180deg, #f4f9ff, #ffffff);scrollbar-color:var(--node) #dCEbff;scrollbar-width:thin}
.hscroll::-webkit-scrollbar{height:12px}
.hscroll::-webkit-scrollbar-track{background:#e3eefc;border:1px solid var(--line);border-radius:6px}
.hscroll::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--node),var(--cyan));border:1px solid #fff;border-radius:6px}
.hscroll::-webkit-scrollbar-thumb:hover{background:var(--cyan)}
.opfn{flex:0 0 auto;width:152px;height:192px;border:1px solid var(--copper);background:radial-gradient(70% 60% at 50% 35%, #eaf4ff, #ffffff 80%);overflow:hidden;cursor:pointer;transition:.15s;position:relative;display:flex;align-items:center;justify-content:center;border-radius:4px}
.opfn:hover{box-shadow:0 8px 20px rgba(43,143,255,.3);transform:translateY(-3px);border-color:var(--cyan)}
.opfn img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;display:block}
.opfn .ph{color:var(--faint);font-family:var(--mono);font-size:11px;text-align:center;padding:8px;line-height:1.6}
.opfn .ph b{color:var(--node-hi)}

/* home hero — full-width sona scene */
.hero{margin:0 0 20px;line-height:0;text-align:center}
.hero img{display:inline-block;max-width:min(100%,520px);height:auto;image-rendering:pixelated}
.hero .ph{line-height:1.7;padding:52px 12px;text-align:center;color:var(--faint);font-family:var(--mono);font-size:13px;border:1px dashed var(--line);margin:6px;border-radius:4px}
.hero .ph b{color:var(--node-hi)}

/* favicons collection (graphics) */
.favicons{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.fav{display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.fav:hover{filter:drop-shadow(0 0 6px rgba(43,143,255,.6));transform:translateY(-2px) scale(1.08)}
.fav svg{display:block;width:32px;height:32px}

/* real collected graphics (buttons/blinkies/stamps/favicons/overload) */
.collection img{display:inline-block;vertical-align:middle;max-width:170px;max-height:64px;image-rendering:pixelated;transition:.15s}
.collection img:hover{filter:drop-shadow(0 0 6px rgba(43,143,255,.55));transform:scale(1.05)}
.favicons img{display:block;height:32px;width:auto;image-rendering:pixelated;transition:.15s}
.favicons img:hover{filter:drop-shadow(0 0 6px rgba(43,143,255,.6));transform:translateY(-2px) scale(1.08)}
.overload img{display:block;flex:0 0 auto;max-width:180px;max-height:130px;width:auto;height:auto;border-radius:3px;transition:.15s}
.overload img:hover{filter:drop-shadow(0 0 8px rgba(43,143,255,.55));transform:scale(1.06);z-index:2;position:relative}

/* characters sidescroll (shrine) — cards in a horizontal strip */
.hscroll .gcard{flex:0 0 auto;width:158px}

/* =====================================================================
   THEME TOGGLE button
   ===================================================================== */
.theme-toggle{position:fixed;right:14px;bottom:14px;z-index:99990;font-family:var(--mono);font-size:13px;letter-spacing:1px;cursor:pointer;border:1px solid var(--copper);border-radius:20px;padding:7px 14px;background:var(--bg2);color:var(--copper-hi);box-shadow:0 4px 14px rgba(20,40,90,.25);transition:.15s}
.theme-toggle:hover{background:linear-gradient(90deg,var(--node),var(--cyan));color:#fff;box-shadow:0 0 18px rgba(43,143,255,.5)}

/* =====================================================================
   DARK MODE  —  toggle adds .dark to <html>.  base #201f34
   ===================================================================== */
html.dark{
  --paper:#1b1a2e; --bg:#201f34; --bg2:#2a2942; --bg3:#3a3858; --well:#1b1a2e;
  --panel:rgba(42,41,66,.85); --line:#3c3a5e;
  --ink:#ecedfb; --dim:#b8b4d4; --faint:#827ea4;
  --copper:#46a8ff; --copper-hi:#7cc4ff; --wire:#54b6ff;
  --node:#46a8ff; --node-hi:#9bd8ff; --cyan:#5fe2ff; --phosphor:#86ffae;
  --magenta:#46a8ff; --magenta-soft:#b9bef0; --violet:#7aa0ff;
  --warn:#ffcf5a; --err:#ff74a6;
  --argyle-base:#0f2138; --argyle-diamond:rgba(96,162,232,.12); --argyle-line:rgba(120,186,246,.11);
}
html.dark body{
  background:
    radial-gradient(120% 90% at 50% -10%, #2c2a48 0%, #201f34 50%, #17162a 100%),
    repeating-linear-gradient(0deg, rgba(150,150,224,.07) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(150,150,224,.07) 0 1px, transparent 1px 44px),
    #201f34;
}
html.dark body::after{background:repeating-linear-gradient(0deg, rgba(150,150,224,.04) 0 1px, transparent 1px 3px)}
html.dark .win{background:linear-gradient(180deg,#2a2942,#201f34);box-shadow:0 10px 26px rgba(0,0,0,.35)}
html.dark .terminal{background:#141328;color:#bcd0ff;border-top-color:var(--line)}
html.dark .terminal .t-bar{color:var(--copper-hi)}
html.dark .terminal b{color:var(--node-hi)}
html.dark .marquee{background:linear-gradient(180deg,#2a2942,#201f34)}
html.dark .panel{box-shadow:0 4px 14px rgba(0,0,0,.22)}
html.dark .panel.tinted{background:linear-gradient(160deg, rgba(74,163,255,.14), rgba(95,230,255,.07)),#2a2942;border-color:#3f64a0}
html.dark .note{background:rgba(255,207,90,.10);color:#ffcf5a}
html.dark .widget{background:#2a2942;box-shadow:0 4px 14px rgba(0,0,0,.2)}
html.dark .menu-item{background:#2a2942}
html.dark .auth .bootlog{background:#141328}
html.dark #warp{background:#1a182f}
html.dark .node-label{background:rgba(18,17,32,.88)}
html.dark .console{background:#2a2942}
html.dark .console .c-head{background:#262541}
html.dark .altar{background:radial-gradient(80% 90% at 50% 0%, rgba(74,163,255,.16), transparent 70%),#2a2942}
html.dark .featured{background:radial-gradient(80% 90% at 50% 0%, rgba(74,163,255,.14), transparent 70%),#2a2942}
html.dark .entry{box-shadow:0 4px 14px rgba(0,0,0,.2)}
html.dark .entry .e-head{background:#262541}
html.dark .spec th{background:#262541}
html.dark .imgframe{background:radial-gradient(80% 60% at 50% 30%, #2f2d4d, #201f34 75%)}
html.dark .sona-frame{background:radial-gradient(80% 60% at 50% 30%, #2f2d4d, #201f34 75%)}
html.dark .gcard{background:#2a2942;box-shadow:0 4px 12px rgba(0,0,0,.25)}
html.dark .gcard .pic{background:radial-gradient(70% 60% at 50% 35%, #2f2d4d, #201f34 78%)}
html.dark .overload{background:repeating-linear-gradient(45deg,rgba(120,150,255,.05) 0 10px,transparent 10px 20px),#1b1a2e}
html.dark .hscroll{background:linear-gradient(180deg,#262541,#2a2942)}
html.dark .gb-form input,html.dark .gb-form textarea,html.dark .gb-form select{background:#141328;color:var(--ink)}
html.dark .gb-entry{background:#29283f}
html.dark .gb-note{background:#262541}
html.dark .hero{background:#1b1a2e}
html.dark .tag-row span{border-color:#3f64a0}






/* the Wired node-map keeps its original cyber-blue (everything else is periwinkle) */
body.wired-body{
  --copper:#2b8fff; --copper-hi:#1573e6; --wire:#46b4ff;
  --node:#2b8fff; --node-hi:#1573e6; --cyan:#0bb3d6;
  --magenta:#2b8fff; --magenta-soft:#1f74d6;
}


/* sonas out of their frames (home hero, blog manual photo, boot-screen sona) */
.manual .imgframe{border:0;background:none;box-shadow:none;padding:0}
.auth .imgframe.auth-art{border:0;background:none;box-shadow:none;padding:0}


/* personalities — persona images (home) */
.persona-pics{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 2px 10px;scrollbar-color:var(--node) var(--bg3);scrollbar-width:thin}
.persona-pics::-webkit-scrollbar{height:12px}
.persona-pics::-webkit-scrollbar-track{background:var(--bg3);border:1px solid var(--line);border-radius:6px}
.persona-pics::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--node),var(--cyan));border:1px solid #fff;border-radius:6px}
.persona-pics::-webkit-scrollbar-thumb:hover{background:var(--cyan)}
.persona-pics img{flex:0 0 auto;max-width:230px;max-height:150px;width:auto;height:auto;image-rendering:pixelated;border-radius:4px;transition:.15s}
.persona-pics img:hover{filter:drop-shadow(0 0 7px rgba(43,143,255,.5));transform:scale(1.04)}


/* =====================================================================
   AUTHORIZE / BOOT SCREEN — sad_background scene + sona1 overlay (rebuilt)
   ===================================================================== */
.auth-body{
  background:
    url("graphics/sad_background.png") center/cover no-repeat fixed,
    #16122e !important;
  min-height:100vh; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-scene{position:fixed;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;pointer-events:none;z-index:0}
.auth-scrim{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(135% 100% at 50% 58%, transparent 26%, rgba(8,6,22,.66) 100%)}
.auth{position:relative;z-index:2;text-align:center;width:min(620px,94vw);animation:poweron 1s ease-out both}
.auth .wired-title{color:#cfd2f2;opacity:.95;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.auth .mark{color:#ffffff;letter-spacing:5px;text-shadow:0 2px 10px rgba(0,0,0,.7),0 0 28px rgba(120,150,255,.5)}
.auth .mark b{color:#9cc0ff;text-shadow:0 0 28px rgba(90,150,255,.85)}
.auth .sub{color:#bcc0e4;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.auth .menu{margin-top:18px}
.auth .menu-item{background:rgba(18,16,42,.62);border:1px solid rgba(160,170,230,.45);color:#eef0ff;backdrop-filter:blur(3px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.auth .menu-item .tag{color:#aeb2d8}
.auth .menu-item:hover,.auth .menu-item.sel{background:linear-gradient(180deg,rgba(74,124,255,.92),rgba(40,86,220,.94));border-color:#9cc0ff;color:#fff;box-shadow:0 0 24px rgba(70,130,255,.6)}
.auth .menu-item:hover .tag,.auth .menu-item.sel .tag{color:#e7f1ff}
.auth .menu-item.disabled{color:#8a8fb6}
.auth .menu-item.disabled:hover{background:rgba(18,16,42,.62);color:#8a8fb6;border-color:rgba(160,170,230,.45);box-shadow:none}
.auth .hint{color:#c8ccea;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.auth .hint b{color:#9cc0ff}
.auth .micro{color:#9ea3cc;text-shadow:0 1px 3px rgba(0,0,0,.5)}
#warp{background:#0e0a24}


/* shrine password gate (client-side) */
.gate{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(120% 90% at 50% 28%, #1a2748, #0c1430 68%, #070b1a)}
.gate-box{width:min(440px,94vw);text-align:center;border:1px solid #2e4a72;border-radius:6px;background:rgba(14,22,46,.72);backdrop-filter:blur(4px);padding:30px 24px;box-shadow:0 18px 54px rgba(0,0,0,.55);color:#e6ecff}
.gate-box .lock{font-family:var(--pixel);font-weight:700;font-size:clamp(28px,7vw,50px);color:#9cc0ff;text-shadow:0 0 24px rgba(90,150,255,.6);margin:4px 0 8px}
.gate-box .dim{color:#aeb6dc}
.gate-box form{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.gate-box input{background:#0a1330;border:1px solid #2e4a72;color:#eef0ff;font-family:var(--mono);font-size:15px;padding:10px 12px;border-radius:4px;min-width:180px}
.gate-box input:focus{outline:none;border-color:#7cc4ff;box-shadow:0 0 12px rgba(70,130,255,.4)}
.gate-box button{font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;cursor:pointer;border:1px solid #7cc4ff;color:#08122a;background:linear-gradient(180deg,#8fd0ff,#46a8ff);padding:10px 16px;border-radius:4px}
.gate-box button:hover{filter:brightness(1.08);box-shadow:0 0 18px rgba(70,130,255,.5)}
.gate-err{color:#ff8aa8;margin-top:12px;font-size:13px}
.gate-box .hint{color:#8a90b8;font-size:12px;margin-top:14px;letter-spacing:.5px}

/* home single-column widget row */
.widget-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
@media(max-width:680px){.widget-row{grid-template-columns:1fr}}

/* home: sona sidebar + main content */
.home-layout{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start;margin-top:2px}
@media(max-width:620px){.home-layout{grid-template-columns:1fr}}
.home-aside{display:flex;flex-direction:column;gap:16px}
.home-main{min-width:0}
.sona-card{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:linear-gradient(180deg,#ffffff,#f3f8ff);box-shadow:0 6px 18px rgba(40,80,140,.10);max-width:200px;margin:0 auto;width:100%}
html.dark .sona-card{background:#2a2942}
.sona-card img{display:block;width:100%;height:auto}
.sona-card .ph{font-size:42px;text-align:center;padding:46px 0;color:var(--node)}
.sona-card .cap{padding:8px 10px;font-size:12px;color:var(--dim);text-align:center;border-top:1px solid var(--line);letter-spacing:1px;text-transform:lowercase}

/* shrine: carry the dark blue + faves lists */
.shrine .terminal .t-on{color:#2563c9}
html.dark .shrine .terminal .t-on{color:#7aa6ec}
.faves{list-style:none;margin:8px 0 0;padding:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-height:168px;overflow-y:auto;border:1px solid var(--line);border-radius:6px;background:var(--well)}
.faves li{border-left:2px solid #2563c9;padding:7px 10px;background:var(--bg2);border-radius:4px;transition:.15s}
.faves li:hover{background:var(--bg3);transform:translateY(-1px)}
html.dark .faves li{border-left-color:#7aa6ec}
.faves .ti{font-family:var(--pixel);font-weight:600;font-size:14px;color:#2563c9;display:block}
html.dark .faves .ti{color:#7aa6ec}
.faves .by{color:var(--dim);font-size:13px}
.faves .nt{display:block;margin-top:3px;font-size:14px;color:var(--ink)}

/* faves scrollbox */
.faves::-webkit-scrollbar{width:10px}
.faves::-webkit-scrollbar-track{background:var(--well);border-radius:6px}
.faves::-webkit-scrollbar-thumb{background:#2563c9;border-radius:6px;border:2px solid var(--well)}
html.dark .faves::-webkit-scrollbar-thumb{background:#7aa6ec}
.faves{scrollbar-width:thin;scrollbar-color:#2563c9 var(--well)}
@media(max-width:760px){.faves{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.faves{grid-template-columns:repeat(2,1fr)}}

/* music: uniform same-size album covers */
.faves.covers{max-height:430px;align-items:start}
.faves.covers li{border-left:none;border:1px solid var(--line);padding:6px;text-align:center;background:var(--bg2);display:flex;flex-direction:column}
.faves.covers li:hover{transform:translateY(-2px)}
.cover{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:3px;background:linear-gradient(135deg,#cfe1f4,#a9cdf3)}
html.dark .cover{background:linear-gradient(135deg,#2a2942,#3a3858)}
.cover-ph{display:none;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;border-radius:3px;font-size:26px;color:#2563c9;background:linear-gradient(135deg,#cfe1f4,#a9cdf3)}
html.dark .cover-ph{color:#7aa6ec;background:linear-gradient(135deg,#2a2942,#3a3858)}
.faves.covers .ti{font-size:12px;margin-top:6px;color:#2563c9;line-height:1.25;min-height:2.5em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.dark .faves.covers .ti{color:#7aa6ec}

/* tv & games: taller frame, full uncropped cover (music stays square) */
.faves.tall .cover,.faves.tall .cover-ph{aspect-ratio:3/4}
.faves.tall .cover{object-fit:contain;background:var(--well)}
html.dark .faves.tall .cover{background:#15142a}

/* shared guestbook embed (atabook iframe) */
.gb-embed{margin-top:14px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg2);box-shadow:0 4px 14px rgba(40,80,140,.08)}
.gb-embed iframe{display:block;width:100%;height:620px;border:0}

/* escape link on the locked shrine gate */
.gate-back{margin-top:18px}
.gate-back a{color:#9cc0ff;font-family:var(--mono);font-size:13px;letter-spacing:1px;text-decoration:none;border-bottom:1px dashed rgba(156,192,255,.5)}
.gate-back a:hover{color:#cfe0ff;border-bottom-color:#cfe0ff}

/* section-level lock (characters) */
.sec-lock{text-align:center;padding:30px 18px;border:1px dashed var(--line);border-radius:6px;background:var(--well);margin-top:8px}
html.dark .sec-lock{background:#1b1a2e}
.sec-lock .lock{font-family:var(--pixel);font-weight:700;font-size:clamp(24px,5vw,38px);color:#2563c9;text-shadow:0 0 18px rgba(70,130,255,.25);margin:2px 0 6px}
html.dark .sec-lock .lock{color:#7aa6ec}
.sec-lock form{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.sec-lock input{background:var(--bg2);border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:15px;padding:9px 12px;border-radius:4px;min-width:180px}
.sec-lock input:focus{outline:none;border-color:#2563c9;box-shadow:0 0 10px rgba(37,99,201,.35)}
.sec-lock button{font-family:var(--mono);letter-spacing:1px;text-transform:uppercase;cursor:pointer;border:1px solid #2563c9;color:#fff;background:linear-gradient(180deg,#56b0ff,#1573e6);padding:9px 16px;border-radius:4px}
.sec-lock button:hover{filter:brightness(1.08);box-shadow:0 0 16px rgba(70,130,255,.4)}