:root{color-scheme:light;font-family:system-ui,-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;color:#172b45;background:#f6f8fb;font-size:16px}*{box-sizing:border-box}body{margin:0}main{max-width:1320px;margin:auto;padding:12px 20px}h1{font-size:25px;margin:8px 0 14px}h2{font-size:18px;margin:0 0 8px}p{line-height:1.45;margin:8px 0}button,select{font:inherit;border:1px solid #b7c6d9;background:#fff;border-radius:6px;padding:7px 12px;color:#173a65;cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ef9e39;outline-offset:2px}button:disabled{opacity:.45;cursor:default}.tabs,.controls,.slider{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.tabs button{flex:1;min-width:160px}.tabs [aria-pressed=true],#play{background:#155ca1;border-color:#155ca1;color:#fff}.controls{margin:9px 0}.controls label{font-size:14px}.controls label[hidden]{display:none}.slider{margin:10px 0}.slider label{min-width:155px;font-weight:600;font-variant-numeric:tabular-nums}.slider input{flex:1;min-width:140px;accent-color:#d8781c}.workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(260px,1fr);gap:16px}.visual,.ledger{background:#fff;border-radius:10px;padding:14px;min-width:0}.visual svg{display:block;width:100%;max-height:315px}.visual p{font-size:16px;color:#155ca1;min-height:24px}.ledger{display:flex;flex-direction:column}.term{min-height:58px;font-size:22px;color:#d16c0c;line-height:1.4;font-variant-numeric:tabular-nums}.term small{font-size:14px;color:#526176;display:block}.running{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:#eaf6f1;border-radius:8px;padding:12px}.running strong{font-size:30px;color:#08795f}.running span{font-size:15px}.ledger #total{font-size:15px;min-height:23px}.ledger svg{width:100%;max-height:140px;margin-top:auto}.equation{font-size:18px;text-align:center;padding:8px;background:#edf2f8;border-radius:6px}.note{font-size:14px;color:#536476}svg text{font-family:inherit;fill:#253b55;font-size:18px}svg .muted{fill:#8c99a7}svg .selected{fill:#0a947b;font-weight:700}.embed-mode header{display:none}.embed-mode main{padding:8px 14px}.embed-mode{font-size:15px}.embed-mode h2{font-size:17px}.embed-mode .visual svg{max-height:290px}.embed-mode .visual,.embed-mode .ledger{padding:10px 12px}.embed-mode .controls{margin:7px 0}.embed-mode .slider{margin:8px 0}.embed-mode button{padding:6px 10px}.embed-mode .equation{font-size:16px;margin:7px 0}.embed-mode .note{font-size:13px}.embed-mode .term{font-size:21px;min-height:54px}.embed-mode .running strong{font-size:27px}@media(max-width:650px){main{padding:10px}.workspace{grid-template-columns:1fr}.tabs{gap:5px}.tabs button{min-width:0;font-size:13px;padding:8px 5px}.controls button{font-size:14px}.slider label{min-width:130px}.visual svg{min-height:190px}.ledger svg{max-height:150px}.equation{font-size:14px;overflow-x:auto}.note{font-size:13px}.term{min-height:48px}.running{padding:10px}.visual p{font-size:14px}}
[hidden]{display:none!important}#surface-wrap{position:relative}#surface{height:325px;width:100%;border-radius:8px;overflow:hidden;background:#f8fbff}#surface canvas{width:100%;height:100%;display:block;cursor:grab}#surface canvas:active{cursor:grabbing}.view-tools{position:absolute;right:4px;top:4px;z-index:2;display:flex;gap:5px}.view-tools button{font-size:12px;padding:4px 7px;background:#ffffffdf}.drag-hint{position:absolute;bottom:3px;left:8px;color:#60758a;font-size:12px}.embed-mode #surface{height:295px}.embed-mode .visual svg[hidden]{display:none}#surface-wrap:not([hidden])~svg{display:none}@media(max-width:650px){#surface,.embed-mode #surface{height:270px}}
#slice-profile{height:92px;width:100%;flex:none;margin:0}.workspace #slice-profile text{font-size:12px}main:not([data-mode="dice"]) .ledger .term{min-height:0;font-size:19px;line-height:1.2}main:not([data-mode="dice"]) .ledger .term small{font-size:13px}main:not([data-mode="dice"]) .ledger .running{padding:7px;gap:6px}main:not([data-mode="dice"]) .ledger .running strong{font-size:23px}main:not([data-mode="dice"]) .ledger #result{max-height:100px;flex:none}main:not([data-mode="dice"]) .ledger #total{font-size:14px;margin:5px 0}

#roll-label{min-width:105px}#roll-surface{height:325px;width:100%;border-radius:8px;overflow:hidden;background:#102132}#roll-surface canvas{display:block;width:100%;height:100%;cursor:grab}#roll-surface canvas:active{cursor:grabbing}.embed-mode #roll-surface{height:295px}main[data-mode="roll"] .view-tools button{background:#163448e8;color:#d4e8f3;border-color:#537082}main[data-mode="roll"] .drag-hint{color:#a5c6d4}main[data-mode="roll"] #play{background:#9a5a18;border-color:#9a5a18}@media(max-width:650px){#roll-surface,.embed-mode #roll-surface{height:290px}}
