@property --light { syntax: "<angle>"; inherits: true; initial-value: 40deg; }

html.landing {
  --bg: #000;
  --surface: #141416;
  --text: #f5f5f7;
  --muted: #98989d;
  --line: rgba(255, 255, 255, .13);
  --accent: #ff8a3d;
  --spring: cubic-bezier(.16, 1, .3, 1);
  --nav: 52px;
  --glass-on-text: var(--glass-white);
  --glass-on-text-edge: var(--glass-white-edge);
  color-scheme: dark;
  background: var(--bg);
  overflow-x: clip;
}

.landing footer.site { margin-top: 0; }

.landing h1, .landing h2 { font-weight: 700; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; margin: 0; }
.landing h2 { font-size: clamp(38px, 5.4vw, 72px); }
.landing section { position: relative; }
.landing strong { color: var(--text); font-weight: inherit; }

.fine { color: var(--muted); font-size: 14px; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 28px; border-radius: 999px;
  background-color: #f2f2f5; background-image: var(--glass-white); box-shadow: var(--glass-white-edge), 0 8px 26px rgba(0, 0, 0, .45);
  color: #000; font-size: 17px; font-weight: 600;
  transition: transform .4s var(--spring), background-color .2s;
}
.pill:hover { background-color: #fafafc; text-decoration: none; transform: scale(1.04); }
.pill:active { transform: scale(.98); }
.pill:focus-visible, .chapter button:focus-visible, .keycap:focus-visible, .wikilink:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.cta { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; }

.window {
  position: relative; overflow: hidden; border-radius: 1.37% / 2.19%;
  background: #1c1c1e;
  box-shadow: 0 40px 110px rgba(0, 0, 0, .65);
}
.window img { display: block; width: 100%; height: auto; }

.window::after, .card::after, .ql-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from calc(var(--light) - 40deg),
    rgba(255, 255, 255, .2) 0deg, rgba(255, 205, 165, .5) 24deg, #fff 40deg, rgba(205, 225, 255, .5) 56deg, rgba(255, 255, 255, .2) 80deg,
    rgba(255, 255, 255, .2) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: --light .35s ease-out;
}

.section-head { max-width: 860px; margin: 0 auto clamp(40px, 6vw, 72px); padding: 0 24px; text-align: center; }
.section-head p { margin: 18px auto 0; max-width: 680px; color: var(--muted); font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; line-height: 1.35; letter-spacing: -.012em; text-wrap: pretty; }

.motion [data-reveal] { transition: opacity 1s var(--spring), transform 1.2s var(--spring); }
.motion [data-reveal]:not(.in) { opacity: 0; transform: translateY(36px) scale(.985); }

.app-icon { position: relative; width: clamp(68px, 11vh, 104px); aspect-ratio: 1; margin: 0 auto; }
.app-icon img {
  display: block; width: 100%; height: 100%; border-radius: 26%;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 70px rgba(255, 138, 61, .16);
  transform: perspective(520px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s var(--spring);
}

/* Hero */

.hero-sticky { padding: clamp(48px, 9vw, 72px) 20px 0; text-align: center; background: radial-gradient(90% 70% at 50% 0%, #20232d, #000 72%); }
.hero-copy { position: relative; }
.hero-copy h1 { margin-top: clamp(16px, 3vh, 26px); font-size: clamp(44px, min(7.4vw, 11.5vh), 96px); }
.hero-copy h1 span { display: block; }
.hero-copy .warm { padding-bottom: .1em; background: linear-gradient(95deg, #fff 8%, #ffc8a0 52%, #ff8a3d 96%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy .lede { margin: clamp(6px, 1.2vh, 12px) auto 0; max-width: 680px; color: var(--muted); font-size: clamp(18px, min(1.8vw, 2.8vh), 23px); font-weight: 500; line-height: 1.35; letter-spacing: -.012em; text-wrap: pretty; }
.hero-copy .cta { margin-top: clamp(18px, 3vh, 28px); }
.hero-window { margin: 56px auto 0; max-width: 1180px; }

@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(10px); } }
@keyframes lift { from { opacity: 0; transform: translateY(70px); } }
.motion .hero-copy > * { animation: rise 1.2s var(--spring) both; }
.motion .hero-copy > :nth-child(2) { animation-delay: .08s; }
.motion .hero-copy > :nth-child(3) { animation-delay: .18s; }
.motion .hero-copy > :nth-child(4) { animation-delay: .26s; }
.motion .hero-window .window { animation: lift 1.5s .24s var(--spring) both; }

.pin .hero-scene { height: 220vh; }
.pin .hero-sticky {
  position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); overflow: clip;
  padding-top: clamp(20px, 4.4vh, 44px);
}
.pin .hero-window {
  position: absolute; top: 0; left: 50%; margin: 0;
  width: min(1180px, 100vw - 64px, (100vh - var(--nav) - 56px) * 1.6);
  transform: translate(-50%, 68vh) perspective(1700px) rotateX(26deg) scale(.84);
  transform-origin: 50% 40%;
  will-change: transform;
}
.pin .hero-window::before {
  content: ""; position: absolute; inset: -18% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 138, 61, .3), rgba(255, 138, 61, 0) 72%);
  opacity: var(--glow, .4);
}

