/* ============================================================
   KOSOKU OS — operating environment
   ============================================================ */

:root{
  --bg:#0a0908;
  --bg-2:#131110;
  --bg-3:#1a1716;
  --paper:#f5f1e8;
  --paper-dim:#a39d94;
  --paper-dim-2:#5d5750;
  --line:#231f1e;
  --line-2:#2c2725;
  --accent:#ed1717;
  --accent-soft:rgba(237,23,23,.08);
  --accent-mid:rgba(237,23,23,.35);
  --accent-glow:rgba(237,23,23,.55);
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,"Roboto Mono",monospace;
  --jp:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --rail-h:46px;
  --dock-h:96px;
}
body[data-theme="cyan"]{--accent:#00f0ff;--accent-soft:rgba(0,240,255,.08);--accent-mid:rgba(0,240,255,.35);--accent-glow:rgba(0,240,255,.55)}
body[data-theme="lime"]{--accent:#c6ff3d;--accent-soft:rgba(198,255,61,.08);--accent-mid:rgba(198,255,61,.35);--accent-glow:rgba(198,255,61,.55)}
body[data-theme="amber"]{--accent:#ffab00;--accent-soft:rgba(255,171,0,.08);--accent-mid:rgba(255,171,0,.35);--accent-glow:rgba(255,171,0,.55)}
body[data-theme="violet"]{--accent:#b26bff;--accent-soft:rgba(178,107,255,.08);--accent-mid:rgba(178,107,255,.35);--accent-glow:rgba(178,107,255,.55)}
body[data-theme="paper"]{--accent:#f5f1e8;--accent-soft:rgba(245,241,232,.08);--accent-mid:rgba(245,241,232,.35);--accent-glow:rgba(245,241,232,.55)}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--paper);
  font-family:var(--mono);font-size:13px;line-height:1.45;
  overflow:hidden;-webkit-text-size-adjust:100%;overscroll-behavior:none;
  transition:background .4s var(--ease);
}
body.kursor-on,body.kursor-on *{cursor:none !important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--bg)}
[hidden]{display:none !important}

.atmos{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.85;mix-blend-mode:screen}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%)}

/* ── CUSTOM CURSOR ─────────────────────────────────────────── */
.kursor{position:fixed;top:0;left:0;pointer-events:none;z-index:150;will-change:transform}
.kursor.hide{opacity:0}
.kursor-ring{
  position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--accent);opacity:.55;
  transform:translate(-50%,-50%);
  transition:width .2s var(--ease-out),height .2s var(--ease-out),opacity .2s,border-color .3s,background .2s;
}
.kursor.hover .kursor-ring{width:46px;height:46px;opacity:.9;background:var(--accent-soft)}
.kursor.click .kursor-ring{width:22px;height:22px;opacity:1;background:var(--accent-mid)}
.kursor-h,.kursor-v{position:absolute;left:0;top:0;background:var(--paper);transform:translate(-50%,-50%);transition:background .3s;pointer-events:none}
.kursor-h{width:22px;height:1px}
.kursor-v{width:1px;height:22px}
.kursor-dot{
  position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,-50%);
  box-shadow:0 0 8px var(--accent-glow);
  transition:background .3s,box-shadow .3s;
}
.kursor.hover .kursor-h,.kursor.hover .kursor-v{background:var(--accent)}
.kursor.drag .kursor-h,.kursor.drag .kursor-v{background:var(--accent)}
.kursor.drag .kursor-ring{border-color:var(--accent);opacity:1}

