*{box-sizing:border-box;margin:0}html{-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f7efe7;color:#4a3f38;min-height:100vh}.app{max-width:560px;margin:0 auto;padding:12px 12px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;align-items:stretch}header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:env(safe-area-inset-top)}header h1{font-size:1.4rem}.sync-chip{padding:6px 12px;border-radius:999px;font-size:.85rem;white-space:nowrap}.sync-chip.synced{border-color:#46a758;color:#2f7a41}.sync-chip.error{border-color:#e5484d;color:#c33}.sync-panel{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}.sync-status{font-weight:600;font-size:.9rem}.sync-status.synced{color:#2f7a41}.sync-status.error{color:#c33}.sync-qr{border-radius:8px}.room-url{font-size:.78rem;word-break:break-all;color:#7a6c62;user-select:all;-webkit-user-select:all}.sync-note{font-size:.78rem;color:#a08e80;line-height:1.4}.card{background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 8px #4a3f3814}.intro{display:flex;flex-direction:column;gap:14px}.intro p{line-height:1.45}.buttons{display:flex;gap:10px;flex-wrap:wrap}.pastebox{border:2px dashed #d9ccc0;border-radius:12px;padding:14px;text-align:center;color:#a08e80;font-size:16px;caret-color:transparent;-webkit-user-select:text;user-select:text}.pastebox:focus{outline:none;border-color:#b8977a}.manual-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.9rem;color:#7a6c62}button{font:inherit;border:1.5px solid #d9ccc0;background:#fff;color:inherit;border-radius:12px;padding:10px 14px;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}button.primary{background:#4a3f38;border-color:#4a3f38;color:#fff}button.active{background:#f3e2cf;border-color:#b8977a}button.small{padding:4px 10px;border-radius:8px;margin-left:8px}select{font:inherit;border:1.5px solid #d9ccc0;border-radius:10px;padding:8px;background:#fff}.toolbar,.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.check{display:inline-flex;align-items:center;gap:6px;padding:10px 6px;font-size:.9rem}.palette{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.swatch{width:34px;height:34px;border-radius:10px;border:2px solid rgba(0,0,0,.15);padding:0}.swatch.active{border-color:#4a3f38;box-shadow:0 0 0 2px #fff,0 0 0 4px #4a3f38}.grid{width:min(94vw,520px);aspect-ratio:1;align-self:center;display:grid;gap:1.2%;padding:1.5%;background:#fff;border-radius:14px;touch-action:none;user-select:none;-webkit-user-select:none}.cell{border-radius:18%;display:flex;align-items:center;justify-content:center;line-height:1;overflow:hidden}.cell .xmark{color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.18)}.cell .ghost{opacity:.5}.cell.mistake{outline:3px solid #e5484d;outline-offset:-3px}.cell.hint-target{outline:3px solid #b8860b;outline-offset:-3px;animation:pulse 1s ease-in-out infinite}.cell.hint-because{outline:2px dashed rgba(0,0,0,.5);outline-offset:-2px}@keyframes pulse{50%{filter:brightness(1.25)}}.banner{background:#fff;border-radius:12px;padding:10px 14px;font-size:.92rem;line-height:1.4;border-left:4px solid #d9ccc0}.banner.error{border-left-color:#e5484d}.banner.success{border-left-color:#46a758}.banner.hint{border-left-color:#b8860b}footer{text-align:center;font-size:.8rem;color:#a08e80;line-height:1.5;padding-top:8px}