/* Maru site. Tokens first. Every rule below the token block uses a token. */

:root {
  color-scheme: light dark;

  /* Color */
  --bg: #FFFFFF;
  --bg-alt: #F5F5F7;
  --surface: #FFFFFF;
  --text: #1D1D1F;
  --text-2: #6E6E73;
  --link: #C8003B;
  --focus: #D70040;
  --tint-soft: rgba(255, 45, 85, 0.07);
  --fill-2: rgba(120, 120, 128, 0.12);
  --fill-3: rgba(120, 120, 128, 0.08);
  --ring-color: rgba(0, 0, 0, 0.08);
  --tip-bg: #1D1D1F;
  --tip-text: #FFFFFF;

  /* App components: the system colors of iOS in light mode, and the default pink of Maru (docs/design.md) */
  --app-tint: #FF2D55;
  --app-on-tint: #FFFFFF;
  --app-touch: rgba(255, 45, 85, 0.14);
  --app-bg: #F2F2F7;
  --app-card: #FFFFFF;
  --app-label: #000000;
  --app-label-2: #8A8A8E;
  --app-separator: #E8E8E8;
  --app-ring: #C5C5C7;
  --app-chevron: #C4C4C7;
  --app-fill-3: rgba(118, 118, 128, 0.12);
  --app-strip-none: #D9D9DB;
  --app-widget: #FFFFFF;
  --app-cap-off: #E5E5EA;
  --app-cap-line: #C7C7CC;
  --app-cap-shine: rgba(255, 255, 255, 0.32);
  --app-banner: rgba(255, 255, 255, 0.94);
  --app-banner-2: #7C7C80;
  --app-glass: rgba(255, 255, 255, 0.6);
  --app-icon-bg: #FFFFFF;
  --app-icon-ring: #E4E4E6;
  --app-icon-mark: linear-gradient(#FF5C7C, #FF2D55);
  --wallpaper: radial-gradient(120% 80% at 0% 0%, #FFE3E9, transparent 60%), radial-gradient(90% 70% at 100% 100%, #FFB3C2, transparent 70%), linear-gradient(160deg, #FFF0F3, #FFCCD7);

  /* Top bar: a dark island that hangs from the top edge */
  --bar-bg: #1D1D1F;
  --bar-text: #FFFFFF;
  --bar-text-2: rgba(255, 255, 255, 0.72);
  --bar-fill: rgba(255, 255, 255, 0.14);
  --bar-fill-press: rgba(255, 255, 255, 0.22);
  --bar-cta-bg: #FFFFFF;
  --bar-cta-text: #1D1D1F;
  --bar-ring: 0 0 0 0 transparent;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-bar: 20px;
  --radius-full: 999px;
  --radius-icon: 22%;

  /* Duration */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --dur-close: 130ms;
  --dur-fade: 150ms;
  --dur-enter: 420ms;
  --dur-bar: 480ms;
  --dur-hero: 520ms;
  --stagger: 60ms;
  /* The tap on the Today row in the hero: it starts after the hero entrance, and the circle fills a moment after the touch. */
  --dur-tap: 500ms;
  --dur-fill: 350ms;
  --delay-tap: 1100ms;
  --delay-fill: 160ms;
  /* The page entrance starts this long after the top bar starts. The content of the bar fades in at the end of its fall. */
  --delay-page: 80ms;
  --delay-bar-content: 320ms;

  /* Easing. No rule uses "ease" or "ease-in-out". */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.17, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.35, 1.55, 0.65, 1);
  --ease-in-out: cubic-bezier(0.66, 0, 0.34, 1);
  /* A plain ease-in, only for a menu that closes. */
  --ease-in: cubic-bezier(0.42, 0, 1, 1);

  /* Motion distances */
  --shift-enter: 14px;
  --shift-hero: 24px;
  --scale-hero: 0.97;
  /* The hero component is the largest picture of the page. It is in the first paint, dim, and does not start from nothing. */
  --fade-hero: 0.3;
  --shift-lift: 4px;
  --blur-enter: 4px;
  --blur-lift: 2px;
  --press: 0.98;
  --scale-fill: 0.85;
  --blur-glass: 20px;
  --scale-menu: 0.96;
  --dim-hover: 0.82;
  --dim-press: 0.68;

  /* Shadows: layers of light with a hairline ring. No single blur. */
  --hairline: 0 0 0 0.5px var(--ring-color);
  --edge-below: 0 0.5px 0 var(--ring-color);
  --edge-above: 0 -0.5px 0 var(--ring-color);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02), var(--hairline);
  --shadow-elevated: 0 4px 8px rgba(0, 0, 0, 0.02), 0 8px 12px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04), var(--hairline);
  --shadow-float: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 12px 24px rgba(0, 0, 0, 0.05), 0 32px 64px rgba(0, 0, 0, 0.08), var(--hairline);

  /* Icons: Hugeicons, 24 px grid, one stroke width */
  --icon-size: 20px;
  --icon-stroke: 1.5;
  --hit: 40px;

  /* Focus ring */
  --ring-width: 2px;
  --ring-offset: 2px;
  --line: 1px;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-zh: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  --font-ja: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Noto Sans JP", sans-serif;
  --font-ko: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.3125rem;
  --fs-xl: 1.75rem;
  --fs-2xl: clamp(1.875rem, 4vw + 0.75rem, 3rem);
  --fs-hero: clamp(1.875rem, 5vw + 0.875rem, 4rem);
  --fs-code: 0.875em;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --track-tight: -0.03em;
  --track-body: -0.01em;
  --lh-body: 1.47;
  --lh-head: 1.08;
  --lh-lede: 1.4;
  --lh-tight: 1.3;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --gutter: 20px;
  --max: 66rem;
  --max-prose: 44rem;
  --max-lede: 34rem;
  --max-copy: 26rem;
  --max-stage: 25rem;
  /* On a wide screen the hero component takes this share of the screen, so the longest headline keeps its line. */
  --hero-stage-share: 36vw;
  --menu-width: 11rem;
  --nav-h: 56px;
  --bar-cta-h: 36px;
  --badge-page: 56px;
  --brand-icon: 28px;
  /* One point of an app component at its largest. */
  --pt-max: 1.1px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-alt: #121214;
    --surface: #1C1C1E;
    --text: #F5F5F7;
    --text-2: #A1A1A6;
    --link: #FF6482;
    --focus: #FF6482;
    --tint-soft: rgba(255, 55, 95, 0.12);
    --ring-color: rgba(255, 255, 255, 0.12);
    --bar-bg: #1C1C1E;
    --bar-ring: var(--hairline);
    --tip-bg: #F5F5F7;
    --tip-text: #1D1D1F;
    --app-bg: #000000;
    --app-card: #1C1C1E;
    --app-label: #FFFFFF;
    --app-label-2: #8D8D93;
    --app-separator: #38383A;
    --app-ring: #5B5B60;
    --app-chevron: #5B5B60;
    --app-fill-3: rgba(118, 118, 128, 0.24);
    --app-strip-none: #3A3A3C;
    --app-widget: #1C1C1E;
    --app-cap-off: #2C2C2E;
    --app-cap-line: #48484A;
    --app-banner: rgba(37, 37, 39, 0.9);
    --app-banner-2: #98989F;
    --app-glass: rgba(60, 60, 64, 0.6);
    --app-icon-ring: rgba(0, 0, 0, 0.2);
    --wallpaper: radial-gradient(120% 80% at 0% 0%, #4A1424, transparent 60%), radial-gradient(90% 70% at 100% 100%, #7A1B35, transparent 70%), linear-gradient(160deg, #1A080E, #33101C);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2), var(--hairline);
    --shadow-elevated: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3), var(--hairline);
    --shadow-float: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.4), 0 40px 80px rgba(0, 0, 0, 0.5), var(--hairline);
  }
}