/* ── GATE ──────────────────────────────────────────────────── */
.gate{
  position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:24px;
  transition:opacity .45s var(--ease),visibility 0s .45s;
}
.gate.gone{opacity:0;visibility:hidden;pointer-events:none}
.gate-inner{text-align:center;max-width:620px;width:100%}
.gate-mark{
  font-family:var(--jp);
  font-size:clamp(90px,15vw,150px);font-weight:900;line-height:1;
  color:var(--accent);letter-spacing:-.04em;margin-bottom:10px;
  text-shadow:0 0 60px var(--accent-glow);
  animation:gateMarkIn 1s var(--ease) both;
}
@keyframes gateMarkIn{from{opacity:0;transform:scale(.92) rotate(-2deg)}to{opacity:1;transform:none}}
.gate-brand{font-size:12px;letter-spacing:.5em;text-transform:uppercase;color:var(--paper);margin-bottom:8px}
.gate-brand span{color:var(--accent);margin:0 .2em}
.gate-sub{font-size:11px;letter-spacing:.16em;color:var(--paper-dim-2);margin-bottom:44px}
.gate-choices{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:26px}
.gate-btn{
  border:1px solid var(--line-2);padding:26px 14px 22px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:border-color .3s,background .3s,transform .3s var(--ease);
  position:relative;
}
.gate-btn:before,.gate-btn:after{content:"";position:absolute;width:14px;height:14px;border-color:transparent;border-style:solid;transition:border-color .3s}
.gate-btn:before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.gate-btn:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.gate-btn:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.gate-btn:hover:before,.gate-btn:hover:after{border-color:var(--accent)}
.gate-btn.pick{border-color:var(--accent);background:var(--accent-soft)}
.gate-btn.pick:before,.gate-btn.pick:after{border-color:var(--accent)}
.gate-btn-kanji{font-family:var(--jp);font-size:38px;font-weight:900;color:var(--accent);line-height:1;text-shadow:0 0 30px var(--accent-glow)}
.gate-btn-label{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--paper)}
.gate-btn-sub{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim-2)}
.gate-note{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-dim-2);min-height:14px}
.gate-note b{color:var(--accent);font-weight:400}
@media(max-width:520px){
  .gate-choices{grid-template-columns:1fr}
  .gate-btn{padding:20px 16px 18px;flex-direction:row;justify-content:flex-start;gap:16px;text-align:left}
  .gate-btn-kanji{font-size:28px}
}

/* ── BOOT ──────────────────────────────────────────────────── */
.boot{
  position:fixed;inset:0;z-index:190;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;transition:opacity .4s var(--ease),visibility 0s .4s;overflow:hidden;
}
.boot.gone{opacity:0;visibility:hidden;pointer-events:none}
.boot-scan{
  position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 24px var(--accent-glow);
  animation:scanSweep 3.2s linear infinite;
  pointer-events:none;
}
@keyframes scanSweep{0%{top:-4px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.boot:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:repeating-linear-gradient(0deg,var(--accent) 0 1px,transparent 1px 3px);
}
.boot-mark{
  font-family:var(--jp);
  font-size:clamp(72px,12vw,110px);font-weight:900;color:var(--accent);line-height:1;
  text-shadow:0 0 50px var(--accent-glow);
  transition:opacity .2s;
  position:relative;z-index:2;
}
.boot-log{
  font-size:10.5px;letter-spacing:.06em;color:#8a857e;line-height:1.9;
  min-height:130px;width:min(420px,86vw);
  position:relative;z-index:2;
}
.boot-log .l{display:block;opacity:0;transform:translateY(4px);animation:bootLine .28s var(--ease) forwards}
.boot-log .l b{color:var(--accent);font-weight:400}
.boot-log .l i{color:var(--paper-dim);font-style:normal}
@keyframes bootLine{to{opacity:1;transform:none}}
.boot-stats{
  display:flex;gap:20px;font-size:10px;letter-spacing:.14em;color:var(--paper-dim-2);
  text-transform:uppercase;position:relative;z-index:2;
}
.boot-stats b{color:var(--accent);font-weight:400;font-variant-numeric:tabular-nums}
.boot-bar{width:min(420px,86vw);height:2px;background:#1a1a1a;overflow:hidden;position:relative;z-index:2}
.boot-bar i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 14px var(--accent-glow);transition:width .18s linear}
.boot-pct{
  font-size:10px;letter-spacing:.32em;color:var(--paper-dim-2);
  font-variant-numeric:tabular-nums;position:relative;z-index:2;
}

/* ── DESKTOP SHELL ─────────────────────────────────────────── */
.shell{position:fixed;inset:0;z-index:10;height:100dvh}
.rail{
  position:fixed;top:0;left:0;right:0;height:calc(var(--rail-h) + env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-left:14px;padding-right:14px;
  border-bottom:1px solid var(--line);
  background:rgba(10,9,8,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-dim);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
body.focus .rail{transform:translateY(-100%);opacity:0;pointer-events:none}
.rail-l,.rail-r{display:flex;align-items:center;gap:12px;min-width:0}
.rail-c{display:flex;align-items:center;font-size:10px;color:var(--paper-dim-2);letter-spacing:.1em}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 0;transition:opacity .3s}
.brand:hover{opacity:.75}
.brand-kanji{font-family:var(--jp);color:var(--accent);font-size:17px;font-weight:900;line-height:1;text-shadow:0 0 20px var(--accent-glow);transition:color .4s,text-shadow .4s}
.brand-name{font-size:10px;letter-spacing:.3em;color:var(--paper)}
.brand-name i{color:var(--accent);font-style:normal;margin:0 .15em;transition:color .4s}
.rail-sep{width:1px;height:14px;background:var(--line-2)}
.rail-stat{display:flex;align-items:center;gap:8px;white-space:nowrap}
.rail-stat em{font-style:normal;color:var(--paper-dim-2);font-size:9px;letter-spacing:.24em}
.rail-stat b{color:var(--paper);font-weight:400;font-size:10px;letter-spacing:.16em}
.rail-hex{color:var(--paper-dim-2);letter-spacing:.14em;font-size:10px}
.rail-clock{color:var(--paper);letter-spacing:.16em;white-space:nowrap;font-size:10px}
.rail-btn{
  width:28px;height:26px;display:grid;place-items:center;
  font-size:12px;color:var(--paper-dim);border:1px solid transparent;
  transition:color .25s,border-color .25s,background .25s;
}
.rail-btn:hover{color:var(--paper);border-color:var(--line-2)}
.rail-btn.active{color:var(--accent);border-color:var(--accent-mid);background:var(--accent-soft)}
.rail-btn.muted{opacity:.35}
.theme-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);transition:background .4s,box-shadow .4s}

