:root{--color-bg: #ffffff;--color-text: #1a1a1b;--color-tile-bg: #efece6;--color-tile-selected-bg: #3a3a3c;--color-tile-selected-text: #ffffff;--color-border: #d8d5cd;--color-yellow: #f9df6d;--color-yellow-text: #6b5a00;--color-green: #a0c35a;--color-green-text: #2e4611;--color-blue: #b0c4ef;--color-blue-text: #1f2f5c;--color-purple: #ba81c5;--color-purple-text: #3f1f47;--radius-tile: .5rem;--radius-pill: 999px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-text);min-height:100vh}#app{max-width:640px;margin:0 auto;padding:1.5rem 1rem 3rem;display:flex;flex-direction:column;gap:1.25rem}h1.page-title{text-align:center;font-size:1.25rem;margin:.5rem 0 0}p.page-subtitle{text-align:center;margin:0;color:#555}.meta-line{text-align:center;font-size:.85rem;color:#666}.btn{border-radius:var(--radius-pill);border:1.5px solid var(--color-text);background:transparent;color:var(--color-text);padding:.65rem 1.4rem;font-size:.95rem;font-weight:700;cursor:pointer;transition:background .15s ease,color .15s ease,opacity .15s ease}.btn:hover:not(:disabled){background:var(--color-text);color:#fff}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-primary{background:var(--color-text);color:#fff}.btn-primary:hover:not(:disabled){opacity:.85;background:var(--color-text);color:#fff}.btn-row{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}.landing-actions{display:flex;flex-direction:column;gap:.75rem;align-items:stretch;max-width:320px;margin:1rem auto 0}.landing-actions .btn{width:100%}.paste-link-row{display:none;flex-direction:column;gap:.5rem;margin-top:.5rem}.paste-link-row.visible{display:flex}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}.tile{background:var(--color-tile-bg);border:none;border-radius:var(--radius-tile);aspect-ratio:1.35 / 1;min-width:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:.4rem;font-weight:800;text-transform:uppercase;font-size:clamp(.55rem,3.6vw,1.05rem);line-height:1.15;cursor:pointer;color:var(--color-text);-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:transform .15s ease}.tile:hover:not(:disabled){filter:brightness(.97)}.tile:disabled{cursor:default}.tile.selected{background:var(--color-tile-selected-bg);color:var(--color-tile-selected-text)}.tile.shake{animation:shake .4s ease}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.group-banner{border-radius:var(--radius-tile);padding:.75rem 1rem;text-align:center}.group-banner .theme{font-weight:800;text-transform:uppercase;font-size:clamp(.8rem,3.4vw,1.05rem)}.group-banner .members{margin-top:.2rem;text-transform:uppercase;font-size:clamp(.7rem,3vw,.95rem)}.group-banner.yellow{background:var(--color-yellow);color:var(--color-yellow-text)}.group-banner.green{background:var(--color-green);color:var(--color-green-text)}.group-banner.blue{background:var(--color-blue);color:var(--color-blue-text)}.group-banner.purple{background:var(--color-purple);color:var(--color-purple-text)}.banners{display:flex;flex-direction:column;gap:.5rem}.mistakes-row{display:flex;align-items:center;justify-content:center;gap:.5rem;color:#555}.pips{display:flex;gap:.4rem}.pip{width:.7rem;height:.7rem;border-radius:50%;background:#555}.toast{text-align:center;font-weight:700;min-height:1.4rem;visibility:hidden}.toast.visible{visibility:visible}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:10}.modal{position:relative;background:#fff;border-radius:1rem;padding:2rem 1.5rem;max-width:320px;width:100%;text-align:center;display:flex;flex-direction:column;gap:1rem}.modal h2{margin:0}.modal p{margin:0;color:#555}.modal-close{position:absolute;top:.5rem;right:.5rem;width:2rem;height:2rem;border-radius:50%;border:none;background:transparent;color:var(--color-text);font-size:1.3rem;line-height:1;cursor:pointer}.modal-close:hover{background:var(--color-tile-bg)}.group-form{border-radius:var(--radius-tile);padding:.9rem;display:flex;flex-direction:column;gap:.5rem}.group-form.yellow{background:color-mix(in srgb,var(--color-yellow) 35%,white)}.group-form.green{background:color-mix(in srgb,var(--color-green) 35%,white)}.group-form.blue{background:color-mix(in srgb,var(--color-blue) 35%,white)}.group-form.purple{background:color-mix(in srgb,var(--color-purple) 35%,white)}.group-form .group-label{font-weight:800;text-transform:uppercase;font-size:.8rem}.group-form input{border-radius:.4rem;border:1px solid var(--color-border);padding:.5rem .6rem;font-size:.95rem;width:100%}.theme-row{display:flex;flex-direction:column;gap:.2rem}.members-row{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem}.field-count{font-size:.7rem;color:#666;text-align:right}.field-count.over{color:#c0392b}.meta-form{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.meta-form label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:#555}.meta-form input{border-radius:.4rem;border:1px solid var(--color-border);padding:.5rem .6rem;font-size:.95rem}.error-text{color:#c0392b;text-align:center;font-size:.9rem;min-height:1.2rem}.top-bar{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}