#ix{
  --bg:#15202F; --bg-2:#1B2A3C; --navy:#223348; --navy-2:#2C415A;
  --teal:#7397A8; --teal-pale:#BFDCE4; --teal-bright:#A9DCE8;
  --sand:#E9DFCB; --sand-70:rgba(233,223,203,.72); --sand-45:rgba(233,223,203,.45); --sand-20:rgba(233,223,203,.2);
  --rose:#CF7B7B; --gold:#D9B978; --ink-dye:#F3E7C7;
  --paper:#EFE9DD; --ink:#1A2535; --ink-60:rgba(26,37,53,.66);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,system-ui,sans-serif;
  --ixnav:0px;
  box-sizing:border-box;
}
#ix *, #ix *::before, #ix *::after{ box-sizing:inherit; }
#ix{ margin:0; background:var(--bg); color:var(--sand); font-family:var(--sans); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; display:block; }
#ix h1, #ix h2, #ix h3, #ix h4, #ix p, #ix ul, #ix li, #ix small{ color:inherit; font-family:inherit; text-transform:none; letter-spacing:normal; }
#ix p, #ix li, #ix small{ font-size:inherit; line-height:inherit; font-weight:inherit; }
#ix ul{ padding:0; }
#ix svg, #ix canvas{ display:block; max-width:none; }
#ix a{ color:inherit; }
#ix button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; border-radius:0; line-height:inherit; text-transform:none; letter-spacing:normal; }
#ix :focus-visible{ outline:2px solid var(--teal-bright); outline-offset:3px; }

