:root {
  
  color-scheme: light;

  --sky-zenith:   #5294e6;   
  --sky-mid:      #80b8ed;   
  --sky-horizon:  #c7e0f5;   

  --ink:          #4a3555;   
  --ink-soft:     #5c4a63;   
  --ink-hair:     #4a355526;
  
  --shadow-tint:  #261a33;   
  
  --page-shadow:  #261a33;
  --cream:        #fff8e7;   

  --rim-highlight: #fffffe;
  --rim-specular:  #fffff8;
  --shadow-base:   #5a647e;   
  --sss-glow:      #fffff4;

  --hero-glow: #82cbff;

  --angel-glow:    #d4a870;  
  --angel-shimmer: #e8d0a8;  

  --streak-star:  #ffd175;   
  --streak-light: #ffdb9e;   
  --streak-today: #ffd487;   

  --step: clamp(16px, 4.2vw, 22px);

  
  --page-max: 1100px;
  
  --hero-max: 870px;

  --topbar-h: calc(44px + clamp(12px, 2.2vh, 20px));
  
  --paper: 255 253 247;

  --type-cad: 0.6875rem;                                          
  --type-note: clamp(0.75rem, 0.7283rem + 0.1087vw, 0.8125rem);   
  --type-fine: clamp(0.8125rem, 0.7908rem + 0.1087vw, 0.875rem);  
  --type-ui: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);    
  --type-dense: 0.9375rem;                                        
  --type-body: 1rem;                                              
  --type-read: 1.0625rem;                                         
  --type-lead: clamp(1.0625rem, 4.2vw, 1.1875rem);  
  --type-title: clamp(1.1875rem, 4.6vw, 1.3125rem); 
  --type-say: clamp(1.3125rem, 5.2vw, 1.625rem);   
  --type-hero: clamp(1.75rem, 8.2vw, 2.375rem);     
  --type-h1: clamp(1.875rem, 7vw, 2.625rem);     
  --type-sub: clamp(1rem, 3.9vw, 1.125rem);        
  --type-under: clamp(0.9375rem, 3.8vw, 1.0625rem); 
  --type-door: clamp(1rem, 4.2vw, 1.0625rem);       
  --type-brand: clamp(0.9375rem, 3.8vw, 1.0625rem); 
  --type-title-fixed: 1.1875rem;                                   
  
  --type-hero-short: clamp(1.6875rem, 7.8vw, 2.125rem);           
  --type-hero-low: clamp(1.5rem, 3vw, 2.125rem);                  
  --type-hero-big: clamp(2rem, 2.9vw, 2.75rem);                   
  --type-say-quiet: clamp(0.9375rem, 1.2vw, 1.0625rem);           
  --type-under-quiet: clamp(0.75rem, 0.95vw, 0.84375rem);         

  --rh-tight: 3px;                       
  --rh-line: 10px;                       
  --rh-block: clamp(18px, 3vh, 34px);    
  --rh-door: clamp(16px, 3.4vh, 24px);   
  --rh-foot: clamp(18px, 4vh, 34px);     
  --rh-section: clamp(40px, 9vh, 72px);  
  
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  
  font: 400 var(--type-read)/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);

  background: linear-gradient(180deg, var(--sky-zenith) 0%, var(--sky-mid) 50%, var(--sky-horizon) 100%)
              no-repeat fixed;
  background-size: 100% 100lvh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sky-canvas {
  
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  
  background-color: color-mix(in srgb, var(--sky-horizon) 62%, #fff);

  height: calc(100lvh + 14vh);   
  display: block; z-index: 0; pointer-events: none;
  will-change: transform;
}

h1 { font-weight: 400; letter-spacing: -0.015em; text-wrap: balance; }
p  { text-wrap: pretty; }

:where(a, button):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
  box-shadow: 0 0 0 5px #fff8e7cc;
}

.legal {
  display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap;
  font-size: var(--type-fine);
}

.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ink-soft) 28%, transparent);
  text-underline-offset: 5px;
  padding: 6px 2px;                     
}
.legal a:hover { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--ink-soft) 60%, transparent); }

.footer-mark {
  font-size: var(--type-fine); letter-spacing: 0.5px;
  
  font-style: italic;
  color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .pane.rise {
    animation: pane-settle .95s cubic-bezier(.16, 1, .3, 1) both;
  }
  .rise { animation: rise .72s cubic-bezier(.2, .8, .3, 1) both; }
  .rise-2 { animation-delay: .14s; }
  .rise-3 { animation-delay: .26s; }
  @keyframes pane-settle {
    from { transform: translateY(18px) scale(.988); }
    to   { transform: none; }
  }
  @keyframes rise { from { opacity: 0; transform: translateY(9px); } }
  
  .page > footer.rise { animation: rise-quiet .8s cubic-bezier(.2, .8, .3, 1) both; animation-delay: .26s; }
  @keyframes rise-quiet { from { opacity: 0; transform: translateY(4px); } }
}

