/* MheePrint storefront, redesigned -- Claude Design "Clicker Redesign TH" (keychain 2b, pencil 3b),
   shared by /, /pencil/ and /griptok/ (live; /preview/ keeps its own copy). Phone first; from 900px the 3D fills
   the left side at window height and every control sits in a 420px column on the right.

   The tokens below are the ones cart.js, my-orders.js, design-mode.js, otp-boxes.js and i18n.js
   reach for with var(--…), so their drawers and dialogs match. Ids those scripts look up are kept:
   #mast #tabs #count #deck #txt #acts #copyBtn #etaLine #liveStat (and #saveBtn, #toast). */
*{box-sizing:border-box}
:root{
  --bg:#f3f5f8; --card:#ffffff; --card2:#f8fafc;
  --ink:#0f172a; --ink2:#334155; --ink3:#56627a; --ink4:#636d80;
  --line:#dde2ea; --line2:#e8ecf1;
  --blue:#22c55e; --blue-d:#16a34a; --on-accent:#052e16;
  --green-ink:#15803d; /* green AS TEXT: #22c55e on white is 2.3:1 */
  --amber:#b45309; --red:#dc2626;
  --spring:cubic-bezier(.16,1,.3,1); --ease:cubic-bezier(.22,.61,.36,1);
  --headh:56px; --tabh:52px;
  color-scheme:light;
}
html,body{margin:0;padding:0;background:var(--bg)}
body{font-family:'IBM Plex Sans Thai',system-ui,-apple-system,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
a{color:var(--green-ink)}
a:hover{color:var(--ink)}
::selection{background:#22c55e40}
img{max-width:100%}
[hidden]{display:none!important}
.mono{font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ?motion=0: nothing moves, so a stutter can be pinned on motion or ruled out */
.nomotion *,.nomotion *::before,.nomotion *::after{transition:none!important;animation:none!important}

/* ---------- header: one row; on a phone the product tabs are their own row under it ---------- */
#mast{position:sticky;top:0;z-index:31;height:var(--headh);background:#fff;padding:0 12px;
  display:flex;align-items:center;gap:6px}
#mast .logo{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 1px #0f172a14;flex:none}
#mast .brand{display:none;margin:0 0 0 4px;font-size:17px;font-weight:600;letter-spacing:.02em}
#mast .grow{flex:1}
/* my-orders.js and cart.js insert their buttons around #count; the design reads my orders · TH/EN · cart */
#mast>.grow{order:1}
#mast>#myOrdersBtn{order:2}
#mast>#langSlot{order:3}
#mast>#count{order:4}
#mast>#cartBtn{order:5}
#langSlot{display:flex}
#count{display:none!important}
#myOrdersBtn{height:44px;padding:0 10px;border:0;border-radius:12px;background:transparent;
  font:600 12px 'IBM Plex Sans Thai',sans-serif;color:var(--ink2);white-space:nowrap}
#myOrdersBtn:hover{background:#0f172a0a;color:var(--ink)}
#mast #langSwitch{display:flex;gap:2px;margin:0;padding:2px;border-radius:999px;background:#0f172a0d}
#mast #langSwitch button{min-width:38px;height:32px;padding:0;border-radius:999px;font:700 11px 'IBM Plex Sans Thai',sans-serif;
  color:var(--ink3);background:transparent;box-shadow:none}
#mast #langSwitch button[aria-current="true"]{background:var(--blue);color:var(--on-accent)}
#mast #cartBtn{position:relative;width:44px;height:44px;flex:none;padding:0;border:0;border-radius:12px;
  background:transparent;color:var(--ink);display:grid;place-items:center}
#mast #cartBtn:hover{background:#0f172a0a}
#mast #cartBtn svg{width:21px;height:21px}
#mast #cartBtn b{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--blue);color:var(--on-accent);font:700 11px/18px 'IBM Plex Sans Thai',sans-serif;text-align:center;
  box-shadow:0 0 0 2px #fff}
