@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Sora',sans-serif;background:#0c0c0f;color:#e0e0e8;line-height:1.72}a{color:#818cf8}
header{max-width:740px;margin:0 auto;padding:14px 20px;display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid #1e1e28}
.logo{font-size:1.05rem;font-weight:700;color:#818cf8;text-decoration:none}
.logo span{font-family:'IBM Plex Mono',monospace;font-weight:400;color:#555;font-size:.75rem}
header nav a{font-size:.7rem;color:#555;text-decoration:none;margin-left:10px}header nav a:hover{color:#818cf8}
.page{max-width:740px;margin:0 auto;padding:0 20px}
.hero{padding:40px 0 24px;text-align:center}
.hero h1{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:700;margin-bottom:8px}
.hero h1 em{color:#818cf8}
.hero p{font-size:.88rem;color:#666;max-width:420px;margin:0 auto}
.modes{display:flex;gap:8px;justify-content:center;margin:16px 0}
.mode-btn{padding:8px 18px;font-size:.78rem;font-weight:700;border:1px solid #1e1e28;border-radius:20px;background:transparent;color:#888;cursor:pointer}
.mode-btn:hover{border-color:#818cf8;color:#818cf8}
.mode-btn.on{background:#818cf8;color:#fff;border-color:#818cf8}
.game{background:#12121a;border:1px solid #1e1e28;border-radius:12px;padding:24px;margin:16px 0;text-align:center}
.color-swatch{width:180px;height:180px;border-radius:16px;margin:0 auto 16px;border:2px solid #1e1e28}
.hex-display{font-family:'IBM Plex Mono',monospace;font-size:1.6rem;color:#818cf8;margin-bottom:12px}
.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:360px;margin:0 auto 16px}
.color-opt{aspect-ratio:1;border-radius:10px;cursor:pointer;border:3px solid transparent;transition:.15s}
.color-opt:hover{border-color:#fff;transform:scale(1.05)}
.color-opt.right{border-color:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.3)}
.color-opt.nope{border-color:#ef4444;opacity:.5}
.hex-input{font-family:'IBM Plex Mono',monospace;font-size:1.2rem;padding:10px 16px;border:2px solid #1e1e28;border-radius:8px;background:#0c0c0f;color:#e0e0e8;text-align:center;width:180px}
.hex-input:focus{outline:none;border-color:#818cf8}
.feedback{font-size:.9rem;font-weight:600;margin:12px 0;min-height:24px}
.gbtn{font-size:.78rem;font-weight:700;padding:7px 18px;border:1px solid #1e1e28;border-radius:8px;background:#12121a;color:#e0e0e8;cursor:pointer}
.gbtn:hover{border-color:#818cf8;color:#818cf8}
.gbtn.hi{background:#818cf8;color:#fff;border-color:#818cf8}
.score-bar{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:#555;margin-top:12px}
.learn{padding:24px 0 40px}
.learn h2{font-size:1.1rem;font-weight:700;margin-bottom:12px;color:#818cf8}
.learn p{font-size:.84rem;color:#888;line-height:1.6;margin-bottom:10px}
.color-table{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin:14px 0}
.ct-item{background:#12121a;border:1px solid #1e1e28;border-radius:8px;padding:10px;text-align:center}
.ct-swatch{width:100%;height:50px;border-radius:6px;margin-bottom:6px}
.ct-name{font-size:.78rem;font-weight:600}
.ct-hex{font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:#666}
footer{max-width:740px;margin:0 auto;padding:16px 20px;border-top:1px solid #1e1e28;text-align:center;font-size:.56rem;color:#333}
footer a{color:#444;margin:0 4px;text-decoration:none}
.lp{max-width:560px;margin:0 auto;padding:30px 20px 48px}
.lp h1{font-size:1.1rem;font-weight:700;margin-bottom:4px;color:#818cf8}
.lp .dt{font-size:.62rem;color:#444;margin-bottom:16px}
.lp h2{font-size:.84rem;font-weight:700;margin:14px 0 4px;color:#818cf8}
.lp p,.lp li{font-size:.82rem;color:#666;margin-bottom:5px}
.lp ul{padding-left:14px}