*{box-sizing:border-box}:root{--page:#f2f1ed;--panel:#f8f7f4;--line:#dcdad3;--line-soft:#e8e6df;--ink:#171719;--muted:#77766f;--muted-2:#9a9890;--white:#fff;--shadow:0 30px 80px #18181414}html{scroll-behavior:smooth}body{background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,textarea{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline-offset:2px;outline:2px solid #5968ff}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.app-shell{min-height:100dvh}.app-header{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:20;background:#f2f1ede0;grid-template-columns:1fr auto 1fr;align-items:center;height:64px;padding:0 20px;display:grid;position:sticky;top:0}.wordmark{width:fit-content;color:var(--ink);letter-spacing:-.055em;font-size:19px;font-weight:760;text-decoration:none}.wordmark span{color:#6772ff}.header-center{color:#68675f;letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:8px;font-size:11px;font-weight:650;display:flex}.live-dot{background:#45a87c;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 4px #45a87c1a}.header-action{border:1px solid var(--line);cursor:pointer;background:#ffffff73;border-radius:8px;justify-self:end;align-items:center;gap:7px;padding:8px 11px;font-size:12px;font-weight:600;display:inline-flex}.header-action:hover{background:#fff}.studio-grid{grid-template-columns:minmax(275px,330px) minmax(520px,1fr) minmax(300px,360px);min-height:calc(100dvh - 64px);display:grid}.control-panel,.export-panel{background:var(--panel);padding:26px 22px 34px}.control-panel{border-right:1px solid var(--line)}.export-panel{border-left:1px solid var(--line)}.panel-heading,.export-heading{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px;display:flex}.panel-heading h2,.export-heading h2{letter-spacing:-.035em;margin:5px 0 0;font-size:18px;line-height:1.1}.section-kicker{color:var(--muted-2);letter-spacing:.14em;text-transform:uppercase;font-size:9px;font-weight:730;display:block}.panel-count{color:#a19f97;font-family:SFMono-Regular,Consolas,monospace;font-size:11px}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.preset-card{border:1px solid var(--line-soft);color:#6f6e68;text-align:left;cursor:pointer;background:#fdfcf9;border-radius:10px;grid-template-columns:auto 1fr;align-items:center;gap:10px;min-width:0;padding:11px;font-size:11px;transition:all .16s;display:grid}.preset-card:hover{border-color:#c9c6bd;transform:translateY(-1px)}.preset-card.is-active{border-color:color-mix(in srgb, var(--item-accent) 45%, #c8c6bf);background:color-mix(in srgb, var(--item-accent) 6%, #fff);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--item-accent) 12%, transparent)}.preset-code{min-width:28px;color:var(--item-accent);font-family:SFMono-Regular,Consolas,monospace;font-size:10px;font-weight:700}.control-section{border-top:1px solid var(--line-soft);margin-top:28px;padding-top:24px}.layout-list{gap:5px;margin-top:12px;display:grid}.layout-option{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px;grid-template-columns:49px 1fr auto;align-items:center;gap:10px;width:100%;padding:8px;display:grid}.layout-option:hover,.layout-option.is-active{border-color:var(--line-soft);background:#fff}.layout-option strong{font-size:11px;font-weight:680;display:block}.layout-option small{color:var(--muted-2);margin-top:2px;font-size:9px;line-height:1.3;display:block}.layout-thumb{background:#f6f5f1;border:1px solid #dfddd6;border-radius:5px;flex-direction:column;justify-content:center;gap:3px;height:34px;padding:6px;display:flex}.layout-thumb i{background:#a7a59e;width:65%;height:2px;display:block}.layout-thumb i:nth-child(2){background:#37373a;width:88%;height:4px}.layout-thumb i:nth-child(3){width:50%}.thumb-signal{align-items:center}.thumb-signal i:first-child{background:0 0;border:1px solid #777;border-radius:50%;width:8px;height:8px}.thumb-signal i:nth-child(2){width:74%}.thumb-editorial i:nth-child(2){width:96%;height:7px}.thumb-terminal{background:#202125}.thumb-terminal i{background:#777b79}.thumb-terminal i:nth-child(2){background:#d8dad7}.radio-mark{border:1px solid #c5c3bd;border-radius:50%;width:12px;height:12px}.layout-option.is-active .radio-mark{border:4px solid #222226}.segmented-control{background:#ebe9e3;border-radius:8px;grid-template-columns:repeat(3,1fr);gap:2px;margin:12px 0 16px;padding:3px;display:grid}.segmented-control button{color:#77756f;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:7px 5px;font-size:10px;font-weight:630}.segmented-control button.is-active{color:#202023;background:#fff;box-shadow:0 1px 4px #23231f12}.field-label{gap:6px;margin-top:12px;display:grid}.field-label>span{color:#6f6e68;letter-spacing:.03em;font-size:9px;font-weight:680}.field-label input,.field-label textarea{border:1px solid var(--line);color:#222225;background:#fff;border-radius:8px;width:100%;font-size:11px;line-height:1.45;transition:border-color .14s,box-shadow .14s}.field-label input{height:34px;padding:0 10px}.field-label textarea{resize:vertical;padding:9px 10px}.field-label input:focus,.field-label textarea:focus{border-color:#9599c9;outline:0;box-shadow:0 0 0 3px #5f6cff14}.field-label small{color:#aaa89f;justify-self:end;font-size:8px}.field-split{grid-template-columns:1fr 1fr;gap:8px;display:grid}.compact-section{gap:2px;display:grid}.compact-section>.section-kicker{margin-bottom:8px}.toggle-row{color:#5f5e58;cursor:pointer;justify-content:space-between;align-items:center;gap:12px;min-height:34px;font-size:10px;display:flex}.toggle{background:#d7d4cd;border-radius:999px;width:27px;height:16px;padding:2px;transition:all .16s}.toggle span{background:#fff;border-radius:50%;width:12px;height:12px;transition:all .16s;display:block;box-shadow:0 1px 2px #00000029}.toggle.is-on{background:#26262a}.toggle.is-on span{transform:translate(11px)}.inline-field{margin-top:7px}.workspace{background-color:#efeee9;background-image:linear-gradient(#54524c09 1px,#0000 1px),linear-gradient(90deg,#54524c09 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:24px 24px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;min-width:0;padding:24px clamp(18px,2.4vw,34px) 30px}.workspace-toolbar{justify-content:space-between;align-items:center;gap:14px;min-height:38px;margin-bottom:14px;display:flex}.toolbar-title{align-items:baseline;gap:12px;display:flex}.toolbar-title .section-kicker{display:inline}.toolbar-title strong{letter-spacing:-.015em;font-size:11px}.toolbar-actions{gap:8px;display:flex}.icon-segment,.theme-button{background:#ffffff8c;border:1px solid #d6d3cc;border-radius:8px}.icon-segment{padding:2px;display:flex}.icon-segment button{color:#88867f;cursor:pointer;background:0 0;border:0;border-radius:6px;place-items:center;width:30px;height:28px;display:grid}.icon-segment button.is-active{color:#252529;background:#fff;box-shadow:0 1px 4px #22221e14}.theme-button{cursor:pointer;align-items:center;gap:6px;padding:0 10px;font-size:9px;font-weight:650;display:inline-flex}.browser-frame{width:100%;box-shadow:var(--shadow);background:#fff;border:1px solid #d2cfc7;border-radius:14px;margin:0 auto;transition:width .24s;overflow:hidden}.browser-frame.device-mobile{width:min(390px,100%)}.browser-bar{background:#f7f6f2;border-bottom:1px solid #e1dfd9;grid-template-columns:55px minmax(0,1fr) 55px;align-items:center;gap:8px;height:38px;padding:0 12px;display:grid}.browser-lights{gap:5px;display:flex}.browser-lights i{background:#e8e6e0;border:1px solid #cbc8c0;border-radius:50%;width:7px;height:7px}.address-bar{color:#9b9991;text-align:center;text-overflow:ellipsis;white-space:nowrap;background:#fff;border:1px solid #e4e1da;border-radius:6px;width:min(330px,100%);min-width:0;margin:0 auto;padding:5px 12px;font-size:8px;overflow:hidden}.browser-menu{color:#aaa79f;letter-spacing:1px;justify-self:end;font-size:9px}.preview-viewport{height:clamp(430px,58vh,650px);min-height:430px}.error-canvas{--canvas-bg:#f7f7f3;--canvas-ink:#121316;--canvas-muted:#72736f;--canvas-line:#ddddd6;background:var(--canvas-bg);height:100%;color:var(--canvas-ink);isolation:isolate;grid-template-rows:auto 1fr auto;padding:clamp(22px,3vw,44px);transition:background .18s,color .18s;display:grid;position:relative;overflow:hidden}.error-canvas.theme-dark{--canvas-bg:#0d0e11;--canvas-ink:#f2f2ef;--canvas-muted:#959590;--canvas-line:#2d2e32}.canvas-noise{z-index:-1;pointer-events:none;opacity:.35;background-image:radial-gradient(#50505014 .55px,#0000 .55px);background-size:4px 4px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 80%);mask-image:linear-gradient(#000,#0000 80%)}.error-topline,.error-footer{justify-content:space-between;align-items:center;gap:16px;display:flex}.preview-brand{letter-spacing:-.035em;font-size:11px;font-weight:720}.status-pill{border:1px solid var(--canvas-line);color:var(--canvas-muted);border-radius:999px;align-items:center;gap:6px;padding:5px 8px;font-family:SFMono-Regular,Consolas,monospace;font-size:8px;display:inline-flex}.status-dot{background:var(--error-accent);width:5px;height:5px;box-shadow:0 0 0 3px color-mix(in srgb, var(--error-accent) 15%, transparent);border-radius:50%}.error-composition{align-items:center;min-height:0;display:flex;position:relative}.error-copy{z-index:2;max-width:600px;position:relative}.error-eyebrow{color:var(--error-accent);letter-spacing:.13em;text-transform:uppercase;margin:0 0 12px;font-size:9px;font-weight:760}.error-copy h1{letter-spacing:-.06em;text-wrap:balance;max-width:610px;margin:0;font-size:clamp(40px,5.4vw,76px);line-height:.98}.error-body{max-width:510px;color:var(--canvas-muted);margin:20px 0 0;font-size:clamp(11px,1.1vw,14px);line-height:1.7}.error-actions{flex-wrap:wrap;gap:8px;margin-top:26px;display:flex}.preview-primary,.preview-secondary{cursor:pointer;border-radius:999px;min-height:36px;padding:0 14px;font-size:9px;font-weight:680}.preview-primary{border:1px solid var(--canvas-ink);background:var(--canvas-ink);color:var(--canvas-bg);align-items:center;gap:8px;display:inline-flex}.preview-secondary{border:1px solid var(--canvas-line);color:var(--canvas-ink);background:0 0}.error-meta{border-top:1px solid var(--canvas-line);max-width:560px;color:color-mix(in srgb, var(--canvas-muted) 78%, transparent);justify-content:space-between;gap:16px;margin-top:24px;padding-top:14px;font-size:8px;display:flex}.error-meta code{letter-spacing:.02em;font-family:SFMono-Regular,Consolas,monospace}.error-code-mark{z-index:0;color:color-mix(in srgb, var(--canvas-ink) 3%, transparent);letter-spacing:-.09em;-webkit-user-select:none;user-select:none;font-size:clamp(140px,25vw,340px);font-weight:800;line-height:.7;position:absolute;bottom:3%;right:-.02em}.error-footer{color:color-mix(in srgb, var(--canvas-muted) 70%, transparent);font-size:7px}.error-footer span:nth-child(2){margin-left:auto}.layout-signal .error-composition{text-align:center;justify-content:center}.layout-signal .error-copy{max-width:570px}.layout-signal .error-body{margin-left:auto;margin-right:auto}.layout-signal .error-actions,.layout-signal .error-meta{justify-content:center}.layout-signal .error-meta code{border-left:1px solid var(--canvas-line);padding-left:12px}.layout-signal .error-code-mark{display:none}.signal-orbit{aspect-ratio:1;border:1px solid color-mix(in srgb, var(--error-accent) 17%, transparent);opacity:.7;border-radius:50%;width:min(390px,80%);position:absolute}.signal-orbit:before,.signal-orbit:after,.signal-orbit span{content:"";border:1px solid color-mix(in srgb, var(--error-accent) 15%, transparent);border-radius:50%;position:absolute;inset:15%}.signal-orbit:after{background:color-mix(in srgb, var(--error-accent) 5%, transparent);inset:31%}.signal-orbit span:first-child{background:var(--error-accent);box-shadow:0 0 35px color-mix(in srgb, var(--error-accent) 50%, transparent);border:0;inset:49%}.signal-orbit span:nth-child(2){border-top-color:var(--error-accent);inset:-1px;transform:rotate(24deg)}.signal-orbit span:nth-child(3){border-right-color:var(--error-accent);inset:23%;transform:rotate(-19deg)}.layout-editorial .error-copy{max-width:720px}.layout-editorial .error-copy h1{letter-spacing:-.055em;max-width:720px;font-family:Georgia,Times New Roman,serif;font-size:clamp(46px,6.4vw,92px);font-weight:500;line-height:.94}.layout-editorial .error-eyebrow{color:var(--canvas-muted)}.layout-editorial .error-code-mark{color:color-mix(in srgb, var(--error-accent) 9%, transparent);font-family:Georgia,Times New Roman,serif;font-weight:400;top:17%;bottom:auto;right:3%}.layout-terminal{--canvas-bg:#141619;--canvas-ink:#e8ebe6;--canvas-muted:#8d938c;--canvas-line:#30343a;background-image:linear-gradient(#7880770a 1px,#0000 1px),linear-gradient(90deg,#7880770a 1px,#0000 1px);background-size:24px 24px}.layout-terminal.theme-light{--canvas-bg:#f0f1ed;--canvas-ink:#20241f;--canvas-muted:#6d746d;--canvas-line:#d5d8d2}.layout-terminal .error-copy h1,.layout-terminal .error-body,.layout-terminal .preview-primary,.layout-terminal .preview-secondary{font-family:SFMono-Regular,Consolas,monospace}.layout-terminal .error-copy h1{letter-spacing:-.045em;max-width:650px;font-size:clamp(30px,4vw,58px);line-height:1.08}.layout-terminal .error-body{font-size:10px;line-height:1.8}.layout-terminal .error-code-mark{opacity:.8;font-family:SFMono-Regular,Consolas,monospace}.terminal-line{border-top:1px solid var(--canvas-line);border-bottom:1px solid var(--canvas-line);color:var(--canvas-muted);text-transform:uppercase;grid-template-columns:1fr auto auto;gap:15px;padding:7px 9px;font-family:SFMono-Regular,Consolas,monospace;font-size:7px;display:grid;position:absolute;top:12%;left:0;right:0}.tone-warm .error-eyebrow{letter-spacing:.06em;text-transform:none}.tone-warm .error-copy h1{letter-spacing:-.05em}.tone-technical .error-body,.tone-technical .error-meta{font-family:SFMono-Regular,Consolas,monospace}.device-mobile .error-canvas{padding:24px 22px}.device-mobile .error-copy h1{font-size:41px}.device-mobile .error-body{font-size:11px}.device-mobile .error-actions{flex-direction:column;align-items:stretch}.device-mobile .preview-primary,.device-mobile .preview-secondary{justify-content:center;width:100%}.device-mobile .error-meta{flex-direction:column;align-items:flex-start;gap:8px}.device-mobile .error-code-mark{font-size:170px;right:-4%}.device-mobile .error-footer span:nth-child(2){display:none}.diagnostic-grid{grid-template-columns:1.25fr 1fr 1fr;gap:8px;margin-top:16px;display:grid}.diagnostic-card{background:#f9f8f4c7;border:1px solid #d9d6cf;border-radius:10px;align-items:center;gap:10px;min-width:0;padding:12px;display:flex}.diagnostic-card>div:last-child{min-width:0}.diag-label{color:#9a9890;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px;font-size:7px;font-weight:720;display:block}.diagnostic-card strong{text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:680;display:block;overflow:hidden}.diagnostic-card small{color:#8e8c85;margin-top:3px;font-size:7px;line-height:1.4;display:block}.diag-icon{color:#686760;border:1px solid #d8d5ce;border-radius:50%;flex:none;place-items:center;width:29px;height:29px;display:grid}.diag-icon.good{color:#34815e}.score-card{gap:12px}.score-ring{--score:330deg;background:conic-gradient(#242429 var(--score), #dfddd6 0);border-radius:50%;flex:none;place-items:center;width:38px;height:38px;display:grid;position:relative}.score-ring:after{content:"";background:#f7f6f2;border-radius:50%;position:absolute;inset:4px}.score-ring span{z-index:1;font-size:9px;font-weight:750;position:relative}.export-icon{border:1px solid var(--line);color:#74736c;border-radius:8px;flex:none;place-items:center;width:31px;height:31px;display:grid}.export-intro{color:#797871;margin:-4px 0 18px;font-size:10px;line-height:1.55}.export-tabs{background:#e9e7e0;border-radius:8px;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px;display:grid}.export-tabs button{color:#88867f;cursor:pointer;background:0 0;border:0;border-radius:6px;padding:7px;font-size:9px;font-weight:650}.export-tabs button.is-active{color:#232327;background:#fff;box-shadow:0 1px 4px #23231f12}.code-window{background:#17191c;border:1px solid #282a2e;border-radius:10px;margin-top:10px;overflow:hidden}.code-toolbar{color:#8e9297;border-bottom:1px solid #2d3034;justify-content:space-between;align-items:center;gap:10px;min-height:36px;padding:0 10px 0 12px;font-family:SFMono-Regular,Consolas,monospace;font-size:8px;display:flex}.code-toolbar button{color:#c8cbd0;cursor:pointer;background:#202226;border:1px solid #373a3e;border-radius:6px;align-items:center;gap:5px;padding:5px 7px;font-family:inherit;font-size:8px;display:inline-flex}.code-window pre{color:#c7d0c8;tab-size:2;white-space:pre;height:340px;margin:0;padding:14px;font-family:SFMono-Regular,Consolas,monospace;font-size:8px;line-height:1.65;overflow:auto}.code-window pre::selection,.code-window code::selection{background:#44514c}.export-checklist{gap:8px;margin-top:17px;display:grid}.export-checklist div{color:#6f6d66;align-items:center;gap:8px;font-size:9px;display:flex}.export-checklist svg{color:#448166}.studio-principle{border-top:1px solid var(--line-soft);margin-top:24px;padding-top:18px}.studio-principle span{color:#a09e96;letter-spacing:.12em;text-transform:uppercase;font-size:8px;font-weight:720}.studio-principle p{color:#595852;margin:7px 0 0;font-family:Georgia,Times New Roman,serif;font-size:13px;line-height:1.5}@media (max-width:1180px){.studio-grid{grid-template-columns:300px minmax(0,1fr)}.export-panel{border-top:1px solid var(--line);border-left:0;grid-column:1/-1;grid-template-columns:minmax(240px,.7fr) minmax(430px,1.3fr);column-gap:32px;display:grid}.export-heading,.export-intro,.export-tabs,.export-checklist,.studio-principle{grid-column:1}.code-window{grid-area:1/2/span 6;margin-top:0}.code-window pre{height:400px}.diagnostic-grid{grid-template-columns:1fr}}@media (max-width:800px){.app-header{grid-template-columns:1fr auto}.header-center{display:none}.studio-grid{display:block}.control-panel,.workspace,.export-panel{border:0;border-bottom:1px solid var(--line)}.control-panel,.export-panel{padding:24px 18px 30px}.workspace{padding:20px 12px 24px}.layout-list{grid-template-columns:repeat(2,1fr)}.layout-option{grid-template-columns:45px 1fr}.layout-option .radio-mark{display:none}.preview-viewport{height:520px}.browser-frame.device-desktop .error-copy h1{font-size:clamp(38px,9vw,62px)}.export-panel{display:block}.code-window{margin-top:10px}.code-window pre{height:360px}}@media (max-width:520px){.preset-grid,.layout-list,.field-split{grid-template-columns:1fr}.workspace-toolbar{align-items:flex-start}.toolbar-title{gap:3px;display:grid}.theme-button{justify-content:center;width:34px;padding:0;font-size:0}.browser-bar{grid-template-columns:35px minmax(0,1fr) 25px}.error-canvas{padding:22px 18px}.error-copy h1,.device-mobile .error-copy h1{font-size:37px}.layout-editorial .error-copy h1{font-size:42px}.error-footer span:last-child{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}