:root{
    --bg:var(--gray-0); --bg-2:var(--gray-20); --panel:var(--gray-0);
    --text:var(--gray-750); --text-2:var(--gray-500); --text-3:var(--gray-300);
    --brand:var(--violet-400);
    --line:color-mix(in srgb, var(--gray-900) 8%, transparent); --line-strong:color-mix(in srgb, var(--gray-900) 13%, transparent);
    --hover:color-mix(in srgb, var(--gray-750) 4.5%, transparent);
    --shadow-float:0 0 0 1px color-mix(in srgb, var(--gray-900) 5%, transparent), 0 2px 6px color-mix(in srgb, var(--gray-900) 5%, transparent), 0 12px 32px color-mix(in srgb, var(--gray-900) 10%, transparent);
    --ease-exit:cubic-bezier(.215,.61,.355,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-spring:cubic-bezier(.34,1.26,.64,1);
    --ok:var(--green-300); --warn:var(--orange-300);
    --bp-bg:var(--gray-870); --bp-line:var(--violet-700); --bp-text:var(--violet-250);
  }
  html[data-theme="dark"]{
    --bg:var(--gray-900); --bg-2:var(--gray-880); --panel:var(--gray-870);
    --text:var(--gray-20); --text-2:var(--gray-350); --text-3:var(--gray-550);
    --brand:var(--violet-450);
    --line:color-mix(in srgb, var(--gray-0) 8%, transparent); --line-strong:color-mix(in srgb, var(--gray-0) 15%, transparent);
    --hover:color-mix(in srgb, var(--gray-0) 5.5%, transparent);
    --shadow-float:0 0 0 1px color-mix(in srgb, var(--gray-0) 8%, transparent), 0 2px 6px color-mix(in srgb, var(--gray-900) 40%, transparent), 0 12px 32px color-mix(in srgb, var(--gray-900) 55%, transparent);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{color-scheme:light dark}
  body{
    font-family:var(--font);
    font-feature-settings:"cv01","ss03";
    background:var(--bg); color:var(--text);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  button{font:inherit;color:inherit;background:none;border:0;cursor:default}
  ::selection{background:color-mix(in srgb, var(--brand) 25%, transparent)}
  .tab{font-variant-numeric:tabular-nums}
  .mono{font-family:var(--font-mono)}

  section{position:relative;padding:120px 24px}
  .wrap{max-width:1080px;margin:0 auto}
  .tag{position:absolute;top:26px;left:28px;font-size:11px;font-weight:550;letter-spacing:.5px;color:var(--text-3);text-transform:none}
  .kick{font-size:12px;font-weight:550;letter-spacing:.4px;text-transform:none;color:var(--text-3);margin-bottom:16px}
  h2{font-size:clamp(32px,3.8vw,48px);font-weight:500;letter-spacing:-0.02em;line-height:1.08;max-width:20ch;text-wrap:balance}
  .sub{margin-top:14px;font-size:15px;line-height:1.55;color:var(--text-2);max-width:56ch;text-wrap:pretty}


  /* ================= B · SPLIT-FLAP ================= */
  #fb{background:var(--gray-900);color:var(--gray-20)}
  #fb .sub{color:var(--gray-350)}
  #fb .kick{color:var(--gray-550)}
  .board{
    display:flex;gap:5px;justify-content:center;margin-top:44px;
    perspective:900px;
  }
  .fcell{
    position:relative;width:34px;height:52px;border-radius:6px;
    background:var(--gray-850);
    font-family:var(--font-mono);
    font-size:24px;font-weight:550;color:var(--gray-70);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gray-0) 6%, transparent);
  }
  .fcell .half{
    position:absolute;left:0;right:0;height:50%;overflow:hidden;
    display:flex;justify-content:center;
    background:var(--gray-850);
  }
  .fcell .h-top{top:0;border-radius:6px 6px 0 0;align-items:flex-start}
  .fcell .h-top span{transform:translateY(11px)}
  .fcell .h-bot{bottom:0;border-radius:0 0 6px 6px;align-items:flex-end}
  .fcell .h-bot span{transform:translateY(-15px)}
  .fcell::after{content:'';position:absolute;top:50%;left:0;right:0;height:1.5px;background:var(--gray-900);z-index:5}
  .flap{
    position:absolute;top:0;left:0;right:0;height:50%;
    transform-origin:bottom center;
    transform-style:preserve-3d;
    z-index:4;
  }
  .flap .f-face{
    position:absolute;inset:0;overflow:hidden;border-radius:6px 6px 0 0;
    background:var(--gray-850);display:flex;justify-content:center;align-items:flex-start;
    backface-visibility:hidden;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gray-0) 6%, transparent);
  }
  .flap .f-front span{transform:translateY(11px)}
  .flap .f-back{transform:rotateX(180deg);align-items:flex-end;border-radius:0 0 6px 6px}
  .flap .f-back span{transform:translateY(-15px)}
  .flap.go{animation:flip .085s linear forwards}
  @keyframes flip{from{transform:rotateX(0)}to{transform:rotateX(-180deg)}}
  .board-cap{text-align:center;margin-top:18px;font-size:11px;color:var(--gray-550)}

  @media (max-width:900px){
    #c-grid{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion: reduce){
    *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  }