.field{
  position:fixed;top:calc(var(--rail-h) + env(safe-area-inset-top));left:0;right:0;
  bottom:calc(var(--dock-h) + env(safe-area-inset-bottom));z-index:5;overflow:hidden;
  transition:top .35s var(--ease),bottom .35s var(--ease);
}
body.focus .field{top:0;bottom:0}
.field:before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 30% 20%,var(--accent-soft) 0%,transparent 45%),
             radial-gradient(ellipse at 78% 82%,var(--accent-soft) 0%,transparent 45%);
}
.field:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;transition:background-image .5s,opacity .5s}
body[data-wall="grid"] .field:after{opacity:.32;background-image:linear-gradient(var(--accent-mid) 1px,transparent 1px),linear-gradient(90deg,var(--accent-mid) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 50%,#000 15%,transparent 72%)}
body[data-wall="scan"] .field:after{opacity:.5;background-image:repeating-linear-gradient(0deg,var(--accent-mid) 0 1px,transparent 1px 4px)}
body[data-wall="dots"] .field:after{opacity:.55;background-image:radial-gradient(var(--accent) 1px,transparent 1.6px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 78%);mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 78%)}
body[data-wall="stars"] .field:after{opacity:.7;background-image:radial-gradient(1px 1px at 20% 30%,var(--paper) 50%,transparent 100%),radial-gradient(1px 1px at 70% 15%,var(--accent) 50%,transparent 100%),radial-gradient(1.5px 1.5px at 40% 70%,var(--paper) 50%,transparent 100%),radial-gradient(1px 1px at 85% 60%,var(--paper) 50%,transparent 100%),radial-gradient(1px 1px at 10% 80%,var(--accent) 50%,transparent 100%),radial-gradient(1.5px 1.5px at 55% 45%,var(--paper) 50%,transparent 100%),radial-gradient(1px 1px at 30% 10%,var(--paper) 50%,transparent 100%),radial-gradient(1px 1px at 90% 85%,var(--accent) 50%,transparent 100%);background-size:300px 300px,400px 400px,350px 350px,280px 280px,320px 320px,240px 240px,360px 360px,260px 260px;animation:starDrift 80s linear infinite}
@keyframes starDrift{to{background-position:300px 300px,400px 400px,-350px 350px,280px -280px,320px 320px,-240px 240px,360px -360px,260px 260px}}
body[data-wall="waves"] .field:after{opacity:.55;background-image:repeating-linear-gradient(120deg,transparent 0 22px,var(--accent-soft) 22px 23px,transparent 23px 44px),repeating-linear-gradient(-120deg,transparent 0 30px,var(--accent-mid) 30px 31px,transparent 31px 60px);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 25%,transparent 85%);mask-image:radial-gradient(ellipse at 50% 50%,#000 25%,transparent 85%)}
body[data-wall="solid"] .field:after{opacity:0}

.field-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;z-index:1;pointer-events:none;
  color:var(--paper-dim-2);text-align:center;padding:24px;
}
.field-empty-kanji{font-family:var(--jp);font-size:clamp(72px,12vw,120px);font-weight:900;line-height:1;color:var(--accent);opacity:.08;transition:color .4s}
.field-empty-text{font-size:11px;letter-spacing:.34em;color:var(--paper-dim-2)}
.field-empty-sub{font-size:9px;letter-spacing:.24em;color:var(--paper-dim-2);opacity:.7;max-width:340px;line-height:1.8}
.field-empty-sub b{color:var(--accent);font-weight:400}
.field.has-mado .field-empty{display:none}

.snap-ghost{position:absolute;z-index:2;pointer-events:none;border:1px dashed var(--accent);background:var(--accent-soft);box-shadow:0 0 30px var(--accent-mid);transition:all .18s var(--ease);opacity:0}
.snap-ghost.on{opacity:1}

/* ── MADO ──────────────────────────────────────────────────── */
.mado{
  position:absolute;z-index:10;
  display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line-2);
  min-width:280px;min-height:180px;
  transition:border-color .25s,box-shadow .25s,transform .3s var(--ease-out),opacity .28s var(--ease);
  box-shadow:0 24px 60px rgba(0,0,0,.75),0 2px 8px rgba(0,0,0,.5);
}
.mado.enter{animation:madoIn .35s var(--ease-out) both}
@keyframes madoIn{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
.mado.focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-mid),0 24px 60px rgba(0,0,0,.8),0 0 40px var(--accent-soft)}
.mado.minimized{opacity:0;transform:scale(.35);pointer-events:none}
.mado:before,.mado:after{content:"";position:absolute;width:18px;height:18px;pointer-events:none;border-color:transparent;border-style:solid;transition:border-color .25s}
.mado:before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.mado:after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
.mado.focus:before,.mado.focus:after{border-color:var(--accent)}