#mast #cartBtn[data-empty="1"] b{display:none}
/* Stand-ins for the three controls those scripts add at runtime, in the page's own markup so the header is
   whole in its first frame: switching product pages showed it bare for ~100 ms, then the controls popped in
   (traced 2026-10-17). Each copies its control's box as it ends up (my-orders.js's own rule outranks the
   #myOrdersBtn one above) and goes the moment the real one is in place; cart.js's plain "ตะกร้า" button
   stays out of sight until the page has turned it into the bag. The page's inline script gives them the
   language and the cart's count. */
.hph{pointer-events:none;user-select:none}
#mast>#phOrders{order:2}
#mast>#phCart{order:5}
#phOrders{height:44px;padding:4px 8px;display:flex;align-items:center;font:500 12.5px 'IBM Plex Sans Thai',sans-serif;
  color:var(--ink2);white-space:nowrap}
#phLang{display:flex;gap:2px;padding:2px;border-radius:999px;background:#0f172a0d}
#phLang b{min-width:38px;height:32px;display:grid;place-items:center;border-radius:999px;
  font:700 11px 'IBM Plex Sans Thai',sans-serif;color:var(--ink3)}
#phLang:not(.en) b:first-child,#phLang.en b:last-child{background:var(--blue);color:var(--on-accent)}
#phCart{position:relative;width:44px;height:44px;flex:none;margin-left:8px;display:grid;place-items:center;color:var(--ink)}
#phCart svg{width:21px;height:21px}
#phCart b{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--blue);color:var(--on-accent);font:700 11px/18px 'IBM Plex Sans Thai',sans-serif;text-align:center;
  box-shadow:0 0 0 2px #fff}
#phCart b:empty{display:none}
#mast:has(#myOrdersBtn) #phOrders,#langSlot:has(#langSwitch) #phLang,#mast:has(#cartBtn[data-docked]) #phCart,
#mast #cartBtn:not([data-docked]){display:none}

#tabrow{position:sticky;top:var(--headh);z-index:30;height:var(--tabh);padding:4px 12px 8px;background:#fff;
  border-bottom:1px solid #0f172a14;transition:transform .3s var(--spring)}
.tabs-hidden #tabrow{transform:translateY(-100%)}
#tabs{display:flex;gap:3px;padding:3px;border-radius:999px;background:#0f172a0d}
#tabs a{flex:1;min-height:38px;padding:0 12px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;color:var(--ink3);text-decoration:none;white-space:nowrap}
#tabs a:hover{color:var(--ink)}
#tabs a[aria-current="page"]{background:var(--blue);color:var(--on-accent)}
/* the green behind the current tab is its own element (core.js ckTabPill), so a tap can slide it to the
   tab being opened while that page loads; until the page's inline script has placed it the tab paints its own */
#tabs{position:relative}
#tabs a{position:relative;z-index:1;transition:color .18s;-webkit-tap-highlight-color:transparent}  /* the pill is the feedback */
#tabs .tabpill{position:absolute;z-index:0;border-radius:999px;background:var(--blue);pointer-events:none}
#tabs.haspill a[aria-current="page"]{background:none}
/* three tabs (keychain, pencil, Griptok) need ~375px at the sizes above, more than a narrow phone has:
   less padding there, smaller type below 400px, and past that the row scrolls sideways instead of
   pushing the whole page wider (the Griptok page, whose tab is the last, starts it on its own tab) */
