body.color-mode{overflow:hidden}
body.color-mode .app{height:100dvh;min-height:0;padding-bottom:0}
body.color-mode .topbar{display:none}
.view-root.color-active{width:100%;max-width:none;height:calc(100dvh - env(safe-area-inset-top));padding:0;overflow:hidden}

.color-shell{
  --color-bg:var(--bg,#070014);--color-surface:var(--foreground,#0f0f0f);--color-surface-2:#171717;
  --color-line:#272727;--color-text:#e8e8e8;--color-muted:#575757;--color-accent:#ff4747;
  --color-wave-accent:var(--special,#5e02ff);--color-good:#7fff9a;--color-close:#ffe066;
  display:flex;flex-direction:column;width:100%;height:100%;min-height:0;background:var(--color-bg);color:var(--color-text);font-family:var(--mono)
}
.color-commandbar{flex:0 0 auto;display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:47px;padding:6px 10px;border-bottom:1px solid var(--color-line);background:color-mix(in srgb,var(--color-bg) 86%,#111 14%)}
.color-home{width:32px;height:32px;padding:0 1px 2px 0;border:1px solid var(--color-line);border-radius:9px;background:var(--color-surface);color:var(--color-text);font-size:23px;line-height:1}
.color-heading{min-width:0}.color-heading strong,.color-heading span{display:block}.color-heading strong{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1;letter-spacing:.03em}.color-heading span{margin-top:3px;color:var(--color-muted);font-size:8px;line-height:1;letter-spacing:.12em}
.color-mode-tabs{display:flex;align-items:center;gap:1px;padding:2px;border:1px solid var(--color-line);border-radius:9px;background:var(--color-surface)}
.color-mode-button{min-height:27px;padding:5px 6px;border:0;border-radius:6px;background:transparent;color:var(--color-muted);font-family:var(--mono);font-size:7px;letter-spacing:.06em}.color-mode-button.is-active{background:color-mix(in srgb,var(--color-wave-accent) 18%,transparent);color:var(--color-wave-accent)}
.color-panel{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}.color-panel[hidden]{display:none}.color-stage{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 10px}
.color-home:active,.color-mode-button:active,.color-add-color:active,.color-palette-cell:active,.color-palette-focus:active,.color-palette-back:active,.color-copy-fill:active,.color-copy-hex:active,.color-save-color:active,.color-delete-color:active,.color-action:active,.color-diff:active,.color-add-wave:active,.color-wave-controls button:active,.color-flicker-toggle:active{transform:scale(.97)}

/* PERSONAL PALETTE / PERIODIC COLOR TABLE */
.color-palette-stage{padding-top:14px}
.color-palette-home,.color-palette-profile{width:min(100%,760px);margin:0 auto}
.color-palette-search-wrap{position:relative;display:grid;grid-template-columns:31px minmax(0,1fr) 34px;align-items:center;min-height:42px;margin-bottom:10px;border:1px solid var(--color-line);border-radius:9px;background:var(--color-surface);overflow:hidden}
.color-palette-search-wrap>span{color:var(--color-wave-accent);font-size:16px;text-align:center}.color-palette-search{width:100%;height:40px;padding:0 4px;border:0;outline:0;background:transparent;color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;-webkit-user-select:text;user-select:text}.color-palette-search::placeholder{color:#353535}.color-palette-search-clear{height:40px;border:0;background:transparent;color:#676767;font-size:18px}
.color-palette-focus{display:grid;grid-template-columns:62px minmax(0,1fr) 24px;align-items:center;gap:12px;width:100%;min-height:78px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--color-wave-accent) 52%,var(--color-line));border-radius:11px;background:color-mix(in srgb,var(--color-wave-accent) 7%,var(--color-surface));text-align:left}
.color-palette-focus-swatch{display:grid;place-items:center;width:58px;aspect-ratio:1;border:1px solid rgba(255,255,255,.12);border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:22px;font-weight:750;letter-spacing:-.04em}.color-palette-focus-copy{min-width:0}.color-palette-focus-copy>*{display:block}.color-palette-focus-name{overflow:hidden;color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:17px;line-height:1.08;text-overflow:ellipsis;white-space:nowrap}.color-palette-focus-copy small{margin-top:5px;color:#707070;font-size:8px;letter-spacing:.08em}.color-palette-focus-rgb{margin-top:3px!important;color:#4d4d4d!important}.color-palette-focus-open{color:var(--color-wave-accent);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:30px;text-align:right}
.color-palette-table-head{display:flex;align-items:center;justify-content:space-between;margin:15px 2px 7px}.color-palette-table-head strong{color:var(--color-wave-accent);font-size:8px;letter-spacing:.15em}.color-palette-table-head span{color:#414141;font-size:7px;letter-spacing:.12em}
.color-palette-table-frame{position:relative;padding:8px;border:1px solid var(--color-line);border-radius:11px;background:color-mix(in srgb,var(--color-surface) 92%,#151515 8%)}
.color-palette-table{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;min-height:44px}
.color-palette-cell{position:relative;display:grid;place-items:center;width:100%;min-width:0;aspect-ratio:1;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);outline:0;-webkit-tap-highlight-color:transparent}.color-palette-cell>span{position:absolute;top:3px;left:4px;font-size:5.7px;font-weight:500;line-height:1;opacity:.55}.color-palette-cell>strong{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;font-weight:750;line-height:1;letter-spacing:-.04em;text-shadow:0 1px 2px rgba(0,0,0,.15)}.color-palette-cell.is-selected{z-index:2;outline:2px solid var(--color-wave-accent);outline-offset:2px}
.color-palette-empty{margin:20px 0;color:#4b4b4b;font-size:8px;letter-spacing:.12em;text-align:center}.color-palette-note{margin:8px 0 0;color:#3c3c3c;font-size:6.8px;letter-spacing:.1em;text-align:center}
.color-palette-actions{flex:0 0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:8px 10px max(8px,env(safe-area-inset-bottom));border-top:1px solid var(--color-line);background:color-mix(in srgb,var(--color-bg) 86%,#111 14%)}.color-palette-status{color:#505050;font-size:7px;letter-spacing:.1em;white-space:nowrap}.color-palette-status.is-error{color:#b75b5b}.color-add-color{min-height:39px;padding:7px 12px;border:1px solid color-mix(in srgb,var(--color-wave-accent) 55%,#303030);border-radius:8px;background:color-mix(in srgb,var(--color-wave-accent) 10%,var(--color-surface));color:var(--color-wave-accent);font-family:var(--mono);font-size:9px;letter-spacing:.1em}
.color-palette-back{min-height:36px;margin-bottom:10px;padding:0 11px;border:1px solid var(--color-line);border-radius:8px;background:var(--color-surface);color:var(--color-wave-accent);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;font-weight:650}
.color-palette-identity{display:grid;grid-template-columns:96px minmax(0,1fr);gap:15px;align-items:center;margin-bottom:10px;padding:12px;border:1px solid color-mix(in srgb,var(--color-wave-accent) 45%,var(--color-line));border-radius:12px;background:color-mix(in srgb,var(--color-wave-accent) 7%,var(--color-surface))}.color-palette-identity-swatch{display:grid;grid-template-rows:1fr auto;place-items:center;width:92px;aspect-ratio:1;border:1px solid rgba(255,255,255,.18);border-radius:10px;overflow:hidden}.color-palette-identity-swatch strong{align-self:end;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:33px;line-height:1;font-weight:780;letter-spacing:-.06em}.color-palette-identity-swatch small{align-self:end;margin-bottom:7px;font-size:6px;opacity:.58}.color-palette-identity-copy{min-width:0}.color-palette-identity-copy p{margin:0 0 5px;color:#575757;font-size:7px;letter-spacing:.14em}.color-palette-identity-copy h1{margin:0;overflow-wrap:anywhere;color:var(--color-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:26px;line-height:1;font-weight:760;letter-spacing:-.035em}.color-palette-identity-copy span{display:block;margin-top:8px;color:#5d5d5d;font-size:8px;letter-spacing:.08em}
.color-editor-card{padding:10px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-surface)}.color-editor-picker-row{display:grid;grid-template-columns:58px minmax(0,1fr);gap:9px}.color-editor-picker{width:58px;height:58px;padding:2px;border:1px solid #343434;border-radius:8px;background:#111}.color-editor-hex-label,.color-editor-name-row label,.color-editor-rgb label{min-width:0}.color-editor-card label>span{display:block;margin:0 0 4px;color:#555;font-size:7px;letter-spacing:.11em}.color-editor-card input:not([type=color]){width:100%;min-width:0;height:39px;padding:0 9px;border:1px solid #2d2d2d;border-radius:7px;outline:0;background:#131313;color:#ddd;font-family:var(--mono);font-size:16px;-webkit-user-select:text;user-select:text}.color-editor-card input:focus{border-color:color-mix(in srgb,var(--color-wave-accent) 62%,#333)}.color-editor-hex{font-size:18px!important;text-transform:uppercase}.color-editor-name-row{display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px;margin-top:8px}.color-editor-symbol{text-align:center;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-weight:750}.color-editor-rgb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:8px}.color-editor-rgb input{text-align:center;font-variant-numeric:tabular-nums}
.color-palette-reference{margin-top:10px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-surface);overflow:hidden}.color-palette-section-head{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-bottom:1px solid var(--color-line)}.color-palette-section-head strong{color:var(--color-wave-accent);font-size:8px;letter-spacing:.14em}.color-palette-section-head span{color:#454545;font-size:7px;letter-spacing:.1em}.color-palette-facts{display:grid;grid-template-columns:1fr 1fr}.color-palette-fact{min-width:0;padding:9px 10px;border-right:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}.color-palette-fact:nth-child(2n){border-right:0}.color-palette-fact:nth-last-child(-n+2){border-bottom:0}.color-palette-fact span,.color-palette-fact strong{display:block}.color-palette-fact span{color:#4b4b4b;font-size:6.5px;letter-spacing:.1em}.color-palette-fact strong{margin-top:5px;color:#aaa;font-size:10px;font-weight:500;word-break:break-word}
.color-harmonies{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:8px}.color-harmony{position:relative;min-width:0;aspect-ratio:1;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:var(--harmony);color:var(--harmony-ink);overflow:hidden}.color-harmony span{position:absolute;top:4px;left:4px;font-size:5.5px;font-weight:700;letter-spacing:.05em}.color-harmony strong{position:absolute;right:3px;bottom:4px;left:3px;overflow:hidden;font-size:5.2px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.color-palette-profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.color-palette-profile-actions button{min-height:40px;padding:7px 8px;border:1px solid #343434;border-radius:8px;background:var(--color-surface);color:#8e8e8e;font-family:var(--mono);font-size:8px;letter-spacing:.08em}.color-palette-profile-actions .color-copy-fill{border-color:color-mix(in srgb,var(--color-wave-accent) 60%,#343434);color:var(--color-wave-accent)}.color-palette-profile-actions .color-save-color{border-color:var(--color-wave-accent);background:var(--color-wave-accent);color:#fff;font-weight:700}.color-palette-profile-actions .color-delete-color{border-color:#4c2929;color:#9a5555}

/* WAVELENGTH */
.color-wave-stage{padding-top:12px}.color-wave-intro,.color-flicker-intro{width:min(100%,720px);margin:0 auto 10px}.color-wave-intro h1,.color-flicker-intro h1{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:19px;font-weight:650;line-height:1;letter-spacing:-.02em}.color-wave-intro p,.color-flicker-intro p{margin:5px 0 0;color:var(--color-muted);font-size:7px;line-height:1.2;letter-spacing:.12em}.color-wave-rows{display:flex;flex-direction:column;gap:3px;width:min(100%,720px);margin:0 auto}.color-wave-row{display:grid;grid-template-columns:minmax(102px,130px) minmax(0,1fr) 62px;align-items:stretch;gap:5px;min-height:30px}.color-wave-number{display:grid;grid-template-columns:minmax(0,1fr) 23px;align-items:center;min-width:0;overflow:hidden;border:1px solid var(--color-line);border-radius:6px;background:var(--color-surface)}.color-wave-input{width:100%;min-width:0;height:100%;padding:0 5px 0 7px;border:0;outline:0;background:transparent;color:var(--color-text);font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums;text-align:right;-webkit-user-select:text;user-select:text}.color-wave-input:focus{color:var(--color-wave-accent)}.color-wave-unit{color:var(--color-muted);font-size:7px;letter-spacing:.05em;text-align:left}.color-wave-display{position:relative;min-width:0;min-height:30px;overflow:hidden;border:1px solid #343434;border-radius:6px;background:var(--color-surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);transition:background-color .08s linear,border-color .08s linear}.color-wave-display.is-empty{background:var(--color-surface)!important}.color-wave-display.is-symbolic::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(255,255,255,.025) 8px 9px);pointer-events:none}.color-wave-band{position:absolute;right:6px;top:50%;z-index:1;transform:translateY(-50%);color:rgba(255,255,255,.58);font-size:6.5px;font-weight:600;letter-spacing:.09em;text-shadow:0 1px 2px rgba(0,0,0,.75)}.color-wave-row.is-invalid .color-wave-number{border-color:var(--color-accent)}.color-wave-controls{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:1px solid var(--color-line);border-radius:6px;background:var(--color-surface)}.color-wave-controls button{min-width:0;padding:0;border:0;border-right:1px solid var(--color-line);background:transparent;color:#676767;font-family:var(--mono);font-size:9px}.color-wave-controls button:last-child{border-right:0}.color-wave-delete{color:#8c5555!important;font-size:13px!important}.color-wave-empty{margin:22px auto;color:var(--color-muted);font-size:8px;letter-spacing:.12em;text-align:center}.color-wave-actions{flex:0 0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:8px 10px max(8px,env(safe-area-inset-bottom));border-top:1px solid var(--color-line);background:color-mix(in srgb,var(--color-bg) 86%,#111 14%)}.color-wave-status{color:#505050;font-size:7px;letter-spacing:.1em;white-space:nowrap}.color-add-wave{min-height:39px;padding:7px 12px;border:1px solid color-mix(in srgb,var(--color-wave-accent) 55%,#303030);border-radius:8px;background:color-mix(in srgb,var(--color-wave-accent) 10%,var(--color-surface));color:var(--color-wave-accent);font-family:var(--mono);font-size:9px;letter-spacing:.1em}

/* FLICKER */
.color-flicker-stage{display:flex;flex-direction:column;gap:10px;padding-top:12px}.color-flicker-controls,.color-flicker-rate-panel,.color-flicker-preview{width:min(100%,720px);margin-left:auto;margin-right:auto}.color-flicker-controls{display:grid;grid-template-columns:1fr 1fr;gap:7px}.color-flicker-controls label>span,.color-flicker-rate-head>span{display:block;margin-bottom:4px;color:var(--color-muted);font-size:7px;letter-spacing:.1em}.color-flicker-value-row,.color-flicker-select,.color-flicker-rate-head>div{min-height:38px;border:1px solid var(--color-line);border-radius:7px;background:var(--color-surface)}.color-flicker-value-row{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center}.color-flicker-input,.color-flicker-number{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--color-text);font-family:var(--mono);font-variant-numeric:tabular-nums;-webkit-user-select:text;user-select:text}.color-flicker-input{height:100%;padding:0 6px 0 10px;font-size:13px;text-align:right}.color-flicker-input.is-invalid{color:var(--color-accent)}.color-flicker-value-row b,.color-flicker-rate-head b{color:var(--color-muted);font-size:8px;font-weight:400}.color-flicker-select{width:100%;padding:0 9px;color:var(--color-text);font-family:var(--mono);font-size:9px;appearance:none}.color-flicker-preview{position:relative;flex:1 1 auto;min-height:260px;overflow:hidden;border:1px solid var(--color-line);border-radius:10px;background:#050505}.color-flicker-field{--flicker-period:.5s;position:absolute;inset:0;background:#a7ff00}.color-flicker-preview.is-running .color-flicker-field{animation:color-flicker-blink var(--flicker-period) steps(1,end) infinite}@keyframes color-flicker-blink{0%,49.999%{opacity:1}50%,100%{opacity:0}}.color-flicker-band{position:absolute;left:10px;bottom:9px;z-index:2;padding:4px 6px;border-radius:5px;background:rgba(0,0,0,.45);color:rgba(255,255,255,.74);font-size:7px;letter-spacing:.09em;backdrop-filter:blur(5px)}.color-flicker-rate-panel{display:grid;grid-template-columns:1fr auto;grid-template-areas:"head head" "range button";gap:8px 10px;align-items:center}.color-flicker-rate-head{grid-area:head;display:flex;align-items:end;justify-content:space-between}.color-flicker-rate-head>div{display:grid;grid-template-columns:58px 22px;align-items:center;min-height:32px}.color-flicker-number{height:100%;padding:0 4px 0 8px;font-size:11px;text-align:right}.color-flicker-range{grid-area:range;width:100%;accent-color:var(--color-wave-accent)}.color-flicker-toggle{grid-area:button;min-width:86px;min-height:38px;border:1px solid var(--color-wave-accent);border-radius:7px;background:color-mix(in srgb,var(--color-wave-accent) 13%,var(--color-surface));color:var(--color-wave-accent);font-family:var(--mono);font-size:9px;letter-spacing:.1em}.color-flicker-toggle[aria-pressed=true]{background:var(--color-wave-accent);color:#fff}

/* PERCEPTION TEST */
.color-intro{position:relative;text-align:center}.color-intro h1{margin:0;color:var(--color-text);font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,9vw,42px);font-style:italic;font-weight:700;line-height:1;letter-spacing:-.03em}.color-intro p{margin:7px 0 0;color:#565656;font-size:8.5px;line-height:1.15;letter-spacing:.16em}.color-header-score{position:absolute;top:0;right:0;min-width:46px;color:var(--color-muted);font-family:Georgia,"Times New Roman",serif;font-size:18px;font-variant-numeric:tabular-nums;text-align:right}.color-header-score.is-perfect{color:var(--color-good)}.color-header-score.is-close{color:var(--color-close)}.color-header-score.is-bad{color:var(--color-accent)}.color-difficulty{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:min(100%,330px);margin:16px auto 0}.color-diff{min-height:34px;padding:6px 8px;border:1px solid var(--color-line);border-radius:18px;background:transparent;color:var(--color-muted);font-family:var(--mono);font-size:9px;letter-spacing:.11em}.color-diff.is-active{border-color:var(--color-accent);background:#171313;color:var(--color-accent)}.color-hint{min-height:12px;margin:14px 0 8px;color:#5c5c5c;font-size:8px;line-height:1.2;letter-spacing:.08em;text-align:center}.color-rows{display:flex;flex-direction:column;gap:13px;width:min(100%,720px);margin:0 auto}.color-row{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:5px;min-width:0}.color-row-label{min-width:0;color:#555;text-align:right}.color-row-label strong,.color-row-label span{display:block}.color-row-label strong{font-size:8px;font-weight:400;line-height:1}.color-row-label span{display:none}.color-swatches{display:grid;grid-template-columns:repeat(var(--swatch-count),minmax(0,1fr));gap:3px;min-width:0}.color-swatch{position:relative;width:100%;min-width:0;aspect-ratio:1;padding:0;border:2px solid transparent;border-radius:7px;box-shadow:none;outline:none;touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform .09s ease,border-color .09s ease,box-shadow .09s ease,opacity .09s ease}.color-swatch.is-anchor{border-color:#494949;opacity:.82}.color-swatch.is-anchor::after{content:"";position:absolute;left:50%;bottom:-6px;width:5px;height:2px;border-radius:2px;background:#454545;transform:translateX(-50%)}.color-swatch.is-selected{z-index:3;border-color:#f2f2f2;box-shadow:0 0 0 2px #0e0e0e,0 0 0 3px #8d8d8d;transform:translateY(-4px) scale(1.04)}.color-swatch.is-drag-source{opacity:.22;transform:scale(.94)}.color-swatch.is-drop-target{z-index:4;border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.28);transform:translateY(-3px) scale(1.07)}.color-swatch.is-correct{animation:color-correct .55s ease}.color-swatch.is-wrong{animation:color-wrong .55s ease}@keyframes color-correct{0%,100%{box-shadow:none}50%{box-shadow:0 0 18px 4px rgba(80,255,120,.72)}}@keyframes color-wrong{0%,100%{box-shadow:none}50%{box-shadow:0 0 18px 4px rgba(255,60,60,.72)}}.color-drag-ghost{position:fixed;z-index:10000;left:0;top:0;border:2px solid rgba(255,255,255,.82);border-radius:8px;box-shadow:0 10px 32px rgba(0,0,0,.72);opacity:.96;pointer-events:none;transform:scale(1.18)}.color-result{min-height:68px;padding:12px 4px 0;text-align:center}.color-result strong,.color-result span{display:block}.color-result strong{color:var(--color-accent);font-family:Georgia,"Times New Roman",serif;font-size:43px;font-weight:400;line-height:.95}.color-result span{margin-top:6px;color:#747474;font-size:8.5px;line-height:1.25}.color-result.is-perfect strong{color:var(--color-good)}.color-result.is-close strong{color:var(--color-close)}.color-result.is-bad strong{color:var(--color-accent)}.color-actions{flex:0 0 auto;display:grid;grid-template-columns:.8fr 1.35fr .8fr;gap:6px;padding:8px 10px max(8px,env(safe-area-inset-bottom));border-top:1px solid var(--color-line);background:#111}.color-action{min-height:43px;padding:8px 10px;border:1px solid #3a3a3a;border-radius:8px;background:var(--color-surface);color:#bdbdbd;font-family:var(--mono);font-size:10px;letter-spacing:.1em}.color-check{border-color:var(--color-accent);background:var(--color-accent);color:#fff;font-weight:700}.color-new{border-color:#606060;color:var(--color-text)}

@media (min-width:560px){.color-stage{padding-left:20px;padding-right:20px}.color-palette-table{grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}.color-row{grid-template-columns:92px minmax(0,1fr);gap:9px}.color-row-label strong{font-size:9px}.color-row-label span{display:block;margin-top:3px;font-size:7px;letter-spacing:.05em}.color-swatches{gap:5px}}
@media (max-width:430px){.color-commandbar{grid-template-columns:34px minmax(50px,1fr) auto}.color-mode-button{padding-left:5px;padding-right:5px;font-size:6.6px;letter-spacing:.035em}.color-palette-table{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}.color-palette-table-frame{padding:7px}.color-palette-cell>strong{font-size:12px}.color-wave-row{grid-template-columns:108px minmax(0,1fr) 55px;gap:4px}.color-wave-input{padding-left:4px;font-size:10.5px}.color-flicker-controls{grid-template-columns:1fr}.color-flicker-preview{min-height:240px}}
@media (max-width:360px){.color-heading strong{font-size:12px}.color-heading span{font-size:6.8px}.color-mode-button{padding-left:4px;padding-right:4px;font-size:6.1px}.color-palette-table{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media (max-height:720px){.color-stage{padding-top:9px}.color-flicker-preview{min-height:190px}.color-intro h1{font-size:29px}.color-intro p{margin-top:4px}.color-difficulty{margin-top:9px}.color-hint{margin-top:9px}.color-rows{gap:8px}.color-result{min-height:54px}}