/* Steady on June's iPhone and her Apple Watch.

   The idea the whole look hangs on: color tells you the time of day. Each moment June
   takes tablets has its own light, from dawn peach at 7:00 AM through morning gold, dusk
   rose, twilight violet and night blue at bedtime. The moment cards wear it, the Watch
   glows with it, and the sky behind the two devices turns with the hour. A woman of 79
   reads "evening" from the color before she reads a word.

   The app itself is white, so that light has somewhere to land. Type is the system face,
   which is SF Pro on every Apple device, with Inter where there is none: SF Pro Text for
   reading, SF Pro Display, heavier and tighter, for the big moments: the greeting, the
   times, the names. Nothing a person reads is below 15px on the phone, every target is at least 56px
   tall, and every state also carries a word and a shape, never color alone. */

@font-face {
    font-family: "Inter ST";
    src: url("/assets/fonts/inter-variable.woff2") format("woff2");
    font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
    color-scheme: light;
    --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter ST", system-ui, sans-serif;
    --round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Inter ST", system-ui, sans-serif;
    --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter ST", system-ui, sans-serif;

    --ink: #0b0f1a;
    --ink2: #444c5a;        /* 8.6:1 on white */
    --ink3: #646c7b;        /* small labels, 5.3:1 on white */
    --line: #eceef2;
    --fill: #f4f5f7;
    --ok: #15803d;  --ok-bg: #e8f6ee;
    --warn: #93560a; --warn-bg: #fff3dc;
    --late: #c2261b; --late-bg: #ffe9e6;
    --info: #1d4ed8; --info-bg: #e7efff;
    --bg: #ffffff;          /* the app's ground: white, as asked */
    --card: #ffffff;
    --off: #e2e5ea;         /* a switch that is off, an unfilled track */
    --dash: #dfe3ea;

    --spring: cubic-bezier(.32, .72, 0, 1);
    --pop: cubic-bezier(.34, 1.56, .64, 1);
    --pop: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
    --bounce: linear(0, .004, .016, .035, .063 9.1%, .141, .25, .391, .563, .765, 1 36.4%, .946, .901 45.5%, .875, .867 52.3%, .878, .907 59.1%, .949, 1 72.7%, .983, .975 81.8%, .978 86.4%, .993, 1);
    --soft: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box }
html, body { margin: 0; min-height: 100% }
body {
    position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden;
    font-family: var(--ui); color: var(--sky-ink); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; text-align: inherit }
h1, h2, h3, p, figure { margin: 0 }
ul, ol { margin: 0; padding: 0; list-style: none }
svg { display: block }
/* no italic anywhere, by rule: the inline elements that default to it are set upright */
i, em, cite, var, address, dfn { font-style: normal }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }

/* ───────────── the sky ─────────────
   Seven hours, one per moment. Each names a ground, three lights and the ink that reads
   on it. The lights drift slowly; switching moment crossfades all four colors at once. */
