/* Sandglass site, "A day in the glass" (site rebuild 2026-10-01, sandglass.css v1).
   The page reads as one day, top to bottom: every section's kicker is a time stamp, the ground dims from
   Dusk toward night as you scroll, and the nav's own sandglass drains while you read. The hero is a real
   sandglass: grains run through the neck, and whichever task is running dyes the grains as they pass, so
   the lower bulb fills with the day in layers (sandglass.js). Structure and class vocabulary follow Cork's
   refresh (nav, pillars, store rows, card strip, gallery strip, get box, footer); the palette is the app's
   1.4 redesign, verbatim from ui/Theme.kt: Dusk and Midnight grounds, Sand / Clay / Tide accents, and the
   task colours (amber follows the accent, as it does in the app).

   Rules this file keeps:
   - No red, anywhere (the app's rule). No text on the sand, the glass or a photo.
   - Colours are tokens. The accent and ground pickers in #look re-point the tokens with :has(), so the page
     works without script; every accent and both grounds are in the contrast proof
     (tools/contrast-manifest.json through site-kit contrast.py). Change a colour, run it.
   - Motion: the sand runs only on screen, in a visible tab, with the Pause motion chip off and without
     prefers-reduced-motion. html.rm, a page without JS and html.failsafe get the still picture.
   - Promo cards stay aligned: no rotation, no offset (owner rule 2026-09-27).
   - assets/style.css is the old family sheet, left in place and no longer referenced. */

@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-sg.woff) format("woff")}