.mado-head{
  flex:none;height:38px;display:flex;align-items:center;gap:10px;
  padding:0 8px 0 12px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#161311,#0d0b0a);
  cursor:grab;user-select:none;touch-action:none;transition:background .3s;
}
.mado.focus .mado-head{background:linear-gradient(180deg,#1a1414,#0d0b0a)}
.mado-head:active{cursor:grabbing}
.mado-kanji{font-family:var(--jp);font-size:15px;font-weight:900;color:var(--accent);line-height:1;flex:none;text-shadow:0 0 16px var(--accent-glow);transition:color .4s,text-shadow .4s}
.mado-idx{font-size:9px;letter-spacing:.2em;color:var(--paper-dim-2);flex:none}
.mado-title{flex:1;min-width:0;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mado-ctl{display:flex;gap:2px;flex:none}
.mado-btn{width:28px;height:24px;display:grid;place-items:center;font-size:11px;color:var(--paper-dim);border:1px solid transparent;transition:color .2s,border-color .2s,background .2s}
.mado-btn:hover{color:var(--paper);border-color:var(--line-2)}
.mado-btn.expand:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.mado-btn.x:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.mado-body{flex:1;position:relative;overflow:hidden;background:#050508}
.mado-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#050508}
.mado-resize{position:absolute;right:-1px;bottom:-1px;width:24px;height:24px;cursor:nwse-resize;z-index:3;touch-action:none}
.mado-resize:after{content:"";position:absolute;right:3px;bottom:3px;width:14px;height:14px;border-right:2px solid var(--line-2);border-bottom:2px solid var(--line-2);transition:border-color .25s}
.mado.focus .mado-resize:after{border-color:var(--accent)}

/* doc */
.doc{position:absolute;inset:0;overflow:auto;padding:24px 26px 32px;font-family:var(--mono);font-size:12px;line-height:1.9;color:var(--paper-dim)}
.doc h4{margin:0 0 14px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:400}
.doc h4 + h4{margin-top:22px}
.doc p{margin:0 0 14px}
.doc strong{color:var(--paper);font-weight:400}
.doc em{font-style:normal;color:var(--accent)}
.doc kbd{display:inline-block;border:1px solid var(--line-2);padding:1px 7px;font-size:10px;color:var(--paper);background:#131110;margin:0 2px}
.doc hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.doc ul{padding:0;margin:0 0 14px;list-style:none}
.doc ul li{padding-left:16px;position:relative;margin-bottom:6px}
.doc ul li:before{content:"—";position:absolute;left:0;color:var(--accent)}

/* term */
.term{position:absolute;inset:0;display:flex;flex-direction:column;background:#050505;font-family:var(--mono);font-size:12px;line-height:1.6}
.term-out{flex:1;overflow-y:auto;padding:16px 20px 8px;color:#c8c2b8;scrollbar-width:thin}
.term-line{white-space:pre-wrap;word-break:break-word;margin-bottom:2px}
.term-line.cmd{color:var(--paper)}
.term-line.cmd:before{content:"› ";color:var(--accent)}
.term-line.err{color:#ff6b6b}
.term-line.ok{color:var(--accent)}
.term-line.dim{color:var(--paper-dim-2)}
.term-input-row{flex:none;display:flex;align-items:center;gap:8px;padding:10px 20px 16px;border-top:1px solid var(--line)}
.term-prompt{color:var(--accent)}
.term-input{flex:1;background:none;border:0;outline:0;color:var(--paper);font:inherit}
.term-input::placeholder{color:var(--paper-dim-2)}

/* notes */
.notes{position:absolute;inset:0;display:flex;flex-direction:column;background:#050505}
.notes-head{flex:none;padding:10px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-dim-2)}
.notes-head b{color:var(--accent);font-weight:400}
.notes-area{flex:1;background:none;border:0;outline:0;resize:none;color:var(--paper);font:inherit;font-size:12px;line-height:1.8;padding:18px 22px;font-family:var(--mono);scrollbar-width:thin}
.notes-area::placeholder{color:var(--paper-dim-2)}

/* pulse */
.pulse{position:absolute;inset:0;padding:20px 22px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.pulse-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);flex:none}
.pulse-stat{background:var(--bg-2);padding:12px 14px}
.pulse-stat em{display:block;font-style:normal;font-size:9px;letter-spacing:.24em;color:var(--paper-dim-2);text-transform:uppercase;margin-bottom:6px}
.pulse-stat b{display:block;font-size:15px;font-weight:400;color:var(--paper);letter-spacing:.04em}
.pulse-stat b.accent{color:var(--accent)}
.pulse-wave{flex:1;position:relative;border:1px solid var(--line);overflow:hidden;min-height:100px;background:#050505}
.pulse-wave canvas{position:absolute;inset:0;width:100%;height:100%}
.pulse-ticker{flex:none;padding:9px 12px;border:1px solid var(--line);background:#050505;font-size:9px;letter-spacing:.2em;color:var(--paper-dim-2);text-transform:uppercase;white-space:nowrap;overflow:hidden;position:relative}
.pulse-ticker span{display:inline-block;animation:tickScroll 24s linear infinite}
@keyframes tickScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── BROWSER ───────────────────────────────────────────────── */
.browse{position:absolute;inset:0;display:flex;flex-direction:column;background:#0a0a0a}
.browse-bar{
  flex:none;display:flex;align-items:center;gap:6px;padding:8px 10px;
  border-bottom:1px solid var(--line);background:#0d0b0a;
}
.browse-nav{
  width:28px;height:28px;display:grid;place-items:center;color:var(--paper-dim);
  border:1px solid var(--line-2);font-size:12px;transition:color .2s,border-color .2s;
  flex:none;
}
.browse-nav:hover:not(:disabled){color:var(--accent);border-color:var(--accent)}
.browse-nav:disabled{opacity:.35;cursor:not-allowed}
.browse-url{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  background:#050505;border:1px solid var(--line-2);padding:0 10px;height:28px;
  transition:border-color .2s;
}
.browse-url:focus-within{border-color:var(--accent)}
.browse-url-protocol{color:var(--paper-dim-2);font-size:10px;flex:none}
.browse-url-input{
  flex:1;min-width:0;background:none;border:0;outline:0;color:var(--paper);
  font:inherit;font-size:11px;letter-spacing:.02em;
}
.browse-url-input::placeholder{color:var(--paper-dim-2)}
.browse-stage{flex:1;position:relative;background:#050508;overflow:hidden}
.browse-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#fff}
.browse-state{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:32px;text-align:center;
  background:#0a0a0a;
  transition:opacity .3s var(--ease),visibility 0s .3s;
}
.browse-state.gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility 0s 0s}
.browse-state-kanji{font-family:var(--jp);font-size:60px;font-weight:900;color:var(--accent);line-height:1;text-shadow:0 0 40px var(--accent-glow);animation:bootPulse 1.4s ease-in-out infinite}
.browse-state-text{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper-dim)}
.browse-state-sub{font-size:10px;letter-spacing:.14em;color:var(--paper-dim-2);line-height:1.7;max-width:340px}
.browse-state-sub b{color:var(--accent);font-weight:400}
.browse-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;
  width:100%;max-width:520px;margin-top:12px;
}
.browse-tile{
  border:1px solid var(--line-2);padding:14px 12px;text-align:left;
  transition:border-color .2s,background .2s,transform .2s var(--ease);
  display:flex;flex-direction:column;gap:4px;
}
.browse-tile:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.browse-tile-kanji{font-family:var(--jp);font-size:20px;font-weight:900;color:var(--accent);line-height:1}
.browse-tile-t{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper)}
.browse-tile-s{font-size:9px;letter-spacing:.1em;color:var(--paper-dim-2);word-break:break-all}
.browse-spinner{
  width:38px;height:38px;border:2px solid var(--line-2);border-top-color:var(--accent);
  border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── DOCK ──────────────────────────────────────────────────── */
.dock{
  position:fixed;left:0;right:0;bottom:0;height:calc(var(--dock-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);z-index:40;
  display:flex;align-items:center;justify-content:center;gap:12px;
  padding-left:16px;padding-right:16px;
  border-top:1px solid var(--line);
  background:rgba(10,9,8,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
body.focus .dock{transform:translateY(100%);opacity:0;pointer-events:none}
.dock-tile{
  width:72px;height:72px;border:1px solid var(--line-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  position:relative;transition:border-color .25s,background .25s,transform .3s var(--ease-out);
}
.dock-tile:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-4px)}
.dock-tile.open{border-color:var(--accent);background:var(--accent-soft)}
.dock-tile.min .dock-tile-kanji{opacity:.45}
.dock-tile.open:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:18px;height:2px;background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.dock-tile.min:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:8px;height:2px;background:var(--paper-dim-2)}
.dock-tile-kanji{font-family:var(--jp);font-size:24px;font-weight:900;color:var(--paper);line-height:1;transition:color .3s,text-shadow .3s,opacity .3s}
.dock-tile:hover .dock-tile-kanji,.dock-tile.open .dock-tile-kanji{color:var(--accent);text-shadow:0 0 18px var(--accent-glow)}
.dock-tile-idx{font-size:8px;letter-spacing:.2em;color:var(--paper-dim-2)}
.dock-tile-tip{
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(6px);
  background:var(--bg-2);border:1px solid var(--accent);padding:6px 10px;white-space:nowrap;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);
}
.dock-tile:hover .dock-tile-tip{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── LAUNCHER ──────────────────────────────────────────────── */
.launcher{
  position:fixed;top:calc(var(--rail-h) + env(safe-area-inset-top) + 14px);
  left:50%;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));z-index:60;
  animation:launcherIn .22s var(--ease-out) both;
}
@keyframes launcherIn{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%)}}
.launcher-box{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg-2);border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent-mid),0 26px 60px rgba(0,0,0,.85),0 0 50px var(--accent-soft)}
.launcher-prompt{color:var(--accent);font-size:15px;line-height:1}
.launcher-input{flex:1;background:none;border:0;outline:0;color:var(--paper);font:inherit;font-size:14px;letter-spacing:.04em}
.launcher-input::placeholder{color:var(--paper-dim-2)}
.launcher-hint{font-size:9px;letter-spacing:.2em;color:var(--paper-dim-2);border:1px solid var(--line-2);padding:2px 6px}
.launcher-list{margin-top:6px;background:var(--bg-2);border:1px solid var(--line-2);max-height:320px;overflow:auto}
.launcher-list:empty{display:none}
.launcher-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .18s,border-color .18s}
.launcher-item:last-child{border-bottom:0}
.launcher-item:hover,.launcher-item.sel{background:var(--accent-soft);border-color:var(--accent-mid)}
.launcher-item-kanji{font-family:var(--jp);font-size:18px;font-weight:900;color:var(--accent);flex:none;width:24px;text-align:center}
.launcher-item-body{flex:1;min-width:0}
.launcher-item-t{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper);margin-bottom:3px}
.launcher-item-s{font-size:9px;letter-spacing:.14em;color:var(--paper-dim-2)}
.launcher-item-idx{font-size:9px;letter-spacing:.18em;color:var(--paper-dim-2);flex:none}

/* ── SWITCHER ──────────────────────────────────────────────── */
.switcher{position:fixed;inset:0;z-index:100;background:rgba(8,7,6,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);display:flex;align-items:center;justify-content:center;animation:switchIn .18s var(--ease-out) both}
@keyframes switchIn{from{opacity:0}to{opacity:1}}
.switcher-inner{max-width:720px;width:calc(100% - 48px);text-align:center}
.switcher-list{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.switcher-card{min-width:130px;padding:18px 14px;border:1px solid var(--line-2);background:var(--bg-2);display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.switcher-card.sel{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-4px);box-shadow:0 0 24px var(--accent-soft)}
.switcher-card-kanji{font-family:var(--jp);font-size:34px;font-weight:900;color:var(--accent);line-height:1;text-shadow:0 0 24px var(--accent-glow)}
.switcher-card-t{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper)}
.switcher-hint{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-dim-2)}
.switcher-hint b{color:var(--accent);font-weight:400}

