:root { color-scheme: dark; --background:#121314; --text:#fff; --secondary:#b8b9bc; --surface:#242527; --separator:#353638; --filled:#007aff; --empty:#333; --forest:#30d158; --sunset:#ff9f0a; --mono:#fff; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
html { scroll-padding-top:100px; }
body { margin:0; background:var(--background); color:var(--text); }
h1,h2,h3,p { margin:0; }
a { color:inherit; text-decoration:none; }
a:hover { opacity:.8; }
:focus-visible { outline:3px solid #5ac8fa; outline-offset:5px; }
[hidden] { display:none!important; }
.wrap { width:min(980px,calc(100% - 80px)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:12px; left:12px; transform:translateY(-200%); padding:12px; background:var(--surface); z-index:9; }
.skip-link:focus { transform:translateY(0); }
.site-header { position:fixed; inset:0 0 auto; min-height:76px; display:flex; align-items:center; justify-content:space-between; padding:16px max(32px,calc((100vw - 1080px)/2)); z-index:5; background:#121314dd; backdrop-filter:blur(16px); }
.brand { font-size:24px; font-weight:700; letter-spacing:-.7px; }
nav { display:flex; align-items:center; gap:10px; }
.site-header nav a:not(.store-badge),.hero-pill { background:#ffffff1a; border:1px solid #ffffff24; border-radius:100px; padding:8px 15px; font-size:14px; }
.hero { text-align:center; padding:112px 24px 0; overflow:hidden; }
.hero-pill { display:inline-block; font-weight:600; margin-bottom:22px; }
h1 { font-size:clamp(64px,9vw,98px); line-height:1.08; font-weight:750; letter-spacing:-.045em; }
.hero-subtitle { font-size:clamp(22px,3vw,30px); font-weight:600; margin-top:14px; letter-spacing:-.025em; }
.hero-art { width:min(530px,85vw); margin:94px auto 0; height:540px; overflow:hidden; }
.hero-art img { display:block; width:100%; height:auto; transform:rotate(-7deg) scale(.96); transform-origin:50% 65%; filter:drop-shadow(0 15px 20px #0008); }
.app-store { display:inline-flex; align-items:center; gap:14px; padding:12px 24px; border:1px solid #fff; border-radius:14px; background:#000; margin-top:24px; }
.app-store svg { width:38px; height:42px; }
.app-store span { display:grid; text-align:left; }
.app-store small { font-size:15px; line-height:1.1; }
.app-store strong { font-size:32px; font-weight:500; line-height:1.1; letter-spacing:-.025em; }
.hero-description { color:var(--secondary); font-size:18px; line-height:1.5; width:min(790px,100%); margin:26px auto 0; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); text-align:center; gap:24px; padding:68px 0 0; }
.principles strong { font-size:clamp(26px,4vw,44px); letter-spacing:-.04em; line-height:1.15; }
.principles p { color:var(--secondary); margin-top:12px; font-size:16px; }
.features { display:grid; grid-template-columns:1fr 1fr; column-gap:84px; row-gap:68px; margin-top:120px; }
.feature-art { height:350px; overflow:hidden; display:flex; justify-content:center; align-items:flex-start; margin-bottom:22px; }
.feature-art img { width:310px; max-width:100%; height:auto; display:block; filter:drop-shadow(0 6px 9px #0006); }
.feature-art.compact { height:250px; }
.features h2 { font-size:22px; font-weight:650; letter-spacing:-.025em; margin-bottom:10px; }
.features p,.why p,.faq p { font-size:16px; line-height:1.55; color:var(--secondary); }
.live-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-top:130px; }
.live-copy h2,.why>h2,.faq>h2,.closing h2 { font-size:clamp(30px,4vw,42px); font-weight:650; letter-spacing:-.04em; line-height:1.15; }
.live-copy p { margin-top:22px; line-height:1.6; font-size:18px; }
.live-copy .muted { color:var(--secondary); font-size:16px; }
.app-preview { border-radius:24px; background:#000; padding:28px 26px 22px; min-height:510px; display:flex; flex-direction:column; align-items:center; }
.preview-header { text-align:center; font-family:ui-rounded,"SF Pro Rounded",-apple-system,sans-serif; }
.preview-header h3 { font-size:40px; font-weight:700; letter-spacing:-.04em; }
.preview-header p { color:#8e8e93; font-size:15px; font-weight:500; margin-top:4px; }
.day-grid { display:grid; grid-template-columns:repeat(var(--columns,16),minmax(0,1fr)); gap:var(--gap,4px); width:100%; margin-block:auto; padding-block:24px; }
.day-grid[data-period="month"] { max-width:300px; --gap:9px; }
.day-grid[data-period="week"] { --gap:9px; }
.day { width:100%; aspect-ratio:1; border-radius:50%; background:var(--empty); }
.day.passed { background:var(--filled); }
.day-grid[data-palette="forest"] { --filled:var(--forest); }
.day-grid[data-palette="sunset"] { --filled:var(--sunset); }
.day-grid[data-palette="monochrome"] { --filled:var(--mono); }
.preview-footer { font-family:ui-rounded,-apple-system,sans-serif; font-size:13px; font-weight:500; color:#8e8e93; text-align:center; }
.preview-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; flex-wrap:wrap; }
fieldset { margin:0; border:0; padding:0; display:flex; }
fieldset label { position:relative; cursor:pointer; }
fieldset input { position:absolute; opacity:0; width:100%; height:100%; margin:0; }
.periods { background:var(--surface); padding:3px; border-radius:10px; }
.periods span { display:block; padding:9px 14px; font-size:13px; font-weight:600; border-radius:8px; }
.periods input:checked+span { background:#414245; }
fieldset input:focus-visible+span { outline:3px solid #5ac8fa; outline-offset:3px; }
.palettes label { display:grid; width:34px; height:44px; place-items:center; }
.swatch { display:block; width:18px; height:18px; border-radius:50%; }
.blue { background:#007aff; }.green { background:var(--forest); }.orange { background:var(--sunset); }.mono { background:var(--mono); }
.palettes input:checked+span { outline:1px solid #fff; outline-offset:4px; }
.why { margin-top:120px; }
.why>p { max-width:720px; font-size:18px; margin-top:24px; }
.why-points { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:38px; }
.why-points h3 { font-size:20px; margin-bottom:10px; }
.faq { margin-top:110px; }
.faq>h2 { margin-bottom:30px; }
details { border-bottom:1px solid var(--separator); padding:20px 0; }
summary { cursor:pointer; font-weight:600; font-size:18px; }
details p { margin-top:16px; max-width:740px; }
details a { text-decoration:underline; }
.closing { text-align:center; margin-top:100px; padding-bottom:84px; }
.download-link { display:inline-block; margin-top:30px; border:1px solid #ffffff38; border-radius:100px; background:#ffffff14; padding:15px 24px; font-weight:600; }
.closing p { color:var(--secondary); font-size:14px; margin-top:18px; }
.site-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; border-top:1px solid var(--separator); color:var(--secondary); font-size:13px; padding-block:28px; }
.site-footer nav { flex-wrap:wrap; gap:18px; }
@media(max-width:760px) { .wrap { width:calc(100% - 48px); }.site-header { padding:14px 24px; }.brand { font-size:20px; }.site-header nav a:not(.store-badge) { padding:8px 12px; font-size:12px; }.hero { padding-top:110px; }.hero-art { margin-top:70px; height:440px; width:min(450px,85vw); }.features { gap:48px 32px; margin-top:84px; }.feature-art { height:280px; }.feature-art.compact { height:200px; }.live-section { gap:40px; }.live-section,.why-points { grid-template-columns:1fr; }.demo-area { width:min(420px,100%); margin-inline:auto; }.why-points { gap:28px; }.live-section,.why,.faq { margin-top:84px; } }
@media(max-width:480px) { .wrap { width:calc(100% - 40px); }.site-header { padding:14px 20px; }.brand { font-size:19px; }.site-header nav { gap:6px; }.hero-art { height:350px; width:330px; max-width:92vw; margin-top:58px; }.hero-description { font-size:16px; }.app-store { padding:10px 20px; }.app-store strong { font-size:28px; }.app-store small { font-size:13px; }.app-store svg { width:32px; height:36px; }.principles { gap:12px; padding-top:48px; }.principles strong { font-size:23px; }.principles p { font-size:12px; line-height:1.4; }.features { grid-template-columns:1fr; gap:44px; }.feature-art { height:330px; }.feature-art.compact { height:235px; }.features h2 { font-size:21px; }.app-preview { min-height:480px; padding-inline:22px; }.day-grid { --gap:3px; }.site-footer { padding-bottom:32px; }.closing { padding-bottom:60px; } }
@media(prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } a { transition:opacity .15s ease; } }

/* Leave room for the rotated top corners; only crop the lower phone edge. */
.hero-art { width:min(640px,92vw); padding:32px 55px 0; height:572px; }
.hero-art img { transform:rotate(-7deg) scale(.96); }
.site-header .store-badge { padding:0; border:0; background:none; border-radius:0; display:block; line-height:0; }
.store-badge img { display:block; width:auto; height:40px; }
.hero-store { display:inline-block; margin-top:24px; }
.hero-store img { height:70px; }
@media(max-width:760px) { .hero-art { width:min(540px,96vw); padding:28px 45px 0; height:468px; } }
@media(max-width:480px) { .hero-art { width:min(410px,calc(100vw - 24px)); padding:24px 30px 0; height:374px; }.site-header nav { gap:14px; }.site-header nav a:not(.store-badge) { padding:7px 9px; }.header-store img { height:40px; }.hero-store img { height:60px; } }