:root{
  /* Dusk, the default ground (Theme.kt) */
  --bg:#171B1A;
  --bg2:#131716;          /* alternate band, a shade into the evening */
  --panel:#202724;        /* surface */
  --card:#2A332F;         /* surface2 */
  --line:#3D4942;
  --line2:#56655C;        /* control outlines */
  --ink:#FBF7EE;          /* headings */
  --text:#F4EFE3;         /* text */
  --text2:#BBC1B5;        /* muted */
  --dim:#A3AD9F;          /* faint, lifted a hair from #99A496 so small print passes on --card */
  --glass:#8E96A4;        /* the icon's glass and caps */

  /* the accent: Sand by default; #look swaps these three */
  --accent:#DFC493;
  --accent2:#F3DDB3;      /* accentBright: links, focus rings */
  --onaccent:#171B1A;

  /* task colours (Theme.kt TaskColours): amber = the accent, as in the app */
  --t-work:var(--accent);
  --t-study:#91BEB7;
  --t-ex:#C08A63;
  --t-tv:#A98194;
  --t-side:#D8C79A;
  --t-sleep:#BBC1B5;
  --t-none:#56605A;       /* time nobody logged, in the glass */

  --navh:58px;
  --pad:clamp(16px,4.4vw,44px);
  --display:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --sky:0;               /* 0 at the top of the page, 1 at the foot (sandglass.js) */
  color-scheme:dark;
}
/* the accents, from the #look pickers (radios, so this works without script) */
:root:has(#ac-clay:checked){--accent:#C08A63;--accent2:#D9A47C;--onaccent:#171B1A}
:root:has(#ac-tide:checked){--accent:#91BEB7;--accent2:#B2D5CE;--onaccent:#171B1A}
/* Midnight, for OLED screens (Theme.kt) */
:root:has(#bg-midnight:checked){--bg:#000000;--bg2:#050608;--panel:#0A0C10;--card:#12151B;--line:#1E222B;--line2:#3A414E}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.rm{scroll-behavior:auto}
[id]{scroll-margin-top:calc(var(--navh) + 14px)}
body{background:var(--bg);color:var(--text);font:16px/1.62 var(--sans);font-weight:450;overflow-x:hidden;transition:background-color .5s}
/* dusk falling: a low warm light at the top of the page that fades out as you read down */
body::before{content:"";position:fixed;inset:0 0 auto 0;height:80vh;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 70% at 18% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);
  opacity:calc(1 - var(--sky) * .85)}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--accent2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
strong{color:var(--ink);font-weight:700}
em{font-style:normal}
button{font:inherit;color:inherit}
ul,ol{list-style:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html:not(.js) .needs-js,html.rm .needs-motion,html.failsafe .needs-js{display:none}

:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:8px;box-shadow:0 0 0 5px color-mix(in srgb,var(--bg) 92%,transparent)}
.skip{position:absolute;left:-999px;top:8px;z-index:90;background:var(--ink);color:var(--bg);padding:.7em 1.1em;border-radius:12px;font-weight:700;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{left:8px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--navh);background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.scrolled,html:not(.js) .nav{background:color-mix(in srgb,var(--bg) 95%,transparent);border-bottom-color:var(--line)}
.navin{max-width:1240px;margin:0 auto;height:100%;padding:0 12px;display:flex;align-items:center;gap:8px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:44px;padding-right:4px}
.logo-s{width:28px;height:36px;flex:none;overflow:visible}
.wordmark{font-family:var(--display);font-weight:750;font-size:.86rem;letter-spacing:.32em;color:var(--ink)}
.navlinks{display:none}
.getbtn{margin-left:auto;display:inline-flex;align-items:center;gap:.3em;min-height:40px;padding:0 16px;border-radius:999px;background:var(--accent);color:var(--onaccent);font-weight:750;font-size:.88rem;text-decoration:none;white-space:nowrap}
.getbtn:hover{background:var(--accent2);color:var(--onaccent)}
.navmenu{position:relative}
/* phones: the button reads "Get" and the full name stays for screen readers (label in name) */
@media (max-width:459.98px){.getbtn .gw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.getbtn{padding:0 18px}}
.navmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:999px;border:1px solid var(--line2);color:var(--text);font-size:.86rem;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.navmenu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.navmenu nav{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.navmenu nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;color:var(--text);text-decoration:none}
.navmenu nav a:hover{background:var(--card);color:var(--ink)}
@media (min-width:370px){.navin{padding:0 16px;gap:10px}}
@media (max-width:339.98px){.wordmark{display:none}}
@media (min-width:900px){
  .navlinks{display:flex;gap:2px;margin-left:auto}
  .navlinks a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:999px;color:var(--text2);text-decoration:none;font-size:.93rem}
  .navlinks a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
  .getbtn{margin-left:8px}
  .navmenu{display:none}
}
/* the nav mark drains as you read: --p runs 0 to 1 down the page (sandglass.js) */
.logo-s .lg-top{transform:translateY(calc(var(--p,0) * 16px));transition:transform .15s linear}
.logo-s .lg-heap{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(calc(.25 + var(--p,0) * .75));transition:transform .15s linear}


/* ---------- shared type ---------- */
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:var(--text2)}
.kicker time{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--onaccent);background:var(--accent);padding:2px 9px;border-radius:999px;font-size:.8rem}
section h2{font-family:var(--display);font-weight:750;font-size:clamp(1.9rem,5.6vw,3.1rem);line-height:1.06;letter-spacing:-.025em;color:var(--ink);margin-top:12px;max-width:22ch;text-wrap:balance}
.intro{margin-top:14px;max-width:40rem;color:var(--text2);font-size:1.06rem}
.caption{margin-top:16px;color:var(--dim);font-size:.88rem}
.sec{padding-block:clamp(72px,11vw,128px)}
.band{background:var(--bg2)}

