:root {
  
  color-scheme: light;

  --sky-zenith:   #94a6d9;   
  --sky-mid:      #b2a6c2;   
  --sky-horizon:  #c7b2c2;   

  --ink:          #4a3555;   
  --ink-soft:     #5c4a63;   
  --ink-hair:     #4a355526;
  
  --blur-k: 0.6;
  
  --hero-ink: #6a5c7a;
  
  --shadow-tint:  #594f5c;
  
  --page-shadow:  #261a33;
  --cream:        #fff8e7;   

  
  --rim-highlight: #fffcf9;
  --rim-specular:  #fcead7;
  --shadow-base:   #736377;   
  --sss-glow:      #e7cba1;

  --hero-glow: #ccbce0;   

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

  
  --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; }

.skip {
  position: absolute; left: 50%; top: var(--topbar-h); transform: translate(-50%, calc(-100% - var(--topbar-h)));
  z-index: 60; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 16px; border-radius: 12px;   
  background: var(--ink); color: rgb(var(--paper));
  font: inherit; font-size: var(--type-ui); text-decoration: none;
  transition: transform .18s ease;
}

.skip:focus { transform: translate(-50%, 0); outline: 2px solid rgb(var(--paper)); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }

main:focus { outline: none; }

: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) * 3000 / 1470);
  width: auto;
  
  aspect-ratio: 1470 / 3000;

  

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

.pane-screen {
  position: absolute;
  left: 5.102%; top: 2.2%;      
  width: 89.796%; height: 95.6%;  
  overflow: hidden;
  border-radius: 15.08% / 6.94%;   
  container-type: inline-size;
  --u: calc(var(--pane-w) * 0.89796 / 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; position: relative; }

.hero-num {
  position: relative;
  
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-weight: 400;
  
  font-variant-numeric: tabular-nums lining-nums;
  font-size: calc(96 * var(--u));
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--hero-ink);
  
  text-shadow:
    0 0 calc(4 * var(--u))  color-mix(in srgb, var(--hero-glow) 55%, transparent),
    0 0 calc(18 * var(--u)) color-mix(in srgb, var(--hero-glow) 30%, transparent);
  
  --hero-drop: drop-shadow(0 0 calc(4 * var(--u)) color-mix(in srgb, var(--hero-glow) 55%, transparent)) drop-shadow(0 0 calc(18 * var(--u)) color-mix(in srgb, var(--hero-glow) 30%, transparent));
}

body:lang(ja),
body:lang(ko),
body:lang(ja) .hub-table tbody th a,
body:lang(ko) .hub-table tbody th a {
  font-family: sans-serif;
}

body:lang(ja) .hub-table tbody th,
body:lang(ko) .hub-table tbody th { padding-top: 0; padding-bottom: 0; }
body:lang(ja) .hub-table tbody th a,
body:lang(ko) .hub-table tbody th a {
  display: inline-flex; align-items: center;
  min-width: 44px; min-height: 44px;
}

.doc > h1.hero-num {
  --u: calc(clamp(300px, 78vw, 460px) / 393);
  font-size: calc(112 * var(--u));
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: calc(14 * var(--u));
}

.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: .85;
  z-index: -1;
  pointer-events: none;
}

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

.hero-emboss { position: absolute; left: 0; top: 0; pointer-events: none; }

.hero-num.is-embossed.is-embossed { text-shadow: none; }
.hero-num.is-embossed.is-embossed .hero-emboss { filter: var(--hero-drop, none); }
.hero-num.is-embossed { color: transparent; }

.is-angel .hero-num::after { color: color-mix(in srgb, var(--hero-glow) 55%, var(--angel-glow)); }

