:root{
  --bg:#060607; --fg:#f4f3f0; --g1:#a3a3ad; --g2:#8a8a94; --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.24);
  --piece:#f4f3f0; --dark:#0e0e12; --ink:#060607;
  --head:'Bricolage Grotesque','Helvetica Neue',system-ui,sans-serif; --body:'Hanken Grotesk','Hiragino Sans','Noto Sans JP',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
input[type=range],input[type=radio]{accent-color:var(--fg)}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--fg)}
main{max-width:980px;margin:0 auto;padding:0 16px 80px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--g2)}
.dim{color:var(--g2)}
.badge{display:inline-block;padding:2px 8px;border:1px solid rgba(255,255,255,.5);border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--fg);vertical-align:middle;margin-left:8px}
.hint{color:var(--g2);font-size:13px}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;max-width:980px;margin:0 auto;padding:22px 16px 10px}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:14px}
.wordmark{font-family:var(--head);font-weight:700;font-size:28px;letter-spacing:-.04em}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--g2)}
.plan-switch{display:flex;border:1px solid var(--line2);border-radius:999px;padding:3px;gap:2px}
.plan-btn{background:transparent;border:0;color:var(--g1);font-family:var(--body);font-weight:600;font-size:13px;padding:6px 14px;border-radius:999px;cursor:pointer}
.plan-btn.is-on{background:var(--fg);color:var(--ink)}
.plan-btn.is-on .badge{border-color:rgba(0,0,0,.4);color:var(--ink)}

/* steps */
.step{padding:40px 0 10px;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.step-head .num{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--fg)}
.h1{font-family:var(--head);font-weight:700;font-size:clamp(34px,6vw,58px);line-height:1.05;letter-spacing:-.035em;margin:0 0 14px}
.h2{font-family:var(--head);font-weight:600;font-size:clamp(24px,4vw,34px);line-height:1.1;letter-spacing:-.03em;margin:0 0 10px}
.lead{color:var(--g1);max-width:640px;margin:0 0 22px}
.actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0}

