:root{--navy:#142b43;--panel:#203b56;--card:#294963;--gold:#e9bb70;--light:#f7f2e8;--muted:#c3cfdb}*{box-sizing:border-box}body{margin:0;background:var(--navy);color:var(--light);font-family:Tahoma,Arial,sans-serif;line-height:1.65}button,input{font:inherit}a{color:inherit;text-decoration:none}.bar{max-width:1290px;margin:auto;height:72px;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.brand{font:900 26px Arial,sans-serif;letter-spacing:.12em}.bar-actions{display:flex;gap:24px;align-items:center}.bar-actions a:hover{color:var(--gold)}.lang,.subtle{background:none;border:1px solid #e9bb7080;color:var(--gold);border-radius:4px;padding:7px 12px;cursor:pointer}.container{max-width:1290px;margin:auto;padding:38px 24px 80px}.heading{margin-bottom:28px}.eyebrow,.step{color:var(--gold);font:700 13px Arial,sans-serif;letter-spacing:.1em}h1{font-size:clamp(34px,4.2vw,56px);line-height:1.2;margin:12px 0}p{color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:20px;align-items:stretch}.viewer-panel,.editor-panel,.layout-panel{background:var(--panel);border:1px solid #ffffff2b;border-radius:9px}.viewer-panel{overflow:hidden}.viewer{position:relative;height:min(50vw,535px);min-height:380px;cursor:grab;touch-action:none;background:radial-gradient(circle at 52% 35%,#43627a,#203b56 68%)}.viewer:active{cursor:grabbing}.viewer canvas{display:block;width:100%;height:100%}.viewer-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted)}.viewer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 17px;font-size:14px;color:var(--muted)}.editor-panel{padding:25px}.editor-panel h2,.layout-panel h2{font-size:23px;margin:5px 0 16px}.upload{display:block;position:relative;cursor:pointer;border:1px dashed var(--gold);border-radius:5px;background:#fff1;padding:20px;text-align:center;color:var(--gold);font-weight:bold}.upload small{display:block;color:var(--muted);font-weight:normal;font-size:13px}.upload input{position:absolute;width:1px;height:1px;opacity:0}.upload:focus-within{outline:2px solid var(--gold)}.layer-head{display:flex;justify-content:space-between;margin:24px 0 10px}.layers{display:grid;gap:7px;max-height:160px;overflow:auto}.empty{font-size:14px}.layer{display:flex;align-items:center;gap:10px;width:100%;padding:7px;background:#ffffff0c;border:1px solid transparent;color:var(--light);text-align:start;cursor:pointer;border-radius:5px}.layer.selected{border-color:var(--gold)}.layer img{width:37px;height:37px;object-fit:contain;background:#fff}.layer span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.image-controls{border-top:1px solid #ffffff29;margin-top:22px;padding-top:15px}.image-controls label{display:grid;grid-template-columns:1fr auto;gap:5px;margin:11px 0;font-size:14px}.image-controls input{grid-column:1/-1;width:100%;accent-color:var(--gold)}.remove{background:none;border:none;padding:7px 0;color:#f1c1b9;text-decoration:underline;cursor:pointer}.layout-panel{margin-top:20px;padding:24px}.layout-info{display:flex;justify-content:space-between;gap:20px;align-items:start}.layout-info p{max-width:750px}.badge{color:var(--gold);border:1px solid #e9bb7077;border-radius:40px;padding:6px 12px;white-space:nowrap;font-size:14px}.paper-scroll{overflow-x:auto;padding:20px 0}.paper{position:relative;min-width:720px;width:100%;aspect-ratio:2.58/1;background:#f5f5f1;background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#d6d9d8 calc(25% - 1px),#d6d9d8 25%);overflow:hidden;touch-action:none}.surface-outline{position:absolute;inset:9.5% 3.7%;border:2px dashed #ae8050;pointer-events:none;z-index:2}.surface-outline span{position:absolute;top:5px;left:8px;color:#7b593b;background:#f5f5f1;padding:0 4px;font-size:12px}.paper-layers{position:absolute;inset:0}.paper-image{position:absolute;height:auto;max-width:none;transform:translate(-50%,-50%) rotate(var(--rotation));touch-action:none;cursor:move;user-select:none}.paper-image.selected{outline:2px solid #d68b36;outline-offset:2px}.layout-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px}.layout-bottom p{font-size:14px;max-width:700px}.download{background:var(--gold);border:0;border-radius:4px;color:#142b43;padding:10px 18px;font-weight:bold;cursor:pointer;white-space:nowrap}.status{min-height:22px;color:var(--gold);font-size:14px;margin-top:10px}html[lang=en] body{font-family:Arial,Helvetica,sans-serif}@media(max-width:860px){.workspace{grid-template-columns:1fr}.viewer{height:65vw;min-height:310px}.layout-info,.layout-bottom{flex-direction:column;align-items:start}.container{padding:24px 16px 60px}.layout-panel{padding:18px}.bar{padding:0 16px}}@media(max-width:520px){.viewer-foot{align-items:start;flex-direction:column}.bar-actions{gap:10px}.paper{min-width:650px}.viewer{height:82vw;min-height:290px}}
/* Customer-facing edit view; optional production and 3D panels follow below. */
.simple-panel{background:var(--panel);border:1px solid #ffffff2b;border-radius:9px;overflow:hidden;padding:13px}.simple-stage{position:relative;max-width:630px;margin:auto;aspect-ratio:1;direction:ltr;touch-action:none}.simple-stage>img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.simple-stage canvas{position:absolute;left:13%;top:18%;width:58%;height:69%;clip-path:polygon(2% 0,98% 0,100% 96%,97% 100%,3% 100%,0 96%);mix-blend-mode:multiply;touch-action:none;cursor:grab}.simple-stage canvas:active{cursor:grabbing}.simple-empty{position:absolute;left:21%;top:47%;width:45%;padding:10px;background:#fffdf5d9;color:#243a50;text-align:center;font-size:14px;border-radius:4px;pointer-events:none}.simple-caption{font-size:14px;padding:10px 7px 3px}.option-panel{border:1px solid #ffffff35;border-radius:8px;background:var(--panel);margin-top:18px;overflow:hidden}.option-panel>summary{cursor:pointer;list-style:none;padding:18px 23px;font-size:18px;font-weight:bold;color:var(--gold);display:flex;justify-content:space-between;align-items:center}.option-panel>summary::-webkit-details-marker{display:none}.option-panel>summary:after{content:'+';font-size:24px;line-height:1}.option-panel[open]>summary:after{content:'−'}.option-panel[open]>summary{border-bottom:1px solid #ffffff20}.option-panel .viewer-panel{border:0;border-radius:0}.option-panel .viewer{height:min(52vw,560px);min-height:330px}.option-panel .layout-panel{border:0;margin-top:0}.heading p{max-width:760px}@media(max-width:860px){.option-panel .viewer{height:65vw;min-height:300px}}@media(max-width:520px){.simple-panel{padding:7px}.simple-empty{font-size:12px}.option-panel>summary{font-size:16px;padding:15px}.option-panel .viewer{height:82vw;min-height:270px}}
/* The magic mug cycles between cool charcoal and revealed artwork. */
.magic-mug{--magic-reveal:0}
.magic-mug .simple-stage .magic-cool-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;mask-image:linear-gradient(to top,transparent calc(var(--magic-edge,-4%) - 4%),#000 calc(var(--magic-edge,-4%) + 4%));pointer-events:none}
.magic-mug .simple-stage canvas{z-index:3;mask-image:linear-gradient(to top,#000 calc(var(--magic-edge,-4%) - 4%),transparent calc(var(--magic-edge,-4%) + 4%))}
@media(prefers-reduced-motion:reduce){.magic-mug{--magic-edge:104%}}