:root{--bg: #0a0a0c;--fg: #f4f4f5;--muted: #6b6b73;--glass: rgba(12, 12, 14, .62);--glass-line: rgba(255, 255, 255, .09);--pal-a: #ff3b6b;--pal-b: #3bf0d9;--pal-c: #ffe45e;--pal-bg: #0a0410}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{background:var(--pal-bg);color:var(--fg);font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-font-smoothing:antialiased}button,input{touch-action:manipulation}button:focus-visible,.text-input:focus-visible{outline:2px solid var(--pal-b);outline-offset:3px}.stage{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;cursor:crosshair}.stage:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;z-index:5;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}.stage:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:6;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}.canvas-wrap{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;perspective:1200px}#atelier-canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}.wordmark{position:fixed;top:18px;left:22px;z-index:20;display:flex;gap:10px;align-items:center;color:#ffffffc7;font-size:11px;font-weight:600;letter-spacing:.18em;mix-blend-mode:difference}.wordmark .pixel{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;width:10px;height:10px}.wordmark .pixel i{display:block;background:currentColor}.wordmark .pixel i:nth-child(1){background:#ff3b6b}.wordmark .pixel i:nth-child(2){background:#5dd6ff}.wordmark .pixel i:nth-child(3){background:#c4ff4d}.wordmark .pixel i:nth-child(4){background:#fff}.palette-tag{position:fixed;top:14px;right:18px;z-index:20;display:flex;gap:8px;align-items:center;padding:6px 10px;color:#ffffffb3;font:inherit;font-size:10px;letter-spacing:.32em;cursor:pointer;background:transparent;border:0;border-radius:999px;mix-blend-mode:difference;transition:background .18s}.palette-tag:hover{background:#ffffff14}.palette-tag:active{transform:scale(.97)}.palette-tag .swatches{display:inline-flex;gap:3px}.palette-tag .swatches i{display:inline-block;width:8px;height:8px;border-radius:1px;box-shadow:0 0 0 1px #ffffff1f}.palette-tag .label{min-width:44px;text-align:right}.hint{position:fixed;top:50%;left:50%;z-index:15;color:#ffffff52;font-size:10px;letter-spacing:.32em;text-align:center;pointer-events:none;mix-blend-mode:difference;opacity:0;transform:translate(-50%,-50%) translateY(38vh);animation:hintIn .8s cubic-bezier(.2,.8,.2,1) .6s forwards}@keyframes hintIn{0%{opacity:0;transform:translate(-50%,-50%) translateY(40vh)}to{opacity:1;transform:translate(-50%,-50%) translateY(38vh)}}.hint.fade{animation:hintOut .4s forwards}@keyframes hintOut{to{opacity:0}}.toolbar-stack{position:fixed;bottom:22px;left:50%;z-index:30;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;transform:translate(-50%)}.toolbar-stack>*{pointer-events:auto}.toolbar,.subbar{backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}.toolbar{display:flex;gap:6px;align-items:center;padding:6px;background:var(--glass);border:1px solid var(--glass-line);border-radius:999px;box-shadow:0 14px 40px #0000008c,inset 0 1px #ffffff0a;transition:opacity .22s ease,transform .22s ease}.toolbar.exporting{opacity:.4}.subbar{display:flex;gap:4px;align-items:center;max-width:calc(100vw - 32px);padding:5px 7px;background:#08080ab3;border:1px solid rgba(255,255,255,.07);border-radius:999px;box-shadow:0 8px 24px #00000073;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .22s cubic-bezier(.2,.8,.2,1),transform .22s cubic-bezier(.2,.8,.2,1)}.subbar.show{opacity:1;transform:translateY(0) scale(1)}.sub-chip{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;color:#fff9;font:inherit;font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;background:transparent;border:0;border-radius:999px;transition:color .16s,background .16s}.sub-chip:hover{color:#fffffff2}.sub-chip[aria-pressed=true]{color:var(--pal-a);background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff14,0 0 14px -4px var(--pal-a)}.sub-chip svg{display:block;width:12px;height:12px}.sub-chip[aria-pressed=true] svg{filter:drop-shadow(0 0 4px var(--pal-a))}.text-input{width:200px;padding:6px 12px;color:var(--pal-a);font:inherit;font-size:11px;letter-spacing:.06em;text-transform:uppercase;caret-color:var(--pal-a);background:transparent;border:0;outline:none;-webkit-user-select:text;user-select:text}.input-wrap{display:inline-flex;gap:6px;align-items:center;padding:0 8px;background:#ffffff0a;border-radius:999px;box-shadow:inset 0 0 0 1px #ffffff0f}.input-wrap:before{margin-left:4px;color:var(--pal-a);font-size:13px;content:"›";opacity:.7}.input-wrap .blink{width:6px;height:12px;margin-right:4px;background:var(--pal-a);opacity:.7;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}.group{display:flex;gap:2px;align-items:center;padding:2px}.divider{width:1px;height:18px;margin:0 4px;background:#ffffff14}.chip{position:relative;display:inline-flex;gap:7px;align-items:center;padding:8px 12px;color:#fff9;font:inherit;font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;background:transparent;border:0;border-radius:999px;transition:color .18s,background .18s,transform .18s}.chip:hover{color:#fffffff2}.chip[aria-pressed=true]{color:var(--pal-a);background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff12}.effect-chip[aria-pressed=true]{color:#0a0a0c;background:var(--pal-a);box-shadow:0 0 0 1px #ffffff2e,0 0 24px -4px var(--pal-a)}.chip .ico{display:inline-grid;place-items:center;width:14px;height:14px;color:currentColor}.chip .ico svg{display:block;width:14px;height:14px}.chip[data-tip]:after{position:absolute;bottom:calc(100% + 8px);left:50%;padding:4px 7px;color:#fff;font-size:9px;letter-spacing:.22em;white-space:nowrap;pointer-events:none;content:attr(data-tip);background:#141418eb;border:1px solid rgba(255,255,255,.08);border-radius:4px;opacity:0;transform:translate(-50%) translateY(2px);transition:opacity .14s,transform .14s}.chip[data-tip]:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.icon-btn{position:relative;display:grid;place-items:center;width:36px;height:36px;color:#ffffffd9;cursor:pointer;background:transparent;border:0;border-radius:999px;transition:background .18s,transform .12s}.icon-btn:hover{background:#ffffff0f}.icon-btn:active{transform:scale(.94)}.icon-btn svg{width:16px;height:16px}.randomize{width:42px;height:42px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08)}.randomize:hover{background:#ffffff17;box-shadow:0 0 0 4px #ffffff0a}.randomize.spin svg{animation:rollDie .5s cubic-bezier(.2,.9,.3,1.4)}@keyframes rollDie{50%{transform:rotate(220deg) scale(1.1)}to{transform:rotate(360deg) scale(1)}}.export{position:relative;display:inline-flex;gap:8px;align-items:center;min-width:90px;height:36px;padding:0 14px 0 12px;overflow:hidden;color:#fffffff2;font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:999px}.export:hover{background:#ffffff17}.export svg{width:14px;height:14px}.export .ring{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border-radius:999px;opacity:0}.export.exporting .ring{background:conic-gradient(from -90deg,var(--pal-a) 0deg,transparent 60deg);opacity:1;-webkit-mask:radial-gradient(circle,transparent calc(50% - 1.5px),#000 calc(50% - 1px));mask:radial-gradient(circle,transparent calc(50% - 1.5px),#000 calc(50% - 1px));animation:spinRing .7s linear}@keyframes spinRing{to{transform:rotate(360deg)}}.export.done{color:#0a0a0c;background:var(--pal-a)}.meta{position:fixed;bottom:6px;left:50%;z-index:25;color:#ffffff47;font-size:9px;letter-spacing:.32em;white-space:nowrap;pointer-events:none;mix-blend-mode:normal;transform:translate(-50%)}.flash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;pointer-events:none;background:var(--pal-a);opacity:0}.flash.go{animation:flashGo .38s cubic-bezier(.2,.8,.2,1)}@keyframes flashGo{18%{opacity:.32}}.native-gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:24px;background:#030306b8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.native-gate[hidden]{display:none}.native-gate>div{max-width:520px;color:#ffffffb8;text-align:center}.native-gate p{color:var(--pal-a);font-size:10px;letter-spacing:.32em;text-transform:uppercase}.native-gate h1{margin:10px 0;color:#fff;font-size:24px;letter-spacing:0}.native-gate code{color:var(--pal-c)}.surface-source{width:max-content;height:max-content;color:var(--pal-c)}.type-surface{width:760px;height:210px;display:grid;place-items:center;color:currentColor;font-size:200px;font-weight:700;line-height:.9;letter-spacing:-4px;text-align:center;text-transform:uppercase;background:none;-webkit-text-stroke:0;filter:none}.glyph-surface{width:240px;height:240px;color:var(--pal-c);filter:none}.glyph-surface svg,.pattern-surface svg{display:block;width:100%;height:100%}.glyph-line{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.glyph-line.outer{stroke-width:7}.glyph-line.inner{stroke:currentColor;stroke-width:4;opacity:.72}.glyph-line.axis{stroke:currentColor;stroke-width:2;opacity:.54}.glyph-core{fill:currentColor}.css-surface{position:relative;width:640px;height:640px;overflow:visible;color:var(--pal-c)}.css-mark{position:absolute;left:50%;top:50%;display:block;background:currentColor;opacity:var(--a);mix-blend-mode:screen;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)))}.css-circle{width:var(--s);height:var(--s);border-radius:50%}.css-bar{width:var(--w);height:var(--h);border-radius:2px}.pattern-surface{width:400px;height:320px;color:var(--pal-c);filter:none}@media(max-width:760px){.toolbar{max-width:calc(100vw - 24px);gap:2px;padding:5px}.chip{padding:7px 8px;font-size:9px;letter-spacing:.12em}.chip .label{display:none}.effect-chip .label{display:inline}.divider{margin:0 2px}.export{min-width:36px;padding:0 10px}.export .label{display:none}.wordmark{font-size:10px}.palette-tag{font-size:9px;letter-spacing:.2em}.meta{font-size:8px;letter-spacing:.18em}}