.cite code {
  font-size: var(--type-fine);
  line-height: 1.55;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.page { --pane-w: clamp(168px, 78vw, 380px); }

.page {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  
  padding: 0 var(--step);
}

.hero { display: flex; flex-direction: column; flex: none; }

.stage {
  
  flex: 1 1 auto;
  
  height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 3vh, 34px);
  
  padding: calc(var(--topbar-h) + max(var(--step), env(safe-area-inset-top))) 0 clamp(8px, 2vh, 24px);
}
.say { flex: none; }           

.pane {
  position: relative;
  
  flex: 0 1 auto;
  min-height: min(240px, 60vh);
  height: calc(var(--pane-w) * 2760 / 1350);
  width: auto;
  
  aspect-ratio: 1350 / 2760;

  --blur-k: 0.6;

  
  
  --obj-w: calc(393 * var(--u));
  isolation: isolate;
}

.pane-screen {
  position: absolute;
  left: 5.3333%; top: 2.5%;
  width: 89.3333%; height: 95%;
  overflow: hidden;
  border-radius: 18.08% / 8.31%;
  container-type: inline-size;
  --u: calc(var(--pane-w) * 0.893333 / 393);
  z-index: 0;
}

.pane-bezel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.pane-sky {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

.pane-sky, .pane-ui { transition: filter .42s ease; }
.pane.is-turning .pane-sky,
.pane.is-turning .pane-ui { filter: opacity(calc(1 - 0.72 * var(--day-dim, 0))); }

.widget, .app-icon {
  box-shadow:
    0 calc(var(--obj-w) * 0.04) calc(var(--obj-w) * 0.05)
      color-mix(in srgb, var(--shadow-base) 22%, transparent),
    0 0 calc(var(--obj-w) * 0.09)
      color-mix(in srgb, var(--sss-glow) 20%, transparent);
}

@container (min-width: 1px) {
  .pane-screen, .pane-ui, .pane-ui * { --u: calc(1cqw / 3.93); }
}

.pane-ui {
  position: absolute; inset: 0;
  z-index: 1;                      
  display: grid;
  grid-template-rows: 1fr auto 1fr auto;
  justify-items: center;
  padding: calc(59 * var(--u)) calc(24 * var(--u))
           calc(117 * var(--u));
  
}

.hero-block { display: grid; justify-items: center; align-content: start; }

.hero-num {
  position: relative;
  
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: calc(96 * var(--u));
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--cream);
  
  text-shadow:
    0 calc(1 * var(--u)) calc(2 * var(--u)) color-mix(in srgb, var(--shadow-tint) 40%, transparent),
    0 0 calc(8 * var(--u)) color-mix(in srgb, var(--hero-glow) 44%, transparent),
    0 0 calc(36 * var(--u)) color-mix(in srgb, var(--hero-glow) 24%, transparent);
}

.hero-block { position: relative; }
.hero-block::before {
  content: "";
  position: absolute; left: 50%; top: calc(48 * var(--u));
  width: calc(135 * 96 * var(--u) / 100); height: calc(86 * var(--u));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--shadow-tint) 10%, transparent);
  filter: blur(calc(40 * var(--u) * var(--blur-k)));
  pointer-events: none;
}

.hero-num::after {
  content: attr(data-n);
  position: absolute; inset: 0;
  color: var(--hero-glow);
  filter: blur(calc(28 * var(--u) * var(--blur-k)));
  opacity: .68;
  z-index: -1;
}
.hero-num::before {
  content: attr(data-n);
  position: absolute; inset: 0;
  color: var(--cream);
  filter: blur(calc(8 * var(--u) * var(--blur-k)));
  opacity: .44;
  z-index: -1;
  pointer-events: none;
}

.hero-emboss { position: absolute; left: 0; top: 0; pointer-events: none; }
.hero-num.is-embossed { color: transparent; }

.hero-second {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.2px;
  font-size: calc(12.5 * var(--u));
  color: color-mix(in srgb, var(--ink-soft) 72%, transparent);
  margin-top: calc(16 * var(--u));   
  text-shadow: 0 calc(0.5 * var(--u)) calc(2 * var(--u)) color-mix(in srgb, var(--shadow-tint) 25%, transparent);
}
.hero-second .u { font-size: calc(11 * var(--u)); opacity: .64; }
.hero-second .sep { opacity: .61; }

.streak { display: grid; justify-items: center; gap: calc(8 * var(--u)); width: 100%; }
.streak-row {
  display: flex; align-items: flex-end; justify-content: center;
  height: calc(130 * var(--u));      
}

