*{box-sizing:border-box}html,body{min-height:100%;margin:0}:root{--grout-page:#1c1814;--grout-channel:#2a2520;--grout-recess:#100d0a;--parchment:#f2ebe0;--parchment-dim:#e0d6c7;--ink:#2a2520;--ink-muted:#7a716a;--tile-idle:#3a352e;--tile-idle-text:#8a8278;--habit-0:#c24d2c;--habit-1:#0f6e6e;--habit-2:#d49a2e;--habit-3:#475569;--habit-4:#6b7b3c;--habit-5:#8c4a6d;--font-display:"Space Grotesk", "Clarity Grotesque", "Segoe UI", system-ui, sans-serif;--font-body:"Inter", "Segoe UI", system-ui, sans-serif}body{background:var(--grout-page);color:var(--parchment);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}.app{max-width:640px;margin:0 auto;padding:20px 14px 100px}@media (min-width:480px){.app{padding:32px 20px 120px}}.plaque{background:var(--parchment);color:var(--ink);border-radius:14px;margin-bottom:18px;padding:18px 20px;box-shadow:0 3px #b8ae9e,0 8px 18px #00000059}.plaque h1{font-family:var(--font-display);letter-spacing:-.01em;margin:0 0 4px;font-size:1.55rem;font-weight:700;line-height:1.1}.summary{color:var(--ink-muted);font-variant-numeric:tabular-nums;margin:0;font-size:.95rem}.summary strong{color:var(--ink);font-weight:600}.habits{flex-direction:column;gap:14px;display:flex}.habit-row{background:var(--parchment);border-radius:12px;padding:12px 14px 14px;box-shadow:0 2px #b8ae9e,0 6px 14px #0000004d}.habit-head{align-items:center;gap:10px;margin-bottom:10px;display:flex}.habit-swatch{border-radius:4px;flex-shrink:0;width:14px;height:14px;box-shadow:inset 0 0 0 1px #0003}.habit-name{font-family:var(--font-display);color:var(--ink);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:1.02rem;font-weight:600;line-height:1.2;overflow:hidden}.streak{color:var(--ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap;align-items:center;gap:3px;font-size:.82rem;display:flex}.streak-flame{font-size:.9rem;line-height:1}.streak-num{color:var(--ink);font-weight:700}.delete-btn{color:var(--ink-muted);cursor:pointer;background:#0000000f;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;font-size:.7rem;transition:background .15s,color .15s;display:flex}.delete-btn:hover{color:#c24d2c;background:#c24d2c26}.delete-btn:focus-visible{outline-offset:2px;outline:2px solid #0f6e6e}.channel{background:var(--grout-recess);border-radius:10px;gap:6px;padding:8px;display:flex;box-shadow:inset 0 2px 5px #00000080}.tile{cursor:pointer;min-width:0;height:52px;font-family:var(--font-display);touch-action:manipulation;-webkit-user-select:none;user-select:none;border:none;border-radius:8px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:.72rem;font-weight:600;transition:transform .12s,box-shadow .12s,background .12s,color .12s;display:flex;position:relative}@media (min-width:480px){.tile{height:56px}}.tile-incomplete{background:var(--tile-idle);color:var(--tile-idle-text);box-shadow:0 1px #4a4540,0 2px 4px #0000004d}.tile-complete{color:#fff7ee;background-image:radial-gradient(circle at 35% 30%,#ffffff2e,#0000 60%);box-shadow:inset 0 2px 4px #0006,inset 0 -1px 2px #ffffff1f}.tile:active{transform:scale(.93)}.tile:focus-visible{outline:2px solid var(--parchment);outline-offset:2px}.tile-day{opacity:.7;text-transform:uppercase;letter-spacing:.03em;font-size:.62rem}.tile-date{font-size:.82rem;font-weight:700}.tile-today:after{content:"";opacity:.6;background:currentColor;border-radius:50%;width:4px;height:4px;position:absolute;bottom:5px;left:50%;transform:translate(-50%)}.tile-today.tile-complete:after{opacity:.85}.add-form{gap:8px;margin-top:18px;display:flex}.add-input{background:var(--parchment);color:var(--ink);font-family:var(--font-body);border:none;border-radius:10px;flex:1;padding:12px 14px;font-size:.95rem;box-shadow:0 2px #b8ae9e}.add-input::placeholder{color:var(--ink-muted)}.add-input:focus{outline:none;box-shadow:0 2px #b8ae9e,0 0 0 2px #0f6e6e}.add-btn{background:var(--parchment);color:var(--ink);font-family:var(--font-display);cursor:pointer;white-space:nowrap;border:none;border-radius:10px;padding:12px 18px;font-size:.9rem;font-weight:700;transition:transform .12s,background .15s;box-shadow:0 2px #b8ae9e}.add-btn:hover{background:var(--parchment-dim)}.add-btn:active{transform:translateY(1px);box-shadow:0 1px #b8ae9e}.add-btn:focus-visible{outline-offset:2px;outline:2px solid #0f6e6e}.reset-bar{text-align:center;margin-top:22px}.reset-btn{color:var(--ink-muted);font-family:var(--font-body);cursor:pointer;background:0 0;border:1px solid #4a4540;border-radius:8px;padding:10px 22px;font-size:.85rem;transition:border-color .15s,color .15s}.reset-btn:hover{border-color:var(--parchment);color:var(--parchment)}.reset-btn:focus-visible{outline-offset:2px;outline:2px solid #0f6e6e}.empty{background:var(--parchment);text-align:center;border-radius:14px;padding:36px 22px;box-shadow:0 3px #b8ae9e,0 8px 18px #00000059}.empty-grid{gap:8px;max-width:280px;margin:0 auto 22px;display:flex}.empty-cell{aspect-ratio:1;font-family:var(--font-display);color:#c4baa8;text-transform:uppercase;border:2px dashed #c4baa8;border-radius:8px;flex:1;justify-content:center;align-items:center;font-size:.7rem;display:flex}.empty h2{font-family:var(--font-display);color:var(--ink);margin:0 0 6px;font-size:1.15rem}.empty p{color:var(--ink-muted);margin:0;font-size:.9rem;line-height:1.4}.toast{background:var(--parchment);color:var(--ink);z-index:50;border-radius:10px;align-items:center;gap:14px;padding:12px 18px;font-size:.9rem;animation:.25s toastIn;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0006}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.toast-btn{color:#fff7ee;font-family:var(--font-display);cursor:pointer;background:#0f6e6e;border:none;border-radius:7px;padding:6px 14px;font-size:.85rem;font-weight:700}.toast-btn:focus-visible{outline:2px solid var(--parchment);outline-offset:2px}.loading{min-height:60vh}@media (prefers-reduced-motion:reduce){.tile,.add-btn,.toast{transition:none!important;animation:none!important}.tile:active{transform:none}}