:root{--bg:#0f0f10;--fg:#f4f4f5;--muted:#a1a1aa;--surface:#18181b;--surface-2:#27272a;--border:#3f3f46;--accent:#2a9d8f;--accent-fg:#fff;--radius:10px;--header-h:56px;--toolbar-h:64px;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);--t-press:.16s;--t-fast:.15s;--t-color:.12s;--t-dialog:.2s;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font);background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.4}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn,.tab,.column__btn,.column__hex{transition:transform var(--t-press) var(--ease-out)}.btn:active:not(:disabled),.tab:active,.column__btn:active:not(:disabled),.column__hex:active{transform:scale(.97)}.app{grid-template-rows:var(--header-h) 1fr var(--toolbar-h);height:100%;display:grid}.header{border-bottom:1px solid var(--border);background:var(--surface);align-items:center;gap:14px;padding:0 18px;display:flex}.header__brand{color:var(--fg);letter-spacing:.02em;align-items:center;gap:8px;font-size:18px;font-weight:700;text-decoration:none;display:inline-flex}.header__tagline{color:var(--muted);font-size:14px}.header__by{color:var(--muted);transition:color var(--t-fast) ease;margin-left:auto;font-size:13px;text-decoration:none}.header__by:hover{color:var(--fg)}.board{min-height:0;display:flex;position:relative}.column{min-width:0;transition:background-color var(--t-color) ease, color var(--t-color) ease, opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);flex-direction:column;flex:1 1 0;justify-content:flex-end;align-items:center;display:flex;position:relative}@starting-style{.column{opacity:0;transform:scale(.98)}}.board--intro .column{transition-delay:calc(var(--i) * 50ms)}.board--intro .glyph{animation:glyph-in .22s var(--ease-out) backwards;animation-delay:calc(var(--i) * 50ms + .12s + var(--g) * 28ms)}@keyframes glyph-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.column--dragging{opacity:.5}.column--drop-target:before{content:"";opacity:.6;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 3px}.column:after{content:"";opacity:0;pointer-events:none;transition:opacity var(--t-fast) ease;position:absolute;inset:0;box-shadow:inset 0 0 0 2px}.column--locked:after{opacity:.25}.column__controls{opacity:0;transition:opacity var(--t-fast) ease;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-60%)}@media (hover:hover) and (pointer:fine){.column:hover .column__controls{opacity:1}}.column:focus-within .column__controls{opacity:1}.column__btn{width:36px;height:36px;color:inherit;opacity:.75;transition:transform var(--t-press) var(--ease-out), opacity var(--t-fast) ease, background-color var(--t-fast) ease;background:0 0;border:0;border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.column__btn:hover:not(:disabled){opacity:1;background:color-mix(in srgb, currentColor 14%, transparent)}.column__btn--drag{cursor:grab;touch-action:none}.board--dragging{-webkit-user-select:none;user-select:none;cursor:grabbing}.board--dragging .column__btn--drag{cursor:grabbing}.board--dragging .column__controls,.column__btn--lock.is-on{opacity:1}.column__btn--lock svg{transition:transform var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out)}@starting-style{.column__btn--lock svg{opacity:0;transform:scale(.8)}}.column__move{display:flex}.column__info{text-align:center;flex-direction:column;align-items:center;gap:2px;width:100%;padding:0 8px 40px;display:flex}.column__hex{font-family:var(--mono);letter-spacing:.04em;transition:transform var(--t-press) var(--ease-out), background-color var(--t-fast) ease;background:0 0;border:0;border-radius:8px;padding:6px 10px;font-size:clamp(16px,2.2vw,28px);font-weight:700}.column__hex:hover{background:color-mix(in srgb, currentColor 14%, transparent)}.column__hex-label{transition:filter var(--t-dialog) ease, opacity var(--t-dialog) ease;display:inline-block}.column__hex-label--swapping{filter:blur(2px);opacity:.6}.glyph{text-align:center;min-width:.62em;display:inline-block}.column__name{opacity:.75;min-height:1.2em;font-size:13px}.inserter{z-index:2;width:0;position:relative}.inserter__btn{background:var(--fg);width:34px;height:34px;color:var(--bg);opacity:0;transition:opacity var(--t-fast) ease, transform var(--t-fast) var(--ease-out);border:0;border-radius:50%;justify-content:center;align-items:center;display:inline-flex;position:absolute;top:18%;left:50%;transform:translate(-50%,-50%)scale(.9);box-shadow:0 2px 10px #0000004d}.inserter:hover .inserter__btn,.inserter__btn:focus-visible,.board:hover .inserter__btn{opacity:1;transform:translate(-50%,-50%)scale(1)}.inserter__btn:active{transform:translate(-50%,-50%)scale(.92)}.inserter:before{content:"";width:28px;position:absolute;top:0;bottom:0;left:-14px}.adjust{transform-origin:50% 100%;border-radius:var(--radius);background:var(--surface);width:min(260px,100% - 16px);color:var(--fg);border:1px solid var(--border);z-index:3;cursor:default;transition:opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);flex-direction:column;gap:10px;padding:12px;display:flex;position:absolute;bottom:120px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000073}@starting-style{.adjust{opacity:0;transform:translate(-50%)scale(.95)}}.adjust__row{grid-template-columns:72px 1fr 32px;align-items:center;gap:8px;font-size:12px;display:grid}.adjust__row--head{grid-template-columns:1fr 36px 32px}.adjust__hex{font:600 14px var(--mono);border:1px solid var(--border);background:var(--surface-2);color:var(--fg);border-radius:6px;min-width:0;padding:6px 8px}.adjust__picker{border:1px solid var(--border);background:0 0;border-radius:6px;width:36px;height:32px;padding:0}.adjust__label{color:var(--muted)}.adjust__value{text-align:right;font-family:var(--mono);color:var(--muted)}.adjust__range{appearance:none;background:linear-gradient(to right, var(--from), var(--mid), var(--to));border:1px solid #ffffff1f;border-radius:5px;width:100%;height:10px}.adjust__range--h{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.adjust__range::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border:2px solid #222;border-radius:50%;width:16px;height:16px}.adjust__range::-moz-range-thumb{background:#fff;border:2px solid #222;border-radius:50%;width:14px;height:14px}.toolbar{border-top:1px solid var(--border);background:var(--surface);align-items:center;gap:10px;padding:0 16px;display:flex}.toolbar__group{gap:6px;display:flex}.toolbar__group--right{margin-left:auto}.btn{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2);height:38px;color:var(--fg);white-space:nowrap;transition:transform var(--t-press) var(--ease-out), border-color var(--t-fast) ease, filter var(--t-fast) ease;align-items:center;gap:8px;padding:0 14px;font-size:14px;font-weight:500;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--muted)}.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}.btn--primary:hover:not(:disabled){filter:brightness(1.08);border-color:var(--accent)}.btn--icon{justify-content:center;width:38px;padding:0}.btn--ghost{background:0 0;border-color:#0000}.btn__hint{font:500 11px var(--font);background:#0003;border-radius:5px;padding:2px 6px}@media (pointer:coarse){.btn__hint{display:none}}.dialog{border:1px solid var(--border);background:var(--surface);width:min(680px,100vw - 32px);max-height:calc(100vh - 48px);color:var(--fg);opacity:0;transition:opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), overlay var(--t-fast) allow-discrete, display var(--t-fast) allow-discrete;border-radius:14px;flex-direction:column;padding:0;transform:scale(.97);box-shadow:0 20px 60px #00000080}.dialog[open]{opacity:1;transition-duration:var(--t-dialog);display:flex;transform:none}@starting-style{.dialog[open]{opacity:0;transform:scale(.97)}}.dialog::backdrop{opacity:0;transition:opacity var(--t-fast) ease, overlay var(--t-fast) allow-discrete, display var(--t-fast) allow-discrete;background:#0000008c}.dialog[open]::backdrop{opacity:1;transition-duration:var(--t-dialog)}@starting-style{.dialog[open]::backdrop{opacity:0}}.dialog__head{justify-content:space-between;align-items:center;padding:14px 14px 10px 20px;display:flex}.dialog__title{margin:0;font-size:18px}.dialog__body{flex:1;min-height:0;padding:0 20px;overflow:auto}.dialog__foot{justify-content:flex-end;gap:8px;padding:14px 20px 18px;display:flex}.tabs{border-bottom:1px solid var(--border);gap:4px;padding:0 20px 12px;display:flex}.tab{color:var(--muted);transition:transform var(--t-press) var(--ease-out), background-color var(--t-fast) ease, color var(--t-fast) ease;background:0 0;border:0;border-radius:8px;padding:8px 12px;font-weight:500}.tab--active{background:var(--surface-2);color:var(--fg)}.export__code{border-radius:var(--radius);background:var(--bg);border:1px solid var(--border);font:13px/1.5 var(--mono);white-space:pre;max-height:46vh;margin:14px 0 0;padding:14px;overflow:auto}.export__preview{border-radius:var(--radius);border:1px solid var(--border);width:100%;margin-top:14px;display:block}.export__loading,.extract__status{color:var(--muted);padding:14px 0}.dropzone{border:2px dashed var(--border);border-radius:var(--radius);background:var(--bg);cursor:pointer;min-height:180px;transition:border-color var(--t-fast) ease;justify-content:center;align-items:center;margin-top:14px;display:flex;position:relative;overflow:hidden}.dropzone--over{border-color:var(--accent)}.dropzone__input{opacity:0;cursor:pointer;position:absolute;inset:0}.dropzone__hint{color:var(--muted);text-align:center;flex-direction:column;align-items:center;gap:10px;padding:20px;font-size:14px;display:flex}.dropzone__preview{object-fit:contain;max-width:100%;max-height:260px;display:block}.extract__strand{border-radius:var(--radius);border:1px solid var(--border);margin-top:14px;display:flex;overflow:hidden}.extract__swatch{height:72px;font:600 12px var(--mono);animation:swatch-in .26s var(--ease-out) backwards;animation-delay:calc(var(--i) * 40ms);flex:1;justify-content:center;align-items:flex-end;padding-bottom:8px;display:flex}@keyframes swatch-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.toast{left:50%;bottom:calc(var(--toolbar-h) + 16px);background:var(--fg);color:var(--bg);opacity:0;pointer-events:none;transition:opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);z-index:10;border-radius:999px;padding:10px 16px;font-size:14px;font-weight:500;position:fixed;transform:translate(-50%,8px)}.toast--visible{opacity:1;transition-duration:var(--t-dialog);transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.column,.column__btn--lock svg,.adjust,.dialog,.toast,.inserter__btn{transition-property:opacity,background-color,color,overlay,display}.board--intro .column{transition-delay:0s}.board--intro .glyph,.extract__swatch{animation:none}.btn:active:not(:disabled),.tab:active,.column__btn:active:not(:disabled),.column__hex:active{transform:none}.column__hex-label--swapping{filter:none}}@media (width<=700px){:root{--toolbar-h:112px}.header__tagline{display:none}.board{flex-direction:column}.column{flex-direction:row;justify-content:space-between;padding:0 12px}.column__controls{opacity:1;flex-direction:row;flex:none;order:2;gap:0;position:static;transform:none}.column__btn{width:32px;height:32px}.column__info{text-align:left;flex-direction:column;flex:auto;order:1;align-items:flex-start;gap:0;width:auto;min-width:0;padding:0}.column__hex{white-space:nowrap;margin-left:-6px;padding:4px 6px;font-size:16px}.column__name{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.inserter{width:auto;height:0}.inserter__btn{opacity:1;width:28px;height:28px;top:0;left:60px;transform:translate(-50%,-50%)}.inserter:before{display:none}.adjust{transform-origin:50% 0;width:auto;inset:100% 12px auto;transform:none}@starting-style{.adjust{transform:scale(.95)}}.toolbar{flex-wrap:wrap;gap:8px;padding:10px 12px}.toolbar__group--right{width:100%;margin-left:0}.toolbar__group--right .btn{flex:1;justify-content:center;padding:0 8px}}