:root{--paper:#f4efe5;--card:#fffdf8;--ink:#18211f;--muted:#5d6862;--line:#d8d1c5;--blue:#2864e8;--green:#26765c}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 "Segoe UI",Arial,sans-serif}a{color:inherit}button,input{font:inherit}button,a{touch-action:manipulation}.shell{width:min(1120px,calc(100% - 40px));margin:auto}.header{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand{font-weight:850;letter-spacing:.08em;text-decoration:none}.header nav{display:flex;align-items:center;gap:24px}.header nav>a:first-child{font-size:14px;text-decoration:none}.button{display:inline-flex;justify-content:center;align-items:center;min-height:46px;border:1px solid var(--line);border-radius:10px;padding:11px 18px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;text-align:center}.primary{background:var(--blue);border-color:var(--blue);color:white}.primary:hover{background:#1748ad}.secondary{background:var(--card)}.secondary:hover{border-color:#7d8a82}button:disabled{opacity:.6;cursor:wait}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.intro{padding:44px 0 28px}.eyebrow{color:var(--green);font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:800;margin:0 0 14px}h1{font:500 clamp(36px,4.8vw,56px)/1.08 Georgia,serif;letter-spacing:-.035em;margin:0 0 18px}.lead{font-size:18px;color:var(--muted);margin:0}h2{font-size:19px;line-height:1.3;margin:0 0 20px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.panel{border:1px solid var(--line);border-radius:18px;padding:28px;background:var(--card);min-width:0}.field{margin-bottom:18px;min-width:0}label{display:block;font-size:14px;font-weight:650;margin-bottom:7px}input{display:block;width:100%;min-height:46px;border:1px solid #b4beb7;border-radius:8px;background:#fff;padding:10px 12px;color:var(--ink)}input:focus{outline:2px solid var(--blue);outline-offset:1px}input[aria-invalid=true]{border-color:#b53124}.hint{font-size:13px;color:var(--muted);margin:8px 0 0}.field-error{font-size:13px;color:#a5291d;margin:4px 0 0}.field-error:empty{display:none}details{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}summary{cursor:pointer;font-weight:650;font-size:14px;min-height:40px}summary span{font-weight:400;font-size:12px;color:var(--muted);margin-left:5px}.extra-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:12px}.wide{grid-column:1/-1}.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.text-button{background:none;border:0;padding:12px 0;color:#1748ad;font-size:13px;cursor:pointer;text-decoration:underline}.preview-heading{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.preview-heading h2{margin-bottom:0}.size-tag{font-size:12px;white-space:nowrap;color:var(--muted)}.label-stage{padding:24px 0;margin-top:16px}.label-stage img{display:block;background:white;border:1px solid #d7d7d7;width:100%;height:auto;aspect-ratio:58/40;image-rendering:pixelated}.label-stage img.dirty{opacity:.55}.preview-status{font-size:14px;margin:0 0 18px;color:var(--green)}.error,.warning{padding:12px 14px;border-radius:8px;font-size:14px;margin-top:14px}.error{background:#fff0ed;color:#92241b}.warning{background:#fff2d4;color:#705119}.next-step{padding:24px 28px}.next-step h2{margin-bottom:8px}.next-step p{color:var(--muted);font-size:14px;margin:0 0 16px}.explanation{max-width:750px;padding:44px 0 36px}.explanation h2{margin-bottom:14px}.explanation p{color:var(--muted);font-size:14px}.footer{display:flex;flex-wrap:wrap;gap:14px 28px;border-top:1px solid var(--line);padding:22px 0 90px;font-size:12px;color:var(--muted)}[hidden]{display:none!important}
@media(max-width:760px){.workspace{grid-template-columns:1fr}.intro{padding-top:28px}.preview-column{display:contents}.panel{padding:22px}.preview-panel{order:1}.next-step{order:2;padding:10px 4px 0}.header{gap:10px}.header nav{gap:12px}.header nav>a:first-child{display:none}.shell{width:calc(100% - 28px)}.extra-grid{gap:0 12px}.lead{font-size:16px}.form-actions .button{flex:1}.preview-heading{gap:8px}.label-stage{max-width:464px;margin-left:auto;margin-right:auto}}

/* Xprinter beside the existing export action. Local prototype. */
.print-station{display:grid;grid-template-columns:155px minmax(0,1fr);align-items:center;gap:18px;margin-top:24px;padding:20px 0;border-top:1px solid var(--line)}.printer-visual{min-width:0;text-align:center}.printer-scene{position:relative;width:100%;aspect-ratio:1216/1296}.printer-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.printer-model{display:block;font-size:10px;color:var(--muted);margin-top:9px}.print-controls h3{font-size:15px;line-height:1.35;margin:0 0 8px}.print-controls .hint{font-size:12px}.print-controls .form-actions{margin-top:12px}.print-controls .primary{width:100%}.paper-window{position:absolute;left:27%;top:3%;width:24%;height:24%;transform:rotate(15deg) skewX(-9deg);transform-origin:bottom center;overflow:hidden;filter:drop-shadow(1px 2px 2px #0005)}.printed-paper{position:absolute;bottom:0;left:0;width:100%;padding:3% 3% 6%;background:linear-gradient(#fff 85%,#e1e5e5);border-radius:2px;transform:translateY(103%)}.printed-paper img{display:block;width:100%;height:auto}.printer-scene.printing .printed-paper{animation:feed-label 1.6s linear forwards}.printer-scene.printed .printed-paper{transform:translateY(0)}@keyframes feed-label{to{transform:translateY(0)}}.printer-led{position:absolute;left:15.4%;top:68.5%;width:3px;height:3px;border-radius:50%;background:#7fefc1;box-shadow:0 0 5px #3ead81}.printing .printer-led{animation:led .2s infinite alternate}@keyframes led{to{opacity:.3}}.print-invitation{background:#edf3e9;border:1px solid #d7e4cf;border-radius:12px;padding:20px;margin:4px 0 16px;animation:invite-in .3s ease-out}.print-invitation h2{font-size:20px;margin:8px 0}.print-invitation p{font-size:13px;color:var(--muted);margin:0 0 14px}.print-invitation .button{gap:15px}.success-chip{color:var(--green);font-size:11px}.print-invitation .invitation-note{font-size:11px;margin:10px 0 0}@keyframes invite-in{from{opacity:0}to{opacity:1}}@media(max-width:420px){.print-station{grid-template-columns:112px minmax(0,1fr);gap:12px}.print-controls h3{font-size:13px}.print-controls .hint{font-size:11px}.print-controls .button{padding:10px 8px;font-size:13px}.print-invitation .button{width:100%}}@media(prefers-reduced-motion:reduce){.printer-scene.printing .printed-paper{animation:none;transform:translateY(0)}.printing .printer-led,.print-invitation{animation:none}}

/* Desktop: a large printer in the open area below the preview. */
@media(min-width:761px){
.workspace{align-items:start}
.workspace>section.panel{display:block}
#label-form{display:block}
.print-station{grid-template-columns:1fr;margin-top:24px;padding-top:26px}
.preview-column{display:flex;flex-direction:column;gap:0;min-width:0}
.preview-column>.printer-visual{width:min(350px,85%);align-self:center;margin-top:0;padding-top:28px;padding-bottom:36px}
.preview-column>.printer-visual .printer-model{font-size:12px;margin-top:12px}
.print-controls .primary{max-width:310px}
}

/* Keep the original label pixels visible without extra paper margins. */
.printed-paper{padding:0 0 3%;background:#fff}.printed-paper img{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.inspect-label{font-size:12px;line-height:1.3;padding:9px 0;display:block;width:100%}
#label-detail{width:min(560px,calc(100% - 28px));padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink)}#label-detail::backdrop{background:#18211f88}.label-detail-heading{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-bottom:20px}.label-detail-heading h2{margin:0;font-size:18px}.label-detail-heading button{border:0;background:none;font-size:28px;cursor:pointer;color:var(--ink)}#label-detail-image{display:block;width:100%;height:auto;border:1px solid var(--line);image-rendering:pixelated}
@media(min-width:761px){.preview-column>.printer-visual{width:min(420px,90%)}}

/* Feed the label first, then turn it toward the viewer. */
.printer-scene.presenting{z-index:2}
.printer-scene.presenting .paper-window{overflow:visible;transform:translate(10%,55%) rotate(-2deg) skewX(0deg) scale(2.8);transition:transform 1.1s cubic-bezier(.22,.7,.18,1);filter:drop-shadow(0 6px 5px #18211f35)}
.printer-scene.presenting .printed-paper{border-radius:1px}
.printer-scene.presenting .printed-paper img{image-rendering:auto}
@media(max-width:760px){.printer-scene.presenting .paper-window{transform:translate(10%,65%) rotate(-2deg) skewX(0deg) scale(2.6)}}
@media(prefers-reduced-motion:reduce){.printer-scene.presenting .paper-window{transition:none}}

/* Benefits appear after the label turns toward the viewer. */
.print-invitation{background:linear-gradient(135deg,#eff5ec,#f8faf2);padding:24px;border-color:#d5dfcd;animation:none}
.print-invitation h2{font-size:28px;line-height:1.12;letter-spacing:-.035em;margin:12px 0}
.print-invitation .invitation-lead{font-size:14px;line-height:1.55;margin-bottom:20px}
.invitation-benefits{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:15px}
.invitation-benefits li{display:flex;align-items:flex-start;gap:11px;font-size:12px;line-height:1.5;color:var(--muted)}
.invitation-benefits strong{display:block;font-size:13px;color:var(--ink);margin-bottom:2px}
.invitation-benefits li>span:last-child>span{display:block}
.benefit-icon{flex:0 0 28px;width:28px;height:28px;border:1px solid #d4e1cc;border-radius:8px;background:#fff9;color:var(--green);display:grid;place-items:center;font-size:18px}
.invitation-cta{width:100%;min-height:50px;justify-content:space-between}
.print-invitation:not([hidden])>.success-chip,.print-invitation:not([hidden])>h2,.print-invitation:not([hidden])>.invitation-lead,.print-invitation:not([hidden]) .invitation-benefits li{animation:benefit-appear .45s both cubic-bezier(.2,.65,.3,1)}
.print-invitation>h2{animation-delay:.08s!important}.print-invitation>.invitation-lead{animation-delay:.16s!important}
.invitation-benefits li:nth-child(1){animation-delay:.24s!important}.invitation-benefits li:nth-child(2){animation-delay:.34s!important}.invitation-benefits li:nth-child(3){animation-delay:.44s!important}.invitation-benefits li:nth-child(4){animation-delay:.54s!important}
@keyframes benefit-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:420px){.print-invitation{padding:19px}.print-invitation h2{font-size:25px}.invitation-cta{font-size:13px}}
@media(prefers-reduced-motion:reduce){.print-invitation:not([hidden])>* , .print-invitation:not([hidden]) .invitation-benefits li{animation:none!important}}

/* The invitation replaces desktop controls; neither column follows the other's height. */
.inspect-label[hidden]{display:block!important;visibility:hidden;pointer-events:none}
@media(min-width:761px){.print-station.has-result{display:none}.print-invitation{margin-top:24px}.repeat-pdf{display:block;margin-top:4px}.printer-visual{overflow-anchor:none}}
@media(max-width:760px){.print-station{align-items:start}.repeat-pdf{display:none}}