.day {
  width: calc(44 * var(--u));        
  display: flex; flex-direction: column; align-items: center;
}
.day .stack {
  position: relative; width: 100%;
  height: calc(130 * var(--u));
  display: flex; align-items: flex-end; justify-content: center;
}
.pillar {
  position: relative;
  width: calc(var(--pw) * var(--u));
  height: calc(var(--ph) * var(--u));
  
  border-radius: calc(var(--pw) * var(--u) / 2)
                 calc(var(--pw) * var(--u) / 2)
                 calc(3 * var(--u)) calc(3 * var(--u));
  
  background: var(--warm);
  
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--warm) 70%, transparent) 0%,
      color-mix(in srgb, var(--cream) 66%, transparent) 32%,
      color-mix(in srgb, var(--warm) 72%, transparent) 64%,
      color-mix(in srgb, var(--warm) 36%, transparent) 86%,
      transparent 100%);
}

.pillar::before {
  content: "";
  position: absolute; left: 50%; bottom: 0;
  width: 112%; height: 101%;
  transform: translateX(-50%);
  border-radius: inherit;
  background: color-mix(in srgb, var(--warm) 28%, transparent);
  filter: blur(calc(4 * var(--u) * var(--blur-k)));
  z-index: -1;
}

.day.is-goal .pillar::after {
  content: "";
  position: absolute; left: 50%; bottom: 100%;
  
  width: 116%;
  height: calc(var(--ph) * 0.42 * var(--u));
  transform: translate(-50%, 42%);
  background: radial-gradient(50% 50% at 50% 50%, #fff4dbe0 0%, #ffeec9a8 45%, #ffe9bc00 100%);
  filter: blur(calc(6 * var(--u) * var(--blur-k)));
}

.day.is-goal .pillar {
  
  box-shadow: 0 0 calc(7 * var(--u)) calc(1.5 * var(--u)) #ffeecfa3,
              0 0 calc(3 * var(--u)) 0 #fff6e0cc,
              inset 0 calc(-5 * var(--u)) calc(11 * var(--u)) calc(1 * var(--u)) #fffdf2cf;
}

.day .n {
  position: absolute;
  bottom: calc((var(--ph) + 6) * var(--u));
  font-size: calc(11 * var(--u));
  color: color-mix(in srgb, var(--ink) 82%, transparent);
  text-shadow: 0 calc(0.5 * var(--u)) calc(2 * var(--u)) color-mix(in srgb, var(--shadow-tint) 25%, transparent);
  white-space: nowrap;
}
.day .w {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  font-size: calc(9 * var(--u));
  font-weight: 600; letter-spacing: 0.8px;
  color: color-mix(in srgb, var(--ink-soft) 60%, transparent);
  margin-top: calc(4 * var(--u));
}

.streak-count {
  font-size: calc(15 * var(--u));
  color: color-mix(in srgb, var(--ink-soft) 75%, transparent);
}

.pane-mark {
  font-size: calc(13 * var(--u));
  font-style: italic;
  letter-spacing: calc(0.5 * var(--u));
  color: color-mix(in srgb, var(--ink-soft) 55%, transparent);
  margin-top: calc(40 * var(--u));   
}

.say { display: grid; justify-items: stretch; gap: 0; text-align: center; max-width: 33ch; }
.say > * + * { margin-top: 10px; }
.say .eyebrow + h1 { margin-top: 3px; }
.say .door { margin-top: var(--rh-door); }

.app-icon {
  width: clamp(44px, 11vw, 54px);
  height: auto;
  display: block;
  flex: none;
  border-radius: 22.37%;
  corner-shape: squircle;
  --obj-w: clamp(36px, 9.4vw, 44px);   
}

.app-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: clamp(14px, 2.4vh, 20px);
  text-align: left;
}
.stage > .app-row { justify-content: center; }

.app-name {
  font-size: var(--type-lead);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}

.app-row .eyebrow {
  margin: 2px 0 0;
  font-size: var(--type-fine);
  line-height: 1.25;
  letter-spacing: 0.02em;
  
  color: var(--ink);
}

.sheet .app-row {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--ink-hair);
}

.say .eyebrow {
  font-size: var(--type-note);
  letter-spacing: 0.08em;
  color: var(--ink);                 
  margin-bottom: 2px;
}

.say h1 { text-wrap: pretty; }
.say h1 {
  
  font-size: var(--type-hero);
  font-weight: 500;              
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;            
}
.say .sub {
  color: var(--ink);
  font-size: var(--type-sub);
  line-height: 1.45;
  letter-spacing: -0.016em;      
  text-wrap: pretty;
}

.also {
  flex: none;
  display: grid; justify-items: center; gap: 10px;
  padding: clamp(56px, 12vh, 96px) 0 clamp(20px, 4vh, 34px);
  text-align: center;
}
.also-say {
  font-size: var(--type-say);
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ink);
}
.also-sub {
  font-size: var(--type-under);
  
  color: var(--ink);
  max-width: 26rem;
  text-wrap: pretty;
}
.widget {
  position: relative;
  width: clamp(156px, 44vw, 196px);
  aspect-ratio: 1;
  margin-top: clamp(14px, 3vh, 24px);
  --u: calc(clamp(156px, 44vw, 196px) / 170);   
  --blur-k: 0.6;                                
  border-radius: 22.35%;                        
  corner-shape: squircle;
  isolation: isolate;
  
  --obj-w: calc(170 * var(--u));   
}