/* chrome */
#ix .ix-bar{ position:fixed; left:0; right:0; top:var(--ixnav); height:2px; z-index:50; background:var(--sand-20); pointer-events:none; }
#ix .ix-bar i{ display:block; height:100%; width:0; background:var(--teal-bright); }
#ix .ix-rail{ position:fixed; right:1rem; top:50%; transform:translateY(-50%); z-index:50; display:none; flex-direction:column; gap:.55rem; }
#ix .ix-rail a{ width:8px; height:8px; border-radius:50%; background:var(--sand-45); display:block; position:relative; transition:background .3s, transform .3s; }
#ix .ix-rail a.ix-on{ background:var(--teal-bright); transform:scale(1.5); }
#ix .ix-rail a span{ position:absolute; right:1.4rem; top:50%; transform:translateY(-50%); white-space:nowrap; font-size:.78rem; color:var(--sand-70); opacity:0; transition:opacity .2s; pointer-events:none; }
#ix .ix-rail a:hover span, #ix .ix-rail a.ix-on span{ opacity:1; }
@media (min-width:900px){ #ix .ix-rail{ display:flex; } }

/* scenes */
#ix .ix-ch{ position:relative; height:calc(var(--len,2) * 100svh); }
#ix .ix-stage{ position:sticky; top:var(--ixnav); height:calc(100svh - var(--ixnav)); overflow:hidden; background:var(--bg); }
#ix .ix-art{ position:absolute; left:0; right:0; top:0; height:58%; }
#ix .ix-art > svg, #ix .ix-art > canvas{ position:absolute; inset:0; width:100%; height:100%; }
#ix .ix-art > svg{ overflow:visible; }
#ix .ix-copy{ position:absolute; left:1.4rem; right:1.4rem; bottom:calc(1.4rem + env(safe-area-inset-bottom,0px)); max-width:36rem; z-index:3; }
#ix .ix-scrim{ position:absolute; left:0; right:0; bottom:0; height:52%; background:linear-gradient(rgba(21,32,47,0), rgba(21,32,47,.92) 38%, var(--bg)); pointer-events:none; z-index:2; }
#ix .ix-num{ position:absolute; left:1.3rem; top:1rem; font-family:var(--serif); font-style:italic; font-weight:300; font-size:3.2rem; line-height:1; color:var(--sand-20); z-index:3; pointer-events:none; }
#ix .ix-copy > *{ opacity:0; transform:translateY(16px); will-change:opacity,transform; margin:0; }
#ix .ix-copy h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,6vw,2.3rem); line-height:1.1; letter-spacing:-.012em; margin-bottom:.8rem; }
#ix .ix-copy p{ margin-bottom:.75rem; font-size:1.02rem; max-width:32rem; }
#ix .ix-copy p:last-child{ margin-bottom:0; }
#ix .ix-copy .ix-hint{ color:var(--teal-bright); font-size:.92rem; }
#ix .ix-gl{ border-bottom:1px dotted var(--teal-bright); color:var(--teal-pale); border-radius:2px; }
#ix .ix-lab{ font-family:var(--sans); font-size:12px; fill:var(--sand); }
#ix .ix-lab.ix-dim{ fill:var(--sand-70); }
#ix .ix-lab.ix-it{ font-family:var(--serif); font-style:italic; font-size:13.5px; }
#ix .ix-big{ font-family:var(--serif); font-weight:300; fill:var(--sand); font-size:72px; letter-spacing:-.02em; }
#ix .ix-flow{ fill:none; stroke-linecap:round; stroke-dasharray:3 16; animation:ixflow 1.8s linear infinite; }
@keyframes ixflow{ to{ stroke-dashoffset:-19 } }
#ix .ix-flow.ix-slow{ animation-duration:3.2s; }
#ix .ix-pulse{ transform-box:fill-box; transform-origin:center; animation:ixpulse 2.2s ease-out infinite; }
#ix .ix-pulse:nth-child(2){ animation-delay:.73s } .ix-pulse:nth-child(3){ animation-delay:1.46s }
@keyframes ixpulse{ 0%{ transform:scale(.3); opacity:.9 } 100%{ transform:scale(2.6); opacity:0 } }
@media (prefers-reduced-motion:reduce){ #ix .ix-flow,#ix .ix-pulse,#ix .ix-anim{ animation:none !important; } }

/* hero */
#ix-hero .ix-art{ height:100%; }
#ix-hero .ix-copy{ --dy:0px; bottom:calc(7.5rem + env(safe-area-inset-bottom,0px)); left:0; right:0; max-width:none; text-align:center; padding:0 1.4rem; pointer-events:none; transform:translateY(var(--dy)); }
#ix-hero .ix-scrim{ height:62%; background:linear-gradient(rgba(21,32,47,0), rgba(21,32,47,.85) 45%, var(--bg)); }
#ix-hero .ix-copy > *{ transform:none; opacity:1; margin-left:auto; margin-right:auto; }
#ix-hero .ix-scrim{ z-index:1; }
#ix .ix-kicker{ font-size:.92rem; color:var(--sand-70); margin-bottom:1.6rem !important; }
#ix .ix-kicker b{ font-weight:500; color:var(--sand); }
#ix .ix-kicker b::after{ content:""; display:inline-block; width:2rem; height:1px; background:var(--sand-45); vertical-align:middle; margin:0 .75rem; }
#ix-hero h1{ font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,9.5vw,5.6rem); line-height:1; letter-spacing:-.018em; margin:0 0 1.3rem; text-shadow:0 2px 30px rgba(21,32,47,.9); }
#ix-hero .ix-dek{ font-family:var(--serif); font-weight:300; font-size:clamp(1.1rem,2.6vw,1.4rem); line-height:1.4; max-width:28rem; margin:0 auto 1.2rem; text-shadow:0 2px 20px rgba(21,32,47,.9); }
#ix-hero .ix-meta{ font-size:.88rem; color:var(--sand-70); }
#ix-hero .ix-cue{ position:absolute; left:50%; bottom:calc(1.6rem + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; font-size:.82rem; color:var(--sand-70); z-index:3; }
#ix-hero .ix-cue i{ width:1px; height:2.8rem; background:linear-gradient(var(--teal-bright),rgba(169,220,232,0)); display:block; animation:ixdrip 2.4s ease-in-out infinite; transform-origin:top; }
@keyframes ixdrip{ 0%{transform:scaleY(.2);opacity:0} 40%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1);opacity:0} }

/* dial */
#ix .ix-dial-wrap{ position:absolute; right:1.1rem; top:1.2rem; z-index:4; display:flex; flex-direction:column; align-items:center; gap:.3rem; }
#ix .ix-dial{ width:60px; height:60px; border-radius:50%; border:1px solid var(--sand-45); background:radial-gradient(circle at 50% 40%, var(--navy-2), var(--navy)); position:relative; touch-action:none; cursor:grab; box-shadow:0 8px 24px rgba(0,0,0,.35); }
#ix .ix-dial i{ position:absolute; left:50%; top:4px; width:2px; height:15px; margin-left:-1px; background:var(--teal-bright); border-radius:2px; transform-origin:1px 26px; }
#ix .ix-dial-l{ font-size:.7rem; color:var(--sand-70); text-align:center; line-height:1.2; }
#ix .ix-dial-l b{ display:block; font-weight:500; color:var(--sand); font-variant-numeric:tabular-nums; }