.focus-hint{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:45;padding:8px 16px;border:1px solid var(--line-2);background:var(--bg-2);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--paper-dim);animation:focusHintIn .4s var(--ease-out) both}
@keyframes focusHintIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%)}}
.focus-hint b{color:var(--accent);font-weight:400}

.notif{position:fixed;top:calc(var(--rail-h) + env(safe-area-inset-top) + 12px);right:14px;z-index:70;display:flex;flex-direction:column;gap:8px;max-width:340px;pointer-events:none}
body.focus .notif{top:14px}
.notif-card{pointer-events:auto;background:var(--bg-2);border:1px solid var(--line-2);padding:12px 14px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 18px 44px rgba(0,0,0,.7);animation:notifIn .35s var(--ease-out) both;position:relative;overflow:hidden}
.notif-card.out{animation:notifOut .28s var(--ease) forwards}
@keyframes notifIn{from{opacity:0;transform:translateX(20px) scale(.96)}to{opacity:1;transform:none}}
@keyframes notifOut{to{opacity:0;transform:translateX(20px) scale(.96)}}
.notif-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.notif-kanji{font-family:var(--jp);font-size:20px;font-weight:900;color:var(--accent);line-height:1;flex:none;text-shadow:0 0 14px var(--accent-glow)}
.notif-body{flex:1;min-width:0}
.notif-t{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);margin-bottom:4px}
.notif-s{font-size:10px;letter-spacing:.04em;color:var(--paper-dim-2);line-height:1.6;word-break:break-word}
.notif-x{font-size:12px;color:var(--paper-dim-2);padding:0 4px;transition:color .2s;flex:none}
.notif-x:hover{color:var(--accent)}

