:root{--bg:#f4f5f7;--surface:#fff;--surface-2:#f0f2f5;--border:#d9dde3;--text:#1c2330;--muted:#6b7686;--accent:#3b5bdb;--accent-text:#fff;--ok:#1f8a4c;--ok-bg:#e3f5ea;--warn:#b45309;--warn-bg:#fdf0dc;--err:#c92a2a;--err-bg:#fde8e8;--shadow:0 6px 24px #141e3226;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#14171c;--surface:#1c2027;--surface-2:#252a33;--border:#343b47;--text:#e6e9ef;--muted:#8f99a9;--accent:#748ffc;--accent-text:#0f1320;--ok:#51cf66;--ok-bg:#1b3326;--warn:#fcc419;--warn-bg:#3a2f12;--err:#ff8787;--err-bg:#3d2020;--shadow:0 6px 24px #00000080;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#14171c;--surface:#1c2027;--surface-2:#252a33;--border:#343b47;--text:#e6e9ef;--muted:#8f99a9;--accent:#748ffc;--accent-text:#0f1320;--ok:#51cf66;--ok-bg:#1b3326;--warn:#fcc419;--warn-bg:#3a2f12;--err:#ff8787;--err-bg:#3d2020;--shadow:0 6px 24px #00000080;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.mono{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:12.5px}.muted{color:var(--muted)}h2,h3{margin:0}.app{flex-direction:column;height:100%;display:flex;position:relative}.split{flex:1;grid-template-columns:1fr 1fr;gap:12px;min-height:0;padding:12px;display:grid}@media (width<=800px){.split{grid-template-rows:1fr 1fr;grid-template-columns:1fr}}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}.btn{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:6px 14px}.btn:hover:not(:disabled){background:var(--surface-2)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}.btn.primary:hover{filter:brightness(1.08);background:var(--accent)}.btn.small{padding:3px 10px;font-size:12.5px}.icon-btn{background:0 0;border:1px solid #0000;border-radius:6px;padding:2px 8px;font-size:16px;line-height:1.3}.icon-btn:hover:not(:disabled){background:var(--surface-2)}.chip{background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:1px 10px;font-size:12px}.chip.on{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}input,select,textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;min-width:0;padding:5px 8px}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}input[readonly],textarea[readonly]{background:var(--surface-2)}.topbar{background:var(--surface);border-bottom:1px solid var(--border);align-items:center;gap:12px;min-height:46px;padding:8px 12px;display:flex}.brand{font-weight:700}.spacer{flex:1}.dots{gap:6px;display:flex}.dot{border:2px solid var(--muted);background:0 0;border-radius:50%;width:12px;height:12px;padding:0}.dot.solved{background:var(--ok);border-color:var(--ok)}.dot.current{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent)}.challenge-title{text-align:left;background:0 0;border:none;border-radius:6px;padding:4px 6px;font-weight:600}.challenge-title:hover{background:var(--surface-2)}.challenge-title .caret{color:var(--muted);margin-left:6px}.drawer{z-index:20;pointer-events:none;width:calc(50% - 18px);position:absolute;top:46px;left:12px}.drawer-inner{pointer-events:auto;background:var(--surface);border:1px solid var(--border);width:100%;box-shadow:var(--shadow);border-top:none;border-radius:0 0 10px 10px;max-height:calc(100vh - 70px);padding:14px 18px 12px;overflow:auto}@media (width<=800px){.drawer{width:auto;right:12px}.drawer-inner{max-height:calc(50vh - 47px)}}.drawer-head{justify-content:space-between;align-items:center;display:flex}.drawer-head h2{align-items:center;gap:10px;font-size:16px;display:flex}.goal{margin:8px 0}.hints{align-items:flex-start;gap:16px;margin:8px 0 4px;display:flex}.husky{flex:none;width:88px;height:auto}.hint-talk{flex-direction:column;flex:1;align-items:flex-start;gap:8px;min-width:0;display:flex}.hint{--bubble-line:color-mix(in srgb, var(--warn) 40%, transparent);background:var(--warn-bg);border:1px solid var(--bubble-line);border-radius:12px;margin:0;padding:8px 12px;position:relative}.hint:before{content:"";background:inherit;border-left:1px solid var(--bubble-line);border-bottom:1px solid var(--bubble-line);width:11px;height:11px;position:absolute;top:14px;left:-7px;transform:rotate(45deg)}.hint-ask{--bubble-line:var(--border);background:var(--surface-2);color:var(--muted)}.explain{background:var(--ok-bg);border-radius:8px;padding:4px 14px 8px}.explain h3{text-transform:uppercase;letter-spacing:.04em;color:var(--ok);margin-top:10px;font-size:13px}.explain p{margin:4px 0 0}.drawer-nav{justify-content:space-between;align-items:center;margin-top:12px;display:flex}.all-done{color:var(--ok);font-weight:600}.drawer-foot{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;padding-top:10px;display:flex}.link{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:none;padding:0;text-decoration:underline}.link:hover:not(:disabled){color:var(--text)}.link:disabled{opacity:.4;cursor:default}.link.danger{color:var(--err)}.confirm{font-size:13px}.toast{background:var(--ok);color:#fff;box-shadow:var(--shadow);z-index:30;border-radius:99px;padding:8px 16px;font-weight:600;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.browser{background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-direction:column;min-height:0;display:flex;overflow:hidden}.browser-chrome{background:var(--surface-2);border-bottom:1px solid var(--border);align-items:center;gap:2px;padding:6px 8px;display:flex}.url-form{flex:1;margin-left:6px}.url-bar{border-radius:99px;width:100%;padding:4px 14px}.browser-view{background:#fff;border:none;flex:1;width:100%}.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-direction:column;min-height:0;display:flex;overflow:hidden}.panel-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.panel-head h2{font-size:15px}.switch{background:0 0;border:none;align-items:center;gap:8px;padding:0;display:flex}.switch .knob{background:var(--border);border-radius:99px;width:34px;height:20px;transition:background .15s;position:relative}.switch .knob:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:2px;left:2px}.switch.on .knob{background:var(--accent)}.switch.on .knob:after{transform:translate(14px)}.switch-label{font-weight:600}.status-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px;display:flex}.switch.small .knob{width:28px;height:16px}.switch.small .knob:after{width:12px;height:12px}.switch.small.on .knob:after{transform:translate(12px)}.switch.small .switch-label{color:var(--muted);font-size:12px;font-weight:500}.repeater{border:1px solid var(--border);background:var(--surface-2);border-radius:8px;margin:0 14px 10px;padding:10px 12px}.repeater-head{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.repeater h3{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0;font-size:12px}.repeater h3+*{margin-top:6px}.src{color:var(--accent)}.history li{align-items:center;gap:2px;display:flex}.hist-repeat{color:var(--muted);background:0 0;border:none;border-radius:6px;flex-shrink:0;padding:2px 7px;font-size:13px}.hist-repeat:hover{background:var(--border);color:var(--text)}.hist-badge.responsePaused{color:var(--warn);font-weight:700}.panel-main{flex:1;min-height:0;padding:12px 14px;overflow:auto}.empty{color:var(--muted);margin:24px 4px;line-height:1.7}.rec-title{margin-bottom:8px}.rec h3{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:16px 0 6px;font-size:12px}.tag{background:var(--surface-2);color:var(--muted);border-radius:99px;padding:1px 10px;font-size:12px;font-weight:600;display:inline-block}.tag.paused{background:var(--warn-bg);color:var(--warn)}.tag.sent{background:var(--ok-bg);color:var(--ok)}.tag.dropped{background:var(--err-bg);color:var(--err)}.editor{flex-direction:column;gap:10px;display:flex}.line{gap:6px;display:flex}.grow{flex:1}.group{flex-direction:column;gap:5px;display:flex}.group-title{text-transform:uppercase;letter-spacing:.05em;color:var(--muted);justify-content:space-between;align-items:center;font-size:12px;font-weight:600;display:flex}.group-actions{gap:6px;display:flex}.hrow{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.hname{flex:none;min-width:92px;font-size:12.5px;font-weight:600}.hv-input,.hv-preview{flex:1;min-width:0}.hv-preview{text-align:left;background:var(--surface-2);border:1px dashed var(--border);border-radius:6px;padding:5px 8px}.hv-preview:hover{border-style:solid}.claims{background:var(--surface-2);border:1px dashed var(--border);border-radius:6px;flex-direction:column;flex:1 0 100%;gap:4px;padding:6px 8px;display:flex}.claims-title{color:var(--muted);font-size:11.5px}.claim{align-items:center;gap:8px;display:flex}.claim .menu{flex:1;min-width:0;position:relative}.menu-btn{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:6px;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:5px 8px;display:flex}.menu-btn:disabled{background:var(--surface-2)}.menu-btn:focus-visible,.menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:-1px}.menu-caret{color:var(--muted)}.menu-list{z-index:30;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:8px;margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0}.menu-item{text-align:left;background:0 0;border:none;border-radius:6px;width:100%;padding:6px 8px}.menu-item:hover{background:var(--surface-2)}.menu-item.sel{color:var(--accent);font-weight:600}.claim>span{width:72px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;font-size:12.5px}.claim input{flex:1}.kv{align-items:center;gap:6px;display:flex}.kv .k{flex:0 0 34%}.kv .v{flex:1}.raw{resize:vertical;width:100%}.actions{gap:8px;display:flex}.error{color:var(--err);background:var(--err-bg);border-radius:6px;padding:6px 10px}.status{border-radius:6px;padding:2px 10px;font-weight:700;display:inline-block}.status-ok{background:var(--ok-bg);color:var(--ok)}.status-warn{background:var(--warn-bg);color:var(--warn)}.status-err{background:var(--err-bg);color:var(--err)}.response pre{background:var(--surface-2);border-radius:6px;max-height:280px;margin:0;padding:10px;overflow:auto}.history{border-top:1px solid var(--border);background:var(--surface-2);max-height:168px;margin:0;padding:4px;list-style:none;overflow:auto}.hist{text-align:left;background:0 0;border:none;border-radius:6px;justify-content:space-between;gap:10px;width:100%;padding:3px 10px;display:flex}.hist:hover{background:var(--border)}.hist.sel{background:color-mix(in srgb, var(--accent) 22%, transparent)}.hist-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.hist-badge{color:var(--muted);flex-shrink:0;font-size:12px}.hist-badge.pending{color:var(--warn);font-weight:700}.hist-badge.dropped{color:var(--err)}.browser{position:relative}.browser.locked .browser-chrome,.browser.locked .browser-view{filter:grayscale()opacity(.55)}.icon-btn.active{background:var(--accent);color:var(--accent-text)}.source-view{z-index:6;background:var(--surface);border-top:1px solid var(--border);flex-direction:column;display:flex;position:absolute;inset:44px 0 0}.source-head{color:var(--muted);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:10px;padding:6px 12px;font-size:12px;display:flex}.source-view pre{white-space:pre-wrap;word-break:break-word;flex:1;margin:0;padding:12px;overflow:auto}.browser-lock{text-align:center;background:color-mix(in srgb, var(--bg) 35%, transparent);cursor:not-allowed;z-index:5;justify-content:center;align-items:center;padding:24px;display:flex;position:absolute;inset:0}.browser-lock span{background:var(--warn-bg);color:var(--warn);box-shadow:var(--shadow);border-radius:99px;padding:8px 16px;font-weight:600}.history-toggle{background:var(--surface-2);border:none;border-top:1px solid var(--border);text-align:left;color:var(--muted);padding:6px 14px;font-size:12.5px}.history-toggle:hover{color:var(--text)}.fold-toggle{color:var(--muted);background:0 0;border:none;margin:14px 0 6px;padding:2px 0;font-size:12.5px;display:block}.fold-toggle:hover{color:var(--text)}.confetti{pointer-events:none;z-index:40;position:fixed;inset:0;overflow:hidden}.confetti i{left:var(--ox);top:var(--oy);width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);background:var(--c);border-radius:var(--r);will-change:transform, opacity;position:absolute}@media (prefers-reduced-motion:reduce){.confetti{display:none}}.tip-wrap{display:inline-flex}.tip-wrap>:disabled{pointer-events:none}.tip-bubble{z-index:60;background:var(--text);max-width:250px;color:var(--bg);letter-spacing:normal;text-transform:none;box-shadow:var(--shadow);pointer-events:none;border-radius:8px;padding:7px 10px;font-size:12.5px;font-weight:500;line-height:1.4;position:fixed}.tip-bubble:after{content:"";left:var(--arrow,50%);background:inherit;width:10px;height:10px;position:absolute;transform:translate(-50%)rotate(45deg)}.tip-bubble[data-side=below]:after{top:-4px}.tip-bubble[data-side=above]:after{bottom:-4px}.side{grid-auto-rows:minmax(0,1fr);gap:12px;min-height:0;display:grid}.side>.panel,.side>.intro{min-height:0}.intro{background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:10px;padding:16px 18px;display:flex;overflow:hidden}.intro-text{flex:1;min-width:0;font-size:13px;line-height:1.5;overflow:auto}.intro h2{margin:0 0 6px;font-size:16px}.intro p{margin:0 0 10px}.intro ul{margin:0 0 10px;padding:0;list-style:none}.intro li{color:var(--muted);margin:0 0 7px;padding-left:16px;position:relative}.intro li:before{content:"";background:var(--accent);border-radius:50%;width:6px;height:6px;position:absolute;top:.6em;left:2px}.intro li strong{color:var(--text)}.intro .intro-start{margin:0;font-weight:600}.intro-logo{--logo-w:clamp(88px, 14.4vh, 144px);padding:calc(var(--logo-w) * .2);background:#fff;border-radius:12px;flex:none;align-self:center}.intro-logo img{width:var(--logo-w);height:auto;display:block}@media (height<=940px){.intro{gap:8px;padding:12px 14px}.intro-text{font-size:clamp(11.5px,1.65vh,13px);line-height:1.35}.intro h2{margin-bottom:3px;font-size:15px}.intro p,.intro ul{margin-bottom:6px}.intro li{margin-bottom:4px}}@media (width<=800px){.intro{display:none}}.readonly-note{background:var(--surface-2);color:var(--muted);border-radius:8px;margin:0 0 10px;padding:7px 10px;font-size:12.5px;line-height:1.45}.owasp{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:99px;margin-top:8px;padding:1px 10px;font-size:11.5px;font-weight:600;display:inline-block}.code-compare{gap:8px;margin-top:10px;display:grid}.code{border:1px solid var(--border);background:var(--surface);border-radius:8px;margin:0;overflow:hidden}.code figcaption{letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;font-size:11px;font-weight:700}.code.bad figcaption{background:var(--err-bg);color:var(--err)}.code.good figcaption{background:var(--ok-bg);color:var(--ok)}.code pre{color:var(--text);margin:0;padding:8px 10px;font:12px/1.5 ui-monospace,SF Mono,Menlo,Consolas,monospace;overflow-x:auto}.finale-backdrop{z-index:35;background:#0a0e168c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.finale{border:1px solid var(--border);background:var(--surface);width:min(580px,100%);max-height:calc(100vh - 32px);box-shadow:var(--shadow);border-radius:14px;padding:22px 26px;font-size:14px;line-height:1.5;overflow:auto}.finale:focus{outline:none}.finale h2{margin:0 0 8px;font-size:21px}.finale h3{letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:18px 0 6px;font-size:12px}.finale p{margin:0}.finale ul{margin:0;padding:0;list-style:none}.finale-list li{border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;padding:6px 0;display:flex}.finale-list li:last-child{border-bottom:none}.finale-list .owasp{margin-top:0}.finale-links li{flex-direction:column;padding:5px 0;display:flex}.finale-links li span{color:var(--muted);font-size:13px}.finale a{color:var(--accent);font-weight:600}.finale-volkis{color:var(--muted);margin-top:18px}.finale-actions{border-top:1px solid var(--border);background:var(--surface);justify-content:flex-end;margin:18px -26px -22px;padding:12px 26px 22px;display:flex;position:sticky;bottom:-22px}.small-screen{display:none}@media (width<=800px){.small-screen{z-index:70;background:var(--bg);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:28px;display:flex;position:fixed;inset:0}.small-screen h2{margin:0;font-size:20px}.small-screen p{max-width:360px;color:var(--muted);margin:0 0 6px}}.level{vertical-align:middle;border:1px solid;border-radius:99px;margin-left:8px;padding:0 9px;font-size:11.5px;font-weight:700;line-height:1.6;display:inline-block}.drawer-head h2 .level{margin-left:0}.level-easy{color:var(--ok)}.level-medium{color:var(--warn)}.level-hard{color:var(--err)}