/* Tekmak editorial direction — presentation only, no changes to the 3D cycle. */
:root{--yellow:#ffcf00;--muted:#acb5bf;--border:#ffffff18;font-family:Arial,Helvetica,sans-serif;background:#080c10;color:#f5f6f7}
.primary{background:linear-gradient(135deg,#ffda32,#ffc400);border:1px solid #ffdd59;border-radius:14px;font-size:15px;font-weight:750;letter-spacing:-.1px;box-shadow:0 5px 24px #ffcf0012;min-height:50px;padding:14px 22px;transition:box-shadow .2s,transform .2s}
.primary:hover:not(:disabled){filter:none;box-shadow:0 7px 30px #ffcf0025;transform:translateY(-1px)}
.primary:disabled{opacity:.35;box-shadow:none}
.secondary{background:#ffffff06;border-color:#ffffff22;border-radius:12px;font-size:13px;color:#c5cdd5}
.brand-return{gap:8px}.brand-return span{font-size:11px;color:#8e99a5}.brand-return .logo{filter:none!important}
.color-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,34%);grid-template-rows:auto auto;align-content:center;column-gap:clamp(28px,5vw,84px);row-gap:28px;padding:120px clamp(28px,5vw,88px) 70px;background:radial-gradient(ellipse at 25% 45%,#20262b,#080c10 70%);min-height:100svh;box-sizing:border-box}
.color-heading{display:contents!important}.color-heading>.brand-return{position:absolute;top:32px;left:clamp(28px,5vw,88px)}
.color-heading .simple{width:145px!important;max-width:145px;transform:none!important;position:static;margin:0}
.color-heading>div{grid-column:2;grid-row:1;text-align:left;align-self:end}
.color-heading .eyebrow{font-size:11px;letter-spacing:1.8px;font-weight:700;color:#aab4bf;margin:0 0 20px;display:flex;align-items:center;gap:14px}
.color-heading .eyebrow:after{content:"";width:64px;height:1px;background:#ffcf00}
#color-title,#color-title em{display:block!important;color:#f5f6f7!important;-webkit-text-fill-color:#f5f6f7!important;background:none!important;font-size:clamp(30px,3.3vw,52px);line-height:1.08;letter-spacing:-1.6px;transform:none;margin:0 0 20px;font-weight:800}
.color-heading .subtitle{font-size:16px;line-height:1.6;color:#aeb8c3;max-width:340px}
.color-stage .garment-options{grid-column:1;grid-row:1/3;gap:16px;margin:0;align-self:center}
.color-stage .garment{height:clamp(340px,53svh,580px);min-height:0;max-height:none;padding:24px 12px 12px;border:1px solid #ffffff1b;border-radius:18px;background:linear-gradient(155deg,#242a2fbb,#0d1217);box-shadow:inset 0 1px 0 #ffffff07;transition:border-color .2s,background .2s,transform .2s}
.color-stage .garment:hover{background:linear-gradient(155deg,#2b3238,#10161b);transform:translateY(-3px)}
.color-stage .garment.selected{border-color:#ffcf00;box-shadow:0 0 0 1px #ffcf0017,0 12px 40px #0003}
.garment>img{height:calc(100% - 54px);filter:drop-shadow(0 18px 15px #0005)}
.garment-label{font-size:13px!important;gap:8px;min-height:54px;color:#c3ccd5;white-space:nowrap}
.garment.selected .garment-label{color:#fff}.garment-label i{width:15px;height:15px;border:1px solid #ffffff65;box-shadow:0 0 0 3px #ffffff06}
.check{width:23px!important;height:23px!important;top:12px!important;right:12px!important;background:#ffcf00!important;font-size:14px!important;color:#080c10!important;box-shadow:0 2px 8px #0002}
.color-footer{grid-column:2;grid-row:2;margin:0!important;align-self:start;justify-content:flex-start}
.color-footer .primary{position:static!important;width:auto;min-width:165px;min-height:50px;font-size:15px;padding:13px 25px}
.draw-stage{background:radial-gradient(ellipse at 25% 15%,#20272d,#080c10 70%);padding:28px clamp(24px,4vw,64px) 0!important}
.draw-stage .heading{margin:0 0 22px!important;align-items:center}
#draw-title{font-size:clamp(25px,3vw,42px)!important;color:#f5f6f7!important;text-transform:none;font-weight:800;transform:none;letter-spacing:-1px;line-height:1.12!important;height:auto!important;margin:0!important}
.draw-stage .brand-return .logo{width:135px;max-width:135px}
.drawing-layout{gap:28px!important;grid-template-columns:minmax(0,1fr) minmax(250px,27%)!important;flex:1;min-height:0}
.paper-column{gap:12px}.toolbar{height:60px!important;gap:12px!important;padding:8px 12px!important;background:#141b21;border:1px solid #ffffff12;border-radius:14px;box-shadow:inset 0 1px 0 #ffffff05}
.toolbar .icon-button,.toolbar .icon-button:first-child{width:42px;height:42px;margin:0;border:1px solid transparent;border-radius:9px;background:#ffffff04;color:#bac3cd}
.toolbar .icon-button.active{background:#ffcf0015;border-color:#ffcf0055;color:#ffcf00}.icon-button svg{width:24px;height:24px}
.tool-divider{height:24px;background:#ffffff18;margin:0 5px}.brush-size{font-size:12px;color:#b5c0cb;gap:12px}.size-dots{display:none}.clear-button{font-size:12px;color:#b5c0cb}
.paper{border:1px solid #ffffff20;border-radius:15px;background:#f5f4f0;padding:12px;box-shadow:0 18px 48px #0004;overflow:hidden}
.paper canvas{border-radius:6px}
.inks{padding:0!important;border:0;margin:0;overflow:auto}
.inks h2{transform:none;font-size:23px!important;font-weight:750;line-height:1.2;height:auto!important;margin:4px 0 9px;letter-spacing:-.5px}
.inks h2 em{color:#ffcf00}.inks>p{font-size:13px!important;color:#aab5c0;line-height:1.5;margin-bottom:18px!important}
.bottles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bottle{height:clamp(110px,19svh,190px)!important;min-height:0;padding:12px 7px 8px;border:1px solid #ffffff1b;background:linear-gradient(155deg,#242b32,#11181e);border-radius:13px}
.bottle.selected{border-color:#ffcf00;background:linear-gradient(155deg,#30312a,#181b19)}
.bottle>span:last-child{font-size:11px!important;color:#c6ced6;line-height:20px}.bottle img{filter:drop-shadow(0 5px 6px #0005)}
.mix-color{border:1px solid #ffffff17;border-radius:12px;background:#141b21;font-size:13px!important;height:48px!important;margin-top:14px;padding:9px 12px}
.draw-footer{margin:16px 0 0!important;padding:14px 0!important;border-top:1px solid #ffffff12;background:transparent;min-height:68px;gap:18px}
.draw-footer .primary{font-size:15px;min-height:48px;min-width:190px;padding:12px 20px}.draw-footer .text-button{font-size:13px;color:#abb5bf}.draw-footer>p{color:#9ca8b5}
.studio-logo{position:absolute;top:30px;left:clamp(24px,4vw,64px);width:145px;height:auto;z-index:3;pointer-events:none}
.studio-stage::before{background:linear-gradient(270deg,#080c10 0%,#080c10 18%,rgba(8,12,16,.95) 31%,rgba(8,12,16,.55) 47%,rgba(8,12,16,.12) 67%,transparent 88%)}
.process-guide{width:clamp(320px,34vw,500px);padding:90px clamp(28px,4vw,64px) 50px;gap:26px}
.process-guide .guide-kicker{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:1.6px;color:#b9c3cd;font-weight:700;margin:0}
.process-guide .guide-kicker:after{content:"";height:1px;width:64px;background:#ffcf00;opacity:.8}
.process-guide h2,.process-guide.is-command h2{font-size:clamp(28px,3vw,44px);font-weight:800;line-height:1.1;letter-spacing:-1.1px;color:#f5f6f7;text-transform:none;border:0;padding:0;margin:0 0 18px}
.process-guide #guide-description{font-size:15px;line-height:1.65;color:#b3bec9;max-width:370px}
.process-guide .primary{width:fit-content;max-width:100%;padding:14px 24px;font-size:14px;min-height:48px;border-radius:13px;gap:12px}
.guide-cmyk{display:flex;gap:12px;margin-top:-6px}.guide-cmyk i{display:block;width:20px;height:20px;border-radius:50%;background:var(--ink);border:1px solid #ffffff38;box-shadow:inset 0 0 0 2px #ffffff12}
#drawer-controls{max-width:280px;padding:0;border:0;background:none}#drawer-label{font-size:11px;color:#a5b1be;letter-spacing:.3px}
#drawer-position{height:5px;border-radius:10px;cursor:ew-resize}
.studio-overlay-tools{top:25px;right:28px;gap:10px}.studio-icon{width:34px;height:34px;background:#ffffff05;border-color:#ffffff15;color:#aab7c4;backdrop-filter:blur(8px)}
.studio-stage .studio-footer{right:clamp(320px,34vw,500px);bottom:24px;gap:12px}
.studio-stage .refill-controls,.studio-stage .cycle-controls{width:min(300px,90%);padding:12px 16px;border-radius:14px;background:#10171dd9;border-color:#ffffff19;box-shadow:0 6px 24px #0002}
.studio-stage .refill-controls .refill-row>span#refill-label{position:static;width:auto;height:auto;clip-path:none;white-space:normal;font-size:11px;color:#c0cbd6;margin:0;flex:none;min-width:110px}
.studio-stage .refill-controls{gap:12px}.studio-stage .refill-controls progress{accent-color:#ffcf00}
.studio-stage .cycle-pause{font-size:13px}.studio-stage .replay-stage{background:transparent;border:1px solid #ffffff18;color:#a9b5c1;border-radius:10px;padding:9px 12px}
body[data-stage=result] .studio-stage::before{background:linear-gradient(270deg,#080c10 0%,#080c10 20%,rgba(8,12,16,.5) 46%,transparent 68%)}
#guide-sales{text-decoration:none}.studio-stage #result-actions .primary{background:none;border:1px solid #ffffff1a;box-shadow:none;color:#aab7c4;font-size:12px}
@media(max-width:1000px) and (min-width:761px){.color-stage{column-gap:28px;padding-left:28px;padding-right:28px}.color-stage .garment-options{gap:10px}.garment-label{font-size:11px!important}.process-guide{padding-left:28px;padding-right:28px}.toolbar{gap:7px!important}.brush-size{font-size:0}.bottles{grid-template-columns:repeat(2,minmax(0,1fr))}.bottle{height:130px!important}}
@media(max-width:760px){
 .color-stage{display:flex;flex-direction:column;min-height:100svh;justify-content:center;padding:100px 20px 32px!important;gap:24px}
 .color-heading>.brand-return{top:24px;left:20px}.color-heading .simple{width:120px!important}.color-heading>div{align-self:stretch;text-align:left}
 #color-title{font-size:32px!important;letter-spacing:-1px;margin-bottom:12px}.color-heading .eyebrow{font-size:10px;margin-bottom:12px}.color-heading .subtitle{font-size:13px}
 .color-stage .garment-options{width:100%;gap:9px;margin:0!important}.color-stage .garment{height:clamp(210px,33svh,320px);padding:20px 4px 8px;border-radius:12px}
 .garment-label{font-size:11px!important;gap:5px}.garment-label i{width:12px;height:12px}.garment>img{height:calc(100% - 42px)}.garment-label{min-height:42px}.check{width:19px!important;height:19px!important;top:8px!important;right:8px!important;font-size:12px!important}
 .color-footer{width:100%;margin:0!important}.color-footer .primary{width:100%;min-height:48px}
 .draw-stage{padding:22px 16px 0!important}.draw-stage .heading{padding-top:50px;margin-bottom:18px!important;position:relative}#draw-title{font-size:29px!important}
 .draw-stage .brand-return{top:0!important;right:0!important}.draw-stage .brand-return .logo{width:110px}
 .drawing-layout{display:flex;gap:20px!important}.toolbar{height:52px!important;padding:6px!important;gap:7px!important}.toolbar .icon-button,.toolbar .icon-button:first-child{width:36px;height:36px}.brush-size{font-size:0}.tool-divider{margin:0 2px}
 .paper{min-height:0;aspect-ratio:144/93;flex:none;padding:9px;border-radius:12px}.paper canvas{height:100%}
 .inks h2{font-size:20px!important}.inks>p{font-size:12px!important;margin-bottom:12px!important}.bottles{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.bottle{height:120px!important;padding:8px 4px 6px;border-radius:10px}.bottle>span:last-child{font-size:10px!important}
 .draw-footer{margin-top:18px!important;gap:10px}.draw-footer .primary{width:100%;margin-top:4px}
 .studio-logo{top:22px;left:20px;width:110px}.studio-overlay-tools{top:20px;right:16px;gap:6px}.studio-icon{width:30px;height:30px}
 .process-guide{height:250px;left:0;right:0;top:auto;width:100%;padding:22px 24px;gap:14px;justify-content:flex-start}
 .process-guide h2,.process-guide.is-command h2{font-size:27px;line-height:1.1;letter-spacing:-.7px;margin-bottom:12px}
 .process-guide .guide-kicker,.process-guide.is-command .guide-kicker{font-size:9px;letter-spacing:1.2px}.process-guide #guide-description{font-size:13px;line-height:1.5;max-width:420px}
 .process-guide .primary{min-height:42px;padding:10px 20px;font-size:13px}.guide-cmyk{gap:10px;margin-top:-4px}.guide-cmyk i{width:16px;height:16px}
 .studio-stage::before{background:linear-gradient(0deg,#080c10 0%,#080c10 15%,rgba(8,12,16,.95) 27%,rgba(8,12,16,.4) 43%,transparent 65%)}
 body[data-stage=result] .studio-stage::before{background:linear-gradient(0deg,#080c10 0%,#080c10 18%,rgba(8,12,16,.65) 36%,transparent 62%)}
 .studio-stage .studio-footer{right:0;bottom:262px;gap:8px}.studio-stage .refill-controls,.studio-stage .cycle-controls{padding:9px 13px;width:260px}
 .studio-stage #result-actions{gap:8px}.studio-stage #result-actions a{padding:8px 10px;font-size:11px}
}
@media(max-width:380px){.process-guide{padding-left:20px;padding-right:20px}.process-guide h2,.process-guide.is-command h2{font-size:24px}.process-guide #guide-description{font-size:12px}.bottle{height:105px!important}.studio-logo{width:92px}.garment-label{font-size:10px!important}}
@media(prefers-reduced-motion:reduce){.primary,.garment{transition:none}.primary:hover:not(:disabled),.color-stage .garment:hover{transform:none}}

/* Final backdrop and copy treatment from the approved reference.
   Existing product photos, models, lighting and motion remain in use. */
.studio-stage{background:#171e24}
.studio-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 32% 52%,transparent 25%,rgba(8,12,16,.24) 65%,rgba(8,12,16,.6) 100%)}
body[data-stage=result] .studio-stage::after{background:radial-gradient(ellipse at 32% 52%,transparent 30%,rgba(8,12,16,.28) 100%)}
.draw-stage .heading .eyebrow{display:flex;align-items:center;gap:8px;color:#aab4bf;font-size:10px;letter-spacing:1.6px;margin-bottom:14px}
.draw-stage .heading .eyebrow:after{content:"";width:64px;height:1px;background:#ffcf00;margin-left:6px}
.draw-stage .heading .subtitle{display:block;font-size:14px;line-height:1.5;color:#aeb8c3;margin-top:10px;max-width:440px}
.process-guide h2,#color-title,#draw-title{text-wrap:balance}
.process-guide #guide-description,.color-heading .subtitle,.draw-stage .heading .subtitle{text-wrap:pretty}
@media(max-width:760px){.draw-stage .heading .eyebrow{font-size:9px;margin-bottom:10px}.draw-stage .heading .subtitle{font-size:12px;margin-top:8px}.studio-stage::after{background:radial-gradient(ellipse at 50% 32%,transparent 25%,rgba(8,12,16,.35) 100%)}}

/* Direct manipulation replaces the press buttons and visible progress HUDs. */
#drawer-controls,#refill-controls,#cycle-scrubber,#cycle-time{display:none!important}
.studio-stage .cycle-controls{width:auto;min-width:0;padding:8px 12px}

/* Homepage preview: both machines, with no duplicated interface. */
body[data-stage=preview] { overflow:hidden;background:#080b0f; }
body[data-stage=preview] .studio-stage { background:#080b0f; }
body[data-stage=preview] .studio-stage::before,body[data-stage=preview] .studio-stage::after,
body[data-stage=preview] .studio-logo,body[data-stage=preview] .studio-overlay-tools,
body[data-stage=preview] .process-guide,body[data-stage=preview] .studio-footer { display:none; }
.is-embedded .studio-logo,.is-embedded .studio-overlay-tools>a { display:none; }
.is-embedded .process-guide { transition:opacity .45s ease; }
@media(prefers-reduced-motion:reduce) { .is-embedded .process-guide { transition:none; } }

/* Four ready-to-print designs replace the drawing editor. */
.design-stage{padding:76px clamp(20px,4vw,70px) 30px;min-height:100svh;background:radial-gradient(ellipse at 50% 35%,#202830,#080c10 75%);display:flex;flex-direction:column;justify-content:center;gap:25px}
.design-heading{text-align:center;max-width:760px;margin:0 auto}
.design-heading .eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:12px}
.design-heading #draw-title{font-size:clamp(27px,3.4vw,46px)!important;letter-spacing:-1.4px;margin:0 0 12px;font-weight:800;outline:none}
.design-heading .subtitle{font-size:14px;line-height:1.6;max-width:650px;margin:auto}
.design-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:100%;max-width:1200px;margin:0 auto}
.design-card{padding:0 0 16px;overflow:hidden;border:1px solid #ffffff26;border-radius:14px;background:#ffffff06;text-align:left;transition:border-color .2s,background .2s,transform .2s}
.design-card:hover{transform:translateY(-3px);background:#ffffff0c}
.design-card.is-selected{border-color:#ffcf00;background:#ffcf000a;box-shadow:0 0 0 1px #ffcf00}
.design-card-preview{position:relative;display:block;aspect-ratio:1;background:radial-gradient(ellipse,#fff,#e7ebed);overflow:hidden}
.design-shirt{width:100%;height:100%;object-fit:contain;display:block}
.design-art{position:absolute;left:33%;top:31%;width:34%;height:34%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none}
.design-card-name{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:700;padding:14px 15px 5px}
.design-card-caption{display:block;font-size:11px;color:#aab5c2;padding:0 15px}
.design-check{display:grid;place-items:center;width:20px;height:20px;border:1px solid #ffffff30;border-radius:50%;color:transparent;font-size:12px}
.is-selected .design-check{background:#ffcf00;border-color:#ffcf00;color:#111}
.design-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;max-width:1200px;width:100%;margin:0 auto}
.design-footer .text-button{font-size:12px;text-decoration:none}.design-footer #editor-status{font-size:12px;color:#d1dae2}.design-footer .primary{margin-left:auto}
@media(max-width:760px){
 .design-stage{padding:76px 18px 24px;justify-content:flex-start;gap:20px}
 .design-heading{text-align:left}.design-heading .subtitle{font-size:12px}.design-heading #draw-title{font-size:28px!important}
 .design-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .design-card-preview{max-height:200px}.design-card-name{padding:10px 12px 4px;font-size:13px}.design-card-caption{padding:0 12px;font-size:10px}.design-card{padding-bottom:12px}
 .design-footer{flex-wrap:wrap;gap:10px}.design-footer .primary{width:100%;order:-1}.design-footer .text-button{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.design-card{transition:none}.design-card:hover{transform:none}}

/* Keep result actions readable when the rotating white shirt passes behind. */
body[data-stage=result] .studio-stage #result-actions a,
body[data-stage=result] .studio-stage .replay-stage{background:#111820;color:#e8edf2;border-color:#ffffff30}

/* Lower the mobile copy while keeping the guide above the safe area. */
@media(max-width:760px){
 .design-stage{padding-top:100px}
 .process-guide{height:222px;padding-bottom:max(22px,env(safe-area-inset-bottom))}
 .studio-stage .studio-footer{bottom:234px}
}