.ctx{position:fixed;z-index:90;background:var(--bg-2);border:1px solid var(--line-2);min-width:240px;padding:6px;box-shadow:0 22px 54px rgba(0,0,0,.85);animation:ctxIn .16s var(--ease-out) both}
@keyframes ctxIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.ctx-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);cursor:pointer;transition:background .15s,color .15s}
.ctx-item:hover{background:var(--accent-soft);color:var(--accent)}
.ctx-item-k{font-size:9px;letter-spacing:.14em;color:var(--paper-dim-2)}
.ctx-sep{height:1px;background:var(--line);margin:6px 0}

.toast{
  position:fixed;left:50%;bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 20px);
  transform:translateX(-50%) translateY(10px);
  z-index:85;background:var(--bg-2);border:1px solid var(--accent);
  padding:10px 18px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease),border-color .4s;
  white-space:nowrap;box-shadow:0 14px 40px rgba(0,0,0,.7);
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
body.focus .toast{bottom:64px}

/* ═════════════════════════════════════════════════════════════
   MOBILE SHELL — completely separate UI
   ═════════════════════════════════════════════════════════════ */
.mob{position:fixed;inset:0;z-index:20;overflow:hidden;display:flex;flex-direction:column}

.mob-top{
  flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 12px;padding-top:calc(14px + env(safe-area-inset-top));
  position:relative;z-index:5;
}
.mob-top-l{display:flex;align-items:center;gap:10px}
.mob-logo{
  font-family:var(--jp);font-size:22px;font-weight:900;color:var(--accent);line-height:1;
  text-shadow:0 0 20px var(--accent-glow);
}
.mob-brand{font-size:10px;letter-spacing:.3em;color:var(--paper)}
.mob-brand i{color:var(--accent);font-style:normal;margin:0 .15em}
.mob-top-r{display:flex;align-items:center;gap:12px}
.mob-mode{
  border:1px solid var(--line-2);padding:6px 10px;font-size:9px;letter-spacing:.18em;
  color:var(--paper-dim);transition:color .2s,border-color .2s;
}
.mob-mode:hover{color:var(--accent);border-color:var(--accent)}
.mob-clock{font-size:11px;letter-spacing:.16em;color:var(--paper);font-variant-numeric:tabular-nums}