/* Languages. Chinese, Japanese, and Korean use their system fonts, no negative tracking, and more line height. */
:lang(zh-Hans) { font-family: var(--font-zh); line-break: strict; }
:lang(ja) { font-family: var(--font-ja); line-break: strict; }
:lang(ko) { font-family: var(--font-ko); word-break: keep-all; }
:lang(en) { font-family: var(--font); line-break: auto; word-break: normal; }
:lang(de) { hyphens: auto; hyphenate-limit-chars: 12 4 4; }
/* A short German text has no hyphen at the end of a line. Only long body text hyphenates. */
:lang(de) :is(.lede, .soon, .nots li, .qa h2) { hyphens: manual; }
:root:lang(zh-Hans), :root:lang(ja), :root:lang(ko) { --track-tight: 0; --track-body: 0; --lh-body: 1.7; --lh-head: 1.3; --lh-lede: 1.6; }
/* Korean headlines sit better a little tighter. */
:root:lang(ko) { --track-tight: -0.02em; }
/* Chinese and Japanese: trim the empty half of a full-width mark at the start and the end of a line, so a centered line is centered.
   Japanese headlines also use proportional kana and marks. */
:lang(zh-Hans), :lang(ja) { text-spacing-trim: trim-both; }
:lang(ja) :is(h1, h2) { font-feature-settings: "palt"; }
/* Japanese text breaks between phrases where the browser can do it, and not inside a word. */
:lang(ja) { word-break: auto-phrase; }
:lang(en) :is(h1, h2) { font-feature-settings: normal; }

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--space-4)); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums;
}
img { max-width: 100%; height: auto; display: block; }
a {
  color: var(--link); text-decoration-thickness: var(--line); text-underline-offset: var(--space-1);
  transition: color var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
}
a:hover { opacity: var(--dim-hover); }
a:active { opacity: var(--dim-press); }
h1, h2 { margin: 0 0 var(--space-3); line-height: var(--lh-head); letter-spacing: var(--track-tight); text-wrap: balance; font-weight: var(--fw-bold); hyphens: manual; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
code { font: var(--fs-code) var(--font-mono); background: var(--fill-3); padding: 0 var(--space-1); border-radius: var(--radius-sm); }
:focus-visible { outline: var(--ring-width) solid var(--focus); outline-offset: var(--ring-offset); border-radius: var(--radius-sm); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb { display: inline-block; }
.skip {
  position: fixed; left: var(--space-3); top: var(--space-3); z-index: 40;
  background: var(--surface); color: var(--text); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md); box-shadow: var(--shadow-elevated);
  opacity: 0; pointer-events: none; transform: translateY(calc(-1 * var(--shift-lift)));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.skip:focus { opacity: 1; pointer-events: auto; transform: none; }
.lede { font-size: var(--fs-lg); line-height: var(--lh-lede); color: var(--text-2); max-width: var(--max-lede); text-wrap: balance; }
.note { font-size: var(--fs-sm); color: var(--text-2); }

/* Icons: one library, one size, one stroke. */
.icon { width: var(--icon-size); height: var(--icon-size); flex: none; stroke-width: var(--icon-stroke); }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: var(--hit); height: var(--hit); flex: none;
  padding: 0; border: 0; background: none; color: var(--text-2); border-radius: var(--radius-full); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-smooth), background-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.icon-btn:hover { color: var(--text); background: var(--fill-3); opacity: 1; }
.icon-btn:active { transform: scale(var(--press)); background: var(--fill-2); opacity: 1; }
.icon-btn:focus-visible { border-radius: var(--radius-full); }

/* Tooltip of an icon button. It lifts and clears a blur. It does not pop. */
.icon-btn[data-tip]::after {
  content: attr(data-tip); position: absolute; top: calc(100% + var(--space-1)); left: 50%; z-index: 30;
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  background: var(--tip-bg); color: var(--tip-text); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-tight); white-space: nowrap;
  opacity: 0; pointer-events: none; filter: blur(var(--blur-lift));
  transform: translate(-50%, var(--shift-lift));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .icon-btn[data-tip]:hover::after { opacity: 1; filter: blur(0); transform: translate(-50%, 0); }
}
.icon-btn[data-tip]:focus-visible::after { opacity: 1; filter: blur(0); transform: translate(-50%, 0); }
.lang-menu[open] .icon-btn[data-tip]::after { opacity: 0; }