.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);   
  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));
  text-shadow:
    0 0 calc(6 * var(--u))  color-mix(in srgb, #8a7d90 40%, transparent),
    0 0 calc(16 * var(--u)) color-mix(in srgb, #8a7d90 15%, transparent),
    0 calc(1 * var(--u)) calc(1 * var(--u)) color-mix(in srgb, #261a33 45%, transparent);
  
  --hero-drop: drop-shadow(0 0 calc(6 * var(--u)) color-mix(in srgb, #8a7d90 40%, transparent)) drop-shadow(0 0 calc(16 * var(--u)) color-mix(in srgb, #8a7d90 15%, transparent)) drop-shadow(0 calc(1 * var(--u)) calc(1 * var(--u)) color-mix(in srgb, #261a33 45%, transparent));
}

.widget .hero-num::after  {
  color: var(--hero-ink);
  filter: blur(calc(10 * var(--u) * var(--blur-k)));
  opacity: .2;
}

.widget .hero-num::before { content: none; }

.is-angel.widget .hero-num,
.widget.is-angel .hero-num {
  text-shadow:
    0 0 calc(6 * var(--u))  color-mix(in srgb, #ffd973 40%, transparent),
    0 0 calc(16 * var(--u)) color-mix(in srgb, #ffd973 15%, transparent),
    0 calc(1 * var(--u)) calc(1 * var(--u)) color-mix(in srgb, #261a33 45%, transparent);
  
  --hero-drop: drop-shadow(0 0 calc(6 * var(--u)) color-mix(in srgb, #ffd973 40%, transparent)) drop-shadow(0 0 calc(16 * var(--u)) color-mix(in srgb, #ffd973 15%, transparent)) drop-shadow(0 calc(1 * var(--u)) calc(1 * var(--u)) color-mix(in srgb, #261a33 45%, transparent));
}
.widget.is-angel .hero-num::after {
  filter: blur(calc(12 * var(--u) * var(--blur-k)));
  opacity: .6;
}

.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: 44px; min-width: 44px;
  justify-content: center;
  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);
  }
}

.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; }

.tbl td.lead a { display: block; padding: 13px 12px; margin: -10px -12px; }

.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); }
  
  @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); }

.mail-line a { display: inline-block; padding: 13px 2px; }

@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;
}

.door-badge {
  display: inline-flex;
  padding: 6px;
  border-radius: 14px;
  text-decoration: none;
  
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.door-badge:active { transform: scale(.972); }
.door-badge img { display: block; height: 48px; width: auto; }

.door:has(.door-badge) {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 0;
  min-height: 0;
}

.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: 47em) {
  
  html:not([lang^="ja"]):not([lang^="ko"]) .topbar[data-nav] .nav-toggle { display: none; }
  html:not([lang^="ja"]):not([lang^="ko"]) .topbar[data-nav] .topnav,
  html:not([lang^="ja"]):not([lang^="ko"]) .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;
  }
  html:not([lang^="ja"]):not([lang^="ko"]) .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; }
}

@media (min-width: 84em) {
  html[lang^="ko"] .topbar[data-nav] .nav-toggle { display: none; }
  html[lang^="ko"] .topbar[data-nav] .topnav,
  html[lang^="ko"] .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;
  }
  html[lang^="ko"] .topbar[data-nav="open"] .topnav a {
    padding: 0; border-radius: 0; font-size: var(--type-dense); background: none; }
}

@media (min-width: 120em) {
  html[lang^="ja"] .topbar[data-nav] .nav-toggle { display: none; }
  html[lang^="ja"] .topbar[data-nav] .topnav,
  html[lang^="ja"] .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;
  }
  html[lang^="ja"] .topbar[data-nav="open"] .topnav a {
    padding: 0; border-radius: 0; font-size: var(--type-dense); background: none; }
}

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,
.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 { position: relative; z-index: 1; min-height: 100svh; display: grid; place-items: center;
        padding: var(--step); }
.lost .sheet { max-width: 30rem; text-align: center; }
.lost h1 { font-size: var(--type-hero); font-weight: 500; letter-spacing: -0.022em;
           line-height: 1.08; }
.lost p { font-size: var(--type-body); line-height: 1.62; color: var(--ink-soft);
          margin-top: 12px; }

.lost .guess { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
               font-size: var(--type-fine); }

.lost .sitemap { margin-top: 20px; }

.stamp-far { margin-top: 26px; }

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

.pane-whisper { font-size: calc(15 * var(--u));
                color: color-mix(in srgb, var(--ink-soft) 78%, transparent);
                margin-top: calc(6 * var(--u)); }

.widget-whisper { font-size: calc(11 * var(--u));
                  color: color-mix(in srgb, var(--ink-soft) 78%, transparent); }

.spark { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em;
         flex: 0 0 auto; }
