@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,SOFT,WONK,wght@9..144,100..900,0..100,0..1&family=Zen+Old+Mincho:wght@400;700;900&family=Zen+Kaku+Gothic+New:wght@500;700;900&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root{
  --washi:#F5EFE2; --washi-2:#EFE6D2; --paper:#FBF7EC;
  --sumi:#1C1B17; --sumi-soft:#3A382F;
  --shu:#C8402A; --shu-deep:#9E2E1D;
  --ai:#24365E; --ai-soft:#3E548C;
  --stone:#8B867A; --hair:#D8D0BC; --line:#C9BFA6;
  --good:#2E7D4F; --warn:#B07C1E;
  --shadow:0 1px 0 #fff inset, 0 12px 30px -18px rgba(28,27,23,.45);
  --r:14px;
  --disp:"Fraunces","Zen Old Mincho",Georgia,serif;
  --goth:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--sumi); background:var(--washi);
  font-family:var(--goth); font-size:16px; line-height:1.6;
  background-image:
    radial-gradient(1200px 500px at 85% -10%, #fff8 0%, transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(28,27,23,.045) 27px 28px);
  min-height:100vh;
}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}
.skip{position:absolute;left:12px;top:-60px;background:var(--sumi);color:var(--washi);padding:10px 16px;border-radius:10px;z-index:50;transition:top .2s}
.skip:focus{top:12px;color:var(--washi)}
:focus-visible{outline:3px solid var(--ai);outline-offset:2px;border-radius:6px}