/* Entrance on scroll. Content is visible with no script. A group with .is-in plays the entrance of its .enter parts one time.
   The class "motion" on <html> says that motion is on. */
/* The blur clears at 60% of the time, before the movement ends, so the text is sharp when it comes to rest. */
@keyframes enter {
  from { opacity: 0; transform: translateY(var(--shift-enter)); filter: blur(var(--blur-enter)); }
  60% { filter: none; }
}
/* The page entrance: one short moment when the page loads. The bar falls in from above the top edge, and its content
   fades in at the end. The hero parts rise in order, and the hero component rises and grows to its size and settles last. */
@keyframes bar-in {
  from { transform: translateY(-100%); }
}
@keyframes fade {
  from { opacity: 0; }
}
@keyframes hero-in {
  from { opacity: var(--fade-hero); transform: translateY(var(--shift-hero)) scale(var(--scale-hero)); filter: blur(var(--blur-enter)); }
  60% { filter: none; }
}
.motion .load { animation: enter var(--dur-enter) var(--ease-smooth) both; animation-delay: calc(var(--delay-page) + var(--order, 0) * var(--stagger)); }
.motion .load-hero { animation: hero-in var(--dur-hero) var(--ease-out) both; animation-delay: var(--delay-page); }
/* A menu opens from its button: it fades in, grows from 96%, and moves a few pixels. It closes with opacity and scale only. */
@keyframes menu-in {
  from { opacity: 0; transform: translateY(calc(-1 * var(--shift-lift))) scale(var(--scale-menu)); }
}
@keyframes menu-out {
  to { opacity: 0; transform: scale(var(--scale-menu)); }
}
@keyframes fade-out {
  to { opacity: 0; }
}
@keyframes lift {
  from { opacity: 0; transform: translateY(var(--shift-lift)); filter: blur(var(--blur-lift)); }
}
.motion .is-in .enter { animation: enter var(--dur-enter) var(--ease-smooth) both; animation-delay: calc(var(--order, 0) * var(--stagger)); }
.d1 { --order: 1; }
.d2 { --order: 2; }
.d3 { --order: 3; }

