/* The live replica of the app. Everything is sized in em from a 24em-wide screen, so --aw (its width) scales the whole thing.
   It reads the same day-theme variables as the page, so it follows the sun exactly as the real app does. */

.app { --aw: min(392px, calc((100svh - 132px) * .472)); position: relative; width: var(--aw); font-size: calc(var(--aw) / 24); font-family: var(--sans); color: var(--ink); line-height: 1.25; user-select: none; -webkit-user-select: none; }
.app-bezel { position: relative; padding: .38em; border-radius: 2.65em; background: linear-gradient(150deg, #4a3f68, #2B2140 45%, #3b3158); box-shadow: 0 0 0 1px rgba(255, 255, 255, .16) inset, 0 3.2em 5.6em color-mix(in srgb, var(--ink) 30%, transparent), 0 .9em 2em color-mix(in srgb, var(--ink) 18%, transparent); transform: translate3d(0, 0, 0); }
.app-screen { position: relative; aspect-ratio: 9 / 19.4; border-radius: 2.28em; overflow: hidden; background: linear-gradient(180deg, var(--sky1) 0%, var(--canvas) 62%); isolation: isolate; }
.app-screen::after { content: ""; position: absolute; top: .55em; left: 50%; width: .62em; height: .62em; margin-left: -.31em; border-radius: 50%; background: #0c0a14; z-index: 9; }
.app-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.app-bg i { position: absolute; width: 22em; height: 22em; border-radius: 50%; opacity: calc(.5 - var(--night) * .22); background: radial-gradient(closest-side, var(--c), transparent); animation: sway var(--d) ease-in-out infinite alternate, wobble calc(var(--d) / 5) ease-in-out infinite alternate; }
.app-bg i:nth-child(1) { --c: var(--lilac); --d: 40s; top: -9em; right: -9em; }
.app-bg i:nth-child(2) { --c: var(--peach); --d: 52s; top: 14em; left: -11em; }
.app-bg i:nth-child(3) { --c: var(--sage); --d: 46s; bottom: -9em; right: -8em; }

.app-status { position: absolute; z-index: 8; top: 0; left: 0; right: 0; padding: .72em 1.35em 0; display: flex; justify-content: space-between; align-items: center; font: 700 .72em/1 var(--sans); letter-spacing: .01em; pointer-events: none; }
.app-status svg { height: 1.05em; width: auto; fill: var(--ink); }

/* pages */
.pages { position: absolute; inset: 0; }
.pg { position: absolute; inset: 0; padding: 2.3em 1.2em 6.6em; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; opacity: 0; visibility: hidden; transform: translate3d(0, 1.1em, 0) scale(.985); transition: opacity .42s var(--ease), transform .6s var(--ease), visibility 0s .42s; }
.pg::-webkit-scrollbar { display: none; }
.pg.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hd h3 { font: 600 1.9em/1.05 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.hd p { margin-top: .22em; font-size: .86em; color: var(--ink2); }
.lab { margin: 1.15em 0 .55em; font: 700 .93em/1.2 var(--sans); color: var(--ink2); }
.hint { margin-top: .5em; font-size: .86em; color: var(--ink2); }
[hidden] { display: none !important; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: .5em; }
.chip { display: inline-flex; align-items: center; gap: .5em; height: 2.35em; padding: 0 1em; border-radius: 999px; background: var(--surface); border: .1em solid var(--line2); color: var(--ink); font: 600 .87em/1 var(--sans); white-space: nowrap; transition: background .3s, border-color .3s, transform .3s var(--spring); }
.chip svg { width: 1.35em; height: 1.35em; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip:active { transform: scale(.95); }
.chip.is-on { background: var(--primary-c); border-color: var(--peach); }
.chip.pro { color: var(--ink2); }
.chip.pro em { font-style: normal; color: var(--ink3); }

/* buttons */
.acts { display: grid; gap: .75em; margin: 1.05em 0 0; }
.acts.live { grid-template-columns: 1fr 1fr; }
.b-main, .b-soft { display: inline-flex; align-items: center; justify-content: center; gap: .65em; height: 3.3em; border: 0; border-radius: 999px; font: 700 1em/1 var(--sans); color: var(--on-peach); transition: transform .3s var(--spring), filter .2s, background .4s; }
.b-main { background: var(--peach); box-shadow: 0 .5em 1.2em color-mix(in srgb, var(--peach) 38%, transparent); }
.b-soft { background: var(--primary-c); }
.b-main svg, .b-soft svg { width: 1.35em; height: 1.35em; fill: none; stroke: #2B2140; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.b-main:hover, .b-soft:hover { filter: brightness(1.04); }
.b-main:active, .b-soft:active { transform: scale(.96); }
.b-main.press { animation: press .55s var(--ease); }
@keyframes press { 40% { transform: scale(.94); filter: brightness(1.08); } }
.b-link { background: none; border: 0; padding: .6em; font: 600 .93em/1 var(--sans); color: var(--ink); justify-self: center; }
.b-link:hover { text-decoration: underline; text-underline-offset: .25em; }

/* Today */
.pill { display: inline-flex; align-items: center; gap: .6em; margin-top: 1em; padding: .62em 1em; border-radius: 999px; background: var(--ok-c); font: 700 .68em/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); transition: background .4s; }
.pill::before { content: ""; width: 1.05em; height: 1.05em; border-radius: 50%; background: #5DBE8E; transition: background .4s; }
.pill.brk { background: var(--break-c); } .pill.brk::before { background: #9C86F5; }
.pill.done { background: var(--primary-c); } .pill.done::before { background: var(--coral); }
.pill.ot { background: var(--ot-c); } .pill.ot::before { background: var(--coral); }
.sched { margin: 1.15em 0 0; font: 800 .93em/1.2 var(--sans); color: var(--ink); }
.timer { margin: .5em 0 0; }
.rd { display: inline-flex; align-items: flex-start; height: 1em; font: 700 2.95em/1 var(--mono); letter-spacing: -.04em; color: var(--ink); overflow: hidden; font-variant-numeric: tabular-nums; }
.rd .dg { position: relative; width: .6em; height: 1em; overflow: hidden; flex: none; }
.rd .dg i { display: block; font-style: normal; transition: transform .6s cubic-bezier(.2, .85, .2, 1); transform: translate3d(0, calc(var(--d, 0) * -1em), 0); }
.rd .dg b { display: block; height: 1em; line-height: 1em; font-weight: inherit; }
.rd .sep { width: .42em; text-align: center; height: 1em; line-height: .95em; opacity: .9; }
.rd .txt { line-height: 1em; white-space: nowrap; }
.app.fast .rd .dg.ss i { transition-duration: .12s; filter: blur(.04em); opacity: .55; }
.timer-sub { margin-top: .45em; font-size: .86em; color: var(--ink2); min-height: 1.2em; }
.arc { display: block; width: 100%; margin: .4em 0 0; overflow: visible; }
.a-track { fill: none; stroke: color-mix(in srgb, var(--line2) 70%, transparent); stroke-width: 11; stroke-linecap: round; }
.a-prog { fill: none; stroke: url(#a-grad); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 377; stroke-dashoffset: 377; transition: stroke-dashoffset .8s var(--ease); }
.a-base { stroke: color-mix(in srgb, var(--line2) 80%, transparent); stroke-width: 2; stroke-linecap: round; }
.a-body { transition: transform .9s var(--ease); }
.a-glow { fill: color-mix(in srgb, var(--body) 42%, transparent); transition: fill .5s; }
.a-sun { fill: var(--sun, #FFD76A); } .a-shine { fill: rgba(255, 255, 255, .55); }
.a-sunset { transition: opacity .6s; opacity: calc(1 - var(--night)); }
.a-moon { transition: opacity .6s; opacity: var(--night); }
.a-moon .m { fill: #EEE9FF; }
.a-cloud { fill: #B9A7FF; opacity: 0; transition: opacity .45s; }
.a-cloud .hi { fill: rgba(255, 255, 255, .38); }
.app.is-break .a-cloud { opacity: 1; }
.app.is-break .a-sunset, .app.is-break .a-moon { opacity: 0 !important; }
.app.is-break .a-glow { fill: rgba(185, 167, 255, .38); }

.tiles { display: grid; gap: .6em; margin-top: .8em; }
.tiles.t3 { grid-template-columns: 1fr 1.05fr 1fr; }
.tiles.t2 { grid-template-columns: 1fr 1fr; gap: .7em; }
.tile-a { padding: .78em .85em; border-radius: 1.35em; background: var(--surface); border: .08em solid var(--line); transition: background .5s; min-width: 0; }
.tile-a.hl { background: var(--primary-c); }
.tile-a.lil { background: var(--break-c); } .tile-a.cor { background: var(--ot-c); }
.tile-a small { display: block; font: 600 .66em/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); margin-bottom: .55em; }
.tile-a b { display: block; font: 600 1.12em/1.1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.tile-a em { display: block; font: normal 400 .7em/1.2 var(--sans); color: var(--ink2); margin-top: .3em; }
.hist { display: flex; justify-content: space-between; align-items: center; margin-top: 1.4em; }
.hist h4 { font: 600 1.6em/1 var(--serif); letter-spacing: -.03em; }
.hist .chips { gap: .4em; }

/* Mindful */
.orb-card { position: relative; margin-top: 1em; height: 13.8em; border-radius: 1.4em; overflow: hidden; display: grid; place-items: center; background: radial-gradient(70% 90% at 12% 85%, color-mix(in srgb, var(--peach) 60%, transparent), transparent 65%), radial-gradient(70% 80% at 92% 8%, color-mix(in srgb, var(--lilac) 70%, transparent), transparent 62%), radial-gradient(70% 70% at 90% 92%, color-mix(in srgb, var(--sage) 60%, transparent), transparent 62%), color-mix(in srgb, var(--surface) 55%, var(--canvas)); border: .08em solid var(--line); }
.orb { position: relative; width: 8em; height: 8em; display: grid; place-items: center; transform: scale(var(--s, .8)); will-change: transform; }
.orb i { position: absolute; border-radius: 50%; }
.orb i:nth-child(1) { inset: 0; background: #EEE9FF; box-shadow: 0 0 0 .08em rgba(255, 179, 138, .5), 0 1em 2.4em rgba(43, 33, 64, .16); }
.orb i:nth-child(2) { inset: 12%; background: #E3F5EA; } .orb i:nth-child(3) { inset: 27%; background: #FFD6BC; } .orb i:nth-child(4) { inset: 41%; background: #FFD76A; }
.orb-word { position: absolute; bottom: .95em; left: 0; right: 0; text-align: center; font: 600 1.15em/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.wk { margin-top: .85em; padding: .95em 1.1em; border-radius: 999px; background: var(--surface); border: .08em solid var(--line); font: 700 .93em/1.1 var(--sans); }

/* Insights */
.seg { display: grid; grid-template-columns: 1fr 1.2fr 1.1fr; margin-top: .9em; padding: .3em; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); border: .08em solid var(--line); }
.seg button { height: 2.3em; border: 0; border-radius: 999px; background: none; font: 600 .86em/1 var(--sans); color: var(--ink2); transition: background .3s, color .3s; }
.seg button.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 .1em .4em color-mix(in srgb, var(--ink) 12%, transparent); }
.range { display: flex; align-items: center; justify-content: center; gap: .9em; margin: .95em 0 .1em; position: relative; }
.range .rb { position: absolute; left: 0; width: 2.4em; height: 2.4em; border-radius: 50%; border: .08em solid var(--line); background: color-mix(in srgb, var(--surface) 60%, transparent); display: grid; place-items: center; }
.range .rb svg { width: 1.2em; height: 1.2em; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.range b { font: 600 1.2em/1 var(--serif); letter-spacing: -.02em; }
.cardx { margin-top: .8em; padding: 1.05em 1.1em; border-radius: 1.4em; background: var(--surface); border: .08em solid var(--line); }
.cardx small { display: block; font: 600 .7em/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }
.cardx .big { display: block; margin: .55em 0 .55em; font: 600 2.2em/1 var(--serif); letter-spacing: -.03em; }
.meter { height: .72em; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--peach), var(--butter)); transition: width 1.4s var(--ease) .15s; }
.pg.is-on .meter i { width: var(--p, 80%); }
.meter-row { display: flex; justify-content: space-between; align-items: center; margin-top: .7em; font-size: .8em; color: var(--ink2); }
.meter-row em { font-style: normal; padding: .55em .8em; border-radius: 999px; background: var(--break-c); color: var(--ink); font-weight: 600; }
.chart { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: .5em; align-items: end; height: 11.2em; padding: .9em .9em 2em; }
.chart::before { content: ""; position: absolute; left: .9em; right: .9em; top: .95em; border-top: .12em dashed color-mix(in srgb, var(--lilac) 70%, transparent); }
.chart div { position: relative; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--lilac) 18%, transparent); display: flex; align-items: flex-end; }
.chart div i { display: block; width: 100%; height: 0; border-radius: 999px; background: var(--sage); transition: height 1.1s var(--ease) calc(var(--k) * 70ms + .2s); }
.pg.is-on .chart div i { height: var(--h); }
.chart div span { position: absolute; left: 0; right: 0; bottom: -1.7em; text-align: center; font: 600 .78em/1 var(--sans); color: var(--ink2); }
.ring-a { display: grid; grid-template-columns: 5.2em 1fr; gap: 1em; align-items: center; }
.ring-a .r { position: relative; width: 5.2em; height: 5.2em; }
.ring-a svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-a circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.ring-a .t { stroke: color-mix(in srgb, var(--ink) 12%, transparent); }
.ring-a .p { stroke: var(--peach); stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.pg.is-on .ring-a .p { stroke-dashoffset: 66; }
.ring-a .r b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 1.7em/1 var(--serif); letter-spacing: -.03em; }
.ring-a p { font-size: .84em; color: var(--ink2); margin-top: .35em; }
.ring-a h5 { font: 600 1.15em/1.1 var(--serif); }

/* Settings */
.setc { margin-top: .8em; padding: 1.05em 1.1em; border-radius: 1.4em; background: var(--surface); border: .08em solid var(--line); }
.setc h5 { font: 600 1.18em/1.1 var(--serif); letter-spacing: -.02em; margin-bottom: .7em; }
.setc .note { margin-top: .7em; font-size: .8em; color: var(--ink2); }
.row { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .7em 0; border-top: .08em solid var(--line); font-size: .9em; font-weight: 600; }
.row:first-of-type { border-top: 0; }
.row span.sub { display: block; font-weight: 400; font-size: .86em; color: var(--ink2); }
.sw { position: relative; flex: none; width: 2.9em; height: 1.65em; border-radius: 999px; border: 0; background: color-mix(in srgb, var(--ink) 16%, transparent); transition: background .3s; }
.sw::after { content: ""; position: absolute; left: .2em; top: .2em; width: 1.25em; height: 1.25em; border-radius: 50%; background: #fff; box-shadow: 0 .1em .3em rgba(0, 0, 0, .25); transition: transform .4s var(--spring); }
.sw[aria-checked="true"] { background: var(--peach); } .sw[aria-checked="true"]::after { transform: translateX(1.25em); }
.ok-line { display: flex; align-items: center; gap: .6em; font-weight: 700; font-size: .92em; }
.ok-line i { width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--sage); position: relative; flex: none; }
.ok-line i::after { content: ""; position: absolute; left: .3em; top: .28em; width: .5em; height: .27em; border-left: .13em solid #1b3a2b; border-bottom: .13em solid #1b3a2b; transform: rotate(-48deg); }

/* bottom navigation, as in the app */
.nav { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: .7em .5em 1.55em; background: color-mix(in srgb, var(--raised) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav::after { content: ""; position: absolute; left: 50%; bottom: .5em; width: 7.6em; height: .22em; margin-left: -3.8em; border-radius: 99px; background: color-mix(in srgb, var(--ink) 55%, transparent); }
.nav button { position: relative; display: grid; justify-items: center; gap: .15em; background: none; border: 0; padding: .1em 0; font: 600 .72em/1.2 var(--sans); color: var(--ink2); }
.nav button .ic { display: grid; place-items: center; width: 4.3em; height: 2.3em; border-radius: 999px; transition: background .4s var(--ease), transform .4s var(--spring); }
.nav button svg { width: 2em; height: 2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav button.is-on { color: var(--ink); } .nav button.is-on .ic { background: var(--primary-c); }
.nav button:active .ic { transform: scale(.92); }

/* the "When did you start?" sheet */
.scrim { position: absolute; inset: 0; z-index: 7; background: rgba(43, 33, 64, .5); opacity: 0; pointer-events: none; transition: opacity .4s; }
.sheet { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; padding: .9em 1.2em 2.1em; border-radius: 1.9em 1.9em 0 0; background: var(--surface); transform: translate3d(0, 105%, 0); transition: transform .6s var(--ease); }
.app.sheet-open .scrim { opacity: 1; pointer-events: auto; } .sheet.is-open { transform: none; }
.sheet .grab { width: 1.9em; height: .22em; margin: 0 auto 1em; border-radius: 9px; background: var(--ink2); opacity: .8; }
.sheet h4 { font: 600 1.5em/1.1 var(--serif); letter-spacing: -.02em; }
.sheet p { margin: .5em 0 1em; font-size: .88em; color: var(--ink2); }
.opt { display: flex; align-items: center; gap: .9em; width: 100%; margin-bottom: .55em; padding: .55em .8em; border-radius: 1.5em; background: var(--surface); border: .08em solid var(--line); text-align: left; font: 700 .93em/1.2 var(--sans); color: var(--ink); transition: background .3s, transform .3s var(--spring); }
.opt:hover { background: color-mix(in srgb, var(--primary-c) 40%, var(--surface)); } .opt:active { transform: scale(.98); }
.opt .oi { display: grid; place-items: center; width: 2.7em; height: 2.7em; border-radius: 50%; background: var(--primary-c); flex: none; }
.opt .oi svg { width: 1.5em; height: 1.5em; fill: none; stroke: #2B2140; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.toast { position: absolute; z-index: 9; left: 1.2em; right: 1.2em; bottom: 6.5em; padding: .85em 1.05em; border-radius: 1.2em; background: #2B2140; color: #FFF8EF; font: 700 .86em/1.3 var(--sans); box-shadow: 0 .6em 1.6em rgba(0,0,0,.28); opacity: 0; transform: translate3d(0, .8em, 0) scale(.97); pointer-events: none; transition: opacity .35s, transform .5s var(--spring); }
.toast.show { opacity: 1; transform: none; }
button.chip.pro, .row button.chip { cursor: pointer; }
.app-note { position: absolute; top: calc(100% + 14px); left: 50%; width: max(100%, 320px); transform: translateX(-50%); margin: 0; text-align: center; font-size: 13.5px; line-height: 1.4; color: var(--ink2); }
.app-note b { color: var(--ink); } .app-note small { display: block; color: var(--ink3); margin-top: 2px; font-size: 12.5px; }

@media (min-width: 981px) and (max-height: 840px) { .app-note small { display: none; } }
@media (max-width: 980px) { .app { --aw: min(88vw, 396px); } .app-note { position: static; transform: none; width: auto; margin: 18px auto 0; max-width: 24em; font-size: 14.5px; } }
@media (prefers-reduced-motion: reduce) { .app-bg i { animation: none; } .rd .dg i, .meter i, .chart div i { transition-duration: .001ms; } }