:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--background:#f6f6f4;--surface:#fff;--text:#1d1f22;--muted:#62686f;--line:#d8dce0;--line-strong:#aeb5bc;--action:#2446d8;--action-text:#fff;--danger:#b42318;--shadow:0 1px 2px #00000014}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--background);min-height:100vh;color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,a,summary{font:inherit}button{border:1px solid var(--line-strong);background:var(--surface);min-height:2.5rem;color:var(--text);cursor:pointer;border-radius:6px;padding:0 .9rem}button:disabled{cursor:not-allowed;opacity:.58}button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline-offset:2px;outline:3px solid #2446d847}.app{width:min(100% - 2rem,920px);margin:0 auto;padding:2rem 0}.app-header,.summary-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;display:flex}h1,h2,p{margin:0}h1{font-size:clamp(1.6rem,5vw,2.2rem);font-weight:700}h2{font-size:1.35rem}.control-label{color:var(--muted);margin-bottom:.4rem;font-size:.88rem;display:block}.nav-link{min-height:2.5rem;color:var(--text);text-underline-offset:.18rem;align-items:center;display:inline-flex}.mode-group{border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;grid-template-columns:repeat(2,minmax(0,1fr));display:inline-grid;overflow:hidden}.mode-button{border:0;border-right:1px solid var(--line-strong);border-radius:0;min-width:6.5rem}.mode-button:last-child{border-right:0}.mode-button[aria-pressed=true]{background:var(--text);color:var(--surface)}.primary-button{border-color:var(--action);background:var(--action);color:var(--action-text)}.secondary-button{background:var(--surface)}.start-panel,.game-panel,.summary-panel{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:8px;padding:1rem}.start-panel{grid-template-columns:1fr;align-items:start;gap:1rem;display:grid}.start-panel[hidden]{display:none}.start-panel p{max-width:42rem;color:var(--muted);margin-top:.45rem;line-height:1.5}.start-actions,.summary-actions{gap:.75rem;display:grid}.how-to-details{border:1px solid var(--line);background:var(--background);border-radius:7px}.how-to-details summary{min-height:2.75rem;color:var(--text);cursor:pointer;padding:.7rem .85rem;font-weight:650}.how-to-content{border-top:1px solid var(--line);gap:1rem;padding:1rem;display:grid}.how-to-content h3{margin:0;font-size:1rem}.how-to-content p{margin-top:.4rem}.how-to-content strong{color:var(--text)}.mode-control{min-width:0}.round-bar{min-height:2rem;color:var(--muted);justify-content:space-between;align-items:center;gap:1rem;display:flex}.mode-pill{border:1px solid var(--line);background:var(--background);color:var(--text);border-radius:999px;padding:.25rem .65rem;font-size:.88rem}.timer{text-align:right;font-variant-numeric:tabular-nums;min-width:4.25rem;color:var(--text)}.play-area{grid-template-columns:minmax(220px,1fr) minmax(280px,340px);align-items:stretch;gap:1rem;margin-top:1rem;display:grid}.swatch-card,.guess-form{flex-direction:column;gap:.75rem;min-height:100%;display:flex}.target-swatch{aspect-ratio:1;border:1px solid var(--line-strong);border-radius:7px;width:100%;min-height:320px}.guess-form>label,.result-label{color:var(--muted);font-size:.88rem}.guess-preview{border:1px solid var(--line);background:var(--background);border-radius:7px;min-height:6.85rem;padding:.75rem;display:block}.created-swatch{border:1px solid var(--line-strong);border-radius:6px;width:100%;height:100%;min-height:5.35rem;display:block}.basic-entry{gap:.75rem;display:grid}.slider-row{--slider-color:gray;border:1px solid var(--line);border-left:.4rem solid var(--slider-color);background:var(--surface);border-radius:7px;gap:.45rem;padding:.75rem;display:grid}.slider-meta{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.slider-value{color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #00000073;font-weight:700}.rgb-slider{--slider-color:gray;--slider-progress:50%;appearance:none;background:linear-gradient(90deg, var(--slider-color) 0%, var(--slider-color) var(--slider-progress), var(--line) var(--slider-progress), var(--line) 100%);cursor:pointer;border-radius:999px;width:100%;height:.7rem}.rgb-slider:disabled{cursor:not-allowed}.rgb-slider::-webkit-slider-thumb{appearance:none;border:2px solid var(--surface);background:var(--slider-color);width:1.25rem;height:1.25rem;box-shadow:0 0 0 1px var(--line-strong);border-radius:50%}.rgb-slider::-moz-range-thumb{border:2px solid var(--surface);background:var(--slider-color);width:1.25rem;height:1.25rem;box-shadow:0 0 0 1px var(--line-strong);border-radius:50%}.hex-entry{grid-template-columns:repeat(6,minmax(0,1fr));gap:.45rem;display:grid}.hex-box{aspect-ratio:1;border:1px solid var(--line-strong);letter-spacing:0;text-align:center;background:var(--surface);width:100%;min-height:2.75rem;color:var(--text);font-variant-numeric:tabular-nums;border-radius:6px;padding:0;font-size:1.15rem;font-weight:650}.field-message{min-height:1.25rem;color:var(--danger);font-size:.9rem}.form-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:auto;display:grid}.feedback-panel{border-top:1px solid var(--line);margin-top:1rem;padding-top:1rem}.swatch-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;display:grid}.swatch-result{grid-template-rows:auto auto;grid-template-columns:2.5rem minmax(0,auto);align-items:center;column-gap:.65rem;min-width:0;display:grid}.mini-swatch{border:1px solid var(--line-strong);border-radius:5px;grid-row:span 2;width:2.5rem;height:2.5rem}.mini-swatch.missing,.created-swatch.missing{background:linear-gradient(45deg, transparent 47%, var(--line-strong) 48%, var(--line-strong) 52%, transparent 53%), linear-gradient(-45deg, transparent 47%, var(--line-strong) 48%, var(--line-strong) 52%, transparent 53%), var(--background)}.swatch-result strong{overflow-wrap:anywhere;min-width:0;font-size:.95rem}.feedback-score{margin-top:1rem;font-weight:650}.pair-scores{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.75rem;display:grid}.pair-score{border:1px solid var(--line);text-align:center;background:var(--background);border-radius:7px;gap:.2rem;padding:.55rem;display:grid}.pair-score .column-label{color:var(--muted);font-size:.76rem}.pair-score strong,.pair-score span:last-child{font-size:.9rem}#next-button,.summary-panel{margin-top:1rem}.summary-header p{color:var(--muted);margin-top:.25rem}.results-list{gap:.75rem;display:grid}.result-row{border:1px solid var(--line);border-radius:7px;grid-template-columns:3.25rem minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.35fr) minmax(0,.65fr) minmax(0,.7fr) minmax(0,.6fr);align-items:center;gap:.75rem;padding:.75rem;display:grid}.result-row span{min-width:0}.result-row .column-label{color:var(--muted);margin-bottom:.2rem;font-size:.78rem;display:block}.result-value{overflow-wrap:anywhere}.hidden{display:none}.text-page{width:min(100% - 2rem,760px)}.content-panel{border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:8px;padding:1rem}.content-panel h2{margin-top:1.5rem}.content-panel h2:first-child{margin-top:0}.content-panel p{color:var(--muted);margin-top:.55rem;line-height:1.55}.content-panel strong{color:var(--text)}.example-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin-top:1rem;display:grid}.example-grid div{border:1px solid var(--line);border-radius:7px;grid-template-columns:2.5rem minmax(0,1fr);align-items:center;gap:.35rem;min-width:0;padding:.75rem;display:grid}.example-grid .mini-swatch{grid-row:span 2}.example-grid span:last-child{color:var(--muted);font-size:.88rem}@media (width<=720px){.app{width:min(100% - 1rem,920px);padding:1rem 0}.app-header,.summary-header{flex-direction:column;align-items:stretch}.start-panel{grid-template-columns:1fr}.nav-link{justify-content:center}.mode-group,.secondary-button,.primary-button{width:100%}.round-bar{flex-direction:column;align-items:flex-start}.play-area,.swatch-pair,.result-row{grid-template-columns:1fr}.target-swatch{min-height:0}.guess-preview{min-height:5.85rem}.created-swatch{min-height:4.35rem}.hex-entry{gap:.35rem}.pair-scores,.form-actions{grid-template-columns:1fr}.example-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--background:#111315;--surface:#1a1d20;--text:#f2f3f4;--muted:#a2aab2;--line:#343a40;--line-strong:#555e66;--action:#8ca2ff;--action-text:#111315;--danger:#ffb4ab;--shadow:none}.mode-button[aria-pressed=true]{background:var(--text);color:var(--background)}}