:root{--hud-bg:#060e18db;--hud-bg-strong:#040a12f5;--hud-border:#785a28;--hud-border-bright:#c8aa6e;--hud-gold:#f0e6d2;--hud-gold-dim:#a09b8c;--hud-teal:#0ac8b9;--hud-teal-dim:#0a7f78;--hud-red:#e8524f;--hud-green:#55d685;--hud-blue:#5b9bd5;--hud-font:"Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;--hud-serif:"Noto Serif KR", Georgia, serif}.hud{pointer-events:none;font-family:var(--hud-font);color:var(--hud-gold);-webkit-user-select:none;user-select:none;font-size:13px;position:absolute;inset:0}.hud button,.hud input,.hud select{font:inherit}.hud>*{pointer-events:auto}.hx-panel{background:var(--hud-bg);border:1px solid var(--hud-border);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:3px;box-shadow:0 0 0 1px #000000b3,inset 0 0 0 1px #c8aa6e1f}.hx-title{font-family:var(--hud-serif);letter-spacing:.08em;color:var(--hud-border-bright);text-transform:uppercase;font-size:11px}.hx-btn{cursor:pointer;color:var(--hud-border-bright);border:1px solid var(--hud-border);letter-spacing:.04em;background:linear-gradient(#1e2328,#0b1016);border-radius:2px;padding:6px 12px}.hx-btn:hover{border-color:var(--hud-border-bright);color:#fff}.hx-btn.primary{color:#eafffb;border-color:var(--hud-teal);background:linear-gradient(#0e7a73,#064a46)}.hx-btn.danger{color:#f0b3b3;border-color:#6b2a2a}.hx-btn:disabled{opacity:.45;cursor:default}.hud-top{align-items:center;gap:8px;padding:6px 10px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%)}.hud-top .mode-tab{cursor:pointer;color:var(--hud-gold-dim);border:1px solid #0000;padding:4px 10px}.hud-top .mode-tab.active{color:var(--hud-gold);border-color:var(--hud-border);background:#c8aa6e14}.drawer{flex-direction:column;width:300px;transition:transform .2s;display:flex;position:absolute;top:12px;bottom:118px;left:12px}.drawer.collapsed{transform:translate(-288px)}.drawer-toggle{writing-mode:vertical-rl;cursor:pointer;background:var(--hud-bg-strong);border:1px solid var(--hud-border);color:var(--hud-border-bright);letter-spacing:.2em;border-left:none;border-radius:0 3px 3px 0;padding:10px 4px;position:absolute;top:8px;right:-1px;transform:translate(100%)}.drawer-head{border-bottom:1px solid #785a2880;padding:10px 12px 6px}.drawer-head input{box-sizing:border-box;border:1px solid var(--hud-border);width:100%;color:var(--hud-gold);background:#05090f;border-radius:2px;margin-top:8px;padding:6px 8px}.drawer-list{scrollbar-width:thin;scrollbar-color:var(--hud-border) transparent;flex:1;padding:4px 0;overflow-y:auto}.drawer-group{color:var(--hud-teal);letter-spacing:.1em;padding:8px 12px 2px;font-size:11px}.combo-row{cursor:pointer;border-left:2px solid #0000;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:6px 12px;display:grid}.combo-row:hover{background:#c8aa6e12}.combo-row.selected{border-left-color:var(--hud-teal);background:#0ac8b91a}.combo-row .id{color:var(--hud-gold-dim);font-family:var(--hud-serif)}.combo-row .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.combo-row .stars{color:var(--hud-border-bright);letter-spacing:-.05em;font-size:10px}.combo-row .rate{color:var(--hud-gold-dim);font-size:10px}.drawer-detail{border-top:1px solid #785a2880;max-height:40%;padding:10px 12px;overflow-y:auto}.drawer-detail .notation{font-family:var(--hud-serif);color:#fff;margin:4px 0 6px;font-size:15px}.drawer-detail .desc{color:var(--hud-gold-dim);line-height:1.45}.drawer-detail ul{color:var(--hud-gold-dim);margin:6px 0 0;padding-left:16px}.drawer-detail .actions{gap:8px;margin-top:10px;display:flex}.step-guide{align-items:flex-start;gap:6px;max-width:78vw;padding:8px 10px;display:flex;position:absolute;bottom:118px;left:50%;transform:translate(-50%)}.step-chip{text-align:center;border:1px solid var(--hud-border);background:#00000059;border-radius:2px;min-width:46px;padding:6px 8px 5px;position:relative}.step-chip .glyph{font-family:var(--hud-serif);color:var(--hud-gold);font-size:17px;line-height:1}.step-chip .label{color:var(--hud-gold-dim);white-space:nowrap;margin-top:3px;font-size:10px}.step-chip .delta{min-height:12px;color:var(--hud-teal);margin-top:2px;font-size:10px}.step-chip .window{color:var(--hud-gold-dim);opacity:.8;font-size:9px}.step-chip.current{border-color:var(--hud-teal);animation:1s ease-in-out infinite pulse;box-shadow:0 0 12px #0ac8b973}.step-chip.done{border-color:var(--hud-green)}.step-chip.done .glyph{color:var(--hud-green)}.step-chip.failed{border-color:var(--hud-red);background:#e8524f26}.step-chip.failed .glyph,.step-chip.failed .delta{color:var(--hud-red)}.step-arrow{color:var(--hud-gold-dim);align-self:center;font-size:12px}@keyframes pulse{0%,to{box-shadow:0 0 6px #0ac8b94d}50%{box-shadow:0 0 16px #0ac8b9b3}}.ability-bar{align-items:flex-end;gap:10px;padding:10px 14px 8px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.ability{text-align:center;width:54px;position:relative}.ability .icon{border:1px solid var(--hud-border-bright);background:radial-gradient(circle at 30% 30%,#143a4a,#06121c 70%);border-radius:3px;width:48px;height:48px;margin:0 auto;position:relative;overflow:hidden}.ability .icon svg{width:100%;height:100%}.ability .cooldown{background:conic-gradient(#000000c7 var(--sweep,0%), transparent 0);pointer-events:none;position:absolute;inset:0}.ability .cd-text{font-family:var(--hud-serif);color:#fff;text-shadow:0 0 4px #000;place-items:center;font-size:16px;display:grid;position:absolute;inset:0}.ability .key{color:var(--hud-gold);background:#0009;border-radius:2px;padding:0 4px;font-size:10px;position:absolute;bottom:2px;left:3px}.ability .caption{color:var(--hud-gold-dim);margin-top:3px;font-size:10px}.ability.used .icon{filter:grayscale()brightness(.5)}.ability.ready .icon{box-shadow:0 0 10px #0ac8b9b3}.pips{justify-content:center;gap:3px;margin-top:4px;display:flex}.pip{border:1px solid var(--hud-border);background:#111;width:12px;height:5px}.pip.on{background:var(--hud-teal);box-shadow:0 0 6px var(--hud-teal)}.ability.tornado .icon{box-shadow:0 0 14px #8ce6ffe6}.right-col{flex-direction:column;gap:10px;width:280px;display:flex;position:absolute;top:12px;bottom:118px;right:12px;overflow:hidden}.result-panel{padding:12px 14px}.result-panel .verdict{font-family:var(--hud-serif);letter-spacing:.06em;font-size:22px}.result-panel .verdict.success{color:var(--hud-green)}.result-panel .verdict.fail{color:var(--hud-red)}.result-panel .verdict.pending{color:var(--hud-gold-dim)}.result-panel .score{font-size:30px;font-family:var(--hud-serif);color:#fff}.result-panel .meta{color:var(--hud-gold-dim);margin-top:4px;font-size:12px}.timeline{flex-direction:column;gap:5px;margin-top:10px;display:flex}.timeline .row{grid-template-columns:52px 1fr 48px;align-items:center;gap:6px;font-size:11px;display:grid}.timeline .track{background:#0a141d;border:1px solid #283640;height:8px;position:relative}.timeline .win{background:#0ac8b94d;position:absolute;top:0;bottom:0}.timeline .mark{background:#fff;width:2px;height:12px;position:absolute;top:-3px}.timeline .mark.bad{background:var(--hud-red)}.result-panel .actions{align-items:center;gap:8px;margin-top:10px;display:flex}.hint{color:var(--hud-gold-dim);font-size:11px}.stats-panel{flex:1;padding:12px 14px;overflow-y:auto}.stats-grid{grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0;display:grid}.stat{text-align:center;background:#0000004d;border:1px solid #785a2866;padding:6px}.stat b{font-family:var(--hud-serif);color:#fff;font-size:18px;display:block}.stat span{color:var(--hud-gold-dim);font-size:10px}.sparkline{width:100%;height:46px;display:block}.modal-backdrop{background:#0000008c;place-items:center;display:grid;position:absolute;inset:0}.modal{width:440px;max-height:86vh;padding:16px 18px;overflow-y:auto}.modal h2{font-family:var(--hud-serif);color:var(--hud-border-bright);letter-spacing:.1em;margin:0 0 10px;font-size:16px;font-weight:400}.setting-row{border-bottom:1px solid #785a284d;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:7px 0;display:grid}.setting-row .sub{color:var(--hud-gold-dim);font-size:11px}.setting-row input[type=range]{width:150px;accent-color:var(--hud-teal)}.setting-row .value{text-align:right;min-width:56px;font-family:var(--hud-serif)}.keybind{grid-template-columns:repeat(4,1fr);gap:6px;margin:6px 0;display:grid}.keybind button{padding:8px 4px}.keybind button.listening{border-color:var(--hud-teal);color:var(--hud-teal)}.modal .actions{justify-content:flex-end;gap:8px;margin-top:12px;display:flex}.countdown{font-family:var(--hud-serif);color:#fff;text-shadow:0 0 24px #0ac8b9e6,0 2px #000;pointer-events:none;font-size:96px;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)}.countdown small{letter-spacing:.3em;color:var(--hud-border-bright);text-align:center;font-size:14px;display:block}.toasts{pointer-events:none;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:64px;left:50%;transform:translate(-50%)}.toast{background:var(--hud-bg-strong);border:1px solid var(--hud-border);border-radius:2px;padding:6px 14px;animation:.15s ease-out toast-in}.toast.warn{color:#ffe08a;border-color:#b08a2e}.toast.success{border-color:var(--hud-green);color:#c9ffd9}.toast.fail{border-color:var(--hud-red);color:#ffd0cf}@keyframes toast-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.attack-cursor{cursor:crosshair}@media (width<=1100px){.right-col{width:230px}.drawer{width:250px}.drawer.collapsed{transform:translate(-238px)}}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#0d1512}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}canvas{width:100%;height:100%;display:block}