/* buttons */
.btn{appearance:none;border:1px solid var(--line2);background:transparent;color:var(--fg);font-family:var(--body);font-weight:600;font-size:14px;padding:11px 22px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--fg)}
.btn.primary{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.btn.primary:hover{background:#fff}
.btn.ghost{border-color:transparent;color:var(--g1)}
.btn.ghost:hover{color:var(--fg)}
.btn:disabled{opacity:.4;cursor:default}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

/* upload */
.drop{border:1px dashed var(--line2);border-radius:18px;padding:34px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.is-over{border-color:var(--fg);background:rgba(255,255,255,.03)}
.drop-icon{color:var(--g1);margin-bottom:8px}
.drop-text{font-size:16px}
.drop-text .link{text-decoration:underline;margin-left:4px}
.drop-sub{margin-top:6px}
.files{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:4px}
.files li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:6px 14px;font-size:14px}
.files .fname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files .fsize{font-family:var(--mono);font-size:11px;color:var(--g2)}
.files label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--g1);cursor:pointer}
.files .rm{background:none;border:0;color:var(--g2);cursor:pointer;font-size:16px;line-height:1}
.files .rm:hover{color:var(--fg)}
/* files in -> a short countdown -> it starts by itself */
.autostart{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:14px 0 0;padding:12px 14px 12px 18px;border:1px solid var(--line2);border-radius:14px}
.as-bar{flex:1 1 140px;min-width:120px;height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.as-fill{height:100%;width:0;background:var(--fg)}
.as-text{font-size:14px;color:var(--g1)}
.btn.small{padding:7px 16px;font-size:13px}
#mode-hint{margin:10px 2px 0}
#mode-hint:empty{display:none}

/* pieces */
.pieces{display:flex;flex-wrap:wrap;align-items:flex-start;padding:8px 0 0}
.piece{position:relative;width:280px;height:148px;flex:none;margin-right:-44px;margin-bottom:10px;cursor:pointer;color:var(--ink)}
.piece svg{position:absolute;inset:0;width:280px;height:148px;display:block;pointer-events:none}
.piece .pp{fill:var(--piece);stroke:var(--piece);stroke-width:1}
.piece:hover .pp{stroke:rgba(0,0,0,.35)}
.piece.locked{color:var(--fg)}
.piece.locked .pp{fill:var(--dark);stroke:var(--line2)}
.piece.locked:hover .pp{stroke:var(--fg)}
.pbody{position:absolute;left:0;top:0;width:236px;height:148px;padding:18px 18px 18px 52px}
.plabel{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#5b5b64}
.piece.locked .plabel{color:var(--g2)}
.pvalue{position:absolute;left:52px;right:18px;top:60px;font-family:var(--head);font-weight:600;font-size:26px;letter-spacing:-.035em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pvalue.small{font-size:20px}
.psub{position:absolute;left:52px;top:102px;font-size:12px;color:#5b5b64}
.piece.locked .psub{color:var(--g2)}
.pbadge{position:absolute;right:18px;top:18px;padding:3px 8px;border:1px solid rgba(255,255,255,.5);border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--fg)}
.pswitch{position:absolute;right:18px;top:60px;width:46px;height:26px;border-radius:999px;background:#c9c9cf;transition:background .15s}
.pswitch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ink);transition:left .15s}
.piece.on .pswitch{background:var(--ink)}
.piece.on .pswitch::after{left:23px;background:var(--piece)}
.menu{position:absolute;left:0;top:150px;z-index:20;background:#121216;border:1px solid var(--line2);border-radius:14px;padding:6px;min-width:220px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.menu button{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--fg);font-family:var(--body);font-size:14px;padding:9px 12px;border-radius:9px;cursor:pointer}
.menu button:hover{background:rgba(255,255,255,.08)}
.menu button.is-on{background:var(--fg);color:var(--ink)}
.menu .mtitle{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--g2);padding:6px 12px 4px}
.piece.hasmenu{z-index:30}
.piece.swapping .pp{animation:swap 1.4s ease-in-out infinite}
@keyframes swap{0%,100%{fill:var(--piece)}50%{fill:#b9b9c1}}

/* job / progress */
.job-title{display:flex;align-items:baseline;gap:14px;margin-bottom:16px}
.progress{margin:10px 0 20px}
.bar{height:3px;background:var(--line);border-radius:3px;overflow:hidden}
.fill{height:100%;background:var(--fg);width:0;transition:width .6s ease}
.stage-line{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 8px;font-size:15px}
.stages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.stages li{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--g2);display:flex;align-items:center;gap:6px}
.stages li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--line2)}
.stages li.done{color:var(--g1)}
.stages li.done::before{background:var(--g1)}
.stages li.now{color:var(--fg)}
.stages li.now::before{background:var(--fg);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.result{margin-top:10px}
/* the song (puzzle) page */
.song-nav{margin:0 0 18px}
.back{font-size:13px;color:var(--g1);text-decoration:none}
.back:hover{color:var(--fg)}
.remake{display:flex;align-items:center;gap:14px;margin:14px 0 0}
.remake .bar{flex:1}
.remake .mono{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%;text-transform:none;letter-spacing:.06em}
#job-meta select{background:#0e0e12;color:var(--fg);border:1px solid var(--line2);border-radius:8px;padding:3px 8px;font-family:var(--body);font-size:13px;margin:0 2px;max-width:min(60vw,360px)}
#job-meta select:disabled{opacity:.5}
/* the pitch editor's own page (Pro) */
body.wide main,body.wide .top{max-width:1480px}
.pitch-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 18px;align-items:center;text-decoration:none;border:1px solid var(--line2);border-radius:16px;padding:18px 22px;transition:border-color .15s,background .15s}
.pitch-card:hover{border-color:var(--fg);background:rgba(255,255,255,.03)}
.pc-title{font-family:var(--head);font-weight:600;font-size:22px;letter-spacing:-.02em}
.pc-sub{grid-row:2;color:var(--g1);font-size:13px}
.pc-go{grid-row:1/3;grid-column:2;font-family:var(--head);font-size:28px;color:var(--g1)}
.pitch-card:hover .pc-go{color:var(--fg)}
.versions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.vchip{border:1px solid var(--line2);background:transparent;color:var(--g1);font-family:var(--mono);font-size:11px;letter-spacing:.14em;padding:5px 11px;border-radius:999px;cursor:pointer}
.vchip.is-on{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.player{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
audio{flex:1;min-width:240px;height:40px;filter:invert(1) hue-rotate(180deg) saturate(0)}
.strip{height:16px;margin:16px 0 6px;border-radius:4px;background:#17171c;position:relative;overflow:hidden}
.strip .ch{position:absolute;top:0;bottom:0;background:#5b5b64}
.strip .off{position:absolute;top:0;bottom:0;background:var(--bg)}
.strip .ph{position:absolute;top:0;bottom:0;width:2px;background:var(--fg)}
.nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:14px 0 0}
.nums div{border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.nums dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--g2);margin:0 0 4px}
.nums dd{margin:0;font-family:var(--head);font-weight:600;font-size:22px;letter-spacing:-.02em}
.nums dd small{font-family:var(--body);font-weight:400;font-size:12px;color:var(--g2);margin-left:4px}
.nums .wide{grid-column:span 2}
.nums dd.parts{font-family:var(--body);font-weight:400;font-size:13px;letter-spacing:0;display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--g2)}
.nums dd.parts b{font-weight:600;color:var(--fg);margin-left:6px}
.raw{margin-top:14px}
.raw summary{cursor:pointer}
.raw pre{font-family:var(--mono);font-size:11px;color:var(--g1);white-space:pre-wrap;word-break:break-all;max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:12px;margin-top:8px}
.error{border:1px solid #ff7a6b;color:#ffb3aa;border-radius:12px;padding:12px 14px;margin:12px 0}

/* correct */
.correct textarea{width:100%;background:#0e0e12;border:1px solid var(--line2);border-radius:14px;color:var(--fg);font-family:var(--body);font-size:16px;padding:14px;resize:vertical}
.correct textarea:focus{outline:none;border-color:var(--fg)}
.confirm{border:1px solid var(--line2);border-radius:14px;padding:14px 16px;margin:6px 0 10px}
.say{font-size:16px}
.ask{color:#ffd48a;margin-top:6px}
.history{list-style:none;padding:0;margin:8px 0 0}
.history li{border-top:1px solid var(--line);padding:10px 0;font-size:13px;color:var(--g1)}
.history li .t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--g2);margin-right:10px}

/* notes */
.notes-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.notes-tools label{display:flex;align-items:center;gap:8px}
.notes-tools select{background:#0e0e12;color:var(--fg);border:1px solid var(--line2);border-radius:8px;padding:5px 8px;font-family:var(--body);font-size:13px}
.tools{display:flex;gap:2px;border:1px solid var(--line2);border-radius:999px;padding:3px}
.tool{appearance:none;border:1px solid transparent;background:transparent;color:var(--g1);font-family:var(--body);font-weight:600;font-size:13px;padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
.tool:hover{color:var(--fg)}
.tool.is-on{background:var(--fg);color:var(--ink)}
.tool.is-on kbd{color:var(--ink);border-color:rgba(0,0,0,.35)}
.tool.ghost{border-color:var(--line2)}
.tool.ghost:hover{border-color:var(--fg)}
kbd{display:inline-block;margin-left:6px;padding:1px 5px;border:1px solid var(--line2);border-radius:5px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--g2);vertical-align:1px}
.roll-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#0b0b0e;position:relative;user-select:none}
.roll-wrap canvas{display:block;cursor:default}
#rollkeys{position:absolute;left:0;top:0;pointer-events:none}
.roll-wrap .tip{position:absolute;pointer-events:none;background:#f4f3f0;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:3px 7px;border-radius:6px;white-space:nowrap;z-index:5}
.grid-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:-2px 0 10px;padding:0 4px}
.grid-bar select{background:#0e0e12;color:var(--fg);border:1px solid var(--line2);border-radius:8px;padding:4px 8px;font-family:var(--body);font-size:13px}
.grid-bar .dragnum{font-size:15px;min-width:2.6em}
.grid-bar .val{gap:8px}
.grid-bar .val select{margin-left:2px}
.tool.tiny{padding:2px 8px;font-size:11px;margin-left:4px}
.strip-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:10px 4px 4px}
.sel-info{display:flex;align-items:center;gap:18px;flex-wrap:wrap;min-height:30px}
.ne-title{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--g1)}
.sel-vals{display:flex;gap:16px;flex-wrap:wrap}
.sel-vals[hidden]{display:none}
.val{display:inline-flex;align-items:baseline;gap:6px}
.vl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--g2)}
.dragnum{font-family:var(--head);font-weight:600;font-size:18px;letter-spacing:-.02em;color:var(--fg);cursor:ns-resize;border-bottom:1px dashed var(--line2);padding:0 2px;min-width:3.2em;text-align:right;display:inline-block;user-select:none}
.dragnum:hover,.dragnum.is-drag{border-bottom-color:var(--fg)}
.dragnum.changed{color:#ffd48a}
.cmds{display:flex;gap:6px;flex-wrap:wrap}
.pill{appearance:none;border:1px solid var(--line2);background:transparent;color:var(--fg);font-family:var(--body);font-weight:600;font-size:13px;padding:7px 13px;border-radius:999px;cursor:pointer;white-space:nowrap}
.pill:hover{border-color:var(--fg)}
.pill.ghost{border-color:transparent;color:var(--g1)}
.pill.ghost:hover{color:var(--fg);border-color:var(--line2)}
.pill:disabled{opacity:.35;cursor:default}
.auto-bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:14px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:14px}
.auto-bar .hint{margin-left:auto}
/* jobs */
.jobs{list-style:none;padding:0;margin:0}
.jobs li{display:flex;gap:14px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.jobs li:first-child{border-top:0}
.jobs li a{text-decoration:none;flex:1}
.jobs .st{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--g2)}
.jobs .rm{background:none;border:0;color:var(--g2);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px}
.jobs .rm:hover{color:var(--fg)}
.foot{max-width:980px;margin:0 auto;padding:20px 16px 40px;text-transform:none;letter-spacing:.04em}
/* β mode: BETA badge instead of the Auto/Pro switch, and the invite screen (see app.js "β mode") */
body.booting main,body.booting .foot,body.booting .plan-switch{visibility:hidden}
body.beta .plan-switch{display:none}
body.invite .foot{display:none}
#beta-badge{margin-left:0}
#step-invite .h1{text-wrap:balance}
.invite-form{display:flex;gap:12px;flex-wrap:wrap;max-width:560px}
.invite-input{flex:1 1 260px;min-width:0;background:#0e0e12;border:1px solid var(--line2);border-radius:999px;color:var(--fg);font-family:var(--mono);font-size:14px;line-height:1.6;letter-spacing:.04em;padding:11px 22px}
.invite-input::placeholder{color:var(--g2)}
.invite-input:focus{outline:none;border-color:var(--fg)}
.invite-input.is-bad{border-color:#ff7a6b}
.invite-msg{color:#ffb3aa;font-size:14px;margin:10px 0 0 22px}
.invite-note{max-width:560px;margin:14px 0 0}
.invite-note a{color:var(--g1)}
.invite-note a:hover{color:var(--fg)}
/* the rules / privacy pages (terms.html, privacy.html): plain text in the same look */
.doc>*{max-width:760px}
.doc .h1{font-size:clamp(26px,4.4vw,38px)}
.doc h2{font-family:var(--head);font-weight:600;font-size:22px;line-height:1.2;letter-spacing:-.02em;margin:38px 0 10px}
.doc p,.doc li{color:var(--g1)}
.doc li{margin:4px 0}
.doc ol,.doc ul{padding-left:1.6em;margin:8px 0 14px}
.doc blockquote{margin:0 0 20px;padding:12px 18px;border:1px solid var(--line2);border-radius:14px}
.doc blockquote p{margin:0;color:var(--fg)}
.doc hr{border:0;border-top:1px solid var(--line);margin:30px 0 0}
.doc strong{color:var(--fg)}
.doc table{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:14px}
.doc th,.doc td{text-align:left;vertical-align:top;border:1px solid var(--line);padding:9px 12px;color:var(--g1)}
.doc th{color:var(--fg);font-weight:600;background:rgba(255,255,255,.03)}
.doc-nav{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 26px;font-size:13px}
.doc-nav a{color:var(--g1);text-decoration:none}
.doc-nav a:hover{color:var(--fg)}
@media (max-width:640px){
  .top{flex-direction:column;align-items:flex-start;gap:12px}
  .pieces{justify-content:flex-start}
}

/* ---- 10/5: pieces "not made yet" mark, the pending box + bottom bar, SECTIONS band, chat */
.piece.pending .pp{stroke:var(--ink);stroke-width:3;stroke-dasharray:7 5}
.ppend{position:absolute;right:18px;top:18px;padding:2px 8px;border:1px solid var(--ink);border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink)}
.phint{position:absolute;left:52px;top:122px;font-size:11px;color:#5b5b64;white-space:nowrap}
.menu button{display:flex;align-items:center;justify-content:space-between;gap:14px}
.otag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--g2);white-space:nowrap}
.otag.instant{color:var(--fg);border:1px solid var(--line2);border-radius:999px;padding:0 7px}
.menu button.is-on .otag,.menu button.is-on .otag.instant{color:var(--ink);border-color:rgba(0,0,0,.4)}
.phint .otag{color:#5b5b64}.phint .otag.instant{color:var(--ink);border-color:rgba(0,0,0,.4)}
.pbox{border:1px solid var(--line2);border-radius:16px;padding:14px 16px;margin:14px 0}
.pbox-head{margin-bottom:6px}
.pbox-list{list-style:none;margin:0 0 10px;padding:0}
.pbox-list li{display:flex;align-items:center;gap:10px;justify-content:space-between;border-top:1px solid var(--line);padding:7px 0;font-size:14px}
.pbox-list li:first-child{border-top:0}
.pb-x{appearance:none;background:transparent;border:1px solid var(--line2);color:var(--g1);width:26px;height:26px;border-radius:50%;cursor:pointer;line-height:1;font-size:15px;flex:none}
.pb-x:hover{color:var(--fg);border-color:var(--fg)}
.pbox-foot{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.pbox-err{color:#ffb3aa;margin:8px 0 0;font-size:13px}
.pbox-making{display:flex;flex-direction:column;gap:8px;font-size:14px}
.dock{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:40;width:min(980px,100%);display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#121216;border:1px solid var(--line2);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.6)}
.dock.making{display:block}.dock.making .pbox-making{width:100%}
body.has-dock main{padding-bottom:140px}
.sec-title{font-size:13px;color:var(--fg)}
.manual-mark{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--g1);border:1px solid var(--line2);border-radius:999px;padding:1px 8px}
.sec-help{margin:0 0 22px;max-width:760px}
.secgrid{display:grid;grid-template-columns:64px 1fr;gap:0 10px;align-items:center}
.srl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--g2);text-transform:uppercase}
.secband{position:relative;height:46px;margin-top:20px;background:#17171c;border-radius:6px;cursor:crosshair;touch-action:none;user-select:none}
.secband.empty::after{content:'サビなし（空いた所をドラッグして足す）';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--g2);pointer-events:none}
.sbox{position:absolute;top:0;bottom:0;background:var(--fg);color:var(--ink);border-radius:4px;display:flex;align-items:center;justify-content:center;min-width:6px;cursor:grab}
.sbox.draft{outline:2px dashed var(--fg);outline-offset:2px;background:#e6e5e1}
.sbl{font-family:var(--head);font-weight:600;font-size:13px;pointer-events:none;overflow:hidden}
.sbt{position:absolute;left:0;top:-18px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--g1);white-space:nowrap;pointer-events:none}
.sh{position:absolute;top:0;bottom:0;width:10px;cursor:ew-resize}
.sh.l{left:-3px}.sh.r{right:-3px}
.sh::after{content:'';position:absolute;top:30%;bottom:30%;left:4px;width:2px;background:rgba(0,0,0,.45);border-radius:2px}
.sx{position:absolute;top:2px;right:12px;width:18px;height:18px;border-radius:50%;border:0;background:rgba(0,0,0,.18);color:var(--ink);font-size:12px;line-height:1;cursor:pointer;padding:0}
.sx:hover{background:var(--ink);color:var(--fg)}
.sph{position:absolute;top:-4px;bottom:-4px;width:2px;background:#ff7a6b;pointer-events:none}
.secaxis{position:relative;height:20px;font-family:var(--mono);font-size:10px;color:var(--g2)}
.secaxis span{position:absolute;top:4px;transform:translateX(-1px);white-space:nowrap;border-left:1px solid var(--line2);padding-left:4px;line-height:1.2}
.secaxis span.end{transform:none;border-left:0;border-right:1px solid var(--line2);padding:0 4px 0 0}
.srow{display:grid;grid-template-columns:64px 1fr;gap:0 10px;align-items:start;margin-top:8px}
.srow .srl{padding-top:5px}
.srt{position:relative;background:rgba(255,255,255,.03);border-radius:6px}
.stag{position:absolute;height:22px;line-height:20px;padding:0 6px;font-size:11px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:default;min-width:14px}
.stag.auto{border:1px solid var(--g1);color:var(--g1)}
.stag.user{background:var(--g1);color:var(--ink);border:1px solid var(--g1);font-weight:600}
.sec-foot{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:8px;min-height:30px}
.sec-foot .hint{flex:1;min-width:180px;margin:0}
.legend{font-size:11px;color:var(--g2);display:inline-flex;align-items:center;gap:5px;margin-right:6px}
.legend i{display:inline-block;width:14px;height:10px;border-radius:3px}
.legend i.auto{border:1px solid var(--g1)}.legend i.user{background:var(--g1)}
.chat{max-height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin:0 0 10px;padding:2px}
.msg{display:flex;max-width:100%}
.msg>span{display:inline-block;max-width:min(86%,640px);padding:9px 14px;border-radius:18px;font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.msg.user{justify-content:flex-end}
.msg.user>span{background:var(--fg);color:var(--ink);border-bottom-right-radius:6px}
.msg.ai>span{border:1px solid var(--line2);border-bottom-left-radius:6px}
.msg.ai.asking>span{border-color:#ffd48a;color:#ffd48a}
.msg.ai.err>span{border-color:#ff7a6b;color:#ffb3aa}
.msg.divider{justify-content:center}
.msg.divider>span{border:0;padding:2px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--g2);border-top:1px solid var(--line);border-radius:0;max-width:none}
.msg.typing i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--g1);animation:pulse 1.2s ease-in-out infinite}
.msg.typing i:nth-child(2){animation-delay:.2s}.msg.typing i:nth-child(3){animation-delay:.4s}
.chat-form{display:flex;gap:10px;align-items:flex-end}
.chat-form textarea{flex:1;background:#0e0e12;border:1px solid var(--line2);border-radius:14px;color:var(--fg);font-family:var(--body);font-size:16px;padding:12px 14px;resize:none;max-height:160px}
.chat-form textarea:focus{outline:none;border-color:var(--fg)}
@media (max-width:640px){.secgrid,.srow{grid-template-columns:44px 1fr;gap:0 6px}.sbl{font-size:11px}.sbt{font-size:9px}.piece{margin-right:-44px}}
.sbox.tiny .sbl{display:none}
.sbox.tiny .sbt{display:none;background:#121216;padding:0 4px;border-radius:4px;z-index:6;color:var(--fg)}
.sbox.tiny:hover .sbt,.sbox.tiny:focus .sbt{display:block}
.sbox.tiny .sx{display:none;top:-28px;right:-9px;background:var(--fg);z-index:6}
.sbox.tiny:hover .sx,.sbox.tiny:focus .sx,.sbox.tiny:focus-within .sx{display:block}

.sph{left:0}
.chat-form textarea{height:54px;overflow-y:hidden}

html{color-scheme:dark}

/* ---- PARTS: who is main / harmony / inst (upload list + the puzzle page) */
.parts-head{display:flex;align-items:center;gap:12px;margin:18px 0 6px}
.files.parts li{flex-wrap:wrap;gap:6px 12px}
.files.parts .fname{flex:1 1 180px}
.rbs{display:inline-flex;gap:6px;flex:none}
.rb{appearance:none;border:1px solid var(--line2);background:transparent;color:var(--g1);font-family:var(--body);font-weight:600;font-size:12px;padding:4px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.rb:hover{border-color:var(--fg);color:var(--fg)}
.rb.is-on{background:var(--fg);color:var(--ink);border-color:var(--fg)}
.unsure .rb:not(.is-on){border-style:dashed}
.ptag{font-size:11px;color:var(--g2);white-space:nowrap}
.parts-foot{margin-top:10px}
.parts-note{min-height:1.3em;margin:6px 0 0}
.parts-note.warn{color:#ffb3aa}
.parts-go{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-top:10px}
.roles-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:8px}
.rrow{display:flex;align-items:center;justify-content:space-between;gap:6px 10px;border:1px solid var(--line);border-radius:10px;padding:6px 12px;flex-wrap:wrap}
.rrow.pending{border-style:dashed;border-color:var(--line2)}
.rname{display:flex;align-items:baseline;gap:2px 8px;flex-wrap:wrap;min-width:0;flex:1 1 150px;font-size:14px}
.rn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.rtag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--g2)}
.rtag.dim2{color:var(--g1)}
.ppend2{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--fg);border:1px dashed var(--line2);border-radius:999px;padding:0 7px}
.roles-note{min-height:1.3em;margin:8px 0 0}
@media (max-width:640px){.roles-grid{grid-template-columns:1fr}}
/* ---- the volume page (Pro): volume and pan on the waveform (10/5) */
.vol-lead{max-width:760px}
.vol-warn{margin:0 0 12px;padding:10px 14px;border:1px solid var(--line2);border-radius:12px;font-size:14px;max-width:820px}
.vol-warn b{color:var(--fg)}
.vol-bar{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin:0 0 10px}
.vb-group{display:inline-flex;align-items:center;gap:2px}
.vb-group .mono{margin-right:4px}
.vb-sep{width:1px;height:20px;background:var(--line2)}
.vol-axis-wrap{border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:#0b0b0e;overflow:hidden}
.vol-axis-wrap canvas{display:block}
.vol-wrap{position:relative;overflow-x:hidden;overflow-y:auto;max-height:calc(100vh - 330px);min-height:120px;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:#0b0b0e;user-select:none;touch-action:pan-y}
.vol-wrap canvas{display:block;cursor:crosshair;touch-action:none}
.vol-wrap.readonly canvas{cursor:default;touch-action:pan-y}
.vol-wrap .tip{position:absolute;pointer-events:none;background:#f4f3f0;color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:3px 7px;border-radius:6px;white-space:nowrap;z-index:5}
.vol-ph{position:absolute;top:0;left:0;width:0;border-left:2px solid #f4f3f0;pointer-events:none;z-index:4;display:none;box-shadow:0 0 6px rgba(255,255,255,.5)}
.vol-hs{height:14px;margin:8px 0 0;border-radius:7px;background:#17171c;position:relative;cursor:pointer;touch-action:none}
.vol-thumb{position:absolute;top:2px;bottom:2px;border-radius:5px;background:var(--g2);min-width:14px}
.vol-hs:hover .vol-thumb{background:var(--g1)}
.vol-sel{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;margin:12px 0 4px;padding:12px 14px;border:1px solid var(--line2);border-radius:14px;background:#0e0e12}
.vs-who{display:flex;align-items:baseline;gap:10px;min-width:150px}
.vs-who b{font-family:var(--head);font-size:17px;letter-spacing:-.02em}
.vs-group{display:inline-flex;align-items:center;gap:6px}
.vs-group .vl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--g2);margin-right:2px}
.vs-db{font-family:var(--mono);font-size:13px;min-width:6.4em;text-align:center}
.vs-pans{display:inline-flex;border:1px solid var(--line2);border-radius:999px;overflow:hidden}
.vs-pb{appearance:none;border:0;border-right:1px solid var(--line);background:transparent;color:var(--g1);font-family:var(--mono);font-size:11px;padding:6px 8px;cursor:pointer;min-width:38px}
.vs-pb:last-child{border-right:0}
.vs-pb:hover{color:var(--fg);background:rgba(255,255,255,.06)}
.vs-pb.is-on{background:var(--fg);color:var(--ink);font-weight:700}
.vol-pbox{margin-top:14px}
#vb-info{flex:1 1 220px;min-width:0}
@media (max-width:719px){.vol-sel{display:none!important}.vol-bar #vb-range,.vol-bar #vb-stop{display:none}.vol-lead{font-size:14px}}