.widget-sky {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  corner-shape: inherit;
  display: block;
  pointer-events: none;
}
.widget-ui {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: 1fr auto;
  justify-items: center; align-items: center;
  padding: 0 calc(12 * var(--u)) calc(12 * var(--u));   
}

.widget .hero-num { font-size: calc(52 * var(--u)); }
.widget .hero-num::after  { filter: blur(calc(11 * var(--u) * var(--blur-k))); opacity: .5; }
.widget .hero-num::before { filter: blur(calc(4 * var(--u) * var(--blur-k)));  opacity: .35; }
.widget .hero-block::before { content: none; }
.widget .hero-second { margin-top: calc(4 * var(--u)); }

.widget-mark {
  font-size: calc(9 * var(--u));
  font-style: italic;
  letter-spacing: calc(0.5 * var(--u));
  color: color-mix(in srgb, var(--ink-soft) 60%, transparent);
  text-shadow: 0 calc(0.5 * var(--u)) calc(0.6 * var(--u)) color-mix(in srgb, var(--cream) 50%, transparent);
}

.take {
  flex: none;
  display: grid; justify-items: center;
  padding: clamp(26px, 6vh, 54px) 0 clamp(6px, 1.5vh, 14px);
}
.take[hidden] { display: none; }        
.door-btn {
  font: inherit;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .18s cubic-bezier(.2, .8, .3, 1), opacity .18s ease;
}
.door-btn:active { transform: scale(.972); }      
.door-btn[disabled] { cursor: default; opacity: .72; }
.doc .also-note, .also-note {
  margin-top: 10px;
  font-size: var(--type-fine);
  
  color: var(--ink);
}

.page > footer {
  flex: none;
  display: grid; justify-items: center; gap: 12px;
  padding-top: var(--rh-foot);
  padding-bottom: max(var(--step), env(safe-area-inset-bottom));
}

.sitemap {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px 4px;
  width: 100%; max-width: 620px;
  margin-bottom: clamp(2px, 0.8vh, 8px);
}

.sitemap a {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 0 8px; border-radius: 10px;
  font-size: var(--type-ui); letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ink-soft) 28%, transparent);
  text-underline-offset: 4px;
  transition: background-color .16s ease;
}
.sitemap a:hover { text-decoration-color: color-mix(in srgb, var(--ink-soft) 60%, transparent); }
.sitemap a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.sitemap a:active { background: color-mix(in srgb, var(--ink) 11%, transparent); }
.sitemap a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .sitemap a { transition: none; } }

@media (max-width: 699px) {
  
  :root { --topbar-h: 60px; }

  .stage {
    height: 100svh;
    min-height: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 14px;
    
    padding-top: calc(var(--topbar-h) + 8px);
    
    padding-bottom: 24px;
  }

  .say .sub { display: none; }         
  .say h1 { margin-top: 6px; }
  .say .door { margin-top: 14px; }
  
  .say  { order: 1; flex: none; margin-top: 6px; }
  .pane { order: 2; }

  .pane {
    
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    width: auto;
    max-width: 92vw;                   
    max-height: none;
  }

  .also { padding-top: clamp(30px, 7vh, 60px); }
}

@media (max-height: 480px) and (max-width: 699px) {
  .stage { height: auto; min-height: 0; }
  .pane { flex: none; width: min(92vw, 62svh); max-width: none; }
}

@media (max-width: 699px) and (max-height: 700px) {
  .say h1 { --type-hero: var(--type-hero-short); }   
  .app-icon { width: clamp(32px, 8.4vw, 38px); }
  .say .door { margin-top: clamp(8px, 1.6vh, 14px); min-height: 42px; }
  .say h1 { margin-top: 4px; }
  .app-row { margin-bottom: 0; }
  .say { margin-top: clamp(2px, 0.5vh, 5px); }
  
}

@media (min-width: 700px) and (max-height: 620px) {
  .stage {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;             
    
    padding-block: calc(var(--topbar-h) + clamp(4px, 1vh, 12px)) clamp(8px, 2vh, 20px);
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 4vw, 56px);
  }
  .also { display: none; }     

  .pane { flex: 0 1 auto; height: calc(100dvh - var(--topbar-h) - 28px); min-height: 0; }
  .say { text-align: left; max-width: 30rem; }
  .say h1 { --type-hero: var(--type-hero-low); }
  .say .sub { font-size: var(--type-body); }
  .say .door { margin-top: 12px; }
  .page > footer { display: none; }   
}