/* Top bar: a dark island that hangs from the top edge of the page, in the middle. It is as wide as its content.
   It is solid, so it stays readable over a picture and over a block. It does not change when the page scrolls. */
.site-header { position: sticky; top: 0; z-index: 20; height: var(--nav-h); display: flex; justify-content: center; pointer-events: none; }
.nav-inner {
  position: relative; pointer-events: auto; height: var(--nav-h); padding: 0 var(--space-3) 0 var(--space-4);
  display: flex; align-items: center; gap: var(--space-6);
  background: var(--bar-bg); color: var(--bar-text); border-radius: 0 0 var(--radius-bar) var(--radius-bar); box-shadow: var(--bar-ring);
}
.motion .nav-inner { animation: bar-in var(--dur-bar) var(--ease-out) both; }
.motion .nav-inner > * { animation: fade var(--dur-fade) var(--ease-smooth) var(--delay-bar-content) both; }
/* The two corners where the island meets the top edge curve outward. */
.nav-inner::before, .nav-inner::after {
  content: ""; position: absolute; top: 0; width: var(--radius-bar); height: var(--radius-bar);
  background: radial-gradient(circle at 0 100%, transparent var(--radius-bar), var(--bar-bg) calc(var(--radius-bar) + 0.5px));
}
.nav-inner::before { right: 100%; }
.nav-inner::after { left: 100%; transform: scaleX(-1); }
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2); color: var(--bar-text); font-weight: var(--fw-semibold); text-decoration: none;
  border-radius: var(--radius-sm); transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
}
.brand:active { transform: scale(var(--press)); }
.brand img { width: var(--brand-icon); height: var(--brand-icon); border-radius: var(--radius-icon); }
.nav-links { display: flex; align-items: center; gap: var(--space-1); }
.site-header .icon-btn { color: var(--bar-text-2); }
.site-header .icon-btn:hover, .site-header .lang-menu[open] summary { color: var(--bar-text); background: var(--bar-fill); }
.site-header .icon-btn:active { background: var(--bar-fill-press); }
.site-header :focus-visible { outline-color: var(--bar-text); }
.bar-cta {
  display: inline-flex; align-items: center; height: var(--bar-cta-h); padding: 0 var(--space-4); margin-left: var(--space-2);
  background: var(--bar-cta-bg); color: var(--bar-cta-text); border-radius: var(--radius-full);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth);
}
.bar-cta:active { transform: scale(var(--press)); }

/* Language menu: a details element with plain links, so it works with no script. */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; -webkit-user-select: none; user-select: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu ul {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 30; min-width: var(--menu-width);
  margin: 0; padding: var(--space-2); list-style: none;
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated);
  transform-origin: top right;
  animation: menu-in var(--dur-base) var(--ease-out);
}
/* site.js adds "closing" and waits for the end of this animation. Then it closes the menu. The close is faster than the open. */
.lang-menu.closing ul { animation: menu-out var(--dur-close) var(--ease-in) forwards; }
.lang-menu li a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--hit);
  padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth);
}
.lang-menu li a:hover { background: var(--fill-3); opacity: 1; }
.lang-menu li a:active { transform: scale(var(--press)); background: var(--fill-2); opacity: 1; }
.lang-menu li a[aria-current] { font-weight: var(--fw-semibold); }
.lang-menu li a .icon { color: var(--link); }

/* App Store badge: Apple's artwork, not changed, 40 px or more high, with a clear space of one quarter of its height.
   Only the link around it answers to hover and press, and only with opacity. */
.badge {
  display: inline-block; flex: none; margin: calc(var(--badge-page) * 0.25) 0; border-radius: var(--radius-sm);
  transition: opacity var(--dur-fast) var(--ease-smooth);
}
.badge img { display: block; }

/* The download unit: Apple's badge, and under it a quiet row of the devices that the app runs on.
   The row starts at the left edge of the badge on a wide screen, and is centered with it on a narrow one.
   The gap is larger than the clear space of the badge. */
.get { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.get .badge { margin: 0; }
/* Before the release: one plain line in place of the badge. It is not a button and has no Apple artwork. */
.soon { margin: 0; padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: var(--fill-2); font-weight: var(--fw-semibold); }
.get-devices { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-2); }
.get-devices li { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }

/* Layout */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Hero */
.hero { text-align: center; padding: var(--space-7) 0 var(--space-8); }
.hero-grid { display: grid; gap: var(--space-6); justify-items: center; }
.hero-stage { width: 100%; max-width: var(--max-stage); display: grid; justify-items: center; container-type: inline-size; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: var(--fs-hero); margin-bottom: var(--space-4); }
.hero .lede { margin-bottom: var(--space-5); }

