/* CozyBead — brand system.
   Palette, type and the 60/30/10 rule come from the brand book:
   60% cream/snow, 30% blush + sage, 10% lavender/butter/caramel. */

:root {
  --cream:#FDF6EC; --blush:#F4B8C1; --sage:#A8C5A0; --lavender:#C9B8DB;
  --butter:#F5E3A3; --caramel:#C49A6C; --cocoa:#3D2B1F; --warm-gray:#7A6B60;
  /* --muted was referenced in several places but never defined, so those
     rules silently inherited whatever was above them. */
  --muted:#7A6B60;
  --linen:#F0EAE4; --snow:#FEFCFA; --sage-deep:#7BB88E; --coral:#E8836B;
  --sky:#8DBDD8; --rose:#E8A0AB; --ink:#2A2320;

  --bg:var(--cream); --surface:var(--snow); --surface-2:var(--linen);
  --text:var(--cocoa); --text-2:var(--warm-gray); --line:#E7DED4;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow:0 1px 2px rgba(61,43,31,.04), 0 8px 24px rgba(61,43,31,.06);
  --shadow-lg:0 2px 4px rgba(61,43,31,.05), 0 18px 48px rgba(61,43,31,.10);
  --display:'Quicksand',ui-rounded,'Nunito',system-ui,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Caveat',cursive;
  --wrap:1140px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#2A2320; --surface:#332A26; --surface-2:#3B302B;
    --text:#F0EAE4; --text-2:#BFAFA3; --line:#4A3D36; --muted:#BFAFA3;
    --shadow:0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.28);
    --shadow-lg:0 2px 4px rgba(0,0,0,.24), 0 18px 48px rgba(0,0,0,.36);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.2; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem,2vw,1.25rem); color:var(--text-2); max-width:56ch}
.hand{font-family:var(--hand); font-size:1.35em; color:var(--caramel)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.narrow{max-width:760px}
section{padding:clamp(56px,8vw,104px) 0}
.center{text-align:center}
.muted{color:var(--text-2)}
.small{font-size:.88rem}
.tiny{font-size:.78rem; color:var(--text-2)}

/* pixel-grid brand texture */
.pixgrid{
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:22px 22px; opacity:.5;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--display); font-weight:700; font-size:1rem;
  padding:.85em 1.6em; border-radius:var(--r); border:1px solid transparent;
  background:var(--blush); color:#5A3A40; cursor:pointer;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:var(--shadow); text-align:center;
}
.btn:hover{background:var(--rose); transform:translateY(-1px); box-shadow:var(--shadow-lg)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--text); box-shadow:none}
.btn.ghost:hover{background:var(--surface-2); border-color:var(--caramel)}
.btn.sage{background:var(--sage); color:#2F4633}
.btn.sage:hover{background:var(--sage-deep)}
.btn.lg{font-size:1.08rem; padding:1em 2em}
.btn.sm{font-size:.88rem; padding:.55em 1em; border-radius:var(--r-sm)}
.btn.block{display:flex; width:100%}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line);
}
.site-head .inner{display:flex; align-items:center; gap:20px; height:72px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display);
  font-weight:700; font-size:1.28rem; letter-spacing:-.02em}
.brand .bead{width:26px; height:26px; border-radius:8px; background:var(--blush);
  display:grid; place-items:center; flex:none}
.brand .bead i{width:9px; height:9px; border-radius:50%; background:var(--snow); display:block}
/* the gpt-image-2 wordmark, keyed off its cream field */
.brand .logo{height:30px; width:auto; display:block}
.site-foot .brand .logo{height:26px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .logo{filter:brightness(0) invert(.92)}
}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{padding:.5em .9em; border-radius:var(--r-sm); font-size:.95rem; color:var(--text-2);
  transition:background .15s, color .15s}
.nav a:hover{background:var(--surface-2); color:var(--text)}
.nav a.cta{background:var(--blush); color:#5A3A40; font-family:var(--display); font-weight:700}
.nav a.cta:hover{background:var(--rose)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.5em .7em; cursor:pointer; color:var(--text)}
@media (max-width:820px){
  .nav{display:none; position:absolute; top:72px; left:0; right:0; flex-direction:column;
    align-items:stretch; background:var(--surface); border-bottom:1px solid var(--line);
    padding:12px; gap:4px; box-shadow:var(--shadow)}
  .nav.open{display:flex}
  .burger{display:block}
}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,6vw,80px) 0 clamp(48px,7vw,96px)}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,64px); align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero img{border-radius:var(--r-xl); box-shadow:var(--shadow-lg)}
.eyebrow{display:inline-flex; align-items:center; gap:.5em; font-family:var(--display);
  font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--caramel); background:var(--surface-2); padding:.45em 1em; border-radius:999px;
  margin-bottom:1.1em}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:1.6em}
.reassure{margin-top:1.2em; color:var(--text-2); font-size:.92rem}