@media (min-width: 900px) and (min-height: 620px) {
  
  .page { --pane-w: min(30vw, 400px); }

  .hero {
    flex: 1 1 auto;
    min-height: 0;
    height: 100svh;
    display: grid;
    
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    max-width: var(--hero-max);
    margin-inline: auto;
    width: 100%;
    gap: clamp(18px, 2.4vh, 30px) clamp(28px, 3.6vw, 64px);
    
    --hero-pad: clamp(18px, 4.5vh, 44px);
    
    padding: calc(var(--topbar-h) + var(--hero-pad)) 0 var(--hero-pad);
  }
  .stage { display: contents; }

  
  .hero { grid-template-rows: 1fr min-content min-content 1fr; }
  .pane { grid-column: 1; grid-row: 1 / -1; }    
  .say  { grid-column: 2; grid-row: 2; }
  .also { grid-column: 2; grid-row: 3; }
  .also { margin-top: clamp(14px, 2vh, 22px); }

  .also {
    padding: 0;
    
    width: max-content;
    max-width: 100%;
    grid-auto-flow: column;
    grid-template-columns: auto minmax(0, 15rem);
    align-items: center;
    justify-items: start;
    gap: 14px;
    text-align: left;
  }
  .also-say { --type-say: var(--type-say-quiet); font-weight: 600; max-width: 13.5rem; }
  .take { padding-top: clamp(20px, 4vh, 40px); }
  
  .also-sub { display: none; }
  
  .widget {
    width: clamp(140px, 12vw, 168px);
    --u: calc(clamp(140px, 12vw, 168px) / 170);
    margin-top: 0;
    grid-row: 1 / 3;                              
  }
  .also-say { grid-column: 2; align-self: end; }
  .also-sub {
    display: block;                               
    grid-column: 2; align-self: start;
    --type-under: var(--type-under-quiet);
    max-width: 15rem;
    
    color: var(--ink);
  }
  .also-note { font-size: var(--type-note); }
  
  .pane {
    flex: 0 1 auto; min-height: 0;
    height: calc(var(--pane-w) * 2760 / 1350);
    
    max-height: calc(100svh - var(--topbar-h) - 2 * var(--hero-pad));
  }

  .say { text-align: left; max-width: 26rem; }
  
  .say h1 { --type-hero: var(--type-hero-big); }
  .say .sub { font-size: var(--type-title-fixed); }
  
  .say .door { margin-top: var(--rh-door); margin-inline: 0; }
  
  .page > footer {
    justify-content: center;
    gap: 14px;
    padding-top: clamp(12px, 1.8vh, 18px);
  }
}

.tabbar {
  position: absolute; left: 50%; bottom: calc(38 * var(--u));
  transform: translateX(-50%);
  display: flex; align-items: center;
  gap: calc(6 * var(--u));
  padding: calc(5 * var(--u));
  border-radius: 999px;
  background: #fffdf9d1;
  -webkit-backdrop-filter: blur(calc(12 * var(--u))) saturate(1.6);
  backdrop-filter: blur(calc(12 * var(--u))) saturate(1.6);
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) color-mix(in srgb, var(--shadow-tint) 8%, transparent);
}
.tab {
  display: flex; flex-direction: column; align-items: center;
  gap: calc(2 * var(--u));
  width: calc(78 * var(--u));
  padding: calc(5 * var(--u)) 0;
  border-radius: 999px;
  color: var(--ink);
}
.tab.is-on { background: #ffffff96; color: #007aff; }   
.tab svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); display: block; }
.tab svg circle { fill: currentColor; }
.tab svg path { stroke: currentColor; stroke-width: 2; fill: none; }
.tab i { font-style: normal; font-size: calc(17 * var(--u)); line-height: calc(20 * var(--u)); }
.tab b { font-size: calc(10 * var(--u)); font-weight: 500; letter-spacing: .1px; }

.doc {
  position: relative; z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(20px, 6vh, 64px) var(--step) clamp(40px, 8vh, 96px);
}

.sheet {
  background: rgb(var(--paper) / .95);
  border: 1px solid #ffffffcc;
  border-radius: 28px;                                  
  padding: clamp(24px, 6vw, 52px) clamp(20px, 5vw, 48px);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--page-shadow) 14%, transparent),
              0 2px 6px color-mix(in srgb, var(--page-shadow) 8%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
}

.doc h1 { font-size: var(--type-h1); font-weight: 500; line-height: 1.08; text-wrap: balance;
          letter-spacing: -0.022em; margin-bottom: 6px; }
.doc .stamp { font-size: var(--type-fine); letter-spacing: -0.006em; color: var(--ink-soft); }
.doc .lede { margin-top: 22px; font-size: var(--type-lead); line-height: 1.52; letter-spacing: -0.017em; }
.doc h2 {
  font-size: var(--type-title); font-weight: 600; line-height: 1.28;
  margin: 38px 0 10px; letter-spacing: -0.021em;
}
.doc h3 { font-size: var(--type-body); font-weight: 600; margin: 22px 0 6px; letter-spacing: -0.016em; }

.doc p, .doc li { font-size: var(--type-body); line-height: 1.62; letter-spacing: -0.016em; color: var(--ink-soft);
  
  text-wrap: pretty; }
