:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18181b;background:#fafafa;font-synthesis:none;--line:#e4e4e7;--muted:#71717a;--blue:#0078fe;--focus:#0078fe}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #0078fe70;outline-offset:3px}button svg{width:17px;height:17px;display:block}button [data-icon]{display:inline-flex}button{touch-action:manipulation}[hidden]{display:none!important}.header{height:84px;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:white}.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;font-size:23px;font-weight:650;letter-spacing:-1px}.brand>span{display:flex;align-items:center}.brand-divider{font-weight:300;color:#c7c7ce;margin:0 12px}.brand-light{font-weight:450;font-size:21px}.header-actions{display:flex;align-items:center;gap:13px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:white;border-radius:8px;min-height:39px;padding:9px 13px;font-size:14px;font-weight:550}.button:hover{background:#f4f4f5}.button.quiet{border-color:transparent;color:#52525b}.button.primary{background:#18181b;color:white;border-color:#18181b}.button.primary:hover{background:#333338}.export-wrap{position:relative}.export-menu{position:absolute;right:0;top:calc(100% + 9px);z-index:10;background:white;border:1px solid var(--line);border-radius:12px;padding:6px;min-width:232px;box-shadow:0 12px 36px #18181b15}.menu-title{padding:10px;font-size:12px;color:var(--muted)}.export-menu button{display:flex;width:100%;align-items:center;justify-content:space-between;border:0;border-radius:6px;background:white;padding:10px;text-align:left}.export-menu button:hover{background:#f4f4f5}.export-menu strong,.export-menu small{display:block}.export-menu strong{font-size:14px;font-weight:550}.export-menu small{font-size:12px;color:var(--muted);margin-top:4px}.export-menu p{font-size:12px;color:var(--muted);margin:8px 10px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 390px;min-height:100dvh;max-width:1800px;margin:auto}.stage{padding:32px 40px 24px;display:flex;flex-direction:column;min-width:0;background:#f7f7f8}.stage-heading{display:flex;align-items:center;justify-content:space-between}.stage-heading h1{font-size:14px;font-weight:500;margin:0;color:#52525b}.stage-heading>span{font-size:12px;letter-spacing:.04em;color:#929299}.artboard-wrap{flex:1;display:flex;align-items:center;justify-content:center;min-height:440px;padding:40px 16px 30px}.artboard{background:white;width:min(100%,560px);aspect-ratio:1;border-radius:3px;box-shadow:0 2px 6px #18181b04,0 0 0 1px #18181b08;position:relative;overflow:hidden}.artboard.transparent{background-color:white;background-image:linear-gradient(45deg,#f2f2f3 25%,transparent 25%),linear-gradient(-45deg,#f2f2f3 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f2f2f3 75%),linear-gradient(-45deg,transparent 75%,#f2f2f3 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}#preview{width:100%;height:100%;display:flex;align-items:center;justify-content:center}#preview>svg{width:100%;height:100%;display:block}.loading{font-size:14px;color:var(--muted)}.stage-bottom{display:flex;flex-direction:column;align-items:center;gap:15px}.canvas-tools{display:flex;align-items:center;background:white;border:1px solid var(--line);padding:4px;border-radius:10px;box-shadow:0 2px 4px #18181b03}.tool{border:0;background:transparent;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;border-radius:6px;padding:8px 11px;color:#52525b}.tool:hover{background:#f4f4f5}.tool[aria-pressed=true]#flip{background:#eaf3ff;color:#0065d5}.tool-divider{height:19px;width:1px;background:var(--line);margin:0 3px}.stage-bottom p{font-size:12px;color:#8b8b94;margin:0;min-height:18px}.controls{display:flex;flex-direction:column;background:white;border-left:1px solid var(--line);height:100dvh;min-height:660px}.controls-heading{padding:29px 24px 24px}.controls-heading h2{font-size:19px;letter-spacing:-.55px;font-weight:600;margin:0 0 9px}.controls-heading p{font-size:13px;color:var(--muted);margin:0;line-height:1.5}.main-tabs{display:flex;margin:0 24px;background:#f4f4f5;padding:4px;border-radius:8px;gap:2px}.main-tabs button{flex:1;border:0;background:transparent;padding:8px 5px;border-radius:5px;font-size:14px;color:var(--muted);font-weight:500}.main-tabs button[aria-selected=true]{background:white;color:#18181b;box-shadow:0 1px 3px #00000014}.panel-scroll{padding:25px 24px;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#ddd transparent}.section-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}.section-label h3{font-size:14px;font-weight:550;margin:0}.section-label>span{font-size:12px;color:var(--muted)}.options{display:grid;gap:9px}.poses{grid-template-columns:repeat(2,minmax(0,1fr))}.option{padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:white;border:1px solid var(--line);border-radius:8px;min-width:0;position:relative;transition:border-color .12s,background .12s}.option:hover{background:#fafafa;border-color:#a1a1aa}.option[aria-pressed=true]{border-color:#18181b;box-shadow:0 0 0 1px #18181b;background:#fafafa}.option[aria-pressed=true]:after{content:"";position:absolute;right:7px;top:7px;width:5px;height:5px;border-radius:50%;background:#18181b}.option .thumb{width:100%;display:block;aspect-ratio:1.45;padding:5px 13px 0}.thumb svg{width:100%;height:100%;display:block}.option .option-label{font-size:12px;line-height:1.25;color:#71717a;margin:0 3px 10px}.option[aria-pressed=true] .option-label{color:#18181b}.compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.compact .option{min-height:78px}.compact .thumb{aspect-ratio:1.2;padding:7px 8px 2px}.compact .option-label{font-size:11px;margin-bottom:8px;overflow-wrap:anywhere}.none-icon{font-size:24px;color:#a1a1aa;display:flex;align-items:center;justify-content:center;height:45px}.following{margin-top:28px}.colour-section{border-top:1px solid var(--line);padding:21px 24px 19px}.hex-label{font-size:11px;color:#a1a1aa;letter-spacing:.08em}.colour-row{display:flex;align-items:center;gap:9px}.swatches{display:flex;gap:10px;flex:1}.swatch{width:29px;height:29px;padding:0;border-radius:50%;border:3px solid white;box-shadow:0 0 0 1px transparent;position:relative;flex:none}.swatch:hover{box-shadow:0 0 0 1px #d4d4d8}.swatch[aria-pressed=true]{box-shadow:0 0 0 1px #18181b}.custom-colour{position:relative;display:flex;align-items:center;justify-content:center;border:1px dashed #c7c7ce;border-radius:50%;width:28px;height:28px;flex:none;overflow:hidden;color:#71717a}.custom-colour svg{width:15px;height:15px}.custom-colour input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.custom-colour:focus-within{outline:3px solid #0078fe70;outline-offset:3px}.hex-row{display:flex;align-items:center;gap:8px;margin-top:17px}.colour-dot{width:9px;height:9px;border-radius:3px;background:var(--blue)}#hex{font-family:ui-monospace,SFMono-Regular,monospace;font-size:12px;border:0;background:transparent;width:73px;color:#52525b;padding:4px 0;text-transform:uppercase}.hex-row>span:last-child{font-size:12px;color:#a1a1aa;margin-left:auto}.controls-footer{border-top:1px solid #f0f0f2;padding:15px 24px;font-size:12px;color:#929299;display:flex;align-items:center;gap:8px}.tiny-blob{width:7px;height:7px;border-radius:40%;background:#0078fe}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:9px;background:#18181b;color:white;box-shadow:0 4px 20px #0002;font-size:14px;z-index:20;max-width:90vw}.error{padding:24px;text-align:center;font-size:14px;line-height:1.6;color:#b91c1c}@media(min-width:1500px){.artboard{width:min(100%,660px)}.stage{padding-left:60px;padding-right:60px}}@media(max-width:1000px){.header{padding:0 24px}.workspace{grid-template-columns:minmax(0,1fr) 350px}.stage{padding:28px 24px}.controls-heading,.panel-scroll,.colour-section{padding-left:20px;padding-right:20px}.main-tabs{margin:0 20px}.artboard-wrap{padding:28px 0;min-height:330px}.swatches{gap:7px}.swatch{width:27px;height:27px}}@media(max-width:740px){.header{height:70px;padding:0 18px}.brand{font-size:21px;gap:8px}.brand img{width:29px;height:29px}.brand-light{font-size:18px}.brand-divider{margin:0 8px}.header-actions{gap:4px}.button.quiet{padding:8px}.button.quiet>span:last-child{display:none}.workspace{display:flex;flex-direction:column;min-height:0}.stage{padding:20px 20px 22px}.stage-heading>span{font-size:11px}.artboard-wrap{min-height:0;padding:22px 15px}.artboard{max-width:370px}.stage-bottom{gap:10px}.controls{height:auto;min-height:0;border-left:0;border-top:1px solid var(--line)}.controls-heading{padding:23px 24px 18px}.main-tabs{margin:0 24px}.panel-scroll{padding:23px 24px;overflow:visible;min-height:300px}.poses{grid-template-columns:repeat(4,minmax(0,1fr))}.option .thumb{padding:0 3px;aspect-ratio:1.1}.compact{grid-template-columns:repeat(5,minmax(0,1fr))}.colour-section{padding:22px 24px}.swatches{flex:0;gap:14px}.colour-row{gap:16px}.swatch{width:30px;height:30px}.hex-row>span:last-child{margin-left:12px}.controls-footer{padding:16px 24px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-width:380px){.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.swatches{gap:8px}.colour-row{gap:10px}.brand-light{font-size:16px}.button.primary{padding:8px 10px}.poses{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Canvas-first controls: pose arrows beside the character, colour bar underneath. */
.stage-heading{gap:12px;min-height:44px}
.stage-heading .canvas-tools{box-shadow:none}
.artboard-wrap{gap:22px;padding:28px 0 18px}
.pose-nav{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:white;display:flex;align-items:center;justify-content:center;color:#3f3f46;box-shadow:0 1px 2px #18181b0a;transition:background .12s,border-color .12s,transform .12s}
.pose-nav:hover{background:#f4f4f5;border-color:#d4d4d8}
.pose-nav:active{transform:scale(.94)}
.pose-nav svg{width:20px;height:20px}
.pose-indicator{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:20px}
#pose-label{font-size:12px;color:#71717a;font-variant-numeric:tabular-nums}
.pose-dots{display:flex;gap:2px}
.pose-dot{width:18px;height:18px;padding:0;border:0;background:transparent;display:flex;align-items:center;justify-content:center}
.pose-dot:after{content:"";width:6px;height:6px;border-radius:50%;background:#d4d4d8;transition:background .12s,width .12s}
.pose-dot:hover:after{background:#a1a1aa}
.pose-dot[aria-pressed=true]:after{background:#18181b;width:16px;border-radius:3px}
.colour-bar{align-self:center;display:flex;align-items:center;gap:12px;background:white;border:1px solid var(--line);border-radius:999px;padding:9px 18px 9px 20px;box-shadow:0 4px 16px #18181b0a}
.colour-bar .swatches{flex:none;gap:9px}
.colour-bar .swatch{width:32px;height:32px}
.colour-bar .custom-colour{width:30px;height:30px}
.colour-bar-divider{width:1px;height:22px;background:var(--line)}
.colour-bar #hex{width:70px}
/* Face previews sit on the body colour. */
.face .thumb{background:var(--body-colour,#0078fe);border-radius:6px;margin:6px 6px 0;width:calc(100% - 12px);padding:5px}
.face .none-icon{color:#ffffffcc;height:100%}
/* Object, hat and effect colours. */
.item-colours{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.original-chip{border:1px solid var(--line);background:white;border-radius:999px;font-size:12px;padding:3px 10px;color:#52525b;min-height:26px}
.original-chip:hover{background:#f4f4f5}
.original-chip[aria-pressed=true]{border-color:#18181b;color:#18181b;box-shadow:0 0 0 1px #18181b}
.swatch.small{width:24px;height:24px;border-width:2px}
.custom-colour.small{width:24px;height:24px}
.custom-colour.small svg{width:13px;height:13px}
.custom-colour.active{border-style:solid;border-color:#18181b}
@media(max-width:1000px){.artboard-wrap{gap:14px}.colour-bar{gap:9px;padding:8px 14px}.colour-bar .swatch{width:28px;height:28px}.colour-bar .swatches{gap:6px}}
@media(max-width:740px){.artboard-wrap{gap:8px;padding:16px 0 12px}.pose-nav{width:36px;height:36px}.pose-indicator{margin-bottom:14px}.colour-bar{flex-wrap:wrap;justify-content:center;border-radius:14px;max-width:100%}.colour-bar-label,.colour-bar-divider{display:none}.colour-bar .swatch{width:30px;height:30px}}
@media(max-width:380px){.colour-bar .swatch{width:26px;height:26px}.colour-bar .swatches{gap:5px}.colour-bar #hex{width:62px}}
/* The stage fills the viewport; the artboard takes whatever square fits between the arrows. */
.stage{height:100dvh;min-height:640px}
.artboard-wrap{flex:1;min-height:260px;container-type:size}
.artboard-wrap .artboard{flex:none;width:min(560px,100cqh,100cqw - 132px)}
@media(min-width:1500px){.artboard-wrap .artboard{width:min(680px,100cqh,100cqw - 132px)}}
@media(max-width:1000px){.artboard-wrap .artboard{width:min(560px,100cqh,100cqw - 116px)}}
@media(max-width:740px){.stage{height:auto;min-height:0}.artboard-wrap{flex:none;min-height:0;container-type:normal}.artboard-wrap .artboard{width:min(370px,100% - 88px)}}
/* No top bar: actions live under the colour bar, centred on the character. */
.colour-bar{padding:6px 16px 6px 6px}
.colour-target{display:flex;background:#f4f4f5;border-radius:999px;padding:3px;gap:2px;margin-right:4px}
.colour-target button{border:0;background:transparent;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;color:var(--muted)}
.colour-target button[aria-selected=true]{background:white;color:#18181b;box-shadow:0 1px 3px #00000014}
.swatch.checker{background-color:white;background-image:linear-gradient(45deg,#d4d4d8 25%,transparent 25%),linear-gradient(-45deg,#d4d4d8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d4d4d8 75%),linear-gradient(-45deg,transparent 75%,#d4d4d8 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;box-shadow:0 0 0 1px #e4e4e7}
.swatch.checker[aria-pressed=true]{box-shadow:0 0 0 1px #18181b}
.swatch[data-colour="#FFFFFF"],.swatch[data-colour="#F4F4F5"]{box-shadow:0 0 0 1px #e4e4e7}
.swatch[data-colour="#FFFFFF"][aria-pressed=true],.swatch[data-colour="#F4F4F5"][aria-pressed=true]{box-shadow:0 0 0 1px #18181b}
#hex::placeholder{color:#a1a1aa;text-transform:none}
.actions{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px}
.actions .export-menu{top:auto;bottom:calc(100% + 9px)}
@media(max-width:740px){.colour-bar{padding:8px}.colour-target{width:100%;margin:0 0 4px}.colour-target button{flex:1}.actions{margin-top:12px}}
/* v5: icon-only controls, less copy. */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.stage-heading{justify-content:flex-end;min-height:40px}
.icon-button{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:white;border-radius:8px;color:#3f3f46;transition:background .12s,border-color .12s}
.icon-button:hover{background:#f4f4f5;border-color:#d4d4d8}
.icon-button svg{width:18px;height:18px}
.icon-button[aria-pressed=true]{background:#eaf3ff;border-color:#bcd9ff;color:#0065d5}
.icon-button.primary{background:#18181b;border-color:#18181b;color:white}
.icon-button.primary:hover{background:#333338}
.actions{gap:6px}
.controls .main-tabs{margin-top:24px}
.original-chip{width:26px;height:26px;min-height:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.original-chip svg{width:14px;height:14px}
.pose-indicator{gap:0}
.section-label{margin-bottom:12px}
/* v6: one segmented control (sidebar tabs + colour target) with a sliding indicator. */
.segmented{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;padding:3px;border-radius:8px;background:#f4f4f5;isolation:isolate}
.segmented::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n,2));border-radius:6px;background:white;box-shadow:0 1px 2px #18181b14,0 1px 3px #18181b0d;transform:translateX(calc(100% * var(--i,0)));transition:transform .28s cubic-bezier(.3,.9,.3,1)}
.segmented button,.segmented button[aria-selected=true]{background:transparent;box-shadow:none;border:0;border-radius:6px;padding:7px 14px;font-size:13px;font-weight:500;color:var(--muted);transition:color .2s}
.segmented button[aria-selected=true]{color:#18181b}
.segmented button:hover{color:#3f3f46}
.main-tabs.segmented{margin:24px 24px 0}
.colour-target.segmented{margin-right:4px}
.colour-bar{border-radius:12px;padding:6px 14px 6px 6px}
@media(max-width:1000px){.main-tabs.segmented{margin:20px 20px 0}}
@media(max-width:740px){.main-tabs.segmented{margin:20px 24px 0}.colour-target.segmented{margin:0 0 4px}}
/* Motion: quick, physical, and off for reduced-motion users. */
.icon-button,.button,.pose-nav,.option,.swatch,.original-chip,.custom-colour,.pose-dot{transition:transform .14s cubic-bezier(.3,.9,.3,1),background-color .15s,border-color .15s,box-shadow .15s,color .15s}
.icon-button:active,.button:active,.pose-nav:active,.option:active,.original-chip:active{transform:scale(.95)}
.swatch:hover,.custom-colour:hover{transform:scale(1.08)}
.swatch:active{transform:scale(.94)}
.fade-in{animation:fade-in .22s cubic-bezier(.3,.9,.3,1)}
@keyframes fade-in{from{opacity:0;transform:translateY(4px)}}
.export-menu:not([hidden]){animation:menu-in .16s cubic-bezier(.3,.9,.3,1);transform-origin:bottom right}
@keyframes menu-in{from{opacity:0;transform:translateY(4px) scale(.97)}}
.toast:not([hidden]){animation:toast-in .2s cubic-bezier(.3,.9,.3,1)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}}
@media(prefers-reduced-motion:reduce){.segmented::before{transition:none}.fade-in,.export-menu:not([hidden]),.toast:not([hidden]){animation:none}.swatch:hover,.custom-colour:hover{transform:none}}
/* v7: rounder controls; accent = elephant blue. */
:root{--accent:#0078fe;--accent-hover:#006ae0;--accent-soft:#e6f1ff}
button:focus-visible,a:focus-visible,input:focus-visible{outline-color:#0078fe70}
/* Pills for buttons and segmented controls, soft rounded cards for options and panels. */
.icon-button,.button,.segmented,.original-chip{border-radius:999px}
.segmented::before,.segmented button,.segmented button[aria-selected=true]{border-radius:999px}
.icon-button{width:42px;height:42px}
.colour-bar{border-radius:999px}
.option{border-radius:14px}
.face .thumb{border-radius:10px}
.artboard{border-radius:18px}
.export-menu{border-radius:16px}
.export-menu button{border-radius:10px}
.toast{border-radius:999px}
/* Accent. */
.icon-button.primary,.button.primary{background:var(--accent);border-color:var(--accent);color:white}
.icon-button.primary:hover,.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.icon-button[aria-pressed=true]{background:var(--accent-soft);border-color:#b3d6ff;color:var(--accent)}
.option[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:white}
.option[aria-pressed=true]:after{background:var(--accent)}
.option[aria-pressed=true] .option-label{color:var(--accent)}
.swatch[aria-pressed=true],.swatch.checker[aria-pressed=true],.swatch[data-colour="#FFFFFF"][aria-pressed=true],.swatch[data-colour="#F4F4F5"][aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}
.original-chip[aria-pressed=true]{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.custom-colour.active{border-color:var(--accent)}
.segmented button[aria-selected=true]{color:var(--accent)}
.pose-dot[aria-pressed=true]:after{background:var(--accent);border-radius:999px}
@media(max-width:740px){.colour-bar{border-radius:24px}}
/* v8 */
/* Flip is an action, not a toggle: no highlighted state. */
.icon-button[aria-pressed=true]{background:white;border-color:var(--line);color:#3f3f46}
.icon-button[aria-pressed=true]:hover{background:#f4f4f5;border-color:#d4d4d8}
/* Export menu: file types only. */
.actions .export-menu{min-width:0;width:112px;padding:5px;left:auto;right:0}
.export-menu button{justify-content:center;padding:9px 12px;font-size:14px;font-weight:550;border-radius:999px}
/* Every swatch gets a hairline so pale colours read on white. */
.swatch{box-shadow:inset 0 0 0 1px #0000000f}
.swatch:hover{box-shadow:inset 0 0 0 1px #0000000f}
.swatch[aria-pressed=true],.swatch.checker[aria-pressed=true],.swatch[data-colour="#FFFFFF"][aria-pressed=true],.swatch[data-colour="#F4F4F5"][aria-pressed=true]{box-shadow:0 0 0 2px var(--accent),inset 0 0 0 1px #0000000f}
.swatch[data-colour="#FFFFFF"],.swatch[data-colour="#F4F4F5"]{box-shadow:inset 0 0 0 1px #00000017}
/* Icon tabs in the colour bar. */
.colour-target.segmented button{padding:7px 14px;display:flex;align-items:center;justify-content:center}
.colour-target.segmented svg{width:18px;height:18px;display:block}
@media(max-width:740px){.colour-target.segmented{width:auto;margin:0}.colour-bar{flex-wrap:wrap}}
/* v10: no hex field; a custom colour fills the + button. */
.colour-bar{padding-right:8px}
#custom-colour.active{border:2px solid white;box-shadow:0 0 0 2px var(--accent);color:transparent}
/* ============================================================
   v11: shadcn "Luma" (preset b1VlIvYW: base-luma, neutral, radius .875rem, Geist, Lucide-style icons).
   Values copied from the generated components; accent stays the elephant blue.
   ============================================================ */
@font-face{font-family:Geist;src:url(./assets/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --background:#fff;--foreground:#0a0a0a;--muted:#f5f5f5;--muted-foreground:#737373;--border:#e5e5e5;--input:#e5e5e5;--ring:#a1a1a1;
  --radius:.875rem;--radius-xl:calc(var(--radius)*1.4);--radius-2xl:calc(var(--radius)*1.8);--radius-3xl:calc(var(--radius)*2.2);--radius-4xl:calc(var(--radius)*2.6);
  --line:var(--border);--muted-fg:var(--muted-foreground);
  --ring-focus:0 0 0 3px #0078fe4d;
  --shadow-lg:0 0 0 1px #0a0a0a0d,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
  font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--foreground);-webkit-font-smoothing:antialiased
}
button:focus-visible,a:focus-visible,input:focus-visible,[role=slider]:focus-visible{outline:none;box-shadow:var(--ring-focus)}
/* Buttons (outline + primary, size-lg icon). Luma presses down 1px instead of scaling. */
.icon-button,.pose-nav{width:40px;height:40px;border:1px solid var(--border);background:var(--background);color:var(--foreground);border-radius:var(--radius-4xl);transition:background-color .15s,border-color .15s,box-shadow .15s,transform .1s}
.icon-button:hover,.pose-nav:hover{background:var(--muted);border-color:var(--border)}
.icon-button:active:not([aria-haspopup]),.pose-nav:active{transform:translateY(1px)}
.icon-button svg,.pose-nav svg{width:16px;height:16px}
.icon-button.primary{background:var(--accent);border-color:transparent;color:white}
.icon-button.primary:hover{background:color-mix(in oklch,var(--accent),black 12%)}
.icon-button[aria-expanded=true]:not(.primary){background:var(--muted)}
.icon-button[aria-pressed=true]{background:var(--background);border-color:var(--border);color:var(--foreground)}
/* Tabs list: muted pill, p-1, h-9; triggers foreground/60, active on background. */
.segmented{background:var(--muted);padding:4px;border-radius:999px;min-height:36px}
.segmented::before{top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,2));background:var(--background);box-shadow:0 1px 2px #0000000d,0 0 0 1px #0a0a0a0a}
.segmented button,.segmented button[aria-selected=true]{padding:4px 12px;font-size:14px;font-weight:500;color:#0a0a0a99}
.segmented button[aria-selected=true]{color:var(--foreground)}
.segmented button:hover{color:var(--foreground)}
.colour-target.segmented button[aria-selected=true]{color:var(--accent)}
.colour-target.segmented button{padding:4px 12px}
.colour-target.segmented svg{width:16px;height:16px}
/* Colour bar as a floating card. */
.colour-bar{border:0;box-shadow:0 0 0 1px #0a0a0a0d,0 4px 16px #0000000a;padding:6px 8px 6px 6px;gap:10px}
.colour-bar .swatch{width:30px;height:30px}
/* Popover / dropdown surfaces. */
.export-menu{border:0;border-radius:var(--radius-3xl);padding:6px;box-shadow:var(--shadow-lg);width:120px}
.export-menu button{border-radius:var(--radius-2xl);padding:8px 12px;font-size:14px;font-weight:500;justify-content:flex-start}
.export-menu button:hover,.export-menu button:focus-visible{background:var(--muted);box-shadow:none}
.export-menu:not([hidden]){animation:pop-in .1s ease-out;transform-origin:bottom right}
@keyframes pop-in{from{opacity:0;transform:translateY(8px) scale(.95)}}
/* Cards / options. */
.option{border-color:var(--border);border-radius:var(--radius-xl)}
.option:hover{background:#fafafa;border-color:#d4d4d4}
.option .option-label{color:var(--muted-foreground)}
.section-label h3{font-size:14px;font-weight:500}
.controls{border-left-color:var(--border)}
.stage{background:#fafafa}
/* Tooltip (Luma): foreground pill above the control, after a short delay. */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;z-index:70;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);background:var(--foreground);color:var(--background);font-size:12px;font-weight:500;line-height:1.4;padding:6px 12px;border-radius:var(--radius-xl);white-space:nowrap;pointer-events:none;animation:tip-in .1s ease-out .4s both}
@keyframes tip-in{from{opacity:0;transform:translate(-50%,4px) scale(.95)}}
.option[data-tip]:hover::after{display:none}
/* Colour picker popover. */
.picker{position:fixed;z-index:60;width:248px;padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--background);border-radius:var(--radius-3xl);box-shadow:var(--shadow-lg);animation:pop-in .1s ease-out}
.picker[data-side=top]{transform-origin:bottom center}.picker[data-side=bottom]{transform-origin:top center}
.picker-sv{position:relative;height:156px;border-radius:var(--radius);background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--hue);cursor:crosshair;touch-action:none}
.picker-sv .picker-thumb{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--colour);border:2px solid white;box-shadow:0 0 0 1px #0000001a,0 2px 6px #00000033;transform:translate(-50%,-50%);pointer-events:none}
.picker-hue{position:relative;height:12px;border-radius:999px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);touch-action:none;cursor:pointer;margin:0 4px}
.picker-hue .picker-thumb{position:absolute;top:50%;width:24px;height:16px;border-radius:999px;background:white;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a,0 0 0 1px #0000001a;transform:translate(-50%,-50%);pointer-events:none;transition:box-shadow .15s}
.picker-hue:hover .picker-thumb,.picker-hue:focus-visible .picker-thumb{box-shadow:0 4px 6px -1px #0000001a,0 0 0 1px #0000001a,0 0 0 4px #a1a1a14d}
.picker-hue:focus-visible{box-shadow:none}
.picker-row{display:flex;align-items:center;gap:8px}
.picker-preview{flex:none;width:36px;height:36px;border-radius:50%;background:var(--colour);box-shadow:inset 0 0 0 1px #0000001a}
.picker-hex{flex:1;min-width:0;height:36px;border:1px solid transparent;border-radius:var(--radius-3xl);background:#e5e5e580;padding:0 12px;font:500 14px/1 ui-monospace,SFMono-Regular,monospace;color:var(--foreground);text-transform:uppercase;transition:box-shadow .15s,border-color .15s}
.picker-hex:focus-visible{border-color:var(--ring)}
.custom-colour{background:var(--background)}
button.custom-colour{padding:0;cursor:pointer}
@media(prefers-reduced-motion:reduce){.picker,.export-menu:not([hidden]),[data-tip]:hover::after{animation:none}}
/* v13: logo on top of the stage, floating side panel. */
body{background:#fafafa}
.workspace{background:#fafafa}
.logo{margin:0;display:flex;justify-content:center;padding:4px 0 0;line-height:0}
.logo img{height:20px;width:auto;display:block}
.stage{padding-top:22px}
.controls{position:sticky;top:16px;height:calc(100dvh - 32px);min-height:0;margin:16px 16px 16px 0;border:0;border-radius:var(--radius-3xl);background:var(--background);box-shadow:var(--shadow-lg);overflow:hidden}
.controls .panel-scroll{padding-bottom:28px}
@media(max-width:740px){.logo img{height:18px}.stage{padding-top:18px}.controls{position:static;height:auto;margin:0 12px 12px;border-radius:var(--radius-3xl)}}
/* v14: logo 1.5×; None option uses the Nucleo "ban" icon. */
.logo img{height:30px}
@media(max-width:740px){.logo img{height:27px}}
.none-icon svg{width:22px;height:22px;display:block}
.none-icon{color:#a3a3a3}
.face .none-icon{color:#ffffffd9}
/* v15: label-free option cards with a check badge; calmer corners; larger item swatches. */
.option,.compact .option{border-radius:12px;min-height:0}
.option .option-label{display:none}
.compact .thumb,.option .thumb{aspect-ratio:1.15;padding:10px}
.face .thumb{margin:6px;width:calc(100% - 12px);padding:6px;border-radius:8px}
.option[aria-pressed=true]:after{content:none}
.option .check{position:absolute;top:5px;right:5px;width:18px;height:18px;border-radius:50%;background:white;color:#000;opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s cubic-bezier(.3,.9,.3,1);pointer-events:none}
.option .check svg{width:18px;height:18px;display:block}
.option[aria-pressed=true] .check{opacity:1;transform:none}
.option[data-tip]:hover::after{display:block}
.item-colours{gap:5px;margin:-2px 0 12px}
.swatch.small,.custom-colour.small,.original-chip{width:30px;height:30px}
.original-chip svg{width:16px;height:16px}
.custom-colour.small svg{width:15px;height:15px}
@media(prefers-reduced-motion:reduce){.option .check{transition:none}}
/* v16: check badge without the white ring. */
.option .check{background:none;border-radius:0}
/* v17: white check on a black circle, no outer ring. The white disc stays inside the glyph's black circle. */
.option .check{background:radial-gradient(circle at center,#fff 0 5.5px,transparent 6px);border-radius:50%}
.option .check svg{color:#000}
/* v18: export menu corners nest (inner radius = outer radius − padding). */
.export-menu,.actions .export-menu{border-radius:20px;padding:6px;width:128px}
.export-menu button{border-radius:14px;padding:8px 14px}