/* ---------- hero ---------- */
.hero{position:relative;padding:calc(var(--navh) + 20px) 0 0;overflow:hidden}
.hero-in{max-width:1240px;margin:0 auto;padding:0 var(--pad);display:grid;gap:22px}
.status{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:650;color:var(--text2);border:1px solid var(--line2);border-radius:999px;padding:4px 12px 4px 8px;background:color-mix(in srgb,var(--panel) 60%,transparent)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.eyebrow{margin-top:14px;color:var(--accent2);font-weight:650;font-size:.98rem}
.hero h1{font-family:var(--display);font-weight:780;font-size:clamp(2.1rem,8.6vw,4.6rem);line-height:1.02;letter-spacing:-.035em;color:var(--ink);margin-top:6px;text-wrap:balance}
.hero h1 .nm{display:block;font-size:.5em;letter-spacing:.3em;text-transform:uppercase;font-weight:750;color:var(--text2);margin-bottom:.35em}
.hero h1 em{color:var(--accent)}
.lede{margin-top:12px;font-size:1.04rem;color:var(--text);max-width:34rem}
.pillars{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pillars li{border:1px solid var(--line2);background:color-mix(in srgb,var(--panel) 70%,transparent);color:var(--text);font-size:.8rem;font-weight:650;padding:4px 12px;border-radius:999px;white-space:nowrap}
.store-row{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;margin-top:12px}
.store-row a{display:inline-flex;border-radius:10px}
.play-badge{height:60px;width:auto;margin-left:-6px}
@media (max-width:359.98px){.play-badge{height:54px}.hero h1{font-size:1.95rem}.lede{font-size:.98rem}}

/* the glass */
.glassbox{position:relative;display:grid;justify-items:center;gap:14px;padding:6px 0 30px}
.stage{position:relative;width:min(64vw,300px);aspect-ratio:40/52;transform-origin:50% 50%}
.stage.turning{transition:transform .95s cubic-bezier(.6,0,.3,1)}
.stage canvas,.stage svg{position:absolute;inset:0;width:100%;height:100%}
.stage canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.stage .still{opacity:1}
html.js.enh:not(.failsafe) .stage.live .still{opacity:0}
.stage .frame{filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.glow{position:absolute;left:50%;top:48%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent);pointer-events:none;z-index:-1}
.readout{display:flex;align-items:baseline;gap:12px;justify-content:center;flex-wrap:wrap;text-align:center}
.clock{font-family:var(--display);font-weight:760;font-size:2rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.gstate{color:var(--text2);font-weight:600;font-size:.95rem}
.taskchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:420px}
.tchip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font-weight:650;font-size:.92rem;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.tchip i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.tchip:hover{border-color:var(--c)}
.tchip[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#171B1A}
.tchip[aria-pressed="true"] i{background:#171B1A}
.glasslegend{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:.84rem;color:var(--text2);font-variant-numeric:tabular-nums;max-width:440px}
.glasslegend li{display:inline-flex;align-items:center;gap:6px}
.glasslegend i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.glassnote{font-size:.84rem;color:var(--dim);text-align:center;max-width:26rem}
.turn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px dashed var(--line2);background:transparent;color:var(--text2);font-weight:650;font-size:.88rem;cursor:pointer}
.turn:hover{color:var(--ink);border-color:var(--accent)}
.turn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.turn.ready{border-style:solid;border-color:var(--accent);color:var(--ink)}
@media (min-width:960px){
  .hero{padding-top:calc(var(--navh) + 36px);min-height:min(100svh,920px)}
  .hero-in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:40px}
  .play-badge{height:74px}
  .pillars{margin-top:20px}.store-row{margin-top:16px}
  .lede{font-size:1.14rem}
  .stage{width:min(34vw,360px)}
  .glassbox{padding:10px 0 40px}
}

/* ---------- the promo cards, on a dune ---------- */
.dune{position:relative;background:
  radial-gradient(120% 60% at 50% 120%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 60%),
  repeating-radial-gradient(160% 90% at 50% 140%,transparent 0 22px,color-mix(in srgb,var(--accent) 7%,transparent) 22px 24px),
  var(--bg2);border-block:1px solid var(--line)}
.cardstrip{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:34px var(--pad) 32px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.cardrow{display:flex;gap:18px;width:max-content}
.card{flex:0 0 auto;width:min(78vw,370px);scroll-snap-align:start;border-radius:22px;overflow:hidden;background:var(--panel);box-shadow:0 0 0 1px var(--line),0 24px 44px -18px rgba(0,0,0,.8)}
.card img{width:100%;height:auto}
@media (min-width:960px){
  .cardstrip{overflow:visible;padding:48px var(--pad) 44px}
  .cardrow{width:auto;display:grid;grid-template-columns:repeat(3,minmax(0,340px));justify-content:center;gap:clamp(24px,3vw,44px)}
  .card{width:auto}
}
.cardstrip:focus-visible,.galstrip:focus-visible{outline:2px solid var(--accent2);outline-offset:-6px;border-radius:0;box-shadow:none}

/* ---------- how it works: steps + the Today sketch ---------- */
.how-in{display:grid;gap:40px}
.steps{margin-top:28px;display:grid;gap:22px;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.num{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:780;font-size:1.05rem;color:var(--onaccent);background:var(--accent)}
.step h3{font-size:1.2rem;font-weight:750;color:var(--ink);letter-spacing:-.01em}
.step p{color:var(--text2);margin-top:4px}
@media (min-width:960px){.how-in{grid-template-columns:1fr minmax(0,420px);gap:64px;align-items:center}}

/* the phone sketch: the app's Today screen, drawn by the browser */
.phone{position:relative;margin:0 auto;width:min(100%,390px);border-radius:40px;padding:12px;background:#0C0E0E;box-shadow:0 0 0 1px var(--line2),0 40px 70px -30px rgba(0,0,0,.9)}
.screen{border-radius:30px;background:var(--bg);padding:18px 14px 12px;display:grid;gap:12px;overflow:hidden}
.sbar{display:flex;justify-content:space-between;font-size:.78rem;font-weight:650;color:var(--text2);padding:0 6px;font-variant-numeric:tabular-nums}
.runcard{border-radius:24px;background:var(--accent);color:var(--onaccent);padding:16px 18px 14px;transition:background .3s}
.runcard .lab{font-size:.74rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.runcard .big{display:block;font-family:var(--display);font-weight:760;font-size:2.5rem;letter-spacing:-.02em;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.runcard .sm{font-size:.86rem;margin-top:2px}
.runcard .ko{font-size:.95rem;font-weight:650;margin-top:8px}
.runcard.idle{background:var(--card);color:var(--text)}
.stopbtn{min-height:48px;border-radius:999px;border:0;background:var(--accent);color:var(--onaccent);font-weight:750;font-size:.98rem;cursor:pointer}
.stopbtn:disabled{background:var(--card);color:var(--text2);cursor:default}
.avg{border-radius:18px;background:var(--panel);padding:10px 14px}
.avg .l{font-size:.82rem;color:var(--text2)}
.avg .v{font-weight:750;font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums}
.brk{display:grid;gap:8px}
.brk .row{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--text2)}
.brk .row b{color:var(--ink);font-variant-numeric:tabular-nums}
.brkchips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bchip{min-height:44px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--text);font-weight:650;font-size:.9rem;cursor:pointer}
.bchip:hover{border-color:var(--accent)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{display:flex;align-items:center;gap:10px;min-height:48px;width:100%;padding:0 12px;border-radius:14px;border:0;background:var(--panel);color:var(--text);font-weight:650;font-size:.92rem;text-align:left;cursor:pointer;transition:background .2s,color .2s}
.tile svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--c);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile[aria-pressed="true"]{background:var(--c);color:#171B1A}
.tile[aria-pressed="true"] svg{stroke:#171B1A}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;border-top:1px solid var(--line);padding-top:8px;font-size:.72rem;color:var(--text2);text-align:center}
.tabs span{padding:6px 0;border-radius:999px}
.tabs span:first-child{background:var(--card);color:var(--ink)}
.honest{margin-top:14px;font-size:.86rem;color:var(--dim);text-align:center}
html:not(.js) .phone button,html.failsafe .phone button{pointer-events:none}

/* ---------- hours ---------- */
.hours-grid{margin-top:34px;display:grid;gap:18px}
.hcard{border-radius:26px;background:var(--panel);border:1px solid var(--line);padding:22px 22px 20px}
.hcard h3{font-size:.8rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--text2)}
.hcard .big{display:block;line-height:1.12;font-family:var(--display);font-weight:760;font-size:clamp(1.8rem,5vw,2.4rem);letter-spacing:-.02em;color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums}
.hcard p{color:var(--text2);margin-top:8px}
.hcard .note{font-size:.86rem;color:var(--dim);margin-top:12px}
.hcard.sand{background:var(--accent);border-color:var(--accent);color:var(--onaccent)}
.hcard.sand h3,.hcard.sand p,.hcard.sand .big,.hcard.sand .note{color:var(--onaccent)}
.hcard.sand .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.hcard.sand .pair b{display:block;font-size:1.3rem;font-weight:750;font-variant-numeric:tabular-nums}
.hcard.sand .pair span{font-size:.86rem}
.rhythm{margin-top:14px}
.rhythm svg{width:100%;height:auto;overflow:visible}
.rhythm .bar{fill:var(--accent);transform-box:fill-box;transform-origin:50% 100%;transition:transform .9s var(--ease)}
.rhythm .bar.today{fill:var(--t-study)}
.rhythm .avgline{stroke:var(--text2);stroke-width:1.2;stroke-dasharray:4 4}
.rhythm text{fill:var(--dim);font-size:9px;font-family:var(--sans)}
html.js.enh:not(.failsafe) .rhythm:not(.in) .bar{transform:scaleY(.04)}
.rhythm .bar:nth-child(odd){transition-delay:.05s}
@media (min-width:880px){.hours-grid{grid-template-columns:repeat(3,1fr)}.hcard.wide{grid-column:span 2}}
.after{margin-top:22px;color:var(--text2);max-width:44rem}

/* ---------- history: periods and the calendar ---------- */
.hist-grid{margin-top:34px;display:grid;gap:18px}
.hist-grid>*,.hours-grid>*,.look-grid>*,.quiet-grid>*,.how-in>*,.widget-in>*,.hero-in>*{min-width:0}
@media (min-width:900px){.hist-grid{grid-template-columns:1.1fr .9fr}}
.periods{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.pchip{flex:none;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--text);font-weight:650;font-size:.88rem;cursor:pointer}
.pchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--onaccent)}
.where{margin-top:8px;display:grid;gap:12px}
.where .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.where .tot{font-weight:750;color:var(--ink);font-size:1.3rem;font-variant-numeric:tabular-nums}
.where .rng{font-size:.86rem;color:var(--text2)}
.wrow{display:grid;gap:6px}
.wrow .n{display:flex;justify-content:space-between;font-size:.94rem;color:var(--text);font-variant-numeric:tabular-nums}
.wrow .track{height:7px;border-radius:99px;background:var(--card);overflow:hidden}
.wrow .fill{display:block;height:100%;width:var(--w,0%);border-radius:99px;background:var(--c);transition:width .7s var(--ease)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;font-variant-numeric:tabular-nums}
.cal .dow{font-size:.74rem;color:var(--dim);padding:4px 0}
.cal .d{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:12px;font-size:.88rem;color:var(--text);font-weight:600}
.cal .d::after{content:"";position:absolute;bottom:14%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--c,transparent)}
.cal .d.today{box-shadow:inset 0 0 0 1.5px var(--accent)}
.cal .d.pad{visibility:hidden}
.callegend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:.8rem;color:var(--text2)}
.callegend li{display:inline-flex;align-items:center;gap:6px}
.callegend i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.calhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.calhead b{color:var(--ink);font-weight:750}
.calhead span{font-size:.82rem;color:var(--dim)}

/* ---------- make it yours: the pickers recolour the page ---------- */
.look-grid{margin-top:32px;display:grid;gap:18px}
@media (min-width:880px){.look-grid{grid-template-columns:repeat(3,1fr)}}
.pick{border:1px solid var(--line);border-radius:26px;background:var(--panel);padding:20px}
.pick legend{float:left;width:100%;font-size:.8rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--text2);margin-bottom:12px}
.opts{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.opt span{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line2);font-weight:700;font-size:.94rem;color:var(--text);background:var(--card)}
.opt .sw{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.opt input:checked + span{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);color:var(--ink)}
.opt input:focus-visible + span{outline:2px solid var(--accent2);outline-offset:4px}
.pick p{clear:both;margin-top:12px;font-size:.9rem;color:var(--text2)}

/* ---------- the widget ---------- */
.widget-in{display:grid;gap:36px;align-items:center}
@media (min-width:900px){.widget-in{grid-template-columns:1fr 1fr;gap:56px}}
.homescreen{position:relative;border-radius:34px;padding:26px 20px;min-height:340px;display:grid;gap:16px;align-content:center;
  background:radial-gradient(80% 60% at 20% 10%,color-mix(in srgb,var(--t-study) 30%,transparent),transparent 70%),radial-gradient(70% 70% at 90% 100%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),#1B2220;
  box-shadow:0 0 0 1px var(--line)}
.wmed,.wsmall{border-radius:24px;background:rgba(23,27,26,.92);box-shadow:0 12px 30px -12px rgba(0,0,0,.7);color:var(--text)}
.wmed{padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center}
.wmed .t{font-size:.78rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.wmed .c{font-family:var(--display);font-weight:760;font-size:1.9rem;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1}
.wmed .h{grid-column:1/-1;font-size:.84rem;color:var(--text2)}
.wmed .pill{grid-row:1/3;grid-column:2;align-self:center;padding:10px 18px;border-radius:999px;background:var(--accent);color:var(--onaccent);font-weight:750;font-size:.9rem}
.wrowx{display:flex;gap:16px;align-items:stretch}
.wsmall{width:150px;aspect-ratio:1;padding:16px;display:grid;align-content:space-between}
.wsmall .t{font-size:.74rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--t-study)}
.wsmall .c{font-weight:760;font-size:1.02rem;color:var(--ink);line-height:1.25}
.apps{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;align-content:center;justify-items:center}
.apps i{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.08)}

