@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--bg:#f8fafc;--card:#fff;--primary:#4f46e5;--primary-light:#4f46e51a;--accent:#0ea5e9;--text:#1e293b;--text-muted:#64748b;--border:#e2e8f0;--radius:24px;--shadow:0 10px 25px -5px #0000000d, 0 8px 10px -6px #0000000d}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);background-image:radial-gradient(at 0 0,#4f46e50d 0,#0000 50%),radial-gradient(at 100% 100%,#0ea5e90d 0,#0000 50%);justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;font-family:Outfit,sans-serif;display:flex}#app{width:100%;max-width:650px}.card{background:var(--card);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);text-align:center;padding:3.5rem;position:relative}h1{letter-spacing:-.02em;color:var(--text);margin-bottom:1rem;font-size:3rem;font-weight:700}p{color:var(--text-muted);margin-bottom:2.5rem;font-size:1.1rem;line-height:1.6}.btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:16px;width:100%;max-width:300px;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;transition:all .2s}.btn:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 15px 25px -5px #0ea5e94d}.reaction-area{cursor:pointer;border:1px solid var(--border);border-radius:20px;justify-content:center;align-items:center;width:100%;height:250px;margin-bottom:1.5rem;font-size:1.2rem;font-weight:500;transition:all .2s;display:flex}.reaction-area.idle{color:var(--text-muted);background:#f1f5f9}.reaction-area.waiting{color:#ef4444;background:#fee2e2;border-color:#fecaca}.reaction-area.ready{color:#22c55e;background:#dcfce7;border-color:#bbf7d0}.pattern-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:2.5rem;display:grid}.pattern-cell{aspect-ratio:1;border:1px solid var(--border);background:#f1f5f9;border-radius:16px;justify-content:center;align-items:center;display:flex}.options-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.option-card{aspect-ratio:1;border:1px solid var(--border);cursor:pointer;background:#fff;border-radius:16px;justify-content:center;align-items:center;transition:all .2s;display:flex}.option-card:hover{border-color:var(--primary);background:var(--primary-light);transform:translateY(-2px)}.memory-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.memory-item{aspect-ratio:1;border:1px solid var(--border);background:#f1f5f9;border-radius:16px;justify-content:center;align-items:center;font-size:1.8rem;display:flex}.memory-item.hidden{color:#0000;cursor:pointer;background:#e2e8f0}.memory-item.hidden:hover{background:#cbd5e1}.timer-bar{background:linear-gradient(90deg, var(--primary), var(--accent));z-index:100;height:4px;position:fixed;top:0;left:0}table{border-collapse:separate;border-spacing:0 4px;width:100%}tr{background:#f8fafc}td{padding:1rem}td:first-child{color:var(--text-muted);border-radius:12px 0 0 12px;font-weight:600}td:last-child{border-radius:0 12px 12px 0}input[type=text]{border:1px solid var(--border);background:#f1f5f9;border-radius:14px;width:100%;padding:1rem;font-family:inherit;font-size:1rem}input[type=text]:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light);background:#fff;outline:none}.fade-in{animation:.6s cubic-bezier(.16,1,.3,1) fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}