/* App components: the Today list, the History graph, the item page, the widget, and the reminder, drawn in HTML.
   Every size is the size in the app in points, times --pt. A component fills the width of its container: --base is
   that width in points. --pt-max stops it at a little more than its real size. The colors are the system colors of iOS. */
.mock { --base: 402; --pt: min(var(--pt-max), 100cqw / var(--base)); flex: none; color: var(--app-label); text-align: left; letter-spacing: calc(0.47 * var(--pt)); }
/* The captures show about 0.47 pt more tracking than the same font in a browser, at every text size up to 17 pt. */
.m-app { width: calc(var(--base) * var(--pt)); font-size: calc(17 * var(--pt)); line-height: calc(22 * var(--pt)); }
.m-head { margin: 0 0 calc(9.67 * var(--pt)); padding-left: calc(32 * var(--pt)); font-size: calc(20 * var(--pt)); line-height: calc(25 * var(--pt)); font-weight: var(--fw-bold); letter-spacing: 0; }
.m-head.m-gray { color: var(--app-label-2); font-size: calc(17.67 * var(--pt)); line-height: calc(22 * var(--pt)); font-weight: var(--fw-semibold); margin-bottom: calc(8 * var(--pt)); }
.m-card { margin: 0 calc(16 * var(--pt)); background: var(--app-card); border-radius: calc(26 * var(--pt)); box-shadow: var(--shadow-card); }
.m-card + .m-head { margin-top: calc(28 * var(--pt)); }
/* The History and the item page show the cards with no screen margin, so the cards are as large as the block allows. */
.mock-history, .mock-detail, .mock-widget, .mock-notification { --base: 370; }
.mock-history .m-card, .mock-detail .m-card { margin: 0; }
.mock-history .m-head, .mock-detail .m-head { padding-left: calc(16 * var(--pt)); }
.m-graph + .m-head { margin-top: calc(18.67 * var(--pt)); }
.m-row { position: relative; min-height: calc(73.67 * var(--pt)); display: flex; align-items: center; padding: 0 calc(16 * var(--pt)); }
.m-row + .m-row::before { content: ""; position: absolute; left: calc(60.33 * var(--pt)); right: calc(16 * var(--pt)); top: 0; height: calc(0.67 * var(--pt)); background: var(--app-separator); }
.m-ico { flex: none; width: calc(28 * var(--pt)); height: calc(28 * var(--pt)); margin: 0 calc(14.33 * var(--pt)) 0 calc(2 * var(--pt)); }
.m-txt { flex: 1; min-width: 0; display: grid; padding: calc(10.67 * var(--pt)) 0 calc(9.33 * var(--pt)); }
.m-txt b { font-weight: normal; }
.m-sub { font-size: calc(15 * var(--pt)); line-height: calc(20 * var(--pt)); color: var(--app-label-2); }
/* The record circle: "circle" and "checkmark.circle.fill" in a 44 pt target. */
.m-rec { flex: none; position: relative; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); display: grid; place-items: center; }
.m-rec > * { grid-area: 1 / 1; }
.m-rec svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); overflow: visible; }
.m-ring circle { fill: none; stroke: var(--app-ring); stroke-width: 1.73; }
.m-check circle { fill: var(--app-tint); }
.m-check path { fill: none; stroke: var(--app-on-tint); stroke-width: 1.87; stroke-linecap: round; stroke-linejoin: round; }
.m-touch { position: absolute; left: 50%; top: 50%; width: calc(63 * var(--pt)); height: calc(63 * var(--pt)); margin: calc(-31.5 * var(--pt)) 0 0 calc(-31.5 * var(--pt)); border-radius: var(--radius-full); background: var(--app-touch); opacity: 0; }
/* The strip of the last 7 days (WeekStrip): filled, filled at 40%, outline, or a faint gray capsule. */
.m-strip { flex: none; display: flex; gap: calc(3.2 * var(--pt)); }
.m-strip i { width: calc(6.4 * var(--pt)); height: calc(16 * var(--pt)); border-radius: var(--radius-full); }
.m-strip .w-a { background: var(--c); }
.m-strip .w-s { background: color-mix(in srgb, var(--c) 40%, transparent); }
.m-strip .w-m { box-shadow: inset 0 0 0 calc(1.5 * var(--pt)) var(--c); }
.m-strip .w-n { background: var(--app-strip-none); }
.m-chev { flex: none; width: calc(6.67 * var(--pt)); height: calc(11.33 * var(--pt)); margin: 0 calc(2.33 * var(--pt)) 0 calc(12.67 * var(--pt)); }
.m-chev path { fill: none; stroke: var(--app-chevron); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* The Today list in the hero: a cut of the screen on the app background. */
.m-today { padding: calc(22 * var(--pt)) 0 calc(16 * var(--pt)); background: var(--app-bg); border-radius: calc(36 * var(--pt)); box-shadow: var(--shadow-float); }
.m-today .m-card { box-shadow: none; }
.m-swap { display: grid; }
.m-swap > * { grid-area: 1 / 1; }
.m-before { opacity: 0; }
/* One tap records the noon row when the hero enters: a touch, then the circle fills with a spring, as in the app (Motion.fill).
   Without the class "motion" the row shows the recorded state at once. */
@keyframes tap-touch {
  from { opacity: 0; transform: scale(var(--scale-fill)); }
  30% { opacity: 1; transform: none; }
  to { opacity: 0; }
}
@keyframes tap-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes tap-in {
  from { opacity: 0; transform: scale(var(--scale-fill)); }
}
.motion .m-tap .m-touch { animation: tap-touch var(--dur-tap) var(--ease-out) var(--delay-tap) both; }
.motion .m-tap .m-ring, .motion .m-today .m-before { animation: tap-out var(--dur-fade) var(--ease-in) calc(var(--delay-tap) + var(--delay-fill)) both; }
.motion .m-tap .m-check { animation: tap-in var(--dur-fill) var(--ease-spring) calc(var(--delay-tap) + var(--delay-fill)) both; }
.motion .m-today .m-after { animation: fade var(--dur-base) var(--ease-out) calc(var(--delay-tap) + var(--delay-fill)) both; }
.m-tap .m-ring { opacity: 0; }

/* The History graph (HistoryGraphView): 13 week columns of 21 pt squares, the months above, and three weekday letters. */
.m-graph {
  display: grid; gap: calc(4.25 * var(--pt));
  grid-template-columns: calc(9.75 * var(--pt)) repeat(13, calc(21 * var(--pt)));
  grid-template-rows: calc(12.42 * var(--pt)) repeat(7, calc(21 * var(--pt)));
  padding: calc(16 * var(--pt)) calc(16 * var(--pt)) calc(15.83 * var(--pt));
}
.m-graph i { border-radius: calc(4.62 * var(--pt)); }
.m-graph .g-A { background: var(--app-tint); }
.m-graph .g-M { background: color-mix(in srgb, var(--app-tint) 60%, transparent); }
.m-graph .g-S { background: color-mix(in srgb, var(--app-tint) 30%, transparent); }
.m-graph .g-N { background: var(--app-fill-3); }
.m-graph .g-F { box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--app-fill-3); }
.m-graph u { text-decoration: none; white-space: nowrap; font-size: calc(11 * var(--pt)); line-height: calc(13.33 * var(--pt)); color: var(--app-label-2); letter-spacing: 0; align-self: end; }
.m-graph .g-wk { align-self: center; }

