:root{color-scheme:light dark;--ink:#1d1d1f;--muted:#6e6e73;--blue:#0071e3;--line:#e5e5e7;--page:#fafafa;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-synthesis:none;color:var(--ink);background:var(--page)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #006edb;outline-offset:5px}button{cursor:pointer}a:hover{text-decoration:underline;text-underline-offset:4px}::selection{background:#cce5ff}.skip{position:fixed;z-index:20;top:8px;left:10px;padding:12px;background:white;transform:translateY(-150%)}.skip:focus{transform:none}.section-width{width:min(980px,calc(100% - 64px));margin-inline:auto}.nav{border-bottom:1px solid var(--line);background:rgba(250,250,250,.88);backdrop-filter:blur(20px);position:sticky;top:0;z-index:10}.nav-inner{max-width:1100px;height:66px;margin:auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center}.wordmark{display:inline-flex;align-items:center;gap:9px;font-size:20px;font-weight:650;letter-spacing:-.6px}.wordmark img{display:block}.nav-links{display:flex;align-items:center;gap:30px;font-size:13px}.nav-download{background:var(--ink);color:white;padding:8px 15px;border-radius:100px}.nav-download:hover{text-decoration:none;background:#333}.nav-download span{margin-left:8px}.hero{text-align:center;padding:84px 24px 47px}.eyebrow{font-size:12px;font-weight:650;letter-spacing:1.4px;line-height:1.5;color:var(--muted);margin:0 0 18px}.hero h1{font-size:clamp(54px,7.3vw,92px);font-weight:650;line-height:1.025;letter-spacing:-.065em;margin:0}.hero h1 span{color:#86868b}.hero-copy{font-size:21px;line-height:1.45;letter-spacing:-.45px;margin:25px auto 27px;color:#5b5b60}.hero-actions,.open-actions{display:flex;align-items:center;justify-content:center;gap:27px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;border-radius:100px;padding:14px 23px;font-size:16px;font-weight:500;transition:background .18s,transform .18s}.button:hover{text-decoration:none}.button:active{transform:scale(.97)}.primary{background:var(--blue);color:white}.primary:hover{background:#0077ed}.dark{background:var(--ink);color:white}.dark:hover{background:#38383b}.text-link{color:#0066cc;font-size:16px}.compatibility{font-size:12px;line-height:1.6;color:var(--muted);margin:19px 0 0}.compatibility span{padding:0 7px}.demo-section{width:min(980px,calc(100% - 64px));margin:0 auto}.demo-window{position:relative;overflow:hidden;background:#101012;border:7px solid #202023;border-radius:22px;box-shadow:0 28px 54px -32px #0005,0 2px 5px #0002;aspect-ratio:1.6}.demo-window video{display:block;width:100%;height:100%;object-fit:cover}.replay{position:absolute;bottom:18px;right:18px;display:flex;align-items:center;gap:8px;border:1px solid #fff5;border-radius:100px;padding:10px 15px;color:white;background:#24282cbf;backdrop-filter:blur(15px);font-size:12px;transition:background .15s}.replay:hover{background:#191b20e6}.demo-controls{max-width:600px;margin:25px auto 0;display:flex;align-items:center;gap:25px}.demo-controls label{font-size:14px;font-weight:550;white-space:nowrap}.range-wrap{display:flex;gap:14px;align-items:center;width:100%;font-size:12px;color:var(--muted)}input[type=range]{accent-color:var(--ink);height:30px;width:100%;min-width:50px;cursor:ew-resize}.demo-caption{text-align:center;font-size:12px;color:var(--muted);margin:11px 0 0}.details{display:grid;grid-template-columns:1fr 1fr;gap:100px;padding-block:124px 112px}.details h2,h2{font-size:clamp(34px,4vw,48px);font-weight:630;line-height:1.08;letter-spacing:-.045em;margin:0 0 24px}.details-intro>p:last-child{max-width:370px;font-size:18px;line-height:1.55;color:var(--muted);letter-spacing:-.2px}.details-list{display:flex;flex-direction:column;gap:27px;padding-top:3px}.details-list h3{font-size:18px;font-weight:600;letter-spacing:-.3px;margin:0 0 8px}.details-list p{font-size:16px;color:var(--muted);line-height:1.55;margin:0}.open-source{background:#f0f0f2;text-align:center;padding:87px 24px 80px}.open-inner{max-width:780px;margin:auto}.open-source h2{font-size:clamp(38px,5vw,60px);margin-bottom:21px}.open-source .open-inner>p:not(.eyebrow){color:var(--muted);font-size:19px;line-height:1.5;letter-spacing:-.2px;margin:0 auto 28px}.open-actions{margin:0 0 30px}.open-source .open-inner .contribution-note{font-size:14px;margin-bottom:0;line-height:1.7}.contribution-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.getting-started{padding-block:94px 65px;max-width:820px}.getting-started h2{font-size:36px;text-align:center;margin-bottom:36px}.questions details{border-bottom:1px solid var(--line);padding:0}.questions summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:17px;font-weight:550;line-height:1.4;padding:24px 0;list-style:none}.questions summary::-webkit-details-marker{display:none}.questions summary span{font-size:22px;font-weight:300;color:var(--muted)}.questions details[open] summary span{transform:rotate(45deg)}.questions p{font-size:16px;line-height:1.65;color:var(--muted);max-width:700px;margin:0 25px 22px 0}.credit{display:grid;grid-template-columns:1fr 1.7fr;gap:60px;border-top:1px solid var(--line);padding:34px 0 42px;margin-top:25px}.credit p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}.credit p:first-child{font-size:20px;font-weight:550;letter-spacing:-.4px;color:var(--ink)}.credit a{color:#0066cc}.footer{display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:24px 0 30px;border-top:1px solid var(--line)}.footer .wordmark{font-size:16px}.footer p{font-size:12px;color:var(--muted)}.footer>div{margin-left:auto;display:flex;gap:22px;font-size:12px}.footer small{flex-basis:100%;font-size:11px;color:var(--muted)}
@media(min-width:1500px){.hero{padding-top:96px}.demo-section{width:980px}}@media(max-width:700px){.nav-inner{height:60px;padding-inline:20px}.nav-links{gap:19px}.nav-links>a:first-child{display:none}.wordmark{font-size:18px}.hero{padding-top:62px;padding-bottom:36px}.hero h1{font-size:64px}.hero-copy{font-size:18px}.hero-actions{gap:20px}.hero-actions .text-link{font-size:15px}.button{font-size:15px;padding:13px 20px}.section-width,.demo-section{width:calc(100% - 40px)}.demo-window{border-width:5px;border-radius:14px}.replay{bottom:10px;right:10px;padding:8px 11px;font-size:11px}.demo-controls{gap:14px;margin-top:18px}.demo-controls label{font-size:12px}.range-wrap{gap:9px;font-size:11px}.demo-caption{font-size:11px}.details{grid-template-columns:1fr;gap:26px;padding-block:73px}.details-intro>p:last-child{max-width:none}.details-list{gap:25px}.open-source{padding:62px 24px}.open-source .open-inner>p:not(.eyebrow){font-size:17px}.open-source br{display:none}.getting-started{padding-block:68px 38px}.getting-started h2{font-size:30px}.questions summary{font-size:16px}.credit{grid-template-columns:1fr;gap:14px;padding-block:30px}.footer{gap:12px}.footer>div{width:100%;margin-left:0;gap:24px}.footer p{margin-left:auto}.open-actions{gap:21px}}@media(max-width:380px){.hero h1{font-size:53px}.hero-copy{font-size:16px}.hero-actions{gap:16px}.nav-links{gap:14px}.nav-links a{font-size:12px}.compatibility{font-size:11px}.compatibility span{padding-inline:3px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}@media(prefers-reduced-transparency:reduce){.nav{background:var(--page);backdrop-filter:none}.replay{background:#24282c;backdrop-filter:none}}

/* Small, stateful icons; Morphicons supplies the spring transitions. */
.ui-icon{width:20px;height:20px;display:block;flex-shrink:0}
.questions summary .ui-icon{color:var(--muted)}
.github-stars{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 12px;border:1px solid #d5d5d9;border-radius:100px;background:#fff;font-size:13px;font-weight:550;white-space:nowrap}
.github-stars:hover{background:#f0f0f2;text-decoration:none;border-color:#b5b5bb}
.github-stars .ui-icon{width:16px;height:16px}
.star-count{padding-left:8px;border-left:1px solid var(--line);font-variant-numeric:tabular-nums;min-width:2ch}
@media(max-width:850px){.nav-links{gap:15px}.nav-links>a[href="#effect"]{display:none}}
@media(max-width:600px){.nav-links>a[href="#open-source"]{display:none}.nav-links{gap:10px}.nav-inner{padding-inline:16px}.github-stars{padding:7px 10px}}
@media(max-width:380px){.nav-download{display:none}}


/* Match the device appearance without waiting for JavaScript. */
:root {
  --nav-surface: rgba(250,250,250,.88);
  --surface: #fff;
  --surface-raised: #f0f0f2;
  --button-ink: #fff;
  --button-hover: #38383b;
  --link: #0066cc;
  --hero-muted: #86868b;
  --body-muted: #5b5b60;
  --star-border: #d5d5d9;
  --star-hover-border: #b5b5bb;
  --selection: #cce5ff;
}
.nav { background: var(--nav-surface); }
.skip, .github-stars { background: var(--surface); }
.nav-download, .dark { color: var(--button-ink); }
.nav-download:hover, .dark:hover { background: var(--button-hover); }
.hero h1 span { color: var(--hero-muted); }
.hero-copy { color: var(--body-muted); }
.text-link, .credit a { color: var(--link); }
.open-source, .github-stars:hover { background: var(--surface-raised); }
.github-stars { border-color: var(--star-border); }
.github-stars:hover { border-color: var(--star-hover-border); }
::selection { background: var(--selection); }
:focus-visible { outline-color: var(--link); }


  :root[data-theme="dark"] {
    --page: #111113;
    --ink: #f5f5f7;
    --muted: #a1a1aa;
    --line: #303035;
    --nav-surface: rgba(17,17,19,.88);
    --surface: #1c1c1f;
    --surface-raised: #1b1b1e;
    --button-ink: #171719;
    --button-hover: #d7d7dd;
    --link: #70b7ff;
    --hero-muted: #a1a1aa;
    --body-muted: #b4b4bd;
    --star-border: #404047;
    --star-hover-border: #73737e;
    --selection: #224b77;
  }
  :root[data-theme="dark"] .demo-window {
    border-color: #34343b;
    box-shadow: 0 28px 54px -32px #000b, 0 0 0 1px #ffffff0d;
  }

@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--page); }
}

.download-total { min-height: 20px; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.download-total a { font-variant-numeric: tabular-nums; }
.scroll-reveal { transition: opacity 700ms cubic-bezier(.22,1,.36,1), transform 700ms cubic-bezier(.22,1,.36,1); }
.reveal-pending { opacity: 0; transform: translateY(18px); }
.scroll-reveal:focus-within { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
}
@media print {
  .scroll-reveal { opacity: 1; transform: none; }
}

/* Reserve icon space so morphs never move the surrounding label. */
.link-icon { display: inline-block; vertical-align: -4px; width: 18px; height: 18px; margin-left: 4px; }
.button .link-icon { margin-left: 0; }
.nav-download { display: inline-flex; align-items: center; gap: 8px; }
.nav-download .link-icon { width: 15px; height: 15px; margin-left: 0; }
.credit .link-icon, .footer .link-icon { width: 14px; height: 14px; vertical-align: -2px; }

/* The cutout's rear hinge meets the display; transparent margins stay outside. */
.macbook { isolation: isolate; pointer-events: none; }
.macbook .demo-window { width: 65%; margin-inline: auto; z-index: 1; border-radius: 18px 18px 5px 5px; box-shadow: 0 0 0 1px #ffffff26; }
.macbook-base { display: block; width: 100%; height: auto; margin-top: calc(-10.6% - 2px); margin-bottom: -9%; position: relative; z-index: 0; pointer-events: none; }
#scrub-preview { position: absolute; inset: 0; width: 100%; height: 100%; }
#scrub-preview[hidden] { display: none; }
.replay { z-index: 2; }
input[type=range] { min-height: 44px; touch-action: pan-y; }
@media(max-width:700px) {
  .macbook .demo-window { border-width: 4px; border-radius: 10px 10px 3px 3px; }
  .macbook .replay { padding: 8px; bottom: 7px; right: 7px; }
  .macbook .replay span { display: none; }
}

/* Rotate around the rear hinge while the keyboard remains on the desk. */
.macbook { perspective: 1200px; perspective-origin: 50% 40%; --lid-angle: 0deg; --lid-shade: 0; }
.lid-stage { position: relative; width: 65%; aspect-ratio: 1.6; margin-inline: auto; transform-origin: 50% 100%; transform: rotateX(var(--lid-angle)); transform-style: preserve-3d; z-index: 2; }
.macbook .lid-stage .demo-window { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lid-back { position: absolute; inset: 0; border-radius: 18px 18px 5px 5px; background: linear-gradient(145deg,#e4e5e7,#b7b9bd 65%,#d1d3d6); border: 1px solid #a6a8ac; box-shadow: inset 0 1px 2px #fff9; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.macbook .demo-window::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: #000; opacity: var(--lid-shade); }
.demo-controls { position: relative; z-index: 3; isolation: isolate; flex-wrap: wrap; justify-content: center; pointer-events: auto; }
.demo-controls .replay { position: static; min-height: 44px; font-size: 14px; color: var(--ink); background: var(--surface-raised); border-color: var(--line); }
.demo-controls .range-wrap { flex: 1; }
@media(max-width:700px) { .demo-controls { gap: 12px; } .demo-controls .range-wrap { flex-basis: 100%; } .lid-back { border-radius: 10px 10px 3px 3px; } }

/* The light belongs to the hero, never to the controls above it. */
.light-stage { position:relative; isolation:isolate; overflow:hidden; }
#ascii-art { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:0; transition:opacity 1.2s ease; }
.has-light #ascii-art { opacity:1; }
.light-stage .hero { position:relative; }
.light-stage .demo-section { position:relative; }
@media (prefers-reduced-motion:reduce) { #ascii-art { transition:none; } }

.maker { display:grid; grid-template-columns:1fr 1.6fr; gap:80px; padding-block:96px 48px; }
.maker-signature { display:block; margin-bottom:22px; font-family:Georgia,serif; font-size:32px; font-style:italic; color:var(--link); letter-spacing:-1px; }
.maker-heading h2 { font-size:clamp(34px,4vw,46px); }
.maker-note p { font-size:17px; line-height:1.7; color:var(--muted); margin:0 0 20px; }
.maker-note p:first-child { color:var(--ink); }
.coffee { background:var(--surface-raised); border:1px solid var(--line); color:var(--ink); margin-top:5px; }
.coffee:hover { border-color:var(--muted); background:var(--surface); }
.support-note { display:block; color:var(--muted); font-size:13px; margin-top:12px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:700px) { .maker { grid-template-columns:1fr; gap:10px; padding-block:64px 20px; } .maker-heading h2 br { display:none; } }

/* Compatibility stays visible before the download, including on touch devices. */
.compatibility-note{display:block;margin:9px auto 0;padding:6px 8px;border:0;background:none;color:var(--blue);font-size:12px;line-height:1.5;text-wrap:balance}
.compatibility-note:hover{text-decoration:underline;text-underline-offset:3px}
#compatibility-dialog{position:fixed;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 40px);padding:30px;border:1px solid var(--line);border-radius:24px;background:var(--page);color:var(--ink);box-shadow:0 24px 90px #0004;overflow:auto;text-align:left}
#compatibility-dialog::backdrop{background:#0006;backdrop-filter:blur(8px)}
#compatibility-dialog[open]{animation:compatibility-enter .22s ease-out}
#compatibility-dialog h2{font-size:29px;letter-spacing:-.04em;margin:0 24px 14px 0}
#compatibility-dialog p{font-size:14px;line-height:1.55;color:var(--muted);margin:6px 0 16px}
#compatibility-dialog .compatibility-kicker{font-size:12px;margin:0 0 10px;color:var(--muted)}
.compatibility-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:25px}
.compatibility-close:hover{background:var(--line)}
.model-note{padding:12px 0;border-top:1px solid var(--line);font-size:13px}
#compatibility-dialog .model-note p{margin:5px 0 0}
#compatibility-dialog .preview-note{font-size:12px;margin:10px 0 20px}
#compatible-download{width:100%;font-size:14px}
@keyframes compatibility-enter{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#compatibility-dialog[open]{animation:none}}

@media print { #ascii-art { display:none!important; } }

/* Larger character drawings, with one horizontal row of feature stories. */
.details { display: block; }
.details-intro { display: block; max-width: 610px; margin-bottom: 52px; }
.details-intro > .eyebrow, .details-intro > h2, .details-intro > p { grid-column: 1; }
.details-intro > p:not(.eyebrow) { max-width: 550px; margin: 0; font-size: 18px; line-height: 1.55; color: var(--muted); letter-spacing: -.2px; }
.details-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; padding: 0; }
.details-list > div { min-width: 0; }
.feature-ascii {
  display: grid;
  place-content: center;
  height: 220px;
  margin: 0 0 26px;
  color: #5754bd;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0;
  white-space: pre;
  user-select: none;
}
:root[data-theme="dark"] .feature-ascii { color: #aaa9ee; }
@media (min-width: 701px) and (max-width: 1000px) {
  .details-list { gap: 24px; }
  .feature-ascii { font-size: 9px; height: 180px; }
}
@media (max-width: 700px) {
  .details-intro { grid-template-columns: 1fr; gap: 0; margin-bottom: 30px; }
  .details-intro > p:not(.eyebrow) { max-width: none; }
  .details-list { grid-template-columns: 1fr; gap: 32px; }
  .feature-ascii { margin-bottom: 18px; }
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.theme-toggle {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-grid; place-items: center; padding: 5px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink);
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--surface-raised); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-moon { display: none; }
:root[data-theme="dark"] .theme-sun { display: none; }
:root[data-theme="dark"] .theme-moon { display: block; }
/* The outgoing appearance closes like a lid, revealing the new one underneath. */
::view-transition-group(root) { animation-duration: 650ms; perspective: 1800px; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 2; transform-origin: 50% 100%; backface-visibility: hidden; }
::view-transition-new(root) { z-index: 1; }
@media (max-width: 420px) {
  .nav-links { gap: 6px; }
  .nav-download { display: none; }
}

/* The header lifts off the page into a compact pane of glass. */
.nav {
  height: 67px;
  background: var(--page);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  transition: background 420ms ease, border-color 420ms ease;
}
.nav-inner {
  position: relative;
  width: calc(100% - 32px);
  max-width: 860px;
  height: 66px;
  padding: 0 16px;
  gap: 24px;
  border: 1px solid transparent;
  border-radius: 0;
  pointer-events: auto;
  background: transparent;
  transform: translateY(0);
  transition: max-width 520ms cubic-bezier(.22,1,.36,1), transform 520ms cubic-bezier(.22,1,.36,1), border-radius 520ms cubic-bezier(.22,1,.36,1), background 420ms ease, border-color 420ms ease, box-shadow 520ms ease;
}
.nav-links { gap: 14px; }
.nav-links > a:not(.nav-download):not(.github-stars) { display: inline-flex; align-items: center; min-height: 44px; }
.nav .theme-toggle { margin-left: -8px; }
.nav.is-floating { background: transparent; border-color: transparent; }
.nav.is-floating .nav-inner {
  max-width: 790px;
  transform: translateY(12px);
  border-radius: 24px;
  background: rgba(250,250,250,.78);
  border-color: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 12px 34px -12px #172a4430, inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff70;
}
:root[data-theme="dark"] .nav.is-floating .nav-inner {
  background: rgba(28,28,33,.78);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 12px 34px -12px #0009, inset 0 1px 0 #ffffff24, inset 0 -1px 0 #ffffff08;
}
.nav.is-floating .github-stars { background: transparent; }
@media (max-width: 850px) { .nav-links > a[href="#effect"] { display: none; } }
@media (max-width: 700px) {
  .nav { height: 61px; }
  .nav-inner { width: calc(100% - 24px); height: 60px; padding-inline: 12px; gap: 12px; }
  .nav-links { gap: 10px; }
  .nav-links > a[href="#open-source"] { display: none; }
  .nav.is-floating .nav-inner { transform: translateY(8px); border-radius: 21px; }
}
@media (max-width: 420px) {
  .nav-inner { gap: 8px; padding-inline: 10px; }
  .nav .wordmark { font-size: 17px; gap: 7px; }
  .nav .wordmark img { width: 25px; height: 25px; }
  .nav-links { gap: 8px; }
  .nav .github-stars > span:not(.star-count) { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-floating .nav-inner,
  :root[data-theme="dark"] .nav.is-floating .nav-inner {
    background: var(--page);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-floating .nav-inner,
  :root[data-theme="dark"] .nav.is-floating .nav-inner { background: var(--page); }
}

/* Full-bleed branching artwork sits behind the open-source invitation. */
.open-source { position: relative; isolation: isolate; overflow: hidden; }
#shared-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.open-inner { position: relative; }
@media print { #shared-art { display: none; } }

#compatibility-dialog { width: min(940px, calc(100vw - 32px)); padding: 30px; }
#compatibility-dialog .compat-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 16px 0; border-block: 1px solid var(--line); }
#compatibility-dialog .compat-legend p { margin: 0; font-size: 13px; }
#compatibility-dialog .compat-legend strong { color: var(--ink); }
#compatibility-dialog .compat-find { margin: 16px 0 10px; font-size: 13px; }
.compat-find span { color: var(--muted); }
.compat-table-wrap { max-height: 44vh; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 10px; }
.compat-table-wrap:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.compat-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 13px; line-height: 1.5; }
.compat-table caption { padding: 12px 14px; text-align: left; color: var(--muted); font-size: 12px; }
.compat-table th, .compat-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compat-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-raised); font-weight: 600; white-space: nowrap; }
.compat-table tbody th { font-weight: 550; }
.compat-table tbody th > span { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.compat-table .compat-family th { background: var(--surface-raised); font-weight: 650; padding-block: 9px; }
.compat-table td > a, #compatibility-dialog .compat-footnote a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.compat-status { white-space: nowrap; }
.compat-status.tested { font-weight: 650; color: var(--ink); }
.compat-status.expected { color: var(--link); }
.compat-status.limited { color: var(--muted); }
#compatibility-dialog .compat-footnote { font-size: 12px; margin: 12px 0; }
#compatible-download { margin-top: 8px; }
@media (max-width: 600px) {
  #compatibility-dialog { padding: 22px 18px; }
  #compatibility-dialog .compat-legend { grid-template-columns: 1fr; gap: 10px; }
  .compat-table-wrap { max-height: 40vh; }
}

/* One decision at a time; the detailed research stays available on demand. */
#compatibility-dialog { width: min(510px, calc(100vw - 32px)); padding: 34px; }
#compatibility-dialog.show-reference { width: min(940px, calc(100vw - 32px)); }
#compatibility-dialog #compatibility-title { font-size: 30px; line-height: 1.12; }
#compatibility-title:focus { outline: none; }
#compatibility-intro:empty { display: none; }
.compat-panel[hidden], #compat-back[hidden], #compatible-download[hidden], #compat-source[hidden] { display: none; }
.compat-panel { animation: compat-step-in 200ms ease-out; }
.compat-families { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 10px; }
.compat-families button { min-height: 108px; text-align: left; padding: 20px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.compat-families button:hover { background: var(--surface-raised); border-color: var(--link); }
.compat-families strong { display: block; font-size: 17px; font-weight: 600; }
.compat-families span { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }
.compat-quiet { min-height: 44px; border: 0; padding: 10px 0; background: none; color: var(--link); font-size: 13px; }
.compat-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
#compat-model-step label { display: block; font-size: 14px; margin: 24px 0 9px; }
#compat-model { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
#compat-model:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
#compatibility-dialog .compat-help { font-size: 12px; margin: 10px 0 24px; }
#compat-continue { width: 100%; border: 0; min-height: 48px; }
#compat-continue:disabled { opacity: .45; cursor: default; }
#compatibility-dialog #compat-selected { font-size: 13px; margin: 14px 0 20px; color: var(--link); }
#compatibility-dialog #compat-result-copy { font-size: 16px; line-height: 1.6; color: var(--ink); }
#compatibility-dialog #compat-result-requirement { font-size: 12px; }
#compat-result-requirement:empty { display: none; }
.compat-reference { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 12px; }
.compat-reference summary { cursor: pointer; font-size: 13px; color: var(--muted); padding-block: 10px; }
.compat-reference[open] summary { margin-bottom: 12px; }
@keyframes compat-step-in { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .compat-panel { animation: none; } }
@media (max-width: 420px) {
  #compatibility-dialog { padding: 28px 20px; }
  #compatibility-dialog #compatibility-title { font-size: 27px; }
  .compat-families button { padding: 16px 12px; }
  .compat-families strong { font-size: 15px; }
  .compat-families span { line-height: 1.5; }
}

/* BendMac's sign-off is made of letters that bend, in its own blue. */
.site-footer { overflow: hidden; }
.footer-art {
  display: flex; align-items: flex-end; justify-content: center;
  min-height: clamp(150px, 31vw, 570px);
  padding: 3vw 1vw 0;
  overflow: hidden;
  color: var(--blue);
}
.footer-type {
  display: flex; justify-content: center; align-items: baseline;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 20vw; font-weight: 750; line-height: .95;
  letter-spacing: -.035em; perspective: 1200px;
  user-select: none;
}
.footer-type span { display: block; transform-origin: 50% 100%; }
:root[data-theme="dark"] .footer-art { color: #70b7ff; }
@media print { .footer-art { display: none; } }

.wizard-rail { display: flex; align-items: flex-start; gap: 8px; padding: 0; margin: 18px 0 28px; list-style: none; }
.wizard-rail li { display: flex; flex: 1; align-items: flex-start; gap: 8px; }
.wizard-rail li:last-child { flex: 0; }
.wizard-rail button { display: grid; justify-items: center; gap: 6px; min-width: 54px; min-height: 56px; padding: 6px 0; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.wizard-rail button:disabled { cursor: default; opacity: .55; }
.wizard-number { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 12px; font-weight: 600; transition: background 220ms ease, color 220ms ease, transform 300ms ease; }
.wizard-rail button[aria-current="step"] { color: var(--ink); }
.wizard-rail button[aria-current="step"] .wizard-number { border-color: var(--blue); color: var(--link); transform: scale(1.08); }
.wizard-rail .is-done .wizard-number { color: #fff; background: var(--blue); border-color: var(--blue); }
.wizard-connector { position: relative; flex: 1; height: 3px; margin-top: 20px; border-radius: 2px; overflow: hidden; background: var(--line); }
.wizard-connector::after { content: ''; position: absolute; inset: 0; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform 380ms cubic-bezier(.23,1,.32,1); }
.is-done .wizard-connector::after { transform: scaleX(1); }
.compat-panel { animation: none; }
.compat-families button { min-height: 90px; }
@media (max-width: 420px) { .wizard-rail { gap: 4px; } .wizard-rail li { gap: 4px; } }

.compat-result-status { display: inline-flex; align-items: center; padding: 10px 14px; margin: 0 0 14px; border-radius: 10px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.compat-result-status.success { background: #e5f5eb; color: #17653a; }
.compat-result-status.caution { background: #fff1d2; color: #805400; }
.compat-result-status.unsupported { background: #ffe8e6; color: #a22c25; }
:root[data-theme="dark"] .compat-result-status.success { background: #153a28; color: #9be5b7; }
:root[data-theme="dark"] .compat-result-status.caution { background: #3c3016; color: #f5cf7d; }
:root[data-theme="dark"] .compat-result-status.unsupported { background: #421f23; color: #ffaaa5; }
#compatibility-dialog #compat-result-copy { font-size: 14px; margin-bottom: 12px; }
#compatibility-dialog #compat-selected { margin-bottom: 16px; }