.mob-home{
  flex:1;overflow-y:auto;padding:6px 18px calc(20px + env(safe-area-inset-bottom));
  position:relative;z-index:3;
  -webkit-overflow-scrolling:touch;
}
.mob-greet{padding:20px 4px 26px;border-bottom:1px solid var(--line);margin-bottom:22px}
.mob-greet-top{font-family:var(--jp);font-size:13px;letter-spacing:.14em;color:var(--accent);margin-bottom:10px;font-weight:900}
.mob-greet-big{
  font-family:var(--mono);
  font-size:clamp(24px,7vw,34px);font-weight:900;line-height:1.05;letter-spacing:-.02em;
  color:var(--paper);margin-bottom:10px;text-transform:uppercase;
}
.mob-greet-line{font-size:11px;letter-spacing:.06em;color:var(--paper-dim-2);line-height:1.7}

.mob-cards{display:flex;flex-direction:column;gap:12px}

.mob-card{
  display:flex;align-items:stretch;gap:0;border:1px solid var(--line-2);
  background:linear-gradient(90deg,var(--bg-2),#0a0908);
  min-height:96px;text-align:left;position:relative;overflow:hidden;
  transition:border-color .25s,transform .25s var(--ease-out);
  animation:cardIn .45s var(--ease-out) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mob-card:active{transform:scale(.98)}
.mob-card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  opacity:0;transition:opacity .25s;
}
.mob-card:active:before{opacity:1}
.mob-card-kanji{
  flex:none;width:96px;display:grid;place-items:center;
  font-family:var(--jp);font-size:44px;font-weight:900;color:var(--accent);line-height:1;
  text-shadow:0 0 30px var(--accent-glow);
  border-right:1px solid var(--line);
  background:radial-gradient(circle at center,var(--accent-soft) 0%,transparent 75%);
}
.mob-card-body{
  flex:1;min-width:0;padding:16px 18px 14px;
  display:flex;flex-direction:column;gap:6px;justify-content:center;
}
.mob-card-idx{font-size:9px;letter-spacing:.24em;color:var(--paper-dim-2)}
.mob-card-t{
  font-family:var(--mono);font-size:15px;font-weight:900;letter-spacing:.06em;
  color:var(--paper);text-transform:uppercase;line-height:1.15;
}
.mob-card-s{font-size:11px;letter-spacing:.02em;color:var(--paper-dim);line-height:1.5}

.mob-foot{
  padding:28px 4px 4px;text-align:center;
  font-size:9px;letter-spacing:.3em;color:var(--paper-dim-2);text-transform:uppercase;
}

/* mobile module view */
.mob-view{
  position:fixed;inset:0;z-index:50;
  background:var(--bg);display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .4s var(--ease-out);
}
.mob-view.on{transform:translateY(0)}
.mob-view-bar{
  flex:none;height:calc(50px + env(safe-area-inset-top));
  padding:0 12px;padding-top:env(safe-area-inset-top);
  display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--line);background:var(--bg);
  position:relative;z-index:2;
}
.mob-back{
  border:1px solid var(--line-2);padding:7px 12px;font-size:10px;
  letter-spacing:.18em;color:var(--paper);flex:none;
  transition:color .2s,border-color .2s;
}
.mob-back:hover{color:var(--accent);border-color:var(--accent)}
.mob-view-title{
  flex:1;min-width:0;text-align:center;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--paper);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.mob-view-title:before{
  content:"";width:6px;height:6px;background:var(--accent);flex:none;
  box-shadow:0 0 8px var(--accent-glow);border-radius:50%;
}
.mob-view-spacer{width:56px;flex:none}
.mob-view-body{flex:1;position:relative;overflow:hidden;background:#050508}
.mob-view-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mob-view-body .doc,
.mob-view-body .term,
.mob-view-body .notes,
.mob-view-body .pulse,
.mob-view-body .browse{position:absolute;inset:0}

.mob-toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(10px);
  z-index:80;background:var(--bg-2);border:1px solid var(--accent);
  padding:9px 16px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);
  white-space:nowrap;
}
.mob-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* mobile pulse tweaks */
.mob .pulse{padding:16px}
.mob .pulse-grid{grid-template-columns:1fr 1fr}
.mob .pulse-stat b{font-size:14px}

