/* The character creator (src/creator.js), built from the user's mock-ups (design/camp/cabin/mockups/
   creator.webp, then cabin-v2.webp: one panel on the right): the cabin's room behind, the camper left of the
   middle, the panel with its two tabs (Dress up, Base camper) and Done. On a desk (.creator.stage) every
   place, size and colour below was measured on the mock-up's 16:9 frame (1536 x 864, "design px") and the
   frame is scaled to fit; on a phone (.creator.stack) the same parts stack at screen size. The rotate button
   is one (the user: one is cleaner than the mock-up's three), their own icon in white. */
.creator{--cr-serif:"Crimson Text","Gowun Batang",Georgia,serif;--cr-sans:"Hind","Gowun Dodum",system-ui,sans-serif;
  position:fixed;inset:0;z-index:36;overflow:hidden;color:#f7ead6;font-family:var(--cr-sans);opacity:0;animation:crIn .3s ease forwards}
@keyframes crIn{to{opacity:1}}
.creator.first{background:#0b0806}
/* from the cabin: inside its room, under its corners (the name, Back), which stay to be used */
.creator.in-host{position:absolute;z-index:5;pointer-events:none}
.creator.in-host .cr-panel,.creator.in-host .cr-rot{pointer-events:auto}
.creator button{font-family:var(--cr-sans);line-height:1}
.cr-room{position:absolute;inset:0;pointer-events:none}
.cr-room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;display:block;filter:blur(3.5px) brightness(.9);transform:scale(1.02)}
/* a scene behind instead of the room (the gate, for a newcomer): darker, so the camper and the panel read over it */
.cr-scene img{object-position:50% 45%;filter:blur(4px) brightness(.62)}
.cr-stage{position:absolute;left:0;top:0;width:1536px;height:864px;transform-origin:0 0}

/* ---- the camper, its stump in one place as it turns, and the rotate button under it ---- */
.cr-figure{position:absolute;left:358px;top:209px;width:480px;height:522px;pointer-events:none}
.cr-figure canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .16s ease}
.cr-rot{position:absolute;left:530px;top:742px;width:136px;height:62px;display:grid;place-items:center;padding:0;border:0;border-radius:14px;background:none;cursor:pointer;color:#fff;transition:transform .1s}
.cr-rot svg{width:116px;height:auto;display:block;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(0,0,0,.35));transition:filter .2s}
.cr-rot:hover svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 12px rgba(255,200,120,.7))}
.cr-rot:active{transform:scale(.94)}

