:root{--bg-primary:#fffaf4;--bg-secondary:#fafafa;--bg-card:#fffaf4;--bg-card-hover:#f8f8f8;--bg-elevated:#f5f5f5;--bg-emoji:linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);--text-primary:#111;--text-body:#333;--text-secondary:#555;--text-muted:#999;--text-subtle:#777;--text-link:#666;--border-color:#eee;--border-subtle:#0000000a;--border-light:#0000000f;--border-input:#d4d4d4;--divider:#ddd;--accent:#2563eb;--accent-hover:#1d4ed8;--accent-gradient:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--shadow-sm:0 1px 3px #0000000a, 0 1px 2px #0000000f;--shadow-md:0 2px 8px #0000001a;--shadow-lg:0 8px 24px #0000001a;--shadow-card:0 2px 8px #0000001a;--shadow-card-hover:0 4px 16px #00000026;--glass-bg:#fffaf4d9;--glass-border:#0000000f;--footer-bg:#1f2937;--footer-text:#fffaf4;--hero-gradient:linear-gradient(180deg, #fffaf4 0%, #fafafa 100%);--overlay-bg:#000000b3;--modal-bg:#fffaf4;--input-bg:#fffaf4;--tag-bg:#fffaf4;--tag-border:#00000014;--board-bg:#fffaf4;--cell-bg:#fffaf4;--cell-prefilled:#f5f5f5;--cell-hover:#f0f4ff;--cell-selected:#bdd0ff;--cell-highlighted:#e8eeff;--cell-same:#c5d8ff;--cell-border:#ddd;--cell-box-border:#333;--toast-bg:#333;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--font-size-sm:.875rem;--font-size-md:1rem;--font-size-lg:1.25rem}[data-theme=dark]{--bg-primary:#0f0f0f;--bg-secondary:#141414;--bg-card:#1a1a1a;--bg-card-hover:#222;--bg-elevated:#1e1e1e;--bg-emoji:linear-gradient(135deg, #222 0%, #1a1a1a 100%);--text-primary:#e5e5e5;--text-body:silver;--text-secondary:#a0a0a0;--text-muted:#666;--text-subtle:#888;--text-link:#a0a0a0;--border-color:#2a2a2a;--border-subtle:#fffaf40f;--border-light:#fffaf414;--border-input:#333;--divider:#333;--accent:#3b82f6;--accent-hover:#2563eb;--accent-gradient:linear-gradient(135deg, #667eea 0%, #764ba2 100%);--shadow-sm:0 1px 3px #0003, 0 1px 2px #00000026;--shadow-md:0 2px 8px #0000004d;--shadow-lg:0 8px 24px #0000004d;--shadow-card:0 2px 8px #0000004d;--shadow-card-hover:0 4px 16px #0006;--glass-bg:#141414d9;--glass-border:#fffaf414;--footer-bg:#111;--footer-text:#ccc;--hero-gradient:linear-gradient(180deg, #0f0f0f 0%, #141414 100%);--overlay-bg:#000c;--modal-bg:#1a1a1a;--input-bg:#1e1e1e;--tag-bg:#1e1e1e;--tag-border:#fffaf41a;--board-bg:#1a1a1a;--cell-bg:#1a1a1a;--cell-prefilled:#222;--cell-hover:#1e2540;--cell-selected:#2a3a6a;--cell-highlighted:#1e2a4a;--cell-same:#253560;--cell-border:#333;--cell-box-border:#888;--toast-bg:#333}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}*{box-sizing:border-box;margin:0;padding:0}html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;max-width:100vw;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;overflow-x:hidden}body{color:var(--text-body);background:var(--bg-primary);line-height:1.6;transition:background .2s,color .2s}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.container{max-width:1200px;margin:0 auto;padding:0 20px}header{background:var(--bg-primary);box-shadow:var(--shadow-sm);z-index:100;position:sticky;top:0}nav{justify-content:space-between;align-items:center;padding:1rem 0;display:flex}.logo{color:var(--accent);font-size:1.5rem;font-weight:700}.nav-links{gap:2rem;list-style:none;display:flex}.nav-links a{transition:color .3s}.nav-links a:hover{color:var(--accent)}.hero{text-align:center;padding:4rem 0}.hero h1{background:var(--accent-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1rem;font-size:3rem}.hero p{color:var(--text-secondary);margin-bottom:2rem;font-size:1.25rem}section{padding:4rem 0}.section-title{text-align:center;color:var(--text-body);margin-bottom:2rem;font-size:2rem}.btn{background:var(--accent);color:#fffaf4;cursor:pointer;border:none;border-radius:5px;padding:.75rem 2rem;font-size:1rem;transition:background .3s;display:inline-block}.btn:hover{background:var(--accent-hover)}.btn-secondary{border:2px solid var(--accent);color:var(--accent);background:0 0}.btn-secondary:hover{background:var(--accent);color:#fffaf4}.card{background:var(--bg-card);box-shadow:var(--shadow-card);border-radius:8px;padding:2rem;transition:transform .3s,box-shadow .3s}.ui-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-5)}.ui-btn{border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;border:none;padding:.6rem 1rem;transition:transform .15s,opacity .15s}.ui-btn:hover{transform:translateY(-1px)}.ui-btn-primary{background:var(--accent);color:#fffaf4}.ui-btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-light)}.card:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-5px)}footer{background:var(--footer-bg);color:var(--footer-text);text-align:center;margin-top:4rem;padding:2rem 0}.theme-toggle{cursor:pointer;background:0 0;border:none;padding:.2rem;font-size:1rem;line-height:1;transition:transform .2s}.theme-toggle:hover{transform:scale(1.15)}.login-form{flex-direction:column;gap:.75rem;width:100%;max-width:320px;margin:0 auto;display:flex}.login-form--compact{max-width:280px}.login-form__fields{flex-direction:column;gap:.5rem;display:flex}.login-form__input{border:1px solid var(--border-input);background:var(--input-bg);color:var(--text-primary);border-radius:8px;outline:none;padding:.6rem .75rem;font-size:.95rem;transition:border-color .2s}.login-form__input:focus{border-color:var(--accent)}.login-form__error{color:#e55;text-align:center;font-size:.8rem}.login-form__btn{background:var(--accent);color:#fffaf4;cursor:pointer;border:none;border-radius:8px;padding:.6rem;font-size:.95rem;font-weight:600;transition:background .2s}.login-form__btn:hover{background:var(--accent-hover)}.login-form__btn:disabled{opacity:.5;cursor:not-allowed}.login-form__toggle{color:var(--text-muted);cursor:pointer;text-align:center;background:0 0;border:none;font-size:.8rem;transition:color .2s}.login-form__toggle:hover{color:var(--text-secondary)}.login-form__note{color:var(--text-muted);text-align:center;margin:0;font-size:.78rem;line-height:1.35}@media (max-width:768px){.hero h1{font-size:2rem}.nav-links{gap:1rem;font-size:.9rem}}