/* small desktop tweaks */
@media(max-width:820px){
  .kursor{display:none !important}
}
@media(max-width:820px){
  .rail-c{display:none}
  .brand-name{display:none}
  .rail-stat em{display:none}
  .rail{padding:0 10px}
  .dock{gap:8px;padding-left:10px;padding-right:10px}
  .dock-tile{width:58px;height:58px}
  .dock-tile-kanji{font-size:20px}
  .dock-tile-tip{display:none}
}

/* ── v0.5 ──────────────────────────────────────────────────── */
:focus-visible{outline:1px solid var(--accent);outline-offset:2px}
.field:before{background:
  radial-gradient(380px circle at var(--mx,50%) var(--my,50%),var(--accent-soft),transparent 70%),
  radial-gradient(ellipse at 30% 20%,var(--accent-soft) 0%,transparent 45%),
  radial-gradient(ellipse at 78% 82%,var(--accent-soft) 0%,transparent 45%)}
.dock-tile{will-change:transform;transition:transform .14s var(--ease-out),border-color .2s,color .2s,background .2s,box-shadow .2s,opacity .2s}
.mado.minimized{transform:scale(.06)}
.mado.focus .mado-head{box-shadow:inset 0 -1px 0 var(--accent-mid)}
.launcher-list{max-height:min(52vh,420px);overflow-y:auto;scrollbar-width:thin}
.game{position:absolute;inset:0}
.mob-view-body .game{position:relative;width:100%;height:100%;min-height:100%}
.game-load{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:16px;background:#050508;color:var(--paper-dim-2);font-size:10px;letter-spacing:.3em;pointer-events:none;transition:opacity .45s var(--ease)}
.game-load i{width:26px;height:26px;border:2px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:gspin .8s linear infinite}
.game.ready .game-load{opacity:0}
@keyframes gspin{to{transform:rotate(360deg)}}
.doc code{color:var(--paper);background:#131110;padding:1px 6px;border:1px solid var(--line-2);font-size:11px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}}