.pane-mark, .widget-mark, .og-mark { display: inline-flex; align-items: center; gap: .35em; }
.door .spark { width: .9em; height: .9em; }

.daily-pill {
  display: inline-flex; align-items: baseline; gap: calc(6 * var(--u));
  padding: calc(9 * var(--u)) calc(18 * var(--u)); border-radius: 999px;
  font-size: calc(13 * var(--u));
  color: color-mix(in srgb, var(--ink) 88%, transparent);
  background: color-mix(in srgb, var(--rim-highlight) 62%, transparent);
  box-shadow: inset 0 calc(0.5 * var(--u)) 0 color-mix(in srgb, var(--rim-specular) 90%, transparent),
              0 calc(2 * var(--u)) calc(6 * var(--u)) color-mix(in srgb, var(--shadow-base) 18%, transparent);
  -webkit-backdrop-filter: blur(calc(8 * var(--u)));
  backdrop-filter: blur(calc(8 * var(--u)));
}
.daily-pill b { font-size: calc(20 * var(--u)); font-weight: 600;
                font-variant-numeric: tabular-nums; }

.pane-frame {
  display: block;                 
  padding: 0;
}

.sf-back {
  position: absolute; left: calc(20 * var(--u)); top: calc(62 * var(--u));
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  border-radius: 999px;
  display: grid; place-items: center;
  background: #ffffffcc;
  box-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u))
              color-mix(in srgb, var(--shadow-base) 16%, transparent);
}
.sf-back svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.sf-back svg .ln { fill: none; stroke: var(--hero-ink); stroke-width: 2; }

.pane-frame .hero-num { font-size: calc(96 * 1.28 * var(--u)); }

.sf-block {
  position: absolute; left: 0; right: 0;
  top: calc(246 * var(--u));
  display: grid; justify-items: center;
  padding: 0 calc(24 * var(--u));
  text-align: center;
}

.sf-word.sf-word {
  
  position: relative;
  margin-top: calc(16 * var(--u));
  font-size: calc(33 * var(--u));
  font-style: italic;
  line-height: 1.12;
  
  color: var(--hero-ink-lg, var(--hero-ink));
  
}
.sf-word.is-embossed { color: transparent; }

.sf-line.sf-line {
  margin-top: calc(12 * var(--u));
  font-size: calc(20 * var(--u));
  font-style: italic;
  line-height: 1.28;
  max-width: calc(300 * var(--u));

  color: var(--hero-ink-sm, var(--hero-ink));
  text-shadow:
    0 0 calc(1 * var(--u)) color-mix(in srgb, var(--shadow-tint) 30%, transparent),
    0 calc(0.5 * var(--u)) calc(2 * var(--u))
      color-mix(in srgb, var(--shadow-tint) 20%, transparent);
}

.sf-block .pane-mark { margin-top: calc(22 * var(--u)); }

.sf-sheet {
  
  position: absolute;
  left: calc(23.5 * var(--u) - 4 * var(--u) / 3.07);
  bottom: calc(1.6 * var(--u));
  width: calc((346.1 + 8 / 3.07) * var(--u));
  height: auto;
  display: block;
  pointer-events: none;
}

.calc {
  margin-top: clamp(20px, 3vh, 28px);
  padding-top: clamp(16px, 2vh, 20px);
  border-top: 1px solid var(--ink-hair);
}

