:root{
  --background:#FFFFFF; --foreground:#0A0A0A; --muted:#FAFAFA; --muted-foreground:rgba(10,10,10,.50);
  --faint:rgba(10,10,10,.32); --border:rgba(10,10,10,.09); --border-strong:rgba(10,10,10,.14);
  --card:#FFFFFF; --accent:#0A0A0A; --instrument:#0E0E0E; --r:12px; --rail:224px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{background:var(--background);color:var(--foreground);font-family:Geist,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
button,input{font:inherit;color:inherit} button{background:none;border:0;cursor:pointer}
a{color:inherit}
canvas{display:block}
.label{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.o{display:block;overflow:hidden;position:relative;--crop:1;flex:0 0 auto}
.o canvas{position:absolute;left:50%;top:50%;width:calc(100% * var(--crop));height:calc(100% * var(--crop));transform:translate(-50%,-50%)}
.still{position:absolute;inset:0;width:100%;height:100%}

/* rail */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);border-right:1px solid var(--border);background:var(--background);
  display:flex;flex-direction:column;padding:18px 14px;z-index:40}
.brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none;padding:4px 8px 18px}
.brand .o{width:26px;height:26px;--crop:2.2}
.brand b{font-weight:inherit}
.areas{display:flex;flex-direction:column;gap:2px}
.areas a{display:flex;align-items:center;justify-content:space-between;text-decoration:none;font-size:14px;color:var(--muted-foreground);
  padding:5px 10px;border-radius:8px;transition:background .15s ease-out,color .15s ease-out}
.areas a:hover{background:var(--muted);color:var(--foreground)}
.areas a.on{background:var(--muted);color:var(--foreground);font-weight:500}
.areas a span{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
/* micro → macro: three levels, each area's own sections under it */
.areas{overflow-y:auto;min-height:0;scrollbar-width:none}
.agroup{font-size:12px;font-weight:500;color:var(--faint);padding:10px 10px 4px}
.agroup:first-child{padding-top:0}
.subs{display:none;flex-direction:column;margin:2px 0 6px 14px;padding-left:4px;border-left:1px solid var(--border)}
.subs.on{display:flex}.subs:empty{display:none!important}
.subs button{text-align:left;font-size:13px;color:var(--muted-foreground);padding:3px 10px;border-radius:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s ease-out,color .15s ease-out}
.subs button:hover{background:var(--muted);color:var(--foreground)}
.subs button.on{color:var(--foreground);font-weight:500}
.subs .sublabel{margin:4px 10px 2px;font-size:12px;color:var(--muted-foreground)}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:7px;padding:10px 4px 0;flex:0 0 auto}
.rail-foot .hint{display:none}
.gpick button{height:24px}
.gpick{display:flex;align-items:center;gap:4px;border:1px solid var(--border-strong);border-radius:10px;padding:4px}
.gpick button{width:28px;height:28px;border-radius:7px;color:var(--muted-foreground)}
.gpick button:hover{background:var(--muted);color:var(--foreground)}
.gpick b{flex:1;font-weight:500;font-size:13px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hint{font-size:12px;color:var(--muted-foreground);display:flex;align-items:center;gap:6px}
kbd{font:inherit;font-size:11px;font-weight:500;border:1px solid var(--border-strong);border-radius:5px;padding:1px 6px;color:var(--muted-foreground);
  transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out}
body.hearing .rail kbd{background:var(--foreground);color:#fff;border-color:var(--foreground)}

main{margin-left:var(--rail);min-height:100vh}
.area{display:none}
.area.on{display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.ahead{padding:clamp(40px,6vw,72px) 0 28px}
.ahead h1{font-size:clamp(32px,4vw,48px);line-height:1.04;font-weight:500;letter-spacing:-.035em;margin-top:10px}
.ahead p{margin-top:12px;color:var(--muted-foreground);font-size:16px;max-width:62ch}
.block{padding:36px 0;border-top:1px solid var(--border)}
.block h2{font-size:24px;font-weight:500;letter-spacing:-.015em}
.lede{margin-top:8px;color:var(--muted-foreground);max-width:62ch}
.grid{display:grid;gap:12px;margin-top:24px}
.g2{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.g6{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.card{border:1px solid var(--border);border-radius:var(--r);background:var(--card);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.stage{background:var(--muted);min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;position:relative;flex:1}
.stage.white{background:#fff}
.stage.dark{background:var(--instrument);color:#fff}
.cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--border)}
.cap b{font-weight:500;font-size:14px}
.cap span{color:var(--muted-foreground);font-size:12px;text-align:right}
.acts{display:flex;gap:6px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 20px;white-space:nowrap;font-size:14px;font-weight:500;
  text-decoration:none;border:1px solid transparent;transition:background .18s ease-out,opacity .18s ease-out,transform .18s ease-out}
.btn.dark{background:var(--foreground);color:#fff}
.btn.light{background:#fff;color:var(--foreground)}
.btn.out{border-color:var(--border-strong);background:var(--background)}
.btn.out:hover{background:var(--muted)}
.btn.ghost:hover{background:var(--muted)}
.btn.sm{padding:6px 12px;font-size:12px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .o{width:20px;height:20px;border-radius:999px;margin-left:-6px;--crop:2.2}
.toast{position:fixed;left:calc(50% + var(--rail) / 2);bottom:24px;transform:translate(-50%,8px);background:var(--foreground);color:#fff;font-size:12px;
  padding:7px 12px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s ease-out,transform .2s ease-out;z-index:90}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:860px){
  :root{--rail:0px}
  .rail{position:sticky;width:auto;height:auto;flex-direction:row;align-items:center;gap:8px;padding:10px 12px;border-right:0;border-bottom:1px solid var(--border);overflow-x:auto}
  .brand{padding:0 6px 0 0}.areas{flex-direction:row}.rail-foot{display:none}.agroup,.subs{display:none!important}
  main{margin-left:0}
  .g2{grid-template-columns:1fr}
}