/* Water: a tall glass filling up. Clear blue on a pale sky page; the glass is the whole interface. */
:root { --page: #eef6fb; --card: #ffffff; --ink: #0f1d26; --soft: #4f6472; --line: #cfe1ec; --field: #e2eef6; --act: #1677c9; --on-act: #ffffff; --stop: #b3261e; --water: #4fb3ff; --wide: 560px; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #0c1418; --card: #142028; --ink: #e6f1f8; --soft: #9fb4c2; --line: #263843; --field: #0c1418; --act: #7cc4ff; --on-act: #062238; --stop: #ff8a80; --water: #2f8fdb; color-scheme: dark; }
}
.glass-box { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; }
.glass { width: 96px; height: 150px; border: 3px solid var(--ink); border-top-width: 0; border-radius: 4px 4px 18px 18px; position: relative; overflow: hidden; clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: var(--card); }
.glass i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--water); transition: height .4s ease; }
@media (prefers-reduced-motion: reduce) { .glass i { transition: none; } }
.adds button { flex: 1 1 120px; min-height: 56px; }
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 120px; }
.bars div { display: grid; gap: 4px; align-items: end; height: 100%; text-align: center; font-size: 12px; color: var(--soft); grid-template-rows: 1fr auto; }
.bars i { display: block; background: var(--water); border-radius: 4px 4px 0 0; min-height: 2px; align-self: end; }
.bars .met i { background: var(--act); }