:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#141322;--muted:#636175;--line:#dedcf0;--surface:#fff;--soft:#f0edff;--brand:#6717cd;--brand-blue:#2871fa;--brand-strong:#4c0fa4;--gradient:linear-gradient(135deg, #6717cd 0%, #2871fa 100%);--accent:#2871fa;--danger:#b42318}*{box-sizing:border-box}body{color:var(--ink);background:radial-gradient(circle at 12% 0,#6717cd1f,#0000 34%),radial-gradient(circle at 100% 8%,#2871fa24,#0000 34%),#f8f7ff;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed;opacity:.6}.shell{min-height:100vh;padding:24px}.topbar{background:#090713;border:1px solid #ffffff1a;border-radius:10px;justify-content:space-between;align-items:center;gap:16px;max-width:1440px;margin:0 auto 28px;padding:14px 16px;display:flex;box-shadow:0 18px 60px #2871fa1f}.brand{align-items:center;gap:12px;display:flex}.brandLogo{object-fit:contain;width:auto;height:42px;display:block}.brand span,.siteInfo small,.colorMeta small,.previewHeader span,.muted{color:var(--muted)}.brand strong,.brand span{display:block}.brand strong{color:#fff}.brand span{color:#c8c0ea}.langSwitch{background:#ffffff14;border:1px solid #ffffff29;border-radius:8px;padding:3px;display:flex}.langSwitch button{color:#c8c0ea;background:0 0;border-radius:6px;min-width:44px;padding:8px 10px}.langSwitch .active{color:var(--brand);background:#fff;font-weight:700}.hero{gap:22px;max-width:1440px;margin:0 auto 24px;display:grid}.eyebrow{background:var(--gradient);color:#0000;letter-spacing:.08em;text-transform:uppercase;-webkit-background-clip:text;background-clip:text;margin:0 0 10px;font-size:.86rem;font-weight:800}h1{letter-spacing:0;max-width:980px;margin:0;font-size:clamp(2rem,4vw,4.25rem);line-height:1}h1:after{background:var(--gradient);content:"";border-radius:999px;width:min(260px,46vw);height:5px;margin-top:18px;display:block}.subtitle{color:var(--muted);max-width:760px;margin:16px 0 0;font-size:1.1rem;line-height:1.55}.scanForm{grid-template-columns:minmax(0,1fr) auto;gap:10px;max-width:820px;display:grid}.scanForm input{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:8px;min-width:0;padding:15px 16px}.scanForm button,.actions button,.cta a{background:var(--gradient);color:#fff;text-align:center;border-radius:8px;padding:14px 18px;font-weight:750;text-decoration:none}.actions button:nth-child(2){background:linear-gradient(135deg,#4c0fa4 0%,#1d5edc 100%)}.error{color:var(--danger);margin:0;font-weight:700}.workspace{grid-template-columns:390px minmax(0,1fr);gap:18px;max-width:1440px;margin:0 auto;display:grid}.controls,.previewPane{min-width:0}.controls{flex-direction:column;gap:16px;display:flex}.siteInfo,.colorList,.cssBox,.cta{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:16px;box-shadow:0 16px 42px #6717cd0f}.siteInfoHeader span,.siteInfoHeader strong,.siteInfo small{display:block}.siteInfoHeader strong{background:var(--gradient);color:#0000;-webkit-background-clip:text;background-clip:text;margin:4px 0;font-size:1.35rem}.infoGrid{grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 0;display:grid}.infoGrid div{border-top:1px solid var(--line);min-width:0;padding-top:10px}.infoGrid dt{color:var(--muted);text-transform:uppercase;margin:0 0 4px;font-size:.78rem;font-weight:750}.infoGrid dd{color:var(--ink);text-overflow:ellipsis;margin:0;font-weight:800;overflow:hidden}.infoGrid dd small{margin-top:2px;font-size:.76rem;font-weight:500}.panelHeader,.previewHeader,.actions{justify-content:space-between;align-items:center;gap:10px;display:flex}.panelHeader h2,.previewHeader h2,.cta h2{margin:0;font-size:1.05rem}.panelHeader button{color:var(--brand-blue);background:0 0;font-weight:800}.colorList{gap:10px;display:grid}.colorRow{border-bottom:1px solid var(--line);grid-template-columns:28px minmax(0,1fr) 44px;align-items:center;gap:10px;padding-bottom:10px;display:grid}.colorRow:last-child{border-bottom:0;padding-bottom:0}.swatch{border:1px solid var(--line);border-radius:999px;width:28px;height:28px}.colorMeta{min-width:0}.colorMeta strong,.colorMeta small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.colorRow input[type=color]{background:0 0;border:0;width:44px;height:38px;padding:0}.actions{align-items:stretch}.actions button{flex:1}.cssBox summary{cursor:pointer;font-weight:800}.cssBox pre{color:#dce9e2;white-space:pre-wrap;background:#100b22;border-radius:8px;padding:12px;overflow:auto}.cta{color:#fff;background:linear-gradient(135deg,#6717cde6,#2871fae6),#100b22}.cta p{color:#eeeaff;line-height:1.5}.cta a{color:var(--brand);background:#fff;display:inline-block}.previewPane{gap:12px;display:grid}.previewHeader span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.browserFrame{border:1px solid var(--line);background:#fff;border-radius:8px;height:min(78vh,920px);min-height:560px;overflow:hidden;box-shadow:0 20px 70px #2871fa1f}.browserFrame iframe,.emptyPreview{border:0;width:100%;height:100%}.emptyPreview{color:var(--muted);text-align:center;place-items:center;display:grid}@media (max-width:980px){.workspace{grid-template-columns:1fr}.browserFrame{height:680px}}@media (max-width:640px){.shell{padding:16px}.topbar,.scanForm{grid-template-columns:1fr}.topbar,.scanForm,.panelHeader,.previewHeader{align-items:stretch;display:grid}.langSwitch{justify-self:start}}