:root {
  color-scheme: dark;
  --background: #152631;
  --panel: #1b2e39;
  --well: #172a35;
  --ink: #e5e8e6;
  --muted: #9aafb7;
  --gold: #e8bb79;
  --cyan: #9ccdc6;
  --line: #344954;
  --body: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --number: "Bahnschrift", "DIN Alternate", "Consolas", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--ink); font: 13px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
a { color: var(--cyan); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
button, input, select { min-height: 38px; }
input, select, textarea { width: 100%; background: var(--well); border: 1px solid var(--line); border-radius: 5px; color: var(--ink); padding: 8px 10px; }
input:hover, select:hover, textarea:hover { border-color: #526b76; }
input:disabled, select:disabled, textarea:disabled { color: var(--muted); opacity: .65; }
input::placeholder, textarea::placeholder { color: #8097a2; }
input[type=range] { padding: 0; min-height: 25px; accent-color: var(--gold); background: none; border: 0; }
input[type=radio] { width: 14px; min-height: 14px; accent-color: var(--gold); }
textarea { resize: vertical; min-height: 64px; line-height: 1.65; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
h1, h2, p { margin: 0; }
.loading { padding: 50px; text-align: center; color: var(--muted); }
.workbench { max-width: 1480px; padding: 0 28px 28px; margin: auto; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 86px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.identity { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 34px; height: 38px; flex: none; stroke: var(--gold); stroke-width: 1.3; stroke-linejoin: round; }
.brand-caption { display: block; color: var(--gold); font: 10px/1.5 var(--number); letter-spacing: .17em; }
.identity h1 { font-size: 23px; font-weight: 600; line-height: 1.5; letter-spacing: .1em; }
.identity p { margin-left: 19px; padding-left: 22px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.nav-links { display: flex; gap: 22px; font-size: 12px; }
.nav-links a { text-decoration: none; color: var(--muted); }
.nav-links a:hover { color: var(--gold); }
.nav-links span { margin-left: 5px; color: var(--gold); }
.layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.controls { padding: 18px; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; }
.control-heading { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; padding-bottom: 13px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.control-heading::before { content: ''; width: 3px; height: 14px; background: var(--gold); }
.field { display: block; margin-bottom: 12px; }
.field > span, .slider-label { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.field small { font-size: 10px; color: #8da4af; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-row .field { min-width: 0; }
.help { font-size: 11px; line-height: 1.75; color: var(--muted); margin-top: 5px; }
.slider-label output { font: 12px var(--number); font-variant-numeric: tabular-nums; color: var(--gold); }
.group-divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.workspace { min-width: 0; }
.stage { position: relative; background: #233c4a; border: 1px solid #45616f; border-radius: 9px; overflow: hidden; }
.stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: #1c303cd9; border-bottom: 1px solid #49637270; position: relative; z-index: 1; }
.stage-caption { font-size: 11px; color: #b5c7cf; }
.stage-caption strong { font-weight: 600; color: var(--gold); margin-right: 10px; }
.status-pill { font-size: 11px; line-height: 1.6; background: #9ccdc60d; padding: 3px 10px; border: 1px solid #9ccdc64a; border-radius: 4px; color: #c0dfd8; white-space: nowrap; }
.stage canvas { display: block; width: 100%; height: 380px; touch-action: none; }
.stage-hint { font-size: 11px; color: #b5c7cf; text-align: center; padding: 8px 14px 10px; background: #1c303cd9; border-top: 1px solid #49637270; overflow-wrap: anywhere; }
.cup-guide { position: absolute; left: 50%; bottom: 53px; transform: translateX(-50%); max-width: calc(100% - 28px); width: max-content; padding: 8px 16px; background: #152631ee; border: 1px solid #9ccdc660; border-radius: 6px; text-align: center; pointer-events: none; color: var(--ink); }
.cup-guide strong { display: block; font-size: 14px; font-weight: 600; color: var(--gold); }
.cup-guide span { display: block; font-size: 11px; color: #bdd0d5; margin-top: 2px; }
.cup-guide span:empty { display: none; }
.stage[data-cup-state=prepared], .stage[data-cup-state=holding], .stage[data-cup-state=shaking] { border-color: var(--gold); }
.stage[data-cup-state=prepared] .cup-guide, .stage[data-cup-state=holding] .cup-guide { border-color: var(--gold); background: #223640f5; }
.stage[data-cup-state=shaking] .cup-guide, .stage[data-cup-state=revealing] .cup-guide { padding: 5px 13px; }
.workspace:has(.stage[data-cup-state=prepared]) #roll, .workspace:has(.stage[data-cup-state=holding]) #roll { opacity: 1; background: #3b4949; color: var(--gold); border: 1px solid #e8bb7980; }
.material-shelf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding: 12px 0; }
.material-option { position: relative; cursor: pointer; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 9px; align-content: center; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 11px 9px; min-width: 0; }
.material-option:hover { border-color: #708792; }
.material-option:has(input:checked) { background: #30424a; border-color: var(--gold); }
.material-option input { position: absolute; left: 5px; top: 5px; width: 12px; min-height: 12px; margin: 0; opacity: 0; }
.material-option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.material-swatch { grid-row: span 2; width: 28px; height: 30px; border-radius: 5px; transform: rotate(-8deg); border: 1px solid #ffffff80; box-shadow: inset 0 2px 5px #ffffff35, 1px 3px 3px #07182160; display: grid; place-items: center; font: 17px var(--number); }
.material-swatch.crystal { background: linear-gradient(135deg, #ddf1ed, #75a3b9); color: #173642; }
.material-swatch.plastic { background: #e2cba6; color: #273a43; }
.material-swatch.metal { background: linear-gradient(135deg, #eaf0eb, #84979e, #c5cecc); color: #18343e; }
.material-swatch.jelly { background: #e89eaf; border-radius: 9px; color: #512639; }
.material-swatch.music { background: #94704f; color: #fff0cd; }
.material-name { font-size: 12px; font-weight: 500; }
.material-description { font-size: 10px; color: var(--muted); white-space: nowrap; }
.action-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 12px; }
.roll-button { background: var(--gold); color: #192a33; border: 1px solid var(--gold); border-radius: 5px; font-size: 15px; font-weight: 600; padding: 10px 26px; min-height: 44px; letter-spacing: .03em; }
.roll-button:hover:enabled { background: #f2ce96; border-color: #f2ce96; }
.quiet-button { border: 1px solid #435d69; border-radius: 5px; background: #213640; color: #d9e4e5; padding: 7px 12px; }
.quiet-button:hover:enabled { background: #304954; border-color: #6a8792; }
#stop { border-color: #b87871; color: #f0b8a8; }
.audio-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.audio-controls input { width: 65px; }
.audio-controls button { font-size: 11px; min-height: 34px; padding: 4px 9px; }
.quality-select { width: 87px; min-height: 34px; font-size: 11px; padding: 5px 7px; background: var(--panel); }
#audio-status { padding-top: 1px; margin-bottom: 0; font-size: 10px; color: #94aab4; }
.error-message { color: #f0b8a8; font-size: 12px; margin-top: 8px; }
.error-message:empty { display: none; }
.result-panel { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 22px; margin: 16px 0 22px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.total-block { border-right: 1px solid #43565c; padding-right: 16px; align-self: stretch; }
.total-label { font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.total-number { font: 58px/1.2 var(--number); font-variant-numeric: lining-nums tabular-nums; color: var(--gold); margin-top: 4px; }
.total-number.pending { font: 20px/1.5 var(--body); padding-top: 7px; margin-top: 0; }
.critical-tag { display: inline-block; background: #e8bb791c; border: 1px solid #e8bb7940; color: #f2cc94; font-size: 10px; padding: 2px 5px; margin-top: 5px; }
.result-declaration { font-size: 14px; font-weight: 500; margin-bottom: 6px; overflow-wrap: anywhere; }
.raw-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.raw-die { display: inline-flex; align-items: center; gap: 7px; padding: 3px 9px; border: 1px solid #647777; background: #d7d3bd; color: #263942; border-radius: 4px; font-size: 10px; }
.raw-die strong { font: 600 20px var(--number); }
.raw-die.discarded { opacity: .6; border-style: dashed; }
.raw-die.discarded strong { text-decoration: line-through; }
.step-list { padding-left: 19px; margin: 6px 0; color: #bdced3; font-size: 12px; line-height: 1.85; }
.summary-text { display: block; width: 100%; background: #e8bb790b; border-left: 2px solid var(--gold); padding: 8px 11px; font-size: 12px; color: #d8e0df; overflow-wrap: anywhere; margin-top: 10px; }
.result-actions { display: flex; gap: 7px; margin-top: 10px; }
.result-actions button { min-height: 32px; font-size: 11px; }
.history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.history-header h2 { font-size: 15px; font-weight: 600; }
.history-header button { font-size: 11px; min-height: 30px; padding: 4px 9px; }
.history-note { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.history-list { display: grid; gap: 0; }
.history-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.history-item summary { cursor: pointer; display: flex; gap: 12px; align-items: baseline; list-style: none; }
.history-item summary::-webkit-details-marker { display: none; }
.history-item summary::before { content: '+'; color: var(--cyan); font: 16px var(--number); }
.history-item[open] summary::before { content: '−'; }
.history-title { flex: 1; overflow-wrap: anywhere; font-size: 12px; }
.history-time { color: var(--muted); font: 11px var(--number); white-space: nowrap; }
.history-total { font: 25px var(--number); color: var(--gold); }
.history-detail { font-size: 11px; color: var(--muted); padding: 8px 0 5px 24px; overflow-wrap: anywhere; }
.history-detail p { margin-bottom: 5px; }
.history-detail button { font-size: 11px; min-height: 30px; }
.footnotes { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 11px; color: var(--muted); line-height: 1.85; }
.footnotes summary { cursor: pointer; color: var(--cyan); font-size: 12px; }
.footnotes p { margin-top: 8px; }
.empty-history { padding: 10px 0; color: var(--muted); font-size: 12px; }
.embedded .workbench { padding: 0 14px 18px; }
.embedded .masthead { min-height: 64px; margin-bottom: 12px; }
.embedded .brand-mark { width: 27px; height: 30px; }
.embedded .brand-caption { font-size: 8px; }
.embedded .identity h1 { font-size: 19px; }
.embedded .nav-links, .embedded .identity p { display: none; }
.embedded .layout { grid-template-columns: 230px minmax(0, 1fr); gap: 14px; }
.embedded .controls { padding: 13px; }
.embedded .stage canvas { height: 320px; }
.embedded .material-description { display: none; }
.embedded .material-option { display: flex; flex-direction: column; gap: 5px; padding: 9px 3px; }
.embedded .history-section { max-height: 260px; overflow: auto; }
@media (min-width: 1600px) { .stage canvas { height: 440px; } }
@media (max-width: 1100px) {
  .workbench { padding: 0 20px 24px; }
  .layout { grid-template-columns: 248px minmax(0, 1fr); gap: 16px; }
  .controls { padding: 14px; }
  .identity p { display: none; }
  .stage canvas { height: 365px; }
  .material-option { display: flex; flex-direction: column; gap: 4px; padding: 9px 3px; }
  .material-description { display: none; }
  .roll-button { padding: 10px 20px; }
  .audio-controls { margin-left: 0; }
  .embedded .layout { grid-template-columns: 215px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .workbench, .embedded .workbench { padding: 0 12px max(24px, env(safe-area-inset-bottom)); }
  .masthead { gap: 10px; min-height: 76px; margin-bottom: 14px; }
  .identity { gap: 9px; }
  .brand-mark { width: 28px; height: 32px; }
  .brand-caption { font-size: 8px; letter-spacing: .1em; }
  .identity h1 { font-size: 20px; }
  .nav-links { font-size: 10px; gap: 13px; }
  .nav-links span { display: none; }
  .layout, .embedded .layout { display: flex; flex-direction: column; gap: 14px; }
  .workspace { display: contents; }
  .stage { order: 1; width: 100%; }
  .controls { width: 100%; order: 2; padding: 16px; }
  .stage canvas, .embedded .stage canvas { height: 315px; }
  .stage-top { padding: 10px 12px; }
  .stage-caption { font-size: 10px; }
  .stage-hint { font-size: 10px; padding: 8px 10px; }
  .cup-guide { bottom: 51px; padding: 7px 12px; }
  .cup-guide strong { font-size: 13px; }
  .cup-guide span { font-size: 10px; }
  .material-shelf { order: 3; width: 100%; padding: 0; gap: 5px; }
  .material-option, .embedded .material-option { padding: 8px 2px; }
  .material-swatch { width: 24px; height: 26px; font-size: 15px; }
  .material-name { font-size: 11px; }
  .action-bar { order: 4; width: 100%; gap: 7px; position: sticky; bottom: 0; z-index: 3; padding: 10px 10px max(10px, env(safe-area-inset-bottom)); border: 1px solid #526976; border-top-color: #e8bb7970; border-radius: 7px; background: #152631f5; box-shadow: 0 -6px 16px #07182130; }
  .roll-button { font-size: 14px; min-height: 44px; padding: 10px 18px; }
  .quiet-button { padding: 7px 10px; font-size: 12px; }
  .audio-controls { margin-left: 0; gap: 7px; }
  .audio-controls input { width: 60px; }
  #audio-status { order: 5; margin: -6px 0 0; }
  .error-message { order: 6; margin: 0; }
  .result-panel { order: 7; width: 100%; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; padding: 14px; margin: 0 0 6px; }
  .total-block { padding-right: 10px; }
  .total-number { font-size: 46px; }
  .total-number.pending { font-size: 17px; }
  .result-declaration { font-size: 13px; }
  .history-section { order: 8; width: 100%; max-height: 360px; overflow: auto; }
  .field-row { gap: 12px; }
  .footnotes { margin-top: 18px; }
}
@media (max-width: 380px) {
  .nav-links { gap: 9px; }
  .identity h1 { font-size: 18px; }
  .brand-caption { font-size: 7px; }
  .stage canvas, .embedded .stage canvas { height: 290px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }