/* site colours: --accent marks the selected/current state (e.g. the current step) */
:root{
  --accent:#9A8674;     /* selected borders (e.g. the chosen size card) */
  --accent-hi:#B2A69B;  /* selected fills + text: current step, chosen toggle, slider, step descriptions */
  --line:#383633;       /* quiet borders and dividers */
  --line-strong:#605d57;/* outlined buttons and fields */
  --track:#2e2c29;      /* empty progress tracks */
  --panel:#141311;      /* option cards */
  --panel-on:#252421;   /* chosen option card */
  --segs:#31302b;       /* background of a pill toggle group */
  --label:#9b968b;      /* small uppercase labels */
  --idle:#7d796f;       /* steps not reached yet */
}
html,body{margin:0;background:#0d0c0b;overscroll-behavior:none}
a{color:#efe9df}a:hover{color:#ffffff}
.sheet{background-color:#9e7856;background-image:url(/tex/t2.jpg);background-size:640px}
.tray{background-color:#8a6546;background-image:url(/tex/t2.jpg);background-size:640px;background-blend-mode:multiply;box-shadow:inset 0 3px 12px rgba(0,0,0,.55);border-radius:4px}
.tex-board{background-color:#ae8661;background-image:url(/tex/t1.jpg);background-size:64% auto}
.tex-flute{background-color:#b9a990;background-image:url(/tex/t3.jpg);background-size:64% auto}
.rim{background:#ddc9a7}
.pc{position:relative;width:100%;aspect-ratio:1/1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.ly{position:absolute;inset:0;display:block;width:100%;height:100%}
.rough{filter:url(#cbRough)}
.linerwrap{filter:drop-shadow(0 1.5px 1px rgba(25,14,5,.6))}
.light{background:linear-gradient(165deg,rgba(255,244,225,.10),rgba(255,244,225,0) 45%,rgba(30,18,6,.10))}

/* ---------- type ---------- */
@font-face{font-family:'UM Gill Ultra';src:local('Gill Sans Ultra Bold'),local('GillSans-UltraBold'),local('Gill Sans UltraBold'),local('GillSansUltraBold'),local('Gill Sans MT Ultra Bold');font-weight:400;font-style:normal}
.wm-gill{font-family:'UM Gill Ultra','Bricolage Grotesque',sans-serif;font-weight:400;font-stretch:100%;font-variation-settings:normal;letter-spacing:-.005em;text-transform:none;line-height:1}
.wm{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-stretch:75%;font-variation-settings:'wdth' 75,'opsz' 96;letter-spacing:-.01em;text-transform:uppercase;line-height:.85}
.lbl{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#a39b8f}
.num{font-variant-numeric:tabular-nums}

/* ---------- controls (dark) ---------- */
.btn{font-family:'DM Mono',ui-monospace,monospace;font-size:15px;font-weight:400;min-height:44px;padding:0 18px;border:1.5px solid rgba(239,233,223,.35);background:transparent;color:#efe9df;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;transition:background .15s,border-color .15s}
.btn:hover{border-color:#efe9df;background:rgba(239,233,223,.06)}
.btn:focus-visible,.cellbtn:focus-visible,.opt:focus-visible,.seg:focus-visible,.vp:focus-visible,.icon:focus-visible{outline:2px solid #efe9df;outline-offset:3px}
.btn-ink{background:#efe9df;color:#0d0c0b;border-color:#efe9df}
.btn-ink:hover{background:#ffffff;border-color:#ffffff}
.btn:disabled,.icon:disabled{opacity:.35;cursor:not-allowed}
.btn-light{border-color:rgba(239,233,223,.35);color:#efe9df}
.icon{all:unset;box-sizing:border-box;width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#efe9df;cursor:pointer;background:rgba(239,233,223,.08)}
.icon:hover{background:rgba(239,233,223,.16)}
.seg{font-family:'DM Mono',ui-monospace,monospace;font-size:14px;font-weight:400;min-height:44px;min-width:44px;padding:0 14px;border:1.5px solid rgba(239,233,223,.3);background:transparent;color:#efe9df;cursor:pointer;border-radius:999px}
.seg.on{background:#efe9df;color:#0d0c0b;border-color:#efe9df}
.fdd{position:relative}
.fdd-btn{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:0 16px 0 18px;border-radius:999px;border:1px solid rgba(239,233,223,.12);background:rgba(26,24,22,.9);color:#efe9df;display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',ui-monospace,monospace;font-size:15px;font-weight:400;white-space:nowrap;transition:border-color .15s}
.fdd-btn:hover{border-color:rgba(239,233,223,.3)}
.fdd-btn:focus-visible{outline:2px solid #efe9df;outline-offset:2px}
.fdd-btn .chev{margin-left:2px;transition:transform .2s ease}
.fdd.open .fdd-btn{border-color:rgba(239,233,223,.3)}
.fdd.open .fdd-btn .chev{transform:rotate(180deg)}
.fdd-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:244px;padding:6px;border-radius:20px;background:rgba(26,24,22,.97);border:1px solid rgba(239,233,223,.12);box-shadow:0 18px 44px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:2px;transform-origin:top right;animation:fddIn .16s ease-out}
@keyframes fddIn{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}
.fdd-opt{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:0 14px 0 12px;border-radius:14px;display:flex;align-items:center;gap:10px;font-family:'DM Mono',ui-monospace,monospace;font-size:15px;font-weight:400;color:#cfc8bc;transition:background .12s,color .12s}
.fdd-opt:hover,.fdd-opt:focus-visible{background:rgba(239,233,223,.08);color:#efe9df;outline:none}
.fdd-opt.on{color:#efe9df}
.fdd-opt .ck{flex:none;visibility:hidden}
.fdd-opt.on .ck{visibility:visible}
.fdd-opt .t{flex:1}
.fc{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:#8d867b}
@media (prefers-reduced-motion:reduce){.fdd-menu{animation:none}.fdd-btn .chev{transition:none}}
@media (max-width:900px){
  /* phones and upright tablets: one screen, no page scrolling.
     header + title on top, the cardboard fills whatever space is left, tools pinned below */
  .mk-main{height:100vh;height:100svh;min-height:0 !important;padding:10px 14px 0 !important;gap:8px !important;overflow:hidden;box-sizing:border-box}
  .mk-top{flex:none;gap:14px !important;flex-wrap:nowrap !important}
  .mk-top .btn{min-height:40px;padding:0 14px;font-size:14px}
  .bk-long{display:none}
  .bk-short{display:inline !important}
  .step.on{flex-grow:3}
  .mk-row{flex:1 1 auto;min-height:0;flex-direction:column;flex-wrap:nowrap !important;align-items:stretch !important;gap:8px !important}
  .mk-left,.mk-aside{width:auto !important;align-self:stretch}
  .mk-left{flex:1 1 auto !important;min-height:0;gap:6px !important}
  .mk-head{flex:none;margin:0 !important;gap:2px !important}
  .mk-head h2{font-size:20px !important}
  .mk-head p{display:none}
  .mk-left > [role=toolbar]{flex:none;gap:6px !important}
  .mk-left > [role=toolbar] .btn,.mk-left > [role=toolbar] .seg{min-height:38px;padding:0 12px}
  .tray{flex:1 1 auto;min-height:0;max-height:none !important;padding:6px !important;container-type:size}
  .tray.fit .pc{width:min(100cqw,100cqh) !important;max-width:none !important}
  .tray > img{max-width:100cqw !important;max-height:100cqh !important}
  .mk-aside{flex:none !important;position:relative;max-height:42svh;overflow-y:auto;overscroll-behavior:contain;margin:0 -14px;padding:12px 14px calc(14px + env(safe-area-inset-bottom));background:rgba(19,18,16,.97);border-top:1px solid rgba(239,233,223,.12);gap:12px !important}
  .mk-aside > div,.mk-aside > div > div{gap:12px !important}
  /* option grids become one swipeable row */
  .mk-aside div[style*="grid-template-columns"]{display:flex !important;overflow-x:auto;gap:8px !important;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mk-aside div[style*="grid-template-columns"]::-webkit-scrollbar{display:none}
  .mk-aside div[style*="grid-template-columns"] > *{flex:0 0 auto;min-width:88px}
  .mk-aside .opt{min-height:68px !important;padding:8px 10px !important;gap:6px !important}
  .mk-aside .card{padding:10px 12px !important}
  .mk-aside .card span[style*="font-size: 48px"]{font-size:32px !important}
}

.bk-short{display:none}
@media (max-width:600px){
  .hdr-wm{font-size:28px !important}
  header .bk-long{display:none}
  header .bk-short{display:inline}
  header .btn{padding:0 14px}
}
@media (pointer:coarse){
  .btn,.seg{min-height:48px}
  .icon{width:48px;height:48px}
  input[type=range]{min-height:48px}
}
.opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;min-height:120px;padding:14px 8px;border:1.5px solid rgba(239,233,223,.16);border-radius:10px;font-family:'DM Mono',ui-monospace,monospace;font-size:13px;font-weight:400;color:#efe9df;background:rgba(239,233,223,.03)}
.opt:hover{border-color:rgba(239,233,223,.45)}
.opt.on{border-color:#efe9df;background:rgba(239,233,223,.1)}
.chip{filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
.chip>span{display:block;width:100%;height:100%;background-size:220% auto;clip-path:polygon(2% 5%,22% 1%,48% 6%,74% 0%,100% 3%,97% 38%,100% 70%,96% 100%,66% 95%,40% 100%,12% 96%,0% 99%,4% 62%,0% 30%)}
.step{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;color:#7d766c;font-size:14px;font-weight:500}
.step .bar{display:block;height:4px;border-radius:2px;background:rgba(239,233,223,.14);overflow:hidden}
.step .bar>span{display:block;height:100%;width:0;background:var(--accent);border-radius:2px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.step.done .bar>span{width:100%}
.step.on .bar>span{width:50%}
.step .sl{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step .sn{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;border:1.5px solid rgba(239,233,223,.2)}
.step.done{color:#cfc8bc}
.step.done .sn{background:rgba(154,134,116,.22);border-color:transparent;color:var(--accent)}
.step.on{color:var(--accent);font-weight:700}
.step.on .sn{background:var(--accent);border-color:var(--accent);color:#0d0c0b}
@media (max-width:560px){.step .lbl-t{display:none}.step.on .lbl-t{display:inline}}
.card{background:#1a1816;border:1.5px solid rgba(239,233,223,.14);border-radius:12px}
.field{font-family:'DM Mono',ui-monospace,monospace;font-size:16px;min-height:44px;padding:0 14px;border:1.5px solid rgba(239,233,223,.3);background:#1a1816;color:#efe9df;box-sizing:border-box;width:100%;border-radius:10px}
.field::placeholder{color:#8f877b}

/* ---------- the canvas gallery ---------- */
.vp{position:absolute;inset:0;overflow:clip;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.vp.drag{cursor:grabbing}
.world{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.cell{position:absolute;display:flex;align-items:center;justify-content:center;transition:opacity .45s ease}
.cellbtn{all:unset;display:block;position:relative;cursor:pointer;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cellbtn{filter:drop-shadow(0 10px 14px rgba(0,0,0,.55))}
.cellbtn img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.cell:hover .cellbtn{transform:scale(1.04)}
.world.dim .cell{opacity:.07}
.world.dim .cell.cur{opacity:0}
.fbg{position:absolute;inset:0;background:rgba(13,12,11,.6);opacity:0;transition:opacity .45s ease;cursor:zoom-out}
.fbg.on{opacity:1}
.fstage{position:absolute;left:50%;top:50%;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease;will-change:transform}
.fpan{touch-action:none;cursor:grab}
.fzoom{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fzoom{filter:drop-shadow(0 24px 40px rgba(0,0,0,.6))}
.fzoom img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.hud{transition:opacity .4s ease}
.hint{transition:opacity .6s ease}
@media (prefers-reduced-motion: reduce){.fstage,.fzoom,.cell,.cellbtn,.fbg{transition:none}}

/* ---------- site additions: crops, curate tools, status ---------- */
.cropbox{position:relative;width:100%;height:100%;overflow:hidden}
.cellbtn.is-hidden{opacity:.5}
.cropov{position:absolute;inset:0;z-index:2;touch-action:none;cursor:default}
.croprect{position:absolute;box-sizing:border-box;border:2px solid #efe9df;box-shadow:0 0 0 9999px rgba(13,12,11,.62);cursor:move;touch-action:none}
.crophd{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#efe9df;border:2px solid #0d0c0b;touch-action:none}
.crophd.nw{left:0;top:0;cursor:nwse-resize}.crophd.ne{left:100%;top:0;cursor:nesw-resize}
.crophd.sw{left:0;top:100%;cursor:nesw-resize}.crophd.se{left:100%;top:100%;cursor:nwse-resize}
.crophd.n{left:50%;top:0;cursor:ns-resize}.crophd.s{left:50%;top:100%;cursor:ns-resize}
.crophd.w{left:0;top:50%;cursor:ew-resize}.crophd.e{left:100%;top:50%;cursor:ew-resize}
/* visitor cropping their uploaded photo: the frame sits exactly over the photo */
.ph-only{display:none}
@media (max-width:900px){.ph-only{display:block}}
.upcrop{position:relative;margin:auto;flex:none;max-width:100%;line-height:0}
.upcrop img{display:block;max-width:100%;max-height:68vh;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;pointer-events:none}
@media (pointer:coarse){.crophd{width:30px;height:30px;margin:-15px 0 0 -15px}}
.adminbar{pointer-events:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;padding:6px;border-radius:999px;background:rgba(26,24,22,.94);border:1px solid rgba(240,185,163,.35);max-width:100%}
.adminbar-tag{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#f0b9a3;padding:0 10px}
.adminbar-hint{font-size:13px;color:#cfc8bc;padding:0 8px}
.abtn{font-family:'DM Mono',ui-monospace,monospace;font-size:14px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid rgba(239,233,223,.25);background:transparent;color:#efe9df;cursor:pointer}
.abtn:hover{border-color:#efe9df}.abtn:disabled{opacity:.5;cursor:default}
.abtn.on{background:#efe9df;color:#0d0c0b;border-color:#efe9df}
.abtn.danger{color:#f0b9a3;border-color:rgba(240,185,163,.45)}
.abtn.danger.on{background:#c2462e;color:#fff;border-color:#c2462e}
.adminpill{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;margin-left:14px;padding:4px 4px 4px 12px;border-radius:999px;border:1px solid rgba(240,185,163,.4);color:#f0b9a3;font-size:13px}
.adminpill button{all:unset;cursor:pointer;padding:6px 10px;border-radius:999px;color:#efe9df;background:rgba(239,233,223,.08)}
.adminpill button:focus-visible{outline:2px solid #efe9df}
.status{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:12px 18px;border-radius:999px;background:rgba(26,24,22,.94);border:1px solid rgba(239,233,223,.14);font-size:14px;z-index:60}
.toast{position:fixed;left:50%;top:84px;transform:translateX(-50%);margin:0;max-width:calc(100vw - 32px);box-sizing:border-box;padding:12px 18px;border-radius:14px;background:#efe9df;color:#0d0c0b;font-size:14px;line-height:1.45;z-index:70;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.scrim{position:fixed;inset:0;z-index:65;background:rgba(13,12,11,.72);display:flex;align-items:center;justify-content:center;padding:16px}
.signin{width:100%;max-width:400px;box-sizing:border-box;padding:28px;border-radius:20px;background:#1a1816;border:1px solid rgba(239,233,223,.14);display:flex;flex-direction:column;gap:14px}

/* keep clear of the "Powered by Netlify" badge in the bottom-right corner */
@media (max-width:760px){
  .hint{bottom:142px !important;white-space:normal !important;max-width:calc(100vw - 32px);box-sizing:border-box;text-align:center}
}

/* the gallery fills the visible screen (on phones 100vh also counts the area behind the browser's toolbar) */
.gal{height:100vh;height:100dvh !important}
/* phone header: logo on its own row; filter and Make button share the row below */
@media (max-width:600px){
  header{display:grid !important;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:12px;padding:14px 16px !important}
  header > nav{display:contents !important}
  header .hdr-logo{grid-column:1 / span 2;grid-row:1}
  header nav .fdd{grid-column:1;grid-row:2;justify-self:start}
  header nav .btn-ink{grid-column:2;grid-row:2;justify-self:end;pointer-events:auto}
  .fdd-menu{left:0;right:auto;transform-origin:top left}
}
/* zoom controls live in the bottom-left corner (the Netlify badge has the bottom-right).
   phones get a compact version: just − + and "show all", level with the badge */
.zbar{left:20px !important;right:auto !important;bottom:20px !important}
@media (max-width:600px){
  .zbar{left:12px !important;bottom:16px !important;padding:4px !important;gap:2px !important}
  .zbar .icon{width:40px !important;height:40px !important}
  .zbar .icon[style*="width: auto"],.zbar > span[aria-hidden]{display:none !important}
}
@media (max-width:359px){ .zbar .icon[aria-label*="all"],.zbar .icon[aria-label*="100%"]{display:none !important} }



/* open-mug view: browse bar top-centre, close button top-right, zoom bar under the mug */
.fpill{pointer-events:auto;display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;background:rgba(26,24,22,.9);border:1px solid rgba(239,233,223,.12)}
.flabel{padding:0 10px;font-size:15px;white-space:nowrap}
.fclose{position:absolute;top:16px;right:16px;z-index:5;background:rgba(26,24,22,.9) !important;border:1px solid rgba(239,233,223,.12)}

/* open-mug layout: name + signature above the mug, browse bar bottom-centre, zoom bottom-left */
.fcaption{position:absolute;left:0;right:0;top:20px;z-index:4;padding:0 80px;text-align:center;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.fcap-title{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:32px;letter-spacing:-.015em;line-height:1.05;color:#efe9df;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fcap-by{margin:6px 0 0;font-family:'DM Mono',ui-monospace,monospace;font-size:14px;color:#cfc8bc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbar-top{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:center;pointer-events:none;padding:0 12px}
.fbar-zoom{position:absolute;left:24px;bottom:28px;display:flex;pointer-events:none}

/* phones: keep the pinned bars above the Netlify badge; zoom (left) and browse (right) share one row */
@media (max-width:760px){
  .fbar-top{bottom:72px;justify-content:flex-end}
  .fbar-zoom{left:12px;bottom:72px}
  .fzoom-pct{display:none}
  .abar{bottom:140px !important}
  .fcaption{top:16px;padding:0 64px}
  .fcap-title{font-size:24px}
  .fcap-by{font-size:13px;margin-top:4px}
}

/* zoomed-out gallery: drop per-tile shadows and texture filters so panning and zooming stay smooth */
.world.lite .cellbtn,.world.lite .pc,.world.lite .rough,.world.lite .linerwrap{filter:none !important}
.world.lite .cellbtn{transition:none}

/* page wrapper: use the visible screen height. On iPhones plain 100vh is the height with the browser
   toolbars hidden, which made the page taller than the screen so it scrolled and the header slid under the address bar */
.root{min-height:100vh;min-height:100dvh}
/* the gallery is a fixed, one-screen canvas: the page itself must never scroll */
html:has(.gal),html:has(.gal) body{height:100%;overflow:hidden}
/* respect the notch / rounded corners (viewport-fit=cover), e.g. iPhone in landscape */
header{padding-top:max(18px,env(safe-area-inset-top)) !important;padding-left:max(24px,env(safe-area-inset-left)) !important;padding-right:max(24px,env(safe-area-inset-right)) !important}
@media (max-width:600px){
  header{padding-top:max(14px,env(safe-area-inset-top)) !important;padding-left:max(16px,env(safe-area-inset-left)) !important;padding-right:max(16px,env(safe-area-inset-right)) !important}
}
.zbar{bottom:max(20px,env(safe-area-inset-bottom)) !important}
@media (max-width:600px){ .zbar{bottom:max(16px,env(safe-area-inset-bottom)) !important} }

/* ---------- "Add your mug" menu: dropdown on desktop, bottom sheet on phones ----------
   the sheet's bottom padding leaves room for the "Powered by Netlify" badge, which always floats on top */
.addm{position:relative;pointer-events:auto}
.add-btn .chev{margin-left:-2px;transition:transform .2s ease}
.addm.open .add-btn .chev{transform:rotate(180deg)}
.add-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:340px;box-sizing:border-box;padding:8px;border-radius:20px;
  background:rgba(26,24,22,.98);border:1px solid rgba(239,233,223,.14);box-shadow:0 24px 60px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:6px;transform-origin:top right;animation:fddIn .16s ease-out}
.add-opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:14px;min-height:44px;padding:12px 14px;border-radius:14px;
  color:#efe9df;background:rgba(239,233,223,.04);text-decoration:none;transition:background .12s}
.add-opt:hover,.add-opt:focus-visible{background:rgba(239,233,223,.1);outline:none}
.add-ic{flex:none;width:40px;height:40px;border-radius:999px;background:rgba(239,233,223,.08);display:inline-flex;align-items:center;justify-content:center}
.add-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.add-t{font-family:'DM Mono',ui-monospace,monospace;font-size:15px}
.add-s{font-family:'DM Mono',ui-monospace,monospace;font-size:13px;line-height:1.4;color:#a39b8f}
.add-scrim,.add-grip,.add-title,.add-cancel{display:none}
@media (max-width:600px){
  header nav .addm{grid-column:2;grid-row:2;justify-self:end}
  header nav .add-btn .chev{display:none}
  .add-scrim{display:block;position:fixed;inset:0;z-index:39;background:rgba(13,12,11,.62);animation:addFade .18s ease-out}
  .add-menu{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;padding:10px 16px calc(84px + env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0;border-width:1px 0 0;gap:10px;animation:addUp .22s cubic-bezier(.2,.8,.2,1)}
  .add-grip{display:block;align-self:center;width:40px;height:4px;border-radius:2px;background:rgba(239,233,223,.25);margin-bottom:4px}
  .add-title{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:22px;color:#efe9df;padding:2px 4px 4px}
  .add-opt{padding:14px 16px}
  .add-cancel{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:2px;border-radius:999px;
    border:1.5px solid rgba(239,233,223,.3);font-family:'DM Mono',ui-monospace,monospace;font-size:15px;color:#efe9df}
}
@keyframes addUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes addFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.add-menu,.add-scrim{animation:none}.add-btn .chev{transition:none}}


/* ---------- maker controls, from the Figma frame "Pick your cardbord" (PWK 289:156) ----------
   applied to every step: option cards, pill toggles, buttons, fields, progress, sliders */
.btn{border:1.5px solid var(--line-strong);font-weight:500}
.btn:hover{border-color:#efe9df}
.btn-ink{border-color:#efe9df}
.seg{border:1.5px solid var(--line-strong);font-weight:500}
.seg.on{background:var(--accent-hi);border-color:var(--accent-hi);color:#0d0c0b}
/* a group of choices in one pill (tear style) */
.segs{display:flex;gap:6px;padding:6px;border-radius:999px;background:var(--segs);border:1px solid var(--line)}
.segs .seg{flex:1;border-color:transparent;border-radius:999px;background:transparent}
.segs .seg:hover{background:rgba(239,233,223,.06)}
.segs .seg.on{background:var(--accent-hi);border-color:var(--accent-hi);color:#0d0c0b}
/* option cards (sizes, paint brushes, ink pens) */
.opt{background:var(--panel);border:1.5px solid var(--line);border-radius:11px;font-weight:500}
.opt:hover{border-color:var(--line-strong)}
.opt.on{background:var(--panel-on);border-color:var(--accent)}
.field{border:1.5px solid var(--line-strong);background:var(--panel)}
.field:focus{outline:none;border-color:var(--accent-hi)}
.card{background:var(--panel);border-color:var(--line)}
/* "Back to gallery": plain text */
.btn-text{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:0 4px;display:inline-flex;align-items:center;
  font-family:'DM Mono',ui-monospace,monospace;font-size:15px;font-weight:500;color:#efe9df;white-space:nowrap;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .15s}
.btn-text:hover{text-decoration-color:currentColor}
.btn-text:focus-visible{outline:2px solid #efe9df;outline-offset:3px;border-radius:4px}
/* rotation readout: tap to reset */
.rot-val{all:unset;box-sizing:border-box;cursor:pointer;flex:none;min-width:44px;height:44px;padding:0 4px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-family:'DM Mono',ui-monospace,monospace;font-size:15px;font-variant-numeric:tabular-nums;color:#efe9df}
.rot-val:hover{background:rgba(239,233,223,.08)}
.rot-val:focus-visible{outline:2px solid #efe9df;outline-offset:2px}
/* progress: idle steps outlined in grey, current + done in the light accent */
.step{color:var(--idle)}
.step .bar{background:var(--track);height:4px;border-radius:3px}
.step .bar>span{background:var(--accent-hi)}
.step .sn{border:1.5px solid var(--line);color:var(--idle);font-weight:400}
.step .lbl-t{font-weight:500}
.step.on{color:var(--accent-hi);font-weight:500}
.step.on .sn{background:var(--accent-hi);border-color:var(--accent-hi);color:#0d0c0b}
.step.done{color:var(--accent-hi)}
.step.done .sn{background:rgba(178,166,155,.18);border-color:transparent;color:var(--accent-hi)}

/* ---------- phones, Ink step: the cardboard gets the room ----------
   the step heading goes (the step bar already says "Ink"), zoom becomes a small floating
   pill on the cardboard (two fingers move and zoom, so phones don't need the Pan button),
   and the tools below are compacted so they fit without scrolling on most phones.
   If a short screen still can't fit them, the tool panel scrolls on its own, while the
   cardboard keeps a minimum size and the page itself never scrolls. */
@media (max-width:900px){
  .st-ink .mk-head{display:none !important}
  .st-ink .mk-left{position:relative}
  .st-ink .mk-left{min-height:220px}
  .st-ink .tray{min-height:0}
  .st-ink .pz-bar{position:absolute;top:8px;right:8px;z-index:3;flex-direction:column;flex-wrap:nowrap !important;align-items:center;gap:0 !important;padding:4px;border-radius:999px;background:rgba(26,24,22,.9);border:1px solid rgba(239,233,223,.12);box-shadow:0 6px 18px rgba(0,0,0,.35)}
  .st-ink .pz-bar .btn{width:44px;min-height:44px !important;height:44px;padding:0 !important;border:0;background:transparent;font-size:13px}
  .st-ink .pz-bar .btn:disabled{opacity:.3}
  .st-ink .pz-bar .pz-lbl{order:1;min-width:0 !important;font-size:11px !important;font-weight:500 !important;color:#cfc8bc;padding:1px 0}
  .st-ink .pz-bar > .btn:nth-of-type(2){order:0}          /* zoom in on top */
  .st-ink .pz-bar > .btn:nth-of-type(1){order:2}          /* zoom out below the % */
  .st-ink .pz-bar > .btn:nth-of-type(3){order:3;border-top:1px solid rgba(239,233,223,.14);border-radius:0 0 999px 999px}
  .st-ink .pz-pan{display:none !important}
  .st-ink .mk-aside{flex:0 1 auto !important;min-height:0;max-height:none;overflow-y:auto;gap:10px !important;padding-top:10px}
  .st-ink .mk-aside > div{gap:10px !important}
  .st-ink .ink-brushes > span{display:none}               /* the "Brush" label */
  .st-ink .ink-brushes div[style*="grid-template-columns"] > *{min-width:0}
  .st-ink .ink-opt{flex-direction:row !important;justify-content:center !important;min-height:44px !important;height:44px;padding:0 14px !important;gap:8px !important;border-radius:999px;font-size:13px;white-space:nowrap}
  .st-ink .ink-opt svg{width:30px;height:12px;flex:none}
  .st-ink .ink-size{flex-direction:row !important;align-items:center;gap:12px !important}
  .st-ink .ink-size > div{display:contents !important}
  .st-ink .ink-size label{order:0;flex:none}
  .st-ink .ink-size input{order:1;flex:1;min-width:0;min-height:40px !important;margin:0}
  .st-ink .ink-size > div > span{order:2;flex:none;min-width:44px;text-align:right}
  .st-ink .ink-acts{flex-wrap:nowrap !important;gap:8px !important}
  .st-ink .ink-acts .btn{min-height:44px;padding:0 14px;font-size:14px;white-space:nowrap}
  .st-ink .ink-acts .btn-ink{margin-left:auto}
  .st-ink .mk-over{border:0 !important;min-height:44px;padding:0 2px;font-size:13px;color:#a39b8f;text-decoration:underline;text-underline-offset:3px}
}