/* Kiki's Big World — cozy storybook house.
   Cream paper pages with thick colouring-book ink outlines; Pom's yellow marks the things you can click. */
:root{
  --paper:#fbf4e6;
  --paper-2:#f5e9d3;
  --card:#fffaf1;
  --ink:#4a2541;
  --ink-soft:#735a6c;
  --ginger:#d97a2b;
  --pom:#f5c832;
  --pine:#4f7a55;
  --rose:#e8a1a3;
  --line:#2b1a26;
  --dot:#efd9c6;
  --display:"Fuzzy Bubbles", "Comic Sans MS", "Chalkboard SE", cursive;
  --body:"Nunito", "Segoe UI", system-ui, sans-serif;
  --r:22px;
}
:root{color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background-color:var(--paper);background-image:url(../images/bg-main.webp);background-size:420px 420px;color:var(--ink);font:400 17px/1.6 var(--body)}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit}
p a, li a, dd a{color:var(--ginger);font-weight:700}
:focus-visible{outline:3px dashed var(--ginger);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.narrow{max-width:760px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.12;text-wrap:balance;margin:0}
h1{font-size:clamp(2.6rem,7vw,4.6rem)}
h2{font-size:clamp(2rem,4.5vw,3rem)}
h3{font-size:1.5rem}
p{margin:0}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:62ch}
.small{font-size:.88rem;color:var(--ink-soft)}
.eyebrow{font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ginger)}
.stack{display:grid;gap:16px;align-content:start}
section{padding-block:clamp(48px,7vw,88px)}
.band{background:var(--paper-2);border-block:4px solid var(--line)}
.head{display:grid;gap:12px;margin-bottom:36px}
.head.center{text-align:center;justify-items:center}

.inked{border:4px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:6px 6px 0 var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 1rem var(--body);text-decoration:none;
  padding:12px 22px;border-radius:999px;border:3px solid var(--line);background:var(--pom);color:#2b1a26;
  box-shadow:3px 3px 0 var(--line);cursor:pointer;transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--line)}
.btn.ghost{background:var(--card);color:var(--ink)}
.btn.sm{padding:9px 18px;font-size:.95rem}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.stack > .btn{justify-self:start}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--paper)}
.site-head{position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;background:var(--paper);border-bottom:3px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.logo{font-family:var(--display);font-size:1.55rem;text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo svg{width:30px;height:30px;flex:none}
.logo img{height:52px;width:auto}
.menu{display:flex;gap:4px 22px;list-style:none;margin:0;padding:0;font-weight:800;align-items:center}
.menu a{text-decoration:none;padding:4px 2px;border-bottom:3px solid transparent}
.menu a:hover,.menu a[aria-current="page"]{border-color:var(--pom)}
.menu .btn{border-bottom:3px solid var(--line)}
.menu-toggle{display:none;font:800 1rem var(--body);background:var(--card);color:var(--ink);border:3px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
@media (max-width:900px){
  .menu-toggle{display:inline-block}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:3px solid var(--line);
    padding:8px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px))}
  .menu.open{display:flex}
  .menu li a{display:block;padding:12px 4px;border-bottom:2px dashed var(--paper-2)}
  .menu .btn{margin-top:10px}
}

/* page hero (inner pages) */
.page-hero{padding-block:clamp(40px,6vw,72px) clamp(24px,4vw,40px)}
.page-hero .wrap{display:grid;gap:14px}
.crumbs{font-size:.88rem;color:var(--ink-soft)}
.crumbs a{color:inherit}

/* home hero */
.hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,56px);align-items:center}
.hero h1{font-size:clamp(3rem,8vw,5.6rem)}
.hero h1 .big{color:var(--ginger);display:inline-block;transform:rotate(-3deg)}
.art{margin:0;padding:0;overflow:hidden;position:relative}
.art img{width:100%;aspect-ratio:1126/1024;object-fit:cover}
.art img.sq{aspect-ratio:1}
.tilt{transform:rotate(1.5deg)}
.sticker{position:absolute;font-family:var(--display);background:var(--pom);color:#2b1a26;border:3px solid var(--line);
  border-radius:999px;padding:6px 14px;font-size:1rem;box-shadow:3px 3px 0 var(--line);left:14px;bottom:14px;transform:rotate(-4deg)}