@media (max-width:899px){
  #tabs{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  #tabs::-webkit-scrollbar{display:none}
  #tabs a{flex:1 0 auto;padding:0 9px}
}
@media (max-width:400px){#tabs a{padding:0 8px;font-size:12px}}

/* Switching product pages has NO cross-document View Transition (@view-transition). Tried 2026-10-17 and
   measured (Chrome, real GPU, phone size, 4x CPU): it held the new page's first frame until the 3D module had
   run -- shown ~325 ms after the swap instead of ~70-100 ms -- then the GPU spent ~80 ms capturing, so the page
   froze ~0.5 s and the fade began half over (ยู: "กระตุกมากๆ"). The pill slides on the tap instead (core.js
   ckTabPill), while the next page loads, and that page draws it in place. */

/* ---------- the page: stage, then the controls column ---------- */
#page{display:block}
#stagecol{position:sticky;top:calc(var(--headh) + var(--tabh));z-index:12;padding:10px 12px 0;background:var(--bg);
  transition:top .3s var(--spring)}
.tabs-hidden #stagecol{top:var(--headh)}
.stagecard{border-radius:20px;background:#fff;box-shadow:0 0 0 1px #0f172a1a,0 14px 30px -18px #0f172a59;overflow:hidden}
#window{position:relative;height:200px;background:#eef1f6;overflow:hidden;transition:height .3s var(--spring)}
#window clicker-stage,#window pencil-stage{position:absolute;inset:0;display:block}
#window .mark{position:absolute;z-index:1;left:50%;top:46%;width:110px;transform:translate(-50%,-50%);opacity:.07;pointer-events:none}
#window .note{position:absolute;z-index:2;top:10px;left:12px;right:12px;font-size:11px;color:var(--ink4);pointer-events:none}
#stageEmpty{position:absolute;z-index:2;inset:0;display:grid;place-items:center;font-size:13px;color:var(--ink3);pointer-events:none}
#hint{position:absolute;z-index:3;left:50%;bottom:2px;transform:translateX(-50%);max-width:calc(100% - 16px);
  padding:6px 12px;border-radius:999px;background:#ffffffd9;box-shadow:0 0 0 1px #0f172a1f;font-size:11px;
  color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
#hint[data-failed]{pointer-events:auto;cursor:pointer;color:var(--red);box-shadow:0 0 0 1px #dc262666}
.etastrip{min-height:27px;padding:6px 12px;border-top:1px solid #0f172a0f;font-size:11px;line-height:1.4;color:var(--green-ink);font-weight:500}
#etaLine{display:inline}
#etaLine b{font-weight:700}
/* first load: CSS keycaps at once; the Lottie is fetched only if the stage is still not ready 300ms in */
#loader{position:absolute;z-index:4;inset:0;display:grid;place-items:center;align-content:center;gap:8px;background:#eef1f6;
  transition:opacity .35s ease}
#loader.done{opacity:0;pointer-events:none}
#loaderAnim{width:120px;height:72px;display:flex;align-items:center;justify-content:center;gap:6px}
#loaderAnim i{width:26px;height:30px;border-radius:7px;background:#dfe4ec;box-shadow:inset 0 -4px 0 #0000000f;animation:ldk 1.1s var(--ease) infinite}
#loaderAnim i:nth-child(2){animation-delay:.12s}#loaderAnim i:nth-child(3){animation-delay:.24s}
@keyframes ldk{0%,100%{transform:none}40%{transform:translateY(5px) scaleY(.92)}}
#loader span{font-size:12px;color:var(--ink3)}

#deck{padding:12px;display:flex;flex-direction:column;gap:12px;min-width:0}
#liveStat{margin:0;padding:0 4px;min-height:19px;font-size:12px;line-height:1.6;color:var(--ink2);
  display:flex;flex-wrap:wrap;align-items:center;gap:0 6px}