/* ---------- cards / grids ---------- */
.grid{display:grid; gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px; box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.card h3{margin-bottom:.3em}
.card p:last-child{margin-bottom:0}

.step{display:flex; gap:16px; align-items:flex-start}
.step .n{flex:none; width:38px; height:38px; border-radius:12px; background:var(--surface-2);
  display:grid; place-items:center; font-family:var(--display); font-weight:700; color:var(--caramel)}

/* ---------- style picker ---------- */
.style-card{position:relative; background:var(--surface); border:2px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; cursor:pointer; text-align:left;
  padding:0; font:inherit; color:inherit; transition:border-color .18s, transform .18s, box-shadow .18s;
  display:block; width:100%}
.style-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); border-color:var(--blush)}
.style-card[aria-pressed="true"]{border-color:var(--caramel); box-shadow:var(--shadow-lg)}
.style-card .thumb{aspect-ratio:1; margin:14px 14px 0; border-radius:var(--r);
  background:var(--surface-2); position:relative; overflow:hidden; display:block}
/* Absolute inset + contain. A percentage max-height on a flow child does not
   resolve against an aspect-ratio box, so the bead render used to overflow.
   contain, never cover: these renders are not square and cropping decapitates
   the sprite. */
.style-card .thumb img{position:absolute; inset:10px; width:calc(100% - 20px);
  height:calc(100% - 20px); object-fit:contain; display:block}
.style-card .meta{padding:16px 18px 20px; display:block}
.style-card .meta h3{font-size:1.02rem; margin-bottom:.25em}
.style-card .meta p{font-size:.86rem; line-height:1.5; color:var(--text-2); margin:0}
.style-card .tick{position:absolute; top:20px; right:20px; width:30px; height:30px;
  border-radius:50%; background:var(--caramel); color:var(--snow); display:none;
  place-items:center; font-weight:700}
.style-card[aria-pressed="true"] .tick{display:grid}
.skel{position:absolute; inset:0; background:linear-gradient(100deg,var(--surface-2) 30%,
  var(--linen) 50%,var(--surface-2) 70%); background-size:200% 100%;
  animation:shim 1.4s linear infinite}
@keyframes shim{to{background-position:-200% 0}}

/* ---------- uploader ---------- */
.drop{border:2px dashed var(--line); border-radius:var(--r-xl); background:var(--surface);
  padding:clamp(28px,5vw,56px); text-align:center; transition:border-color .18s, background .18s}
.drop.over{border-color:var(--blush); background:var(--surface-2)}
.drop input[type=file]{display:none}
.notice{display:flex; gap:12px; align-items:flex-start; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
  font-size:.9rem; color:var(--text-2); margin-top:20px; text-align:left}
.notice .ico{flex:none; font-size:1.1rem; line-height:1.3}

/* ---------- stats ---------- */
.stats{display:flex; flex-wrap:wrap; gap:10px}
.stat{background:var(--surface-2); border-radius:var(--r); padding:10px 14px; min-width:96px}
.stat .k{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-2)}
.stat .v{font-family:var(--display); font-weight:700; font-size:1.15rem}

/* ---------- pricing ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
@media (max-width:900px){.price-grid{grid-template-columns:1fr}}
.plan{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:28px; box-shadow:var(--shadow)}
.plan.featured{border-color:var(--caramel); box-shadow:var(--shadow-lg); position:relative}
.plan.featured::before{content:'Most loved'; position:absolute; top:-13px; left:28px;
  background:var(--caramel); color:var(--snow); font-family:var(--display); font-weight:700;
  font-size:.76rem; padding:.35em 1em; border-radius:999px}
.plan .amt{font-family:var(--display); font-weight:700; font-size:2.6rem; line-height:1}
.plan .per{color:var(--text-2); font-size:.95rem}
.plan ul{list-style:none; padding:0; margin:20px 0; display:grid; gap:10px}
/* Not flex: a bullet containing <strong>Every bead you need</strong> plus text
   would make those two separate flex items and lay them out independently,
   which broke the line in half. A positioned marker lets the text flow. */