/* ---------- gallery: the real app ---------- */
.galstrip{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:34px var(--pad) 30px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.galrow{display:flex;gap:20px;width:max-content}
.gp{flex:0 0 auto;width:min(58vw,236px);scroll-snap-align:start}
.gp img{width:100%;height:auto;border-radius:22px;box-shadow:0 0 0 1px var(--line),0 20px 36px -16px rgba(0,0,0,.8)}
.gp figcaption{margin-top:12px;font-size:.9rem;color:var(--text2);text-align:center}
@media (min-width:1100px){
  .galstrip{overflow:visible}
  .galrow{width:auto;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:28px}
  .gp{width:auto}
  .gp:nth-child(even){margin-top:48px}
}

/* ---------- film ---------- */
.promo{margin-top:28px;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(0,0,0,.9)}
.promo video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.promo-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;margin-top:12px;font-size:.88rem;color:var(--dim)}

/* ---------- quiet: the never list and free ---------- */
.quiet-grid{margin-top:32px;display:grid;gap:18px}
@media (min-width:900px){.quiet-grid{grid-template-columns:1.2fr .8fr}}
.nots{display:grid;gap:2px;border-radius:26px;background:var(--panel);border:1px solid var(--line);padding:10px 22px}
@media (min-width:600px){.nots{grid-template-columns:1fr 1fr;column-gap:28px}}
.nots li{display:flex;gap:12px;align-items:center;min-height:48px;border-bottom:1px solid var(--line);color:var(--text)}
.nots li::before{content:"";flex:none;width:14px;height:2px;border-radius:2px;background:var(--text2)}
.alarm{margin-top:18px;border-left:3px solid var(--accent);padding:4px 0 4px 16px;color:var(--text);max-width:44rem}
.freebox{align-self:start;border-radius:26px;background:var(--accent);color:var(--onaccent);padding:24px}
.freebox h3{font-family:var(--display);font-weight:780;font-size:1.7rem;letter-spacing:-.02em}
.freebox p{margin-top:10px}
.freebox a{color:var(--onaccent);font-weight:700}
.freebox :focus-visible{outline-color:var(--onaccent);box-shadow:none}