/* grids */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center}

/* feature tiles */
.tile{padding:24px;display:grid;gap:10px;align-content:start;text-decoration:none}
a.tile:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--line)}
a.tile{transition:transform .15s, box-shadow .15s}
.tile .ico{width:56px;height:56px}
.tile p{color:var(--ink-soft)}
.tile .go{font-weight:800;color:var(--ginger)}

/* characters */
.char{padding:28px;display:grid;gap:14px;align-content:start}
.char-top{display:flex;align-items:center;gap:18px}
.char-top svg{flex:none;width:92px;height:92px}
dl.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
dl.facts dt{font-weight:800}
dl.facts dd{margin:0;color:var(--ink-soft)}
.swatches{display:inline-flex;gap:8px;align-items:center;vertical-align:middle}
.swatches span{width:24px;height:24px;border-radius:50%;border:3px solid var(--line)}

/* books */
.shelf{display:grid;gap:18px}
.shelf + .shelf{margin-top:48px}
.shelf-label{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.shelf-label h3{font-size:1.7rem}
.shelf-label p{color:var(--ink-soft)}
.book{padding:18px;display:grid;gap:12px;align-content:start}
.cover{aspect-ratio:1;border:3px solid var(--line);border-radius:10px;overflow:hidden;position:relative;display:grid;place-items:center;text-align:center;padding:14px;
  background:repeating-linear-gradient(45deg,#f6e3c4 0 18px,#f9ecd6 18px 36px)}
.cover > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cover .ctitle{position:relative;font-family:var(--display);font-size:1.45rem;line-height:1.08;color:#4a2541;background:#fffaf1e6;border:3px solid #2b1a26;border-radius:14px;padding:8px 12px}
.cover .ctitle small{display:block;font-family:var(--body);font-weight:800;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;margin-top:4px}
.cover.big .ctitle{font-size:clamp(1.8rem,4vw,2.6rem)}
.book h4{font-size:1.25rem}
.book p{color:var(--ink-soft);font-size:.95rem}
.book a.more{font-weight:800;color:var(--ginger);font-size:.95rem}
.tag{justify-self:start;font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:999px;border:2px solid var(--line)}
.tag.live{background:var(--pine);color:#fff}
.tag.soon{background:var(--rose);color:#2b1a26}
.tag.idea{background:var(--card)}

/* book detail */
.detail{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,56px);align-items:start}
.specs{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0;padding:20px 24px}
.specs dt{font-weight:800}
.specs dd{margin:0;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{padding-left:34px;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--pom);border:3px solid var(--line)}
.faq{display:grid;gap:12px}
.faq details{padding:16px 20px;border:3px solid var(--line);border-radius:16px;background:var(--card)}
.faq summary{font-weight:800;cursor:pointer}
.faq details p{margin-top:8px;color:var(--ink-soft)}

/* sample pages gallery (hides itself until images exist) */
.pages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.pg{margin:0;padding:10px;display:grid;gap:8px;background:#fff}
.pg:nth-child(odd){transform:rotate(-1.5deg)}
.pg:nth-child(even){transform:rotate(1.2deg)}
.pg img{aspect-ratio:1;object-fit:cover;width:100%;border-radius:10px}
.pg figcaption{font-family:var(--display);font-size:1rem;color:#4a2541;text-align:center}

/* game */
.game{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:start}
.scene{position:relative;padding:0;overflow:hidden;cursor:crosshair}
.scene img{width:100%;aspect-ratio:1126/1024;object-fit:cover;user-select:none;-webkit-user-drag:none}
.ring{position:absolute;width:15%;aspect-ratio:1;border:5px solid var(--pom);border-radius:50%;
  box-shadow:0 0 0 4px var(--line);transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.ring.show{transform:translate(-50%,-50%) scale(1);opacity:1}
.miss{position:absolute;font-family:var(--display);font-size:1.1rem;color:#fff;text-shadow:0 2px 0 #2b1a26,0 0 6px #2b1a26;transform:translate(-50%,-50%);pointer-events:none;animation:pop .8s forwards}
@keyframes pop{from{opacity:1;margin-top:0}to{opacity:0;margin-top:-30px}}
.panel{padding:24px;display:grid;gap:16px}
.panel .count{font-family:var(--display);font-size:1.3rem}
.dots{display:flex;gap:8px}
.dots span{width:18px;height:18px;border-radius:50%;border:3px solid var(--line);background:var(--card)}
.dots span.done{background:var(--pom)}
.dots span.now{background:var(--rose)}
.msg{min-height:3.2em;font-weight:600}

/* forms */
.signup{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;padding:clamp(24px,4vw,44px)}
form.stack{gap:12px}
label{font-weight:800}
.field{display:flex;gap:10px;flex-wrap:wrap}
input[type=email],input[type=text],textarea{flex:1 1 220px;min-width:0;width:100%;font:600 1rem var(--body);padding:12px 16px;border-radius:16px;border:3px solid var(--line);background:var(--paper);color:var(--ink)}
.field input{border-radius:999px;width:auto}
textarea{min-height:140px;resize:vertical}
.ok{font-weight:800;color:var(--pine)}

/* prose (about, privacy) */
.prose{display:grid;gap:18px;max-width:68ch}
.prose h2{font-size:1.8rem;margin-top:16px}
.prose ul{margin:0;padding-left:22px;display:grid;gap:6px}

/* footer */
.site-foot{border-top:3px solid var(--line);padding-block:48px 32px;background:var(--paper-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:28px}
.foot-grid h4{font-size:1.1rem;margin-bottom:10px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot-grid ul a{text-decoration:none;color:var(--ink-soft);font-weight:600}
.foot-grid ul a:hover{color:var(--ink)}
.foot-base{margin-top:32px;padding-top:20px;border-top:2px dashed var(--ink-soft);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .hero-grid,.game,.signup,.split,.detail{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .pages{grid-template-columns:repeat(2,minmax(0,1fr))}
  dl.facts,.specs{grid-template-columns:1fr}
  dl.facts dd,.specs dd{margin-bottom:6px}
  .foot-grid{grid-template-columns:1fr}
  .logo{font-size:1.3rem}
}

/* rainbow bubble lettering, after the book cover */
.rainbow{font-family:"Titan One","Arial Rounded MT Bold",var(--display);font-weight:400;letter-spacing:.01em;
  -webkit-text-stroke:5px #2b1a26;paint-order:stroke fill;text-shadow:5px 5px 0 #2b1a26}
.rainbow .c0{color:#f7758f}.rainbow .c1{color:#f8c93c}.rainbow .c2{color:#6fd6b4}.rainbow .c3{color:#b892f0}.rainbow .c4{color:#ff9d6b}
.hero h1{line-height:1.05}

/* before/after slider */
.compare{position:relative;overflow:hidden;padding:0;aspect-ratio:1;background:#fff}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .after{clip-path:inset(0 0 0 var(--pos))}
.compare .divider{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;margin-left:-2px;background:#2b1a26;pointer-events:none}
.compare .divider::after{content:"";position:absolute;top:50%;left:50%;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:50%;background:var(--pom);border:4px solid #2b1a26}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare input:focus-visible + .x, .compare:focus-within{outline:3px dashed var(--ginger);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* brand art */
.wordmark{width:min(100%,520px);height:auto;margin-left:-8px}
.foot-brand{display:flex;align-items:center;gap:12px}
.foot-brand img:first-child{width:64px;height:64px}
.foot-brand img:last-child{height:44px;width:auto}
.badge{width:min(60%,220px);height:auto;filter:drop-shadow(5px 5px 0 var(--line))}
.float-art{width:min(100%,360px);height:auto;justify-self:center;filter:drop-shadow(6px 6px 0 rgba(43,26,38,.25))}
.signup{grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr)}
.signup-kiki{width:130px;height:auto;transform:rotate(-6deg)}
@media (max-width:900px){.signup{grid-template-columns:1fr}.signup-kiki{width:110px}}
@media (max-width:600px){.logo img{height:38px}}

/* character art */
.char-img{width:110px;height:110px;object-fit:contain;flex:none}
.tile-art{width:110px;height:110px;object-fit:contain}
.moods{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:14px}
.mood{margin:0;display:grid;gap:6px;justify-items:center;text-align:center}
.mood img{width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(3px 3px 0 rgba(43,26,38,.18));transition:transform .2s}
.mood img:hover{transform:rotate(-6deg) scale(1.08)}
.mood figcaption,.pose figcaption{font-family:var(--display);font-size:1rem}
.poses{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;align-items:end}
.poses.four{grid-template-columns:repeat(4,minmax(0,1fr));max-width:760px}
.pose{margin:0;display:grid;gap:8px;justify-items:center;text-align:center}
.pose img{width:100%;max-width:200px;height:auto;filter:drop-shadow(4px 4px 0 rgba(43,26,38,.18))}
@media (max-width:900px){.moods{grid-template-columns:repeat(5,minmax(0,1fr))}.poses{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.moods{grid-template-columns:repeat(3,minmax(0,1fr))}.poses,.poses.four{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* I spy game */
.spy-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.spy-list li{display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center;padding:6px 10px;border:2px solid var(--line);border-radius:14px;background:var(--paper)}
.spy-list li img{width:60px;height:40px;object-fit:contain;border-radius:8px;background:#fdf6e8}
.spy-list .tally{font-variant-numeric:tabular-nums}
.spy-list li.done{background:var(--pom);color:#2b1a26}
.spy-list li.done span{text-decoration:line-through;text-decoration-thickness:3px}
#spyScene{cursor:crosshair}
#spyScene img{width:100%;aspect-ratio:1698/1098;object-fit:cover;user-select:none}
.mark{position:absolute;border:5px solid var(--pom);border-radius:50%;box-shadow:0 0 0 3px #2b1a26;transform:translate(-50%,-50%);pointer-events:none;animation:popin .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes popin{from{transform:translate(-50%,-50%) scale(.3)}to{transform:translate(-50%,-50%) scale(1)}}
.panel-pom{width:90px;justify-self:end;height:auto}

/* keep jumped-to sections clear of the sticky header */
[id]{scroll-margin-top:96px}

.float-art{max-height:420px;width:auto;max-width:100%}

/* book card art */
.cover.art-cover{padding:0}
.cover.trio{padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:3px;background:#2b1a26}
.cover.trio img{position:static;width:100%;height:100%;object-fit:cover}
.cover.trio img:first-child{grid-row:span 2}
.cover > img[src*="ispy-dear-santa"]{object-position:78% center}

/* patterned bands + map */
.band{background-color:var(--paper-2);background-image:url(../images/bg-band.webp);background-size:380px 380px}
.site-head{background:var(--paper)}
.map img{aspect-ratio:16/9;object-fit:cover}

/* real photo of Crystal: a polaroid, set apart from the drawings */
.photo{background:#fff;padding:14px 14px 0;border-radius:6px;box-shadow:0 10px 30px rgba(43,26,38,.18),0 2px 6px rgba(43,26,38,.12);transform:rotate(-2deg);max-width:340px;width:100%}
.photo img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:3px}
.photo figcaption{font-family:var(--display);color:#4a2541;text-align:center;padding:10px 0 14px;font-size:1.1rem}

/* coloring studio */
.studio{display:grid;grid-template-columns:auto minmax(0,1fr) 290px;gap:20px;align-items:start}
.studio-tools{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:18px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 90px)}
.tool{display:grid;justify-items:center;gap:2px;width:70px;padding:8px 4px;border:2px solid transparent;border-radius:12px;background:none;color:var(--ink);font:700 .7rem var(--body);cursor:pointer}
.tool svg,.ibtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tool:hover{background:var(--paper)}
.tool[aria-pressed="true"]{background:var(--pom);border-color:var(--line);color:#2b1a26}
.studio-main{display:grid;gap:12px;min-width:0}
.stage{position:relative;overflow:hidden;padding:0;background:#fff;aspect-ratio:1;width:100%;max-width:min(100%,calc(100vh - 220px));justify-self:center;touch-action:none;cursor:crosshair}
.stage[data-tool="hand"]{cursor:grab}
.stage[data-tool="fill"],.stage[data-tool="gradient"],.stage[data-tool="picker"]{cursor:pointer}
#colorCanvas{display:block;width:100%;height:100%;transform-origin:0 0;user-select:none;-webkit-user-select:none}
.studio-bar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center}
.seg{display:inline-flex;border:3px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.ibtn{min-width:42px;height:38px;display:grid;place-items:center;border:0;background:none;color:var(--ink);font:800 1.1rem var(--body);cursor:pointer;padding:0 8px}
.ibtn + .ibtn{border-left:2px solid var(--line)}
.ibtn.wide{font-size:.85rem;min-width:62px;font-variant-numeric:tabular-nums}
.ibtn:disabled{opacity:.35;cursor:default}
#colorStatus{text-align:center;min-height:1.4em}
.studio-side{padding:18px;display:grid;gap:20px}
.side-block{display:grid;gap:10px}
.side-h{font-size:1.25rem}
.side-sub{font-weight:800;font-size:.8rem;color:var(--ink-soft)}
.palette{display:flex;flex-wrap:wrap;gap:7px}
.swatch{width:32px;height:32px;border-radius:50%;border:3px solid var(--line);cursor:pointer;padding:0;transition:transform .12s}
.swatch[aria-pressed="true"]{transform:scale(1.15);box-shadow:0 0 0 2px var(--card),0 0 0 5px var(--line)}
.custom{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem;cursor:pointer}
.custom input{width:40px;height:32px;border:2px solid var(--line);border-radius:8px;padding:0;background:none;cursor:pointer}
.size-row{display:flex;align-items:center;gap:12px}
.size-row input{flex:1;accent-color:var(--ginger)}
.size-dot-box{width:44px;height:44px;display:grid;place-items:center;border:2px dashed var(--ink-soft);border-radius:50%}
#sizeDot{display:block;border-radius:50%;border:2px solid var(--line)}
.toggle{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--ginger)}
.page-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.page-pick{display:grid;gap:4px;justify-items:center;padding:6px;border:2px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer;font:700 .75rem var(--body);color:var(--ink)}
.page-pick img{width:100%;height:auto;aspect-ratio:1;border-radius:8px;background:#fff}
.page-pick[aria-pressed="true"]{background:var(--pom);color:#2b1a26}
@media (max-width:1000px){
  .studio{grid-template-columns:minmax(0,1fr)}
  .studio-tools{position:static;flex-direction:row;overflow-x:auto;order:2;padding:6px;gap:4px;-webkit-overflow-scrolling:touch}
  .tool{width:62px;flex:none}
  .studio-main{order:1}
  .studio-side{order:3}
  .stage{max-width:100%}
  .page-picks{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:600px){ .page-pick span{display:none} .swatch{width:34px;height:34px} }
@media (max-width:1000px){
  .studio{gap:12px}
  .studio-main,.studio-side{display:contents}
  .stage{order:1}
  .studio-tools{order:2}
  .colors-block{order:3}
  #sizeRow{order:4}
  .studio-bar{order:5}
  #colorStatus{order:6}
  .pages-block{order:7;margin-top:12px}
  .side-block{background:var(--card);border:3px solid var(--line);border-radius:18px;padding:12px}
  .colors-block .palette{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}
  .colors-block .swatch{flex:none}
  .side-h{font-size:1.05rem}
}
#recentWrap{display:grid;gap:6px}
.tool-group{font-weight:800;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ginger);text-align:center;margin:4px 0 0}
.studio-tools{max-height:calc(100vh - 110px);overflow-y:auto}
@media (max-width:1000px){
  .studio-tools{max-height:none;overflow-y:hidden;align-items:center}
  .tool-group{writing-mode:vertical-rl;transform:rotate(180deg);margin:0 2px;flex:none}
}
@media (min-width:1001px){
  .studio-tools{display:grid;grid-template-columns:repeat(2,64px);gap:4px;max-height:none;overflow:visible;align-content:start}
  .studio-tools .tool{width:64px}
  .tool-group{grid-column:1/-1}
}