section{min-height:100vh}

/* the two halves of a letter are offset by fixed pixels that fit this size */
.fcell { font-size: 27px; line-height: normal; }
/* written by build.mjs: the component follows the light theme */
html[data-theme="light"] #fb { color-scheme: light; --gray-0: #0b0b0b; --gray-10: #0d0d0d; --gray-20: #0f0f0f; --gray-30: #111111; --gray-40: #131313; --gray-50: #151515; --gray-60: #181817; --gray-70: #1a1a19; --gray-80: #1c1c1b; --gray-90: #1e1e1d; --gray-100: #20201f; --gray-150: #2c2c2a; --gray-200: #383835; --gray-250: #444442; --gray-300: #52514e; --gray-350: #5f5e5a; --gray-400: #6d6b67; --gray-450: #7b7974; --gray-500: #898781; --gray-550: #97958d; --gray-600: #a5a49a; --gray-650: #b4b3a8; --gray-700: #c3c2b7; --gray-750: #d2d1c7; --gray-800: #e1e0d9; --gray-810: #e4e3dd; --gray-820: #e7e6e1; --gray-830: #eae9e4; --gray-840: #edece8; --gray-850: #f0efec; --gray-860: #f3f3f0; --gray-870: #f6f6f4; --gray-880: #f9f9f7; --gray-890: #fcfcfb; --gray-900: #ffffff; --red-0: #0b0b0b; --red-10: #110c0b; --red-20: #170c0b; --red-30: #1d0b0a; --red-40: #230b0a; --red-50: #280a0a; --red-60: #2d0a0a; --red-70: #310b0b; --red-80: #340c0c; --red-90: #380d0d; --red-100: #3c0e0e; --red-150: #511212; --red-200: #641919; --red-250: #791e1e; --red-300: #8e2626; --red-350: #a32c2c; --red-400: #b93535; --red-450: #d03b3b; --red-500: #e34948; --red-550: #e66767; --red-600: #ec7e7e; --red-650: #f09595; --red-700: #f4abab; --red-750: #f7c1c1; --red-800: #fad6d6; --red-810: #fadada; --red-820: #fadfdf; --red-830: #fae3e3; --red-840: #fae7e7; --red-850: #fbebeb; --red-860: #fdefef; --red-870: #fef3f3; --red-880: #fef7f7; --red-890: #fffbfb; --red-900: #ffffff; --orange-0: #0b0b0b; --orange-10: #100c0b; --orange-20: #150d0a; --orange-30: #1a0e09; --orange-40: #1f0e08; --orange-50: #240e07; --orange-60: #290f06; --orange-70: #2d1006; --orange-80: #301106; --orange-90: #341307; --orange-100: #371407; --orange-150: #4b1b08; --orange-200: #5d230b; --orange-250: #712b0f; --orange-300: #863311; --orange-350: #993d19; --orange-400: #ae461c; --orange-450: #c25124; --orange-500: #d95926; --orange-550: #eb6834; --orange-600: #ec835a; --orange-650: #f09978; --orange-700: #f4ae94; --orange-750: #f3c5b2; --orange-800: #f7d8cb; --orange-810: #f7dcd1; --orange-820: #f7e1d7; --orange-830: #f7e5dd; --orange-840: #f8e9e2; --orange-850: #f9ece7; --orange-860: #faf0ec; --orange-870: #fcf4f0; --orange-880: #fdf7f5; --orange-890: #fefbfa; --orange-900: #ffffff; --yellow-0: #0b0b0b; --yellow-10: #0f0d0a; --yellow-20: #130e09; --yellow-30: #171007; --yellow-40: #1b1106; --yellow-50: #1f1204; --yellow-60: #231402; --yellow-70: #271500; --yellow-80: #2b1700; --yellow-90: #2e1800; --yellow-100: #311a00; --yellow-150: #412400; --yellow-200: #512e00; --yellow-250: #623900; --yellow-300: #724500; --yellow-350: #835100; --yellow-400: #945d01; --yellow-450: #a66a00; --yellow-500: #b77701; --yellow-550: #c98500; --yellow-600: #da9303; --yellow-650: #eda104; --yellow-700: #fab219; --yellow-750: #f9c868; --yellow-800: #f9dca4; --yellow-810: #f9e0b0; --yellow-820: #fae3b8; --yellow-830: #fae7c2; --yellow-840: #faebce; --yellow-850: #f9eeda; --yellow-860: #f9f2e4; --yellow-870: #fbf5ea; --yellow-880: #fcf8f1; --yellow-890: #fefcf8; --yellow-900: #ffffff; --green-0: #0b0b0b; --green-10: #0c0e0c; --green-20: #0d100d; --green-30: #0e130d; --green-40: #0e160e; --green-50: #0f180e; --green-60: #101b0f; --green-70: #101e0f; --green-80: #10210f; --green-90: #10230f; --green-100: #11260f; --green-150: #0f350d; --green-200: #074505; --green-250: #005400; --green-300: #006300; --green-350: #017301; --green-400: #028301; --green-450: #009300; --green-500: #0da30e; --green-550: #34b231; --green-600: #55bf50; --green-650: #73cb6d; --green-700: #91d68b; --green-750: #aee0a9; --green-800: #caeac7; --green-810: #d0eccd; --green-820: #d5eed3; --green-830: #dbf0d8; --green-840: #e0f2de; --green-850: #e5f4e4; --green-860: #ebf7e9; --green-870: #f0f9ef; --green-880: #f5fbf4; --green-890: #fafdfa; --green-900: #ffffff; --aqua-0: #0b0b0b; --aqua-10: #0b0e0d; --aqua-20: #0a110f; --aqua-30: #081411; --aqua-40: #071713; --aqua-50: #051a16; --aqua-60: #031c18; --aqua-70: #021f1a; --aqua-80: #02221c; --aqua-90: #02241e; --aqua-100: #022720; --aqua-150: #02342b; --aqua-200: #034235; --aqua-250: #095040; --aqua-300: #065f49; --aqua-350: #0f6e53; --aqua-400: #0f7e5c; --aqua-450: #148e65; --aqua-500: #1a9e70; --aqua-550: #1baf7a; --aqua-600: #3cbd8c; --aqua-650: #5acba0; --aqua-700: #7ad7b4; --aqua-750: #a0e1c9; --aqua-800: #bfebdb; --aqua-810: #c7eddf; --aqua-820: #ceefe2; --aqua-830: #d5f0e6; --aqua-840: #dcf2ea; --aqua-850: #e2f4ed; --aqua-860: #e8f7f1; --aqua-870: #edf9f4; --aqua-880: #f3fbf8; --aqua-890: #f9fdfb; --aqua-900: #ffffff; --blue-0: #0b0b0b; --blue-10: #0a0d11; --blue-20: #091018; --blue-30: #07121f; --blue-40: #051426; --blue-50: #03162c; --blue-60: #021831; --blue-70: #021a36; --blue-80: #021c39; --blue-90: #031e3d; --blue-100: #032042; --blue-150: #062b57; --blue-200: #0d366b; --blue-250: #114281; --blue-300: #184f95; --blue-350: #1c5cab; --blue-400: #256abf; --blue-450: #2a78d6; --blue-500: #3987e5; --blue-550: #5598e7; --blue-600: #6da7ec; --blue-650: #86b6ef; --blue-700: #9ec5f4; --blue-750: #b7d3f6; --blue-800: #cde2fb; --blue-810: #d2e5fa; --blue-820: #d7e8fa; --blue-830: #ddebfa; --blue-840: #e2eefa; --blue-850: #e7f1fb; --blue-860: #ebf4fc; --blue-870: #f0f7fe; --blue-880: #f5f9fe; --blue-890: #fafcff; --blue-900: #ffffff; --violet-0: #0b0b0b; --violet-10: #0c0c13; --violet-20: #0e0d1b; --violet-30: #0f0e23; --violet-40: #110e2b; --violet-50: #130f32; --violet-60: #151036; --violet-70: #17123b; --violet-80: #19133f; --violet-90: #1b1544; --violet-100: #1d1649; --violet-150: #271e60; --violet-200: #322777; --violet-250: #3e318e; --violet-300: #4a3aa7; --violet-350: #5645be; --violet-400: #6250d6; --violet-450: #7161e0; --violet-500: #8173e3; --violet-550: #9085e9; --violet-600: #a096eb; --violet-650: #b0a7f2; --violet-700: #bfb9f5; --violet-750: #cfcafb; --violet-800: #dfdbfd; --violet-810: #e2dffd; --violet-820: #e5e2fd; --violet-830: #e8e6fe; --violet-840: #ebeafe; --violet-850: #efedff; --violet-860: #f2f1ff; --violet-870: #f5f4ff; --violet-880: #f8f8ff; --violet-890: #fcfbff; --violet-900: #ffffff; --magenta-0: #0b0b0b; --magenta-10: #110b0d; --magenta-20: #170b0f; --magenta-30: #1c0b11; --magenta-40: #220a12; --magenta-50: #270a14; --magenta-60: #2b0a16; --magenta-70: #2f0b18; --magenta-80: #320c1a; --magenta-90: #360d1c; --magenta-100: #390f1f; --magenta-150: #4c1429; --magenta-200: #5e1c34; --magenta-250: #722340; --magenta-300: #862a4c; --magenta-350: #993458; --magenta-400: #ad3d66; --magenta-450: #c04873; --magenta-500: #d55181; --magenta-550: #e46191; --magenta-600: #e87ba4; --magenta-650: #ed93b4; --magenta-700: #f3a8c3; --magenta-750: #f3c0d3; --magenta-800: #f9d4e2; --magenta-810: #f9d9e5; --magenta-820: #f9dee8; --magenta-830: #f9e2eb; --magenta-840: #f9e6ed; --magenta-850: #faebf0; --magenta-860: #fbeff3; --magenta-870: #fdf2f6; --magenta-880: #fef6f9; --magenta-890: #fefbfc; --magenta-900: #ffffff; }