:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--brand-50: #fdf2f8;--brand-100: #fce7f3;--brand-200: #fbcfe8;--brand-300: #f9a8d4;--brand-400: #f472b6;--brand-500: #e50c6a;--brand-600: #db2777;--brand-700: #be185d;--brand-800: #9d174d;--brand-900: #831843;--brand-950: #500724;--bg: #0e0a14;--surface: #16101e;--surface-2: #1f1828;--border: #2b2138;--text: #f5f3f7;--muted: #a3a1ab}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:radial-gradient(circle at 80% -10%,rgba(229,12,106,.12),transparent 50%),radial-gradient(circle at -10% 110%,rgba(190,24,93,.15),transparent 55%),var(--bg);color:var(--text)}a{color:var(--brand-400);text-decoration:none}a:hover{color:var(--brand-300);text-decoration:underline}.shell{display:flex;flex-direction:column;height:100%}.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);background:#16101ed9;backdrop-filter:blur(8px);flex-shrink:0}@media (max-width: 720px){.topbar{grid-template-columns:1fr auto;grid-template-areas:"brand cta" "url url";gap:8px}.topbar .brand{grid-area:brand}.topbar .cta{grid-area:cta}.topbar .urlbar{grid-area:url}}.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;white-space:nowrap;letter-spacing:-.01em}.brand img{height:28px;width:28px;display:block}.brand .product{color:var(--text)}.brand .sep{color:var(--muted);font-weight:400}.brand .label{color:var(--muted);font-weight:500;font-size:13px}.urlbar{display:flex;flex:1;min-width:0;gap:8px}.urlbar input{flex:1;min-width:0;padding:7px 12px;border-radius:6px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);font-size:13px}.urlbar input::placeholder{color:var(--muted)}.urlbar input:focus{outline:2px solid var(--brand-500);outline-offset:-1px;border-color:transparent}.urlbar button{padding:7px 16px;border-radius:6px;border:1px solid var(--brand-500);background:var(--brand-500);color:#fff;font-weight:600;font-size:13px;cursor:pointer;transition:background .15s ease,border-color .15s ease}.urlbar button:hover{background:var(--brand-600);border-color:var(--brand-600)}.cta{font-size:13px;white-space:nowrap;color:var(--muted)}.cta:hover{color:var(--brand-300)}.layout{flex:1;display:grid;grid-template-columns:280px 1fr;min-height:0}@media (max-width: 720px){.layout{grid-template-columns:1fr;grid-template-rows:1fr auto;grid-template-areas:"stage" "controls"}.layout .controls{grid-area:controls;border-right:none;border-top:1px solid var(--border);max-height:45vh}.layout .stage{grid-area:stage}}.controls{border-right:1px solid var(--border);background:var(--surface);padding:16px;overflow-y:auto}.controls h2{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 8px}.controls h2:first-child{margin-top:0}.row{display:flex;align-items:center;gap:10px;font-size:13px;padding:4px 0;cursor:pointer}.row>span:first-child{flex:0 0 50px}.row input[type=range]{flex:1;accent-color:var(--brand-500)}.row input[type=checkbox]{accent-color:var(--brand-500)}.zoomLabel{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;width:44px;text-align:right}.panelHost{border:1px solid var(--border);border-radius:8px;background:var(--surface-2);padding:8px;min-height:80px}.hint{margin-top:16px;font-size:11px;line-height:1.6;color:var(--muted)}.stage{display:flex;align-items:flex-start;justify-content:center;padding:32px;overflow:auto}@media (max-width: 720px){.stage{padding:16px}.footer{flex-direction:column;align-items:flex-start;gap:4px;padding:10px 16px}.topbar .cta{font-size:12px}.brand .label{display:none}}.pageWrap{position:relative;background:#fff;box-shadow:0 0 0 1px #ffffff0a,0 24px 60px #0000008c,0 6px 18px #e50c6a14;border-radius:4px}.empty{margin:auto;text-align:center;color:var(--muted);padding:40px;max-width:480px}.empty h1{color:var(--text);font-weight:600;font-size:24px;margin-bottom:8px;letter-spacing:-.01em}.empty p{font-size:14px;line-height:1.6}.footer{border-top:1px solid var(--border);background:var(--surface);padding:10px 20px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0}.footer a{color:var(--muted)}.footer a:hover{color:var(--brand-300)}