.calc-fields { border: 0; padding: 0; margin: clamp(20px, 3vh, 28px) 0 0; min-inline-size: 0; }
.calc .calc-label {
  display: block;
  padding: 0;
  font-size: var(--type-note);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.calc-selects { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.calc-pick { display: grid; gap: 4px; }
.calc-pick > span { font-size: var(--type-fine); color: var(--ink-soft); }
.calc-pick select {
  
  min-height: 46px;
  padding: 0 12px;
  font: inherit;
  font-size: var(--type-body);
  color: var(--ink);
  background: #fffefacc;
  border: 1px solid #ffffffd0;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 0 #ffffff,
              0 2px 8px color-mix(in srgb, var(--page-shadow) 10%, transparent);
}
.calc-pick select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.calc[data-wheel="on"] .calc-selects {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.calc[data-wheel="on"]:has(.calc-selects select:focus-visible) .wheel {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.wheel {
  --wheel-h: 190px;                 
  --wheel-row: 40px;                
  --wheel-r: 126px;                 
  position: relative;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.15fr;
  gap: 4px;
  height: var(--wheel-h);
  padding: 0 6px;
  border-radius: 22px;
  
  background:
    
    radial-gradient(128% 40% at 50% 26%,
      color-mix(in srgb, #ffffff 62%, transparent) 0%, transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--shadow-base) 27.0%, transparent) 0%,
      color-mix(in srgb, var(--shadow-base) 15.5%, transparent) 12%,
      color-mix(in srgb, var(--shadow-base) 7.0%, transparent) 25%,
      color-mix(in srgb, var(--shadow-base) 1.8%, transparent) 38%,
      color-mix(in srgb, var(--shadow-base) 0.0%, transparent) 50%,
      color-mix(in srgb, var(--shadow-base) 1.8%, transparent) 62%,
      color-mix(in srgb, var(--shadow-base) 7.0%, transparent) 75%,
      color-mix(in srgb, var(--shadow-base) 15.5%, transparent) 88%,
      color-mix(in srgb, var(--shadow-base) 27.0%, transparent) 100%),
    color-mix(in srgb, var(--rim-highlight) 66%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 92%, transparent),
              inset 0 -1px 0 color-mix(in srgb, #ffffff 55%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--ink-hair) 90%, transparent),
              0 3px 14px color-mix(in srgb, var(--page-shadow) 10%, transparent);
  overflow: hidden;
}

.wheel::before {
  content: "";
  position: absolute; left: 6px; right: 6px; top: 50%;
  height: var(--wheel-row);
  transform: translateY(-50%);
  border-radius: 12px;
  
  background:
    
    radial-gradient(128% 40% at 50% 26%,
      color-mix(in srgb, #ffffff 62%, transparent) 0%, transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, #ffffff 30%, transparent) 0%,
      transparent 45%),
    color-mix(in srgb, #d4a870 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d4a870 42%, transparent),
              0 1px 4px color-mix(in srgb, var(--page-shadow) 10%, transparent);
  pointer-events: none;
  z-index: 0;
}

.wheel::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg,
    rgb(var(--paper) / .96) 0%, rgb(var(--paper) / .60) 7%, rgb(var(--paper) / 0) 21%,
    rgb(var(--paper) / 0) 79%, rgb(var(--paper) / .60) 93%, rgb(var(--paper) / .96) 100%);
}

.wheel-col {
  position: relative;
  z-index: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wheel-col::-webkit-scrollbar { display: none; }

.wheel-pad { height: calc((var(--wheel-h) - var(--wheel-row)) / 2); }

.wheel-item {
  display: grid; place-items: center;
  height: var(--wheel-row);
  scroll-snap-align: center;
  font-size: calc(var(--type-body) * 0.98);
  line-height: 1;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  cursor: pointer;
  user-select: none;
  transition: color .18s ease;
}
.wheel-item.is-on { color: var(--ink); font-weight: 600; }

.wheel-item.is-empty { font-style: italic;
                       color: color-mix(in srgb, var(--ink-soft) 55%, transparent); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    
    .wheel-col { perspective: 460px; perspective-origin: 50% 50%; }
    
    .wheel-item.is-live {
      animation: wheel-drum linear both;
      animation-timeline: view(y);
      animation-range: cover 0% cover 100%;
    }
    @keyframes wheel-drum {
        0% { opacity: 0.281; transform: translateY(-115.0px) translateZ(-126px) rotateX(-52.2deg) translateZ(126px); }
        5% { opacity: 0.371; transform: translateY(-103.5px) translateZ(-126px) rotateX(-47.0deg) translateZ(126px); }
       10% { opacity: 0.467; transform: translateY(-92.0px) translateZ(-126px) rotateX(-41.7deg) translateZ(126px); }
       15% { opacity: 0.566; transform: translateY(-80.5px) translateZ(-126px) rotateX(-36.5deg) translateZ(126px); }
       20% { opacity: 0.664; transform: translateY(-69.0px) translateZ(-126px) rotateX(-31.3deg) translateZ(126px); }
       25% { opacity: 0.756; transform: translateY(-57.5px) translateZ(-126px) rotateX(-26.1deg) translateZ(126px); }
       30% { opacity: 0.838; transform: translateY(-46.0px) translateZ(-126px) rotateX(-20.9deg) translateZ(126px); }
       35% { opacity: 0.906; transform: translateY(-34.5px) translateZ(-126px) rotateX(-15.7deg) translateZ(126px); }
       40% { opacity: 0.958; transform: translateY(-23.0px) translateZ(-126px) rotateX(-10.4deg) translateZ(126px); }
       45% { opacity: 0.989; transform: translateY(-11.5px) translateZ(-126px) rotateX(-5.2deg) translateZ(126px); }
       50% { opacity: 1.0; transform: translateY(-0.0px) translateZ(-126px) rotateX(-0.0deg) translateZ(126px); }
       55% { opacity: 0.989; transform: translateY(11.5px) translateZ(-126px) rotateX(5.2deg) translateZ(126px); }
       60% { opacity: 0.958; transform: translateY(23.0px) translateZ(-126px) rotateX(10.4deg) translateZ(126px); }
       65% { opacity: 0.906; transform: translateY(34.5px) translateZ(-126px) rotateX(15.7deg) translateZ(126px); }
       70% { opacity: 0.838; transform: translateY(46.0px) translateZ(-126px) rotateX(20.9deg) translateZ(126px); }
       75% { opacity: 0.756; transform: translateY(57.5px) translateZ(-126px) rotateX(26.1deg) translateZ(126px); }
       80% { opacity: 0.664; transform: translateY(69.0px) translateZ(-126px) rotateX(31.3deg) translateZ(126px); }
       85% { opacity: 0.566; transform: translateY(80.5px) translateZ(-126px) rotateX(36.5deg) translateZ(126px); }
       90% { opacity: 0.467; transform: translateY(92.0px) translateZ(-126px) rotateX(41.7deg) translateZ(126px); }
       95% { opacity: 0.371; transform: translateY(103.5px) translateZ(-126px) rotateX(47.0deg) translateZ(126px); }
      100% { opacity: 0.281; transform: translateY(115.0px) translateZ(-126px) rotateX(52.2deg) translateZ(126px); }
    }
  }
}

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

.calc .result[hidden], .calc .result-idle[hidden] { display: none; }

.calc .result-idle {
  margin-top: clamp(18px, 3vh, 26px);
  min-height: 96px;
  display: grid; place-items: center;
  text-align: center;
  font-size: var(--type-body);
  font-style: italic;
  color: color-mix(in srgb, var(--ink-soft) 72%, transparent);
}

@media (max-width: 560px) {
  .calc .result-idle { min-height: 68px; margin-top: 18px; }
  .calc-fields { margin-top: 18px; }
}

.calc .result {
  
  border-top: 0;
  padding-top: 0;
  margin-top: clamp(18px, 3vh, 26px);
  display: grid; justify-items: center; text-align: center;
  
  --u: 0.72px;
}

.calc .hero-num {
  color: var(--hero-ink);
  text-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u))
                 color-mix(in srgb, var(--shadow-tint) 18%, transparent),
               0 0 calc(24 * var(--u)) color-mix(in srgb, var(--angel-glow) 22%, transparent);
  
  --hero-drop: drop-shadow(0 calc(1 * var(--u)) calc(2 * var(--u)) color-mix(in srgb, var(--shadow-tint) 18%, transparent)) drop-shadow(0 0 calc(24 * var(--u)) color-mix(in srgb, var(--angel-glow) 22%, transparent));
}
.calc .hero-num::after  { color: var(--angel-glow); opacity: .30; }
.calc .hero-num::before { color: var(--cream); opacity: .22; }

.calc .calc-arch {
  margin-top: 10px;
  font-size: var(--type-lead);
  font-style: italic;
  letter-spacing: -0.014em;
  color: var(--ink);
}

.calc .calc-arch:empty { margin-top: 0; }

.calc .calc-steps {
  margin-top: 10px;
  
  white-space: pre-line;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--type-fine);
  line-height: 1.6;
  color: var(--ink-soft);
}

.perf-box {
  position: fixed; left: 8px; top: 8px; z-index: 999;
  padding: 6px 10px; border-radius: 10px;
  font: 600 13px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre; color: #fff; background: #000000cc;
  pointer-events: auto;
}

.calc-after {
  margin-top: clamp(20px, 3vh, 28px);
  padding: clamp(16px, 2.4vh, 22px) clamp(16px, 4cqw, 24px);
  border-radius: 20px;
  background: color-mix(in srgb, var(--rim-highlight) 70%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 88%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--ink-hair) 80%, transparent),
              0 3px 14px color-mix(in srgb, var(--page-shadow) 9%, transparent);
  text-align: center;
}
.calc-after-line {
  margin: 0;
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.calc-after .doc-door { margin-top: 12px; }

.doc-offer {
  margin: clamp(24px, 3.5vh, 34px) 0;
  padding: clamp(16px, 2.4vh, 22px) clamp(16px, 4cqw, 24px);
  border-radius: 20px;
  background: color-mix(in srgb, var(--rim-highlight) 70%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 88%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--ink-hair) 80%, transparent),
              0 3px 14px color-mix(in srgb, var(--page-shadow) 9%, transparent);
  text-align: center;
}
.doc-offer-line { margin: 0; font-size: var(--type-body); line-height: 1.5;
                  color: var(--ink); text-wrap: pretty; }
.doc-offer .doc-door { margin-top: 12px; }

.calc-rare {
  margin: 6px 0 0;
  font-size: var(--type-fine);
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--ink-soft) 82%, transparent);
}