/* The item page: the plan, and the strip of the last 7 days with the counts under it. */
.m-pair { min-height: calc(51.67 * var(--pt)); justify-content: space-between; gap: calc(16 * var(--pt)); }
.m-pair + .m-pair::before { left: calc(16 * var(--pt)); }
.m-value { color: var(--app-label-2); text-align: right; }
.m-week { padding: calc(15.67 * var(--pt)) calc(16 * var(--pt)); }
.m-week-top { display: flex; align-items: center; }
.m-week .m-ico { margin: 0 calc(14 * var(--pt)) 0 calc(2 * var(--pt)); }
/* The counts stand side by side, or one under the other in a language where they do not fit in one line. */
.m-counts { margin: calc(10.67 * var(--pt)) 0 0; display: flex; flex-wrap: wrap; gap: calc(2 * var(--pt)) calc(16 * var(--pt)); font-size: calc(15 * var(--pt)); line-height: calc(20 * var(--pt)); color: var(--app-label-2); }
.m-counts.m-stack { flex-direction: column; }

/* The reminder block: the widget and the opened reminder on a wallpaper, as on an iPhone. */
.wallpaper {
  width: 100%; max-width: var(--max-stage); container-type: inline-size;
  display: grid; gap: var(--space-6); justify-items: center;
  padding: var(--space-7) var(--space-3); border-radius: var(--radius-lg);
  background: var(--wallpaper); box-shadow: var(--hairline);
}
/* The medium Today widget (TodayWidget, CapsuleMark). */
.m-widget { width: calc(349.33 * var(--pt)); height: calc(164 * var(--pt)); padding: calc(17.67 * var(--pt)); background: var(--app-widget); border-radius: calc(28 * var(--pt)); box-shadow: var(--shadow-float); }
.m-widget-top { display: flex; justify-content: space-between; gap: calc(8 * var(--pt)); font-size: calc(17 * var(--pt)); line-height: calc(22 * var(--pt)); }
.m-widget-top b, .m-col b { font-weight: var(--fw-semibold); }
.m-widget-top b + b, .m-time { color: var(--app-label-2); }
.m-cols { display: flex; gap: calc(8 * var(--pt)); margin-top: calc(7.33 * var(--pt)); }
.m-col { flex: 1; min-width: 0; display: grid; align-content: start; }
.m-col b { font-size: calc(15 * var(--pt)); line-height: calc(20 * var(--pt)); white-space: nowrap; }
.m-col b.now { color: var(--app-tint); }
.m-time { font-size: calc(12 * var(--pt)); line-height: calc(16 * var(--pt)); margin-top: calc(0.33 * var(--pt)); white-space: nowrap; }
.m-caps { display: flex; gap: calc(2 * var(--pt)); margin-top: calc(5.67 * var(--pt)); }
.m-caps i { position: relative; width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); }
.m-caps i::before {
  content: ""; position: absolute; left: calc(1.33 * var(--pt)); top: calc(6.5 * var(--pt)); width: calc(23.33 * var(--pt)); height: calc(13 * var(--pt));
  border-radius: var(--radius-full); transform: rotate(-45deg); background: var(--app-cap-off); box-shadow: inset 0 0 0 calc(1.08 * var(--pt)) var(--app-cap-line);
}
.m-caps i.on::before { background: linear-gradient(var(--app-cap-shine), transparent), var(--app-tint); box-shadow: none; }
/* The opened reminder and its action. The banner is a system view, measured from a capture. */
.m-notif {
  position: relative; width: calc(370 * var(--pt)); height: calc(75 * var(--pt)); border-radius: calc(32 * var(--pt));
  background: var(--app-banner); box-shadow: var(--shadow-elevated);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
}
.m-notif > * { position: absolute; left: calc(64 * var(--pt)); white-space: nowrap; }
.m-app-icon { left: calc(14.33 * var(--pt)); top: calc(18.67 * var(--pt)); width: calc(37 * var(--pt)); height: calc(37 * var(--pt)); border-radius: calc(9 * var(--pt)); background: var(--app-icon-bg); box-shadow: inset 0 0 0 calc(0.5 * var(--pt)) var(--app-icon-ring); }
.m-app-icon::before { content: ""; position: absolute; left: calc(7 * var(--pt)); top: calc(13 * var(--pt)); width: calc(23 * var(--pt)); height: calc(11 * var(--pt)); border-radius: var(--radius-full); transform: rotate(-45deg); background: var(--app-icon-mark); }
.m-ts, .m-now { top: calc(10 * var(--pt)); font-size: calc(13 * var(--pt)); line-height: calc(16 * var(--pt)); color: var(--app-banner-2); }
.m-ts { font-weight: var(--fw-semibold); }
.m-now { left: auto; right: calc(17.67 * var(--pt)); top: calc(11.67 * var(--pt)); }
.m-notif b, .m-body { font-size: calc(15 * var(--pt)); line-height: calc(18.67 * var(--pt)); color: var(--app-label); }
.m-notif b { top: calc(25.33 * var(--pt)); font-weight: var(--fw-semibold); }
.m-body { top: calc(43.33 * var(--pt)); }
.m-action {
  width: calc(248 * var(--pt)); height: calc(59.33 * var(--pt)); margin: calc(16.67 * var(--pt)) auto 0; padding-left: calc(28.67 * var(--pt));
  display: flex; align-items: center; border-radius: var(--radius-full); font-size: calc(17 * var(--pt));
  background: var(--app-glass); box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(var(--blur-glass)); backdrop-filter: blur(var(--blur-glass));
}

