:root{color-scheme:dark;--bg: #1a1a2e;--fg: #f5f5f7;--muted: #8a8aa3;--accent: #f72585;--accent-2: #1982c4;--card: #23233a;--border: #33334d;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html{-webkit-tap-highlight-color:transparent}button,.swatch,a{touch-action:manipulation}html,body,#root{margin:0;padding:0;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--fg)}a{color:var(--accent);text-decoration:none}button{font:inherit;background:var(--accent);color:#fff;border:0;padding:.6em 1em;border-radius:.5em;cursor:pointer;min-height:44px;user-select:none;-webkit-user-select:none}button:disabled{background:var(--border);color:var(--muted);cursor:not-allowed}button.secondary{background:transparent;color:var(--fg);border:1px solid var(--border)}button.secondary.compact{padding:.5em .9em;font-size:.85em;min-height:36px}.layout{max-width:480px;margin:0 auto;padding:1rem;padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right));padding-top:max(1rem,env(safe-area-inset-top));padding-bottom:max(1rem,env(safe-area-inset-bottom))}.card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1rem;margin-bottom:1rem}.canvas-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;aspect-ratio:1 / 1;background:var(--border);border-radius:.5rem;overflow:hidden}.canvas-cell{background:var(--bg);aspect-ratio:1 / 1}.canvas-cell.next{outline:2px solid white;outline-offset:-2px;animation:next-pulse 1.2s ease-in-out infinite}@keyframes next-pulse{0%,to{outline-color:#fff6}50%{outline-color:#fff}}.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:.75rem}.swatch{aspect-ratio:1 / 1;border-radius:4px;cursor:pointer;border:2px solid transparent;position:relative;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.swatch-key{position:absolute;top:2px;left:3px;font-size:.6rem;font-weight:700;color:#ffffffbf;line-height:1;pointer-events:none;text-shadow:0 0 3px rgba(0,0,0,.6)}.kb-hint{display:flex;gap:.4rem;align-items:center;font-size:.75rem;color:var(--muted);margin-top:.5rem}.kb-sep{opacity:.4}.swatch.selected{border-color:#fff}.row{display:flex;gap:.5rem;align-items:center}.row+.row{margin-top:.5rem}.muted{color:var(--muted);font-size:.85em}.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.gallery a{color:inherit}.gallery .canvas-grid{aspect-ratio:1 / 1}.header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.header h1{font-size:1.25rem;margin:0}.error{color:#ff6b6b;font-size:.9em}@media(hover:none)and (pointer:coarse){.kb-hint,.swatch-key{display:none}}@media(max-width:380px){.palette{grid-template-columns:repeat(4,1fr)}}