#liveStat .dot{width:6px;height:6px;border-radius:50%;background:#1d7a3e;flex:none}
#liveStat b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
#liveStat .sep{color:var(--line)}
.hero{padding:0 4px 2px}
.hero h2{margin:0 0 6px;font-size:26px;font-weight:700;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.hero p{margin:0;font-size:14px;line-height:1.6;color:var(--ink3);text-wrap:pretty}

/* 01 02 03 as three keycaps joined by dashes; a finished step's cap is pressed down */
#steps{display:flex;align-items:flex-start;padding:2px 2px 4px}
#steps .dash{flex:1;height:0;margin-top:26px;border-top:2px dashed #cbd2dc;transition:border-color .3s}
#steps .dash.on{border-color:var(--blue)}
#steps .st{flex:none;width:92px;display:flex;flex-direction:column;align-items:center;gap:6px}
#steps .kc{position:relative;width:52px;height:52px;border-radius:14px;background:var(--line2);
  box-shadow:inset 0 -5px 0 #0000001f,inset 0 0 0 1px #0f172a1a;display:flex;justify-content:center;padding-top:5px;transition:background .3s}
#steps .cap{width:40px;height:40px;border-radius:10px;background:#faf9f6;box-shadow:inset 0 -3px 0 #0f172a14,0 0 0 1px #0f172a14;
  display:grid;place-items:center;font-size:20px;font-weight:700;color:var(--ink);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),height .35s}
#steps .st.done .cap{transform:translateY(3px);height:37px}
#steps .lb{display:flex;flex-direction:column;align-items:center}
#steps .lb b{font:600 10px 'IBM Plex Mono',monospace;color:var(--green-ink)}
#steps .lb span{font-size:12px;font-weight:600;line-height:1.3;color:var(--ink3);text-align:center}
#steps .st.done .lb span{color:var(--ink)}