/* Feature panels */
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); justify-items: center; text-align: center;
  background: var(--bg-alt); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-5);
  margin-bottom: var(--space-5); box-shadow: var(--hairline);
}
.feature-stage { width: 100%; display: grid; justify-items: center; container-type: inline-size; }
.feature h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-3); }
.feature .lede { margin: 0 auto; max-width: var(--max-copy); }

/* Closing panel */
.closer {
  display: grid; gap: var(--space-5); justify-items: center;
  background: var(--bg-alt); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-5);
  box-shadow: var(--hairline);
}
.nots { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.nots li { text-wrap: balance; background: var(--surface); border-radius: var(--radius-full); padding: var(--space-3) var(--space-5); font-weight: var(--fw-medium); box-shadow: var(--shadow-card); text-align: center; }
.nots a { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth); }
.nots a:active { transform: scale(var(--press)); }
.closer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.closer-links a { display: inline-block; transition: transform var(--dur-fast) var(--ease-smooth), opacity var(--dur-fast) var(--ease-smooth); }
.closer-links a:active { transform: scale(var(--press)); }

/* Footer */
.site-footer { margin-top: var(--space-8); background: var(--bg-alt); box-shadow: var(--edge-above); color: var(--text-2); font-size: var(--fs-sm); }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: var(--space-6) var(--gutter); display: grid; gap: var(--space-4); }
.site-footer p { margin: 0; font-size: var(--fs-xs); }
.footer-links, .langs ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; padding: 0; list-style: none; }
.site-footer a { display: inline-block; color: var(--text-2); text-decoration: none; padding: var(--space-1) 0; transition: color var(--dur-fast) var(--ease-smooth), transform var(--dur-fast) var(--ease-smooth); }
.site-footer a:hover { color: var(--text); text-decoration: underline; opacity: 1; }
.site-footer a:active { transform: scale(var(--press)); opacity: 1; }
.footer-links a, .langs a[aria-current] { color: var(--text); }
.langs a[aria-current] { font-weight: var(--fw-semibold); }

