:root{
  --bg:#14141c;--panel:#1c1c27;--line:#2a2a3a;--pink:#ff3b6b;--mint:#39ffb0;--yellow:#ffd23b;
  --paper:#f6efdc;--ink:#2a2418;--muted:#8a8aa0;
  --mono:"Courier Prime","Courier New",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 70% -10%,#2a1530 0,transparent 60%),radial-gradient(800px 500px at 0% 100%,#0f2a24 0,transparent 60%),var(--bg);color:#e8e8f0;font-family:var(--mono);min-height:100vh}
.shell{display:flex;min-height:100vh}
aside{width:260px;background:rgba(20,20,28,.85);border-right:1px solid var(--line);padding:18px;overflow:auto;flex-shrink:0}
.side-head{display:flex;justify-content:space-between;align-items:center}
aside h2{font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--mint);margin:0}
#sessions{list-style:none;padding:0;margin:16px 0}
#sessions li{padding:10px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;cursor:pointer;position:relative;transition:.15s}
#sessions li:hover{border-color:var(--mint)}
#sessions li.active{border-color:var(--pink);box-shadow:0 0 12px rgba(255,59,107,.25)}
#sessions .t{font-size:13px;font-weight:700;padding-right:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sessions .m{font-size:11px;color:var(--muted);margin-top:4px}
#sessions .del{position:absolute;right:6px;top:6px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px}
#sessions .del:hover{color:var(--pink)}
main{flex:1;max-width:900px;margin:0 auto;padding:24px 20px 40px;min-width:0}
header{text-align:center;position:relative}
h1{font-size:clamp(40px,8vw,72px);margin:8px 0 0;font-weight:900;letter-spacing:-2px;color:#fff;text-shadow:0 0 24px rgba(255,59,107,.4)}
.blink{color:var(--pink);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
#subtitle{color:var(--mint);margin:4px 0 20px;min-height:1.2em}
.drawer-btn{display:none;position:absolute;left:0;top:0}
.warn{background:#3a1a22;border:1px solid var(--pink);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.hidden{display:none!important}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;text-align:center}
canvas{width:100%;height:140px;display:block;border-radius:12px;background:#0c0c12}
.meter{display:flex;align-items:center;gap:10px;margin:12px 0 16px}
.meter-bar{flex:1;height:8px;background:#0c0c12;border-radius:6px;overflow:hidden}
#meterFill{height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--yellow),var(--pink));transition:width .08s}
#meterLabel{font-size:12px;width:150px;text-align:right;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.rec{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:18px;font-weight:700;color:#fff;background:var(--pink);border:0;border-radius:999px;padding:18px 34px;cursor:pointer;box-shadow:0 0 0 0 rgba(255,59,107,.6),0 8px 24px rgba(255,59,107,.35);transition:transform .1s}
.rec:active{transform:scale(.93)}
.rec .dot{width:14px;height:14px;border-radius:50%;background:#fff}
.rec.on{animation:pulse 1.4s infinite;background:#e0204f}
.rec.on .dot{border-radius:3px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,107,.6)}70%{box-shadow:0 0 0 22px rgba(255,59,107,0)}100%{box-shadow:0 0 0 0 rgba(255,59,107,0)}}
.hint{font-size:12px;color:var(--muted);margin:12px 0 0}
#debug{color:var(--yellow);min-height:1.2em}
.train{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:16px}
.train h3{margin:0 0 10px;font-size:14px;letter-spacing:2px;text-transform:uppercase;color:var(--mint)}
.train h3 small{display:block;letter-spacing:0;text-transform:none;color:var(--muted);font-weight:400;margin-top:4px}
.train-row{display:flex;gap:8px}
.train-row input{flex:1;font-family:var(--mono);background:#0c0c12;color:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px}
#teachBtn.on{background:var(--pink);color:#fff;border-color:var(--pink);animation:pulse 1.4s infinite}
#vocab{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.vempty{font-size:12px;color:var(--muted)}
.vchip{display:inline-flex;align-items:center;gap:6px;background:#0c0c12;border:1px solid var(--line);border-radius:999px;padding:4px 6px 4px 12px;font-size:13px}
.vchip b{cursor:pointer}
.vchip i{color:var(--muted);font-size:11px;font-style:normal}
.vchip button{background:none;border:0;color:var(--muted);cursor:pointer}
.vchip button:hover{color:var(--pink)}
.vchip.training{border-color:var(--pink);box-shadow:0 0 10px rgba(255,59,107,.4)}
.picky{display:flex;align-items:center;gap:6px;font-size:13px}
.picky input{accent-color:var(--mint);width:110px}
kbd{border:1px solid var(--line);border-radius:4px;padding:1px 5px;background:#0c0c12}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0}
.spacer{flex:1}
select,.chip{font-family:var(--mono);background:var(--panel);color:#e8e8f0;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;cursor:pointer;transition:.15s}
.chip:hover,select:hover{border-color:var(--mint);color:var(--mint)}
.chip:active{transform:scale(.95)}
.chip.danger:hover{border-color:var(--pink);color:var(--pink)}
.toggle{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.toggle input{display:none}
.toggle span{width:36px;height:20px;background:#333;border-radius:20px;position:relative;transition:.2s}
.toggle span::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:.2s}
.toggle input:checked+span{background:var(--mint)}
.toggle input:checked+span::after{left:19px}
.paper{background:var(--paper);color:var(--ink);border-radius:6px;padding:28px 24px 28px 78px;min-height:260px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.5);
  background-image:linear-gradient(90deg,transparent 64px,rgba(255,59,107,.35) 64px,rgba(255,59,107,.35) 66px,transparent 66px),repeating-linear-gradient(transparent 0 29px,rgba(60,90,160,.18) 29px 30px);
  line-height:30px;font-size:17px}
.chunk{position:relative;margin:0;animation:fadein .4s ease}
.chunk time{position:absolute;left:-70px;width:56px;text-align:right;font-size:11px;color:#a08f70}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.empty{color:#a49880;font-style:italic;margin:0}
#interim{color:#8b8170;font-style:italic}
#interim:not(:empty)::after{content:"▌";animation:blink 1s steps(1) infinite;color:var(--pink);font-style:normal}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.stats div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.stats b{display:block;font-size:26px;color:var(--mint)}
.stats div:last-child b{color:var(--yellow)}
.stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
footer{margin-top:28px;font-size:12px;color:var(--muted);text-align:center;line-height:1.6}
footer a{color:var(--pink)}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(100px);background:#000;border:1px solid var(--mint);color:var(--mint);padding:10px 18px;border-radius:10px;font-size:14px;transition:.3s;z-index:50;max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}
#scrim{display:none}
@media(max-width:760px){
  aside{position:fixed;left:0;top:0;bottom:0;z-index:30;transform:translateX(-100%);transition:.25s}
  aside.open{transform:none}
  #scrim.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:20}
  .drawer-btn{display:inline-block}
  header{padding-top:36px}
  .rec{width:100%;justify-content:center;padding:22px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .paper{padding-left:60px;font-size:15px}
  .paper{background-image:linear-gradient(90deg,transparent 50px,rgba(255,59,107,.35) 50px,rgba(255,59,107,.35) 52px,transparent 52px),repeating-linear-gradient(transparent 0 29px,rgba(60,90,160,.18) 29px 30px)}
  .chunk time{left:-56px;width:44px;font-size:10px}
  #meterLabel{width:110px}
}