.doc p + p { margin-top: 12px; }
.doc ul { margin: 10px 0 0; padding-left: 1.15em; }

.doc ol { margin: 10px 0 0; padding-left: 1.35em; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: color-mix(in srgb, var(--ink-soft) 45%, transparent); }
.doc strong { color: var(--ink); font-weight: 600; }

.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
         text-decoration-skip-ink: none;
         text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.doc a:hover { text-decoration-color: var(--ink); }

.doc a.door,
.doc a.app-row,
.doc a.brand { text-decoration: none; }

.doc hr { border: 0; height: 1px; background: var(--ink-hair); margin: 34px 0; }

.tbl-wrap {
  margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ink-hair); border-radius: 16px;
  
  background:
    linear-gradient(to right, rgb(var(--paper)) 30%, rgb(var(--paper) / 0)),
    linear-gradient(to right, rgb(var(--paper) / 0), rgb(var(--paper)) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--page-shadow) 42%, transparent), transparent),
    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--page-shadow) 42%, transparent), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 26px 100%, 26px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tbl-wrap:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
table.tbl { border-collapse: collapse; width: 100%; }
.tbl caption { text-align: left; font-size: var(--type-fine); color: var(--ink-soft);
               padding: 12px 14px 0; letter-spacing: -0.006em; }
