:root { color-scheme: light; background: #fff; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; }
main { position: fixed; inset: 0; isolation: isolate; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#base { pointer-events: none; }
#mesh { touch-action: none; mix-blend-mode: multiply; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; outline: none; }
#mesh.dragging { cursor: grabbing; }
#mesh:focus-visible { box-shadow: inset 0 0 0 3px #89928c; }
#mesh[data-playing="true"]:focus-visible { box-shadow: none; }
.dock { position: absolute; z-index: 2; left: calc(12px + env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); pointer-events: none; }
.dock[hidden] { display: none; }
.layer-control { max-width: 100%; }
.pattern-label { display: block; width: 58px; padding: 5px 0 4px; border: 1px solid #ffffff20; border-bottom: 0; border-radius: 8px 8px 0 0; background: #202623f5; color: #d8ddd9; font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .08em; text-align: center; }
.layer-toolbar { display: flex; align-items: center; padding: 6px; max-width: 100%; border: 1px solid #ffffff20; border-radius: 0 14px 14px 14px; background: #202623f5; box-shadow: 0 6px 24px #10161138, 0 1px 3px #0003; pointer-events: auto; }
.layer-toolbar[data-expanded="false"] { width: 58px; border-top-right-radius: 0; }
.layer-toolbar[data-expanded="true"] { display: grid; grid-template-columns: minmax(0, 4fr) 1px minmax(0, 5fr); column-gap: 4px; width: min(440px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
.pattern-group, .color-group { display: grid; gap: 2px; min-width: 0; }
.pattern-group { grid-template-columns: 44px; }
.layer-toolbar[data-expanded="true"] .pattern-group { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.color-group { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.toolbar-divider { align-self: stretch; margin: 6px 0; background: #ffffff24; }
.toolbar-divider[hidden], .color-group[hidden] { display: none; }
.pattern-button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 13px; background: transparent; color: #a6b0a9; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 130ms, color 130ms, transform 130ms; }
.pattern-button svg { display: block; width: 24px; height: 24px; overflow: hidden; pointer-events: none; }
.layer-toolbar[data-expanded="true"] .pattern-button, .color-button { width: 100%; min-width: 0; height: 44px; padding: 0; border-radius: 10px; }
.layer-toolbar[data-expanded="true"] .pattern-button svg { width: 22px; height: 22px; }
.pattern-button[hidden] { display: none; }
.pattern-button[aria-pressed="true"] { background: #eef2eb; color: var(--layer-ink, #000); box-shadow: 0 1px 4px #0002; }
.color-button { display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.color-chip { display: block; width: 20px; height: 20px; border: 1px solid #ffffff50; border-radius: 50%; background: var(--swatch); }
.color-button[aria-pressed="true"] .color-chip { outline: 2px solid #eef2eb; outline-offset: 2px; }
.color-button:active { transform: scale(.91); }
.color-button:focus-visible { outline: 2px solid #eef2eb; outline-offset: -2px; }
.pattern-button:active { transform: scale(.91); }
.pattern-button:focus-visible { outline: 2px solid #253027; outline-offset: -2px; }
.pattern-button:focus-visible:not([aria-pressed="true"]) { outline-color: #eef2eb; }
.playback-button { display: grid; place-items: center; width: 58px; height: 50px; flex: none; padding: 12px 16px; border: 1px solid #ffffff20; border-radius: 14px; background: #202623f5; color: #eef2eb; box-shadow: 0 6px 24px #10161138, 0 1px 3px #0003; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.playback-button svg { display: block; width: 24px; height: 24px; pointer-events: none; }
.playback-button .pause-icon, .playback-button[data-playing="true"] .play-icon { display: none; }
.playback-button[data-playing="true"] .pause-icon { display: block; }
.playback-button:active { transform: scale(.95); }
.playback-button:focus-visible { outline: 2px solid #202623; outline-offset: 3px; }
.playback-button:disabled { opacity: .5; cursor: default; }
.psychedelic-button[aria-pressed="true"] { border-color: #d1aaff; box-shadow: 0 0 0 1px #d1aaff60, 0 6px 24px #10161138; }
@media (hover: hover) { .pattern-button:hover:not([aria-pressed="true"]) { background: #ffffff12; color: #eff3ed; } .color-button:hover { background: #ffffff12; } }
@media (max-height: 400px) {
  .dock { gap: 6px; }
  .pattern-label { padding-top: 3px; padding-bottom: 3px; }
  .layer-toolbar[data-expanded="true"] { padding: 4px; }
  .layer-toolbar[data-expanded="true"] .pattern-button, .color-button { height: 36px; }
  .playback-button { height: 44px; padding-top: 9px; padding-bottom: 9px; }
}
@media (prefers-reduced-motion: reduce) { .pattern-button { transition: none; } }