:root{color-scheme:dark;--bg:#11131b;--card:#191d29;--line:#303649;--text:#f2f0fa;--muted:#aeb5cb;--accent:#c4b5fd;font-family:system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 72% 0,#25203e,transparent 55%),var(--bg);color:var(--text)}[hidden]{display:none!important}
header{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 max(20px,calc((100% - 1080px)/2))}
.brand{color:var(--text);text-decoration:none;font-size:21px;font-weight:750}.brand span{background:var(--accent);color:#211842;border-radius:8px;padding:3px 9px;margin-right:6px}.badge,.eyebrow{color:var(--accent);letter-spacing:.16em;font-size:11px;font-weight:750}.badge{border:1px solid var(--line);border-radius:30px;padding:5px 9px}
main{max-width:1120px;margin:auto;padding:45px 20px 30px}.intro{margin-bottom:30px}.intro p:not(.eyebrow){color:var(--muted);max-width:54ch;line-height:1.6}h1{font-size:clamp(38px,6vw,68px);letter-spacing:-.065em;line-height:1.05;margin:10px 0 14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin:0 0 18px}.section-title,.section-title>div:first-child{display:flex;gap:10px;align-items:center}.section-title span{color:var(--accent);font-size:12px}.section-title h2,.section-title h3{margin:0;font-size:17px}.split{justify-content:space-between;flex-wrap:wrap}
.source{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:16px}#drop{flex:1 1 320px;min-width:0;border:1px dashed #746790;border-radius:10px;padding:14px;cursor:pointer;background:#211e32;overflow-wrap:anywhere}#drop:hover,#drop.over{background:#32294b}#drop small{display:block;color:var(--muted);margin-top:4px}#file{position:absolute;width:1px;height:1px;opacity:0}#drop:has(+ #file:focus-visible){outline:2px solid var(--accent)}
.actions{display:flex;gap:8px;flex-wrap:wrap}button{border:1px solid transparent;background:var(--accent);color:#211842;border-radius:8px;padding:9px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.secondary{background:#252a3a;border-color:var(--line);color:var(--text)}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
audio{display:block;width:min(100%,500px);height:36px;margin-top:14px}.feedback{color:var(--muted);font-size:13px}.feedback p{margin:12px 0 0}.feedback progress{width:100%;margin-top:8px;accent-color:var(--accent)}
.roll{margin-top:15px;max-height:310px;overflow:auto;background:#111522;border:1px solid var(--line);border-radius:8px}.roll svg{display:block}#empty{margin:0;padding:60px 16px;text-align:center;color:var(--muted)}.note-title{margin-top:17px;margin-bottom:8px}.table-wrap{overflow:auto;max-height:340px}table{width:100%;border-collapse:collapse;text-align:left;font-size:13px;min-width:540px}th,td{padding:7px 8px;border-bottom:1px solid var(--line)}th{position:sticky;top:0;background:var(--card);color:var(--muted);z-index:1}td input{width:80px;background:#111522;color:var(--text);border:1px solid var(--line);border-radius:6px;padding:5px;font:inherit}td button{padding:5px 8px}footer{font-size:12px;color:var(--muted)}footer a{color:var(--accent)}