:root{--bg:#0b0b0c;--panel:#17181b;--chip:#222327;--muted:#8d9097;--yellow:#f8d800;--success:#3fd27a;--failure:#e5484d;--waiting:#5d606a}*{box-sizing:border-box}html,body{background:var(--bg);margin:0}body{color:#fff;font-family:Noto Sans KR,Malgun Gothic,sans-serif}.practice{--lane-h:0px;--video-h:min(100vw * 9 / 16, 100dvh - var(--lane-h));--video-w:calc(var(--video-h) * 16 / 9);--unit:clamp(10px, var(--video-h) * .023, 24px);flex-direction:column;align-items:center;height:100dvh;display:flex;overflow:hidden}.practice[data-lane=true]{--lane-h:72px}:where(.practice) button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}.stage{width:var(--video-w);height:var(--video-h);flex:none;position:relative;container-type:size}.stage video{width:100%;height:100%;display:block}.cover{z-index:2;background:#000000d9;position:absolute;inset:0}.cover-center{justify-content:center;align-items:center;gap:calc(var(--unit) * 1.5);pointer-events:none;flex-direction:column;display:flex;position:absolute;inset:0}.cover-center>*{pointer-events:auto}.cover-main{position:relative}.cover-count{place-items:center;display:grid}.cover-count span{font:italic 800 calc(var(--unit) * 5) / 1 sans-serif;text-shadow:0 2px 16px #000c}.start{height:2.9em;font-size:calc(var(--unit) * 17 / 13);background:#111;border-radius:999px;align-items:center;gap:.6em;padding:0 1.4em 0 .35em;font-weight:700;display:inline-flex;box-shadow:0 0 0 2px #fff3,0 6px 24px #000a}.start-icon{background:var(--yellow);color:#000;border-radius:50%;place-items:center;width:2.2em;height:2.2em;display:grid}.start-icon svg{width:.95em;height:.95em}.restart{height:2.4em;font-size:calc(var(--unit) * 14 / 13);color:#ddd;white-space:nowrap;background:#fff1;border-radius:999px;padding:0 1.1em;font-weight:700;position:absolute;top:50%;left:calc(100% + 1em);translate:0 -50%}.result{font-size:var(--unit);margin:0;padding-left:1.5em;line-height:1.6}.top-row{z-index:1;align-items:center;gap:calc(var(--unit) * 12 / 13);padding:calc(var(--unit) * 14 / 13) calc(var(--unit) * 16 / 13);font-size:var(--unit);display:flex;position:relative}.top-row .spacer{flex:1}.pattern-name{background:var(--yellow);color:#000;border-radius:999px;align-items:center;height:2em;padding:0 .8em;font-size:.9em;font-weight:700;display:inline-flex}.round{background:var(--chip);border-radius:50%;flex:none;place-items:center;width:2.4em;height:2.4em;display:grid}.round svg{width:1.2em;height:1.2em}.hover-zone{z-index:5;justify-content:center;display:flex;position:fixed;inset:0 0 auto}.hover-zone .top-row{width:var(--video-w);opacity:0;background:#000000a6;transition:opacity .15s}.hover-zone:hover .top-row,.hover-zone:focus-within .top-row{opacity:1}.toggle{background:var(--chip);height:2.4em;color:var(--muted);white-space:nowrap;border-radius:999px;align-items:center;gap:.5em;padding:0 .75em 0 .3em;font-size:1em;font-weight:700;display:inline-flex}.toggle-icon{background:#000;border-radius:50%;flex:none;place-items:center;width:1.8em;height:1.8em;display:grid}.toggle-icon svg{width:1.2em;height:1.2em}.toggle-icon img{filter:invert(.55);width:1.15em}.toggle-state{min-width:2.2em;font-style:italic;font-weight:800}.toggle[data-on=true]{color:#fff}.toggle[data-on=true] .toggle-icon{background:var(--yellow);color:#000}.toggle[data-on=true] .toggle-icon img{filter:none}.toggle[data-on=true] .toggle-state{color:var(--yellow)}.mask{pointer-events:none;position:absolute;inset:0}.mask>*{z-index:1;position:absolute}.mask-dim{background:#000000c2;-webkit-mask-composite:source-in;mask-composite:intersect}.mask-label{background:#000000f0;border-radius:.5cqw;box-shadow:0 0 6px 4px #000000c0}.mask-key{background:#121713;border-radius:50%;place-items:center;display:grid;overflow:hidden;translate:-50% -50%}.mask-key img{filter:invert();width:81%}.corner-toggle{z-index:3;opacity:.9;font-size:min(13px,.86cqw);position:absolute;left:97.54cqw;translate:-50% -50%}.corner-toggle:hover,.corner-toggle:focus-within{opacity:1}.corner-toggle .toggle:not([data-on=true]){color:#c9cbd0;box-shadow:inset 0 0 0 1px #ffffff4d}.lane-row{width:var(--video-w);height:var(--lane-h);font-size:min(var(--unit), 23px);flex:none;align-items:center;gap:8px;padding:8px 0;display:flex}.lane{background:var(--panel);border-radius:10px;flex:1;align-self:stretch;min-width:0;position:relative;overflow:hidden}.lane-note{--c:var(--waiting);--end:color-mix(in srgb, var(--c) 60%, #fff);background:var(--c);box-shadow:inset 3px 0 var(--end), inset -3px 0 var(--end);border-radius:1px;place-items:center;display:grid;position:absolute;top:3px;bottom:3px}.lane-note[data-look=now]{--c:var(--yellow)}.lane-note[data-look=success]{--c:var(--success)}.lane-note[data-look=failure]{--c:var(--failure)}.lane-note img{width:min(34px,100% - 10px)}.lane-note[data-look=waiting] img{filter:invert()}.lane-line{z-index:1;background:#fff;width:3px;position:absolute;top:0;bottom:0;translate:-50%}.lane-flash{z-index:2;pointer-events:none;border:2px solid var(--failure);border-radius:3px;width:26px;position:absolute;top:4px;bottom:4px;translate:-50%}.lane-flash[data-scored=true]{border-color:var(--success)}.rights{color:var(--muted);padding:16px;font-size:12px}.rights p{margin:0 0 4px}