/* A quiet hint that the page exists in the language of the browser. site.js shows it one time. */
.lang-hint {
  position: fixed; left: 0; right: 0; bottom: var(--space-4); z-index: 25; margin: 0 auto;
  display: flex; align-items: center; gap: var(--space-1); width: max-content; max-width: calc(100% - 2 * var(--space-4));
  background: var(--surface); border-radius: var(--radius-full); box-shadow: var(--shadow-elevated);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4); font-size: var(--fs-sm);
  animation: lift var(--dur-slow) var(--ease-out);
}
.lang-hint a { font-weight: var(--fw-semibold); padding: var(--space-2) 0; }

/* Inner pages */
main.prose { max-width: var(--max-prose); margin: 0 auto; padding: var(--space-7) var(--gutter) 0; }
.prose h1 { margin-bottom: var(--space-5); }
.prose h2 { margin-top: var(--space-7); }
.prose ul { padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose li > ul { margin-top: var(--space-2); }
.prose .lede { margin-bottom: var(--space-6); }
.qa { padding: var(--space-5) 0; border-bottom: var(--line) solid var(--ring-color); }
.qa h2 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); letter-spacing: var(--track-body); line-height: var(--lh-tight); }
.qa p { margin: 0; color: var(--text-2); }
.cards { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.card { background: var(--surface); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); }
.card h2 { margin: 0 0 var(--space-2); font-size: var(--fs-lg); letter-spacing: var(--track-body); }
.card p:last-child, .card ul, .card li:last-child { margin-bottom: 0; }
.summary { margin-bottom: var(--space-5); }

@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .feature { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; padding: var(--space-8) var(--space-7); }
  .feature.flip .feature-copy { order: 2; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hero { text-align: left; padding-top: var(--space-8); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--max-stage), var(--hero-stage-share))); align-items: center; }
  .hero-copy { align-items: flex-start; }
  .get { align-items: flex-start; }
  .get-devices { justify-content: flex-start; }
}
/* A narrow screen has no room for an island. The bar is the full width, with no round corners. */
@media (max-width: 419px) {
  .site-header { display: block; }
  .nav-inner { justify-content: space-between; gap: var(--space-2); border-radius: 0; }
  .nav-inner::before, .nav-inner::after { display: none; }
  /* The last button is at the edge of the screen. Its tooltip stays inside the screen. */
  .nav-links > .icon-btn:last-child[data-tip]::after { left: auto; right: 0; transform: translate(0, var(--shift-lift)); }
  .nav-links > .icon-btn:last-child[data-tip]:hover::after, .nav-links > .icon-btn:last-child[data-tip]:focus-visible::after { transform: none; }
}
@media (max-width: 359px) {
  :root { --gutter: 12px; --hit: 36px; }
  .nav-inner { padding: 0 var(--space-2) 0 var(--space-3); }
  .nav-links { gap: 0; }
  .bar-cta { padding: 0 var(--space-3); margin-left: var(--space-1); }
  .get-devices { column-gap: var(--space-3); }
  .get-devices li { gap: var(--space-1); }
}

/* Reduced motion: no movement, no blur, and each state shows at once. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .icon-btn:active, .brand:active, .bar-cta:active, .lang-menu li a:active, .nots a:active, .closer-links a:active, .site-footer a:active { transform: none; }
  .icon-btn[data-tip]::after { filter: none; transform: translate(-50%, 0); }
  /* A menu still fades in and out, with no movement. */
  .lang-menu ul { animation: fade var(--dur-base) var(--ease-out) !important; }
  .lang-menu.closing ul { animation: fade-out var(--dur-close) var(--ease-in) forwards !important; }
}

@media print {
  .site-header { position: static; }
  .lang-hint, .skip { display: none; }
}