@font-face{font-family:ABC Areal;src:url(/fonts/ABCAreal-Regular.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:ABC Areal;src:url(/fonts/ABCAreal-Medium.woff2) format("woff2");font-weight:500;font-display:swap}.lab{--stage: #1c1c1c;--panel: #1f1f1f;--control: #2d2d2d;--control-on: #383838;--tile: #252525;--popover: #252525;--divider: #ffffff0f;--ink: #ffffffeb;--ink-2: #a8a8a8;--ink-3: #909090;--tick: #ffffff1a;--focus: #ffffff59;--ease-out: cubic-bezier(.23, 1, .32, 1);position:relative;display:flex;flex-direction:column;height:100dvh;background:var(--panel);overflow:clip;font:400 13px/18px ABC Areal,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}:where(.lab) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}.lab :focus-visible{outline:1px solid var(--focus);outline-offset:1px}html:has(.lab),body:has(.lab){height:100%;overflow:hidden}.lab-bar{position:relative;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:44px;padding:0 12px;font-size:12px;line-height:16px}.bar-group{display:flex;align-items:center;gap:12px}.bar-divider{width:1px;height:16px;background:#282828}.bar-title{margin:0;font:500 12px/16px ABC Areal,system-ui,sans-serif;color:var(--ink)}.bar-mark,.bar-icon,.bar-button{display:flex;align-items:center;border-radius:6px;transition:background-color .15s ease,color .15s ease}.bar-mark{gap:6px;height:28px;padding:0 8px;color:var(--ink)}.bar-icon{justify-content:center;width:28px;height:24px;color:var(--ink-2)}.bar-icon[aria-pressed=false]{color:var(--ink-3)}.bar-button{gap:6px;padding:4px 8px;font-weight:500;line-height:18px;color:var(--ink-3);text-decoration:none}.bar-mark:hover,.bar-icon:hover,.bar-button:hover,.bar-mark[aria-expanded=true]{background:var(--control);color:var(--ink)}.lab-bar .bar-split{flex:none;height:28px;gap:0;border-radius:6px;background:var(--control);color:var(--ink);font-weight:500;line-height:18px}.bar-split .split-main{padding:0 10px 0 12px;border-radius:6px 0 0 6px}.bar-split .split-main svg,.sheet-tabs{display:none}.bar-split .split-toggle{display:flex;align-items:center;justify-content:center;width:26px;border-radius:0 6px 6px 0;box-shadow:inset 1px 0 #ffffff14}.bar-split>button{transition:background-color .15s ease}.bar-split>button:hover{background:var(--control-on)}.lab-bar .menu{top:calc(100% + 6px);bottom:auto;z-index:20;transform-origin:top right;color:var(--ink)}.site-menu{position:relative}.lab-bar .site-menu-list{left:0;right:auto;width:220px;transform-origin:top left}.lab-bar .png-menu{width:160px}.lab-editor{display:flex;flex:1;min-height:0}.bar-mode{position:absolute;left:50%;display:flex;padding:2px;border-radius:6px;background:var(--control);translate:-50% 0}.bar-mode button{height:24px;padding:0 10px;border-radius:4px;color:var(--ink-3);transition:background-color .15s ease,color .15s ease}.bar-mode button:hover{color:var(--ink)}.bar-mode button[aria-checked=true]{background:var(--control-on);color:var(--ink)}.lab-bar .bar-primary{height:28px;padding:0 12px 0 10px;border-radius:6px;background:var(--control);color:var(--ink);transition:background-color .15s ease}.lab-bar .bar-primary:hover{background:var(--control-on)}.lab-bar .bar-primary svg{color:var(--ink-3)}.outline-preview{display:flex;align-items:center;justify-content:center;height:160px}.lab .preview-button{height:60px;padding:0 34px;border-radius:999px;background:#262626;font-size:22px;font-weight:500;line-height:28px;color:#fffffff5;transition:background-color .15s ease}.lab .preview-button:hover{background:#2e2e2e}.preview-card{display:flex;flex-direction:column;gap:6px;width:300px;padding:20px;border-radius:16px;background:#262626;font-size:14px;line-height:20px;color:var(--ink-2)}.preview-card strong{font-size:16px;font-weight:500;line-height:22px;color:var(--ink)}.preview-input{width:280px;height:48px;padding:0 16px;border:0;border-radius:10px;background:#262626;font:inherit;font-size:16px;color:var(--ink)}.preview-input::placeholder{color:var(--ink-3)}.lab .preview-input:focus-visible{outline:none}.tile-pill{display:block;width:44px;height:22px;border-radius:999px}.lab-stage[data-cursor]{cursor:none}.lab-stage[data-cursor] .seed-field{cursor:auto}.cursor-preview{display:block;width:260px;height:160px;padding-left:60px}.field-row{display:flex;align-items:center;gap:8px}.field-label{width:80px;flex-shrink:0;color:var(--ink-2)}.text-input{flex:1 1 0;width:0;min-width:0;height:28px;padding:0 8px;border:0;border-radius:4px;background:var(--control);font:inherit;color:var(--ink)}.text-input::placeholder{color:var(--ink-3)}.lab .text-input:focus-visible{outline:none;box-shadow:inset 0 0 0 1px #ffffff26}.panel{display:flex;flex-direction:column;width:256px;flex-shrink:0;background:var(--panel);overflow:clip}.panel[hidden]{display:none}.inspector{overflow-y:auto;scrollbar-width:thin}.panel-head{display:flex;align-items:center;padding:7px 8px 10px 12px}.panel-toggle{display:flex;align-items:center;justify-content:center;width:28px;height:24px;flex-shrink:0;border-radius:6px;color:var(--ink-3);transition:background-color .15s ease,color .15s ease}.panel-toggle:hover{background:var(--control);color:var(--ink)}.stage-toggle{position:absolute;top:9px;left:8px;z-index:2}.panel-toggle svg{transition:rotate .15s var(--ease-out)}.panel-title{flex:1;font-weight:500;font-size:13px;line-height:20px}.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:2px 12px 12px}.tile{display:flex;flex-direction:column;text-align:left;transition:transform .16s var(--ease-out)}.tile:active{transform:scale(.97)}.tile-swatch{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border-radius:4px;background:var(--tile);transition:box-shadow .15s ease}.tile[aria-checked=true] .tile-swatch{box-shadow:inset 0 0 0 1px var(--focus)}.tile-label{padding:4px 2px 2px;font-size:12px;color:var(--ink-2)}.tile[aria-checked=true] .tile-label{color:var(--ink)}.lab-stage{position:relative;align-self:stretch;background:var(--stage);flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px}.seed-field{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(560px,100%)}.seed-field[hidden]{display:flex;visibility:hidden}.seed{width:100%;height:44px;padding:0;border:0;background:none;font:700 40px/44px Die Grotesk B,ABC Areal,system-ui,sans-serif;text-align:center;color:var(--ink);caret-color:var(--ink);text-overflow:ellipsis}.seed::placeholder{color:#ffffff40}.lab .seed:focus-visible{outline:none}.seed-hint{margin:0;font-size:12px;line-height:16px;color:#ffffff59}.section{border-bottom:1px solid var(--divider)}.section.is-last{border-bottom:0}.section-head{display:flex;align-items:center;gap:6px;width:100%;height:32px;padding:0 12px;font-weight:500;color:var(--ink-2)}.chevron{flex-shrink:0;transition:rotate .15s var(--ease-out)}.section-fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s var(--ease-out)}.section-fold[data-open=false]{grid-template-rows:0fr}.section-fold>.section-body,.section-fold>.tiles{min-height:0;overflow:clip}.section-body{display:flex;flex-direction:column;gap:6px;padding:2px 12px 12px}.section-fold[data-open=false]>.section-body{padding-bottom:0}.section-fold[data-open=false]>.tiles{padding-top:0;padding-bottom:0}.segmented{display:flex;padding:2px;border-radius:4px;background:var(--control)}.segment{flex:1 1 0;height:24px;border-radius:4px;color:var(--ink-3);transition:background-color .15s ease,color .15s ease}.segment:disabled{opacity:.4;cursor:default}.segment[aria-checked=true]{background:var(--control-on);color:var(--ink)}.select{display:flex;align-items:center;gap:8px;min-height:32px}.select-label{width:72px;flex-shrink:0;color:var(--ink-3)}.select-box{position:relative;display:flex;align-items:center;flex:1 1 0;min-width:0}.select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;height:24px;padding:0 7px 0 8px;border-radius:4px;background:var(--control);color:var(--ink);text-align:left;transition:background-color .15s ease}.select-trigger:hover,.select-trigger[aria-expanded=true]{background:var(--control-on)}.lab .select-trigger:focus-visible{outline:none;box-shadow:inset 0 0 0 1px #ffffff26}.select-trigger .chevron{flex-shrink:0;transition:rotate .15s var(--ease-out)}.select-trigger[aria-expanded=true] .chevron{rotate:180deg!important}.lab .select-menu{position:fixed;right:auto;min-width:0;box-sizing:border-box;z-index:30;transform-origin:top center}.lab .select-menu[data-up]{transform-origin:bottom center}.select-group{display:contents}.menu-item[aria-selected=true] .menu-check{opacity:1}.lab .menu-item:focus-visible{outline:none;background:var(--control)}.slider-row{display:flex;align-items:center;gap:8px;min-height:32px}.slider-row[data-disabled]{opacity:.4}.slider-label{width:72px;flex-shrink:0;color:var(--ink-3)}.track{position:relative;flex:1 1 0;min-width:0;height:24px;border-radius:4px;background:var(--control);overflow:clip;cursor:ew-resize;touch-action:none}.slider-row[data-disabled] .track{cursor:default}.track-fill{position:absolute;inset:0 auto 0 0;background:var(--control-on)}.tick{position:absolute;top:6px;bottom:6px;width:1px;background:var(--tick)}.thumb{position:absolute;top:3px;bottom:3px;width:2px;border-radius:999px;background:var(--ink);translate:-50% 0}.value-box{display:flex;align-items:center;justify-content:center;width:50px;height:26px;flex-shrink:0;border-radius:4px;background:var(--control);color:var(--ink-2);font-variant-numeric:tabular-nums}.note{margin:0;font-size:12px;padding:3px 2px 0;color:var(--ink-3)}.swatches{display:flex;gap:6px;padding-top:2px}.swatch{flex:1 1 0;height:24px;border-radius:4px;border:1px solid var(--tick);transition:transform .16s var(--ease-out),box-shadow .15s ease}.swatch:active{transform:scale(.97)}.swatch[data-open]{box-shadow:0 0 0 1px var(--panel),0 0 0 2px #ffffff8c}.actions{display:flex;gap:6px;margin-top:auto;padding:12px;border-top:1px solid var(--divider)}.button{display:flex;align-items:center;justify-content:center;gap:6px;height:28px;border-radius:4px;background:var(--control);transition:transform .16s var(--ease-out),background-color .15s ease}.button:active{transform:scale(.97)}.button-primary{flex:1 1 0;background:var(--control-on)}.split{position:relative;display:flex;flex:1 1 0;gap:1px}.split-main{flex:1 1 0;border-radius:4px 0 0 4px}.split-toggle{width:26px;border-radius:0 4px 4px 0}.menu{position:absolute;right:0;bottom:calc(100% + 6px);display:flex;flex-direction:column;min-width:100%;padding:4px 8px;border-radius:8px;background:var(--panel);border:1px solid #ffffff0d;box-shadow:0 12px 32px #0006;transform-origin:bottom right;animation:pop .15s var(--ease-out)}.menu-item{display:flex;align-items:center;gap:8px;height:33px;font-weight:400;margin:0 -4px;padding:0 4px;border-radius:4px;font-size:13px;line-height:1.5;text-align:left;white-space:nowrap;color:#cbcbcb;text-decoration:none;transition:background-color .15s ease}.menu-item svg{flex-shrink:0;color:var(--ink-3)}.menu-item:hover{background:var(--control)}.menu-check{margin-left:auto;opacity:0}.menu-item[aria-checked=true] .menu-check,.menu-item[aria-current=page] .menu-check{opacity:1}.menu-divider{height:1px;margin:4px 0;background:#ffffff0d}.picker{position:absolute;right:264px;top:44px;z-index:10;display:flex;flex-direction:column;gap:9px;width:240px;padding:9px;border-radius:8px;background:var(--popover);border:1px solid var(--divider);box-shadow:0 12px 32px #0006;transform-origin:top right;animation:pop .15s var(--ease-out)}.picker-field{position:relative;height:140px;border-radius:4px;background-image:linear-gradient(0deg,#000,#0000),linear-gradient(90deg,#fff,#fff0);cursor:crosshair;touch-action:none}.picker-handle{position:absolute;width:14px;height:14px;border-radius:999px;border:2px solid var(--ink);box-shadow:0 0 0 1px #0006,inset 0 0 0 1px #0003;translate:-50% -50%;pointer-events:none}.picker-strip{position:relative;height:12px;border-radius:4px;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);cursor:ew-resize;touch-action:none}.picker-strip-handle{position:absolute;top:50%;width:10px;height:18px;border-radius:999px;border:2px solid var(--ink);box-shadow:0 0 0 1px #0000004d;translate:-50% -50%;pointer-events:none}.picker-row{display:flex;gap:6px}.picker-chip{width:28px;height:24px;flex-shrink:0;border-radius:4px;border:1px solid var(--tick)}.picker-format{display:flex;align-items:center;height:24px;padding:0 6px;border-radius:4px;background:var(--control);color:#e7e7e7}.picker-tool{display:flex;align-items:center;justify-content:center;width:28px;height:24px;flex-shrink:0;border-radius:4px;background:var(--control)}.picker-tool:disabled{opacity:.4;cursor:default}.picker-hex{display:flex;align-items:center;gap:4px;flex:1 1 0;min-width:0;height:24px;padding:0 8px;border-radius:4px;background:var(--control);color:var(--ink-3)}.picker-hex input{min-width:0;width:100%;border:0;padding:0;background:none;font:inherit;letter-spacing:.3px;text-transform:uppercase;color:var(--ink)}.lab .picker-hex input:focus-visible{outline:none}.picker-hex:focus-within{box-shadow:inset 0 0 0 1px #ffffff26}@keyframes pop{0%{opacity:0;transform:scale(.97)}}@media(prefers-reduced-motion:reduce){.picker,.menu{animation:none}.section-fold,.chevron{transition:none}}@media(max-width:899px){.lab-bar{padding:0 8px}.lab-bar .bar-group{gap:8px}.lab-bar a.bar-button,.lab-bar a.bar-button+.bar-divider,.stage-toggle{display:none}.bar-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.lab-bar .bar-button{justify-content:center;padding:0}.bar-split .split-toggle{display:none}.bar-split .split-main{display:flex;align-items:center;justify-content:center;padding:0;border-radius:6px}.bar-split .split-main svg{display:block}.lab-editor{flex-direction:column}.lab-stage{order:0;flex:none;height:min(340px,42dvh);gap:24px}.seed{height:36px;font-size:32px;line-height:36px}.cursor-preview{width:180px;height:110px;padding-left:40px}.outline-preview{height:110px}.lab .preview-button{height:48px;padding:0 26px;font-size:18px}.preview-card{width:260px;padding:16px}.lab-bar .bar-primary{padding:0}.lab-bar .bar-primary svg{color:var(--ink)}.sheet-tabs{order:1;display:flex;flex-shrink:0;margin:8px 12px;padding:2px;border-radius:6px;background:var(--control)}.sheet-tabs button{flex:1;height:28px;border-radius:4px;color:var(--ink-3);transition:background-color .15s ease,color .15s ease}.sheet-tabs button[aria-selected=true]{background:var(--control-on);color:var(--ink)}.panel{order:2;width:auto;flex:1 1 0;min-height:0;padding-top:12px;border-top:1px solid var(--divider);overflow-y:auto}.panel-head{display:none}.lab[data-sheet=avatars] .effects[hidden]{display:flex}.lab[data-sheet=avatars] .inspector,.lab[data-sheet=customize] .effects{display:none}.lab-bar{height:52px;font-size:13px;line-height:18px}.bar-mark{height:36px}.bar-title,.lab-bar .bar-group:first-child .bar-divider{display:none}.lab-bar .bar-button,.bar-split .split-main{width:36px;height:36px}.lab-bar .bar-split{height:36px}.bar-mode{position:static;padding:3px;border-radius:8px;translate:none}.bar-mode button{height:30px;padding:0 9px;border-radius:6px}.sheet-tabs{margin:8px 12px;padding:3px;border-radius:8px;font-size:15px}.sheet-tabs button{height:40px;border-radius:6px}.panel{font-size:15px;line-height:20px}.tiles{gap:8px;padding:4px 12px 16px}.tile-label{padding:6px 2px 4px;font-size:13px}.section-head{height:48px;gap:8px;padding:0 16px}.section-body{gap:10px;padding:0 16px 18px}.segmented{padding:3px;border-radius:8px}.segment{height:40px;border-radius:6px}.slider-row,.select{gap:12px;min-height:40px}.slider-label,.select-label,.field-label{width:84px}.track{height:40px;border-radius:8px}.tick{top:12px;bottom:12px}.thumb{top:6px;bottom:6px;width:3px}.value-box{width:60px;height:40px;border-radius:8px}.select-trigger{height:40px;padding:0 12px;border-radius:8px}.field-row{gap:12px}.text-input{height:40px;padding:0 12px;border-radius:8px;font-size:16px}.swatches{gap:8px}.swatch{height:40px;border-radius:8px}.note{padding:2px 2px 0;font-size:13px;line-height:18px}.menu-item{height:44px;font-size:15px}}@media(max-width:350px){.bar-mode button{padding:0 5px}}@media(min-width:600px)and (max-width:899px){.tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(min-width:900px)and (max-width:1100px){.seed{font-size:32px}}
