:root{color-scheme:dark;--bg:#070b17;--surface:#0d1426;--surface-2:#111a30;--line:#25304c;--text:#dce6fa;--muted:#8794af;--purple:#9b87f5;--cyan:#67e8f9;--danger:#fb7185;--top:70px;--bottom:34px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);overflow:hidden}body.is-resizing{cursor:col-resize;user-select:none}body.is-resizing iframe{pointer-events:none}button,input,select{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-5rem;left:1rem;z-index:20;background:var(--cyan);color:#041019;padding:.7rem 1rem;border-radius:.5rem}.skip-link:focus{top:1rem}
.topbar{height:var(--top);display:flex;align-items:center;gap:18px;padding:10px 16px;border-bottom:1px solid var(--line);background:#090f20;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;font-size:.85rem;font-weight:800;letter-spacing:.09em;white-space:nowrap}.brand span span{color:var(--cyan)}.brand svg{width:31px;height:25px;fill:none;stroke:var(--purple);stroke-width:2.5}.brand svg rect:nth-child(2){stroke:var(--cyan)}
.url-form{display:flex;align-items:center;position:relative;flex:1;max-width:740px}.url-form input{width:100%;height:42px;border:1px solid #34415f;border-radius:9px 0 0 9px;background:#070c18;color:var(--text);padding:0 14px 0 38px;outline:none}.url-form input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #67e8f926}.protocol{position:absolute;left:14px;color:var(--muted);z-index:1}.primary{height:42px;border:0;border-radius:0 9px 9px 0;padding:0 20px;background:linear-gradient(135deg,#826cf0,var(--purple));color:white;font-weight:750;cursor:pointer}.field-error{position:absolute;top:45px;left:4px;color:var(--danger);font-size:.72rem}
.global-actions{display:flex;align-items:center;gap:9px;margin-left:auto}.icon-button,.statusbar button{border:1px solid #303b58;background:#121a2d;color:var(--text);border-radius:8px;cursor:pointer}.icon-button{min-width:36px;height:36px}.text-button{display:flex;align-items:center;gap:6px;padding:0 10px}.text-button span:first-child{font-size:1.15rem}.toggle{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.75rem;white-space:nowrap;cursor:pointer}.toggle input{position:absolute;opacity:0}.toggle span{width:28px;height:16px;border-radius:99px;background:#34405a;position:relative;transition:.15s}.toggle span::after{content:"";position:absolute;width:12px;height:12px;left:2px;top:2px;border-radius:50%;background:#aab5ca;transition:.15s}.toggle input:checked+span{background:#6456bd}.toggle input:checked+span::after{transform:translateX(12px);background:white}
.workspace{--split:62%;height:calc(100% - var(--top) - var(--bottom));display:grid;grid-template-columns:minmax(0,var(--split)) 9px minmax(0,calc(100% - var(--split)));padding:10px 10px 8px}.panel{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);overflow:hidden}.panel-desktop{border-radius:12px 0 0 12px}.panel-mobile{border-radius:0 12px 12px 0}.panel-toolbar{min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-bottom:1px solid var(--line);background:var(--surface-2)}.panel-identity{display:flex;align-items:center;gap:9px;min-width:90px}.panel-dot{width:8px;height:8px;border-radius:50%;background:var(--purple);box-shadow:0 0 10px var(--purple)}.panel-mobile .panel-dot{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.panel h1{margin:0;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.dimensions{display:block;color:var(--muted);font:600 .67rem ui-monospace,SFMono-Regular,monospace;margin-top:3px}.panel-controls{display:flex;align-items:end;gap:7px}.panel-controls label{display:grid;gap:3px;color:var(--muted);font-size:.62rem;text-transform:uppercase;letter-spacing:.05em}.panel-controls select{height:30px;max-width:180px;border:1px solid #303b58;border-radius:6px;background:#0a1020;color:var(--text);font-size:.7rem;padding:0 25px 0 7px}.panel-controls .icon-button{height:30px;min-width:30px}.viewport-wrap{position:relative;flex:1;min-height:0;overflow:auto;background:#080d1a}.viewport-wrap iframe{display:block;border:0;width:100%;min-width:0;height:100%;margin-inline:auto;background:white}.empty-state,.loading-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;color:var(--muted)}.empty-state h2{color:var(--text);font-size:1rem;margin:.8rem 0 .25rem}.empty-state p{font-size:.8rem;max-width:260px;line-height:1.55;margin:0}.empty-icon{display:grid;place-items:center;width:64px;height:52px;border:1px solid #584ba5;border-radius:9px;color:var(--purple);font-size:2rem;background:#171a38}.mobile-icon{width:38px;border-color:#246e7a;color:var(--cyan);background:#0d2831}.loading-state{gap:12px;background:#080d1ae8;z-index:2;font-size:.78rem}.spinner{width:23px;height:23px;border:2px solid #33415e;border-top-color:var(--cyan);border-radius:50%;animation:spin .8s linear infinite}.divider{display:flex;align-items:center;justify-content:center;cursor:col-resize;background:#18213a;color:#6d7b98;outline:none;touch-action:none;user-select:none}.divider span{writing-mode:vertical-lr;font-size:.7rem;letter-spacing:2px}.divider:hover,.divider:focus,.divider.dragging{background:linear-gradient(var(--purple),var(--cyan));color:#07101c;box-shadow:0 0 18px #67e8f94d}.statusbar{height:var(--bottom);display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-top:1px solid var(--line);color:var(--muted);font-size:.68rem;background:#090f20}.statusbar>span{display:flex;align-items:center;gap:7px}.statusbar a{color:var(--cyan);text-decoration:none}.statusbar a:hover{text-decoration:underline}.footer-actions{justify-content:flex-end}.status-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 6px #4ade80}.statusbar button{padding:3px 8px;font-size:inherit}.toast{position:fixed;right:18px;bottom:48px;z-index:30;padding:10px 14px;border:1px solid #38516a;border-radius:8px;background:#132134;color:var(--text);font-size:.78rem;box-shadow:0 10px 30px #0008}dialog{max-width:500px;border:1px solid #34415f;border-radius:14px;background:#11192d;color:var(--text);padding:25px;box-shadow:0 24px 80px #000b}dialog::backdrop{background:#030610bf;backdrop-filter:blur(3px)}dialog h2{margin-top:0}dialog p,dialog li{color:var(--muted);line-height:1.55}.dialog-close{float:right;border:0;background:transparent;color:var(--muted);font-size:1.5rem;cursor:pointer}
button:focus-visible,select:focus-visible,input:focus-visible,.divider:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){.topbar{gap:10px}.brand span{display:none}.text-button span:last-child{display:none}.global-actions{gap:6px}.toggle{font-size:0}.panel-toolbar{align-items:flex-start}.panel-controls{flex-wrap:wrap;justify-content:flex-end}.panel-controls label{max-width:112px}.panel-controls select{max-width:112px}}
@media(max-width:720px){:root{--top:126px;--bottom:32px}body{overflow:auto}.topbar{height:var(--top);align-content:center;flex-wrap:wrap;padding:9px 12px}.brand span{display:inline}.url-form{order:3;flex-basis:100%;max-width:none}.global-actions{margin-left:auto}.toggle{font-size:0}.text-button{padding:0 8px}.workspace{height:auto;min-height:calc(100vh - var(--top) - var(--bottom));display:flex;flex-direction:column;padding:8px;gap:8px}.panel{height:58vh;min-height:390px;border-radius:10px}.divider{display:none}.panel-toolbar{min-height:75px}.statusbar{position:sticky;bottom:0}.footer-actions>span{display:none}}
@media(max-width:460px){.brand{font-size:.72rem}.panel-toolbar{display:block}.panel-controls{margin-top:7px;justify-content:flex-start}.panel-controls label{flex:1;max-width:none}.panel-controls select{width:100%;max-width:none}.toggle:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}