:root{--paper:#f5f0e6;--ink:#171717;--muted:#6c6962;--line:#cfc8bb;--panel:#fffdf7;--red:#e53935;--green:#2aa84a;--blue:#1478e8;--good:#1f6b3b;--bad:#9a2d2d}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:Georgia,"Times New Roman",serif}.wrap{width:min(820px,100%);margin:auto;padding:20px 20px 46px}.back{font:700 11px Arial,sans-serif;text-transform:uppercase;letter-spacing:1px;color:inherit;text-decoration:none}header{text-align:center;border-top:5px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 0 13px;margin-top:10px}.logo{font:900 clamp(38px,9vw,66px)/.88 Arial Black,Impact,sans-serif;letter-spacing:-2px;text-transform:uppercase}.logo .r{color:var(--red)}.logo .g{color:var(--green)}.logo .b{color:var(--blue)}.edition{margin-top:10px;font:700 12px Arial,sans-serif;letter-spacing:2px;text-transform:uppercase}.dek{text-align:center;margin:21px auto 0;font:600 14px/1.4 Arial,sans-serif;color:var(--muted)}.card{margin-top:20px;padding:24px 20px;background:var(--panel);border:1px solid var(--line);box-shadow:0 3px 0 #0000000d}.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}.swatch-block{text-align:center}.swatch-label{margin-bottom:8px;font:800 11px Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}.swatch{width:100%;aspect-ratio:4/3;border:2px solid var(--ink);background:#e7e2d8}.swatch.guess.empty{display:grid;place-items:center;background:#eee9df;color:var(--muted);font:700 12px Arial,sans-serif;text-transform:uppercase;letter-spacing:1px}.compare-note{min-height:20px;text-align:center;margin:12px 0 0;font:700 13px Arial,sans-serif;color:var(--muted)}.controls{margin-top:24px;border-top:1px solid var(--line);padding-top:20px}.channel{display:grid;grid-template-columns:24px 1fr 66px;gap:12px;align-items:center;margin:20px 0}.letter{font:900 18px Arial,sans-serif}.channel.r .letter{color:var(--red)}.channel.g .letter{color:var(--green)}.channel.b .letter{color:var(--blue)}.range-shell{position:relative;height:42px;display:flex;align-items:center}.range-shell::before{content:"";position:absolute;left:0;right:0;top:18px;height:5px;background:#d4cec2}.blocked{position:absolute;top:18px;height:5px;background:#a9a398;opacity:.8;pointer-events:none}.blocked.left{left:0;width:calc(var(--low) * 100% / 255)}.blocked.right{right:0;width:calc((255 - var(--high)) * 100% / 255)}.marker{position:absolute;top:27px;transform:translateX(-50%);font:700 9px Arial,sans-serif;color:var(--muted)}.marker.low{left:calc(var(--low) * 100% / 255)}.marker.high{left:calc(var(--high) * 100% / 255)}input[type=range]{position:relative;z-index:2;width:100%;margin:0;appearance:none;background:transparent;height:32px}input[type=range]::-webkit-slider-runnable-track{height:5px;background:transparent}input[type=range]::-moz-range-track{height:5px;background:transparent}input[type=range]::-webkit-slider-thumb{appearance:none;width:19px;height:19px;border-radius:50%;background:var(--ink);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--ink);margin-top:-7px;cursor:pointer}input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--ink);border:2px solid var(--panel);box-shadow:0 0 0 1px var(--ink);cursor:pointer}.num{width:66px;border:2px solid var(--ink);background:#fff;padding:9px 6px;text-align:center;font:800 16px Arial,sans-serif}.feedback{font:800 12px Arial,sans-serif;text-align:center;min-height:18px}.guess-btn,.secondary{display:block;border:2px solid var(--ink);border-radius:0;padding:13px 18px;font:800 13px Arial,sans-serif;letter-spacing:.7px;text-transform:uppercase;cursor:pointer}.guess-btn{width:min(270px,100%);margin:18px auto 0;background:var(--ink);color:#fff}.secondary{background:transparent;color:var(--ink)}button:disabled,input:disabled{opacity:.48;cursor:not-allowed}.attempts{display:flex;justify-content:center;gap:8px;margin-top:19px}.pip{width:44px;height:8px;border:1px solid var(--ink)}.pip.used{background:var(--ink)}.guess-label{text-align:center;margin-top:8px;font:700 10px Arial,sans-serif;color:var(--muted);letter-spacing:1px;text-transform:uppercase}.history{margin-top:22px;border-top:1px solid var(--line);padding-top:15px}.history h2,.result h2,.stats h2{font-size:20px;text-align:center;margin:0 0 13px}.history-row{display:grid;grid-template-columns:36px 42px 1fr 1fr 1fr 68px;gap:7px;align-items:center;padding:8px 0;border-bottom:1px solid #e5dfd4;font:700 12px Arial,sans-serif}.mini{height:28px;border:1px solid #999}.arrow.up{color:var(--good)}.arrow.down{color:var(--bad)}.arrow.hit{color:var(--good)}.result,.stats{display:none;margin-top:24px;border-top:3px double var(--ink);padding-top:20px;text-align:center}.result.show,.stats.show{display:block}.big-score{font:900 clamp(44px,12vw,68px)/1 Arial,sans-serif;margin:4px 0}.accuracy{font:800 22px Arial,sans-serif}.rank{margin-top:7px;font:700 14px Arial,sans-serif;color:var(--muted)}.answer-rgb{margin:14px 0;font:800 13px Arial,sans-serif}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:17px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat strong{display:block;font:800 28px Arial,sans-serif}.stat span{display:block;margin-top:5px;font:700 9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.8px;color:var(--muted)}.rules{margin:23px 2px 0;padding-top:15px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font:13px/1.55 Arial,sans-serif}.rules strong{color:var(--ink)}.share-status{min-height:18px;margin-top:9px;font:700 12px Arial,sans-serif;color:var(--muted)}
@media(max-width:580px){.compare{gap:10px}.card{padding:18px 14px}.channel{grid-template-columns:20px 1fr 58px;gap:8px}.num{width:58px}.history-row{grid-template-columns:28px 32px 1fr 1fr 1fr 56px;font-size:10px}.stats-grid{grid-template-columns:repeat(2,1fr)}.actions{flex-direction:column}.actions button{width:100%}}