/* masthead */
.masthead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;max-width:1060px;margin:0 auto;padding:28px 20px 6px}
.mast-left{display:flex;gap:18px;align-items:flex-start}
.vertical{writing-mode:vertical-rl;font-family:var(--goth);letter-spacing:.35em;color:var(--stone);font-size:13px;border-left:1px solid var(--line);padding-left:10px;min-height:120px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin:0 0 6px;display:flex;align-items:center;gap:8px}
.kicker .dot{width:9px;height:9px;border-radius:50%;background:var(--shu);display:inline-block;box-shadow:0 0 0 4px #c8402a22}
h1{font-family:var(--disp);font-weight:560;font-variation-settings:"opsz" 100,"SOFT" 60,"WONK" 1;font-size:clamp(40px,7vw,76px);line-height:.95;margin:0;letter-spacing:-.02em}
h1 em{font-style:italic;font-weight:340}
h1 .kanji{font-family:"Zen Old Mincho",serif;font-weight:900;color:var(--shu);font-size:.82em;margin-left:.1em}
.sub{max-width:56ch;color:var(--sumi-soft);margin:10px 0 0}
.sub strong{color:var(--sumi)}
.hanko{background:var(--shu);color:var(--paper);font-family:"Zen Old Mincho",serif;font-weight:900;font-size:26px;line-height:1.05;
  padding:12px 13px;border-radius:8px;box-shadow:var(--shadow);transform:rotate(4deg);text-align:center;flex:none}
.hanko::after{content:"weight parade";display:block;font-family:var(--mono);font-size:8px;letter-spacing:.18em;margin-top:6px;opacity:.85}

/* tabs */
.tabs{display:flex;gap:8px;max-width:1060px;margin:14px auto 0;padding:0 20px}
.tab{font-family:var(--mono);font-size:13px;letter-spacing:.06em;border:1.5px solid var(--sumi);background:transparent;color:var(--sumi);
  border-radius:999px;padding:8px 16px;cursor:pointer}
.tab.is-on{background:var(--sumi);color:var(--washi)}
.tab:hover{border-color:var(--shu);color:var(--shu)}
.tab.is-on:hover{color:var(--washi);border-color:var(--sumi)}

/* layout */
#app{max-width:1060px;margin:0 auto;padding:16px 20px 60px}
.stage-wrap{background:var(--paper);border:1.5px solid var(--sumi);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.stage-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.route-label{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin:0}
.readout{font-family:var(--mono);font-size:12.5px;margin:0;color:var(--sumi-soft)}
.readout .sep{margin:0 8px;color:var(--line)}
.route{position:relative;min-height:230px;padding:34px 22px 40px;overflow:hidden}
.route-line{position:absolute;left:0;right:0;top:62%;border-top:2px dashed var(--line)}
.route-line::before,.route-line::after{content:"";position:absolute;top:-7px;width:10px;height:10px;border-radius:50%;background:var(--washi);border:2px solid var(--line)}
.route-line::before{left:14px}.route-line::after{right:14px}
.parade{display:flex;flex-wrap:wrap;align-items:baseline;gap:.02em;min-height:120px;font-family:var(--disp)}
.parade .ch{display:inline-block;line-height:1;transform-origin:50% 90%;animation:march .5s ease-out;transition:font-variation-settings .25s linear, color .3s, transform .3s}
.parade .ch.space{width:.45em}
.parade .ch.hit{color:var(--shu)}
.parade .ch.ghost{opacity:.28}
@keyframes march{0%{transform:translateY(14px) rotate(-2deg)}60%{transform:translateY(-7px)}100%{transform:translateY(0)}}
.empty{position:absolute;inset:34px 22px 40px;display:grid;place-items:center;text-align:center;color:var(--stone);font-family:var(--disp);font-size:22px;font-style:italic;margin:0}
.empty span{font-size:13px;font-style:normal;font-family:var(--goth)}
.beatbar{position:relative;height:8px;background:var(--washi-2);border-top:1px solid var(--line)}
.beatfill{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,var(--ai-soft),var(--ai))}
.beatticks{position:absolute;inset:0;display:flex;justify-content:space-between;padding:0 2px}
.beatticks i{width:2px;background:#24365e33}
.promptline{margin:0;padding:10px 16px;font-family:var(--mono);font-size:13px;border-top:1px dashed var(--line);background:#24365e0d}
.promptline .todo{color:var(--shu);font-weight:600}
.promptline .done{color:var(--good)}
.score{margin-left:10px;font-weight:600}

/* typing card */
.typecard{margin:16px 0;background:var(--sumi);color:var(--washi);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.tlabel{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#CFC7AF}
.tlabel span{text-transform:none;letter-spacing:0;opacity:.75}
#typebox{width:100%;margin-top:10px;background:#26241D;color:var(--washi);border:1.5px solid #4a4636;border-radius:10px;
  padding:14px;font-size:19px;line-height:1.5;font-family:var(--goth);resize:vertical;min-height:86px}
#typebox:focus{border-color:var(--washi);outline:3px solid var(--shu);outline-offset:2px}
.typerow{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:13.5px;border-radius:999px;padding:10px 18px;cursor:pointer;border:1.5px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn.solid{background:var(--washi);color:var(--sumi);border-color:var(--washi)}
.btn.solid:hover{background:#fff}
.btn.verm{background:var(--shu);border-color:var(--shu);color:#fff}
.btn.verm:hover{background:var(--shu-deep)}
.btn.ghost{background:transparent;color:var(--washi);border-color:#6b6552}
.btn.ghost:hover{border-color:var(--washi)}
.typecard kbd,.panel kbd,.foot kbd{background:#ffffff22;border:1px solid currentColor;border-radius:5px;padding:0 6px;font-size:11.5px;font-family:var(--mono)}
.panel kbd,.foot kbd{background:var(--sumi);color:var(--washi);border-color:var(--sumi)}
.typecard .btn kbd{background:#00000033}

/* panels */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
.panel{background:var(--paper);border:1.5px solid var(--sumi);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.panel h2{font-family:var(--disp);font-size:21px;margin:0 0 10px;font-weight:600}
.panel h2 .num{background:var(--sumi);color:var(--washi);font-family:var(--goth);font-size:12px;border-radius:6px;padding:3px 8px;margin-right:8px;vertical-align:middle}
.ctl{margin:12px 0}
.ctl label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sumi-soft)}
.ctl output{color:var(--shu);font-weight:600}
.ctl input[type=range]{width:100%;accent-color:var(--shu);height:28px}
.ctl input[type=checkbox]{width:26px;height:26px;accent-color:var(--shu)}
.ctl select{width:100%;font:inherit;padding:9px;border-radius:9px;border:1.5px solid var(--sumi);background:#fff}
.ctl.row2{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.mini{font-size:11px;color:var(--stone);text-transform:none}
.hint{font-size:13px;color:var(--sumi-soft);border-top:1px dashed var(--line);padding-top:10px}
.hint code{font-family:var(--mono);font-size:12px}
.stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 0;padding:0}
.stats li{background:var(--washi-2);border:1px solid var(--line);border-radius:10px;padding:8px 4px;text-align:center}
.stats b{display:block;font-family:var(--disp);font-size:24px}
.stats span{font-family:var(--mono);font-size:10.5px;color:var(--sumi-soft)}
.pairs{border:0;margin:0 0 6px;padding:0}
.pairs legend{font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--sumi-soft);padding:0;margin-bottom:8px}
.pair{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:9px 10px;margin-bottom:8px;cursor:pointer}
.pair:hover{border-color:var(--sumi)}
.pair.is-on{border-color:var(--shu);box-shadow:0 0 0 2px #c8402a33}
.pair .swatch{font-size:22px;line-height:1;flex:none;width:52px;text-align:center;border-right:1px dashed var(--line);padding-right:8px}
.pair .pname{font-weight:700;font-size:14px}
.pair .pfonts{font-family:var(--mono);font-size:11px;color:var(--stone)}
.gifrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.gifrow .btn.ghost{color:var(--sumi);border-color:var(--sumi)}

/* footer */
.foot{margin-top:18px}
.foot details{background:var(--paper);border:1.5px solid var(--sumi);border-radius:var(--r);padding:12px 16px}
.foot summary{cursor:pointer;font-family:var(--mono);font-size:13.5px}
.keygrid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px 14px;padding:10px 0 0;margin:10px 0 0;border-top:1px dashed var(--line);font-size:13.5px}
.colophon{font-family:var(--mono);font-size:12px;color:var(--stone);text-align:center;margin:14px 0 0}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--sumi);color:var(--washi);padding:12px 20px;border-radius:999px;font-family:var(--mono);font-size:13.5px;box-shadow:0 10px 30px -10px #000a;z-index:60}
.toast.err{background:var(--shu-deep)}

@media (max-width:900px){.panels{grid-template-columns:1fr}.keygrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){
  body{font-size:15px}
  .masthead{padding-top:20px}
  .vertical{display:none}
  h1{font-size:44px}
  .route{min-height:190px;padding:24px 14px 30px}
  .keygrid{grid-template-columns:1fr 1fr}
  #typebox{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.parade .ch{animation:none;transition:none}html{scroll-behavior:auto}}