:root{--color-bg:#f5f5f7;--color-surface:#fff;--color-border:#e5e5ea;--color-border-strong:#d2d2d7;--color-text:#1d1d1f;--color-text-muted:#6e6e73;--color-accent:#0071e3;--color-accent-contrast:#fff;--color-warning:#f5a623;--color-warning-strong:#c25e00;--color-warning-surface:#fff8ec;--color-lost:#767676;--font-sans:-apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--text-xs:11px;--text-sm:12px;--text-base:14px;--text-lg:18px;--text-xl:22px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--radius-sm:8px;--radius-md:12px;--radius-pill:999px;--layout-max:1440px}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);font-size:var(--text-base);margin:0;line-height:1.5}h1,h2,h3,p{margin:0}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.skip-link{left:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-accent);color:var(--color-accent-contrast);border-radius:var(--radius-sm);z-index:10;position:absolute;top:-48px}.skip-link:focus{top:var(--space-2)}.app-shell{min-height:100vh}.app-header{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border);display:flex}.app-brand{letter-spacing:-.01em;font-weight:700}.app-nav{gap:var(--space-1);display:flex}.app-nav a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);color:var(--color-text-muted);font-weight:600;text-decoration:none}.app-nav a[aria-current=page]{background:var(--color-accent);color:var(--color-accent-contrast)}.app-main{max-width:var(--layout-max);padding:var(--space-4);margin:0 auto}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4)}.card-header{justify-content:space-between;align-items:baseline;gap:var(--space-2);margin-bottom:var(--space-3);display:flex}.card-title{align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:700;display:flex}.step-badge{background:var(--color-accent);width:22px;height:22px;color:var(--color-accent-contrast);font-size:var(--text-sm);border-radius:50%;flex:none;justify-content:center;align-items:center;font-weight:700;display:inline-flex}.hint{color:var(--color-accent);font-size:var(--text-sm);font-weight:600}.button{min-height:44px;padding:var(--space-2) var(--space-4);border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer;font-weight:700}.button-primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-contrast)}.button:disabled{opacity:.5;cursor:not-allowed}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.connection{gap:var(--space-3);display:grid}.connection-head h1{font-size:var(--text-xl);letter-spacing:-.01em}.connection-head p{color:var(--color-text-muted);margin-top:var(--space-1)}.connection-notice{padding:var(--space-2) var(--space-3);background:var(--color-warning-surface);border-radius:var(--radius-sm);color:#8a5200;font-size:var(--text-sm);font-weight:600}.connection-controls{gap:var(--space-3);display:grid}.connection-status{font-weight:700}.banner-snapshot{padding:var(--space-2) var(--space-3);background:var(--color-warning-surface);border-radius:var(--radius-sm);color:#8a5200}.connection-buttons{gap:var(--space-2);flex-wrap:wrap;display:flex}.connection-buttons a.button{align-items:center;text-decoration:none;display:inline-flex}.connection-heartbeat{color:var(--color-text-muted);font-size:var(--text-sm)}.connection-grid{gap:var(--space-3);grid-template-columns:minmax(0,1fr);display:grid}.connection-side{gap:var(--space-3);align-content:start;min-width:0;display:grid}.timeline{gap:var(--space-2);margin:var(--space-3) 0 0;padding:0;list-style:none;display:grid}.step{gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);display:flex}.timeline .step-badge{background:var(--color-border-strong);color:var(--color-text)}.timeline .step-done .step-badge{background:var(--color-accent);color:var(--color-accent-contrast)}.step-active{border-color:var(--color-accent);box-shadow:0 0 0 2px #0071e326}.timeline .step-active .step-badge{background:var(--color-text);color:var(--color-accent-contrast)}.step-body{min-width:0}.step-head{align-items:center;gap:var(--space-1) var(--space-2);flex-wrap:wrap;display:flex}.tag{border-radius:var(--radius-pill);background:var(--color-bg);color:var(--color-text-muted);font-size:var(--text-xs);padding:1px 8px;font-weight:600}.tag-live{color:#004f9f;background:#e6f1fd}.step p,.step details{margin-top:var(--space-1);font-size:var(--text-sm)}.step summary{color:var(--color-accent);cursor:pointer;font-weight:600}.step-source{color:var(--color-text-muted)}.panel-empty{padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius-sm);color:var(--color-text-muted)}.raw-columns{gap:var(--space-3);grid-template-columns:minmax(0,1fr);display:grid}.raw h3{margin-bottom:var(--space-1);font-size:var(--text-sm);color:var(--color-text-muted)}.raw-lines{padding:var(--space-2);background:var(--color-bg);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-sm);margin:0;list-style:none}.raw-line{width:100%;font:inherit;text-align:left;white-space:pre-wrap;word-break:break-word;cursor:pointer;background:0 0;border:none;border-radius:4px;padding:2px 4px;display:block}.raw-line-key{background:var(--color-warning-surface);font-weight:700}.raw-line[aria-pressed=true]{outline:2px solid var(--color-accent)}.panel-hint{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:#004f9f;font-size:var(--text-sm);background:#e6f1fd}.message-log{gap:var(--space-2);margin:0;padding:0;list-style:none;display:grid}.message{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--color-bg)}.message-sent{border-left:3px solid var(--color-accent)}.message-received{border-left:3px solid var(--color-text-muted)}.message-head{gap:var(--space-2);font-size:var(--text-sm);display:flex}.message-direction{color:var(--color-text-muted)}.message pre{margin:var(--space-1) 0 0;font-family:var(--font-mono);font-size:var(--text-xs);white-space:pre-wrap;word-break:break-word}@media (width>=900px){.connection-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}.raw-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}.lanes{gap:var(--space-2);min-width:0;display:grid}.lanes-frame{min-width:0;position:relative}.lane-label{z-index:1;background:linear-gradient(to right, var(--color-surface) 80%, transparent);width:52px;font-size:var(--text-sm);pointer-events:none;padding-right:4px;line-height:1.2;position:absolute;left:0}.lane-label strong,.lane-label span{display:block}.lane-label span{color:var(--color-text-muted);font-size:var(--text-xs)}.lanes-scroll{border-radius:var(--radius-sm);width:100%;min-width:0;overflow-x:auto}.lanes-scroll svg{display:block}.lane-rule{stroke:var(--color-border)}.lane-line{stroke:var(--color-accent);stroke-width:1px;opacity:.4}.lane-line.late{stroke:var(--color-warning);stroke-width:1.6px;opacity:1}.cell-rect.on-time{fill:var(--color-accent)}.cell-rect.late{fill:var(--color-warning)}.cell-rect.lost{fill:var(--color-surface);stroke:var(--color-lost);stroke-dasharray:3 3}.cell-rect.selected{stroke:var(--color-text);stroke-width:2.5px;stroke-dasharray:none}.cell-text{text-anchor:middle;pointer-events:none;font-size:11px;font-weight:700}.cell-text.on-time{fill:var(--color-accent-contrast)}.cell-text.late{fill:var(--color-text)}.cell-text.lost{fill:var(--color-lost);font-size:15px}.cell-flag{fill:var(--color-warning-strong);text-anchor:middle;font-size:13px;font-weight:700}.cell-flag.late{font-size:11px}.lane-cell{cursor:pointer}.lane-cell:focus-visible{outline:none}.lane-cell:focus-visible .cell-rect{stroke:var(--color-text);stroke-width:2.5px}.playhead{stroke:var(--color-text);stroke-width:1.5px}.axis-label{fill:var(--color-text-muted);text-anchor:end;font-size:10px}.overview{cursor:pointer;touch-action:none;border-radius:4px;width:100%;height:12px;display:block}.overview-cell.on-time{fill:var(--color-accent)}.overview-cell.late{fill:var(--color-warning)}.overview-cell.lost{fill:var(--color-border)}.overview-viewport{fill:#0000001f;stroke:var(--color-text);stroke-width:.15px;pointer-events:none}.legend{gap:var(--space-1) var(--space-3);color:var(--color-text-muted);font-size:var(--text-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.swatch{vertical-align:-1px;border-radius:3px;width:11px;height:11px;margin-right:5px;display:inline-block}.swatch.on-time{background:var(--color-accent)}.swatch.late{background:var(--color-warning)}.swatch.lost{background:var(--color-surface);border:1.5px dashed var(--color-lost)}.rtp{padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius-sm)}.rtp h3{font-size:var(--text-base);margin-bottom:var(--space-2)}.rtp-empty{padding:var(--space-3);background:var(--color-bg);border-radius:var(--radius-sm);color:var(--color-text-muted)}.rtp-fields{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;display:grid}.rtp-fields div{padding:var(--space-2) var(--space-3);background:var(--color-surface);border-radius:var(--radius-sm)}.rtp-fields dt{color:var(--color-text-muted);font-size:var(--text-xs)}.rtp-fields dd{font-family:var(--font-mono);margin:0;font-size:15px;font-weight:700}.rtp-explain{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-warning-surface);border-radius:var(--radius-sm);color:#8a5200;font-size:var(--text-sm);line-height:1.45}.wave summary{cursor:pointer;font-weight:700}.wave-label{margin-top:var(--space-2);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:600}.wave-bars{align-items:center;gap:2px;height:40px;display:flex}.wave-bars i{background:var(--color-accent);border-radius:1px;flex:1;display:block}.wave-bars i.gap{border-bottom:1.5px dashed var(--color-lost);background:0 0;height:1px}.wave-bars:first-of-type i{background:var(--color-border-strong)}@media (width>=900px){.rtp-fields{grid-template-columns:repeat(4,minmax(0,1fr))}}.lab{gap:var(--space-3);grid-template-columns:minmax(0,1fr);display:grid}.lanes-card{min-width:0}.lab-head h1{font-size:var(--text-xl);letter-spacing:-.01em}.lab-head p{color:var(--color-text-muted);margin-top:var(--space-1)}.lab-controls,.lab-results{gap:var(--space-3);align-content:start;min-width:0;display:grid}.step-guide{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.step-guide-item{gap:var(--space-2);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--text-sm);align-items:flex-start;line-height:1.35;display:flex}.step-guide-item span:not(.step-badge){color:var(--color-text-muted);font-size:var(--text-xs);display:block}.step-guide-item strong{color:var(--color-text);font-size:var(--text-sm)}.chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.chip{min-height:40px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-border-strong);border-radius:var(--radius-pill);background:var(--color-surface);cursor:pointer;font-weight:600}.chip[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-contrast)}.sliders{gap:var(--space-4);display:grid}.sliders-summary{align-items:center;gap:var(--space-2);cursor:pointer;font-weight:700;list-style:none;display:flex}.sliders-summary::-webkit-details-marker{display:none}.sliders-body{margin-top:var(--space-3)}.sliders-title{margin-bottom:var(--space-3)}@media (width>=900px){.sliders-summary{display:none}}.slider-top{justify-content:space-between;align-items:baseline;font-weight:700;display:flex}.slider-top output{color:var(--color-accent);font-variant-numeric:tabular-nums}.slider-row input[type=range]{appearance:none;width:100%;height:28px;margin:var(--space-1) 0;cursor:pointer;background:0 0}.slider-row input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--color-accent) var(--fill,0%), var(--color-border) var(--fill,0%));border-radius:3px;height:6px}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--color-accent);background:#fff;border-radius:50%;width:22px;height:22px;margin-top:-8px;box-shadow:0 1px 4px #0003}.slider-row input[type=range]::-moz-range-track{background:var(--color-border);border-radius:3px;height:6px}.slider-row input[type=range]::-moz-range-progress{background:var(--color-accent);border-radius:3px;height:6px}.slider-row input[type=range]::-moz-range-thumb{border:2px solid var(--color-accent);background:#fff;border-radius:50%;width:18px;height:18px}.slider-help{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.35}.slider-help strong{color:var(--color-text)}.play-bar{gap:var(--space-2);display:grid}.play-buttons{gap:var(--space-2);grid-template-columns:1.3fr 1fr;display:grid}.play-button{padding:var(--space-3) var(--space-2);flex-direction:column;align-items:center;gap:2px;font-size:15px;display:flex}.play-button small{font-size:var(--text-xs);text-align:center;font-weight:500}.play-error{color:var(--color-warning-strong);font-size:var(--text-sm);font-weight:600}.metrics{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;display:grid}.metric{padding:var(--space-2) var(--space-3);background:var(--color-bg);border-radius:var(--radius-sm)}.metric dt{color:var(--color-text-muted);font-size:var(--text-xs)}.metric dd{font-variant-numeric:tabular-nums;margin:0;font-size:19px;font-weight:700}.metric-warn dd{color:var(--color-warning-strong)}.notice{color:#6b6b70;font-size:var(--text-xs);line-height:1.5}@media (width<=899px){.lab-play{z-index:5;margin:0 calc(var(--space-4) * -1);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));border-top:1px solid var(--color-border-strong);background:#f5f5f7f5;position:sticky;bottom:0}.play-bar.card{background:0 0;border:none;padding:0}.play-bar .card-header{display:none}}@media (width>=900px){.lab{column-gap:var(--space-4);grid-template-columns:340px minmax(0,1fr);grid-template-areas:"head head""steps steps""controls play""controls results""sliders.""notice notice"}.lab-head{grid-area:head}.lab-steps{grid-area:steps}.lab-controls{grid-area:controls}.lab-play{grid-area:play}.lab-results{grid-area:results}.lab-sliders{grid-area:sliders}.lab-notice{grid-area:notice}.step-guide{grid-template-columns:repeat(4,minmax(0,1fr))}}.gate{gap:var(--space-3);max-width:420px;margin:var(--space-6) auto;display:grid}.gate form{gap:var(--space-2);display:grid}.gate input{min-height:44px;padding:0 var(--space-3);border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);font:inherit}.recorder{gap:var(--space-2);display:grid}.recorder-hint{color:var(--color-text-muted);font-size:var(--text-sm)}.recorder-source{font-weight:700}.recorder-actions{gap:var(--space-2);flex-wrap:wrap;display:flex}.recorder-upload{cursor:pointer;align-items:center;display:inline-flex;position:relative}.recorder-upload input{opacity:0;cursor:pointer;position:absolute;inset:0}