/* Statement */

.statement { max-width: 1040px; margin: 0 auto; padding: clamp(120px, 22vh, 240px) 24px; }
.statement p { margin: 0; font-size: clamp(32px, 4.9vw, 64px); font-weight: 700; line-height: 1.14; letter-spacing: -.028em; text-wrap: pretty; }
.statement .word { opacity: .16; }

/* Compare */

.compare-section { padding: 40px 24px clamp(110px, 16vw, 200px); }
.compare {
  --pos: 68%;
  max-width: 1180px; margin: 0 auto; cursor: ew-resize; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.compare img { pointer-events: none; -webkit-user-drag: none; }
.compare .compare-page { position: absolute; inset: 0; height: 100%; clip-path: inset(0 0 0 var(--pos)); }
.compare-input { position: absolute; left: var(--pos); bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .92); box-shadow: 0 0 24px rgba(0, 0, 0, .55); }
.compare-handle span {
  position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background-color: #f2f2f5; background-image: var(--glass-white); box-shadow: var(--glass-white-edge), 0 6px 22px rgba(0, 0, 0, .45);
  transition: transform .4s var(--spring);
}
.compare-handle span::before {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46' fill='none' stroke='%231d1d1f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.5 17.5 11 23l5.5 5.5M29.5 17.5 35 23l-5.5 5.5'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.compare:hover .compare-handle span, .compare.dragging .compare-handle span { transform: scale(1.14); }
.compare-input:focus-visible ~ .compare-handle span { outline: 3px solid var(--accent); outline-offset: 3px; }
.chip {
  position: absolute; bottom: 5%; padding: 5px 13px; border-radius: 999px;
  background: var(--glass-sheen), rgba(44, 44, 48, .62); box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  color: #f5f5f7; font-size: 13px; font-weight: 600; transition: opacity .3s;
}
.chip-source { left: 36.6%; }
.chip-page { right: 2.5%; }
.compare.at-page .chip-source, .compare.at-source .chip-page { opacity: 0; }

/* Tour */

.tour-scene { padding: 0 24px clamp(90px, 14vw, 180px); }
.chapters { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 72px; }
.chapter h3 { margin: 0; font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; line-height: 1.12; letter-spacing: -.022em; }
.chapter button { all: unset; display: block; color: inherit; }
.chapter-body p { margin: 12px 0 0; color: var(--muted); font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -.008em; }
.chapter-shot { margin-top: 24px; }
.tour-stage { display: none; }

.pin .tour-scene { height: 380vh; padding: 0; }
.pin .tour-sticky {
  position: sticky; top: var(--nav); height: calc(100vh - var(--nav));
  display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 64px);
  max-width: 1500px; margin: 0 auto; padding: 0 clamp(28px, 4vw, 56px);
}
.pin .chapters { display: block; max-width: none; margin: 0; }
.pin .chapter { position: relative; padding: 14px 0 14px 22px; }
.pin .chapter::before, .pin .chapter::after { content: ""; position: absolute; top: 14px; bottom: 14px; left: 0; width: 2px; border-radius: 2px; }
.pin .chapter::before { background: var(--line); }
.pin .chapter::after { background: var(--accent); transform: scaleY(var(--fill, 0)); transform-origin: top; }
.pin .chapter h3 { font-size: clamp(19px, 1.7vw, 23px); letter-spacing: -.016em; line-height: 1.18; color: #6e6e73; transition: color .4s; }
.pin .chapter button { cursor: pointer; }
.pin .chapter button:hover { color: var(--text); }
.pin .chapter.is-active h3 { color: var(--text); }
.pin .chapter-body { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows .7s var(--spring), opacity .5s; }
.pin .chapter-body p { min-height: 0; font-size: 16px; }
.pin .chapter.is-active .chapter-body { grid-template-rows: 1fr; opacity: 1; }
.pin .chapter-shot { display: none; }
.pin .tour-stage {
  display: block; justify-self: center; width: 100%;
  max-width: calc((100vh - var(--nav) - 72px) * 1.6);
  aspect-ratio: 16 / 10;
}
.pin .tour-frame { position: absolute; inset: 0; opacity: 0; transform: scale(1.025); transition: opacity .6s ease, transform 1.1s var(--spring); }
.pin .tour-frame.is-active { opacity: 1; transform: none; }
.tour-frame > img { height: 100%; }
.tour-page { position: absolute; overflow: hidden; }
.tour-page img { transform: translateY(calc(var(--scroll, 0) * var(--travel))); will-change: transform; }
.tour-float { position: absolute; border-radius: 999px; background-repeat: no-repeat; }
.tour-frame { container-type: inline-size; }
.tour-pill {
  --scale: .55; --grow: .45s var(--spring);
  position: absolute; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--gap) * var(--pt));
  width: calc(28 * var(--scale) * var(--pt)); padding: calc(7 * var(--pt)) 0; border-radius: calc(12 * var(--pt));
  background: linear-gradient(#fdfdfd, #f9f9f9 40%, #fbfbfb);
  box-shadow: 0 0 0 calc(.5 * var(--pt)) rgb(0 0 0 / .14), 0 calc(3 * var(--pt)) calc(10 * var(--pt)) rgb(0 0 0 / .06);
  transition: width var(--grow);
}
.tour-pill.is-dark {
  background: linear-gradient(#434346, #3a3a3c 30%, #3a3a3c 70%, #434346);
  box-shadow: 0 0 0 calc(.5 * var(--pt)) rgb(0 0 0 / .5), inset 0 0 0 calc(.5 * var(--pt)) rgb(255 255 255 / .14), inset 0 calc(.5 * var(--pt)) 0 rgb(255 255 255 / .22);
}
.tour-pill.is-moving { --scale: 1; }
.tour-pill i {
  --width: 14; --height: var(--bar);
  flex: none; width: calc(var(--width) * var(--scale) * var(--pt)); height: calc(var(--height) * var(--scale) * var(--pt));
  border-radius: 99px; background: #cecece;
  transition: width var(--grow), height var(--grow), background-color .25s;
}
.tour-pill.is-dark i { background: #606061; }
.tour-pill .l2 { --width: 11; }
.tour-pill .l3 { --width: 8; }
.tour-pill .l4 { --width: calc(var(--bar) + .5); --height: calc(var(--bar) + .5); }
.tour-pill i.is-current { background: var(--pill-accent); }

/* Quick Look */

.quicklook { padding: 0 24px clamp(100px, 14vw, 170px); text-align: center; }
.ql-stage {
  position: relative; max-width: 780px; aspect-ratio: 1620 / 1286; margin: 0 auto;
  border-radius: 2.55% / 3.2%; background: #1c1c1f; box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.ql-finder { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; transition: opacity .4s, filter .4s; }
.ql-bar { display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 16px; background: #29292c; box-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.ql-bar i { width: 11px; height: 11px; border-radius: 50%; background: #48484c; }
.ql-bar span { margin-left: 12px; color: #e5e5ea; font-size: 14px; font-weight: 600; }
.ql-files { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: clamp(14px, 3.6vw, 30px) 2%; min-width: 0; margin: 0; border: 0; padding: clamp(16px, 4vw, 34px) 3%; }
.ql-files legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ql-file { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; color: #d1d1d6; font-size: clamp(10px, 1.5vw, 13px); line-height: 1.3; text-align: center; }
.ql-file input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: default; }
.ql-file b { display: block; padding: 7px; border-radius: 10px; transition: background-color .12s; }
.ql-file i {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  width: clamp(42px, 9.4vw, 84px); aspect-ratio: 4 / 5; padding-bottom: 8%; border-radius: 4px;
  background: linear-gradient(180deg, #fcfcfd, #e2e3e8);
  clip-path: polygon(0 0, 74% 0, 100% 20.8%, 100% 100%, 0 100%);
  color: #6e6e73; font-style: normal; font-size: clamp(9px, 1.5vw, 14px); font-weight: 700;
}
.ql-file i::after { content: ""; position: absolute; top: 0; right: 0; width: 26%; aspect-ratio: 1; background: #c5c6cc; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.ql-file span { display: -webkit-box; max-width: 100%; padding: 2px 8px; border-radius: 5px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ql-file:hover b { background: rgba(255, 255, 255, .05); }
.ql-file:has(input:checked) b { background: rgba(255, 255, 255, .14); }
.ql-file:has(input:checked) span { background: #c2601f; color: #fff; }
.ql-file:has(input:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 2px; }
.quicklook.open .ql-finder { pointer-events: none; }
.quicklook.open .ql-stage { cursor: pointer; }
.ql-preview {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
  opacity: 0; transform: scale(.1); pointer-events: none;
  transition: transform .34s cubic-bezier(.4, 0, .9, .4), opacity .2s .1s;
}
.quicklook.open .ql-preview { opacity: 1; transform: none; transition: transform .62s var(--spring), opacity .16s; }
.quicklook.open .ql-finder { opacity: .25; filter: blur(4px); }
.ql-key { margin-top: 34px; }
.ql-key .fine { margin: 14px 0 0; }
.keycap {
  width: min(420px, 78vw); height: 62px; border: 0; border-radius: 13px; cursor: pointer;
  background: linear-gradient(180deg, #38383c, #2a2a2e); color: #d1d1d6; font: 500 15px -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 5px 0 #111113, 0 12px 24px rgba(0, 0, 0, .5);
  transition: transform .12s, box-shadow .12s;
}
.keycap:active, .keycap.down, .keycap[aria-pressed="true"] { transform: translateY(4px); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 1px 0 #111113, 0 3px 8px rgba(0, 0, 0, .5); }
.keycap[aria-pressed="true"] { color: var(--accent); }

/* Day or night */

.daynight {
  --surface-tone: #f5f5f7; --ink: #1d1d1f; --ink-muted: #6e6e73; --thumb: #f4f4f6; --thumb-lift: .85; --track: rgba(0, 0, 0, .08);
  --track-edge: 0 0 0 .5px rgba(0, 0, 0, .06), inset 0 .5px 0 rgba(255, 255, 255, .8), inset 0 -.5px 0 rgba(255, 255, 255, .6);
  padding: clamp(90px, 13vw, 160px) 24px;
  background: var(--surface-tone); color: var(--ink);
  transition: background-color .7s ease, color .7s ease, --thumb-lift .7s ease;
}
.daynight:has(input[value="dark"]:checked) {
  --surface-tone: #000; --ink: #f5f5f7; --ink-muted: #98989d; --thumb: #3a3a3e; --thumb-lift: .2; --track: rgba(255, 255, 255, .12); --track-edge: var(--glass-edge);
}
.daynight .section-head p { color: var(--ink-muted); transition: color .7s ease; }
.segmented { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 30px 0 0; padding: 3px; border: 0; border-radius: 999px;
  background-color: var(--track); background-image: var(--glass-sheen); box-shadow: var(--track-edge); transition: background-color .7s ease;
}
.segmented legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.segmented::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px;
  background-color: var(--thumb);
  background-image: linear-gradient(rgb(255 255 255 / var(--thumb-lift)), rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0) 55%, rgb(255 255 255 / calc(var(--thumb-lift) * .75)));
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .16), inset 0 .5px 0 rgba(255, 255, 255, .4), inset 0 -.5px 0 rgba(255, 255, 255, .25), 0 2px 8px rgba(0, 0, 0, .18);
  transition: transform .55s var(--spring), background-color .7s ease;
}
.segmented:has(input[value="dark"]:checked)::before { transform: translateX(100%); }
.segmented label { position: relative; min-width: 96px; padding: 8px 20px; color: var(--ink); font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; }
.segmented input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.segmented:has(input:focus-visible)::before { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Safari keeps a stale last row when this fractional-height window repaints with its bottom edge off screen; its own layer prevents that. */
.daynight-window { transform: translateZ(0); background: var(--surface-tone); max-width: 1180px; margin: 0 auto; box-shadow: 0 0 0 1px rgba(127, 127, 127, .2), 0 30px 90px rgba(0, 0, 0, .28); }
.daynight-window .daynight-dark { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .7s ease; }
.daynight:has(input[value="dark"]:checked) .daynight-dark { opacity: 1; }

/* Bento */

.bento-section { padding: clamp(100px, 14vw, 170px) 24px clamp(90px, 12vw, 150px); }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; max-width: 1120px; margin: 0 auto; }
.card {
  --mx: 50%; --my: 0%;
  position: relative; grid-column: span 2; min-height: 280px; padding: 30px; border-radius: 26px; overflow: hidden;
  background: linear-gradient(112deg, transparent calc(var(--sheen, 130%) - 24%), rgba(255, 255, 255, .06) var(--sheen, 130%), transparent calc(var(--sheen, 130%) + 24%)), var(--surface);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(255, 138, 61, .15), transparent 70%);
}
.card:hover::before { opacity: 1; }
.card > * { position: relative; }
.card h3 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.card p { margin: 8px 0 0; color: var(--muted); font-size: 16px; font-weight: 500; line-height: 1.38; letter-spacing: -.006em; }
.card-wide { grid-column: span 3; min-height: 210px; }
.card-vaults { grid-column: span 4; min-height: 340px; padding-right: 44%; }
.card-crop {
  position: absolute; top: 30px; right: -2px; bottom: -2px; width: 41%;
  border-radius: 14px 0 0 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
  background: #e9e9ec url("images/shots/readme-light.jpg") 0 0 / 300% auto no-repeat;
}
.glyph { flex: 1; display: block; margin-bottom: 6px; padding-bottom: .14em; font: 700 clamp(58px, 7vw, 86px)/1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.02em; background: linear-gradient(170deg, #fff 20%, #6e6e73); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glyph-mono { font: 600 clamp(30px, 3.2vw, 40px)/1.15 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -.03em; }
.card .wiki { flex: 1; margin: 0 0 18px; color: var(--text); font-size: 23px; font-weight: 600; line-height: 1.25; letter-spacing: -.016em; }
.tags { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; list-style: none; margin: 0 0 22px; padding: 0; }
.tags li {
  padding: 5px 12px; border-radius: 999px; color: #e5e5ea; font-size: 14px; font-weight: 500;
  background: var(--glass); box-shadow: var(--glass-edge), 0 2px 8px rgba(0, 0, 0, .3);
}
.wikilink { position: relative; color: var(--accent); text-decoration: underline; text-decoration-color: rgba(255, 138, 61, .4); text-underline-offset: 3px; cursor: pointer; }
.wiki-preview {
  position: absolute; left: -18px; bottom: calc(100% + 10px); z-index: 2; width: 240px; padding: 12px 14px; border-radius: 12px;
  background: #2c2c2e; box-shadow: 0 16px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .1);
  color: #d1d1d6; font-size: 13px; line-height: 1.35; opacity: 0; transform: translateY(6px) scale(.97); transform-origin: 20% 100%;
  pointer-events: none; transition: opacity .2s, transform .35s var(--spring);
}
.wiki-preview b { display: block; margin-bottom: 3px; color: #fff; }
.wikilink:hover .wiki-preview, .wikilink:focus .wiki-preview { opacity: 1; transform: none; }
.card:has(.wikilink) { overflow: visible; }

.motion .bento [data-reveal]:nth-child(2) { transition-delay: .06s; }
.motion .bento [data-reveal]:nth-child(3) { transition-delay: .12s; }
.motion .bento [data-reveal]:nth-child(4) { transition-delay: .06s; }
.motion .bento [data-reveal]:nth-child(5) { transition-delay: .12s; }
.motion .bento [data-reveal]:nth-child(7) { transition-delay: .06s; }

/* Closing */

.closing { padding: clamp(60px, 9vw, 120px) 24px clamp(110px, 16vw, 190px); text-align: center; background: radial-gradient(closest-side at 50% 42%, rgba(255, 138, 61, .1), transparent); }
.closing .app-icon { width: 104px; margin-bottom: 30px; }
.closing p { margin: 16px 0 30px; color: var(--muted); font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; letter-spacing: -.012em; }

@media (max-width: 820px) {
  .window { aspect-ratio: 1; border-radius: 18px; }
  .window img { height: 100%; object-fit: cover; object-position: 100% 0; }
  .chip-source { left: 3%; }
  .chapter:last-child .window img { object-position: 50% 0; }
  .hero-window { margin-top: 44px; }
  .ql-files { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card, .card-wide { grid-column: span 2; min-height: 0; padding: 26px; }
  .glyph { flex: none; }
  .card-vaults { grid-column: span 2; padding-right: 26px; padding-bottom: 230px; }
  .card-crop { top: auto; left: 26px; right: -2px; width: auto; height: 200px; }
  .wiki-preview { width: 210px; }
}

/* Prism */

@property --split { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --solid { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --thumb-lift { syntax: "<number>"; inherits: true; initial-value: .2; }

.icon-set { position: absolute; }

.prism-scene { overflow: clip; padding: clamp(170px, 18vw, 240px) 24px 40px; background: #000; text-align: center; }
.prism {
  --tint: #ff9400; --sweep: -60%; --spin: 0deg; --caustic: 0; --bloom: .5; --scale: 1;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5A2.5 2.5 0 0 1 5.5 4h4.2c.7 0 1.3.3 1.8.8L13 6.3h5.5A2.5 2.5 0 0 1 21 8.8v8.7a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z'/%3E%3C/svg%3E");
  position: relative; width: min(46vh, 340px, 62vw); aspect-ratio: 1; margin: 0 auto; border-radius: 24%;
  transform: scale(var(--scale));
  transition: --split .25s ease-out, --solid .25s ease-out;
}
.prism.is-cycling { transition: none; }
.prism-bloom {
  position: absolute; inset: -46%; border-radius: 50%; opacity: var(--bloom);
  background: conic-gradient(#ff2d55, #ff9500, #ffd60a, #34c759, #00c7ff, #0a84ff, #bf5af2, #ff2d55);
  filter: blur(70px); transform: rotate(var(--spin));
  transition: opacity .25s ease-out;
}
.prism-glass {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  background: linear-gradient(155deg, #3a3c47, #16171d 58%, #0c0d11);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), inset 0 -18px 40px rgba(0, 0, 0, .55), 0 44px 90px rgba(0, 0, 0, .7);
}
.prism-caustic {
  position: absolute; inset: -30% -60%; opacity: calc(var(--caustic) * .8); mix-blend-mode: screen; filter: blur(14px);
  background: linear-gradient(104deg, transparent 33%, rgba(150, 88, 18, .42) 41%, rgba(228, 158, 58, .82) 47%, rgba(255, 216, 138, .96) 50%, rgba(228, 158, 58, .82) 53%, rgba(150, 88, 18, .42) 59%, transparent 67%);
  transform: translateX(var(--sweep));
  transition: opacity .25s ease-out;
}
.prism::after {
  content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--spin), #ff2d55, #ff9500, #ffd60a, #34c759, #00c7ff, #0a84ff, #bf5af2, #ff2d55);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.prism-glyph { position: absolute; inset: 25%; isolation: isolate; }
.prism-glyph i {
  position: absolute; inset: 0; mix-blend-mode: screen;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.prism-r { background: #ff0037; transform: translate(calc(var(--split) * -1), calc(var(--split) * .35)); }
.prism-g { background: #2bff6a; }
.prism-b { background: #1f5bff; transform: translate(var(--split), calc(var(--split) * -.35)); }
.prism-glyph .prism-tint { mix-blend-mode: normal; background: var(--tint); opacity: var(--solid); }

.prism-copy { position: relative; z-index: 1; margin-top: clamp(28px, 5vh, 54px); }
.prism-copy p { margin: 16px auto 0; max-width: 620px; color: var(--muted); font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; line-height: 1.35; letter-spacing: -.012em; text-wrap: pretty; }
.spectrum {
  display: inline-block; padding-bottom: .14em; margin-bottom: -.14em;
  background: linear-gradient(90deg, #ff6b81, #ff9f45, #ffd60a, #5fe07f, #4fd2ff, #6c8dff, #c77dff, #ff6b81) var(--shift, 0%) 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Vault demo */

html:not(.js) .vault-demo { display: none; }

.vault-demo {
  --tint: #ff9400;
  display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(330px, 1fr); gap: 22px;
  max-width: 1280px; margin: 0 auto; padding: clamp(40px, 6vw, 70px) 24px clamp(90px, 12vw, 150px);
}
.vmock {
  --m-bg: #1c1c1e; --m-side: #27272a; --m-text: #f5f5f7; --m-muted: #98989d; --m-line: rgba(255, 255, 255, .09); --m-row: rgba(255, 255, 255, .1); --m-pill: rgba(255, 255, 255, .1); --m-pill-edge: var(--glass-edge); --m-note: rgba(52, 199, 89, .12);
  --m-tint: var(--tint); --m-accent: #ff9400;
  container-type: inline-size; background: var(--m-bg); color: var(--m-text);
  transition: background-color .4s;
}
.vault-demo:has(input[name="vault-appearance"][value="light"]:checked) .vmock {
  --m-bg: #fff; --m-side: #ededf0; --m-text: #1d1d1f; --m-muted: #6e6e73; --m-line: rgba(0, 0, 0, .09); --m-row: rgba(0, 0, 0, .07); --m-pill: rgba(0, 0, 0, .05); --m-pill-edge: 0 0 0 .5px rgba(0, 0, 0, .1), inset 0 .5px 0 rgba(255, 255, 255, .9), inset 0 -.5px 0 rgba(255, 255, 255, .7); --m-note: rgba(52, 199, 89, .1);
}
.vmock-inner { display: grid; grid-template-columns: 25% minmax(0, 1fr); height: 100%; font-size: 1.28cqw; }
.vm-side { padding: 1.5em 1em; background: var(--m-side); border-right: 1px solid var(--m-line); transition: background-color .4s; }
.vm-lights { display: flex; gap: .7em; padding: 0 .6em; }
.vm-lights i { width: 1.1em; height: 1.1em; border-radius: 50%; background: #ff5f57; }
.vm-lights i:nth-child(2) { background: #febc2e; }
.vm-lights i:nth-child(3) { background: #28c840; }
.vm-label { margin: 2.6em .7em .7em; color: var(--m-muted); font-size: 1.05em; font-weight: 600; }
.vm-vaults { display: grid; gap: .2em; }
.vm-vault {
  all: unset; display: flex; align-items: center; gap: .7em; padding: .62em .7em; border-radius: .7em; color: var(--m-text);
  font-size: 1.28em; font-weight: 500; cursor: pointer; transition: background-color .15s;
}
.vm-vault svg { flex: none; width: 1.25em; height: 1.25em; fill: var(--row-tint, var(--m-text)); transition: fill .4s; }
.vm-vault span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-vault:hover { background: color-mix(in srgb, var(--m-row) 50%, transparent); }
.vm-vault.is-active { background: var(--m-row); font-weight: 600; }
.vm-vault:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vm-main { position: relative; display: flex; flex-direction: column; min-width: 0; }
.vm-top { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--m-tint) 20%, transparent), transparent); }
.vm-toolbar { display: flex; justify-content: center; padding: 1em 1em .7em; }
.vm-pill {
  display: grid; justify-items: center; min-width: 17em; padding: .4em 1.6em; border-radius: 99em;
  background-color: var(--m-pill); background-image: var(--glass-sheen); box-shadow: var(--m-pill-edge);
}
.vm-pill strong { color: var(--m-text); font-size: 1.14em; font-weight: 600; }
.vm-pill span { color: var(--m-muted); font-size: .86em; }
.vm-tabs { display: flex; gap: 1.8em; padding: 0 1.6em; border-bottom: 1px solid var(--m-line); color: var(--m-muted); font-size: 1.12em; }
.vm-tabs span { padding: .55em .2em; border-bottom: 2px solid transparent; white-space: nowrap; }
.vm-tabs .is-active { border-color: var(--m-accent); color: var(--m-accent); font-weight: 600; transition: color .4s, border-color .4s; }
.vm-sweep {
  position: absolute; inset: -40% -80%; opacity: 0; mix-blend-mode: screen; filter: blur(12px); pointer-events: none;
  background: linear-gradient(104deg, transparent 33%, rgba(150, 88, 18, .42) 41%, rgba(228, 158, 58, .82) 47%, rgba(255, 216, 138, .96) 50%, rgba(228, 158, 58, .82) 53%, rgba(150, 88, 18, .42) 59%, transparent 67%);
}
.vm-page { flex: 1; min-height: 0; overflow: hidden; padding: 2.8em 5em 0; font-family: Georgia, "Times New Roman", serif; }
.vm-page h4 { margin: 0 0 .5em; padding-bottom: .4em; border-bottom: 1px solid var(--m-line); font: 700 3em/1.1 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.022em; }
.vm-page p { margin: 0; font-size: 1.5em; line-height: 1.55; }
.vm-page h5 { margin: 1.7em 0 .5em; font: 700 1.8em/1.2 -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -.012em; }
.vm-page ul { margin: 0; padding-left: 1.4em; font-size: 1.5em; line-height: 1.55; }
.vm-note { margin-top: 1.7em; padding: 1.1em 1.4em; border-left: .3em solid #34c759; border-radius: .6em; background: var(--m-note); }
.vm-note b { display: block; margin-bottom: .3em; color: #34c759; font: 700 1.05em -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.vm-link { color: var(--m-accent); text-decoration: underline; text-underline-offset: .15em; transition: color .4s; }
.vm-status { display: flex; gap: 1.8em; padding: .75em 1.6em; border-top: 1px solid var(--m-line); color: var(--m-muted); font-size: 1em; }
.vm-file { color: var(--m-accent); transition: color .4s; }

.vpanel { position: relative; display: grid; gap: 16px; padding: 22px; border-radius: 22px; background: var(--surface); }
.vpanel::after {
  content: ""; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from calc(var(--light) - 40deg),
    rgba(255, 255, 255, .2) 0deg, rgba(255, 205, 165, .5) 24deg, #fff 40deg, rgba(205, 225, 255, .5) 56deg, rgba(255, 255, 255, .2) 80deg,
    rgba(255, 255, 255, .2) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: --light .35s ease-out;
}
.vpanel-head h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.012em; }
.vpanel-path { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.vpanel-row { display: flex; align-items: flex-start; gap: 16px; }
.vchip {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5A2.5 2.5 0 0 1 5.5 4h4.2c.7 0 1.3.3 1.8.8L13 6.3h5.5A2.5 2.5 0 0 1 21 8.8v8.7a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5z'/%3E%3C/svg%3E");
  position: relative; flex: none; width: 96px; height: 96px; border-radius: 18px;
  background: color-mix(in srgb, var(--chip, var(--tint)) 14%, transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: background-color .4s;
}
.vchip .prism-glyph { inset: 28px; }
.vpanel-fields { display: grid; flex: 1; gap: 12px; min-width: 0; }
.vfield { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.vfield > span, .vfield > legend { padding: 0 0 6px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.vfield > span { padding: 0; }
.vfield input[type="text"] {
  box-sizing: border-box; width: 100%; padding: 6px 10px; border: 0; border-radius: 7px; outline: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06); color: var(--text); font: 500 14px -apple-system, BlinkMacSystemFont, sans-serif;
}
.vfield input[type="text"]:focus { outline: 2px solid var(--accent); }
.vswatches { display: flex; flex-wrap: wrap; gap: 3px; }
.vswatch { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }
.vswatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.vswatch i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); transition: transform .3s var(--spring); }
.vswatch:hover i { transform: scale(1.14); }
.vswatch-none i { position: relative; box-sizing: border-box; border: 1.5px solid var(--muted); background: none; }
.vswatch-none i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 1.5px; background: var(--muted); transform: translate(-50%, -50%) rotate(-45deg); }
.vswatch:has(input:checked)::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, .75); border-radius: 50%; pointer-events: none; }
.vswatch:has(input:focus-visible)::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--accent); border-radius: 50%; }
.vicons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.vicon { position: relative; display: grid; place-items: center; aspect-ratio: 1.25; border-radius: 9px; cursor: pointer; transition: background-color .15s; }
.vicon input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.vicon svg { width: 22px; height: 22px; fill: #c7c7cc; transition: fill .3s, transform .3s var(--spring); }
.vicon:hover { background: rgba(255, 255, 255, .06); }
.vicon:hover svg { transform: scale(1.1); }
.vicon:has(input:checked) { background: rgba(255, 255, 255, .13); }
.vicon:has(input:checked) svg { fill: var(--icon-tint, #fff); }
.vicon:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.vpanel hr { width: 100%; height: 1px; margin: 0; border: 0; background: rgba(255, 255, 255, .1); }
.segmented-small { display: inline-grid; width: max-content; margin: 0; --track: rgba(255, 255, 255, .1); --track-edge: var(--glass-edge); --thumb: #48484c; --thumb-lift: .2; --ink: var(--text); }
.segmented-small label { min-width: 68px; padding: 4px 12px; font-size: 13px; }
.vfacts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 34px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 17px; font-weight: 500; line-height: 1.38; letter-spacing: -.008em; }

.refract .prism-glyph { animation: refract 1.15s var(--spring); }
.refract .vm-sweep { animation: refract-sweep 1.15s cubic-bezier(.3, .1, .3, 1); }
@keyframes refract {
  0% { --split: 0px; --solid: 1; }
  28% { --split: 5px; --solid: 0; }
  100% { --split: 0px; --solid: 1; }
}
@keyframes refract-sweep {
  0% { opacity: 0; transform: translateX(-36%); }
  18% { opacity: .6; }
  70% { opacity: .4; }
  100% { opacity: 0; transform: translateX(36%); }
}
@media (prefers-reduced-motion: reduce) {
  .refract .prism-glyph, .refract .vm-sweep { animation: none; }
}

@media (max-width: 1040px) {
  .vault-demo { grid-template-columns: minmax(0, 1fr); }
  .vmock.window { aspect-ratio: 16 / 10; }
  .vfacts { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 18px; }
}
@media (max-width: 820px) {
  .vmock.window { aspect-ratio: 1 / 1.02; }
  .vmock-inner { grid-template-columns: 34% minmax(0, 1fr); font-size: 2.05cqw; }
  .vm-page { padding: 1.6em 1.4em 0; }
  .vm-page h4 { font-size: 2.4em; }
  .vm-page p { font-size: 1.32em; }
  .vm-pill { min-width: 0; padding: .4em 1em; }
  .vm-tabs span:nth-child(n + 3) { display: none; }
  .vm-status span:nth-child(3) { display: none; }
}