:root { color-scheme:light; --paper:#f8f6ee; --ink:#353d31; --muted:#616857; --line:#d7d9cc; --main:#e0e7d7; --button:#394833; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
body[data-palette="rose"] { --paper:#faf4f2; --ink:#493d49; --muted:#71616d; --line:#dfd1da; --main:#ebe2ee; --button:#5f4661; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
button,a,input { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--button); outline-offset:4px; }
.draft-note { background:#ebeae5; color:#474b42; padding:9px 20px; text-align:center; font-size:13px; }
.page { width:min(1420px,calc(100% - 80px)); margin:auto; }
header { display:flex; align-items:center; justify-content:space-between; padding:28px 0 35px; gap:20px; }
.back { font-size:14px; display:flex; gap:12px; align-items:center; padding:10px 0; }
.back:hover { text-decoration:underline; text-underline-offset:5px; }
.page-heading { display:flex; justify-content:space-between; gap:28px; align-items:end; margin:15px 0 30px; }
.eyebrow { margin:0 0 12px; font-size:12px; letter-spacing:1.8px; text-transform:uppercase; }
h1 { font:clamp(34px,3.5vw,50px)/1.1 Georgia,"Times New Roman",serif; letter-spacing:-1.3px; margin:0; }
.intro { margin:0; font-size:15px; color:var(--muted); }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:start; gap:32px; }
.scene-panel { min-width:0; }
.scene { position:relative; border-radius:22px; overflow:hidden; background:#e8e3d8; isolation:isolate; }
canvas { display:block; width:100%; height:auto; aspect-ratio:3/2; }
#cloud-canvas { position:absolute; inset:0; z-index:1; pointer-events:none; }
#cloud-canvas[hidden] { display:none; }
.scene-badge,.scene-loading,.empty-note { z-index:2; }
.cloud img { display:block; width:100%; height:100%; object-fit:contain; }
#word-input[aria-invalid="true"] { border-color:#a45f53; }
.scene-badge { position:absolute; left:20px; bottom:20px; padding:7px 13px; border-radius:50px; font-size:12px; background:#fffdf3e8; color:#575b4e; }
.scene-loading,.empty-note { position:absolute; left:50%; top:43%; transform:translate(-50%,-50%); margin:0; text-align:center; background:#fffdf3ee; color:#575b4e; padding:12px 18px; border-radius:12px; font-size:15px; width:max-content; max-width:85%; }
.scene-loading[hidden],.empty-note[hidden] { display:none; }
.scene-caption { display:flex; justify-content:space-between; gap:10px 18px; flex-wrap:wrap; font-size:13px; color:var(--muted); margin-top:15px; }
.disclaimer { font-size:13px; color:var(--muted); margin:18px 0 0; max-width:610px; }
.controls { padding:24px; border:1px solid var(--line); border-radius:22px; background:#fffdf755; }
form { display:grid; gap:22px; }
.label-line { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:9px; }
label,legend { font-size:14px; }
#character-count { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
#word-input { width:100%; min-width:0; padding:12px 14px; min-height:54px; border:1px solid var(--line); border-radius:11px; background:#fffdfa; color:var(--ink); font-size:22px; }
#word-input::placeholder { color:var(--muted); font-size:17px; }
.help { margin:9px 0 0; font-size:13px; color:var(--muted); line-height:1.5; }
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { margin-bottom:10px; padding:0; }
.styles { display:grid; gap:9px; }
.style-option { display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:12px; cursor:pointer; position:relative; transition:background .2s,border-color .2s; }
.style-option:has(input:checked) { border-color:var(--button); background:var(--main); }
.style-option:has(input:focus-visible) { outline:3px solid var(--button); outline-offset:3px; }
.style-option input { position:absolute; opacity:0; width:1px; height:1px; }
.style-example { width:49px; height:49px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; font-size:28px; line-height:1; }
.classic { font-family:Georgia,serif; font-weight:700; background:#dae3cd; color:#526747; }
.minimal { font-family:Arial,sans-serif; font-weight:700; background:#f0dcd7; color:#916452; }
.soft { font-family:Palatino,"Palatino Linotype",Georgia,serif; font-weight:700; background:#e4ddee; color:#756087; }
.style-copy { display:flex; flex-direction:column; min-width:0; }
.style-copy strong { font-size:15px; font-weight:500; }
.style-copy small { font-size:12px; color:var(--muted); }
.selected-mark { margin-left:auto; opacity:0; font-size:16px; }
.style-option:has(input:checked) .selected-mark { opacity:1; }
.order-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:4px; font-size:13px; }
.order-summary strong { font-size:20px; white-space:nowrap; font-weight:500; }
.continue { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 18px; min-height:49px; border:0; border-radius:50px; background:var(--button); color:#fffdf7; font-size:15px; transition:transform .2s,opacity .2s; }
.continue:hover:not(:disabled) { transform:translateY(-2px); }
.continue:disabled { opacity:.45; cursor:not-allowed; }
.order-help { margin-top:-10px; }
.input-status { margin:0; color:var(--muted); font-size:13px; }
.input-status:empty { display:none; }
footer { margin-top:50px; padding:20px 0 26px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:15px; color:var(--muted); font-size:13px; }
@media(min-width:1400px) { .workspace { grid-template-columns:minmax(0,1fr) 355px; gap:40px; } .controls { padding:26px; } }
@media(max-width:1050px) { .page { width:calc(100% - 48px); } .workspace { gap:22px; grid-template-columns:minmax(0,1fr) 305px; } .controls { padding:18px; } .page-heading { align-items:start; } .intro { max-width:230px; } }
@media(max-width:850px) { .page { width:calc(100% - 40px); } .page-heading { display:block; margin:5px 0 24px; } .intro { max-width:none; margin-top:15px; } .intro br { display:none; } .workspace { grid-template-columns:minmax(0,1fr); gap:22px; } .controls { padding:22px; } .scene-caption { font-size:12px; } .styles { grid-template-columns:repeat(3,minmax(0,1fr)); } .style-option { flex-wrap:wrap; gap:8px; align-items:start; } .style-copy { width:100%; } .selected-mark { position:absolute; top:14px; right:12px; } .continue { width:100%; } .order-summary { font-size:14px; } }
@media(max-width:480px) { .page { width:calc(100% - 32px); } header { padding:24px 0 28px; gap:14px; } .back { gap:7px; font-size:13px; } .eyebrow { font-size:11px; letter-spacing:1.3px; } h1 { font-size:35px; } .intro { font-size:14px; } .scene { border-radius:16px; } .scene-badge { left:12px; bottom:10px; font-size:11px; padding:4px 8px; } .scene-caption { gap:7px; } .disclaimer { margin-top:12px; font-size:12px; } .controls { padding:18px; border-radius:17px; } .styles { grid-template-columns:1fr; } .style-option { flex-wrap:nowrap; align-items:center; } .style-copy { width:auto; } .selected-mark { position:static; margin-left:auto; } footer { margin-top:30px; font-size:12px; flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } }

/* The box-label draft remains ordinary selectable text for accessible review. */
.scene-panel .preview-summary { padding:0; border:0; background:transparent; margin-top:30px; }
.composition-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.preview-summary .composition-heading h2 { margin:0; font-size:19px; }
.composition-badge { font-size:11px; padding:5px 10px; border:1px solid var(--field-border); border-radius:20px; color:var(--muted); }
.box-label { border:1px solid var(--field-border); border-radius:12px; background:var(--paper); padding:24px; box-shadow:0 6px 22px #302f3010; }
.box-label-brand { display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:16px; }
.box-label-brand img { width:105px; height:40px; object-fit:contain; flex-shrink:0; }
.box-label-brand>span { font-size:11px; color:var(--muted); max-width:155px; text-align:end; }
.box-label-word { padding:24px 0 20px; }
.box-label-eyebrow { margin:0 0 6px; color:var(--muted); font-size:12px; }
#label-lettering { margin:0; font-size:clamp(25px,3.5vw,44px); line-height:1.2; font-weight:600; overflow-wrap:anywhere; white-space:pre-wrap; text-align:start; }
.label-specs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0; border-block:1px solid var(--line); padding:16px 0; }
.label-specs dt { font-size:11px; color:var(--muted); margin-bottom:4px; }
.label-specs dd { font-size:15px; font-weight:600; margin:0; overflow-wrap:anywhere; }
.box-label h3 { font:600 12px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; margin:0 0 10px; }
.box-label-pieces { padding:18px 0; }
#label-pieces { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
#label-pieces li { border:1px solid var(--field-border); border-radius:6px; padding:4px 10px; font-size:14px; white-space:nowrap; direction:ltr; }
#label-pieces bdi { font-weight:600; }
.box-label-recipient { border-top:1px dashed var(--field-border); padding:18px 0; }
.box-label-recipient p { margin:3px 0; font-size:13px; color:var(--muted); }
.box-label-recipient p.help { margin-top:10px; font-size:12px; }
.box-label-footer { display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
@media(max-width:1050px) { .label-specs { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .box-label { padding:18px; } .box-label-brand { gap:12px; } .box-label-brand img { width:85px; height:33px; } .composition-badge { font-size:10px; } }

/* Compact controls keep the room visible while configuring a longer order. */
.scene-panel { position:sticky; top:24px; }
.controls { padding:22px; }
form { gap:19px; }
.styles { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.style-option { display:grid; grid-template-columns:1fr; justify-items:center; gap:6px; padding:12px 4px 10px; text-align:center; }
.style-example { width:64px; max-width:100%; height:64px; background:transparent; color:var(--ink); }
.style-copy { width:auto; }
.style-copy strong { font-size:13px; }
.style-copy small { display:none; }
.selected-mark { display:none; }
.sizes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.size-option { display:grid; gap:5px; padding:12px 4px; text-align:center; position:relative; border:1px solid var(--line); border-radius:12px; cursor:pointer; transition:background .2s,border-color .2s; }
.size-option strong { font-size:23px; font-weight:500; line-height:1.2; }
.size-option strong small { font-size:13px; }
.size-option>span { font-size:12px; color:var(--muted); white-space:nowrap; }
.size-option:has(input:checked) { background:var(--main); border-color:var(--button); }
.size-option:has(input:focus-visible) { outline:3px solid var(--button); outline-offset:3px; }
.size-option input,.color-option input { position:absolute; opacity:0; width:1px; height:1px; }
.colors { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px 8px; }
.color-option { position:relative; display:grid; place-items:center; height:48px; min-width:0; cursor:pointer; }
.color-dot { width:36px; height:36px; border-radius:50%; box-shadow:inset 0 0 0 1px #323d311a; display:grid; place-items:center; transition:transform .2s; }
.color-option:hover .color-dot { transform:scale(1.07); }
.color-option:has(input:checked) .color-dot { outline:2px solid var(--button); outline-offset:3px; }
.color-option:has(input:focus-visible) { outline:3px solid var(--button); outline-offset:2px; border-radius:12px; }
.color-check { display:none; width:20px; height:20px; background:#fffdf6e8; border-radius:100%; color:#303d2a; font-size:14px; line-height:20px; text-align:center; }
.color-option:has(input:checked) .color-check { display:block; }
.quote { padding-top:17px; border-top:1px solid var(--line); }
.quote p { margin:0; color:var(--muted); font-size:13px; }
#color-price-line { margin-top:4px; }
.order-summary { margin-top:12px; font-size:14px; }
#total-price { font-size:30px; line-height:1.2; font-weight:500; white-space:nowrap; }
.fit-note { margin:12px 0 0; font-size:13px; color:var(--muted); }
.fit-note[hidden] { display:none; }
@media(max-width:850px) {
  .scene-panel { top:0; z-index:2; background:var(--paper); padding:10px 0; }
  .scene-panel .disclaimer,.scene-panel .fit-note { font-size:12px; margin-top:7px; }
  .scene-caption { margin-top:8px; }
  .controls { padding:20px; }
  .color-option { height:48px; }
}
@media(max-width:480px) {
  .scene-panel { margin-top:-10px; }
  .scene-panel .disclaimer { display:none; }
  .scene-caption .material { display:none; }
  .controls { padding:16px; }
  .style-option { gap:6px; }
  .size-option strong { font-size:21px; }
  .sizes { gap:6px; }
  .size-option>span { font-size:11px; }
}