:root{color-scheme:light dark;--bg: #0f172a;--surface: #1e293b;--text: #e2e8f0;--muted: #94a3b8;--accent: #38bdf8;--accent-fg: #0f172a;--tile-selected: #38bdf8;--error: #f87171;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh}#app{max-width:640px;margin:0 auto;padding:1.5rem 1rem 4rem}h1{font-size:1.1rem;font-weight:500;color:var(--muted);margin:0 0 .25rem}.subheading{font-size:1.75rem;font-weight:700;margin:0 0 1rem}.instruction{margin:0 0 .25rem;font-size:1.05rem}.hint{margin:0 0 1rem;color:var(--muted);min-height:1.2em}.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem;margin-bottom:1.25rem}.tile{aspect-ratio:1;border:1px solid var(--muted);border-radius:.5rem;background:var(--surface);color:var(--text);font-size:1rem;cursor:pointer;transition:background-color .1s ease,color .1s ease,transform .05s ease}.tile:hover{border-color:var(--accent)}.tile:active{transform:scale(.95)}.tile--selected{background:var(--tile-selected);border-color:var(--tile-selected);color:var(--accent-fg);font-weight:700}.actions{display:flex;gap:.75rem;margin-bottom:1rem}button{font:inherit}.generate-button,.clear-button{padding:.65rem 1.25rem;border-radius:.5rem;border:none;cursor:pointer;font-weight:600}.generate-button{background:var(--accent);color:var(--accent-fg);flex:1}.generate-button:disabled{opacity:.4;cursor:not-allowed}.clear-button{background:transparent;color:var(--muted);border:1px solid var(--muted)}.error{color:var(--error);min-height:1.2em;margin:0 0 1rem}.error:empty{display:none}.tips h2,.tips h3{font-size:1rem;color:var(--muted);margin:1.5rem 0 .5rem}.tip-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}.tip-row{display:flex;gap:.75rem;align-items:baseline;background:var(--surface);border-radius:.5rem;padding:.5rem .75rem}.tip-label{color:var(--muted);font-size:.85rem;width:4.5rem;flex-shrink:0}.tip-numbers{font-variant-numeric:tabular-nums;letter-spacing:.02em}.usage-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.85rem;color:var(--muted)}.usage-list li{background:var(--surface);border-radius:.4rem;padding:.2rem .5rem}