.card{border-radius:16px;background:#fff;box-shadow:0 0 0 1px #0f172a1a;padding:14px;display:flex;flex-direction:column;gap:12px}
.rowtop{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rowtop label,.rowtop .lbl{font-size:13px;font-weight:600}
.rowtop .sub{font-size:11px;color:var(--ink4)}
#nameWrap{gap:11px}
.namerow{display:flex;gap:8px;align-items:center}
#txt{flex:1;min-width:0;min-height:52px;padding:0 14px;border-radius:12px;border:1px solid #0f172a1f;background:#0f172a0d;
  font-size:22px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;outline:0;caret-color:var(--green-ink)}
#txt:focus{border-color:#22c55e99;box-shadow:0 0 0 4px #22c55e26}
#txt::placeholder{color:#94a3b8;letter-spacing:.04em;font-weight:600}
#emoji{width:52px;height:52px;flex:none;border-radius:12px;border:1px solid #0f172a1a;background:#fff;font-size:22px;line-height:1;padding:0}
#emoji:hover{background:#f8fafc}
#emoji:disabled,.addkey:disabled{opacity:.4}

/* colour card */
.segs{display:flex;gap:4px;padding:3px;border-radius:12px;background:#0f172a0d}
.segs button{flex:1;min-height:44px;border:0;border-radius:10px;background:transparent;color:var(--ink3);font-size:13px;font-weight:600}
.segs button[aria-pressed="true"]{background:var(--blue);color:var(--on-accent)}
#presets{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:max-content;gap:8px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:14px;margin:0 -14px;padding:2px 14px 10px;
  scrollbar-width:thin;scrollbar-color:#0f172a26 transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
#presets::-webkit-scrollbar{height:4px}
#presets::-webkit-scrollbar-thumb{background:#0f172a26;border-radius:2px}
.pre{padding:9px 11px;border:0;border-radius:12px;background:#0f172a0a;box-shadow:0 0 0 1px #0f172a1a;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;scroll-snap-align:start}
.pre .dots{display:flex;gap:4px}
.pre .dots i{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1px #0f172a33}
.pre .dots i.cord{border-radius:4px}
.pre span{font-size:12px;font-weight:600;white-space:nowrap;color:var(--ink3)}
.pre[aria-pressed="true"]{background:#22c55e14;box-shadow:0 0 0 2px var(--blue)}
.pre[aria-pressed="true"] span{color:var(--ink)}

#each{display:flex;flex-direction:column;gap:12px}
#tiles{display:flex;flex-wrap:wrap;gap:8px}
.tile{width:52px;height:60px;padding:6px 0 0;border:0;border-radius:13px;
  box-shadow:inset 0 -5px 0 #0000001f,inset 0 0 0 1px #0f172a1a;display:flex;justify-content:center}
.tile .face{width:40px;height:40px;border-radius:10px;background:#faf9f6;box-shadow:inset 0 -3px 0 #0f172a14;
  display:grid;place-items:center;font-size:20px;font-weight:700;line-height:1}
.tile[aria-pressed="true"]{box-shadow:inset 0 -5px 0 #0000001f,inset 0 0 0 1px #0f172a1a,0 0 0 3px #fff,0 0 0 5px var(--ink)}
/* pencil: the plate takes the A colour and the raised glyph is white, as printed */
.pencil .tile .face{width:36px;height:36px;border-radius:8px;box-shadow:inset 0 -2px 0 #00000026;font-size:19px;color:#faf9f6}
/* drag to reorder: the cap with its letter is lifted off; its coloured base stays in the slot */
.tile{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.tile.hole .face{visibility:hidden}
#tiles.dragging .tile{cursor:grabbing}
#tiles.dragging .tile[aria-pressed="true"]{box-shadow:inset 0 -5px 0 #0000001f,inset 0 0 0 1px #0f172a1a}
.face.ghost{position:fixed;z-index:70;margin:0;pointer-events:none;border-radius:10px;background:#faf9f6;display:grid;place-items:center;
  font-size:20px;font-weight:700;line-height:1;scale:1.14;rotate:-4deg;
  box-shadow:0 16px 28px -10px #0f172a73,0 0 0 1px #0f172a1f,inset 0 -3px 0 #0f172a14;animation:lift .16s var(--ease)}
.pencil .face.ghost{border-radius:8px;font-size:19px;color:#faf9f6}
@keyframes lift{from{scale:1;rotate:0deg}}
.addkey{width:44px;height:60px;border-radius:13px;border:1.5px dashed #94a3b8;background:transparent;color:var(--ink3);font-size:18px;padding:0}
#selPanel{border-radius:14px;background:var(--card2);box-shadow:0 0 0 1px var(--line2);padding:12px;display:flex;flex-direction:column;gap:10px}
#selPanel .top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#selPanel .top b{font-size:13px}
.pill{display:flex;gap:2px;padding:3px;border-radius:999px;background:#0f172a0d}
.pill button{min-height:34px;padding:0 11px;border:0;border-radius:999px;background:transparent;color:var(--ink3);font-size:12px;font-weight:600;white-space:nowrap}
.pill button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px #0f172a1a}
#swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.sw{position:relative;height:44px;padding:0;border:0;border-radius:10px;background:transparent;display:grid;place-items:center}
.sw i{width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1px #0f172a26}
.sw[aria-pressed="true"] i{box-shadow:inset 0 0 0 1px #0f172a26,0 0 0 2px #fff,0 0 0 4px var(--blue)}
.sw:disabled{opacity:.35}
.sw:disabled::after,.csw:disabled::after{content:'';position:absolute;left:50%;top:50%;width:34px;height:2px;background:var(--ink3);
  transform:translate(-50%,-50%) rotate(-45deg);border-radius:1px}
#eachEmpty{padding:6px 0;font-size:13px;color:var(--ink3)}
#cordRow{min-height:48px;padding:0 12px;border-radius:12px;border:1px solid var(--line2);background:#fff;display:flex;align-items:center;gap:8px;text-align:left}
#cordRow:hover{background:#f8fafc}
#cordRow .t{font-size:13px;font-weight:600}
#cordRow .n{font-size:12px;color:var(--ink3)}
#cordRow .c{margin-left:auto;display:flex;align-items:center;gap:6px;font:600 13px 'IBM Plex Mono',monospace}
#cordRow .c i{width:22px;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px #0f172a26}

/* toggles */
#togs{padding:2px 14px;gap:0}
.tg{width:100%;min-height:58px;padding:10px 0;border:0;border-bottom:1px solid #0f172a0d;background:transparent;
  display:flex;align-items:center;gap:12px;text-align:left}
.tg:last-child{border-bottom:0}
.tg:disabled{opacity:.45}
.tg .tx{flex:1;display:flex;flex-direction:column}
.tg .tx b{font-size:14px;font-weight:600}
.tg .tx span{font-size:11px;color:var(--ink4)}
.tg .knob{width:46px;height:28px;flex:none;border-radius:999px;background:#0f172a1f;padding:3px;transition:background .18s}
.tg .knob i{display:block;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px #0f172a33;transition:transform .18s var(--ease)}
.tg[aria-checked="true"]:not(:disabled) .knob{background:var(--blue)}
.tg[aria-checked="true"]:not(:disabled) .knob i{transform:translateX(18px)}
#loneNote{margin:0;padding:10px 12px;border-radius:12px;background:#f59e0b1a;box-shadow:inset 0 0 0 1px #f59e0b40;
  color:var(--amber);font-size:12px;line-height:1.6}

/* selling copy: the four reasons as tiles, then price + shipping + company in one block */
.trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.trust div{flex:1 1 150px;padding:11px 13px;border-radius:13px;border:1px solid #0f172a14;background:#fff}
.trust b{display:block;font-size:13px;font-weight:600}
.trust span{font-size:11px;color:var(--ink4);line-height:1.5}
.sell{padding:18px 16px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #0f172a14;display:flex;flex-direction:column;gap:18px}
.sell h3{margin:0;font-size:16px;font-weight:700}
.sell .fine{margin:8px 0 0;font-size:12px;line-height:1.6;color:var(--ink4)}
#lad{width:100%;margin-top:8px;border-collapse:separate;border-spacing:0;border-radius:12px;box-shadow:0 0 0 1px var(--line2);
  overflow:hidden;font-size:13px;font-variant-numeric:tabular-nums}
#lad th,#lad td{padding:8px 10px;text-align:right}
#lad th:first-child,#lad td:first-child{text-align:left}
#lad thead th{background:var(--card2);font-size:11px;font-weight:600;color:var(--ink4)}
#lad td{border-top:1px solid var(--line2)}
#lad td:first-child{color:var(--ink3)}
#lad td.na{color:var(--ink4)}
#lad tr.on td{background:#dcfce7;font-weight:600}
.rate{display:flex;flex-direction:column;font-size:13px;color:var(--ink2)}
.rate h3{margin:0 0 4px;color:var(--ink)}
.rate div{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--line2)}
.rate h3+div{border-top:0}
.rate .free{color:var(--green-ink)}
#who{border-top:1px solid var(--line2);padding-top:14px;font-size:12px;line-height:1.7;color:var(--ink4)}
#who b{display:block;font-size:14px;color:var(--ink)}
#who .legal{color:var(--ink)}
#who .links{display:flex;flex-wrap:wrap;gap:0 12px}
#who .links a{display:inline-block;padding:6px 0}

/* the three actions: always one row, Add to cart gives way first; they step aside while typing */
#acts{position:sticky;bottom:0;z-index:25;margin:2px -12px -12px;padding:10px 12px calc(14px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid #0f172a1a;display:flex;flex-wrap:nowrap;gap:6px;transition:transform .25s var(--spring)}
#acts button{min-height:52px;border-radius:13px;font-weight:700;white-space:nowrap}
#acts #addBtn{order:0;flex:1;min-width:0;padding:0 10px;border:0;background:var(--blue);color:var(--on-accent);font-size:15px;
  display:flex;align-items:center;justify-content:center;gap:6px;overflow:hidden;text-overflow:ellipsis}
#acts #addBtn:hover{background:var(--blue-d)}
#acts #addBtn:active{transform:scale(.985)}
#acts #copyBtn,#acts #saveBtn{order:1;flex:none;padding:0 11px;border:1px solid #0f172a1f;background:#fff;color:var(--ink2);font-size:13px}
#acts #saveBtn{order:2}
#acts #copyBtn:hover,#acts #saveBtn:hover{background:#0f172a0d}
#acts #saveBtn[aria-busy="true"]{opacity:.6}

/* bottom sheets: cord colours and emoji */
.sheet{position:fixed;inset:0;z-index:50}
.sheet .back{position:absolute;inset:0;background:#0f172a52;animation:shfade .2s ease}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;max-height:80vh;overflow-y:auto;margin:0 auto;
  padding:10px 14px calc(18px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:#fff;animation:shup .3s var(--spring)}
@keyframes shfade{from{opacity:0}}
@keyframes shup{from{transform:translateY(40px);opacity:0}}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:#dde2ea;margin:0 auto 10px}
.sheet .hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 2px 10px;border-bottom:1px solid var(--line2)}
.sheet .hd b{font-size:15px}
.sheet .hd span{font-size:12px;color:var(--ink3)}
.sheet .note{margin:8px 2px 0;font-size:12px;color:var(--ink3)}
#cordGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px 2px;padding-top:10px}
.csw{position:relative;min-height:48px;padding:5px 0;border:0;border-radius:12px;background:transparent;display:grid;place-items:center}
.csw:hover{background:#0f172a08}
.csw i{width:34px;height:34px;border-radius:9px;box-shadow:inset 0 0 0 1px #0f172a26}
.csw[aria-pressed="true"] i{box-shadow:inset 0 0 0 1px #0f172a26,0 0 0 2px #fff,0 0 0 4px var(--blue)}
.csw:disabled{opacity:.35}
#emojiGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-top:10px}
#emojiGrid button{height:64px;border:0;border-radius:14px;background:var(--card2);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px}
#emojiGrid button:hover{background:#eef1f6}
#emojiGrid .e{font-size:26px;line-height:1}
#emojiGrid .n{font-size:11px;color:var(--ink3)}

#toast{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));z-index:80;transform:translateX(-50%);
  width:max-content;max-width:min(340px,calc(100vw - 32px));padding:11px 18px;border-radius:999px;background:#0f172af2;
  color:#f8fafc;font-size:14px;font-weight:500;text-align:center;pointer-events:none}
/* the saved image, where a download is impossible (in-app browsers): press and hold */
#shot{position:fixed;inset:0;z-index:90;background:#0f172ae6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px}
#shot img{max-height:72vh;border-radius:12px;box-shadow:0 20px 50px #0008}
#shot p{margin:0;color:#fff;font-size:14px}
#shot button{min-height:44px;padding:0 22px;border:0;border-radius:999px;background:#fff;color:var(--ink);font-weight:600}

/* while typing on a phone: the stage gets smaller and the actions step aside for the keyboard */
@media (max-width:899px){
  .typing #window{height:150px}
  .typing #acts{transform:translateY(110%)}
}

/* ---------- desktop: 3D on the left at window height, everything else in a 420px column ---------- */
@media (min-width:900px){
  :root{--headh:64px}
  #mast{padding:0 28px;border-bottom:1px solid #0f172a14}
  #mast .brand{display:block}
  #mast #tabs{margin-left:20px}
  #mast #tabs a{flex:none;min-height:36px;padding:0 16px}
  #tabrow{display:none}
  #page{display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:28px;max-width:1280px;margin:0 auto;padding:0 28px;align-items:start}
  #stagecol,.tabs-hidden #stagecol{top:var(--headh);padding:10px 0 0}
  #window{height:calc(100vh - var(--headh) - 24px - 37px)}
  @supports (height:100dvh){#window{height:calc(100dvh - var(--headh) - 24px - 37px)}}
  #hint{bottom:8px}
  #deck{padding:12px 0 0}
  #acts{margin:2px 0 0;padding:10px 0 14px}
  .sheet .panel{max-width:520px}
}