/* ---------- get ---------- */
.getbox{position:relative;max-width:760px;margin:0 auto;text-align:center;border-radius:34px;padding:40px 22px 34px;background:
  radial-gradient(70% 60% at 50% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--panel);border:1px solid var(--line)}
.getmark{width:62px;height:80px;margin:0 auto 14px}
.getbox h2{margin:0 auto;max-width:none}
.getbox p{margin:12px auto 0;max-width:34rem;color:var(--text2)}
.getbox .store-row{justify-content:center;margin-top:18px}
.getbox .play-badge{height:64px;margin-left:0}
.getbox .fine{font-size:.9rem;color:var(--dim)}
@media (min-width:600px){.getbox{padding:52px 44px 44px}.getbox .play-badge{height:76px}}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:36px 0 96px;color:var(--dim);font-size:.9rem}
.foot .family{color:var(--text2);max-width:46rem}
.footlinks{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:16px}
.footlinks a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin-left:-10px;margin-right:6px;color:var(--text2);text-decoration:none;border-radius:8px}
.footlinks a:hover{color:var(--ink);text-decoration:underline}
.foot .co{margin-top:12px}
.foot .co a,.foot .family a{color:var(--text2)}
.foot .family a:hover,.foot .co a:hover{color:var(--ink)}
.legal-note{margin-top:10px;font-size:.8rem;line-height:1.5;color:var(--dim);max-width:52rem}

