html{--bg:#101110;--panel:#191a18;--raised:#242521;--line:#373833;--ink:#f1eee5;--muted:#a6a79d;--button:#ede9df;--buttonInk:#161713;--stage:#34362f;--accent:#c3aa7b}
html[data-theme=light]{--bg:#fff;--panel:#fff;--raised:#fff;--line:#ddd;--ink:#111;--muted:#616161;--button:#111;--buttonInk:#fff;--stage:#fff;--accent:#111}
/* Light mode is a white canvas; black is reserved for clear selection states. */
html[data-theme=light] .customer .stage{background:#fff}
html[data-theme=light] .customer .choice.active,
html[data-theme=light] .customer .layer-row.active{background:#111;color:#fff;border-color:#111}
html[data-theme=light] .customer .choice.active small,
html[data-theme=light] .customer .layer-row.active small{color:#ddd}
html[data-theme=light] .customer .choice.active .web-symbol,
html[data-theme=light] .customer .layer-row.active .layer-icon{border-color:#666}
.customer .topbar{height:62px;padding:0 26px;gap:16px}.customer .monogram{font-size:35px}.customer .brand-word{font-size:10px;letter-spacing:2.4px}.header-tagline{font-size:9px;letter-spacing:1.2px;color:var(--muted)}.header-tagline em{font:italic 15px Georgia;letter-spacing:0;margin-left:7px;color:var(--ink)}.theme-pill{border:1px solid var(--line);border-radius:20px;padding:8px 12px}.customer .header-right{gap:22px}.customer .studio{height:calc(100dvh - 62px);grid-template-columns:minmax(0,1fr) 396px;min-height:560px}.customer .stage{background:radial-gradient(ellipse at 48% 43%,var(--stage),var(--bg) 75%)}.customer .stage:after{display:none}.stage-identity{position:absolute;top:27px;left:30px;pointer-events:none}.stage-identity .eyebrow{font-size:8px;letter-spacing:2px;color:var(--muted)}.stage-identity h1{font:38px JHDisplay,'Arial Narrow',sans-serif;letter-spacing:1px;margin:7px 0 4px;font-weight:400}.stage-identity p{font-size:10px;letter-spacing:.7px;color:var(--muted);margin:0}.design-toolbar{position:absolute;right:25px;top:27px;display:flex;gap:5px}.design-toolbar button,.design-toolbar>label{display:inline-flex;align-items:center;justify-content:center;min-height:34px;font-size:10px;border:1px solid var(--line);background:var(--panel);padding:7px 11px;border-radius:20px;color:var(--ink);cursor:pointer}.view-tools{position:absolute;right:24px;bottom:112px;display:grid;gap:7px}.view-tools button{display:grid;place-items:center;border:1px solid var(--line);background:var(--panel);border-radius:50%;width:34px;height:34px;padding:0;font-size:19px}.view-tools button[aria-pressed=true]{background:var(--button);color:var(--buttonInk)}.randomize{position:absolute;left:30px;bottom:64px;border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:10px 15px;font-size:10px}.customer .stage-controls{bottom:60px;background:var(--panel)}.stage-controls button.active{color:var(--buttonInk);background:var(--button)}.customer .stage-foot{bottom:25px;font-size:8px;letter-spacing:.8px}.customer .step-tabs{padding:15px 12px 12px;gap:2px;overflow-x:auto;min-height:80px;align-items:flex-start}.customer .step-tab{padding:0 3px;border:0;font-size:8px;flex:1;min-width:39px}.customer .step-tab span{border-radius:50%;border:1px solid var(--line);width:25px;height:25px;display:grid;place-items:center;font-size:10px;opacity:1;margin:0 auto 9px}.customer .step-tab.active span{background:var(--button);color:var(--buttonInk);border-color:var(--button)}.progress-track{height:2px;background:var(--line);flex-shrink:0}.progress-track div{height:2px;background:var(--accent);transition:width .2s}.customer .panel{padding:24px 22px}.customer .section-head{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:22px}.customer .section-head .eyebrow{color:var(--muted);font-size:8px;letter-spacing:1.4px}.customer .section-head h2{font:30px JHDisplay,sans-serif;font-weight:400;letter-spacing:.8px;margin:8px 0}.customer .section-head p{margin:0;line-height:1.55}.customer .choice{border-radius:8px;padding:14px 12px}.customer .choice.active{border-color:var(--accent);background:var(--raised)}.customer .cards.three{gap:6px}.customer .cards.three .choice{padding:12px 7px}.customer .group-label{font-size:9px;letter-spacing:1.25px}.customer .choice b{font-size:11px}.customer .group{margin-bottom:22px}.customer input:not([type=checkbox]):not([type=range]),.customer select,.customer textarea{border-radius:7px;padding:11px 12px}.customer input[type=color]{height:42px;padding:5px!important;cursor:pointer}.customer .secondary,.customer .primary{border-radius:7px;padding:12px 13px;letter-spacing:.4px}.customer .config-footer{padding:15px 22px}.customer .price-line{margin-bottom:12px}.customer .price-line strong{font:30px JHDisplay,sans-serif;letter-spacing:1px}.customer .save-status{font-size:9px;text-align:center;display:block;margin-top:10px;color:var(--muted)}.customer .message:empty{display:none}.customer .message{font-size:10px;max-height:65px}.preset-chips,.quick-zones{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}.preset-chips button,.quick-zones button{font-size:9px;letter-spacing:.3px;padding:7px 11px;background:none;border:1px solid var(--line);border-radius:30px}.quick-zones button.active{background:var(--button);color:var(--buttonInk)}.quick-zones button{flex:1}.section-row{display:flex;justify-content:space-between;width:100%;padding:11px 2px;background:none;border:0;border-bottom:1px solid var(--line);font-size:11px}.upload-choice{position:relative;cursor:pointer;overflow:hidden;display:block}.upload-choice input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;padding:0}.upload-choice:focus-within{outline:2px solid var(--accent);outline-offset:2px}.layer-list{margin:18px 0}.layer-list .empty{border:1px dashed var(--line);border-radius:8px;padding:22px;line-height:1.8;text-align:center}.layer-row{width:100%;display:flex;gap:10px;align-items:center;padding:12px;background:none;border:1px solid var(--line);border-radius:7px;margin-bottom:6px;text-align:left}.layer-row.active{border-color:var(--accent);background:var(--raised)}.layer-row>span:nth-child(2){flex:1;min-width:0}.layer-row b{font-size:11px;display:block;overflow-wrap:anywhere}.layer-row small{display:block;color:var(--muted);font-size:9px;margin-top:4px}.layer-icon{font:20px Georgia;border:1px solid var(--line);border-radius:5px;width:32px;height:32px;display:grid;place-items:center}.layer-editor{border:1px solid var(--line);border-radius:10px;padding:17px;background:var(--bg)}.editor-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:8px;letter-spacing:1.4px;color:var(--accent)}.font-preview{font-size:27px;background:var(--raised);padding:15px 8px;border-radius:6px;margin-bottom:15px;text-align:center;overflow-wrap:anywhere}.tuner-row{margin:17px 0}.tuner-row label{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:7px}.tuner-row output{color:var(--ink);font-variant-numeric:tabular-nums}.tuner-row input{accent-color:var(--accent)}.lock-aspect{font-size:10px;color:var(--muted)}.art-preview{display:block;height:80px;max-width:100%;margin:0 auto;object-fit:contain;background:repeating-conic-gradient(#ddd 0% 25%,#fff 0% 50%) 0/12px 12px;border-radius:5px}.art-library{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.art-library button:not(.text-button){width:100%;background:var(--raised);border:1px solid var(--line);border-radius:6px;padding:8px}.art-library img{width:100%;height:50px;object-fit:contain}.danger{color:#dc9c8b}.context-menu{position:fixed;z-index:100;width:288px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:17px;box-shadow:0 18px 70px #0005}.context-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-size:13px}.context-title button{border:0;background:none;font-size:21px}.context-menu .swatch{width:25px;height:25px}.context-menu .swatches{gap:10px}.context-menu .secondary{font-size:10px;padding:10px 8px;text-align:center}.context-menu input[type=color]{height:38px;padding:4px}.placement-banner{position:absolute;left:50%;top:110px;transform:translateX(-50%);display:flex;align-items:center;gap:15px;border:1px solid var(--accent);background:var(--panel);padding:12px 16px;border-radius:8px;font-size:11px;z-index:6;white-space:nowrap}.placement-banner button{background:none;border:0;text-decoration:underline}.placing{cursor:crosshair!important}.team-banner{position:absolute;top:100px;left:30px;color:var(--accent);font-size:10px;max-width:calc(100% - 60px)}.return-team{display:block;text-align:center}.addon-choice{margin-bottom:10px}.addon-choice b{display:flex;justify-content:space-between}.review-art{border:1px solid var(--line);border-radius:8px;padding:15px;margin-bottom:16px}
@media(max-width:1150px){.header-tagline{display:none}.customer .studio{grid-template-columns:minmax(0,1fr) 370px}.design-toolbar{top:104px;right:22px;left:28px;justify-content:flex-start}.team-banner{top:150px}.customer .stage-foot span:last-child{display:none}.randomize{font-size:9px;left:22px;padding:9px}.customer .stage-controls{left:auto;right:22px;transform:none}.view-tools{right:22px}}
@media(max-width:760px){.customer .topbar{height:58px;padding:0 15px}.customer .brand-word{font-size:8px}.customer .header-right{gap:10px}.customer .admin-link{display:none}.customer .studio{height:auto;display:flex;min-height:0}.customer .stage{height:50dvh;min-height:340px}.stage-identity{top:18px;left:18px}.stage-identity h1{font-size:27px}.stage-identity .eyebrow{font-size:7px}.stage-identity p{font-size:8px}.design-toolbar{top:18px;right:15px;left:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:3px}.design-toolbar button,.design-toolbar>label{font-size:8px;padding:7px}.view-tools{bottom:88px;right:16px;gap:5px}.view-tools button{width:28px;height:28px;font-size:16px}.customer .stage-controls{bottom:43px;right:15px}.customer .stage-controls button{font-size:8px;padding:7px 10px}.randomize{left:15px;bottom:45px;font-size:8px;padding:8px 10px}.customer .stage-foot{left:16px;right:16px;bottom:15px;letter-spacing:0;font-size:7px}.customer .stage-foot span:last-child{display:none}.customer .step-tabs{top:50dvh;padding:12px 8px;min-height:71px}.customer .step-tab{min-width:34px;font-size:7px}.customer .step-tab span{width:23px;height:23px;margin-bottom:6px}.customer .config{min-height:0}.customer .panel{padding:23px 20px}.customer .config-footer{padding:14px 20px}.team-banner{top:105px;left:18px;font-size:8px}.placement-banner{top:135px;white-space:normal;width:calc(100% - 30px);font-size:10px}.customer .section-head h2{font-size:29px}}

/* Keep the canvas actions on one visual baseline without crowding narrow screens. */
@media(min-width:761px){.customer .view-tools{bottom:60px;display:flex}.customer .randomize{bottom:60px}}
@media(min-width:761px) and (max-width:1150px){.customer .stage-controls{left:50%;right:auto;transform:translateX(-50%)}}
@media(max-width:760px){.customer .view-tools{bottom:82px;display:flex}}

/* Keep only the essential canvas actions and give every remaining control the
   same 44px height. The named camera presets remain available internally for
   guided flows, but are intentionally removed from the customer interface. */
.customer .stage-controls{display:none!important}
.customer .randomize{height:44px;min-height:44px}
.customer .view-tools button{width:44px;height:44px}
.customer .view-tools .randomize{position:static;left:auto;bottom:auto;min-height:44px;padding:0;gap:0}
.customer .view-tools .randomize-icon{width:21px;height:21px}
.customer .view-tools #resetView{display:none}
@media(min-width:761px){.customer .view-tools{top:50%;right:24px;bottom:auto;display:flex;flex-direction:column;transform:translateY(-50%)}}

/* Shopify already supplies the storefront brand header. Keep customer tools on
   the navigation line so the embedded builder begins with the actual task. */
.customer .studio{height:100dvh;min-height:0}
/* The context trail occupies 40px above the studio. Keep the builder and its
   pinned price/actions inside the iframe viewport instead of making the
   studio a second full viewport tall beneath that trail. */
.customer .context-trail + .studio{height:calc(100dvh - 40px);max-height:calc(100dvh - 40px);min-height:0}
.config-tabs-row{display:flex;align-items:stretch;min-width:0;flex-shrink:0;border-bottom:1px solid var(--line)}
.config-tabs-row .step-tabs{flex:1;min-width:0;border-bottom:0}
.context-trail-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-left:auto}
.context-trail-actions>a,.context-trail-actions .text-button{white-space:nowrap;font-size:10px;text-transform:none;letter-spacing:0}
.context-trail-actions .theme-pill{padding:7px 10px}
.customer .config-footer{position:sticky;bottom:0;z-index:15;margin-top:auto;flex-shrink:0;background:color-mix(in srgb,var(--panel) 97%,transparent);box-shadow:0 -8px 24px #0000000d;backdrop-filter:blur(12px)}