@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#f2f3f5;background:#080a0d;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}[hidden]{display:none!important}.app{display:flex;min-height:100vh}.rail{width:70px;flex:0 0 70px;background:#050608;border-right:1px solid #292d30;display:flex;align-items:center;flex-direction:column;padding:23px 0}.rail-brand,.bottom-logo{font-family:'Space Grotesk',sans-serif;font-size:22px;letter-spacing:-2px;font-weight:700;color:#fff}.rail-brand span,.bottom-logo span,.accent{color:#eff1f5}.rail-icon{font-size:23px;margin-top:64px;color:#cbd1d0;width:45px;height:45px;border-radius:10px;display:grid;place-items:center}.rail-icon.selected{background:#272a2e;color:#eff1f5;border:1px solid #696f78}.rail-spacer{flex:1}.rail-caption{writing-mode:vertical-rl;transform:rotate(180deg);font-size:9px;letter-spacing:2px;color:#555f63}.shell{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:90px;flex:0 0 90px;border-bottom:1px solid #262a30;display:flex;align-items:center;justify-content:space-between;padding:0 35px;background:#0b0e12}.product-title{display:flex;flex-direction:column;gap:5px}.product-kicker,.panel-eyebrow,.topbar-right,.stage-label,.stage-meta,.stage-footer,.field-label,.right-bottom{font-size:10px;letter-spacing:1.55px;font-weight:700}.product-kicker{color:#9da5af}.product-name{font-family:'Space Grotesk',sans-serif;font-size:19px;font-weight:600;letter-spacing:-.5px}.tiny-mark{color:#6b706f;padding:0 8px}.topbar-right{color:#89918d;display:flex;align-items:center;gap:13px}.privacy-dot,.footer-dot{height:6px;width:6px;border-radius:50%;background:#c5c9ce;display:inline-block;flex-shrink:0}.top-separator{height:13px;width:1px;background:#474a4a}.workspace{display:grid;grid-template-columns:310px minmax(340px,1fr) 280px;min-height:calc(100vh - 90px)}.left-panel,.right-panel{background:#101317;padding:36px 26px;overflow-y:auto;min-height:0}.left-panel{border-right:1px solid #2d3031}.right-panel{border-left:1px solid #2d3031;position:relative}.panel-eyebrow{color:#a8b0b9;font-size:10px}h1,h2{font-family:'Space Grotesk',sans-serif;font-size:25px;line-height:1.18;letter-spacing:-1.2px;margin:18px 0 9px;font-weight:600}h2{font-size:23px}.muted{color:#858b8e}.lead,.right-intro{font-size:12px;line-height:1.7;margin:0}.section-divider{border-top:1px solid #313536;margin:28px 0 24px}.field-label{display:block;margin-bottom:12px;color:#afb7b3;font-size:10px}.preset-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:30px}.preset{border:1px solid #383e3d;background:#171b20;color:#a4adaa;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:6px;font-size:12px;font-weight:700;transition:.2s}.preset small{font-size:10px;color:#6e7775;font-weight:500}.preset-icon{font-size:25px;font-weight:400;height:28px}.preset.active{color:#f6f7f8;border-color:#a1a6af;background:#34383e}.preset.active small{color:#e3e6e8}.upload-zone{width:100%;min-height:156px;border:1px dashed #59615c;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;color:#d7dedd;background:#1c1f21;transition:background .2s,border-color .2s}.upload-zone:hover,.upload-zone.dragging{border-color:#d1d6da;background:#292e35}.upload-symbol{font-size:26px;color:#eff1f5;margin-bottom:2px}.upload-zone strong{font-size:12px}.upload-zone small{color:#898e91;font-size:10px}.upload-link{margin-top:10px;color:#dde2e7;font-size:10px;letter-spacing:1.1px;font-weight:700}.asset-info{display:flex;align-items:center;gap:10px;background:#202426;border-radius:6px;padding:10px;margin-top:10px}.asset-icon{color:#d7dadf;font-size:19px}.asset-text{min-width:0;flex:1}.asset-text strong,.asset-text small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.asset-text strong{font-size:11px}.asset-text small{font-size:10px;color:#929b98;margin-top:3px}.icon-button{border:0;background:transparent;color:#bcc7be;font-size:18px;padding:5px}.icon-button.outlined{border:1px solid #454b4b;border-radius:6px;padding:7px 11px}.panel-title-row,.slider-header{display:flex;align-items:center;justify-content:space-between}.text-button{background:transparent;color:#eff1f4;font-size:10px;letter-spacing:1px;border:none}.slider-header{font-size:12px;color:#d3d9d6;margin-top:5px;margin-bottom:13px}.slider-header output{font-size:11px;color:#a2ad9c}.range{width:100%;height:5px;accent-color:#d9dde2;cursor:pointer;margin:0 0 21px}.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.small-button,.full-action{background:#242729;border:1px solid #414646;border-radius:5px;color:#d8dcda;padding:11px 8px;font-size:11px;transition:.2s}.small-button:hover,.full-action:hover{background:#303736;border-color:#848e99}.control-hint{color:#9199a4;font-size:10px;line-height:1.65;margin:15px 0 0}.tool-row{display:flex;gap:8px;margin-bottom:20px}.full-action{display:flex;align-items:center;justify-content:center;gap:9px;flex:1}.bg-list{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.bg-chip{border:1px solid #414646;background:#202324;color:#acb3b0;border-radius:5px;font-size:10px;padding:8px 3px;display:flex;flex-direction:column;align-items:center;gap:8px}.bg-chip.selected{border-color:#dee1e5;color:#f0f7df}.chip-preview{width:32px;height:23px;border-radius:2px;border:1px solid #626969}.chip-preview.template{background:linear-gradient(145deg,#fff 37%,#e6e9ee 39%,#f8f9fb 74%)}.chip-preview.white{background:white}.chip-preview.dark{background:#12253e}.chip-preview.checker{background:conic-gradient(#ddd 25%,#999 0 50%,#ddd 0 75%,#999 0) 0 0/12px 12px}.custom-bg-label{font-size:11px;color:#cfd4db;display:block;cursor:pointer;margin-top:16px}.stage{background:#202325;display:flex;flex-direction:column;min-width:0;min-height:0}.stage-toolbar{height:67px;flex:0 0 67px;display:flex;justify-content:space-between;align-items:center;padding:0 30px;border-bottom:1px solid #383c3d}.stage-label{color:#e7eae7;margin-right:16px}.stage-meta{color:#8a9290}.stage-quick{display:flex;align-items:center;gap:13px;font-size:11px;color:#aeb8b2}.stage-rule{height:14px;background:#424849;width:1px}.stage-quick-btn{border:none;background:transparent;color:#e8eaed;font-size:11px}.canvas-area{flex:1;display:flex;align-items:center;justify-content:center;padding:37px 28px;min-height:420px;position:relative;overflow:hidden;background-color:#1d2022;background-image:radial-gradient(#363c3c .7px,transparent .7px);background-size:17px 17px}.canvas-wrap{position:relative;max-width:100%;max-height:100%;box-shadow:0 20px 56px #0007,0 0 0 1px #494f4e;touch-action:none;cursor:grab;display:flex;align-items:center;justify-content:center}.canvas-wrap.grabbing{cursor:grabbing}canvas{display:block;max-width:100%;max-height:calc(100vh - 290px);width:auto;height:auto;object-fit:contain}.canvas-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#eff0f3;color:#626e6d;text-align:center;pointer-events:none}.canvas-empty strong{font-family:'Space Grotesk';font-weight:600;font-size:16px;color:#747e7b}.canvas-empty small{font-size:11px}.empty-cross{font-size:43px;color:#9aa29c;line-height:1;margin-bottom:10px}.drop-overlay{position:absolute;inset:18px;z-index:10;border:2px dashed #b5bdc8;display:grid;place-items:center;background:#20291fed;color:#f9fafc;font-weight:700;letter-spacing:3px;pointer-events:none}.stage-footer{height:57px;flex:0 0 57px;border-top:1px solid #3b4040;padding:0 29px;display:flex;align-items:center;justify-content:space-between;color:#9ea5ac;font-size:9px;gap:10px}.stage-footer>span:first-child{display:flex;align-items:center;gap:10px}.right-panel .field-label{margin-top:26px}.text-field{width:100%;border:1px solid #404646;border-radius:5px;background:#222629;color:#f5f6f5;outline:0;padding:12px;font-size:12px}.text-field:focus{border-color:#b8c0ca}.format-switch{display:flex;gap:5px}.format{flex:1;color:#b0b8b5;background:#25292b;border:1px solid #3b4142;padding:11px 0;border-radius:4px;font-size:11px}.format.active{background:#363b42;border-color:#c5c9d0;color:#ffffff}.right-panel .slider-header{margin-top:26px}.export-summary{border-top:1px solid #313737;border-bottom:1px solid #313737;margin:23px 0 22px;padding:7px 0}.export-summary>div{display:flex;justify-content:space-between;margin:16px 0;font-size:11px}.export-summary span{color:#919b98}.export-summary strong{font-weight:600;color:#d6dfd7}.export-button{background:#eff1f5;color:#0c1014;border:0;border-radius:5px;width:100%;height:48px;font-family:'Space Grotesk';font-weight:700;font-size:13px;display:flex;justify-content:space-between;align-items:center;padding:0 17px}.export-button:hover:not(:disabled){background:#ffffff}.export-hint{text-align:center;color:#838e87;font-size:10px;line-height:1.6;margin:16px 0}.right-bottom{display:flex;flex-direction:column;align-items:flex-start;gap:12px;color:#666f6b;letter-spacing:1px;line-height:1.5;margin-top:70px;font-size:9px}.bottom-logo{font-size:20px}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#e6e8eb;color:#14171b;padding:12px 18px;border-radius:5px;font-size:12px;font-weight:700;transition:.2s;z-index:20}.toast.visible{opacity:1;transform:translate(-50%,0)}.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}
@media(max-width:1260px){.workspace{grid-template-columns:270px minmax(320px,1fr) 245px}.left-panel,.right-panel{padding:28px 20px}.topbar{padding:0 24px}}@media(max-width:1040px){.workspace{grid-template-columns:270px minmax(320px,1fr)}.right-panel{grid-column:1 / -1;border-left:0;border-top:1px solid #333;display:grid;grid-template-columns:repeat(3,1fr);column-gap:25px}.right-panel>.panel-eyebrow,.right-panel>h2,.right-panel>.right-intro,.right-panel>.section-divider{grid-column:1/-1}.right-panel .field-label{margin-top:12px}.export-summary{grid-column:1/3;margin:10px 0}.export-button{align-self:center}.export-hint,.right-bottom{display:none}}@media(max-width:730px){.rail{display:none}.topbar{height:72px;flex-basis:72px;padding:0 16px}.topbar-right{font-size:8px}.top-separator,.topbar-right #project-state{display:none}.workspace{display:flex;flex-direction:column}.left-panel{border-right:0;border-bottom:1px solid #383e3c;padding:24px 20px}.stage{min-height:560px}.canvas-area{min-height:430px;padding:25px 17px}canvas{max-height:420px}.stage-toolbar{height:53px;flex-basis:53px;padding:0 16px}.stage-meta{font-size:9px}.stage-footer{padding:0 15px}.stage-footer>span:last-child{display:none}.right-panel{display:block;padding:25px 20px}.right-bottom{display:none}}

/* Silent West silver / graphite design system (aligned to Lists). */
:root{color-scheme:dark;--sw-silver:#dce0e5;--sw-bright:#f7f8fa;--sw-graphite:#24282e;--sw-edge:#353a42;--sw-muted:#9ba3ad;background:#080a0d;color:#f3f5f6}
body{background:#080a0d}
.rail{background:linear-gradient(180deg,#080a0d 0%,#050609 100%);border-right-color:#292d33}
.rail-brand{width:54px;height:28px;display:flex;justify-content:center;align-items:center}
.rail-brand img{width:54px;height:auto;object-fit:contain;filter:drop-shadow(0 2px 6px #0009)}
.rail-icon.selected{background:#2c3036;border-color:#656b73;color:#f9fafb;box-shadow:inset 0 1px 0 #ffffff13}
.topbar{background:linear-gradient(180deg,#101318,#0b0e12);gap:22px;justify-content:flex-start}
.topbar-mark{height:42px;min-width:111px;padding-right:20px;display:flex;align-items:center;border-right:1px solid #3a4047}
.topbar-mark img{width:91px;height:auto;object-fit:contain;filter:drop-shadow(0 2px 5px #000a)}
.topbar-right{margin-left:auto}
.product-kicker,.panel-eyebrow{color:#a1a9b2}
.product-name{color:#f7f8f9}
.accent{color:#bbc2ca}
.left-panel,.right-panel{background:linear-gradient(180deg,#15181d,#0e1115)}
.section-divider{border-color:#323841}
.preset{background:#191d22;border-color:#343940;color:#b1bbc5;box-shadow:inset 0 1px 0 #ffffff06}
.preset.active{background:linear-gradient(135deg,#393e46,#22262c);border-color:#adb3be;color:white;box-shadow:inset 0 1px 0 #ffffff2d,0 4px 14px #0003}
.preset.active small{color:#d0d5da}
.preset:hover,.small-button:hover,.full-action:hover,.bg-chip:hover{border-color:#a3aab4}
.upload-zone{background:#171b20;border-color:#636b75}
.upload-zone:hover,.upload-zone.dragging{background:#242a32;border-color:#d4dae1}
.upload-symbol,.upload-link,.text-button,.stage-quick-btn,.custom-bg-label{color:#e7e9ed}
.range{accent-color:#d7dbe1}
.small-button,.full-action{background:linear-gradient(180deg,#292d33,#22262b);border-color:#414851}
.bg-list{grid-template-columns:repeat(3,1fr)}
.bg-chip{min-height:64px;background:#1a1e24;border-color:#41464e}
.bg-chip.selected{border-color:#e2e4e8;background:#373d44;color:#f7f8fa}
.chip-preview.image-swatch{background:linear-gradient(125deg,#6c737e,#f5f5f5,#515861)}
.chip-preview.custom-swatch{background:#f6f7f8}
.color-bg-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#c8ced5;margin-top:16px}
.color-bg-label input{width:65px;height:31px;background:transparent;border:1px solid #434a54;border-radius:4px;padding:2px;cursor:pointer}
.text-field,.format{background:#1e2329;border-color:#414851}
.text-field:focus{outline:1px solid #a9b1bc;outline-offset:1px}
.format.active{background:linear-gradient(140deg,#515962,#30363d);color:#fff;border-color:#d4d7df;box-shadow:inset 0 1px 0 #ffffff2d}
.stage{background:#1b1f24}
.canvas-area{background-color:#13171b;background-image:radial-gradient(#353a43 .7px,transparent .7px)}
.canvas-wrap{box-shadow:0 20px 70px #000b,0 0 0 1px #646b73}
.stage-toolbar,.stage-footer{border-color:#343a43}
.canvas-empty{background:#e9ecf0;color:#717b84}
.canvas-empty strong{color:#47515c}
.drop-overlay{border-color:#c7cdd5;background:#141b23ef;color:#f0f2f4}
.export-button{background:linear-gradient(108deg,#f6f7f9,#c4cbd2 52%,#f4f5f6);color:#0d1014;box-shadow:inset 0 1px 0 white,0 3px 12px #0008}
.export-button:hover:not(:disabled){background:linear-gradient(108deg,#fff,#e9edf1 52%,#fff)}
.export-button:disabled{opacity:.42;box-shadow:none}
.toast{background:#e1e5e9;color:#0c0e11;box-shadow:0 10px 35px #0009}
.bottom-logo img{width:112px;height:auto;object-fit:contain}
:where(button,input,label):focus-visible{outline:2px solid #edf0f4;outline-offset:3px}
@media(max-width:730px){.topbar-mark{min-width:66px;height:34px;padding-right:14px}.topbar-mark img{width:55px}.topbar{gap:12px}.product-name{font-size:16px}}