@font-face{font-family:Plant;src:url('./assets/NotoSansJP.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:PlantSC;src:url('./assets/NotoSansSC-ui.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root {
  color-scheme:light; --sans:Plant,"Yu Gothic UI",sans-serif; --mono:Consolas,"Cascadia Mono",monospace;
  --ink:#192328; --muted:#55636b; --line:#c6cecf; --soft-line:#dce1df;
  --paper:#fafbf8; --surface:#f1f3f0; --bg:#e7eae7; --accent:#216b5c; --amber:#87501b;
  --text:var(--ink); --mute:var(--muted); --mint:var(--accent); --panel:var(--paper);
  font-family:var(--sans); font-synthesis:none; color:var(--ink); background:var(--bg);
}
:root:lang(zh-CN){--sans:PlantSC,Plant,sans-serif;--mono:Consolas,"Cascadia Mono",PlantSC,monospace}
*{box-sizing:border-box} body{margin:0} h1,h2,h3,h4,p,figure,dl,dd{margin:0}
button,select,input{font:inherit;color:inherit} button,select{cursor:pointer}
button{background:transparent;border:1px solid transparent;border-radius:2px}
button:hover:not(:disabled){background-color:#e3e8e6} button:disabled{cursor:default;opacity:.5}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:2px solid #27877d;outline-offset:2px}
[hidden]{display:none!important} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
svg{display:block} i[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex:none;width:17px;height:17px;font-style:normal}
i[data-icon]>svg{display:block;width:100%;height:100%} button,select{touch-action:manipulation}
.top {
  display:flex;align-items:center;gap:19px;height:53px;padding:0 clamp(16px,2vw,38px);
  background:#192127;color:#eff3f1;border-bottom:1px solid #344047;
}
.brand{display:flex;align-items:center;gap:9px}.brand b{font:650 24px/1 Arial,sans-serif;letter-spacing:-1px}
.brand-line{height:18px;width:1px;background:#546069}.simulator-name{font-size:14px;letter-spacing:.025em;color:#d3dddf;font-weight:500}
.language-picker{display:inline-flex;align-items:center;gap:5px;margin-left:auto;color:#d1dadc}
.language-picker i{width:16px;height:16px}.language-picker select{color:inherit;background:#192127;border:0;border-radius:2px;padding:5px 3px;font-size:12px}
.command-bar {
  display:flex;align-items:stretch;justify-content:space-between;gap:16px;padding:0 clamp(10px,1.45vw,27px);
  min-height:51px;background:var(--paper);border-bottom:1px solid #bac3c5;
}
.destinations,.guide,.cams{display:flex;align-items:center}
.destinations{gap:3px}.destinations button{height:100%;display:flex;gap:7px;align-items:center;position:relative;padding:0 clamp(10px,1.25vw,23px);color:#57656a;font-size:13px;font-weight:540}
.destinations button[aria-current]{color:#152a27;background:#eaf0ec}
.destinations button[aria-current]:after{content:"";height:3px;position:absolute;bottom:0;left:0;right:0;background:#2b675a}
.guide{gap:7px}.guide button,.replay-actions button,.summary-table button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 12px;border:1px solid #afbabb;border-radius:3px;background:#fff;font-size:12px;font-weight:560}
.guide #next,.replay-actions .primary{color:white;background:#27363e;border-color:#27363e}
.guide #next:hover:not(:disabled),.replay-actions .primary:hover{background:#394c53}
#guide-stage{font-size:11px;color:var(--muted);padding:0 10px 0 0}#pause[aria-pressed=true]{background:#ffebcc;border-color:#ba8c4d}
main{width:100%;margin:0 auto;max-width:2600px;padding:14px clamp(12px,1.35vw,26px) 14px}
#detail,#research,#replay{min-height:calc(100dvh - 140px)}
.log-panel{background:var(--paper);border:1px solid #adb8ba;border-top:0}
.log-heading{height:39px;padding:0 15px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);background:#edf0ee}
.log-title,.log-clock{display:flex;align-items:center;gap:8px}.log-title h2{font-size:14px;font-weight:620}.log-title i{color:#496066}
.log-clock{color:var(--muted);font:11px var(--mono)}.log-clock time{font-size:13px;color:var(--ink)}.log-clock small{font:11px var(--sans)}.log-clock i{width:14px;height:14px}
#log{max-height:102px;min-height:62px;overflow:auto;scrollbar-width:thin}
.log-row{display:grid;grid-template-columns:76px 100px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 16px;min-height:31px;font-size:12px;border-bottom:1px solid #e0e5e1;color:#29363b}
.log-row:last-child{border-bottom:0}.log-time,.log-ref{font:12px var(--mono);font-variant-numeric:tabular-nums;color:#55656b}.log-ref{font-size:11px}
.log-type{font-size:11px;display:flex;align-items:center;gap:7px;color:#445c57}.log-type:before{content:"";width:5px;height:5px;border:1px solid #668d7c;background:#b5cbbb}.log-type.alert{color:var(--amber)}.log-type.alert:before{border-color:#91612b;background:#dcae6c}
#replay{background:var(--paper);border:1px solid var(--line)}
.replay-box{padding:clamp(19px,2.4vw,43px);border-bottom:1px solid var(--line)}
.replay-box:last-child{border-bottom:0}.replay-header,.replay-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}
.replay-box h2{font-size:clamp(22px,1.8vw,32px);font-weight:620;line-height:1.4}.replay-box p{font-size:13px;line-height:1.7;color:var(--muted);margin-top:6px}
.replay-id{font:12px/1.65 var(--mono);color:var(--muted);text-align:right}.progress-title{display:flex;align-items:baseline;justify-content:space-between;margin:28px 0 8px}
.progress-title b{font:32px var(--mono);color:var(--ink)}.progress-title span{font:13px var(--mono);color:var(--muted)}
progress{background:#dbe2dd;width:100%;height:7px;appearance:none;border:0;display:block}progress::-webkit-progress-bar{background:#dbe2dd}progress::-webkit-progress-value{background:#398573}
.replay-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0;gap:14px}.replay-metrics>div{border-left:2px solid #bbc8c4;padding-left:12px}
.replay-metrics span{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}.replay-metrics strong{font:clamp(22px,2vw,36px) var(--mono);letter-spacing:-.045em}
.replay-actions{justify-content:flex-start;flex-wrap:wrap}.summary-table{border-collapse:collapse;font-size:13px;width:100%;margin-top:17px;text-align:right;font-variant-numeric:tabular-nums}
.summary-table th,.summary-table td{padding:11px 9px;border-bottom:1px solid var(--soft-line)}.summary-table thead th{background:#edf0ee;color:#506167;font-size:12px;font-weight:570}
.summary-table :is(th,td):first-child{text-align:left}.summary-table tbody td{font-family:var(--mono)}.summary-table button{padding:4px 8px;font:12px var(--sans)}
@media(min-width:1600px){.top{height:59px}.command-bar{min-height:55px}.destinations button{font-size:14px}.guide button{font-size:13px}.log-row{font-size:13px}.log-heading{height:43px}#log{min-height:70px}.log-row{min-height:35px}}
@media(max-width:850px){#guide-stage{display:none}.command-bar{gap:5px}.destinations{gap:0}.destinations button{font-size:12px;padding:0 8px}.guide{gap:4px}.log-ref{display:none}.log-row{grid-template-columns:66px 68px 1fr;gap:6px}.replay-metrics{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.top{height:46px;gap:9px;padding:0 12px}.brand b{font-size:20px}.brand img{width:25px}.simulator-name{font-size:11px;max-width:95px}.language-picker i{display:none}.command-bar{flex-wrap:wrap;padding:0 8px}.destinations{width:100%;height:40px}.destinations button{flex:1;justify-content:center}.guide{margin-left:auto;padding:3px 0 6px}.guide button{padding:4px 8px}main{padding:7px}.log-row{font-size:11px;padding:6px}.replay-header{align-items:flex-start}.summary-table{font-size:10px}.summary-table th,.summary-table td{padding:6px 3px}.replay-box{padding:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.run-setup{display:flex;gap:24px;flex-wrap:wrap;margin-top:16px;padding:9px 0;border-block:1px solid var(--soft-line)}
.run-setup>div{display:flex;gap:8px;align-items:baseline;font-size:12px}
.run-setup span{color:var(--muted)}.run-setup b{font-weight:560}
.summary-scroll{overflow:auto}
.mean-cost{display:inline-flex;gap:9px;align-items:center}
.mean-cost meter{width:clamp(32px,5vw,85px);height:7px;appearance:none;background:#dce2df;border:0}
.mean-cost meter::-webkit-meter-bar{background:#dce2df;border:0;border-radius:0;height:7px}
.mean-cost meter::-webkit-meter-optimum-value{background:#647e79;border-radius:0}
#log{height:62px;min-height:0;max-height:none}
#log.expanded{height:auto;max-height:35dvh}
#log-expand{color:#3c5b5c;border-left:1px solid #bfc8c8;border-radius:0;font-size:11px;line-height:1.25;padding:2px 9px}
@media(min-width:1600px){#log:not(.expanded){height:70px}}
