/* Don't Feed It: the urge wave, the monster, the timer. Light dawn look; slow, soft motion only. */
#app{min-height:60vh}
#app h1{font-size:clamp(38px,10vw,54px)}
.q{margin:6px 0 16px;font:800 clamp(24px,6.6vw,32px)/1.2 var(--disp);color:var(--p)}
.sub{margin:-8px auto 16px;max-width:400px;color:var(--mute);font-size:14.5px}
.mon{display:block;width:150px;height:130px;margin:0 auto 4px}
.suds{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;max-width:420px;margin:0 auto}
.suds .chip{padding:8px 0;min-height:48px;font-variant-numeric:tabular-nums}
.suds .chip:nth-child(n+7){grid-column:auto}
.scl{display:flex;justify-content:space-between;max-width:420px;margin:6px auto 0;font-size:12px;color:var(--dim)}
.plan{display:grid;gap:10px;max-width:420px;margin:0 auto}
.opt{display:block;width:100%;text-align:center;padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.78);box-shadow:var(--shadow);color:var(--ink);cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background .2s}
.opt:hover,.opt:focus-visible{border-color:var(--a);outline:none;background:#eef7f4}
.opt b{display:block;font:700 21px/1.2 var(--disp);color:var(--p)}
.opt small{color:var(--dim);font-size:13px}
.opt .mins{display:flex;gap:8px;justify-content:center;margin-top:10px}
.wavebox{position:relative;width:100%;max-width:560px;margin:0 auto;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.95);background:linear-gradient(180deg,#f3f9fb,#fbf4ea);box-shadow:var(--shadow)}
#wave{display:block;width:100%;height:300px}
.wtop{position:absolute;left:0;right:0;top:12px;display:flex;justify-content:space-between;padding:0 16px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);pointer-events:none}
.clock{position:absolute;left:16px;bottom:14px;text-align:left;pointer-events:none}
.clock b{display:block;font:800 34px/1 var(--disp);color:var(--p);font-variant-numeric:tabular-nums}
.clock small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--a2)}
.line{min-height:3.2em;margin:16px auto 10px;max-width:440px;font:italic 500 clamp(24px,6.4vw,30px)/1.25 var(--serif);color:var(--p);transition:opacity 1.2s}
.line.out{opacity:0}
.reply{min-height:1.4em;margin:0 auto 10px;max-width:420px;color:var(--v);font-size:15px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:440px;margin:0 auto}
.acts .btn{min-height:52px;font-size:15.5px}
.acts .full{grid-column:1/-1}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:420px;margin:8px auto 16px}
.res div{padding:12px 6px;border-radius:16px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.75)}
.res b{display:block;font:800 28px/1 var(--disp);color:var(--p)}
.res small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.log{list-style:none;margin:0 auto;padding:0;max-width:460px;display:grid;gap:8px;text-align:left}
.log li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:11px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.78)}
.log li .w{font-size:14.5px;color:var(--ink)}.log li .d{font-size:12px;color:var(--dim)}
.log li .s{grid-row:1/3;grid-column:2;text-align:right;font-size:13px;color:var(--a2);font-variant-numeric:tabular-nums}
.log li.fed .s{color:var(--v)}
.bars{display:inline-block;width:64px;height:8px;border-radius:4px;background:rgba(47,120,128,.1);position:relative;vertical-align:middle;margin-left:6px;overflow:hidden}
.bars i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.lad{list-style:none;margin:0 auto;padding:0;max-width:460px;display:grid;gap:8px;text-align:left}
.lad li{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.78);box-shadow:var(--shadow)}
.lad li .n{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font:800 18px var(--disp);color:#fff;background:linear-gradient(180deg,#7cc7bd,#2f8f88)}
.lad li .t{flex:1;font-size:14.5px}
.lad li.done .t{color:var(--dim);text-decoration:line-through;text-decoration-color:rgba(47,143,136,.4)}
.lad li button{flex:none;min-width:44px;min-height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--a2);cursor:pointer;font:600 13px var(--sans)}
.sugg{display:grid;gap:8px;max-width:460px;margin:0 auto}
.sugg .chip{border-radius:16px;text-align:left;padding:12px 14px}
.tabs{display:flex;justify-content:center;gap:6px;margin:0 auto 18px;flex-wrap:wrap}
.tabs .chip{min-height:40px;padding:8px 14px;font-size:14px}
.streak{font:italic 500 22px/1.3 var(--serif);color:var(--p);margin:4px 0 14px}
/* science notes */
.why{display:block;margin:16px auto 6px;max-width:440px;padding:12px 16px 13px;border-radius:16px;background:linear-gradient(180deg,rgba(255,246,226,.95),rgba(255,251,242,.9));box-shadow:inset 3px 0 0 var(--gold);text-align:left}
.why b{display:flex;align-items:center;gap:6px;margin-bottom:4px;font:800 11.5px/1 var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--amb)}
.why b svg{width:16px;height:16px;fill:none;stroke:var(--amb);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.why span{display:block;color:var(--ink);font:500 15px/1.5 var(--sans)}
.bn{min-height:3.2em;margin:0 auto 14px;max-width:440px;padding:10px 14px;border-radius:14px;background:rgba(255,248,232,.85);box-shadow:inset 3px 0 0 var(--gold);text-align:left;font-size:14.5px;line-height:1.45;color:var(--ink);transition:opacity .6s}
.bn.out{opacity:.15}.bn b{font:800 11px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--amb);margin-right:4px}
.wcard{text-align:center}.wcard .kick{margin:0 0 6px;font:700 12px/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--amb)}
.wcard p{font-size:17.5px;line-height:1.6}