:root{--bg: #0f1420;--panel: #171d2b;--panel-2: #1e2637;--line: #2b3448;--text: #e8eef9;--text-dim: #a8b6cc;--accent: #4c9be8;--accent-2: #2fbf8f;--radius: 10px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Noto Sans KR,sans-serif;font-size:16px;line-height:1.6}.app{display:flex;flex-direction:column;min-height:100%}.app-header{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--panel)}.app-header h1{margin:0;font-size:20px;letter-spacing:-.01em}.tagline{margin:2px 0 0;font-size:14px;color:var(--text-dim)}.stage-select{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-dim)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;padding:16px 20px 28px;align-items:start}@media(max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}}.stage-area{min-width:0}.stage-brief{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}.stage-brief h2{margin:0;font-size:18px}.subtitle{margin:4px 0 8px;color:var(--text-dim);font-size:15px}.situation{margin:0 0 8px;font-size:15px}.misconception{margin:0;font-size:14px;color:#ffc9a8;border-left:3px solid #e8734a;padding-left:10px}.sim-canvas-wrap{position:relative;width:100%;aspect-ratio:16 / 9;min-height:260px;max-height:68vh;background:#0b0f18;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.sim-canvas-wrap canvas{display:block}.transport{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}.transport-buttons{display:flex;flex-wrap:wrap;gap:8px;align-items:center}button{font:inherit;font-size:15px;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 14px;cursor:pointer;min-height:40px}button:hover{background:#26314a}button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}button.primary{background:var(--accent);border-color:var(--accent);color:#08111d;font-weight:700;min-width:110px}button.primary:hover{background:#63aaf0}.speeds{display:flex;gap:4px;margin-left:auto}button.speed{padding:8px 10px;min-width:52px;font-size:14px}button.speed.active{background:var(--accent-2);border-color:#7ff0c8;border-width:2px;color:#05221a;font-weight:700}.timeline{display:flex;align-items:center;gap:12px;margin-top:12px}.timeline input[type=range]{flex:1;min-width:0}.time-readout{font-family:ui-monospace,monospace;font-size:15px;min-width:92px;text-align:right;color:var(--text-dim)}.scrub-note{margin:8px 0 0;font-size:13px;color:var(--text-dim)}input[type=range]{accent-color:var(--accent);height:28px}input[type=range]:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.readout{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:8px 14px 14px;overflow-x:auto}.readout table{width:100%;border-collapse:collapse;font-size:15px}.readout caption{text-align:left;padding:6px 0 8px;color:var(--text-dim);font-size:14px}.readout th,.readout td{padding:6px 8px;text-align:right;border-bottom:1px solid var(--line);font-family:ui-monospace,monospace;white-space:nowrap}.readout thead th{color:var(--text-dim);font-weight:600}.readout tbody th{text-align:left;font-family:inherit;font-weight:600}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px 18px;position:sticky;top:16px}@media(max-width:900px){.panel{position:static}}.panel h3{margin:16px 0 8px;font-size:15px;color:var(--text-dim);text-transform:none}.panel h3:first-child{margin-top:0}.controls{display:flex;flex-direction:column;gap:14px}.control{display:flex;flex-direction:column;gap:4px;font-size:14px}.control-label{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.control-label output{font-family:ui-monospace,monospace;color:var(--accent);font-size:14px;white-space:nowrap}.control small{color:var(--text-dim);font-size:12.5px;line-height:1.45}.control select,.stage-select select{font:inherit;font-size:15px;color:var(--text);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:40px}.toggles{display:flex;flex-direction:column;gap:10px}.control-toggle{display:flex;align-items:center;gap:8px;font-size:14.5px;cursor:pointer}.control-toggle input{width:18px;height:18px;accent-color:var(--accent)}.concepts{margin:0;padding-left:18px;font-size:14px;color:var(--text-dim)}.hint-keys{margin:18px 0 0;font-size:13px;color:var(--text-dim);line-height:2}kbd{font-family:ui-monospace,monospace;font-size:12px;background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:2px 6px;margin:0 2px}@media(prefers-reduced-motion:reduce){*:not(canvas){animation-duration:.01ms!important;transition-duration:.01ms!important}}