:root{color-scheme:light;--ink:#24352f;--muted:#68766d;--purple:#654296;--paper:#f5f5ee}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans CJK KR","Noto Sans KR",system-ui,sans-serif}main{max-width:1240px;padding:54px 44px 28px;margin:auto}.eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.08em}.mark{display:grid;place-items:center;border:1px solid #bcc7bc;width:30px;height:30px;border-radius:50%;font-size:12px}.method{margin-left:auto;letter-spacing:0;color:var(--muted);font-weight:400}h1{font-size:48px;line-height:1.18;letter-spacing:-.055em;margin:28px 0 18px;font-weight:650}h1 em{font-style:normal;color:var(--purple)}.intro{font-size:17px;line-height:1.7;color:var(--muted);margin:0 0 30px}.demo{border:1px solid #cbd3c8;border-radius:20px;background:#fffef9;overflow:hidden;box-shadow:0 12px 38px #273d2810}.topbar{display:flex;align-items:center;gap:20px;padding:18px 22px;border-bottom:1px solid #e2e5dc}.modes{display:flex;padding:4px;border:1px solid #d8ded3;border-radius:10px;background:#f3f5ee}button{font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink);padding:10px 18px;border:1px solid #ccd5c7;border-radius:7px;background:white;min-height:42px}button:focus-visible,input:focus-visible{outline:3px solid #8761bc;outline-offset:4px}.modes button{border:0;background:transparent;min-height:38px}.modes button[aria-pressed=true]{background:#263d32;color:white;box-shadow:0 2px 4px #172a2015}#mode-summary{font-size:14px}.duration{margin-left:auto;font-size:12px;color:var(--muted)}.beat{display:flex;gap:20px;align-items:flex-start;padding:24px 30px 0;min-height:110px}#step-number{color:var(--purple);font-size:13px;font-weight:700;letter-spacing:.07em;margin-top:6px;width:65px;flex-shrink:0}.beat h2{font-size:22px;letter-spacing:-.04em;font-weight:650;margin:0 0 8px}.beat p{font-size:14px;color:var(--muted);margin:0;line-height:1.6}.stage-frame{overflow-x:auto}svg{display:block;width:100%;min-width:880px;height:auto;font-family:inherit}.svg-kicker{font-size:12px;font-weight:700;fill:#748176;letter-spacing:.14em}.svg-note{font-size:15px;fill:#6c7970}.purple{fill:#7650ad}.teal{fill:#367966}.gold{fill:#967225}.field-label{font-size:19px;font-weight:650;fill:#30473c}.field-label.small{font-size:16px}.field-sub{font-size:13px;fill:#5b7165}.cipher-kicker{fill:#e0d3f2;font-size:12px;letter-spacing:.05em;font-weight:600}.cipher-text{font-size:19px;fill:white;font-weight:600}.controls{display:flex;align-items:center;gap:12px;padding:18px 26px 12px;border-top:1px solid #e8eade}#play{background:#263d32;color:white;min-width:105px}#play:disabled{background:#78877e;cursor:default}#seek{flex:1;min-width:90px;accent-color:#7650ad;height:26px}#clock{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:86px}.motion-note{padding:0 26px 18px;color:var(--muted);font-size:12px;line-height:1.6}.static-fallback{margin-top:30px;padding:26px 0 12px}.fallback-heading{display:flex;align-items:baseline;gap:18px}.fallback-heading h2{font-size:17px;margin:0 0 16px}.fallback-heading p{font-size:12px;color:var(--muted);margin:0}.packet-row{display:flex;gap:18px;align-items:center;margin:10px 0;font-size:12px}.packet-row strong{width:82px;flex-shrink:0}.packet-fields{display:flex;gap:5px;flex-wrap:wrap;align-items:center}.packet-fields span{padding:9px 10px;background:#ecefe7;border:1px solid #d8ddd3;border-radius:5px}.packet-fields .ip{background:#e0f0e9;border-color:#b1cebf}.packet-fields .encrypted{background:#ece3f5;color:#654296;border-color:#c9b5df}.packet-fields .auth{background:#fff0ce;color:#846320;border-color:#d7c186}.qualification{font-size:12px;line-height:1.8;color:var(--muted);max-width:930px;margin-top:18px}footer{border-top:1px solid #d7ddd2;padding-top:16px;font-size:11px;color:#748076}.scroll-hint{display:none}@media(max-width:700px){main{padding:28px 18px 22px}.eyebrow{font-size:11px;gap:8px}.method{display:none}h1{font-size:36px;margin-top:24px}.intro{font-size:14px;margin-bottom:24px}.topbar{padding:12px;gap:8px;flex-wrap:wrap}.modes button{padding:9px 14px}.duration{display:none}#mode-summary{font-size:12px}.beat{padding:20px 18px 4px;gap:10px;min-height:126px}#step-number{font-size:11px;width:52px}.beat h2{font-size:19px}.beat p{font-size:13px}.scroll-hint{display:block;margin:0;padding:6px 18px;font-size:11px;color:var(--muted)}.controls{padding:14px 12px 12px;gap:7px;flex-wrap:wrap}.controls button{padding:9px 12px;min-height:44px}#play{min-width:90px}#seek{order:3;flex-basis:70%}#clock{margin-left:auto}.motion-note{padding:0 14px 14px}.packet-row{align-items:flex-start;gap:8px;flex-direction:column;margin:18px 0}.fallback-heading{display:block}.fallback-heading h2{margin-bottom:6px}.fallback-heading p{margin-bottom:18px}.packet-fields span{font-size:12px;line-height:1.5}.qualification{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* Article-sized player: keep labels legible rather than scaling down the packet. */
main{padding:24px 18px 18px;max-width:1100px}h1{font-size:30px;margin:20px 0 12px}.intro{font-size:15px;margin-bottom:20px}.speed-label{display:flex;align-items:center;gap:6px;font-size:13px}select{font:inherit;min-height:42px;border:1px solid #ccd5c7;border-radius:7px;background:#fff;color:var(--ink);padding:6px}select:focus-visible{outline:3px solid #8761bc;outline-offset:3px}@media(max-width:600px){main{padding:18px 10px}h1{font-size:25px}.method{font-size:11px}.controls{gap:8px}.controls input[type=range]{flex-basis:100%;order:2}.speed-label{margin-left:auto}.topbar{flex-wrap:wrap;gap:10px}.duration{margin-left:0}.beat{padding:18px 14px 0;gap:10px}.beat h2{font-size:19px}}

@media(min-width:600px){.stage-frame svg{min-width:0}}