.num-hero {
  
  min-height: 74svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(24px, 6vh, 56px) 20px clamp(16px, 3vh, 28px);
  
  --u: calc(clamp(300px, 78vw, 460px) / 393);
}
.num-hero .hero-block { align-content: center; }
.num-hero .hero-num {
  
  font-size: calc(112 * var(--u));
}

.num-hero .sf-word { margin-top: calc(20 * var(--u)); }
.num-hero .sf-line { max-width: calc(340 * var(--u)); }

.num-hero + .sheet { margin-top: 0; }

.num-mark.num-mark {
  margin-top: calc(28 * var(--u));
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  font-size: calc(15 * var(--u));
  letter-spacing: 0.14em;
  text-transform: lowercase;
  
  color: var(--hero-ink-sm, var(--hero-ink));
}
.num-mark .spark { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }

.num-bridge {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(14px, 2.2vh, 20px);
  padding: clamp(28px, 5vh, 44px) 20px clamp(32px, 6vh, 52px);
  --u: calc(clamp(150px, 42vw, 190px) / 170);
}

.bridge-widget { width: clamp(150px, 42vw, 190px); }
.num-bridge .bridge-loss,
.num-bridge .bridge-what {
  margin: 0;
  max-width: 34rem;
  text-wrap: pretty;
}
.num-bridge .bridge-loss {
  font-size: var(--type-body);
  line-height: 1.5;
  color: var(--ink);
}