.tbl th, .tbl td { padding: 10px 12px; text-align: right; font-size: var(--type-dense); line-height: 1.4;
  letter-spacing: -0.014em; border-bottom: 1px solid var(--ink-hair);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

.tbl thead th:first-child { text-align: left; }
.tbl thead th { font-size: var(--type-note); font-weight: 600; color: var(--ink-soft);
  text-transform: lowercase; letter-spacing: 0.004em; white-space: normal; }
.tbl .cad { display: block; font-weight: 400; font-size: var(--type-cad); }

.tbl th[scope="row"] {
  text-align: left; color: var(--ink); font-weight: 600; white-space: normal;
  position: sticky; left: 0; z-index: 1;
  background: rgb(var(--paper));
}

.tbl-nowrap th[scope="row"] { white-space: nowrap; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td { color: var(--ink-soft); }
.tbl .lead { color: var(--ink); font-weight: 600; }

.doc .stamp-note { margin-top: 10px; font-size: var(--type-fine); color: var(--ink-soft); }

    .calc { margin-top: 22px; }
  .calc-line { margin-top: 18px; }
  .calc-label {
      display: block; font-size: var(--type-fine); font-weight: 600; color: var(--ink);
      letter-spacing: -0.008em; margin-bottom: 8px;
    }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
      font: inherit; font-size: var(--type-dense); font-variant-numeric: tabular-nums;
      color: var(--ink); background: transparent;
      border: 1px solid var(--ink-hair); border-radius: 999px;
      padding: 8px 15px; min-height: 40px; cursor: pointer;
      transition: border-color .16s ease, background-color .16s ease;
    }
  .chip:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
  .chip[aria-pressed="true"] {
      border-color: var(--ink);
      background: color-mix(in srgb, var(--ink) 7%, transparent);
    }
  .chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .num {
      font: inherit; font-size: var(--type-body); font-variant-numeric: tabular-nums; color: var(--ink);
      background: transparent; border: 1px solid var(--ink-hair); border-radius: 12px;
      padding: 9px 12px; width: 8.5em; min-height: 40px;
    }
  .num:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .range { width: 100%; max-width: 340px; accent-color: var(--ink); min-height: 40px; }
  .range:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  
  .calc .readout{ font-size: var(--type-ui); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  
    .result { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ink-hair); }
  .result .result-dist {
      font-size: var(--type-hero); font-weight: 500; color: var(--ink);
      letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
    }
  
    .result .result-alt { margin-top: 4px; font-size: var(--type-dense); color: var(--ink-soft);
                  font-variant-numeric: tabular-nums; letter-spacing: -0.012em; }
  .result-times { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; }
  .result-times div { font-size: var(--type-dense); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .result-times b { color: var(--ink); font-weight: 600; }
  @media (prefers-reduced-motion: reduce) { .chip { transition: none; }
  }

.doc { padding-bottom: clamp(84px, 12vh, 120px); }
@media (min-width: 1180px) { .doc { padding-bottom: clamp(40px, 8vh, 96px); } }

.doc-foot {
  display: flex; flex-wrap: wrap; gap: 2px 8px; justify-content: center;
  margin-top: 34px; font-size: var(--type-ui);
}

.doc-foot a {
  
  display: inline-block; padding: 12px 8px;
  color: var(--ink); text-decoration: none;
  
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-hair);
  text-underline-offset: 4px;
}
.doc-foot a:hover { text-decoration-color: var(--ink); }

.glint {
  position: absolute; left: 50%; top: calc(100% + 34 * var(--u));
  width: calc(9 * var(--u)); height: calc(9 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle,
      #fff7e0 0%, #fff7e0d9 22%, #ffde9e8c 46%, #ffde9e00 72%);
  filter: blur(calc(1.6 * var(--u)));
  pointer-events: none;
  transform: translate(-50%, calc(var(--drift, 40) * var(--u)));
  animation: glint-rise var(--drift-ms, 1100ms) cubic-bezier(.22, 1, .36, 1) forwards,
             glint-breath 1667ms ease-in-out 1100ms infinite alternate;
}
@keyframes glint-rise { to { transform: translate(-50%, 0); } }
@keyframes glint-breath { from { opacity: .82; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  
  .glint { animation: none; transform: translate(-50%, 0); }
}

.door {
  
  text-decoration: none;
  position: relative;
  
  width: fit-content;
  margin-inline: auto;
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 46px;
  padding: 0 clamp(20px, 5vw, 28px);
  border-radius: 999px;
  
  font-size: var(--type-door);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  
  background: linear-gradient(180deg, #fffefacc 0%, #fff8e7a3 58%, #fff8e78f 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-base) 12%, transparent),
              0 6px 18px color-mix(in srgb, var(--shadow-base) 14%, transparent),
              0 0 22px color-mix(in srgb, var(--sss-glow) 30%, transparent);
  cursor: default;
}

.doc-door {
  margin: clamp(30px, 6vh, 44px) 0 4px;
  text-align: center;
}

.topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  
  padding: clamp(12px, 2.2vh, 20px) 0 0;
  max-width: var(--page-max); margin-inline: auto; width: 100%;
  min-height: var(--topbar-h);
}

.topbar { --bar-pad: var(--step); padding-inline: var(--bar-pad); }
.page > .topbar { --bar-pad: 0px; }

body[data-page="home"] .topbar { position: absolute; top: 0; left: 0; right: 0;
  --bar-pad: var(--step); }

body[data-page="home"] .topbar > * { max-width: none; }
@media (min-width: 900px) {
  body[data-page="home"] .topbar { max-width: calc(var(--hero-max) + 2 * var(--step)); }
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px;                       
  color: var(--ink); text-decoration: none;
  border-radius: 12px;
}
.brand .app-icon { width: clamp(28px, 7vw, 32px); }
.brand-name {
  font-size: var(--type-brand); font-weight: 600; letter-spacing: -0.014em;
}
.brand:hover .brand-name { text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.brand:active { transform: scale(.98); }
.brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.topnav { display: flex; align-items: center; gap: 12px; }

.topnav a, .brand-name, .nav-toggle { white-space: nowrap; }
.brand, .nav-toggle { flex: 0 0 auto; }

.topbar .topnav { order: 2; }
.topbar .nav-toggle { order: 3; }

.nav-toggle {
  display: none;
  align-items: center; gap: .4em;
  min-height: 44px; padding: 0 4px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--type-ui); letter-spacing: -0.01em;
  color: var(--ink);
}

.nav-toggle::after {
  content: ""; width: .5em; height: .5em; margin-top: -.18em;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
.topbar[data-nav] .nav-toggle { display: inline-flex; }
.topbar[data-nav="open"] .nav-toggle::after { transform: rotate(-135deg); margin-top: .12em; }
.nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }

.topbar[data-nav] .topnav { display: none; }
.topbar[data-nav="open"] .topnav {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  position: absolute; top: 100%; right: var(--bar-pad); z-index: 6;
  min-width: 12rem;
  padding: 6px;
  border-radius: 18px;
  background: rgb(var(--paper) / .96);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-base) 12%, transparent),
              0 12px 34px color-mix(in srgb, var(--shadow-base) 16%, transparent);
  animation: nav-in .18s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .topbar[data-nav="open"] .topnav { animation: none; } }

.topbar[data-nav="open"] .topnav .nav-wide { display: inline-flex; }
.topbar[data-nav="open"] .topnav a {
  justify-content: flex-start;
  padding: 0 12px; border-radius: 12px;
  font-size: var(--type-body);
}
.topbar[data-nav="open"] .topnav a[aria-current="page"] { text-decoration: none; background: color-mix(in srgb, var(--ink) 7%, transparent); }

.topnav .nav-wide { display: none; }

.topnav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--type-ui); letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}

.topnav a[aria-current="page"] {
  text-decoration: underline; text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--ink) 55%, transparent);
}
@media (min-width: 700px) {
  
  .topbar[data-nav] .nav-toggle { display: none; }
  .topbar[data-nav] .topnav, .topbar[data-nav="open"] .topnav {
    display: flex; flex-direction: row; align-items: center; position: static;
    padding: 0; background: none; box-shadow: none; backdrop-filter: none;
    -webkit-backdrop-filter: none; animation: none; min-width: 0;
  }
  .topbar[data-nav="open"] .topnav a { padding: 0; border-radius: 0; font-size: var(--type-dense); background: none; }
  .topnav { gap: clamp(14px, 2vw, 28px); }
  .topnav a { font-size: var(--type-dense); }
  .topnav .nav-wide { display: inline-flex; }
  .topnav a:hover { text-decoration: underline; text-underline-offset: 5px;
    text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); }
  .topnav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
}

