@font-face{font-family:Poppins;src:url('../fonts/poppins/poppins-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}

@font-face{font-family:Poppins;src:url('../fonts/poppins/poppins-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}

@font-face{font-family:Poppins;src:url('../fonts/poppins/poppins-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}

:root{color-scheme:light;--bg:#f5f8fc;--surface:#fff;--text:#14273d;--muted:#596b7c;--line:#dce5ef;--soft:#edf3fa;--blue:#1765a5;--p:#2375bd;--s:#d6383f;--shade:#14273d;--scene-opacity:.8;--scene-filter:saturate(.5);font-family:Poppins,system-ui,sans-serif;font-size:16px}

:root[data-theme=dark]{color-scheme:dark;--bg:#0d1724;--surface:#152233;--text:#f0f5fb;--muted:#aabbd0;--line:#304256;--soft:#203349;--blue:#75b8f2;--p:#74bcf6;--s:#ff737a;--shade:#f0f5fb;--scene-opacity:.43;--scene-filter:saturate(.35) brightness(.78)}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text)}
button,select,input{font:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button,select{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
button{color:inherit}
a{color:var(--blue)}
.app{max-width:1600px;margin:auto;padding:0 28px 16px}
.topbar{display:flex;align-items:center;gap:20px;min-height:76px;border-bottom:1px solid var(--line)}
.brand{display:flex;flex-shrink:0;background:#fff;padding:6px 8px;border-radius:6px}
.brand img{display:block;width:180px;height:auto}
.module-name{color:var(--muted);font-size:.875rem;border-left:1px solid var(--line);padding-left:20px}
.top-actions{display:flex;gap:4px;margin-left:auto}
.quiet-button{border:1px solid transparent;background:transparent;border-radius:8px;font-size:.875rem;padding:9px 12px;min-height:42px;white-space:nowrap}
.quiet-button:hover{background:var(--soft)}
.top-actions .quiet-button{font-size:.8125rem}
.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0 16px}
h1{font-size:clamp(1.1rem,1.8vw,1.5rem);letter-spacing:-.04em;line-height:1.35;margin:0;font-weight:600}
.clock{display:flex;align-items:center;gap:12px;font-size:.8125rem;color:var(--muted);white-space:nowrap}
.clock output{color:var(--text);font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;min-width:65px}
.presentation{min-width:0;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.scene{position:relative;height:clamp(320px,46dvh,500px);min-height:320px;flex:1;background:var(--soft);isolation:isolate;overflow:hidden}
.landscape,.scene-tone,#journey{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.landscape{left:var(--landscape-left,-202.3%);width:var(--landscape-width,302.3%);max-width:none;filter:var(--scene-filter);opacity:var(--scene-opacity);z-index:-2}
.scene-tone{background:linear-gradient(180deg,var(--surface),transparent 42%);opacity:.3;z-index:-1}
.legend{position:absolute;top:18px;left:22px;display:flex;gap:20px;z-index:2;font-weight:700;font-size:1rem}
.legend>span{display:flex;gap:8px;align-items:center}
.legend small{font-size:.875rem;font-weight:400;color:var(--text)}
.p-key{color:var(--p)}
.s-key{color:var(--s)}
.p-wave{fill:color-mix(in srgb,var(--p) 9%,transparent);stroke:var(--p);stroke-width:3;vector-effect:non-scaling-stroke}
.s-wave{fill:color-mix(in srgb,var(--s) 5%,transparent);stroke:var(--s);stroke-width:3;vector-effect:non-scaling-stroke}
.blind-fill{fill:color-mix(in srgb,var(--shade) 13%,transparent)}
.blind-line{stroke:var(--muted);stroke-dasharray:5 5;stroke-width:1;vector-effect:non-scaling-stroke}
.digital-route-halo{fill:none;stroke:var(--surface);stroke-width:7;opacity:.85;vector-effect:non-scaling-stroke}
.digital-route{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round;opacity:.85;vector-effect:non-scaling-stroke}
.digital-leg{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;opacity:0;vector-effect:non-scaling-stroke}
.digital-leg.is-complete{opacity:.85}
.digital-leg.is-transmitting{opacity:1;stroke-dasharray:10 6}
.data-arrow{fill:none;stroke:var(--text);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.digital-packet{fill:var(--blue);stroke:var(--surface);stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px var(--blue))}
.digital-trail{filter:none}
.sound-front{fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.origin{fill:var(--s);stroke:var(--surface);stroke-width:3}
.center-icon rect{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.center-icon path{stroke:var(--muted);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.center-icon.is-active rect{stroke:var(--blue)}
.center-icon.is-active path{stroke:var(--blue)}
.scale-break{stroke:var(--muted);stroke-width:1.5;fill:none;opacity:.8}
.marker{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;transform:translate(-50%,-50%);font-size:.8125rem;white-space:nowrap}
.marker b{display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);color:var(--muted);width:26px;height:26px;border-radius:50%;font-size:.875rem;font-weight:600}
.marker.is-active b{border-color:var(--blue);background:var(--blue);color:var(--surface)}
.origin-marker{left:6%;top:64%}
.sensor-marker{left:26.42%;top:64%}
.center-marker{left:50.17%;top:39%}
.siren-marker{left:74%;top:64%}
.person-marker{left:91.67%;top:64%}
.blind-label{position:absolute;top:84%;left:6%;color:var(--text);font-size:.875rem;background:color-mix(in srgb,var(--surface) 80%,transparent);padding:3px 8px;border-radius:4px}
.local-label{position:absolute;left:83.5%;top:73%;font-size:.75rem;color:var(--muted);text-align:center;width:16%}
.watermark{position:absolute;right:18px;bottom:14px;opacity:.55}
.watermark img{display:block;width:110px;height:auto;background:#fff;border-radius:3px;padding:3px}
.steps{display:grid;gap:4px}
.step{display:flex;gap:12px;align-items:center;justify-content:flex-start;border:1px solid transparent;border-radius:8px;background:transparent;padding:9px 12px;min-height:44px;text-align:left;font-size:.9375rem;color:var(--muted)}
.step span{border:1px solid var(--line);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:.875rem}
.step strong{font-weight:600}
.step:hover{background:var(--soft)}
.step.is-current{color:var(--blue);border-color:var(--line);background:var(--soft)}
.step.is-current span,.step.is-done span{background:var(--blue);border-color:var(--blue);color:var(--surface)}
.step.is-done{color:var(--text)}
.guide{padding:22px 26px 16px;min-height:174px;border-top:1px solid var(--line)}
.phase-copy>span{font-size:.75rem;color:var(--muted)}
h2{font-size:1.2rem;margin:4px 0 5px;letter-spacing:-.02em;line-height:1.35}
.current-step p{font-size:1rem;line-height:1.6;margin:0;max-width:720px;color:var(--muted)}
.reaction{border-top:1px solid var(--line);padding-top:18px;margin-top:auto;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px}
.reaction>span{font-size:.875rem;font-weight:600;max-width:160px}
.reaction strong{font-weight:600;font-size:2.5rem;letter-spacing:-.05em;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--blue)}
.reaction strong small{font-size:1.1rem;letter-spacing:0;font-weight:400}
.reaction p{grid-column:1/-1;font-size:.8125rem;color:var(--muted);margin:10px 0 0;line-height:1.6}
.reaction.is-late strong{color:var(--s)}
.controls{padding:0 26px 22px}
.playback{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.primary-button{background:var(--blue);color:var(--surface);font-size:.875rem;min-width:104px;border:0;border-radius:8px;padding:11px 17px;min-height:44px;font-weight:600}
.primary-button:hover{filter:brightness(.94)}
select{background:var(--surface);border:1px solid var(--line);padding:8px 6px;border-radius:7px;font-size:.875rem;min-height:42px}
.distance-controls{display:grid;gap:18px}
.distance{display:block;min-width:0}
.distance>span{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.875rem}
.distance output{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.distance input{display:block;accent-color:var(--blue);width:100%;margin:8px 0 0;min-height:22px;cursor:pointer}
.secondary-actions{display:flex;gap:6px;margin-top:14px}
.model-note{font-size:.75rem;color:var(--muted);margin:10px 0 0;line-height:1.6}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
dialog{color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:0;width:min(600px,calc(100% - 32px));max-height:85dvh}
dialog::backdrop{background:#07172599;backdrop-filter:blur(3px)}
.dialog-heading{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line);margin:0}
.dialog-heading h2{margin:0}
.close-button{background:var(--soft);border:0;border-radius:50%;width:40px;height:40px;font-size:1.5rem;line-height:1}
.dialog-body{padding:24px}
.dialog-body .distance+.distance{margin-top:24px}
.dialog-body>p,.dialog-body details p{font-size:.875rem;line-height:1.7;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:.875rem}
caption{text-align:left;font-size:.8125rem;color:var(--muted);margin-bottom:12px}
td{padding:10px 0;border-bottom:1px solid var(--line)}
td:last-child{text-align:right;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
summary{cursor:pointer;font-size:.875rem;font-weight:600;padding:12px 0}
.scene.is-shaking .landscape{animation:shake .3s linear infinite}
.scene.is-heard #personArt{filter:drop-shadow(0 0 6px var(--blue))}
.scene.is-shaking #personArt{filter:drop-shadow(0 0 6px var(--s))}
@keyframes shake{0%,100%{transform:translateX(0)}
25%{transform:translateX(2px)}
75%{transform:translateX(-2px)}
}






.legend{flex-wrap:wrap;gap:6px 20px;max-width:calc(100% - 40px)}

.playback{display:flex;align-items:center;flex-wrap:wrap;gap:8px}

.sound-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-color:var(--line);background:var(--surface)}

.sound-toggle svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.sound-toggle .speaker-off,.sound-toggle[aria-pressed=true] .speaker-waves{display:none}

.sound-toggle[aria-pressed=true] .speaker-off{display:block}

.sound-toggle[aria-pressed=true]{background:var(--soft);color:var(--muted)}

.center-marker{top:41%;gap:7px}
.center-marker-heading{display:flex;align-items:center;gap:7px}
.center-progress-track{display:block;width:96px;height:4px;background:var(--line);border-radius:4px;overflow:hidden}
.center-progress-track>span{display:block;height:100%;width:0;background:var(--blue)}

.processing-status{max-width:400px;margin-top:12px}
.current-step .processing-breakdown{font-size:.75rem;margin-top:6px;line-height:1.5}
#processingTime{white-space:nowrap;font-variant-numeric:tabular-nums}
.processing-status>div{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:.875rem}

.processing-status progress{display:block;width:100%;height:5px;margin-top:6px;border:0;border-radius:8px;overflow:hidden;accent-color:var(--blue);background:var(--soft)}

.processing-status progress::-webkit-progress-bar{background:var(--soft);border-radius:8px}

.processing-status progress::-webkit-progress-value{background:var(--blue);border-radius:8px}

.processing-status progress::-moz-progress-bar{background:var(--blue);border-radius:8px}



.simulator-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:stretch}

.scenario-panel{display:flex;flex-direction:column;gap:20px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:14px;min-width:0}

.panel-title{font-size:.875rem;font-weight:600;letter-spacing:0;margin:0 0 12px}

.scenario-settings{border-top:1px solid var(--line);padding-top:18px}

.secondary-actions .quiet-button{flex:1;border-color:var(--line);font-size:.875rem}

@media(min-width:1041px) and (max-height:820px){
  .topbar{min-height:64px}
.heading{margin:14px 0 12px}

  .scene{height:36dvh;min-height:280px}
.guide{min-height:174px;padding:18px 22px 12px}

  .controls{padding:0 22px 18px}
.scenario-panel{padding:18px;gap:14px}

  .steps{gap:0}
.step{padding:8px 10px}
.scenario-settings{padding-top:14px}

  .distance-controls{gap:10px}
.reaction{padding-top:14px}
.reaction strong{font-size:2.2rem}

}

@media(max-width:1040px){
  .app{padding:0 18px 18px}
.module-name{display:none}

  .simulator-layout{grid-template-columns:minmax(0,1fr);gap:14px}

  .scene{height:auto;aspect-ratio:1200/525;min-height:300px;flex:none}

  .guide{min-height:174px}

  .scenario-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;padding:20px}

  .step-navigation{grid-column:1/-1}
.steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}

  .step{justify-content:center;padding:10px 4px;gap:8px}

  .scenario-settings{padding-top:18px}
.reaction{margin-top:0;padding-top:18px;align-content:center}

}

@media(max-width:650px){
  .app{padding:0 12px 18px}
.topbar{min-height:64px;gap:10px;flex-wrap:wrap;padding:12px 0}

  .brand img{width:138px}
.top-actions{gap:0}
.top-actions .quiet-button{font-size:.8125rem;padding:8px;min-height:40px}

  #fullscreenButton{display:none}
.heading{margin:16px 0 12px;flex-wrap:wrap;gap:7px}
.heading h1{font-size:1.1rem}

  .clock{font-size:.8125rem}
.clock output{font-size:.875rem}

  .scene{aspect-ratio:1.8;min-height:245px}
.legend{left:12px;top:12px;gap:4px 14px;max-width:calc(100% - 24px)}

  .legend small{font-size:.75rem}
.marker b{width:22px;height:22px;font-size:.75rem}

  .center-marker-heading{font-size:.75rem}
.center-progress-track{width:74px}

  .local-label{left:78%;width:22%;top:77%;font-size:.75rem}
.watermark{right:10px;bottom:8px}
.watermark img{width:82px}

  .blind-label{font-size:.75rem;padding:2px 5px}

  .guide{padding:16px;min-height:194px}
.current-step h2{font-size:1.1rem}
.current-step p{font-size:1rem;line-height:1.6}

  .controls{padding:0 16px 16px}
.playback{gap:6px}
.playback .quiet-button{padding:8px}
.primary-button{min-width:94px}

  .scenario-panel{grid-template-columns:minmax(0,1fr);padding:16px;gap:18px}

  .step-navigation{grid-column:auto}
.step{flex-direction:column;gap:7px;padding:10px 1px;min-height:66px}

  .step strong{font-size:.8125rem;white-space:nowrap}
.step span{width:24px;height:24px}

  .reaction>span{max-width:none}
.reaction strong{font-size:2.2rem}
.distance>span{flex-wrap:wrap;font-size:.875rem}

  .model-note{margin-top:14px}
.dialog-heading{padding:16px}
.dialog-body{padding:18px}

}

@media(prefers-reduced-motion:reduce){.scene.is-shaking .landscape{animation:none}
}