/* Brand tokens and local fonts from the official Maison Vivaldi site, 14 Sep 2026. */
@font-face{font-family:Archivo;font-weight:300;font-style:normal;font-display:swap;src:url('./brand/archivo-300-latin.woff2') format('woff2')}
@font-face{font-family:Archivo;font-weight:500;font-style:normal;font-display:swap;src:url('./brand/archivo-500-latin.woff2') format('woff2')}
@font-face{font-family:Satoshi;font-weight:400;font-style:normal;font-display:swap;src:url('./brand/satoshi-400-latin.woff2') format('woff2')}
@font-face{font-family:Satoshi;font-weight:700;font-style:normal;font-display:swap;src:url('./brand/satoshi-700-latin.woff2') format('woff2')}
:root{--ink:#0a0a0a;--paper:#f5f5f2;--surface:#fff;--line:rgba(10,10,10,.12);--muted:#686863;--blue:#0a0a0a;--blue-dark:#2c2c2c;--radius-lg:0;--radius-md:0;--radius-sm:4px;--shadow:none}
body{font-family:Satoshi,system-ui,sans-serif;background:var(--paper)}
h1,h2,h3,.intro h1,.preview-toolbar strong,.summary-title h3,.dialog-head h2{font-family:Archivo,Satoshi,sans-serif;font-weight:300;letter-spacing:-.045em}
.topbar{background:#0a0a0a;min-height:78px;backdrop-filter:none}.brand{gap:14px}.official-mark{object-fit:contain;width:24px;height:38px}.official-word{object-fit:contain;width:120px;height:40px}.brand-divider{height:28px;width:1px;background:#4c4c4c;margin:0 10px}.brand-purpose{color:#d3d3ce;font-size:14px}.pilot{border-radius:4px;border-color:#595959;background:transparent;color:#d6d6d2;font-size:12px}
.page{max-width:1480px;padding-top:38px}.intro{margin-bottom:30px;align-items:center}.intro h1{font-size:clamp(32px,3.8vw,56px);max-width:700px;line-height:1.05}.intro p{font-size:15px;line-height:1.6;max-width:350px}
.stepbar{border-radius:0;background:transparent;margin-bottom:28px}.step-link.is-active{background:white}.step-link span{font-size:12px;font-weight:400;letter-spacing:.08em}.step-link strong{font-weight:700}.step-link.is-active::after{left:0;right:0;height:2px;border-radius:0}
.panel{box-shadow:none;border-radius:0;padding:26px}.panel-heading{gap:18px}.panel-heading h2{font-size:28px;line-height:1.1}.eyebrow{color:#686863;font-weight:400;letter-spacing:.12em}.help{font-size:14px;line-height:1.5}.panel-heading .help{max-width:200px}
.choice-card{border-radius:0;background:white;transition:border-color .18s ease}.choice-card:hover{transform:none;border-color:#0a0a0a}.choice-card.is-selected{border-color:#0a0a0a;box-shadow:inset 0 0 0 1px #0a0a0a}.choice-card.is-selected::after{border-radius:0;width:20px;height:20px;top:7px;right:7px}.choice-card strong{font-size:14px}.choice-card small{font-size:12px}.product-thumb{border-bottom:1px solid var(--line)}
.option-button{border-radius:4px;background:#f5f5f2;border-color:#d9d9d4}.swatch.is-selected{border-color:#0a0a0a;box-shadow:0 0 0 2px #ddd}.recommendation{background:#f5f5f2;color:#53534e;border:0;border-left:2px solid #0a0a0a;border-radius:0}.recommendation::before{background:#0a0a0a}.upload-zone{background:#fafaf8;border-radius:4px;border-color:#aaa}.field input,.field select,.field textarea{border-radius:4px;border-color:#cdcdc7}.field input:focus,.field select:focus,.field textarea:focus{border-color:#0a0a0a;box-shadow:0 0 0 2px #ddd}.preset,.size-table{border-radius:4px}.primary,.secondary{border-radius:4px;box-shadow:none}.primary:hover{transform:none}.summary-card{border-radius:0;box-shadow:none}.human-badge{border-radius:3px;background:#e9e8e4;color:#333;font-size:12px}.price-note{border-radius:0;background:#f5f5f2}.dialog-head{background:#0a0a0a}dialog{border-radius:4px}.recap-output{border-radius:0}
.preview-card{border-radius:0;box-shadow:none}.preview-toolbar{border-bottom-color:#353535}.upload-shortcut{border-radius:4px;background:#fff;color:#0a0a0a}.zone-tabs button{border-radius:4px}.zone-tabs button.has-logo::after{color:inherit}.mode-buttons button,.editor-actions button{border-radius:4px}.mode-buttons button.is-selected{background:#fff;color:#0a0a0a;border-color:white}.edit-sliders input{accent-color:#aaa}.studio-heading,.studio-caption{display:none}
/* 2D: a large editorial product sheet, then a compact control area. */
.mode-2d .workspace{grid-template-columns:minmax(450px,1.12fr) minmax(0,.88fr);gap:32px}
.mode-2d .config-column{grid-column:2;grid-row:1}.mode-2d .preview-column{grid-column:1;grid-row:1;top:96px}
.mode-2d .preview-card{background:#fff;border:1px solid var(--line);color:#0a0a0a}
.mode-2d .preview-toolbar{color:#686863;border:0;padding:22px 26px 0;gap:10px}.mode-2d .preview-toolbar strong{font-family:Satoshi,sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:400}.mode-2d .upload-shortcut{background:#0a0a0a;color:#fff;padding:11px 15px;font-size:14px}
.mode-2d .studio-heading{display:block;padding:26px 26px 0}.studio-kicker{font-size:12px;color:#686863;letter-spacing:.1em}.studio-heading h2{font-size:clamp(32px,3.7vw,54px);line-height:1.05;margin-top:10px;overflow-wrap:anywhere}.studio-heading p{margin:10px 0 0;font-size:15px;color:#686863}
.mode-2d .zone-tabs{padding:20px 26px 0;gap:24px;border-bottom:1px solid #e8e8e3;margin:0 26px;padding-left:0;padding-right:0}.mode-2d .zone-tabs button{background:transparent;color:#777;border:0;border-bottom:2px solid transparent;border-radius:0;padding:9px 0 12px;font-weight:400;font-size:14px;min-width:48px}.mode-2d .zone-tabs button.is-selected{color:#0a0a0a;border-bottom-color:#0a0a0a;font-weight:700}
.mode-2d .preview-stage{margin:10px 26px 0;background:white;border-radius:0;aspect-ratio:1.3;isolation:isolate}
.mode-2d #canvas2d{height:100%;width:auto;max-width:100%;aspect-ratio:1;left:50%;right:auto;transform:translateX(-50%);object-fit:contain;cursor:move}
.mode-2d .studio-caption{display:flex;justify-content:space-between;gap:12px;margin:0 26px;padding:13px 0 17px;border-bottom:1px solid #e8e8e3;font-size:12px;letter-spacing:.03em;color:#686863}
.mode-2d .editor-tools{padding:14px 26px 22px;color:#0a0a0a}.mode-2d .editor-tools p{color:#686863;font-size:13px;line-height:1.5}.mode-2d #zoneStatus{color:#0a0a0a;overflow-wrap:anywhere}.mode-2d .edit-sliders{gap:5px 24px;margin-top:16px}.mode-2d .edit-sliders input{accent-color:#0a0a0a}.mode-2d .edit-sliders label{font-size:13px}.mode-2d .editor-actions{gap:8px;margin-top:16px}.mode-2d .editor-actions button{background:#fff;color:#0a0a0a;border-color:#d8d8d2;font-size:12px}.mode-2d .editor-actions #savePreview{background:#0a0a0a;color:#fff;border-color:#0a0a0a}.mode-2d .preview-meta{background:#f5f5f2;border-top:1px solid #e5e5df;padding:15px 26px;color:#686863;font-size:13px;flex-wrap:wrap}.mode-2d .preview-meta strong{color:#0a0a0a;font-weight:700}.mode-2d .color-dot{border-color:#aaa}
@media(max-width:1100px){.mode-2d .workspace{grid-template-columns:minmax(370px,1fr) minmax(0,1fr);gap:20px}.panel-heading{display:block}.panel-heading .help{max-width:none;margin-top:10px}.brand-purpose{display:none}.brand-divider{display:none}}
@media(max-width:820px){.page{padding-top:24px}.intro{align-items:start;gap:14px}.intro p{max-width:550px}.mode-2d .workspace{grid-template-columns:1fr;gap:22px}.mode-2d .preview-column{position:static;grid-column:1;grid-row:1}.mode-2d .config-column{grid-column:1;grid-row:2}.mode-2d .preview-stage{aspect-ratio:1.5}.mode-2d .studio-heading h2{font-size:42px}.panel-heading{display:flex}.panel-heading .help{max-width:240px}.mode-2d .studio-heading{padding-top:18px}}
@media(max-width:480px){.topbar{min-height:68px}.brand{gap:9px}.official-mark{width:19px;height:30px}.official-word{width:101px;height:34px}.pilot{font-size:10px;padding:6px 8px}.intro h1{font-size:36px}.stepbar{margin-bottom:20px}.mode-2d .preview-toolbar{padding:18px 18px 0}.mode-2d .upload-shortcut{font-size:12px;padding:10px}.mode-2d .studio-heading{padding:20px 18px 0}.mode-2d .studio-heading h2{font-size:36px}.studio-kicker{font-size:10px}.mode-2d .zone-tabs{margin-inline:18px}.mode-2d .preview-stage{margin-inline:18px;aspect-ratio:1.15}.mode-2d .studio-caption{margin-inline:18px;font-size:11px}.mode-2d .editor-tools{padding:12px 18px 20px}.mode-2d .edit-sliders{gap:4px 14px}.mode-2d .preview-meta{padding:13px 18px}.panel-heading{display:block}.panel-heading .help{max-width:none}.panel{padding:22px 18px}.editor-actions button{min-height:38px}.mode-2d .editor-actions #savePreview{flex-grow:1}}
.mode-2d .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-2d .choice-card{grid-template-rows:auto auto}.mode-2d .product-thumb{height:auto;aspect-ratio:1}
@media(max-width:480px){.mode-2d .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pilot,.studio-kicker{font-size:12px}.mode-2d .studio-caption{font-size:12px}}

/* Direct placement pad, shared by the 2D and 3D editors. */
.upload-native{position:relative;display:inline-flex;align-items:center;min-height:44px;overflow:hidden}.upload-native input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.upload-native:focus-within{outline:2px solid #789bff;outline-offset:3px}
.placement-workspace{display:grid;grid-template-columns:minmax(0,1fr) 170px;align-items:center;background:#e3e5e8}.placement-workspace .preview-stage{min-width:0;width:100%;margin:0;aspect-ratio:1/1.25}.placement-panel{color:#161616;background:#fff;padding:14px 12px;margin:12px 12px 12px 0;font-size:14px;border:1px solid #d2d2ce;min-width:0}.placement-panel strong,.placement-panel>span{display:block}.placement-panel>span{margin-top:4px;color:#666}.placement-panel p{font-size:12px;line-height:1.5}.placement-panel button{background:#161616;color:#fff;border:0;padding:10px 8px;font:inherit;min-height:44px;width:100%;cursor:pointer}#positionPad{position:relative;aspect-ratio:1;background:#f5f5f2;border:1px dashed #999;margin-top:12px;overflow:hidden;touch-action:none;cursor:move}#positionPad:focus-visible{outline:2px solid #1a4fb0;outline-offset:2px}.pad-cross{position:absolute;inset:0;background:linear-gradient(transparent calc(50% - .5px),#ddd 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),#ddd 50%,transparent calc(50% + .5px))}#padLogo{position:absolute;max-width:none;pointer-events:none}#padLogo[hidden],#padEmpty[hidden]{display:none}#padEmpty{position:absolute;inset:20%;text-align:center;font-size:12px;display:grid;place-items:center;color:#777}.mode-2d .placement-workspace{background:#fff}.mode-2d .placement-workspace .preview-stage{margin:0;aspect-ratio:1/1.25}
@media(min-width:1000px){body:not(.mode-2d) .workspace{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
@media(max-width:600px){.placement-workspace{grid-template-columns:minmax(0,1fr) 130px}.placement-panel{padding:10px 8px;margin-right:8px;font-size:13px}.placement-panel p{font-size:12px}.placement-workspace .preview-stage,.mode-2d .placement-workspace .preview-stage{aspect-ratio:1/1.6}.placement-panel button{font-size:12px}}

.finish-preview{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px;background:#f5f5f2;color:#161616;border-top:1px solid #d9d9d3}.finish-detail-image{position:relative;min-width:0;align-self:center}.finish-detail-image canvas{display:block;width:100%;height:auto;border:1px solid #d7d7d0}.finish-detail-image span{position:absolute;inset:0;display:grid;place-items:center;padding:14px;text-align:center;background:#f5f5f2dd;font-size:13px}.finish-detail-image span[hidden]{display:none}.finish-copy{align-self:center;min-width:0}.finish-copy strong{font-size:14px}.finish-copy p{font-size:13px;line-height:1.45;margin:7px 0 12px;color:#5d5d57}.finish-actions{display:flex;flex-wrap:wrap;gap:6px}.finish-actions button{font:inherit;font-size:12px;min-height:40px;border:1px solid #aaa;background:white;color:#161616;padding:7px 9px;cursor:pointer}.finish-actions button:disabled{opacity:.4;cursor:not-allowed}@media(max-width:480px){.finish-preview{gap:10px;padding:12px;grid-template-columns:1fr}.finish-detail-image canvas{max-height:155px;object-fit:contain}.finish-copy p{margin-bottom:8px}}

.finish-choices{display:flex;flex-wrap:wrap;gap:6px;background:#fff;padding:12px 16px;border-top:1px solid #ddd}.finish-choices button{font:inherit;font-size:14px;min-height:44px;padding:9px 12px;border:1px solid #ccc;background:#fff;color:#161616;cursor:pointer}.finish-choices button.is-selected{background:#161616;color:white;border-color:#161616}