*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { position: fixed; inset: 0; overflow: hidden; background: #101010; touch-action: none; -webkit-user-select: none; user-select: none; }

.intro { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; background: #101010; pointer-events: none; animation: introFade 3.6s ease forwards; }
.intro-logo { margin-left: .24em; color: #f6f2eb; font-size: clamp(20px, 4vw, 54px); font-weight: 650; letter-spacing: .24em; opacity: 0; animation: logoFade 3.35s ease forwards; }
@keyframes introFade { 0%, 76% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes logoFade { 0% { opacity: 0; transform: translateY(4px); } 22%,76% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } }

.palette-root { position: fixed; inset: 0; display: flex; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; isolation: isolate; opacity: 0; animation: paletteIn 1.2s ease 2.35s forwards; }
@keyframes paletteIn { to { opacity: 1; } }
.empty-state { display: grid; width: 100%; height: 100%; place-items: center; color: rgba(255,255,255,.56); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.palette-column { position: relative; flex: 1 1 0; min-width: 44px; height: 100%; cursor: crosshair; overflow: hidden; transition: flex-grow 4s ease-in-out, flex-basis .95s cubic-bezier(.2,.8,.2,1), min-width .95s cubic-bezier(.2,.8,.2,1), min-height .95s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.palette-column::before { position: absolute; z-index: 1; inset: 0; content: ""; pointer-events: none; background: linear-gradient(to left, rgba(0,0,0,.24), rgba(0,0,0,.09) 18px, rgba(0,0,0,0) 58px); }
.palette-column::after { position: absolute; z-index: 2; top: 12px; left: 12px; max-width: calc(100% - 24px); overflow: hidden; color: var(--label-color); content: attr(data-label); font-size: 11px; font-weight: 500; line-height: 1.45; letter-spacing: .08em; text-transform: uppercase; white-space: pre; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .72s ease, transform .72s ease; }
.palette-column.active::after, .palette-column:hover::after { opacity: 1; transform: translateY(0); }
.palette-column.info-open { z-index: 5; min-width: 86px; }
.palette-column.info-restoring { transition-duration: 4.2s, 3.6s, 3.6s, 3.6s, .5s; }
.palette-root.is-isolated .palette-column { flex: .001 1 0 !important; min-width: 0; }
.palette-root.is-isolated .palette-column.fullscreen-open { flex: 8 1 0 !important; min-width: 86px; }
.palette-root.fullscreen-restoring .palette-column { min-width: 0; transition-delay: var(--restore-delay, 0ms), var(--restore-delay, 0ms), 0s, 0s, 0s; }

.color-tool-btn { position: absolute; z-index: 3; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(255,255,255,.2); color: rgba(255,255,255,.88); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px rgba(0,0,0,.12); backdrop-filter: blur(18px) saturate(1.45); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .72s ease, background .18s ease; }
.color-remove-btn { top: 10px; }.color-add-btn { top: 46px; }.color-fullscreen-btn { top: 82px; }
.color-tool-btn svg, .music-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.95; stroke-linecap: round; stroke-linejoin: round; }
.palette-column.info-open .color-tool-btn { opacity: 1; pointer-events: auto; transition-delay: .34s; }
.palette-column.info-closing .color-tool-btn { opacity: 0; pointer-events: none; transition-delay: 0s; }
.color-tool-btn:hover, .color-tool-btn:focus-visible { background: rgba(255,255,255,.3); outline: none; }

.music-toggle { position: fixed; z-index: 6; right: 16px; bottom: 16px; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.31), rgba(255,255,255,.16)); color: rgba(255,255,255,.88); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 18px 50px rgba(0,0,0,.16); backdrop-filter: blur(26px) saturate(1.65); cursor: pointer; transition: background .18s ease, color .18s ease; }
.music-toggle.active { color: rgba(20,20,20,.82); background: rgba(255,255,255,.88); }
.music-toggle:hover, .music-toggle:focus-visible { background: rgba(255,255,255,.32); outline: none; }

@media (max-aspect-ratio: 1 / 1) { .palette-root { flex-direction: column; }.palette-column { width: 100%; height: auto; min-width: 0; min-height: 62px; }.palette-column::before { background: linear-gradient(to top, rgba(0,0,0,.24), rgba(0,0,0,.09) 18px, rgba(0,0,0,0) 58px); }.palette-column.info-open { min-width: 0; min-height: 196px; }.palette-root.is-isolated .palette-column.fullscreen-open { min-width: 0; min-height: 196px; } }
@media (max-width: 680px) { .music-toggle { right: 10px; bottom: 10px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .intro, .intro-logo, .palette-root { animation: none; }.intro { display: none; }.palette-root { opacity: 1; }.palette-column, .palette-column::after { transition: none; } }