:root{--bg:#111418;--panel:#1b2026;--panel-2:#232a31;--line:#343c45;--text:#f5f1e7;--muted:#aeb7c2;--green:#46a67e;--red:#d85842;--amber:#e4b457;--blue:#5d8fc9;--shadow:0 16px 44px #0000003d;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select{font:inherit}button{cursor:pointer}code,pre{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace}.builder-shell{grid-template-rows:62px 1fr;min-height:100vh;display:grid}.builder-topbar{border-bottom:1px solid var(--line);background:#15191e;justify-content:space-between;align-items:center;gap:18px;padding:0 22px;display:flex}.brand,.topbar-meta{align-items:center;display:inline-flex}.brand{gap:10px;font-size:18px;font-weight:800}.brand__mark{background:linear-gradient(90deg, transparent 43%, #111418 43% 57%, transparent 57%), linear-gradient(135deg, var(--green), var(--red));border:1px solid #ffffff2e;border-radius:5px;width:20px;height:20px}.topbar-meta{color:var(--muted);gap:8px;min-width:0}.topbar-meta span{border:1px solid var(--line);text-overflow:ellipsis;white-space:nowrap;border-radius:999px;max-width:min(34vw,260px);padding:5px 9px;overflow:hidden}.workspace{grid-template-columns:minmax(290px,340px) minmax(420px,1fr) minmax(290px,340px);grid-template-areas:"controls preview code";align-items:start;gap:16px;min-height:calc(100vh - 62px);padding:16px;display:grid}.panel,.preview-column{background:var(--panel);border:1px solid var(--line);min-width:0;box-shadow:var(--shadow);border-radius:8px}.controls{grid-area:controls;grid-template-rows:auto minmax(0,1fr);height:min(760px,100svh - 94px);min-height:0;display:grid;overflow:hidden}.settings-tabs{border-bottom:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px;display:grid}.settings-tab{min-width:0;min-height:34px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:7px;padding:7px 8px;font-size:12px;font-weight:750;overflow:hidden}.settings-tab:hover{border-color:var(--line);color:var(--text)}.settings-tab[aria-selected=true]{border-color:color-mix(in srgb, var(--green) 68%, var(--line));background:var(--panel-2);color:var(--text)}.settings-tab:focus-visible{outline:2px solid var(--green);outline-offset:2px}.settings-panel{min-height:0;overflow:auto}.settings-panel .control-section{border-bottom:0}.control-section{border-bottom:1px solid var(--line);padding:16px}.control-section:last-child{border-bottom:0}.control-section h2,.code-panel h2{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;font-size:12px}.upload{border:1px dashed color-mix(in srgb, var(--green) 60%, var(--line));background:#46a67e1a;border-radius:8px;gap:5px;padding:14px;display:grid;position:relative}.upload:hover{border-color:var(--green)}.upload input{opacity:0;cursor:pointer;position:absolute;inset:0}.upload__title{font-weight:800}.upload__meta,.field span,.range span,.check span,.preview-toolbar p,.code-panel p,.asset-note{color:var(--muted)}.field,.range{gap:7px;margin-top:13px;display:grid}.field-row{grid-template-columns:1fr 92px;gap:12px;display:grid}.field input[type=text],.field select{border:1px solid var(--line);width:100%;min-height:39px;color:var(--text);background:#12161a;border-radius:7px;padding:8px 10px}.field input[type=color]{border:1px solid var(--line);background:#12161a;border-radius:7px;width:100%;min-height:39px;padding:3px}.range input{width:100%;accent-color:var(--green)}.range input:disabled{opacity:.45}.range b{color:var(--text);font-variant-numeric:tabular-nums}.check{align-items:center;gap:10px;min-height:32px;margin-top:12px;display:flex}.check input{width:18px;height:18px;accent-color:var(--green)}.button{border:1px solid var(--line);background:var(--panel-2);min-height:38px;color:var(--text);border-radius:7px;padding:8px 13px;font-weight:750}.button:hover{border-color:var(--muted)}.button--primary{border-color:color-mix(in srgb, var(--green) 72%, var(--line));background:var(--green);color:#07120d}.preview-column{grid-area:preview;grid-template-rows:auto minmax(0,1fr);height:min(760px,100svh - 94px);min-height:0;padding:16px;display:grid;overflow:hidden}.preview-toolbar{justify-content:space-between;align-items:start;gap:16px;padding-bottom:14px;display:flex}.preview-toolbar h1{letter-spacing:0;margin:0;font-size:clamp(24px,3vw,38px);line-height:1}.preview-toolbar p{margin:8px 0 0}.preview-stage{border:1px solid var(--line);background:#e9edf2;border-radius:8px;min-height:0;position:relative;overflow:hidden}.mock-app{color:#17202c;background:#f7f4ee;grid-template-rows:70px auto minmax(0,1fr);height:100%;min-height:0;display:grid}.mock-app header{background:#fffdf8;border-bottom:1px solid #d6d0c3;align-items:center;gap:18px;padding:0 28px;display:flex}.mock-logo{background:linear-gradient(90deg, transparent 42%, #fffdf8 42% 58%, transparent 58%), linear-gradient(135deg, var(--green), var(--red));border-radius:7px;width:28px;height:28px}.mock-app nav{color:#67717e;flex-wrap:wrap;gap:14px;display:flex}.mock-hero{max-width:700px;padding:42px 36px 26px}.mock-hero p{color:#87612b;text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px;font-size:12px;font-weight:800}.mock-hero h2{color:#111418;letter-spacing:0;margin:0;font-size:clamp(32px,5vw,58px);line-height:.98}.mock-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-self:start;gap:14px;padding:0 36px 36px;display:grid}.mock-grid div{background:#fffdf8;border:1px solid #d6d0c3;border-radius:8px;min-height:110px;padding:18px}.mock-grid strong{color:#111418;font-size:30px;display:block}.mock-grid span{color:#67717e}.code-panel{grid-area:code;grid-template-rows:auto auto auto;padding:16px;display:grid;overflow:hidden}.code-panel__head{justify-content:space-between;align-items:start;gap:12px;display:flex}.code-panel h2,.code-panel p{margin:0}.asset-note{margin:12px 0}.code-panel pre{border:1px solid var(--line);white-space:pre;background:#0d1013;border-radius:8px;min-height:0;max-height:min(52svh,460px);margin:0;padding:14px;overflow:auto}.code-panel code{color:#f7e9c4;font-size:12.5px}@media (width<=1180px){.workspace{grid-template-columns:minmax(280px,340px) minmax(0,1fr);grid-template-areas:"controls preview""code preview"}.code-panel{min-height:0}}@media (width<=760px){.builder-topbar{flex-direction:column;justify-content:center;align-items:start;height:auto;min-height:62px;padding-block:12px}.workspace{grid-template-columns:1fr;grid-template-areas:"preview""controls""code";min-height:auto}.controls{height:auto;overflow:visible}.settings-panel{overflow:visible}.preview-column{height:min(68svh,520px)}.preview-stage{min-height:0}.mock-app{grid-template-rows:56px auto minmax(0,1fr)}.mock-app header{gap:10px;padding:0 18px}.mock-app nav{display:none}.mock-hero{padding:24px 20px 16px}.mock-hero h2{font-size:clamp(24px,9vw,34px);line-height:1}.mock-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 20px 20px}.mock-grid div{min-height:72px;padding:10px}.mock-grid strong{font-size:22px}.mock-grid span{overflow-wrap:anywhere;font-size:12px}}@media (width<=480px){.builder-topbar{gap:8px;padding:12px 14px}.workspace{gap:12px;padding:12px}.control-section,.preview-column,.code-panel{padding:12px}.mock-app header{padding:0 16px}.mock-hero{padding:20px 16px 14px}.mock-grid{grid-template-columns:1fr;gap:10px;padding:0 16px 16px}.mock-grid div{min-height:0}}@media (width>=761px) and (height<=720px){.controls{height:calc(100svh - 94px)}.settings-tabs{padding:8px}.control-section{padding:12px}.preview-column{height:calc(100svh - 94px);padding:12px}.preview-toolbar{padding-bottom:10px}.preview-toolbar h1{font-size:22px}.preview-toolbar p{margin-top:4px}.mock-app{grid-template-rows:54px auto minmax(0,1fr)}.mock-app header{gap:12px;padding:0 18px}.mock-hero{padding:24px 24px 16px}.mock-hero h2{font-size:clamp(24px,4vw,40px);line-height:1}.mock-grid{gap:10px;padding:0 24px 24px}.mock-grid div{min-height:76px;padding:12px}.mock-grid strong{font-size:24px}}@media (pointer:coarse){.settings-tab,.field input[type=text],.field select,.field input[type=color],.button,.check{min-height:44px}.range input{height:28px}}