.plan li{position:relative; padding-left:22px; font-size:.95rem; line-height:1.45}
.plan li::before{content:'✦'; position:absolute; left:0; top:0; color:var(--sage-deep)}
.plan .btn{margin-top:auto}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
label{display:block; font-family:var(--display); font-weight:700; font-size:.9rem; margin-bottom:.4em}
input[type=text],input[type=email],input[type=password],select{
  width:100%; padding:.8em 1em; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); color:var(--text); font:inherit; font-size:1rem;
}
input:focus,select:focus{outline:2px solid var(--blush); outline-offset:1px; border-color:transparent}
.err{background:#FDECE8; border:1px solid var(--coral); color:#8A3B2A; padding:12px 14px;
  border-radius:var(--r); font-size:.92rem; margin-bottom:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .err{background:#4A2A24; color:#F6C9BE}}
.ok{background:#EAF3EA; border:1px solid var(--sage); color:#38543C; padding:12px 14px;
  border-radius:var(--r); font-size:.92rem; margin-bottom:16px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ok{background:#2B3B2E; color:#CDE3CE}}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); background:var(--surface); margin-top:40px}
.foot-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:32px; padding:56px 0 32px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-2)}
.foot-grid a{display:block; padding:.28em 0; color:var(--text-2); font-size:.94rem}
/* The link columns stack, but a link inside a sentence has to stay in the
   sentence, or it breaks onto its own line and strands the full stop. */
.foot-grid p a{display:inline; padding:0; font-size:inherit; color:inherit}
.foot-grid a:hover{color:var(--text)}
.foot-bar{border-top:1px solid var(--line); padding:20px 0; display:flex; gap:16px;
  flex-wrap:wrap; align-items:center; justify-content:space-between; font-size:.86rem; color:var(--text-2)}

/* ---------- editor ---------- */
.editor{display:grid; grid-template-columns:1fr 320px; gap:20px; align-items:start}
@media (max-width:960px){.editor{grid-template-columns:1fr}}
.canvas-wrap{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; position:relative; box-shadow:var(--shadow)}
#board{display:block; width:100%; height:min(80vh,860px); max-width:100%; touch-action:none; cursor:crosshair;
  background:
    linear-gradient(45deg,var(--surface-2) 25%,transparent 25%,transparent 75%,var(--surface-2) 75%),
    linear-gradient(45deg,var(--surface-2) 25%,transparent 25%,transparent 75%,var(--surface-2) 75%);
  background-size:18px 18px; background-position:0 0,9px 9px}
.toolbar{display:flex; flex-wrap:wrap; gap:6px; padding:12px; border-bottom:1px solid var(--line);
  background:var(--surface)}
.tool{border:1px solid var(--line); background:var(--surface); border-radius:var(--r-sm);
  padding:.5em .8em; font:inherit; font-size:.88rem; cursor:pointer; color:var(--text);
  display:inline-flex; align-items:center; gap:.4em}
.tool:hover{background:var(--surface-2)}
.tool[aria-pressed="true"]{background:var(--blush); border-color:var(--blush); color:#5A3A40; font-weight:600}
.tool:disabled{opacity:.4; cursor:not-allowed}
.side{display:grid; gap:16px; position:sticky; top:92px}
.swatches{display:grid; gap:6px; max-height:340px; overflow:auto; padding-right:4px}
.swatch{display:flex; align-items:center; gap:10px; padding:7px 9px; border-radius:var(--r-sm);
  border:1px solid transparent; background:transparent; cursor:pointer; font:inherit;
  color:inherit; text-align:left; width:100%}
.swatch:hover{background:var(--surface-2)}
.swatch[aria-pressed="true"]{border-color:var(--caramel); background:var(--surface-2)}
.swatch .chip{width:22px; height:22px; border-radius:7px; flex:none; border:1px solid rgba(0,0,0,.12)}
.swatch .nm{flex:1; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.swatch .ct{font-size:.8rem; color:var(--text-2); font-variant-numeric:tabular-nums}
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px}
.tabs a{padding:.45em .9em; border-radius:999px; border:1px solid var(--line);
  font-size:.86rem; color:var(--text-2)}
.tabs a.on{background:var(--caramel); border-color:var(--caramel); color:var(--snow); font-weight:600}

.progress{height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.progress i{display:block; height:100%; width:0; background:var(--blush); transition:width .4s ease}

.pill{display:inline-block; padding:.3em .8em; border-radius:999px; background:var(--surface-2);
  font-size:.78rem; color:var(--text-2)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- studio: the photo everything is drawn from ---------- */
.source-strip{display:flex; align-items:center; gap:16px; max-width:520px;
  margin:0 auto 32px; padding:12px 18px 12px 12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.source-strip img{width:72px; height:72px; border-radius:var(--r); object-fit:cover;
  flex:none; padding:4px; background:var(--surface-2); border:1px solid var(--line)}
@media (max-width:520px){.source-strip{margin-left:0; margin-right:0}}

/* ---------- step 2: generation workbench ---------- */
.workbench{max-width:640px; margin:32px auto 36px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px;
  box-shadow:var(--shadow); transition:opacity .5s ease, max-height .5s ease}
.workbench.collapsed{opacity:0; max-height:0; padding:0; margin:0; overflow:hidden; border-width:0}
.workbench-head{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.workbench-head strong{font-family:var(--display); font-size:1rem}
.workbench-head > div{flex:1}
.elapsed{font-variant-numeric:tabular-nums; font-size:.85rem; color:var(--text-2)}
.spinner{width:26px; height:26px; flex:none; border-radius:50%;
  border:3px solid var(--surface-2); border-top-color:var(--blush);
  animation:spin .9s linear infinite}
.spinner.finished{border-color:var(--sage); border-top-color:var(--sage); animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.worklog{list-style:none; margin:14px 0 0; padding:0; max-height:132px; overflow:auto;
  font-size:.86rem; color:var(--text-2)}
.worklog li{padding:3px 0 3px 22px; position:relative; animation:fadein .4s ease}
.worklog li::before{content:'◌'; position:absolute; left:0; color:var(--caramel)}
.worklog li.done::before{content:'✓'; color:var(--sage-deep)}
@keyframes fadein{from{opacity:0; transform:translateY(-3px)} to{opacity:1; transform:none}}

/* ---------- landing: how the AI works ---------- */
.aigrid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,4vw,52px); align-items:center}
@media (max-width:880px){.aigrid{grid-template-columns:1fr}}
.console{background:var(--ink); border-radius:var(--r-lg); padding:20px 22px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem;
  line-height:1.85; color:#E7DED4; box-shadow:var(--shadow-lg); overflow:hidden}
.console .l{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.console .k{color:var(--blush)}
.console .v{color:var(--sage)}
.console .c{color:#8C7E73}
.console .ok{color:var(--butter)}

/* ---------- landing: photo -> sticker -> beads ---------- */
.journey{display:flex; align-items:center; justify-content:center; gap:clamp(10px,2vw,26px);
  flex-wrap:wrap}
.journey figure{margin:0; flex:1 1 240px; max-width:300px; text-align:center}
.journey img{width:100%; aspect-ratio:1; object-fit:contain; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:12px;
  box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease}
.journey figure:hover img{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.journey figcaption{margin-top:14px; display:grid; gap:2px}
.journey figcaption strong{font-family:var(--display); font-size:1rem}
.journey figcaption span{font-size:.85rem; color:var(--text-2)}
.journey .arrow{font-size:1.5rem; color:var(--blush); flex:0 0 auto; align-self:flex-start;
  margin-top:clamp(60px,10vw,120px)}
@media (max-width:760px){
  .journey .arrow{transform:rotate(90deg); margin:0; align-self:center}
  .journey figure{flex-basis:200px}
}

/* ---------- editor navigator ---------- */
.navwrap{position:relative; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r); padding:8px; display:grid; place-items:center; min-height:120px}
#navmap{display:block; max-width:100%; height:auto; image-rendering:pixelated; cursor:pointer;
  border-radius:6px}
#viewbox{position:absolute; border:2px solid var(--caramel); border-radius:3px;
  pointer-events:none; box-shadow:0 0 0 9999px rgba(61,43,31,.10); display:none}
.zoomrow{display:flex; align-items:center; gap:6px; margin-top:10px}
.zoomrow input[type=range]{flex:1; accent-color:var(--blush)}
.tool.sm{padding:.3em .6em; font-size:.85rem; min-width:30px; justify-content:center}

/* ---------- account: your stickers ---------- */
.mypats{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
.mypats a{display:block; text-align:center; border-radius:var(--r); padding:8px 6px;
  border:1px solid var(--line); background:var(--surface-2); transition:transform .15s, box-shadow .15s}
.mypats a:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.mypats img{width:100%; aspect-ratio:1; object-fit:contain}
.mypats span{display:block; font-size:.74rem; color:var(--text-2); margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---------- step 2: choosing a mode ---------- */
.modecard{display:flex; flex-direction:column; gap:10px; background:var(--surface);
  border:2px solid var(--line); border-radius:var(--r-xl); padding:26px;
  box-shadow:var(--shadow); transition:transform .18s, box-shadow .18s, border-color .18s}
.modecard:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--blush)}
.modecard h2{margin:0}
.modecard .btn{margin-top:auto}
.badge{align-self:flex-start; font-family:var(--display); font-weight:700; font-size:.72rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--caramel);
  background:var(--surface-2); padding:.35em .9em; border-radius:999px}
.badge.sage{color:#38543C; background:#EAF3EA}
.ticks{list-style:none; padding:0; margin:4px 0 8px; display:grid; gap:7px}
.ticks li{position:relative; padding-left:20px; font-size:.88rem; color:var(--text-2); line-height:1.45}
.ticks li::before{content:'✓'; position:absolute; left:0; top:0; color:var(--sage-deep); font-weight:700}

/* ---------- step 2: tuning a photo ---------- */
input[type=range]{width:100%; accent-color:var(--blush); margin:4px 0 2px}
output{float:right; font-variant-numeric:tabular-nums; color:var(--text-2);
  font-family:var(--body); font-weight:400}
#preview{border-radius:var(--r); background:var(--surface-2)}

/* ---------- mode cards: show, don't tell ---------- */
.modeshot{position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface-2); aspect-ratio:4/3; margin:-6px 0 4px}
.modeshot img{width:100%; height:100%; object-fit:contain; display:block; padding:10px}
.modeshot .shotlabel{position:absolute; left:0; right:0; bottom:0; padding:16px 14px 9px;
  font-size:.76rem; color:var(--snow); text-align:center;
  background:linear-gradient(transparent, rgba(42,35,32,.72))}
.modecard:hover .modeshot img{transform:scale(1.02); transition:transform .3s ease}

/* ---------- editor: keep the sidebar short ---------- */
/* Constant-use tools (navigator, palette) stay beside the canvas; things you
   touch occasionally sit underneath, so the right column stops running a page
   and a half past the artwork. */
/* auto-fit, so two cards share the full width instead of leaving a dead column */
.editor-below{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px; margin-top:20px; align-items:start}
.editor-below .card{margin:0}
.side{max-height:none}
.side .swatches{max-height:min(46vh,420px)}
@media (max-width:960px){
  .editor-below{grid-template-columns:1fr}
}

/* Photo settings belongs beside the canvas — it is a primary control, not an
   afterthought — so the rest of the sidebar tightens up to make room. */
.side .card{padding:16px}
.side label{margin-bottom:.2em; font-size:.86rem}
.side input[type=range]{margin:2px 0 10px}
.side .navwrap{min-height:0; padding:6px}
.side #navmap{max-height:150px}
.side .swatches{max-height:min(26vh,210px)}
.side .zoomrow{margin-top:6px}

.canvas-wrap{display:flex; flex-direction:column}
.canvas-wrap > canvas{flex:0 0 auto}
.editor{align-items:stretch}

/* ---------- floating overview ---------- */
/* The whole-piece map used to be a sidebar card. As an overlay it costs no
   column height, which is what was leaving a large empty space under the
   editor, and it sits where you are already looking. */
.canvas-wrap{position:relative}
.minimap{position:absolute; right:14px; bottom:14px; z-index:5;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:8px; backdrop-filter:blur(6px);
  max-width:210px; transition:padding .2s ease}
.minimap .navwrap{background:var(--surface-2); border:none; padding:4px; min-height:0}
.minimap #navmap{max-height:120px; max-width:190px}
.minimap .zoomrow{margin-top:6px; gap:4px}
.minimap .zoomrow .tool{padding:.25em .5em; font-size:.78rem; min-width:26px}
.minimap-toggle{position:absolute; top:-11px; left:-11px; width:24px; height:24px;
  border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--text-2); cursor:pointer; font-size:.7rem; line-height:1;
  box-shadow:var(--shadow); display:grid; place-items:center; padding:0}
.minimap-toggle:hover{background:var(--surface-2); color:var(--text)}
.minimap.collapsed{padding:6px}
.minimap.collapsed .minimap-body{display:none}
.minimap.collapsed .minimap-toggle{position:static; box-shadow:none; border:none;
  background:transparent; width:auto; height:auto; padding:2px 6px; font-size:.78rem}
@media (max-width:700px){
  .minimap{right:8px; bottom:8px; max-width:150px}
  .minimap #navmap{max-height:84px; max-width:134px}
}

/* draggable by its grip only: dragging from the map itself would fight with
   click-to-jump */
.minimap-grip{display:flex; align-items:center; justify-content:center; height:16px;
  margin:-2px 0 6px; border-radius:6px; color:var(--text-2); font-size:.8rem;
  letter-spacing:.2em; cursor:grab; user-select:none; touch-action:none;
  background:var(--surface-2)}
.minimap-grip:hover{color:var(--text)}
.minimap.dragging{cursor:grabbing; box-shadow:0 8px 32px rgba(61,43,31,.24)}
.minimap.dragging .minimap-grip{cursor:grabbing}
.minimap.collapsed .minimap-grip{display:none}

.checkrow{display:flex; align-items:center; gap:9px; cursor:pointer; margin-bottom:0}
.checkrow input[type=checkbox]{width:17px; height:17px; accent-color:var(--blush);
  cursor:pointer; margin:0; flex:none}
.checkrow span{font-family:var(--body); font-weight:400; font-size:.9rem}

/* A bare text link gave no idea what the other mode looks like. */
.switchmode{display:inline-flex; align-items:center; gap:10px; padding:6px 12px 6px 6px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  transition:border-color .18s, box-shadow .18s, transform .18s}
.switchmode:hover{border-color:var(--blush); box-shadow:var(--shadow); transform:translateY(-1px)}
.switchmode img{width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none;
  background:var(--surface-2)}
.switchmode span{display:grid; line-height:1.25}
.switchmode strong{font-family:var(--display); font-size:.86rem; color:var(--text)}
.switchmode em{font-style:normal; font-size:.74rem; color:var(--text-2)}
.tabs{align-items:center}

/* ---------- who is signed in ---------- */
.nav .who{display:inline-flex; align-items:center; gap:7px; padding:.3em .8em .3em .35em;
  border-radius:999px; border:1px solid var(--line); background:var(--surface)}
.nav .who:hover{border-color:var(--blush); background:var(--surface)}
.nav .who img{width:24px; height:24px; border-radius:50%; object-fit:cover; flex:none}
.whoname{font-size:.88rem; max-width:11ch; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; color:var(--text)}
.initials{width:24px; height:24px; border-radius:50%; background:var(--blush);
  color:#5A3A40; display:grid; place-items:center; font-family:var(--display);
  font-weight:700; font-size:.78rem; flex:none}
.initials.big{width:52px; height:52px; font-size:1.4rem}
@media (max-width:820px){
  .nav .who{justify-content:flex-start; border:none; padding:.5em .9em}
  .whoname{max-width:none}
}

/* a card being opened */
.style-card.opening{border-color:var(--caramel); opacity:.75; pointer-events:none}
.style-card.opening .thumb::after{content:'Opening…'; position:absolute; inset:auto 0 0 0;
  padding:8px; text-align:center; font-size:.78rem; color:var(--snow);
  background:linear-gradient(transparent, rgba(42,35,32,.78))}

/* ---------- what we would ship ---------- */
.orderset{max-width:760px; margin:0 auto 36px; padding:18px 20px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.orderset-head{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap; margin-bottom:12px}
.orderset-head strong{font-family:var(--display)}
.orderset-strip{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px}
.orderset-strip a{display:block; padding:6px; border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--line); transition:transform .15s}
.orderset-strip a:hover{transform:translateY(-2px)}
.orderset-strip img{width:100%; aspect-ratio:1; object-fit:contain}

/* The finished-size tile toggles cm/inches; say so without shouting. */
.stat.units { cursor: pointer; position: relative; }
.stat.units:hover, .stat.units:focus-visible { border-color: var(--caramel); outline: none; }
.stat.units::after {
  content: "⇄"; position: absolute; top: 6px; right: 8px;
  font-size: .7rem; color: var(--muted); opacity: .55;
}

/* Unlock state, said plainly rather than left to be inferred from a paywall. */
.unlockline { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.pill {
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:.72rem; font-weight:600; letter-spacing:.01em; white-space:nowrap;
  background:var(--linen, #F0EAE4); color:var(--cocoa, #3D2B1F);
}
.pill.ok  { background:#DCEEDC; color:#1F5130; }
.pill.out { background:#F6DFE1; color:#7A2833; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pill     { background:#3B302B; color:#F0EAE4; }
  :root:not([data-theme="light"]) .pill.ok  { background:#24402C; color:#CFEAD6; }
  :root:not([data-theme="light"]) .pill.out { background:#4A2B30; color:#F3C9CE; }
}
.tabs a .unlocked { margin-left:6px; color:#3E8F5B; font-weight:700; }

.mypats a { position: relative; }
.mypats a .ubadge {
  position:absolute; top:5px; right:5px; z-index:1;
  width:19px; height:19px; border-radius:50%;
  background:#3E8F5B; color:#fff; font-style:normal; font-size:.68rem;
  font-weight:700; line-height:19px; text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,.28);
}
.mypats a.is-unlocked img { outline:2px solid #3E8F5B; outline-offset:-2px; }

/* ---------------------------------------------------------------------------
   The pattern library.

   Desktop is a masonry wall: bead renders have wildly different proportions —
   a 12x40 sword next to a 60x58 portrait — and a fixed grid either crops them
   or strands them in whitespace. CSS columns let each tile keep its own height.

   Mobile is a single-column feed instead, with the actions large enough for a
   thumb, because a two-column wall on a phone makes every pattern too small to
   judge, which is the only thing browsing is for.
--------------------------------------------------------------------------- */
.libtop { padding: 34px 0 18px; background: var(--surface-2); color: var(--text); }
.libtop .lede { color: var(--text); opacity: .85; }
.libbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line); padding: 10px 0;
}
.chiprow { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 6px 14px; font-size: .86rem;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.chip em { font-style: normal; opacity: .5; font-size: .78em; margin-left: 3px; }
.chip.on { background: var(--blush, #F4B8C1); border-color: var(--blush, #F4B8C1);
           color: var(--cocoa); font-weight: 600; }
.filtrow { display: flex; gap: 8px; margin-top: 8px; flex-wrap: nowrap; align-items: center; }
@media (max-width: 700px) { .filtrow { flex-wrap: wrap; } .filtrow select { flex: 1 1 45%; } }
.filtrow input[type=search] { flex: 1 1 220px; min-width: 0; }
.filtrow input, .filtrow select {
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px;
  font: inherit; background: var(--surface); color: var(--text);
}

/* Wide enough that a bead is a bead. At six columns a 70-bead pattern got
   2px per bead and turned into dotted noise. */
.masonry { columns: 4 260px; column-gap: 16px; }
.tile {
  break-inside: avoid; margin: 0 0 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  overflow: hidden; display: inline-block; width: 100%;
}
.tile.curated { border-color: var(--caramel, #B08968); }
.tileshot { display: block; background: var(--surface-2); padding: 14px; }
.tileshot img {
  display: block; width: 100%; height: auto; image-rendering: pixelated;
  max-height: 320px; object-fit: contain;
}
.tilebody { padding: 12px 14px 14px; }
.tilebody h3 {
  color: var(--text);
  font-size: .96rem; margin: 0 0 3px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tilemeta { font-size: .74rem; color: var(--text-2); margin: 0 0 2px; }
.tileby { font-size: .74rem; color: var(--text-2); margin: 0 0 10px; }
.tileby.curatedby { color: var(--caramel, #B08968); font-weight: 600; }
.tileacts { display: flex; gap: 6px; align-items: center; }
.act {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 5px 11px; font: inherit; font-size: .8rem; cursor: pointer;
  color: var(--text); line-height: 1.2;
}
.act:hover { border-color: var(--caramel, #B08968); }
.act.on { background: #DCEEDC; border-color: #9CC9A6; color: #1F5130; }
.act.star.on { background: #FBEFD3; border-color: #E7C878; color: #6B4B12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .act.on {
    background: #24402C; border-color: #3E6B49; color: #CFEAD6; }
  :root:not([data-theme="light"]) .act.star.on {
    background: #453516; border-color: #7A5F23; color: #F3DFA8; }
}
.act.use { margin-left: auto; background: var(--blush, #F4B8C1);
           border-color: var(--blush, #F4B8C1); color: var(--cocoa); font-weight: 600; }
.act b { font-weight: 700; }
.empty { padding: 54px 24px; }
.empty h3 { margin-bottom: 6px; }

@media (max-width: 1280px) { .masonry { columns: 3 240px; } }
@media (max-width: 1040px) { .masonry { columns: 2 220px; } }
@media (max-width: 860px)  { .masonry { columns: 3 170px; } }

/* Phone: one column, read like a feed. */
@media (max-width: 640px) {
  .masonry { columns: 1; column-gap: 0; }
  .tile { border-radius: 18px; margin-bottom: 14px; }
  .tileshot { padding: 22px; }
  .tileshot img { max-height: 62vh; }
  .tilebody { padding: 14px 16px 16px; }
  .tilebody h3 {
  color: var(--text); font-size: 1.05rem; white-space: normal; }
  .tilemeta, .tileby { font-size: .82rem; }
  .tileacts { gap: 8px; }
  .act { padding: 10px 16px; font-size: .92rem; }   /* thumb-sized */
  .act.use { padding: 10px 20px; }
  .libtop { padding: 22px 0 14px; }
}

/* --- one pattern, with its comments --- */
.itemgrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px; align-items: start; }
.itemshot { background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  padding: 22px; text-align: center; display: flex;
  align-items: center; justify-content: center; }
/* fill the panel: the render is high resolution and this is the one place
   someone looks at a pattern closely before deciding to make it */
.itemshot img { width: 100%; max-width: 620px; height: auto;
  image-rendering: pixelated; margin: 0 auto; }
.itemacts { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.comment { border-top: 1px solid var(--line); padding: 14px 0; }
.comment:first-of-type { border-top: 0; }
.comment .who { font-size: .82rem; font-weight: 600; }
.comment .when { font-size: .74rem; color: var(--text-2); font-weight: 400; margin-left: 6px; }
.comment p { margin: 4px 0 0; font-size: .92rem; white-space: pre-wrap; overflow-wrap: anywhere; }
#cbox { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
  font: inherit; resize: vertical; min-height: 76px;
  background: var(--surface); color: var(--text); }
@media (max-width: 860px) { .itemgrid { grid-template-columns: 1fr; gap: 20px; } }

/* --- share dialog --- */
dialog.sheet {
  border: 0; border-radius: 18px; padding: 0; width: min(460px, 94vw);
  background: var(--bg); color: var(--text);
  box-shadow: 0 24px 60px rgba(61,43,31,.28);
}
dialog.sheet::backdrop { background: rgba(61,43,31,.42); }
.sheet .inner { padding: 22px 24px 24px; }
.sheet label { display: block; font-size: .82rem; font-weight: 600; margin: 12px 0 5px; }
.sheet input, .sheet select, .sheet textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 12px; font: inherit; background: var(--surface); color: var(--text);
}
.sheet textarea { min-height: 66px; resize: vertical; }
.sheet .row { display: flex; gap: 10px; margin-top: 18px; }
.sheet .row .btn { flex: 1; }
@media (max-width: 640px) {
  dialog.sheet { width: 100vw; max-width: 100vw; margin: auto auto 0; border-radius: 20px 20px 0 0; }
}


/* The 3D stage sits where the flat board does and takes the same box. */
#board3d{display:block; width:100%; height:min(80vh,860px); position:relative;
  border-radius:var(--r-md); overflow:hidden; touch-action:none;
  background:radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.16), transparent 70%);}
#board3d[hidden]{display:none}
/* #board sets display:block, which would otherwise beat [hidden]. */

/* Tool cursors, on both the flat board and the 3D stage. Dark glyph with a
   white outline so they stay legible over any bead colour, in either theme. */
#board.t-paint,#board3d.t-paint,#lib3d.t-paint{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3.5%2020.5l1.6-4.6L15.4%205.6a2.7%202.7%200%20013.8%203.8L8.9%2019.6z%22%20fill%3D%22%2333241B%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3.5%2020.5l3.1-1%20-2.1-2.1z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E") 3 21, crosshair}
#board.t-pick,#board3d.t-pick,#lib3d.t-pick{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3.4%2020.6l.7-3.2%208.3-8.3%202.5%202.5-8.3%208.3z%22%20fill%3D%22%2333241B%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.6%207.6l2.8-2.8a2.6%202.6%200%20013.7%203.7l-2.8%202.8z%22%20fill%3D%22%2333241B%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 3 21, crosshair}
#board.t-fill,#board3d.t-fill,#lib3d.t-fill{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M11.2%203.6l8.4%208.4a1.4%201.4%200%20010%202L13%2020.6a1.4%201.4%200%2001-2%200l-6.6-6.6a1.4%201.4%200%20010-2z%22%20fill%3D%22%2333241B%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M20.4%2015.2c1.7%202.6%201.7%204.4%200%204.4s-1.7-1.8%200-4.4z%22%20fill%3D%22%2333241B%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") 5 20, crosshair}
#board.t-erase,#board3d.t-erase,#lib3d.t-erase{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Cpath%20d%3D%22M3.6%2016.4l8-8a1.8%201.8%200%20012.6%200l4.4%204.4a1.8%201.8%200%20010%202.6l-5%205H6.2z%22%20fill%3D%22%2333241B%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9.4%2010.6l6%206%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%2F%3E%3C%2Fsvg%3E") 4 20, crosshair}
#board.t-orbit,#board3d.t-orbit,#lib3d.t-orbit{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%3E%3Cpath%20d%3D%22M4%2013a9%209%200%201%201%203.2%206.9%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%2013a9%209%200%201%201%203.2%206.9%22%20fill%3D%22none%22%20stroke%3D%22%2333241B%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%206.6V13h6.4z%22%20fill%3D%22%2333241B%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 13 13, crosshair}
#board.t-pan,#board3d.t-pan,#lib3d.t-pan{cursor:grab}
#board.panning,#board3d.dragpan,#board3d.spacepan,
#lib3d.dragpan,#lib3d.spacepan{cursor:grabbing}
#board3d.dragorbit,#lib3d.dragorbit{cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2226%22%3E%3Cpath%20d%3D%22M4%2013a9%209%200%201%201%203.2%206.9%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%224.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%2013a9%209%200%201%201%203.2%206.9%22%20fill%3D%22none%22%20stroke%3D%22%2333241B%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%206.6V13h6.4z%22%20fill%3D%22%2333241B%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") 13 13, grabbing}
/* #board sets display:block, which would otherwise beat [hidden]. */
#board[hidden]{display:none}

/* One-time note on how to move the camera; fades itself out. */
.b3dhint{position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  background:rgba(41,29,22,.82); color:#FDF6EC; font-size:.76rem; letter-spacing:.01em;
  padding:7px 13px; border-radius:999px; pointer-events:none; white-space:nowrap;
  transition:opacity .7s ease; z-index:3}
.b3dhint.gone{opacity:0}
@media (max-width:520px){ .b3dhint{font-size:.68rem; white-space:normal; max-width:88%; text-align:center} }

/* The library's 3D view sits exactly where the picture was, and the toggle
   rides on the preview itself rather than adding a control underneath it. */
.itemshot{position:relative}
/* `.itemshot img` sets a display, which would otherwise beat [hidden] and
   leave the picture sitting next to the 3D view instead of being replaced. */
#flatshot[hidden]{display:none}
#lib3d{max-width:620px; margin:0 auto}
#lib3d{position:relative; width:100%; border-radius:var(--r-md); overflow:hidden;
  touch-action:none; background:radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.18), transparent 70%)}
#lib3d[hidden]{display:none}
.shot-toggle{position:absolute; top:10px; right:10px; z-index:2;
  border:1px solid var(--line); border-radius:999px; cursor:pointer;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(6px); color:var(--text); font:inherit; font-size:.78rem;
  padding:.36em .8em; display:inline-flex; align-items:center; gap:.35em;
  box-shadow:0 2px 10px rgba(61,43,31,.14)}
.shot-toggle:hover{background:var(--surface)}
.shot-toggle[aria-pressed="true"]{background:var(--blush); color:#5A3A40}
.shot-toggle:disabled{opacity:.5; cursor:not-allowed}

/* The overview floats over the board and can be dragged; it must never end up
   sitting on top of the toolbar and swallowing clicks. */
.toolbar{position:relative; z-index:4}
.minimap{z-index:3}

/* Controls for the library's 3D preview, sitting on the preview itself. */
.shot-tools{position:absolute; top:10px; right:10px; z-index:2;
  display:flex; gap:6px; align-items:center}
.shot-tools .shot-toggle{position:static}
#tools3d{display:flex; gap:6px}
#tools3d[hidden]{display:none}