/* glossary sheet */
#ix .ix-gloss{ position:fixed; left:0; right:0; bottom:0; z-index:60; padding:1.1rem 1.4rem calc(1.3rem + env(safe-area-inset-bottom,0px)); background:var(--navy); color:var(--sand); border-radius:16px 16px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.4); transform:translateY(105%); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
#ix .ix-gloss.ix-open{ transform:translateY(0); }
#ix .ix-gloss-x{ position:absolute; right:.9rem; top:.8rem; width:2.2rem; height:2.2rem; border-radius:50%; color:var(--sand-70); display:grid; place-items:center; font-size:1.2rem; }
#ix .ix-gloss h4{ margin:0 .5rem .35rem 0; font-family:var(--serif); font-weight:400; font-size:1.3rem; }
#ix .ix-gloss p{ margin:0; font-size:.98rem; max-width:34rem; }
#ix .ix-gloss small{ display:block; margin-top:.5rem; font-size:.78rem; color:var(--sand-70); }

/* paper */
#ix .ix-surface{ background:var(--paper); color:var(--ink); padding:5rem 1.5rem 4rem; position:relative; }
#ix .ix-wrap{ max-width:36rem; margin:0 auto; }
#ix .ix-surface h2{ font-family:var(--serif); font-weight:300; font-size:clamp(2.1rem,6vw,3.1rem); line-height:1.06; letter-spacing:-.015em; margin:0 0 1.2rem; }
#ix .ix-surface .ix-lede{ font-family:var(--serif); font-weight:300; font-size:1.25rem; line-height:1.45; margin:0 0 1rem; }
#ix .ix-surface p{ margin:0 0 1rem; }
#ix .ix-btns{ display:flex; flex-wrap:wrap; gap:.75rem; margin:1.8rem 0 3.5rem; }
#ix .ix-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:3rem; padding:.7rem 1.35rem; border-radius:6px; text-decoration:none; font-weight:500; font-size:.98rem; border:1px solid var(--navy); }
#ix .ix-btn-p{ background:var(--navy); color:var(--paper); } .ix-btn-p:hover{ background:var(--ink); }
#ix .ix-btn-s{ color:var(--navy); } .ix-btn-s:hover{ background:rgba(34,51,72,.08); }
#ix .ix-ways{ margin:0 0 3.5rem; padding:0; list-style:none; border-top:1px solid rgba(26,37,53,.18); }
#ix .ix-ways li{ border-bottom:1px solid rgba(26,37,53,.18); padding:1.1rem 0; display:grid; grid-template-columns:1fr auto; gap:.3rem 1rem; align-items:baseline; }
#ix .ix-ways h3{ margin:0; font-family:var(--serif); font-weight:400; font-size:1.3rem; }
#ix .ix-ways p{ grid-column:1 / -1; margin:0; color:var(--ink-60); font-size:.98rem; }
#ix .ix-ways a{ font-size:.92rem; color:var(--navy); text-decoration:none; border-bottom:1px solid rgba(34,51,72,.4); white-space:nowrap; }
#ix .ix-h3-lead{ font-family:var(--serif); font-weight:400; font-size:1.55rem; margin:0 0 .5rem; }
#ix .ix-note{ font-size:.9rem; color:var(--ink-60); line-height:1.55; } .ix-note p{ margin:0 0 .6rem; }
#ix .ix-sig{ margin-top:3rem; padding-top:1.2rem; border-top:1px solid rgba(26,37,53,.18); font-size:.9rem; color:var(--ink-60); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* desktop */
@media (min-width:900px){
  #ix .ix-art{ left:38%; right:0; top:0; height:100%; }
  #ix .ix-copy{ left:clamp(2rem,7vw,8rem); right:auto; bottom:auto; top:50%; transform:translateY(-50%); width:min(34rem,30vw); }
  #ix .ix-scrim{ display:none; }
  #ix .ix-num{ left:clamp(2rem,7vw,8rem); top:2rem; font-size:4.5rem; }
  #ix .ix-copy h2{ font-size:2.6rem; } .ix-copy p{ font-size:1.08rem; }
  #ix-hero .ix-art{ left:40%; } #ix-hero .ix-copy{ width:min(38rem,42vw); left:clamp(2rem,7vw,8rem); right:auto; bottom:auto; top:50%; transform:translateY(calc(-50% + var(--dy))); text-align:left; padding:0; }
  #ix-hero .ix-copy > *{ margin-left:0; } #ix-hero .ix-dek{ margin-left:0; } #ix-hero .ix-scrim{ display:none; }
  #ix .ix-dial-wrap{ right:4rem; top:auto; bottom:3rem; }
  #ix .ix-gloss{ left:auto; right:1.5rem; bottom:1.5rem; width:min(26rem,calc(100% - 3rem)); border-radius:14px; transform:translateY(calc(100% + 2rem)); }
  #ix .ix-surface{ padding:7rem 2rem 5rem; }
  #ix .ix-mb{ display:none; }
}