/* the camper in 3D (src/fire/wardrobe3d.js): dragged round; its canvas reaches the window's edges (set in src/creator.js) */
.creator.w3d .cr-figure{pointer-events:auto;cursor:grab;touch-action:none}
.creator.w3d .cr-figure:active{cursor:grabbing}
.creator.w3d .cr-figure canvas{transition:none}
/* the 3D camper's poses, on this computer with ?fit alone (src/creator.js, kit.FITTING; the row of 2026-11-06, taken out and brought back for that on 2026-11-13) */
.cr-poses{position:absolute;left:28px;top:150px;display:grid;grid-template-columns:repeat(2,auto);gap:6px;z-index:3}
.cr-pose{min-width:104px;padding:7px 10px;border:1px solid rgba(255,214,160,.28);border-radius:10px;background:rgba(32,21,15,.86);color:#f4e2c8;font:inherit;font-size:13px;text-align:left;cursor:pointer}
.cr-pose:hover{border-color:rgba(255,214,160,.6)}
.cr-pose[aria-pressed="true"]{border-color:#e9b56c;background:rgba(92,58,30,.92)}
.creator.in-host .cr-poses{pointer-events:auto}
.creator.confirming .cr-poses{display:none}
/* Done in 3D (the user, 2026-11-13): what is round the camper goes, the panel to the right, the turn down, and in the cabin its corners and
   the camp's buttons (body.cr-done-ask); the whole camper in view (src/fire/wardrobe3d.js frame), the question beside it, right of the camper. No brings them back. */
.creator.w3d :is(.cr-panel,.cr-rot){transition:opacity .3s ease,translate .45s cubic-bezier(.2,.8,.25,1),transform .1s}
.creator.confirming :is(.cr-panel,.cr-rot){opacity:0;pointer-events:none!important}
.creator.confirming .cr-panel{translate:72px 0}
.creator.confirming .cr-rot{translate:0 40px}
body.cr-open .cb-edge{transition:opacity .3s ease,translate .45s cubic-bezier(.2,.8,.25,1)}
body.cr-open .nav-toggle{transition:left .5s var(--ease),transform .5s var(--ease),opacity .3s ease}
body.cr-done-ask :is(.page-bar,.cb-edge,.nav-toggle){opacity:0;pointer-events:none}
body.cr-done-ask .cb-edge{translate:0 -28px}
body.cr-done-ask .side{visibility:hidden}
.cr-confirm{position:absolute;left:806px;top:300px;width:372px;box-sizing:border-box;padding:28px 26px 26px;border-radius:16px;background:rgba(36,22,14,.95);border:1.5px solid rgba(214,168,112,.32);box-shadow:0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:24px;z-index:4;pointer-events:auto;opacity:0;translate:-14px 0;transition:opacity .3s ease .12s,translate .45s cubic-bezier(.2,.8,.25,1) .12s}
.cr-confirm.on{opacity:1;translate:0 0}
.cr-confirm-q{margin:0;font:500 22px/1.45 var(--cr-sans);color:#fbf0de;text-align:center;word-break:keep-all}
.cr-confirm-acts{display:flex;gap:12px;justify-content:center}
.cr-confirm-acts .cr-btn{height:54px;min-width:132px;padding:0 22px;font-size:20px}
@media (prefers-reduced-motion:reduce){.creator.w3d :is(.cr-panel,.cr-rot),.cr-confirm,body.cr-open :is(.cb-edge,.nav-toggle){transition:none}}

/* ---- the panel ---- */
.cr-panel{position:absolute;left:912px;top:73px;width:595px;height:704px;box-sizing:border-box;border-radius:18px;background:rgba(36,22,14,.95);border:1.5px solid rgba(214,168,112,.28);box-shadow:0 12px 34px rgba(0,0,0,.4)}
.cr-panel > *{position:absolute}
.cr-title{left:35px;top:30px;margin:0;font:600 30px/1 var(--cr-sans);color:#fbf0de;white-space:nowrap}
.cr-x{right:20px;top:20px;width:46px;height:46px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;background:none;color:#eadcc6;cursor:pointer}
.cr-x svg{width:26px;height:26px}
.cr-x:hover{background:rgba(255,236,205,.08);color:#fff}
/* a newcomer's name, on the title's row (2026-10-27: asked on the same screen as the look); its die for an idea */
.cr-name{right:27px;top:20px;width:262px;height:48px;display:flex;align-items:center;box-sizing:border-box;border-radius:11px;background:rgba(255,236,205,.06);border:1.5px solid rgba(255,236,205,.22);transition:border-color .15s,box-shadow .15s}
.cr-name:focus-within{border-color:#f0a44c;box-shadow:0 0 12px rgba(240,164,76,.3)}
.cr-name input{flex:1;min-width:0;height:100%;box-sizing:border-box;padding:0 4px 1px 16px;border:0;background:none;color:#fbf0de;font:500 20px/1 var(--cr-sans);outline:none}
.cr-name input::placeholder{color:#a8937c;opacity:1}
.cr-name input:focus{box-shadow:none}   /* (the field's own border shows the focus, not the camp's inset ring for inputs) */
.cr-dice{flex:none;width:44px;height:100%;display:grid;place-items:center;padding:0;border:0;border-left:1.5px solid rgba(255,236,205,.14);border-radius:0 10px 10px 0;background:none;color:#c9b296;cursor:pointer}
.cr-dice svg{width:24px;height:24px}
.cr-dice:hover{color:#ffe2b8;background:rgba(255,236,205,.06)}
.cr-dice:focus-visible{outline:2px solid var(--ember-hi);outline-offset:-3px}
.cr-name:has(input.need){border-color:#e8664a;box-shadow:0 0 12px rgba(232,102,74,.4);animation:cr-need .36s ease}
@keyframes cr-need{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
@media (prefers-reduced-motion:reduce){.cr-name:has(input.need){animation:none}}
/* the two tabs */
.cr-tabs2{left:33px;right:27px;top:83px;height:67px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cr-tab2{display:flex;align-items:center;justify-content:center;gap:13px;box-sizing:border-box;border-radius:11px;background:rgba(255,236,205,.03);border:1.5px solid rgba(255,236,205,.16);color:#e3d3bd;cursor:pointer;transition:background .15s}
.cr-tab2 svg{width:32px;height:32px;fill:#b9a48c}
.cr-tab2 span{font:500 20px/1 var(--cr-sans);white-space:nowrap}
.cr-tab2:hover{background:rgba(255,236,205,.07)}
.cr-tab2[aria-selected="true"]{background:#4f301a;border:2.5px solid #f0a44c;color:#ffe2b8;box-shadow:0 0 14px rgba(240,164,76,.35)}
.cr-tab2[aria-selected="true"] svg{fill:#f7a541}
.creator:not(.on-base) .cr-base,.creator.on-base .cr-dress{display:none}
.cr-dress,.cr-base{left:0;right:0;top:0;bottom:0;pointer-events:none}
.cr-dress > *,.cr-base > *{position:absolute;pointer-events:auto}
/* Dress up: the slots, the things (the row of hair colours under them went on 2026-11-08 night) */
.cr-cats{left:37px;top:175px;width:523px;height:90px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.cr-cat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;box-sizing:border-box;border-radius:11px;background:rgba(255,236,205,.03);border:1.5px solid rgba(255,236,205,.1);color:#b8aa9a;cursor:pointer;overflow:hidden}
.cr-cat svg{width:34px;height:34px;fill:#8e7e71;display:block}
.cr-cat span{font:500 17px/1 var(--cr-sans);white-space:nowrap}
html[lang="en"] .cr-cat span{font-size:14px}
/* (six tabs, the 3D wardrobe's with its Costume tab, 2026-11-11: the same row, each tab narrower) */
html[lang="en"] .cr-cats.many .cr-cat span{font-size:12px}
.cr-cats.many{gap:6px}
.cr-cat:hover{color:#e8dccb}
.cr-cat:hover svg{fill:#b9a996}
.cr-cat[aria-selected="true"]{background:#4a2c18;border:2.5px solid #f0a44c;color:#f3c27a}
.cr-cat[aria-selected="true"] svg{fill:#f7a541}
.cr-h3{margin:0;left:38px;font:500 18px/1 var(--cr-sans);color:#d9c6ae;white-space:nowrap}
.cr-h3.items{top:287px}
.cr-grid{left:38px;top:321px;width:518px;max-height:290px;overflow-y:auto;display:grid;grid-template-columns:repeat(4,116px);gap:16px 18px;align-content:start;scrollbar-width:thin}
.cr-item{position:relative;width:116px;height:110px;padding:0;border:1.5px solid rgba(255,236,205,.12);border-radius:11px;background:#3d281d;cursor:pointer;display:grid;place-items:center;overflow:hidden;transition:background .15s}
.cr-item img{width:104px;height:104px;display:block;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-select:none}
.cr-item canvas{width:88px;height:88px;display:block}
.cr-item:hover{background:#4a3125}
.cr-item[aria-pressed="true"]{border:2.5px solid #f0a44c;background:#4a2f20}
/* a thing's colours under its card (the user, 2026-11-07): square chips, the one worn framed, those not had yet locked */
.cr-cell{display:flex;flex-direction:column;align-items:center;gap:9px}
.cr-chips{display:flex;gap:9px}
.cr-chip{position:relative;width:28px;height:28px;padding:0;box-sizing:border-box;border:1.5px solid rgba(255,236,205,.32);border-radius:6px;cursor:pointer}
.cr-chip[aria-pressed="true"]{border:2.5px solid #f0a44c;box-shadow:0 0 8px rgba(240,164,76,.45)}
.cr-chip.locked::after{content:"";position:absolute;inset:0;border-radius:4px;background:rgba(14,9,6,.38) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 11V8.2a4 4 0 0 1 8 0V11' fill='none' stroke='%23fff3e0' stroke-width='2.4'/%3E%3Crect x='5.5' y='10.5' width='13' height='10' rx='2.2' fill='%23fff3e0'/%3E%3C/svg%3E") center/15px no-repeat}
.cr-chip:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}
/* (four chips at 28 px are wider than a card, and under the last card of a row the fourth was cut off by the panel's edge: a row of four is drawn smaller, 107 px in all) */
.cr-chips:has(.cr-chip:nth-child(4)){gap:5px}
.cr-chips:has(.cr-chip:nth-child(4)) .cr-chip{width:23px;height:23px}
.cr-chips:has(.cr-chip:nth-child(4)) .cr-chip.locked::after{background-size:13px}
/* socks on or off, on the Shoes tab's heading line, at the grid's right edge (the user, 2026-11-07); a hoodie's hood up or down the same on the Top tab (2026-11-10) */
:is(.cr-socks,.cr-hood){top:278px;right:37px;height:34px;box-sizing:border-box;padding:0 10px 0 14px;display:flex;align-items:center;gap:10px;border:1.5px solid rgba(255,236,205,.18);border-radius:17px;background:rgba(255,236,205,.04);color:#d9c6ae;font:500 16px/1 var(--cr-sans);cursor:pointer}
:is(.cr-socks,.cr-hood)[hidden]{display:none}
:is(.cr-socks,.cr-hood):hover{border-color:rgba(255,236,205,.34)}
:is(.cr-socks,.cr-hood) i{position:relative;width:34px;height:18px;border-radius:9px;background:rgba(255,236,205,.16);transition:background .15s}
:is(.cr-socks,.cr-hood) i::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#cdbba3;transition:transform .15s,background .15s}
:is(.cr-socks,.cr-hood)[aria-pressed="true"]{border-color:rgba(240,164,76,.6);color:#fbf0de}
:is(.cr-socks,.cr-hood)[aria-pressed="true"] i{background:#c9853e}
:is(.cr-socks,.cr-hood)[aria-pressed="true"] i::after{transform:translateX(16px);background:#fff3e0}
:is(.cr-socks,.cr-hood):focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}
/* a colour not had yet: the question over the panel, the camper wearing it beside */
.cr-buy{inset:0;z-index:5;border-radius:18px;background:rgba(20,12,8,.74);display:grid;place-items:center}
.cr-buy-box{width:450px;box-sizing:border-box;padding:30px 30px 26px;border-radius:16px;background:#2c1b11;border:1.5px solid rgba(214,168,112,.35);box-shadow:0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:22px}
.cr-buy-q{margin:0;font:500 20px/1.5 var(--cr-sans);color:#fbf0de;text-align:center;word-break:keep-all}
.cr-buy-item{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 16px;border-radius:10px;background:rgba(255,236,205,.06);font:500 18px/1.25 var(--cr-sans);color:#e9d8c0}
.cr-buy-item b{color:#ffcf8a;font-weight:700;white-space:nowrap}
.cr-buy-acts{display:flex;gap:12px;justify-content:center}
.cr-buy-acts .cr-btn{height:54px;min-width:150px;padding:0 22px;font-size:19px}
.cr-btn.quiet{background:rgba(255,236,205,.07);border:1.5px solid rgba(255,236,205,.26);color:#f1e3cd}
.cr-btn.quiet:hover{background:rgba(255,236,205,.13)}
.cr-btn[disabled]{opacity:.5;cursor:default;filter:saturate(.35)}
.cr-btn[disabled]:active{transform:none}
.creator.stack .cr-buy{position:fixed;z-index:20;border-radius:0}
.creator.stack .cr-buy-box{width:calc(100% - 32px)}
/* the one you have: ticked (the mock-up's cream disc) */
.cr-item[aria-pressed="true"]::after,.cr-card[aria-pressed="true"]::after{content:"";position:absolute;right:6px;bottom:6px;width:30px;height:30px;border-radius:50%;background:#f5ecdc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%233a2414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:0 2px 5px rgba(0,0,0,.4)}
/* Base camper: the portraits */
.cr-cards{left:41px;top:203px;width:516px;max-height:400px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fit,158px);justify-content:space-evenly;gap:26px 0;align-content:start;scrollbar-width:thin}
.cr-card{position:relative;width:158px;height:163px;padding:0;border:1.5px solid rgba(255,236,205,.16);border-radius:12px;background:#1e2440;overflow:hidden;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.cr-skin{left:41px;top:420px;width:516px;display:flex;align-items:center;gap:18px;color:#d9c6ae;font:500 18px/1 var(--cr-sans);white-space:nowrap}
.cr-skin input{flex:1;height:16px;margin:0;-webkit-appearance:none;appearance:none;background:var(--cr-tones);border:1.5px solid rgba(255,236,205,.22);border-radius:8px;cursor:pointer}
.cr-skin input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff6ea;border:2.5px solid #c9853e;box-shadow:0 1px 5px rgba(0,0,0,.45)}
.cr-skin input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff6ea;border:2.5px solid #c9853e;box-shadow:0 1px 5px rgba(0,0,0,.45)}
.cr-skin input:focus-visible{outline:2px solid #f0a44c;outline-offset:4px}
.cr-card img{display:block;width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .15s}
.cr-card:hover img,.cr-card[aria-pressed="true"] img{opacity:1}
.cr-card:hover{transform:translateY(-2px)}
.cr-card[aria-pressed="true"]{border:3px solid #f2993c;box-shadow:0 0 16px rgba(242,153,60,.4)}
/* a slot or a colour with no drawings yet: dimmed and struck through in red (the user, 2026-10-15) */
.soon{cursor:default!important}
.cr-cat.soon svg,.cr-cat.soon span{opacity:.42}
.cr-cat.soon:hover{color:#b8aa9a}
.cr-cat.soon:hover svg{fill:#8e7e71}
.soon::after{content:"";position:absolute;left:-14%;right:-14%;top:50%;height:3px;margin-top:-1.5px;background:#d9382a;border-radius:2px;transform:rotate(-41deg);pointer-events:none;box-shadow:0 0 4px rgba(0,0,0,.4)}
/* Done (a newcomer's Base camper: Next) */
.cr-acts{left:420px;top:623px}
.cr-btn{height:62px;min-width:156px;box-sizing:border-box;padding:0 28px;border:0;border-radius:12px;font:600 23px/1 var(--cr-sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;transition:transform .08s}
.cr-btn.primary{background:linear-gradient(#f6b85e,#f29a3e);color:#3a1a05;box-shadow:inset 0 2px 0 rgba(255,235,190,.7),inset 0 -3px 0 rgba(150,70,10,.45),0 6px 16px rgba(0,0,0,.35)}
.cr-btn.primary:hover{background:linear-gradient(#ffc06a,#f7a44a)}
.cr-btn:active{transform:translateY(1px)}
.cr-rot:focus-visible,.cr-x:focus-visible,.cr-tab2:focus-visible,.cr-cat:focus-visible,.cr-item:focus-visible,.cr-card:focus-visible,.cr-btn:focus-visible{outline:2px solid var(--ember-hi);outline-offset:3px}

/* ---- a phone, or a window near square: the camper on top, the panel under it, Done at the bottom ---- */
.creator.stack .cr-stage{position:absolute;inset:0;width:auto;height:auto;transform:none!important;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;display:flex;flex-direction:column;gap:10px;box-sizing:border-box;padding:calc(var(--safe-t) + 10px) 12px calc(var(--safe-b) + 92px);pointer-events:auto}
.creator.in-host.stack .cr-stage{padding-top:calc(var(--safe-t) + 74px)}
.creator.first.stack .cr-scene img{object-position:50% 40%}
.creator.first.stack .cr-room::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,8,6,.2),rgba(11,8,6,.6) 40%,rgba(11,8,6,.75))}
.creator.stack .cr-figure{position:relative;left:auto;top:auto;width:auto;height:32vh;min-height:190px;flex:none}
.creator.stack .cr-rot{position:relative;left:auto;top:auto;align-self:center;flex:none;width:104px;height:46px;margin-top:-6px}
.creator.stack .cr-rot svg{width:86px}
/* (the 3D camper's poses with ?fit: one row under the camper, scrolled sideways; laid where the desk has them they covered the panel's title, the name and the tabs) */
.creator.stack .cr-poses{position:relative;left:auto;top:auto;flex:none;display:flex;gap:6px;margin:0 -12px;padding:0 12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.creator.stack .cr-poses::-webkit-scrollbar{display:none}
.creator.stack .cr-pose{flex:none;min-width:0;white-space:nowrap}
/* (Done on a phone: the camper alone, as tall as the screen leaves, the question under it where Done was) */
.creator.stack.confirming :is(.cr-panel,.cr-rot){display:none}
.creator.stack.confirming .cr-stage,.creator.in-host.stack.confirming .cr-stage{overflow:hidden;padding-top:calc(var(--safe-t) + 16px)}
.creator.stack.confirming .cr-figure{height:calc(100% - 190px)}
.creator.stack .cr-confirm{position:fixed;left:12px;right:12px;top:auto;bottom:calc(var(--safe-b) + 12px);width:auto;padding:20px 16px 16px;gap:16px;translate:0 14px}
.creator.stack .cr-confirm.on{translate:0 0}
.creator.stack .cr-confirm-q{font-size:18px}
.creator.stack .cr-confirm-acts .cr-btn{flex:1;max-width:200px;min-width:0;height:50px;font-size:18px}
.creator.stack .cr-panel{position:relative;left:auto;top:auto;width:auto;height:auto;flex:none;padding:16px 14px 18px;display:flex;flex-direction:column;gap:12px}
.creator.stack .cr-panel > *,.creator.stack .cr-dress > *,.creator.stack .cr-base > *{position:relative;left:auto;right:auto;top:auto;bottom:auto}
.creator.stack .cr-dress,.creator.stack .cr-base{display:flex;flex-direction:column;gap:12px;pointer-events:auto}
.creator.stack:not(.on-base) .cr-base,.creator.stack.on-base .cr-dress{display:none}
.creator.stack .cr-title{font-size:22px;padding-right:44px}
.creator.stack .cr-name{width:auto;height:50px}
.creator.stack .cr-name input{font-size:17px}
.creator.stack .cr-x{position:absolute;right:8px;top:8px;width:40px;height:40px}
.creator.stack .cr-tabs2{height:52px;gap:8px}
.creator.stack .cr-tab2{gap:8px}
.creator.stack .cr-tab2 svg{width:24px;height:24px}
.creator.stack .cr-tab2 span{font-size:15px}
.creator.stack .cr-cats{width:auto;height:64px;gap:5px}
.creator.stack .cr-cat{gap:6px}
.creator.stack .cr-cat svg{width:24px;height:24px}
.creator.stack .cr-cat span{font-size:12.5px}
.creator.stack .cr-h3{font-size:15px}
.creator.stack :is(.cr-socks,.cr-hood){align-self:flex-start;height:32px;font-size:14px}
.creator.stack .cr-grid{width:auto;max-height:none;grid-template-columns:repeat(4,1fr);gap:10px}
.creator.stack .cr-item{width:auto;height:auto;aspect-ratio:116/110}
.creator.stack .cr-item img{width:92%;height:auto;aspect-ratio:1}
.creator.stack .cr-item canvas{width:72%;height:auto;aspect-ratio:1}
.creator.stack .cr-skin{width:auto;font-size:15px;gap:14px}
.creator.stack .cr-cards{width:auto;max-height:none;grid-template-columns:repeat(auto-fit,calc((100% - 24px) / 3));justify-content:space-evenly;gap:12px 0}
.creator.stack .cr-card{width:auto;height:auto;aspect-ratio:158/163}
.creator.stack .cr-item[aria-pressed="true"]::after,.creator.stack .cr-card[aria-pressed="true"]::after{width:24px;height:24px;right:4px;bottom:4px;background-size:16px}
.creator.stack .cr-acts{position:fixed;left:12px;right:12px;bottom:calc(var(--safe-b) + 12px);top:auto;display:flex;justify-content:flex-end;pointer-events:auto}
.creator.stack .cr-btn{flex:1;max-width:240px;height:54px;min-width:0;font-size:19px}