:root { --ink:#172033; --muted:#657089; --line:#d9e1eb; --canvas:#f4f7fb; --card:#fff; --primary:#196dc2; --primary-dark:#104e91; --accent:#00a6a6; --warning:#fff0cf; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Noto Sans JP",sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-width:320px; background:var(--canvas); }
button,input { font:inherit; }
button { cursor:pointer; }
.page-shell { width:min(100% - 24px, 900px); margin:0 auto; padding:28px 0 48px; }
.hero { padding:8px 4px 22px; }
.eyebrow { margin:0 0 5px; color:var(--accent); font-size:.78rem; font-weight:800; letter-spacing:.1em; }
h1,h2,h3 { margin:0; line-height:1.3; }
h1 { font-size:clamp(1.6rem,5vw,2.35rem); }
h2 { font-size:clamp(1.18rem,3.8vw,1.5rem); }
h3 { font-size:.95rem; }
.hero > p:last-child,.panel-note,.result-message,.fine-print,.page-footer { color:var(--muted); line-height:1.65; }
.hero > p:last-child { margin:10px 0 0; }
.warning-card,.control-card,.result-card,.chart-card,.history-card,.model-card,.trace-card { margin-bottom:16px; padding:20px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 5px 20px rgb(36 68 104 / 6%); }
.warning-card { border-color:#e7c778; background:var(--warning); color:#754500; }
.warning-card p { margin:5px 0 0; line-height:1.6; }
.section-heading { display:flex; gap:16px; align-items:start; justify-content:space-between; }
.no-save,.chart-caption,.model-id { color:var(--muted); font-size:.78rem; white-space:nowrap; }
.setting-fieldset { min-width:0; margin:20px 0 16px; padding:0; border:0; }
.setting-fieldset legend { margin-bottom:8px; font-weight:800; }
.setting-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.setting-option { min-height:46px; display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid #b6c9dc; border-radius:10px; background:#f8fbff; color:var(--primary-dark); font-weight:800; }
.setting-option:has(input:checked) { border-color:var(--primary); background:#e5f3ff; box-shadow:inset 0 0 0 1px var(--primary); }
.setting-option input { accent-color:var(--primary); }
.input-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; }
.field-label { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0; font-size:.9rem; font-weight:800; }
.field-label span { color:var(--muted); font-size:.75rem; font-weight:500; }
.text-input { width:100%; min-height:46px; padding:8px 11px; border:1px solid #adc1d7; border-radius:9px; color:var(--ink); font-variant-numeric:tabular-nums; }
.seed-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.seed-lock { display:flex; align-items:center; gap:6px; min-height:46px; padding:0 10px; border:1px solid #a8bdd3; border-radius:9px; background:#fff; color:var(--primary-dark); font-size:.78rem; font-weight:800; white-space:nowrap; }
.seed-lock input { accent-color:var(--primary); }
.seed-help { grid-column:1 / -1; margin-top:-2px; }
.secondary-button,.run-button { min-height:46px; padding:8px 14px; border-radius:9px; font-weight:800; }
.secondary-button { border:1px solid #a8bdd3; background:#fff; color:var(--primary-dark); }
.secondary-button:hover { border-color:var(--primary); background:#f0f7ff; }
.run-button { width:100%; margin-top:18px; border:1px solid #135da8; background:var(--primary); color:#fff; }
.run-button:hover { background:var(--primary-dark); }
.run-button:disabled { cursor:wait; opacity:.65; }
.cancel-button { width:100%; margin-top:8px; }
.run-status { min-height:1.5em; margin:9px 0 0; color:var(--muted); font-size:.83rem; }
.debug-mode-option { display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--primary-dark); font-size:.84rem; font-weight:800; }
.debug-mode-option input,.trace-events-only input { accent-color:var(--primary); }
.field-help { margin:5px 0 0; color:var(--muted); font-size:.75rem; line-height:1.5; }
.result-message { margin:14px 0; font-size:.9rem; }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0; }
.summary-grid div { padding:10px; background:#f5f8fc; border-radius:10px; }
.summary-grid dt { color:var(--muted); font-size:.72rem; }
.summary-grid dd { margin:4px 0 0; font-size:1rem; font-weight:800; line-height:1.35; font-variant-numeric:tabular-nums; }
.result-details { margin-top:12px; border-top:1px solid var(--line); }
.result-details-summary { padding:10px 2px 2px; color:var(--primary-dark); cursor:pointer; font-size:.84rem; font-weight:800; }
.result-details-content { display:grid; gap:14px; padding-top:12px; }
.result-details-content section { min-width:0; }
.result-details-content h3 { color:var(--ink); font-size:.84rem; }
.result-detail-note { margin:3px 0 7px; color:var(--muted); font-size:.7rem; }
.result-role-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:0; }
.result-role-grid div { padding:7px 8px; border:1px solid var(--line); border-radius:7px; background:#fbfdff; }
.result-role-grid dt { color:var(--muted); font-size:.68rem; }
.result-role-grid dd { margin:3px 0 0; color:var(--ink); font-size:.76rem; font-weight:800; line-height:1.25; font-variant-numeric:tabular-nums; }
.history-hint { margin:10px 0 12px; padding:10px 12px; border-left:4px solid var(--primary); border-radius:7px; background:#edf7ff; color:var(--primary-dark); font-size:.86rem; line-height:1.5; }
.chart-wrap { margin-top:12px; overflow:hidden; border:1px solid var(--line); border-radius:10px; background:linear-gradient(#fbfdff,#f7faff); }
.chart-wrap svg { display:block; width:100%; height:auto; }
.chart-line { fill:none; stroke:#196dc2; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.zero-line { stroke:#9eabbc; stroke-width:1; stroke-dasharray:4 4; }
.axis-label { fill:#657089; font-size:11px; }
.empty-state { margin:0; padding:48px 16px; color:var(--muted); text-align:center; }
.panel-note { margin:12px 0; font-size:.86rem; }
.history-list { display:grid; gap:7px; max-height:480px; overflow:auto; padding-right:2px; }
.history-item { min-height:45px; padding:0 10px; border-left:4px solid #8ba9c6; background:#f7faff; border-radius:7px; }
.history-summary { display:grid; grid-template-columns:112px 100px 1fr; gap:10px; align-items:center; min-height:45px; cursor:pointer; list-style:none; }
.history-summary::-webkit-details-marker { display:none; }
.history-details { margin:0 0 8px 122px; padding:8px 10px; color:var(--muted); font-size:.78rem; line-height:1.55; border-top:1px solid var(--line); background:#fff; }
.history-details ul { margin:0; padding-left:18px; }
.battle-detail { display:grid; gap:4px; }
.battle-detail strong { color:var(--ink); font-weight:800; }
.battle-games { margin:0; padding-left:22px; }
.battle-games li { padding-left:2px; }
.battle-outcome { margin-left:0; display:grid; gap:2px; }
.history-bonus_start { border-left-color:#dd9e28; }
.history-at_start { border-left-color:#196dc2; }
.history-upper_at_start { border-left-color:#9d5bc2; background:#fbf6ff; }
.history-game { font-size:.86rem; font-variant-numeric:tabular-nums; }
.history-title { font-weight:800; }
.history-detail { color:var(--muted); font-size:.82rem; }
.model-source-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.source-card { padding:0; border:1px solid var(--line); border-radius:10px; background:#f8fbff; }
.source-card summary { padding:12px; color:var(--primary-dark); cursor:pointer; font-size:.86rem; font-weight:800; }
.source-card p { padding:0 12px; }
.source-card .model-examples { padding-bottom:12px; color:var(--ink); font-size:.75rem; }
.source-card p { margin:7px 0 0; color:var(--muted); font-size:.78rem; line-height:1.5; }
.source-published { border-top:3px solid #3c8bce; }
.source-estimated { border-top:3px solid #d79c2e; }
.source-simplified { border-top:3px solid #a05bc0; }
.source-difference { border-top:3px solid #6d7a8b; }
.fine-print { margin:14px 0 0; font-size:.76rem; }
.model-calibration { margin:14px 0 0; color:var(--primary-dark); font-size:.82rem; font-weight:800; }
.trace-card { border-color:#b8d8ce; }
.trace-filters { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; align-items:end; margin-top:14px; }
.trace-filters .field-label,.trace-page-size { display:grid; gap:5px; align-items:stretch; font-size:.78rem; }
.trace-filters .text-input,.trace-page-size .text-input { min-height:40px; padding:7px 9px; }
.trace-filters select[multiple] { min-height:116px; padding:4px; }
.trace-events-only { display:flex; align-items:center; min-height:40px; gap:6px; padding:7px 9px; border:1px solid #adc1d7; border-radius:9px; color:var(--primary-dark); font-size:.78rem; font-weight:800; }
.trace-table-wrap { overflow:auto; margin-top:14px; border:1px solid var(--line); border-radius:10px; }
.trace-table { width:100%; min-width:920px; table-layout:fixed; border-collapse:collapse; font-size:.76rem; }
.trace-table th,.trace-table td { padding:8px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.45; overflow-wrap:anywhere; }
.trace-table th { color:var(--ink); background:#f5f8fc; font-weight:800; }
.trace-table th:nth-child(1),.trace-table td:nth-child(1) { width:7%; white-space:nowrap; }
.trace-table th:nth-child(2),.trace-table td:nth-child(2) { width:18%; }
.trace-table th:nth-child(3),.trace-table td:nth-child(3) { width:11%; }
.trace-table th:nth-child(4),.trace-table td:nth-child(4) { width:10%; }
.trace-table th:nth-child(5),.trace-table td:nth-child(5) { width:16%; }
.trace-table th:nth-child(6),.trace-table td:nth-child(6) { width:20%; }
.trace-table th:nth-child(7),.trace-table td:nth-child(7) { width:6%; white-space:nowrap; }
.trace-table th:nth-child(8),.trace-table td:nth-child(8) { width:7%; white-space:nowrap; }
.trace-table th:nth-child(9),.trace-table td:nth-child(9) { width:5%; white-space:nowrap; }
.trace-table tbody tr[role="button"] { cursor:pointer; }
.trace-table tbody tr[role="button"]:hover,.trace-table tbody tr[role="button"]:focus-visible,.trace-table tbody tr.is-selected { background:#eaf7ff; outline:none; }
.trace-table td:nth-child(5),.trace-table td:nth-child(6) { max-width:220px; }
.trace-pagination { display:flex; justify-content:flex-end; align-items:end; gap:8px; margin-top:12px; }
.trace-pagination span { min-width:56px; padding-bottom:10px; color:var(--muted); text-align:center; font-size:.78rem; font-variant-numeric:tabular-nums; }
.trace-pagination .secondary-button { min-height:40px; padding:7px 11px; }
.trace-detail { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.trace-detail-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:7px; margin:10px 0 0; }
.trace-detail-grid div { min-width:0; padding:8px 9px; border-radius:8px; background:#f5f8fc; }
.trace-detail-grid dt { color:var(--muted); font-size:.7rem; }
.trace-detail-grid dd { margin:3px 0 0; overflow-wrap:anywhere; color:var(--ink); font-size:.78rem; font-weight:800; }
.page-footer { padding:4px; font-size:.78rem; text-align:center; }
.notice { padding:12px; border-radius:8px; }
.warning { color:#754500; background:var(--warning); }
@media (max-width:760px) { .setting-grid { grid-template-columns:repeat(3,1fr); } .summary-grid { grid-template-columns:repeat(3,1fr); } .trace-filters { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:520px) { .page-shell { width:min(100% - 16px,900px); padding-top:16px; } .warning-card,.control-card,.result-card,.chart-card,.history-card,.model-card,.trace-card { padding:16px; } .section-heading { gap:8px; } .no-save,.chart-caption { font-size:.7rem; } .input-grid,.trace-filters { grid-template-columns:1fr; gap:7px; } .setting-option { min-height:42px; font-size:.86rem; } .summary-grid { grid-template-columns:repeat(2,1fr); } .summary-grid div:last-child { grid-column:auto; } .result-role-grid { grid-template-columns:repeat(2,1fr); } .history-summary { grid-template-columns:104px 70px 1fr; gap:7px; font-size:.83rem; } .history-game { font-size:.76rem; } .history-detail { font-size:.74rem; } .history-details { margin-left:0; } .model-source-grid { grid-template-columns:1fr; } .trace-table { min-width:640px; font-size:.71rem; } .trace-table th,.trace-table td { padding:7px 6px; } .trace-pagination { flex-wrap:wrap; justify-content:flex-start; } .trace-detail-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* Shared shell with the setting and cycle tools.  The simulator keeps its
   white working cards, but sits on the same dark tool-catalog background. */
:root { --ink:#172033; --muted:#657089; --canvas:#0b1119; --card:#fff; }
body { background:#090c11; }
.hero h1 { color:#eef4fb; }
.hero > p:last-child,.page-footer { color:#a9b7c8; }
.hero > p a,.page-footer a { color:#78caff; font-weight:750; text-decoration-thickness:1.5px; text-underline-offset:2px; }
.hero > p a:visited,.page-footer a:visited { color:#d6b9ff; }
.hero > p a:hover,.page-footer a:hover { color:#fff; }