/* ---------- the Pause motion chip (only while something can move) ---------- */
.chips-fixed{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:40}
.motion{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line2);background:color-mix(in srgb,var(--panel) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);font-weight:650;font-size:.86rem;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.motion::before{content:"";width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.motion[aria-pressed="true"]::before{width:0;height:0;border:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
html:not(.js) .chips-fixed,html.rm .chips-fixed,html.failsafe .chips-fixed{display:none}
@media (max-width:420px){.motion .mw{display:none}}

/* ---------- reveal ---------- */
.rv{transition:opacity .8s ease,transform .9s var(--ease);transition-delay:var(--dl,0s)}
html.js.enh:not(.failsafe) .rv:not(.in){opacity:0;transform:translateY(22px)}
.cardrow .card:nth-child(2),.galrow .gp:nth-child(2){--dl:.1s}
.cardrow .card:nth-child(3),.galrow .gp:nth-child(3){--dl:.2s}
.galrow .gp:nth-child(4){--dl:.3s}.galrow .gp:nth-child(5){--dl:.4s}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- the glass drawing (frame, sheen, the still's strata) ---------- */
.gcap{fill:var(--glass)}
.gline{fill:none;stroke:var(--glass);stroke-width:2.6;stroke-linejoin:round}
.gsheen{fill:none;stroke:rgba(255,255,255,.2);stroke-width:.8;stroke-linecap:round}
.lg-sand{fill:var(--accent)}
.s-work{fill:var(--t-work)}.s-study{fill:var(--t-study)}.s-ex{fill:var(--t-ex)}.s-tv{fill:var(--t-tv)}.s-none{fill:var(--t-none)}