body { --sky: #fbe3d3; --l1: #ffb48f; --l2: #ffd98a; --l3: #c9d8ff; --sky-ink: #3a1e12; --chip: rgba(255, 255, 255, .55); --shade: rgba(120, 50, 20, .35) }
body[data-sky="morning"] { --sky: #fff0d6; --l1: #ffc861; --l2: #ff9f7a; --l3: #bfe3ff; --sky-ink: #3a2508; --shade: rgba(140, 80, 10, .35) }
body[data-sky="midday"] { --sky: #dcefff; --l1: #8fcaff; --l2: #b8f1e1; --l3: #ffffff; --sky-ink: #0e2a44; --shade: rgba(20, 60, 110, .35) }
body[data-sky="night"] { --sky: #130e34; --l1: #5a2fc2; --l2: #b0307a; --l3: #1f3fa8; --sky-ink: #f3eeff; --chip: rgba(255, 255, 255, .12); --shade: rgba(0, 0, 0, .6) }
body[data-sky="deep"] { --sky: #0b1030; --l1: #2b3fb8; --l2: #15606e; --l3: #47288f; --sky-ink: #eaf0ff; --chip: rgba(255, 255, 255, .12); --shade: rgba(0, 0, 0, .6) }
body[data-sky="early"] { --sky: #ddf6ef; --l1: #86e6cf; --l2: #ffcfb2; --l3: #bdd7ff; --sky-ink: #0f3a33; --shade: rgba(10, 80, 70, .32) }
body[data-sky="dusk"] { --sky: #ffe2e8; --l1: #ff9fb4; --l2: #b9a3ff; --l3: #ffcfa6; --sky-ink: #3d0a1f; --shade: rgba(140, 40, 80, .32) }
html.dark body[data-sky="dusk"] { --sky: #1c0b16; --l1: #7a2848; --l2: #46307e; --l3: #6e3a1c; --sky-ink: #ffe4ec }
body[data-sky="bright"] { --sky: #fff5e3; --l1: #ffd27a; --l2: #ffbdd0; --l3: #b7e8ff; --sky-ink: #3a2a08; --shade: rgba(140, 90, 20, .32) }

/* The same hours after dark, for when the portfolio is in dark mode: each keeps its own hue,
   so the hour still reads, on a ground deep enough to sit inside a dark page. The two night
   hours are already dark and stay as they are. */
html.dark body { --sky: #1a0f12; --l1: #8a3d24; --l2: #6e4f14; --l3: #24336e; --sky-ink: #ffe6d8; --chip: rgba(255, 255, 255, .12); --shade: rgba(0, 0, 0, .65) }
html.dark body[data-sky="morning"] { --sky: #1a1307; --l1: #8a5a10; --l2: #7a3424; --l3: #1c4466; --sky-ink: #fff0d2 }
html.dark body[data-sky="midday"] { --sky: #07121e; --l1: #1b4f86; --l2: #175848; --l3: #27324e; --sky-ink: #e2efff }
html.dark body[data-sky="early"] { --sky: #061915; --l1: #126956; --l2: #6a3a26; --l3: #1d376a; --sky-ink: #d8faf0 }
html.dark body[data-sky="bright"] { --sky: #191305; --l1: #785812; --l2: #782c46; --l3: #1b4864; --sky-ink: #fff2d8 }
html.dark body[data-sky="night"] { --sky: #0d0a26 }
html.dark body[data-sky="deep"] { --sky: #080b22 }
html.dark .sky i { opacity: .8 }
html.dark .sky .grain { opacity: .1 }

.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--sky); transition: background-color 1.4s var(--soft) }
.sky i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .9; transition: background-color 1.6s var(--soft) }
.sky .l1 { width: 62vmax; height: 62vmax; left: -18vmax; top: -24vmax; background: var(--l1); animation: drift1 26s ease-in-out infinite alternate }
.sky .l2 { width: 54vmax; height: 54vmax; right: -16vmax; top: 8vmax; background: var(--l2); animation: drift2 31s ease-in-out infinite alternate }
.sky .l3 { width: 48vmax; height: 48vmax; left: 22vmax; bottom: -30vmax; background: var(--l3); animation: drift3 23s ease-in-out infinite alternate }
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.12) } }
@keyframes drift2 { to { transform: translate(-12vmax, 14vmax) scale(.9) } }
@keyframes drift3 { to { transform: translate(-10vmax, -12vmax) scale(1.15) } }
/* a fine grain over the light, so the gradients read as paper and never as banding */
.sky .grain {
    position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────────── the workbench ─────────────
   A glass capsule floating over the sky. It is not the app, so it keeps one dark glass in
   every hour, and a bare embed never shows it. */
.harness {
    position: sticky; top: 12px; z-index: 100; display: flex; align-items: center; gap: 8px; height: 58px;
    margin: 12px auto 0; width: min(1240px, calc(100% - 24px)); padding: 0 8px 0 10px; border-radius: 20px;
    background: rgba(14, 16, 28, .66); color: #c9ced8; backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5);
}
body.bare .harness { display: none }
.h-brand { display: flex; align-items: center; gap: 10px; flex: none; padding-right: 12px; border-right: 1px solid rgba(255, 255, 255, .12); height: 34px }
.h-mark { width: 34px; height: 34px; border-radius: 10px; background: url("icon.svg") center / cover; box-shadow: 0 4px 12px -4px rgba(255, 111, 134, .6) }
.h-name { font-family: var(--display); font-weight: 750; color: #fff; font-size: 19px; line-height: 19px }
.h-name small { display: block; font-family: var(--ui); font-weight: 600; color: #d0d5dd; font-size: 10.5px; line-height: 14px; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px }
.h-scroll {
    display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px;
    mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.h-scroll::-webkit-scrollbar { display: none }
.h-btn {
    flex: none; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 6px; border-radius: 99px;
    color: #f1f3f6; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background .25s, color .25s;
}
.h-btn .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .08); font-variant-numeric: tabular-nums }
.h-btn:hover { background: rgba(255, 255, 255, .07); color: #fff }
.h-btn[aria-current] { background: #fff; color: #0b0f1a }
.h-btn[aria-current] .n { background: var(--h, #ffb13b); color: #2a1600 }
.h-tool { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #d8dce3; flex: none }
.h-tool:hover { background: rgba(255, 255, 255, .08); color: #fff }
.h-tool svg { width: 19px; height: 19px }
.h-tool:focus-visible, .h-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px }
@media (max-width: 600px) { .h-name small { display: none } .h-brand { padding-right: 8px } .h-name { font-size: 17px } }
/* a phone width frame: the icon names the app, and the moments get the room */
@media (max-width: 460px) { .h-name { display: none } }

/* ───────────── the stage ───────────── */
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 26px 12px 40px }
body.bare .stage { padding: 14px 0 18px }
.moment {
    max-width: 760px; text-align: center; margin-bottom: 22px; min-height: 30px;
    font-family: var(--display); font-weight: 500; font-size: 20px; line-height: 29px;
    color: var(--sky-ink); transition: color 1.2s var(--soft); text-wrap: balance;
}
.moment b {
    display: inline-block; margin-right: 8px; padding: 3px 11px; border-radius: 99px; vertical-align: 3px; background: var(--chip);
    font-family: var(--ui); font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.moment.swap { animation: lineIn .7s var(--soft) both }
@keyframes lineIn { from { opacity: 0; transform: translateY(8px); filter: blur(4px) } }
body.bare .moment { display: none }

.rig { display: flex; align-items: center; justify-content: center; gap: 56px; zoom: var(--fit, 1) }
.rig.stack { flex-direction: column; gap: 30px }
.rig.stack.watch-first .dev-watch { order: -1 }
.dev { display: flex; flex-direction: column; align-items: center; gap: 14px }
.dev[hidden] { display: none }
.dev-cap { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-ink); transition: color 1.2s }
/* solo: one bare device filling a device-shaped frame on another page, as the recruiters
   deck shows a phone. The page around it is the frame, so no sky and no caption. */
body.solo .sky, body.solo .dev-cap { display: none }
body.solo .stage { padding: 0; justify-content: center }

/* ───────────── the iPhone ─────────────
   Titanium band, a 9px black border, a 402 by 780 point screen. The side buttons are
   there because a phone without them reads as a drawing. */
.phone {
    position: relative; flex: none; width: 430px; padding: 14px; border-radius: 64px;
    background: linear-gradient(140deg, #e3e5e9 0%, #8d929b 18%, #f2f3f5 38%, #747a84 62%, #d4d7dc 82%, #9aa0a8 100%);
    box-shadow: 0 60px 90px -40px var(--shade), 0 30px 40px -30px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .5);
    transition: box-shadow 1.4s var(--soft);
}
.phone::before { content: ""; position: absolute; inset: 4px; border-radius: 60px; background: #050507; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06) }
.phone > span { position: absolute; width: 5px; border-radius: 3px; background: linear-gradient(90deg, #6f747d, #d9dce1 60%, #8a8f97) }
.btn-a { left: -4px; top: 148px; height: 34px }
.btn-v1 { left: -4px; top: 206px; height: 62px }
.btn-v2 { left: -4px; top: 282px; height: 62px }
.btn-p { right: -4px; top: 226px; height: 98px }
.screen {
    position: relative; z-index: 1; width: 402px; height: 780px; border-radius: 50px; overflow: hidden; isolation: isolate;
    background: var(--bg); color: var(--ink); font-size: 19px; line-height: 26px; user-select: none; -webkit-user-select: none; transition: background .4s;
}

.sb {
    position: absolute; inset: 0 0 auto 0; height: 56px; z-index: 60; pointer-events: none;
    display: flex; align-items: center; justify-content: space-between; padding: 8px 34px 0 50px;
    font-family: var(--round); font-size: 17px; font-weight: 700; color: var(--ink); transition: color .4s;
}
.sb-r { display: flex; align-items: center; gap: 6px }
.sb svg { height: 12px; width: auto }
.screen.on-lock .sb, .screen.on-call .sb { color: #fff }

.island {
    position: absolute; top: 11px; left: 50%; z-index: 70; width: 124px; height: 36px; border-radius: 20px;
    transform: translateX(-50%); background: #000; color: #fff; overflow: hidden; display: flex; align-items: center;
    transition: width .55s var(--pop), height .55s var(--pop), border-radius .55s var(--spring), top .55s var(--spring);
}
.island.open { width: 378px; height: 74px; border-radius: 38px; top: 9px }
.island-in { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 14px; opacity: 0; transform: scale(.88); filter: blur(6px); transition: opacity .25s, transform .4s var(--spring), filter .3s }
.island.open .island-in { opacity: 1; transform: none; filter: none; transition-delay: .14s }
.island-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--ig, linear-gradient(135deg, #5ee08f, #15a34a)); color: #04140a }
.island-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.island-t { flex: 1; min-width: 0 }
.island-t b { display: block; font-size: 16px; line-height: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.island-t span { display: block; font-size: 14px; line-height: 19px; color: #dde1e7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.island-undo { height: 40px; padding: 0 16px; border-radius: 99px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 16px; font-weight: 700; flex: none }

.hi { position: absolute; bottom: 8px; left: 50%; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: var(--ink); z-index: 65; pointer-events: none }
.screen.on-lock .hi, .screen.on-call .hi { background: #fff }

/* one scrolling page under the status bar, above the floating tab bar */
.view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 56px 0 124px; z-index: 1 }
.view::-webkit-scrollbar { display: none }
.view.in > * { animation: pushIn .55s var(--spring) both }
.view.out > * { animation: popIn .55s var(--spring) both }
.view.in > :nth-child(2), .view.out > :nth-child(2) { animation-delay: .03s }
.view.in > :nth-child(3), .view.out > :nth-child(3) { animation-delay: .06s }
.view.in > :nth-child(4), .view.out > :nth-child(4) { animation-delay: .09s }
.view.in > :nth-child(n+5), .view.out > :nth-child(n+5) { animation-delay: .12s }
@keyframes pushIn { from { transform: translateX(42px); opacity: 0 } }
@keyframes popIn { from { transform: translateX(-30px); opacity: 0 } }
.view.rise > * { animation: riseIn .7s var(--soft) both }
.view.rise > :nth-child(2) { animation-delay: .05s } .view.rise > :nth-child(3) { animation-delay: .1s } .view.rise > :nth-child(n+4) { animation-delay: .15s }
@keyframes riseIn { from { transform: translateY(18px); opacity: 0 } }

/* headings */
.hd { padding: 12px 24px 0 }
.hd .date { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2) }
.hd h1 { font-family: var(--display); font-weight: 700; font-size: 35px; line-height: 40px; letter-spacing: -.02em; margin-top: 6px }
.hd p { font-size: 17px; line-height: 24px; color: var(--ink2); margin-top: 8px }
.sh { padding: 0 24px 10px; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2) }
.blk { margin-top: 28px }

.nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 0 }
.back { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 16px 0 10px; border-radius: 22px; background: var(--fill); font-size: 17px; font-weight: 600 }
.back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }

/* ───────────── the sky arc ─────────────
   The day drawn as the sun's path, 6:00 AM at the left horizon, 11:00 PM at the right.
   The sun stands at now; every moment sits where it falls, filled when it is taken. */
.arc { position: relative; margin: 6px 16px 0; height: 196px }
.arc svg { width: 370px; height: 180px; overflow: visible }
.arc .ahead { fill: none; stroke: var(--dash); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round }
.arc .past { fill: none; stroke: url(#arcG); stroke-width: 5; stroke-linecap: round }
.arc .horizon { stroke: var(--line); stroke-width: 1.5 }
.arc .hole { fill: var(--bg) }
.arc .mdot.due circle.halo { animation: halo 2s var(--soft) infinite }
@keyframes halo { 0% { r: 9; opacity: .6 } 100% { r: 20; opacity: 0 } }
.arc .sun-glow { animation: breathe 4s ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box }
@keyframes breathe { to { transform: scale(1.18); opacity: .7 } }
.arc-c { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center }
.arc-c .n { font-family: var(--display); font-weight: 650; font-size: 52px; line-height: 52px; letter-spacing: -.03em }
.arc-c .n small { font-size: 24px; color: var(--ink3); letter-spacing: 0; margin-left: 6px }
.arc-c .l { font-size: 15px; line-height: 20px; color: var(--ink2); margin-top: 2px }
.arc-t { position: absolute; bottom: -6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink3); text-transform: uppercase }
.arc-t.a { left: 10px } .arc-t.b { right: 10px }

/* ───────────── the moment card ─────────────
   The one loud thing on the page: the moment's own light, its time large, its tablets
   on white glass so they read on any color. */
.next {
    position: relative; overflow: hidden; margin: 18px 16px 0; padding: 22px 18px 18px; border-radius: 32px;
    background: var(--g); color: var(--gi); box-shadow: 0 24px 44px -24px var(--gs);
}
.next::before { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -110px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%); pointer-events: none }
.next::after { content: ""; position: absolute; width: 230px; height: 230px; right: -64px; top: -96px; border-radius: 50%; pointer-events: none;
    background: repeating-radial-gradient(circle, rgba(255, 255, 255, .0) 0 18px, rgba(255, 255, 255, .18) 18px 19.5px); opacity: .8 }
.next > * { position: relative; z-index: 1 }
.next .when { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .42); font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase }
.next.dark .when { background: rgba(255, 255, 255, .16) }
.next .when i { width: 8px; height: 8px; border-radius: 50%; background: currentColor }
.next .when.live i { animation: blink 1.4s ease-in-out infinite }
@keyframes blink { 50% { opacity: .25 } }
.next .row1 { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px }
.next .tm { font-family: var(--display); font-weight: 650; font-size: 76px; line-height: 64px; letter-spacing: -.04em }
.next .tm small { font-family: var(--ui); font-size: 18px; font-weight: 700; letter-spacing: .02em; margin-left: 6px }
.next .mico { width: 64px; height: 64px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .4) }
.next.dark .mico { background: rgba(255, 255, 255, .14) }
.next .mico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.next h2 { font-family: var(--display); font-weight: 750; font-size: 30px; line-height: 34px; letter-spacing: -.01em; margin-top: 12px }
.next .sub { font-size: 17px; line-height: 23px; opacity: .88; margin-top: 4px }
.pl { display: grid; gap: 6px; margin-top: 16px }
.pl > * {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 8px 10px 8px 8px; border-radius: 20px;
    background: rgba(255, 255, 255, .74); color: #0b0f1a; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: transform .2s var(--spring), background .3s;
}
.pl button:active { transform: scale(.98) }
.pl .txt { flex: 1; min-width: 0 }
.pl b { display: block; font-size: 18px; line-height: 23px; font-weight: 650 }
.pl span.s { display: block; font-size: 15px; line-height: 20px; color: #596273 }
.pl span.okt { display: block; font-size: 15px; line-height: 20px; color: #15803d; font-weight: 700 }
.ck { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 2.5px solid rgba(11, 15, 26, .22); display: grid; place-items: center; transition: background .3s, border-color .3s }
.ck svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24 }
.ck.on { background: #16a34a; border-color: #16a34a }
.ck.skip { background: #8a92a1; border-color: #8a92a1 }
.ck.skip svg { stroke-dasharray: none; stroke-dashoffset: 0 }
.ck.on svg { stroke-dashoffset: 0 }
.ck.pop { animation: ckPop .7s var(--pop) both; animation-delay: calc(var(--i, 0) * 80ms) }
.ck.pop svg { animation: draw .35s var(--soft) both; animation-delay: calc(var(--i, 0) * 80ms + .15s) }
@keyframes ckPop { 0% { transform: scale(.6); background: transparent; border-color: rgba(11, 15, 26, .22) } 60% { transform: scale(1.18) } 100% { transform: scale(1) } }
@keyframes draw { from { stroke-dashoffset: 24 } to { stroke-dashoffset: 0 } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px }
.chips span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; background: rgba(255, 255, 255, .72); color: #0b0f1a; font-size: 15px; line-height: 20px; font-weight: 600 }
.chips .pi { width: 28px; height: 28px; border-radius: 50% }
.chips .pi i { zoom: .6 }
.next.dark .chips span { background: rgba(255, 255, 255, .92) }
.go {
    position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 64px; margin-top: 14px; border-radius: 32px;
    background: #0b0f1a; color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -.01em; transition: transform .2s var(--spring), background .4s;
}
.next.dark .go { background: #fff; color: #0b0f1a }
.go svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.go:active { transform: scale(.97) }
.next .go.done { background: #16a34a; color: #fff }
.later { display: block; width: 100%; height: 50px; margin-top: 4px; border-radius: 25px; font-size: 17px; font-weight: 700; text-align: center }
.later:active { background: rgba(255, 255, 255, .3) }
.later-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px }
.later-row .later { margin-top: 0; height: 52px; font-size: 16px; background: rgba(255, 255, 255, .34) }
.next.dark .later-row .later { background: rgba(255, 255, 255, .14) }
.next .go.alt { margin-top: 8px; background: rgba(255, 255, 255, .86); color: #0b0f1a; font-size: 18px }
/* the medication guide's own words, on the card when a dose is late */
.lbl-note { margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .86); color: #0b0f1a; font-size: 16px; line-height: 22px }
.lbl-note b { display: block; margin-bottom: 3px; font-size: 12.5px; line-height: 16px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #444c5a }
/* the confirmation: a ring of sparks out of the button, once */
.spark { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--sc, #fff); pointer-events: none;
    animation: spark .9s var(--soft) both; animation-delay: .05s }
@keyframes spark { 0% { transform: translate(0, 0) scale(.4); opacity: 1 } 100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0 } }
.next.leave { animation: cardOut .45s var(--soft) both }
@keyframes cardOut { to { transform: translateY(-10px) scale(.97); opacity: 0; filter: blur(6px) } }
.next.enter { animation: cardIn .75s var(--spring) both }
@keyframes cardIn { from { transform: translateY(26px) scale(.96); opacity: 0 } }
.next.alert { animation: nudge 2.4s ease-in-out infinite }
@keyframes nudge { 0%, 70%, 100% { box-shadow: 0 24px 44px -24px var(--gs), 0 0 0 0 rgba(194, 38, 27, 0) } 82% { box-shadow: 0 24px 44px -24px var(--gs), 0 0 0 8px rgba(194, 38, 27, .2) } }

/* a tablet, drawn as it is in the hand */
.pi { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--pc-bg, #f4f5f7) }
.pi i { display: block; position: relative; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1), inset 0 2px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(0, 0, 0, .18) }
.pi i.round { width: 24px; height: 24px; border-radius: 50% }
.pi i.small { width: 17px; height: 17px; border-radius: 50% }
.pi i.oval { width: 32px; height: 19px; border-radius: 50% }
.pi i.oblong { width: 34px; height: 15px; border-radius: 8px }
.pi i.soft { width: 20px; height: 28px; border-radius: 50%; box-shadow: inset 4px 5px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(150, 100, 0, .25), 0 1px 2px rgba(0, 0, 0, .2) }
.pi.lg { width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--pc-bg) 70%) }
.pi.lg i { transform: scale(2.6); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 3px rgba(0, 0, 0, .14) }

/* ───────────── the day, as a line ───────────── */
.tl { margin: 0 16px }
.tl li { display: grid; grid-template-columns: 70px 30px 1fr auto; align-items: start; gap: 0 10px; padding: 11px 8px; position: relative; border-radius: 18px }
.tl li::before { content: ""; position: absolute; left: 102px; top: 40px; bottom: -12px; width: 2px; border-radius: 1px; background: var(--line) }
.tl li:last-child::before { display: none }
.tl li.now { background: var(--fill) }
.tl .t { font-size: 15px; line-height: 26px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink2); text-align: right }
.tl .d { width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2.5px solid var(--c) }
.tl .d svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round }
.tl .d.ok { background: var(--g); border-color: transparent; color: var(--gi) }
.tl .d.late { border-color: var(--late); animation: lateRing 1.6s ease-in-out infinite }
@keyframes lateRing { 50% { box-shadow: 0 0 0 6px rgba(194, 38, 27, .16) } }
.tl .d.sq { border-radius: 8px }
.tl .m { min-width: 0 }
.tl .m b { display: block; font-size: 18px; line-height: 24px; font-weight: 650 }
.tl .m span { display: block; font-size: 15px; line-height: 21px; color: var(--ink2); margin-top: 1px }
.tl li.past .m b { color: var(--ink2) }
.chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; padding: 3px 10px; border-radius: 99px; font-size: 13px; line-height: 20px; font-weight: 750; white-space: nowrap; background: var(--fill); color: var(--ink2) }
.chip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round }
.chip.ok { background: var(--ok-bg); color: var(--ok) }
.chip.now { background: var(--ink); color: var(--bg) }
.chip.late { background: var(--late-bg); color: var(--late) }
.chip.warn { background: var(--warn-bg); color: var(--warn) }
.chip.info { background: var(--info-bg); color: var(--info) }

/* ───────────── cards and rows ───────────── */
.card { margin: 0 16px; border-radius: 26px; background: var(--card); border: 1px solid var(--line); overflow: hidden }
.card + .card { margin-top: 10px }
.appt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px 14px 14px }
.appt + .appt { border-top: 1px solid var(--line) }
.cal { width: 62px; height: 68px; flex: none; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--g); color: var(--gi) }
.cal span { font-size: 12px; line-height: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85 }
.cal b { font-family: var(--display); font-size: 30px; line-height: 34px; font-weight: 700 }
.appt .txt { flex: 1; min-width: 0 }
.appt .txt b { display: block; font-size: 18px; line-height: 24px; font-weight: 650 }
.appt .txt span { display: block; font-size: 15px; line-height: 21px; color: var(--ink2) }
.appt .chip { margin-top: 6px }
.chev { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink3); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }

.rows > li, .rows > button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 10px 16px; border-bottom: 1px solid var(--line) }
.rows > :last-child { border-bottom: 0 }
.rows .k { flex: 1; min-width: 0; font-size: 18px; line-height: 24px; font-weight: 600 }
.rows .k small { display: block; font-size: 15px; line-height: 21px; color: var(--ink2); font-weight: 400 }
.rows .lbl { width: 96px; flex: none; font-size: 15px; line-height: 24px; font-weight: 650; color: var(--ink2); align-self: flex-start }
.rows .val { flex: 1; font-size: 18px; line-height: 24px }
.rows .ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--fill); color: var(--ink) }
.rows .ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }

.switch { width: 60px; height: 36px; flex: none; border-radius: 99px; background: var(--off); position: relative; transition: background .3s }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); transition: transform .4s var(--pop) }
.switch[aria-checked="true"] { background: #16a34a }
.switch[aria-checked="true"]::after { transform: translateX(24px) }

/* a medicine, opened */
.mhero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 24px 0 }
.mhero .pi.lg { animation: float 5s ease-in-out infinite alternate }
@keyframes float { to { transform: translateY(-6px) rotate(-3deg) } }
.mhero .tag { margin-top: 18px; padding: 4px 12px; border-radius: 99px; background: var(--fill); font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2) }
.mhero h1 { font-family: var(--display); font-weight: 750; font-size: 38px; line-height: 42px; letter-spacing: -.02em; margin-top: 10px }
.mhero h1 small { display: block; font-family: var(--ui); font-size: 17px; line-height: 22px; font-weight: 500; letter-spacing: 0; color: var(--ink2); margin-top: 4px }
.mhero p { font-size: 18px; line-height: 25px; color: var(--ink2); margin-top: 10px; text-wrap: balance }

.st { display: flex; align-items: center; gap: 14px; margin: 22px 16px 0; padding: 16px; border-radius: 24px }
.st .o { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center }
.st .o svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.st b { display: block; font-size: 18px; line-height: 24px }
.st span { display: block; font-size: 15px; line-height: 21px; color: var(--ink2) }
.st.ok { background: var(--ok-bg) } .st.ok .o { background: #16a34a } .st.ok b { color: var(--ok) }
.st.plain { background: var(--fill) } .st.plain .o { background: var(--ink2) }
.st.late { background: var(--late-bg); flex-wrap: wrap } .st.late .o { background: var(--late) } .st.late b { color: var(--late) }
.st .tx { flex: 1; min-width: 0 }
.st .acts { display: flex; gap: 8px; width: 100% }
.st .acts .btn { margin-top: 4px; height: 54px; font-size: 17px; background: var(--card) }

.wk { display: grid; grid-template-columns: repeat(7, 1fr); padding: 18px 8px 18px; text-align: center; isolation: isolate }
.wk .dn { font-size: 13px; line-height: 18px; font-weight: 750; color: var(--ink2) }
.wk .today .dn { color: var(--ink) }
.wk .ds { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 10px }
.wk .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center }
.wk .dot svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round }
.wk .dot.ok { background: #16a34a }
.wk .dot.late { background: #e8a33b }
.wk .dot.miss { background: var(--late) }
.wk .dot.skip { background: #8a92a1 }
.wk .dot.due { border: 2.5px dashed var(--ink3) }
.wk .today { position: relative }
.wk .today::before { content: ""; position: absolute; inset: -8px 3px -10px; border-radius: 16px; background: var(--fill); z-index: -1 }
.wk-k { display: flex; justify-content: center; gap: 16px; padding: 0 0 16px; font-size: 14px; color: var(--ink2) }
.wk-k i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px }

.quote { margin: 0 16px; padding: 18px 20px; border-radius: 24px; background: var(--fill); font-size: 18px; line-height: 26px }
.quote .src { display: block; margin-top: 10px; font-size: 14px; line-height: 19px; color: var(--ink2) }
.quote.serif-q { font-family: var(--display); font-size: 20px; line-height: 29px }
.quote.serif-q .src { font-family: var(--ui) }

.refill { padding: 18px }
.refill .top { display: flex; align-items: baseline; gap: 10px }
.refill .cnt { font-family: var(--display); font-size: 58px; line-height: 56px; font-weight: 650; letter-spacing: -.03em }
.refill .top span { font-size: 17px; color: var(--ink2) }
.refill .bar { height: 12px; margin-top: 14px; border-radius: 6px; background: var(--fill); overflow: hidden }
.refill .bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #22c55e, #16a34a); animation: fill 1.1s var(--soft) both }
.refill.low .bar i { background: linear-gradient(90deg, #ffb13b, #e8862b) }
.refill.low .cnt { color: var(--warn) }
@keyframes fill { from { width: 0 } }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 60px; border-radius: 30px; font-size: 19px; font-weight: 700; margin-top: 14px }
.btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.btn.pri { background: var(--ink); color: var(--bg) }
.btn.sec { background: var(--fill); color: var(--ink) }
.btn:active { transform: scale(.98) }
.btn + .btn { margin-top: 8px }

/* an appointment, opened */
.vhero { position: relative; overflow: hidden; margin: 12px 16px 0; padding: 22px 20px 20px; border-radius: 32px; background: var(--g); color: var(--gi); box-shadow: 0 24px 44px -24px var(--gs) }
.vhero::after { content: ""; position: absolute; width: 230px; height: 230px; right: -70px; top: -90px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0) 0 18px, rgba(255, 255, 255, .22) 18px 19.5px) }
.vhero > * { position: relative; z-index: 1 }
.vhero .k { font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8 }
.vhero .dy { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 38px; margin-top: 10px }
.vhero .tm { font-family: var(--display); font-weight: 650; font-size: 72px; line-height: 66px; letter-spacing: -.04em; margin-top: 2px }
.vhero .tm small { font-family: var(--ui); font-size: 18px; font-weight: 700; margin-left: 6px; letter-spacing: 0 }
.vhero .wh { font-size: 17px; line-height: 23px; margin-top: 12px; opacity: .9 }
.fast { display: flex; align-items: center; gap: 14px; margin: 12px 16px 0; padding: 16px 18px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, #1e2a78, #3b2aa8) }
.fast .o { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14) }
.fast .o svg { width: 26px; height: 26px; fill: none; stroke: #ffe9a8; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.fast b { display: block; font-size: 18px; line-height: 24px }
.fast span { display: block; font-size: 15px; line-height: 21px; opacity: .84 }
.bring li { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 6px 16px; border-bottom: 1px solid var(--line); font-size: 18px; cursor: pointer }
.bring li:last-child { border-bottom: 0 }
.bring .box { width: 30px; height: 30px; flex: none; border-radius: 10px; border: 2.5px solid #c6ccd6; display: grid; place-items: center; transition: background .25s, border-color .25s, transform .3s var(--pop) }
.bring .box svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .3s var(--soft) .05s }
.bring li.on .box { background: #16a34a; border-color: #16a34a; transform: scale(1.06) }
.bring li.on .box svg { stroke-dashoffset: 0 }
.bring li.on { color: var(--ink2) }

/* family */
.fam { display: flex; flex-direction: column; align-items: center; padding: 14px 24px 0; text-align: center }
.pair { display: flex }
.av { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 32px; font-weight: 700; color: #fff; border: 4px solid var(--bg); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .35) }
.av.j { background: linear-gradient(135deg, #ffc24b, #ff7a59) }
.av.k { background: linear-gradient(135deg, #8f7bff, #3b2aa8); margin-left: -18px }
.fam h1 { font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 40px; letter-spacing: -.02em; margin-top: 16px }
.fam p { font-size: 17px; line-height: 24px; color: var(--ink2); margin-top: 8px; text-wrap: balance }
.foot { padding: 18px 26px 0; font-size: 15px; line-height: 22px; color: var(--ink2); text-align: center; text-wrap: balance }

/* ───────────── the tab bar: a floating capsule of glass ───────────── */
.tabs {
    position: absolute; left: 16px; right: 16px; bottom: 26px; z-index: 20; height: 72px; padding: 6px; border-radius: 36px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; transition: opacity .3s;
    background: rgba(255, 255, 255, .76); backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8);
    box-shadow: 0 14px 34px -14px rgba(10, 15, 30, .32), 0 0 0 1px rgba(10, 15, 30, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 30px; color: #5b6474; font-size: 13px; line-height: 16px; font-weight: 650; transition: background .3s, color .3s }
.tabs svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.tabs button[aria-current] { background: rgba(11, 15, 26, .07); color: var(--ink) }
.tabs button[aria-current] svg .f { fill: currentColor; fill-opacity: .14 }
.tabs .dotb { position: absolute; top: 9px; left: calc(50% + 9px); width: 10px; height: 10px; border-radius: 50%; background: #ff7a59; border: 2px solid var(--bg) }
.screen.on-lock .tabs, .screen.on-call .tabs { opacity: 0 }

/* ───────────── a sheet ───────────── */
.sheet-dim { position: absolute; inset: 0; z-index: 40; background: rgba(5, 8, 15, .35); opacity: 0; pointer-events: none; transition: opacity .35s }
.screen.has-sheet .sheet-dim { opacity: 1; pointer-events: auto }
.sheet {
    position: absolute; inset: auto 8px 8px 8px; z-index: 41; max-height: 86%; overflow-y: auto; scrollbar-width: none;
    background: var(--card); border-radius: 42px; padding: 10px 20px 22px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .18);
    /* Closed, it sits a full height plus its shadow below the screen and is hidden, so an
       empty sheet never shows a sliver at the bottom edge. */
    transform: translateY(calc(100% + 48px)); visibility: hidden; transition: transform .55s var(--spring), visibility 0s .55s;
}
.screen.has-sheet .sheet { transform: none; visibility: visible; transition: transform .55s var(--spring) }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: #dfe3ea; margin: 0 auto 16px }
.sheet .sic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 14px; background: var(--warn-bg); color: var(--warn) }
.sheet .sic svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.sheet h2 { font-family: var(--display); font-weight: 750; font-size: 30px; line-height: 34px; letter-spacing: -.01em; margin-bottom: 10px }
.sheet p { font-size: 18px; line-height: 26px; color: var(--ink2); margin-bottom: 6px }
.sheet p b { color: var(--ink) }

/* ───────────── the lock screens ───────────── */
.lock { position: absolute; inset: 0; z-index: 30; display: none; flex-direction: column; align-items: center; padding: 72px 12px 0; color: #fff; overflow: hidden; isolation: isolate }
.lock::before { content: ""; position: absolute; inset: -10%; z-index: -1; animation: wall 18s ease-in-out infinite alternate;
    background: radial-gradient(60% 45% at 25% 18%, #ffcf9a 0%, transparent 70%), radial-gradient(70% 50% at 85% 35%, #ff8a65 0%, transparent 70%), radial-gradient(90% 60% at 50% 100%, #5b4bd6 0%, transparent 70%), linear-gradient(180deg, #ffb27a, #c45a7a 55%, #2d2a6e) }
.lock.kate::before { background: radial-gradient(60% 45% at 75% 15%, #8f6bff 0%, transparent 70%), radial-gradient(70% 50% at 10% 45%, #c2307a 0%, transparent 70%), radial-gradient(90% 60% at 50% 100%, #10163f 0%, transparent 70%), linear-gradient(180deg, #2b1a6e, #1a1240 60%, #07081a) }
@keyframes wall { to { transform: scale(1.08) translate(-2%, 2%) } }
.screen.on-lock .lock { display: flex }
.lock .date { font-size: 20px; line-height: 26px; font-weight: 600; text-shadow: 0 1px 12px rgba(0, 0, 0, .15) }
.lock .clock { font-family: var(--display); font-size: 116px; line-height: 112px; font-weight: 700; letter-spacing: -.04em; margin-top: 2px; text-shadow: 0 2px 24px rgba(0, 0, 0, .12) }
.lock .stackn { width: 100%; margin-top: auto; margin-bottom: 124px; display: flex; flex-direction: column; gap: 8px }
.ln {
    width: 100%; text-align: left; padding: 14px 16px 16px; border-radius: 30px; color: var(--ink);
    background: rgba(255, 255, 255, .76); backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .35); animation: drop .8s var(--pop) both .35s;
}
.ln + .ln { animation-delay: .5s }
.ln.fresh { animation: drop .8s var(--pop) both }
.ln.settled { animation: none }
@keyframes drop { from { transform: translateY(-40px) scale(.92); opacity: 0; filter: blur(8px) } }
.ln-top { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 18px; color: #4a5260; font-weight: 650 }
.appi { width: 26px; height: 26px; border-radius: 7px; flex: none; background: url("icon.svg") center / cover }
.ln-top .when { margin-left: auto; font-weight: 500 }
.ln-top .ts { display: inline-flex; align-items: center; gap: 4px; color: #b45309; font-weight: 750; font-size: 12px; letter-spacing: .04em }
.ln-top .ts svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.8 }
.ln b { display: block; font-size: 18px; line-height: 23px; margin-top: 8px }
.ln p { font-size: 16px; line-height: 22px; color: #2a303a; margin-top: 2px }
.ln-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px }
.ln-acts button { height: 50px; border-radius: 25px; background: rgba(11, 15, 26, .07); font-size: 17px; font-weight: 700; text-align: center }
.ln-acts button.go2 { background: var(--ink); color: #fff }
.ln.quiet { background: rgba(255, 255, 255, .62) }

.call { position: absolute; inset: 0; z-index: 35; display: none; flex-direction: column; align-items: center; padding: 110px 24px 90px; color: #fff; background: linear-gradient(180deg, #3a2a7a, #120c2e) }
.screen.on-call .call { display: flex }
.call .av { width: 120px; height: 120px; font-size: 44px; animation: ringing 1.8s ease-in-out infinite }
@keyframes ringing { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .25) } 50% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0) } }
.call .who { font-family: var(--display); font-size: 40px; line-height: 46px; font-weight: 700; margin-top: 22px }
.call .cs { font-size: 18px; opacity: .78; margin-top: 4px }
.call .end { margin-top: auto; width: 80px; height: 80px; border-radius: 50%; background: #ef4444; display: grid; place-items: center }
.call .end svg { width: 36px; height: 36px; fill: #fff; transform: rotate(135deg) }

/* ───────────── the Apple Watch ─────────────
   A 46mm case with a 208 by 248 point display, drawn at its own size and enlarged with
   the rig, on a sport band that fades out above and below. */
.wrist { display: flex; flex-direction: column; align-items: center; zoom: 1.3; perspective: 520px }
/* A sport band: matte, narrower than the case, rounded at its edges, bending away from the
   case top and bottom as it goes round a wrist. The lower strap carries the pin holes. The
   strap tucks under the case at the lugs, so the joint reads as one piece. */
.band {
    position: relative; display: block; width: 150px; height: 118px; border-radius: 6px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, 0) 7%, rgba(255, 255, 255, .45) 13%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 74%, rgba(0, 0, 0, .1) 88%, rgba(0, 0, 0, .3) 100%),
        var(--band-tone, linear-gradient(#e9e2d6, #e9e2d6));
}
.band-t { margin-bottom: -22px; transform-origin: 50% 100%; transform: rotateX(28deg);
    -webkit-mask-image: linear-gradient(to top, #000 55%, transparent 100%); mask-image: linear-gradient(to top, #000 55%, transparent 100%);
    --band-tone: linear-gradient(to top, #ece6da 0%, #ddd5c7 60%, #b9b0a1 100%) }
.band-b { margin-top: -22px; transform-origin: 50% 0; transform: rotateX(-28deg);
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    --band-tone: linear-gradient(to bottom, #ece6da 0%, #ddd5c7 60%, #b9b0a1 100%) }
/* the lug joint: a shadow where the strap meets the case */
.band-t::after, .band-b::after { content: ""; position: absolute; left: 0; right: 0; height: 30px; pointer-events: none }
.band-t::after { bottom: 0; background: linear-gradient(to top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)) }
.band-b::after { top: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0)) }
/* in dark, a midnight band, so a light strap never glares on a dark page */
html.dark .band-t { --band-tone: linear-gradient(to top, #3a3f4b 0%, #2c303a 60%, #1c1f26 100%) }
html.dark .band-b { --band-tone: linear-gradient(to bottom, #3a3f4b 0%, #2c303a 60%, #1c1f26 100%) }
html.dark .band { background:
        linear-gradient(90deg, rgba(0, 0, 0, .4) 0, rgba(0, 0, 0, 0) 7%, rgba(255, 255, 255, .14) 13%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 74%, rgba(0, 0, 0, .14) 88%, rgba(0, 0, 0, .4) 100%),
        var(--band-tone) }
html.dark .band-b::before { background: radial-gradient(ellipse 4px 3.2px at 50% 6px, #0d0f13 0 70%, rgba(255, 255, 255, .16) 75%, transparent 92%) 0 0 / 12px 14px repeat-y }
/* the pin holes, pressed into the strap: a dark center with a lit lower lip */
.band-b::before { content: ""; position: absolute; left: 50%; top: 40px; width: 12px; height: 80px; margin-left: -6px; pointer-events: none;
    background: radial-gradient(ellipse 4px 3.2px at 50% 6px, #6e665a 0 70%, rgba(255, 255, 255, .55) 75%, transparent 92%) 0 0 / 12px 14px repeat-y }
.watch {
    position: relative; z-index: 1; flex: none; width: 236px; height: 280px; padding: 16px 14px; border-radius: 64px;
    background: linear-gradient(155deg, #4a4f5a, #1b1e24 45%, #0f1115 60%, #3a3f49);
    box-shadow: 0 40px 60px -28px var(--shade), 0 18px 24px -18px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(255, 255, 255, .14), inset 0 2px 1px rgba(255, 255, 255, .18);
}
.crown { position: absolute; right: -10px; top: 64px; width: 13px; height: 44px; border-radius: 4px 7px 7px 4px;
    background: repeating-linear-gradient(180deg, #8a909b 0 2px, #4a4f59 2px 4px); box-shadow: inset -2px 0 2px rgba(0, 0, 0, .4) }
.side { position: absolute; right: -5px; top: 134px; width: 6px; height: 58px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #2a2e36, #5a606b) }
.wscreen {
    position: relative; width: 208px; height: 248px; border-radius: 48px; overflow: hidden; background: #000; color: #fff;
    font-size: 16px; line-height: 20px; user-select: none; -webkit-user-select: none; box-shadow: 0 0 0 5px #000;
}
.w-glow { position: absolute; left: 50%; top: -90px; width: 300px; height: 260px; margin-left: -150px; border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, var(--wc, #ffb13b) 0%, transparent 65%); opacity: .5; animation: glow 3.4s ease-in-out infinite alternate }
@keyframes glow { to { opacity: .3; transform: scale(1.08) } }
.w-glow.alarm { animation: alarm 1.1s ease-in-out infinite alternate }
@keyframes alarm { from { opacity: .3 } to { opacity: .85 } }
.w-top { position: absolute; inset: 0 0 auto 0; height: 36px; z-index: 5; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 24px 2px 26px }
.w-app { font-size: 15px; font-weight: 700; color: var(--wc, #ffb13b) }
.w-time { font-family: var(--round); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums }
.w-body { position: absolute; inset: 0; z-index: 2; overflow-y: auto; scrollbar-width: none; padding: 40px 10px 18px }
.w-body::-webkit-scrollbar { display: none }
.w-body.in > * { animation: wIn .55s var(--spring) both }
.w-body.in > :nth-child(2) { animation-delay: .05s } .w-body.in > :nth-child(3) { animation-delay: .1s } .w-body.in > :nth-child(n+4) { animation-delay: .15s }
@keyframes wIn { from { opacity: 0; transform: translateY(14px) scale(.96) } }
.w-c { text-align: center }
.w-k { font-size: 12.5px; line-height: 16px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--wc, #ffb13b); padding: 0 6px }
.w-k.dim { color: #d0d5dd }
.w-k.ok { color: #4ade80 }
.w-h { font-family: var(--display); font-weight: 750; font-size: 22px; line-height: 25px; padding: 2px 6px 0 }
.w-p { font-size: 15px; line-height: 19px; color: #eef0f4; padding: 3px 6px 0 }
.w-p b { color: #fff }
.w-big { font-family: var(--display); font-weight: 650; font-size: 46px; line-height: 44px; letter-spacing: -.03em; padding: 2px 6px 0 }
.w-big small { font-family: var(--ui); font-size: 15px; font-weight: 700; letter-spacing: 0; margin-left: 5px }
.w-orb { position: relative; width: 50px; height: 50px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; background: var(--wg); color: var(--wi, #2a1600) }
.w-orb svg { position: relative; z-index: 1; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.w-orb::before, .w-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wc); animation: haptic 1.8s var(--soft) infinite }
.w-orb::after { animation-delay: .9s }
@keyframes haptic { from { transform: scale(1); opacity: .8 } to { transform: scale(1.7); opacity: 0 } }
.w-orb.still::before, .w-orb.still::after { display: none }
.w-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 10px; border-radius: 24px; font-size: 18px; font-weight: 750; background: var(--wg); color: var(--wi, #2a1600) }
.w-btn.sec { background: #2c3038; color: #fff; font-weight: 650; margin-top: 6px }
.w-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.w-btn:active { transform: scale(.97) }
.w-list { margin-top: 10px; display: grid; gap: 4px }
.w-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 6px 10px 6px 7px; border-radius: 16px; background: #202329; text-align: left }
.w-row .pi, html.dark .w-row .pi { width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--pc-bg) 22%, #2a2c31) }
.w-row .pi i { zoom: .62 }
.w-row .txt { flex: 1; min-width: 0 }
.w-row .txt b { display: block; font-size: 16px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.w-row .txt span { display: block; font-size: 13.5px; line-height: 17px; color: #d6dae1 }
.w-row .tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #16a34a; flex: none }
.w-row .tick svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round }
.w-ring { position: relative; width: 136px; height: 136px; margin: 0 auto }
.w-ring svg { width: 136px; height: 136px; transform: rotate(-90deg) }
.w-ring .seg { fill: none; stroke-width: 9; stroke-linecap: round }
.w-ring .seg.due { animation: segDue 1.4s ease-in-out infinite }
@keyframes segDue { 50% { opacity: .35 } }
.w-ring .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center }
.w-ring .mid .w-big { font-size: 38px; line-height: 38px; padding: 0 }
.w-ring .mid .w-k { padding: 0 }
.w-ring .mid .lab { max-width: 96px; font-size: 13.5px; line-height: 17px; color: #eef0f4; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.w-done circle.track { fill: none; stroke: #16301f; stroke-width: 9 }
.w-done circle.fillr { fill: none; stroke: #4ade80; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: ringFill .9s var(--soft) forwards }
.w-done path { fill: none; stroke: #4ade80; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 70; animation: ringFill .5s var(--soft) .55s forwards }
.w-done svg { transform: none }
@keyframes ringFill { to { stroke-dashoffset: 0 } }
.w-sep { height: 1px; background: #23262d; margin: 12px 6px 8px }
/* the Watch's own navigation: a back chevron with the screen's name, rows into a section */
.w-back { display: flex; align-items: center; gap: 2px; min-height: 30px; max-width: 128px; margin-left: -6px; font-size: 15px; font-weight: 700; color: var(--wc, #ffb13b) }
.w-back span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.w-back svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.w-ni { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center }
.w-ni svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
.w-ni b { font-family: var(--display); font-size: 15px; font-weight: 750 }
.w-chev { width: 14px; height: 14px; flex: none; fill: none; stroke: #b3bac6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.w-note { margin: 6px 2px 0; padding: 8px 10px; border-radius: 14px; background: #1b1d22; font-size: 14px; line-height: 18px; color: #e6e9ee; text-align: left }
.w-note b { display: block; color: #fff; font-size: 15px }
.w-tog { flex: none; padding: 3px 9px; border-radius: 99px; background: #16a34a; color: #fff; font-size: 12.5px; line-height: 16px; font-weight: 800 }
.w-tog.off { background: #3a3e47; color: #eef0f4 }
.pi.w-lg, html.dark .pi.w-lg { width: 58px; height: 58px; margin: 0 auto 6px; border-radius: 50%; background: color-mix(in srgb, var(--pc-bg) 22%, #2a2c31) }

/* ───────────── dark ─────────────
   The iPhone follows the portfolio's choice. Dark is iOS's own: a true black ground, raised
   gray for cards and sheets, glass that darkens rather than lightens. The moment cards keep
   their light, since the hour does not change with the theme, and their tablets stay on
   white glass so the drawn tablet reads the same in both. The Watch has no light mode. */
html.dark {
    color-scheme: dark;
    --ink: #f4f6fa;
    --ink2: #d6dbe3;        /* 15:1 on black */
    --ink3: #b3bac6;
    --line: #26292f;
    --fill: #1c1c1e;
    --bg: #000000;
    --card: #1c1c1e;
    --off: #3a3d44;
    --dash: #3a3f48;
    --ok: #4ade80;  --ok-bg: #0f2a19;
    --warn: #fbbf4b; --warn-bg: #33240a;
    --late: #ff8577; --late-bg: #3a1411;
    --info: #8fb3ff; --info-bg: #14223f;
}
html.dark .card { border-color: transparent }
html.dark .tabs { background: rgba(28, 28, 30, .78); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .06) }
html.dark .tabs button { color: #d0d5dd }
html.dark .tabs button[aria-current] { background: rgba(255, 255, 255, .1); color: #fff }
html.dark .pi:not(.lg) { background: color-mix(in srgb, var(--pc-bg) 20%, #2a2c31) }
html.dark .pl .pi, html.dark .chips .pi { background: var(--pc-bg) }
html.dark .pi.lg { background: radial-gradient(circle at 35% 30%, #3a3d44, #1c1c1e 72%) }
html.dark .sheet { box-shadow: 0 -10px 40px rgba(0, 0, 0, .6) }
html.dark .sheet-dim { background: rgba(0, 0, 0, .55) }
html.dark .ln { background: rgba(30, 32, 38, .74); color: #fff }
html.dark .ln.quiet { background: rgba(30, 32, 38, .6) }
html.dark .ln p { color: #f0f2f5 }
html.dark .ln-top { color: #dde1e7 }
html.dark .ln-top .ts { color: #fbbf4b }
html.dark .ln-acts button { background: rgba(255, 255, 255, .12); color: #fff }
html.dark .ln-acts button.go2 { background: #fff; color: #0b0f1a }
html.dark .lock::before { filter: brightness(.82) }
html.dark .back { background: #1c1c1e }
html.dark .btn.sec, html.dark .sheet .btn.sec { background: #2c2c2e; color: #fff }
html.dark .fast { background: linear-gradient(135deg, #1a2466, #2e2290) }
html.dark .refill .bar, html.dark .quote { background: #1c1c1e }
html.dark .wk .today::before { background: #26282d }

/* ───────────── setup ─────────────
   The showcase: one bottle at a time, at a kitchen table. Every screen is one job with one
   main button. The camera is the only dark screen, because it is the only one that is a
   camera. */
.screen.su-mode .tabs { display: none }
.screen.su-mode .view { padding-bottom: 40px }
.screen.on-cam .sb { color: #fff }
.screen.on-cam .hi { background: #fff }
.h-tool[hidden] { display: none }
.btn[disabled] { opacity: .35; pointer-events: none }

.su { padding: 6px 22px 30px }
.su-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 4px 16px 12px; background: var(--bg) }
.su-back { width: 44px; height: 44px; flex: none; border-radius: 22px; display: grid; place-items: center; background: var(--fill) }
.su-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.su-prog { flex: 1; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden }
.su-prog i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffb86b, #ff6f86 55%, #7a62ff); transition: width .8s var(--soft) }
.su-count { flex: none; min-width: 44px; font-size: 14px; font-weight: 700; color: var(--ink2); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
.su-k { font-size: 13px; line-height: 18px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2) }
.su-h { font-family: var(--display); font-weight: 750; font-size: 36px; line-height: 40px; letter-spacing: -.02em; margin-top: 8px; text-wrap: balance }
.su-h2 { font-family: var(--display); font-weight: 750; font-size: 30px; line-height: 35px; letter-spacing: -.02em; margin-top: 4px; text-wrap: balance }
.su-p { font-size: 18px; line-height: 26px; color: var(--ink2); margin-top: 12px }
.su-cta { margin-top: 26px }
.su-fine { margin-top: 16px; font-size: 15px; line-height: 21px; color: var(--ink2); text-align: center; text-wrap: balance }
.su-why { margin-top: 14px; font-size: 16px; line-height: 23px; color: var(--ink2) }
.su-note { margin-top: 12px; padding: 13px 15px; border-radius: 18px; background: var(--info-bg); font-size: 16px; line-height: 23px }

/* welcome: the icon, its tablet rising over the horizon */
.su-intro { padding-top: 26px }
.su-hero { display: grid; place-items: center; padding: 8px 0 26px }
.su-mark { width: 128px; height: 128px; filter: drop-shadow(0 20px 30px rgba(255, 111, 134, .42)); animation: markIn .9s var(--pop) both }
@keyframes markIn { from { transform: scale(.7) rotate(-6deg); opacity: 0 } }
.su-rise { animation: rise 1.8s var(--soft) .35s both }
@keyframes rise { from { transform: translateY(30px) } }
.su-glowc { animation: breathe 3.6s ease-in-out 1.2s infinite alternate; transform-origin: 32px 38px }
.su-steps { margin-top: 22px }
.su-steps li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 18px; line-height: 24px; font-weight: 650; animation: riseIn .6s var(--soft) both }
.su-steps li:nth-child(2) { animation-delay: .08s } .su-steps li:nth-child(3) { animation-delay: .16s }
.su-steps li:last-child { border-bottom: 0 }
.su-steps .n { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--g); color: var(--gi); font-size: 16px; font-weight: 800 }

/* Apple Health */
.su-link { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 30px 0 6px }
.su-app { width: 76px; height: 76px; flex: none; border-radius: 20px; box-shadow: 0 14px 26px -12px rgba(10, 15, 30, .35) }
.su-app.sm { width: 56px; height: 56px; border-radius: 15px }
.su-app.health { display: grid; place-items: center; background: #fff; border: 1px solid var(--line) }
.su-app.health svg { width: 54%; height: 54% }
.su-app.steady { background: url("icon.svg") center / cover }
.su-dots { display: flex; gap: 7px }
.su-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); animation: dotflow 1.4s ease-in-out infinite }
.su-dots i:nth-child(2) { animation-delay: .2s } .su-dots i:nth-child(3) { animation-delay: .4s }
@keyframes dotflow { 0%, 100% { opacity: .25; transform: scale(.8) } 50% { opacity: 1; transform: scale(1.15) } }
.su-list { margin: 18px 0 0 }
.su-list li { animation: riseIn .55s var(--soft) both; animation-delay: calc(var(--i) * 90ms) }
.tick-c { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #16a34a; animation: ckPop .5s var(--pop) both; animation-delay: calc(var(--i, 0) * 90ms + .25s) }
.su-list li:nth-child(2) .tick-c { animation-delay: .34s } .su-list li:nth-child(3) .tick-c { animation-delay: .43s }
.tick-c svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round }
.hk { text-align: center }
.hk-icons { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px }
.hk h2 { font-size: 26px; line-height: 31px }
.hk p { margin-bottom: 4px }
.hk .rows { text-align: left }
.hk-all { display: block; width: 100%; min-height: 48px; color: #2f6bff; font-size: 18px; font-weight: 700; text-align: center }
html.dark .hk-all { color: #8fb3ff }

/* June's day, in the colors of its hours */
.su-anchor { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 10px 12px 12px; border-radius: 24px; background: var(--g); color: var(--gi); animation: riseIn .55s var(--soft) both }
.su-anchor:nth-of-type(2) { animation-delay: .06s } .su-anchor:nth-of-type(3) { animation-delay: .12s } .su-anchor:nth-of-type(4) { animation-delay: .18s }
.su-ai { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .42) }
.su-anchor.dark .su-ai { background: rgba(255, 255, 255, .16) }
.su-ai svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.su-al { flex: 1; min-width: 0; font-size: 17px; line-height: 22px; font-weight: 700 }
.su-at { font-family: var(--display); font-size: 21px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap }
.su-step { display: flex; gap: 6px }
.su-step button { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: rgba(255, 255, 255, .6) }
.su-anchor.dark .su-step button { background: rgba(255, 255, 255, .18) }
.su-step svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round }

/* the camera, at a kitchen table */
.cam { position: absolute; inset: 0; z-index: 25; overflow: hidden; background: #120d09; color: #fff; animation: camIn .5s var(--soft) both }
@keyframes camIn { from { opacity: 0 } }
.cam-bg { position: absolute; inset: -12%; filter: blur(3px);
    background: radial-gradient(40% 30% at 20% 82%, rgba(255, 196, 130, .45), transparent 70%), radial-gradient(30% 22% at 84% 74%, rgba(255, 230, 190, .3), transparent 70%),
        radial-gradient(14% 10% at 78% 16%, rgba(255, 245, 225, .35), transparent 70%), radial-gradient(10% 8% at 16% 22%, rgba(255, 220, 170, .3), transparent 70%),
        repeating-linear-gradient(176deg, rgba(0, 0, 0, .08) 0 9px, rgba(255, 255, 255, .02) 9px 22px), linear-gradient(180deg, #2b211a 0%, #4a3528 46%, #6e4d35 100%) }
.cam-top { position: absolute; top: 60px; left: 16px; right: 16px; z-index: 3; display: flex; align-items: center; justify-content: space-between }
.cam-x { width: 44px; height: 44px; border-radius: 22px; display: grid; place-items: center; background: rgba(0, 0, 0, .42); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff }
.cam-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.cam-pill { padding: 9px 15px; border-radius: 99px; background: rgba(0, 0, 0, .46); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 15px; font-weight: 700 }
.cam-hint { position: absolute; top: 118px; left: 26px; right: 26px; z-index: 3; text-align: center; font-size: 17px; line-height: 23px; font-weight: 600; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); text-wrap: balance }
.cam-stage { position: absolute; left: 0; right: 0; top: 178px; height: 440px; display: grid; place-items: center }
.vial { position: relative; width: 262px; height: 400px; animation: sway 3.8s ease-in-out infinite alternate }
@keyframes sway { 0% { transform: rotate(-2.2deg) translate(-4px, 3px) } 100% { transform: rotate(1.4deg) translate(5px, -3px) } }
.reading .vial { animation-play-state: paused }
.vial::before { content: ""; position: absolute; inset: 46px 8px 0; border-radius: 26px 26px 34px 34px;
    background: linear-gradient(90deg, #5a2504 0%, #a85912 16%, #e0973f 30%, #f2b866 36%, #c0711f 52%, #8c4609 74%, #4a1d03 100%);
    box-shadow: inset 0 -14px 24px rgba(0, 0, 0, .4), 0 30px 40px -20px rgba(0, 0, 0, .7) }
.vial::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 58px; border-radius: 16px;
    background: repeating-linear-gradient(90deg, #f6f6f3 0 6px, #d9d9d4 6px 8px); box-shadow: inset 0 -6px 8px rgba(0, 0, 0, .12), 0 6px 10px rgba(0, 0, 0, .35) }
.vial.otc::before { background: linear-gradient(90deg, #b9b3a9 0%, #ebe7df 20%, #ffffff 40%, #f1ede6 62%, #c6bfb4 86%, #9d968b 100%) }
.vial.otc::after { background: repeating-linear-gradient(90deg, #2c6e4f 0 6px, #225a40 6px 8px) }

/* the label as printed */
.lbl { position: absolute; z-index: 1; left: 0; right: 0; top: 112px; width: 242px; margin: 0 auto; padding: 10px 12px 9px; border-radius: 4px; background: #fbfaf5; color: #141414;
    font-family: "Inter ST", Arial, sans-serif; font-size: 9.5px; line-height: 12px; letter-spacing: .01em; box-shadow: 0 2px 8px rgba(0, 0, 0, .3) }
.lbl::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 12%, transparent 84%, rgba(0, 0, 0, .22)) }
.lbl-h { display: flex; justify-content: space-between; padding-bottom: 3px; border-bottom: 1.5px solid #141414; font-size: 10.5px; font-weight: 800 }
.lbl-a { margin-top: 2px; font-size: 8.5px; color: #3a3a3a }
.lbl-r { display: flex; justify-content: space-between; margin-top: 5px; font-weight: 700 }
.lbl-p { margin-top: 3px; font-size: 12px; font-weight: 800 }
.lbl-n { margin-top: 5px; font-size: 13px; line-height: 16px; font-weight: 900 }
.lbl-d { margin-top: 4px; font-size: 10.5px; line-height: 13px; font-weight: 700 }
.lbl-q { display: flex; gap: 9px; margin-top: 5px; font-weight: 700 }
.lbl-desc { margin-top: 4px; font-size: 9px; color: #3a3a3a }
.lbl-bc { height: 18px; margin-top: 6px; background: repeating-linear-gradient(90deg, #141414 0 1.5px, transparent 1.5px 3px, #141414 3px 4px, transparent 4px 6.5px, #141414 6.5px 9px, transparent 9px 10px) }
.lbl.otc { top: 118px; text-align: center; background: #fffdf6 }
.lbl-brand { font-size: 17px; line-height: 20px; font-weight: 900; letter-spacing: .04em; color: #225a40 }
.lbl.otc .lbl-n { font-size: 15px; line-height: 18px }
.lbl-sub { margin-top: 3px; font-weight: 700 }
.lbl .f { position: relative; border-radius: 3px }
.reading .lbl .f, .lbl.read .f { background: rgba(255, 214, 80, .5); box-shadow: 0 0 0 2px rgba(255, 190, 30, .95); animation: fpop .6s var(--pop) both; animation-delay: calc(var(--d) * 260ms + 1s) }
.lbl.read .f { animation-delay: calc(var(--d) * 120ms + .45s) }
@keyframes fpop { from { background: transparent; box-shadow: 0 0 0 0 rgba(255, 190, 30, 0); transform: scale(.98) } }

/* the frame: wide while it looks, tight on the label once it has it */
.brk { position: absolute; z-index: 2; left: -30px; right: -30px; top: 70px; height: 290px; pointer-events: none; transition: all 1s var(--spring); animation: look 1.8s ease-in-out infinite alternate }
@keyframes look { to { transform: scale(.965) } }
.reading .brk { animation: none }
.reading .brk { left: -4px; right: -4px; top: 104px; height: 218px }
.brk i { position: absolute; width: 44px; height: 44px; border: 4px solid rgba(255, 255, 255, .92); transition: border-color .4s }
.reading .brk i { border-color: #ffd650 }
.brk i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 18px }
.brk i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 18px }
.brk i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 18px }
.brk i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 18px }
.sweep { position: absolute; z-index: 2; left: -6px; right: -6px; top: 104px; height: 3px; border-radius: 2px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, #ffd650 20%, #fff 50%, #ffd650 80%, transparent); box-shadow: 0 0 18px 4px rgba(255, 214, 80, .7) }
.reading .sweep { animation: sweep 1.9s var(--soft) .5s both }
@keyframes sweep { 0% { opacity: 0; transform: translateY(0) } 12% { opacity: 1 } 88% { opacity: 1 } 100% { opacity: 0; transform: translateY(218px) } }
.cam-status { position: absolute; z-index: 3; left: 50%; bottom: 148px; display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 99px; white-space: nowrap;
    background: rgba(0, 0, 0, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 16px; font-weight: 700;
    transform: translate(-50%, 12px); opacity: 0; transition: opacity .3s, transform .4s var(--spring) }
.reading .cam-status { opacity: 1; transform: translate(-50%, 0) }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #ffd650; animation: spin .8s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.cam-bottom { position: absolute; z-index: 3; left: 0; right: 0; bottom: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px }
.cam-type { min-width: 76px; min-height: 44px; font-size: 16px; font-weight: 700; text-align: left }
.shutter { position: relative; width: 80px; height: 80px; border-radius: 50%; border: 5px solid #fff; background: rgba(255, 255, 255, .18) }
.shutter::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; transition: transform .2s var(--spring) }
.shutter:active::after, .reading .shutter::after { transform: scale(.86) }
.cam-tray { display: flex; justify-content: flex-end; gap: 5px; min-width: 76px }
.cam-tray i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3) }
.cam-tray i.on { background: #4ade80 }
.cam-tray i.cur { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25) }

/* what Steady read, beside the photo it read it from */
.su-photo { position: relative; height: 210px; margin-top: 2px; border-radius: 24px; overflow: hidden;
    background: radial-gradient(60% 50% at 30% 80%, rgba(255, 196, 130, .45), transparent 70%), linear-gradient(180deg, #2b211a, #6e4d35) }
.su-photo .lbl { top: 50%; transform: translateY(-50%); }
.su-fields { margin: 18px 0 0 }
.su-fields li { padding: 14px 16px; border-bottom: 1px solid var(--line); animation: riseIn .5s var(--soft) both }
.su-fields li:nth-child(2) { animation-delay: .06s } .su-fields li:nth-child(3) { animation-delay: .12s } .su-fields li:nth-child(4) { animation-delay: .18s } .su-fields li:nth-child(5) { animation-delay: .24s }
.su-fields li:last-child { border-bottom: 0 }
.su-fields .fl { font-size: 12.5px; line-height: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2) }
.su-fields .fv { margin-top: 3px; font-size: 19px; line-height: 26px; font-weight: 600 }
.su-fields .chip { margin-top: 8px }
.su-look { display: flex; align-items: center; gap: 10px }
.su-fields.fixing li { cursor: pointer; background-image: linear-gradient(90deg, var(--warn-bg), transparent 60%) }
.su-fields.fixing li::after { content: "Change"; float: right; margin-top: -26px; font-size: 15px; font-weight: 700; color: var(--warn) }

/* when to take it */
.su-quote { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--fill); font-size: 18px; line-height: 26px }
.su-quote b { display: block; margin-bottom: 4px; font-size: 12.5px; line-height: 16px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2) }
.su-ask { margin-top: 18px; font-size: 19px; line-height: 26px; font-weight: 650 }
.su-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px }
.su-opt { min-height: 86px; padding: 14px; border-radius: 22px; background: var(--g); color: var(--gi); text-align: left; transition: transform .25s var(--pop), box-shadow .25s }
.su-opt b { display: block; font-size: 17px; line-height: 22px }
.su-opt span { display: block; margin-top: 4px; font-family: var(--display); font-size: 22px; font-weight: 750 }
.su-opt[aria-pressed="true"] { transform: scale(1.03); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--ink) }
.su-slots { display: grid; gap: 10px; margin-top: 16px }
.su-slot { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 24px; background: var(--g); color: var(--gi); box-shadow: 0 18px 30px -18px var(--gs); animation: slotIn .9s var(--pop) both .15s }
@keyframes slotIn { from { transform: translateY(22px) scale(.94); opacity: 0 } }
.su-slot:nth-child(2) { animation-delay: .3s }
.su-slot .ico { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .42) }
.su-slot.dark .ico { background: rgba(255, 255, 255, .16) }
.su-slot .ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.su-slot .lab { flex: 1; font-size: 19px; font-weight: 700 }
.su-slot .t { font-family: var(--display); font-size: 28px; font-weight: 750; letter-spacing: -.02em; white-space: nowrap }

/* finished: the day draws itself */
.su-done { padding-top: 22px; text-align: center }
.su-arc { width: 100%; height: auto; overflow: visible; margin-top: 10px }
.su-arc .hz { stroke: var(--line); stroke-width: 1.5 }
.su-arc .trail { fill: none; stroke: url(#suArcG); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 480; stroke-dashoffset: 480; animation: ringFill 2s var(--soft) .3s forwards }
.su-arc .sd { animation: dotIn .7s var(--bounce) both; animation-delay: calc(1.3s + var(--i) * .26s); transform-box: fill-box; transform-origin: center }
.su-arc .sdt { font-family: var(--ui); font-size: 12px; font-weight: 750; fill: var(--ink2); animation: riseIn .6s var(--soft) both; animation-delay: calc(1.45s + var(--i) * .26s) }
@keyframes dotIn { from { transform: scale(0); opacity: 0 } }
.su-done .su-p { text-wrap: balance }

/* counting numbers: an integer custom property is registered so it can be transitioned,
   and a counter prints it, so a count rolls to its new value instead of jumping */
@property --num { syntax: "<integer>"; initial-value: 0; inherits: false }
.count-up { --num: var(--to); counter-reset: n var(--num); transition: --num .9s var(--soft) }
.count-up.from { --num: var(--from) }
.count-up::before { content: counter(n) }

/* the label in the camera becomes the thumbnail it was read from: one element, two screens */
.cam .lbl, .su-photo .lbl { view-transition-name: su-label }
::view-transition-group(su-label) { animation-duration: .75s; animation-timing-function: cubic-bezier(.32, .72, 0, 1) }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s }

/* ───────────── a portfolio card ─────────────
   The featured tile is wide, so the card is a fixed 1602 by 896 stage, KeySign's geometry,
   scaled to the tile's width. Both devices stand whole on the sky, with no captions. */
body.is-card { overflow: hidden }
body.is-card .stage { position: fixed; left: 0; top: 0; margin: 0; width: 1602px; height: 896px; padding: 0; display: flex; align-items: center; justify-content: center; transform-origin: 0 0; transform: scale(var(--ck, 1)) }
body.is-card .dev-cap { display: none }
body.is-card .rig { gap: 130px; zoom: 1 !important }

/* ───────────── focus, motion ───────────── */
.screen button:focus-visible, .screen [tabindex]:focus-visible { outline: 3px solid #2f6bff; outline-offset: 2px }
.wscreen button:focus-visible { outline: 3px solid #8fb3ff; outline-offset: 2px }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
}