a.app-row {
  display: flex;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  
  margin: -6px -8px;
  padding: 6px 8px;
  transition: background-color .18s ease;
}
a.app-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
a.app-row:hover .app-name { text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--ink) 32%, transparent); }
a.app-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.doc-rail {
  margin: clamp(26px, 5vh, 40px) auto 0;
  max-width: 460px;
  padding: clamp(20px, 4vw, 26px);
  border-radius: 22px;
  text-align: center;
  
  background: rgb(var(--paper) / .88);
  border: 1px solid #ffffffb8;
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--page-shadow) 10%, transparent);
}
.doc-rail .rail-line {
  font-size: var(--type-lead);
  font-weight: 500;
  letter-spacing: -0.017em;
  line-height: 1.3;
  color: var(--ink);
}
.doc-rail .rail-sub {
  margin-top: 8px;
  font-size: var(--type-ui);
  line-height: 1.5;
  color: var(--ink);
}

.doc-rail .rail-widget {
  width: 180px;
  margin: 0 0 18px;
  --u: calc(180px / 170);
  box-shadow:
    0 calc(var(--obj-w) * 0.05) calc(var(--obj-w) * 0.07)
      color-mix(in srgb, var(--shadow-base) 34%, transparent),
    0 calc(var(--obj-w) * 0.012) calc(var(--obj-w) * 0.02)
      color-mix(in srgb, var(--shadow-base) 22%, transparent),
    0 0 calc(var(--obj-w) * 0.09)
      color-mix(in srgb, var(--sss-glow) 20%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--rim-highlight) 55%, transparent);
}
.doc-rail .rail-line { margin-top: 0; }
.doc-rail .doc-door { margin: 18px 0 0; }

.doc-cta {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 6;
  display: flex; justify-content: center;
  padding: 8px var(--step) max(10px, env(safe-area-inset-bottom));
  
  pointer-events: none;                       
}
.doc-cta > * { pointer-events: auto; }

.doc-cta .door {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--cream) 97%, transparent),
      color-mix(in srgb, var(--cream) 92%, transparent));
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--shadow-base) 18%, transparent),
    0 10px 26px color-mix(in srgb, var(--page-shadow) 16%, transparent),
    0 0 22px color-mix(in srgb, var(--sss-glow) 26%, transparent);
}
@media (min-width: 1180px) { .doc-cta { display: none; } }   

@supports (animation-timeline: scroll()) {
  .doc-cta {
    opacity: 0;
    transform: translateY(14px);
    animation: cta-in linear both;
    animation-timeline: scroll(root block);
    
    animation-range: 8% 16%;
  }
}
@keyframes cta-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: scroll()) {
    
    .doc-cta { animation-name: cta-fade; }
  }
}
@keyframes cta-fade { from { opacity: 0; } to { opacity: 1; } }

.doc-rail .also-note { color: var(--ink); }

@media (min-width: 1180px) {
  
  .doc:has(.doc-rail) {
    
    max-width: var(--page-max);
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 720px) 1fr;
    column-gap: clamp(28px, 3vw, 56px);
    align-items: start;
  }
  
  .doc > * { grid-column: 1; }
  .doc > .doc-rail {
    grid-column: 2;
    justify-self: end;          
    width: 320px;
    grid-row: 1 / span 20;
    position: sticky;
    
    top: clamp(20px, 6vh, 64px);
    margin: 0;
    max-width: none;
    text-align: left;
  }
  .doc > .doc-rail .doc-door { text-align: left; }
  .doc > .doc-rail .door { margin-inline: 0; }
}

.door[href] { cursor: pointer; }
.doc-door .also-note { margin-top: 12px; }

.door::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--rim-highlight) 92%, transparent) 0%,
      color-mix(in srgb, var(--rim-specular) 42%, transparent) 38%,
      color-mix(in srgb, var(--rim-specular) 26%, transparent) 66%,
      color-mix(in srgb, var(--rim-highlight) 58%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

.door .mark { font-size: 1.02em; line-height: 1; color: var(--ink); }

.legal .spec { color: var(--ink); }

.glyph,
.door .mark,
.tab i,
.legal a > span[aria-hidden],
.doc-foot a > span[aria-hidden] {
  font-family: "Apple Symbols", "Segoe UI Symbol", sans-serif;
}

.door-link {
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.door-link:hover {
  background: #fffefad1;
  box-shadow: inset 0 1px 0 0 #ffffff, inset 0 0 0 1px #fff8e7a8,
              0 4px 16px color-mix(in srgb, var(--shadow-base) 14%, transparent);
}
.door-link:active { transform: translateY(1px); }
.door-row { margin-top: var(--rh-door); }

.lost-code {
  margin-top: 14px;
  font-size: var(--type-fine);
  line-height: 1.5;
  
  color: var(--ink);
}