:root{color-scheme:dark;--canvas-top: #09090b;--canvas-bottom: #1a1012;--panel: rgba(8, 12, 16, .68);--panel-border: rgba(255, 255, 255, .14);--text: #f8fafc;--muted: #a7b0bd;--accent: #ffd166;--control: rgba(255, 255, 255, .1);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{width:100%;min-width:320px;height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at 26% 20%,rgba(255,255,255,.08),transparent 32%),linear-gradient(160deg,var(--canvas-top),var(--canvas-bottom));color:var(--text)}button,input,select{font:inherit}.app-shell{position:relative;width:100vw;height:100dvh;overflow:hidden}#art-canvas{display:block;width:100%;height:100%;background:linear-gradient(160deg,var(--canvas-top),var(--canvas-bottom));cursor:crosshair}#art-canvas.color-cycling{animation:color-cycle 16s linear infinite}@keyframes color-cycle{0%{filter:hue-rotate(0deg) saturate(1.02)}to{filter:hue-rotate(360deg) saturate(1.02)}}.control-panel{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);width:min(420px,calc(100vw - 32px));padding:18px;border:1px solid var(--panel-border);border-radius:8px;background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 22px 80px #0000005c}.math-panel{position:absolute;top:clamp(16px,3vw,40px);right:clamp(16px,3vw,40px);width:min(390px,calc(100vw - 32px));max-height:calc(100dvh - 80px);overflow:auto;padding:18px;border:1px solid var(--panel-border);border-radius:8px;background:var(--panel);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 22px 80px #00000047}.math-heading{display:grid;gap:5px}.math-heading span{color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:0;text-transform:uppercase}.math-heading h2{margin:0;font-size:1.1rem;line-height:1.12;letter-spacing:0}.math-panel p{margin:8px 0 0;color:var(--muted);font-size:.84rem;line-height:1.45}.math-stack{display:grid;gap:12px;margin-top:16px}.math-row{display:grid;gap:4px}.math-row h3{margin:0;color:var(--text);font-size:.78rem;line-height:1.1;letter-spacing:0}.math-row p{margin:0;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.76rem;line-height:1.42;word-break:break-word}.brand{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;min-width:0}.brand-mark{width:38px;aspect-ratio:1;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:conic-gradient(from 45deg,#f45b69,#ffd166,#06d6a0,#7bdff2,#b185db,#f45b69);box-shadow:0 0 28px #ffd16659}h1{margin:0;font-size:clamp(1.05rem,1.9vw,1.45rem);line-height:1.08;letter-spacing:0}p{margin:5px 0 0;color:var(--muted);font-size:.86rem}.tool-row{display:grid;grid-template-columns:repeat(3,42px);gap:8px;margin-top:18px}.icon-button,.swatch{position:relative;display:inline-grid;place-items:center;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:var(--control);color:var(--text);cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}.icon-button{width:42px;aspect-ratio:1}.icon-button svg{width:19px;height:19px;stroke-width:2}.icon-button:hover,.swatch:hover,.icon-button:focus-visible,.swatch:focus-visible{border-color:#ffffff6b;background:#ffffff29;outline:none;transform:translateY(-1px)}[data-tooltip]:after{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:4;width:max-content;max-width:160px;padding:6px 8px;border-radius:6px;background:#000000c7;color:#fff;content:attr(data-tooltip);font-size:.75rem;line-height:1;opacity:0;pointer-events:none;transform:translate(-50%) translateY(4px);transition:opacity .14s ease,transform .14s ease}[data-tooltip]:hover:after,[data-tooltip]:focus-visible:after{opacity:1;transform:translate(-50%) translateY(0)}.control-stack{display:grid;gap:14px;margin-top:18px}.control-field{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;color:var(--muted);font-size:.84rem}input[type=range]{width:100%;accent-color:var(--accent)}select{width:100%;min-width:0;height:34px;padding:0 32px 0 10px;border:1px solid rgba(255,255,255,.16);border-radius:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:linear-gradient(45deg,transparent 50%,#f8fafc 50%) right 13px center / 7px 7px no-repeat,linear-gradient(135deg,#f8fafc 50%,transparent 50%) right 8px center / 7px 7px no-repeat,#ffffff1a;color:var(--text);cursor:pointer}select:focus-visible{border-color:#ffffff6b;outline:none}select option{background:#09090b;color:var(--text)}.palette-control{display:flex;align-items:center;gap:12px}.swatch-grid{display:grid;grid-template-columns:repeat(4,42px);gap:8px}.swatch{width:42px;aspect-ratio:1;padding:5px}.swatch span{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(135deg,var(--swatch-a),var(--swatch-b))}.swatch.active{border-color:#ffffffb8;box-shadow:0 0 0 2px #ffffff2e}.cycle-switch{position:relative;width:48px;height:28px;padding:3px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:#ffffff1a;cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}.cycle-switch-track,.cycle-switch-track span{display:block;height:100%;border-radius:inherit}.cycle-switch-track{position:relative}.cycle-switch-track span{width:20px;background:#f8fafcc7;box-shadow:0 1px 5px #0000005c;transition:transform .18s ease,background .18s ease}.cycle-switch:hover,.cycle-switch:focus-visible{border-color:#ffffff7a;outline:none}.cycle-switch:focus-visible{box-shadow:0 0 0 3px #ffd16642}.cycle-switch[aria-checked=true]{border-color:#ffd166c2;background:linear-gradient(90deg,#f45b69cc,#ffd166d1,#06d6a0c7)}.cycle-switch[aria-checked=true] .cycle-switch-track span{background:#fffdf6;transform:translate(20px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:640px){.math-panel{top:12px;left:12px;right:12px;width:auto;max-height:none;padding:12px}.math-heading h2{font-size:.96rem}.math-panel p{display:-webkit-box;overflow:hidden;font-size:.76rem;line-height:1.36;-webkit-box-orient:vertical;-webkit-line-clamp:2}.math-stack{display:none}.control-panel{left:12px;right:12px;bottom:12px;width:auto;padding:14px}.brand{grid-template-columns:32px minmax(0,1fr)}.brand-mark{width:32px}.tool-row,.swatch-grid{grid-template-columns:repeat(4,38px)}.icon-button,.swatch{width:38px}.palette-control{gap:10px}.control-field{grid-template-columns:64px minmax(0,1fr)}}