.num-bridge .bridge-what {
  font-size: var(--type-note);
  line-height: 1.55;
  color: var(--ink-on-sky, var(--ink));
}
.num-bridge .doc-door { margin: 0; color: var(--ink-on-sky, var(--ink)); }

.bridge-count {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: calc(4 * var(--u));
}
.bridge-count .count-value {
  font-variant-numeric: tabular-nums lining-nums;
  font-size: calc(38 * var(--u));
  line-height: 1.1;
  letter-spacing: -0.01em;
  
  color: var(--hero-ink-lg, var(--hero-ink));
}
.bridge-count .count-note {
  font-size: calc(14 * var(--u));
  letter-spacing: 0.04em;
  color: var(--ink-on-sky, var(--ink));
}

.bridge-count[data-state="now"] .count-value { font-size: calc(46 * var(--u)); }
.bridge-count[data-state="now"] .count-note { color: var(--ink); }

.bridge-count[data-state="never"] { display: none; }

:root { --ink-on-sky: #412f4b; --hero-ink-lg: #5e516c; --hero-ink-sm: #42394b; }
.ncard[data-n="000"] { --accent: #c4b8d9; --glow: #c4b8d9; --glow-a: 0.18; --accent-ink: #8366b5; --sky-ink: #644894; }
.ncard[data-n="111"] { --accent: #d4a870; --glow: #d4a870; --glow-a: 0.3; --accent-ink: #9f6a26; --sky-ink: #764e1c; }
.ncard[data-n="222"] { --accent: #c4b8d9; --glow: #c4b8d9; --glow-a: 0.25; --accent-ink: #8366b5; --sky-ink: #644894; }
.ncard[data-n="333"] { --accent: #d4a8b0; --glow: #d4a8b0; --glow-a: 0.25; --accent-ink: #b55768; --sky-ink: #8a3d4b; }
.ncard[data-n="444"] { --accent: #483558; --glow: #483558; --glow-a: 0.2; --accent-ink: #48325b; --sky-ink: #48325b; }
.ncard[data-n="555"] { --accent: #d4a8b0; --glow: #d4a8b0; --glow-a: 0.25; --accent-ink: #b55768; --sky-ink: #8a3d4b; }
.ncard[data-n="666"] { --accent: #5c4a63; --glow: #c4b8d9; --glow-a: 0.15; --accent-ink: #5d4865; --sky-ink: #5d4865; }
.ncard[data-n="777"] { --accent: #c4b8d9; --glow: #c4b8d9; --glow-a: 0.3; --accent-ink: #8366b5; --sky-ink: #644894; }
.ncard[data-n="888"] { --accent: #c8956c; --glow: #c8956c; --glow-a: 0.3; --accent-ink: #a56633; --sky-ink: #7a4b26; }
.ncard[data-n="999"] { --accent: #d4a8b0; --glow: #d4a8b0; --glow-a: 0.25; --accent-ink: #b55768; --sky-ink: #8a3d4b; }
.ncard[data-n="1111"] { --accent: #d4a870; --glow: #d4a870; --glow-a: 0.35; --accent-ink: #9f6a26; --sky-ink: #764e1c; }
.ncard[data-n="1212"] { --accent: #c4b8d9; --glow: #c4b8d9; --glow-a: 0.25; --accent-ink: #8366b5; --sky-ink: #644894; }
.ncard[data-n="1234"] { --accent: #483558; --glow: #483558; --glow-a: 0.2; --accent-ink: #48325b; --sky-ink: #48325b; }

.hub-hero {
  min-height: 58svh;
  padding-bottom: clamp(10px, 2vh, 18px);
}
@media (min-width: 900px) {
  
  .hub-hero { min-height: 44svh; }
}
.hub-hero .hub-title {
  
  font-size: calc(72 * var(--u));
  line-height: 0.92;
  
  max-width: calc(400 * var(--u));
  text-wrap: balance;
}

.hub-h {
  
  font-size: var(--type-body); font-weight: 600;
  letter-spacing: -0.014em;
  margin: 34px 0 4px;
  
  color: var(--ink-on-sky, var(--ink));
}

.doc .hub-note { font-size: var(--type-fine); line-height: 1.5;
                 color: var(--ink-on-sky, var(--ink)); margin: 0 0 12px; }

.hub-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 150px));
  justify-content: center;
  gap: clamp(14px, 3vw, 24px) 8px;
}
.hub-tile { margin: 0; }

.ncard {
  
  --su: 0.9px;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1px;
  padding: 14px 8px 12px;
  text-decoration: none;
  transition: translate 200ms cubic-bezier(.22,.61,.36,1);
}

.ncard-n {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  
  font-size: clamp(34px, 9vw, 46px);
  line-height: 1.02;
  font-variant-numeric: tabular-nums lining-nums;
  
  color: var(--sky-ink, var(--accent-ink, var(--ink)));
  
  text-shadow:
    0 0 calc(2 * var(--su)) color-mix(in srgb, var(--shadow-tint) 40%, transparent),
    0 0 calc(8 * var(--su)) color-mix(in srgb, var(--shadow-tint) 25%, transparent),
    0 0 calc(20 * var(--su)) color-mix(in srgb, var(--shadow-tint) 12%, transparent),
    0 calc(1 * var(--su)) calc(1 * var(--su))
      color-mix(in srgb, var(--shadow-tint) 60%, transparent),
    0 calc(2 * var(--su)) calc(8 * var(--su))
      color-mix(in srgb, var(--shadow-tint) 40%, transparent);
}
.ncard-word {
  
  font-style: italic;
  font-size: var(--type-fine);
  letter-spacing: -0.005em;
  
  color: var(--ink-on-sky, var(--ink));
  
  text-shadow:
    0 0 calc(1 * var(--su)) color-mix(in srgb, var(--shadow-tint) 30%, transparent),
    0 calc(0.5 * var(--su)) calc(2 * var(--su))
      color-mix(in srgb, var(--shadow-tint) 20%, transparent);
}

@media (hover: hover) {
  .ncard:hover { translate: 0 -2px; }
  .ncard:hover .ncard-n {
    text-shadow:
      0 0 calc(2 * var(--su)) color-mix(in srgb, var(--shadow-tint) 40%, transparent),
      0 0 calc(8 * var(--su)) color-mix(in srgb, var(--shadow-tint) 25%, transparent),
      0 0 calc(20 * var(--su)) color-mix(in srgb, var(--shadow-tint) 12%, transparent),
      0 calc(2 * var(--su)) calc(2 * var(--su))
        color-mix(in srgb, var(--shadow-tint) 60%, transparent),
      0 calc(5 * var(--su)) calc(13 * var(--su))
        color-mix(in srgb, var(--shadow-tint) 42%, transparent);
  }
}

.ncard:active { translate: 0 1px; }
.ncard:active .ncard-n {
  text-shadow:
    0 0 calc(2 * var(--su)) color-mix(in srgb, var(--shadow-tint) 40%, transparent),
    0 calc(1 * var(--su)) calc(1 * var(--su))
      color-mix(in srgb, var(--shadow-tint) 55%, transparent);
  transition-duration: 90ms;
}
.ncard:focus-visible { outline: 2px solid var(--sky-ink, var(--ink)); outline-offset: 4px;
                       border-radius: 14px; }

.ncard-n { position: relative; display: inline-block; }

.ncard-n.is-embossed { color: transparent; }

.tcard-time {
  
  font-size: clamp(28px, 7.4vw, 38px);
  letter-spacing: -0.01em;
}
.tcard-sub {
  
  font-size: var(--type-fine);
  margin-top: 3px;
  
  color: var(--ink-on-sky, var(--ink));
  font-variant-numeric: tabular-nums lining-nums;
  text-align: center;
  text-wrap: balance;
  text-shadow:
    0 0 calc(1 * var(--su)) color-mix(in srgb, var(--shadow-tint) 30%, transparent),
    0 calc(0.5 * var(--su)) calc(2 * var(--su))
      color-mix(in srgb, var(--shadow-tint) 20%, transparent);
}

.hub-tablewrap { overflow-x: auto; contain: inline-size; margin: 12px 0 0; -webkit-overflow-scrolling: touch; }
.hub-table { border-collapse: collapse; width: 100%; min-width: 420px; }
.hub-table th, .hub-table td {
  font-size: var(--type-fine); font-weight: 400; text-align: left;
  padding: 8px 10px 8px 0; color: var(--ink-soft);
  border-bottom: 1px solid color-mix(in srgb, var(--ink-hair) 70%, transparent);
}
.hub-table thead th {
  color: color-mix(in srgb, var(--ink-soft) 70%, transparent);
  letter-spacing: 0.04em; text-transform: lowercase;
}
.hub-table tbody th a { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-size: 19px; color: var(--ink);
                        text-decoration: none; font-variant-numeric: tabular-nums lining-nums; }
.hub-table tbody th a:hover { text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink-soft) 45%, transparent); }
.hub-table td { font-variant-numeric: tabular-nums lining-nums; }

.hub-bridge { margin: 40px 0 8px; }

.wp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 27vw, 132px), 1fr));
  gap: clamp(10px, 2.4vw, 16px);
  margin: clamp(22px, 4vh, 32px) 0 6px;
}

.wp-grid a {
  display: block; min-width: 44px; min-height: 44px;
  border-radius: 14px; overflow: hidden;
  
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-base) 10%, transparent),
              0 5px 14px color-mix(in srgb, var(--shadow-base) 12%, transparent);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.wp-grid a:active { transform: scale(.972); }
.wp-grid img { display: block; width: 100%; height: auto; aspect-ratio: 430 / 932; }