:root {
  --paper: #F4F1EA; --paper-deep: #ECE7DC; --ink: #22201C; --ink-2: #5E5A52; --ink-3: #6E695F;
  --pointer: #F0452B;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.site-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 4vw, 40px); max-width: 1200px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.brand-icon { width: 28px; height: 28px; display: block; }
.nav-links { display: flex; gap: 22px; font-size: 15px; color: var(--ink-2); }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.hero { text-align: center; padding: 24px 20px 0; max-width: 1200px; margin: 0 auto; }
h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 14px; font-weight: 750; }
h1 em { font-style: normal; color: var(--pointer); }
.lede { margin: 0 auto 22px; color: var(--ink-2); max-width: 580px; font-size: clamp(16px, 1.6vw, 18px); }
.ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 12px 22px; font-weight: 600; font-size: 15px; text-decoration: none; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; }
.btn-ghost { box-shadow: inset 0 0 0 1.5px rgba(34, 32, 28, .25); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--pointer); outline-offset: 3px; }
.label-narrow, .phone-note { display: none; }
/* On a Windows PC (platform.js sets html[data-platform="windows"]) the homepage reads Windows first:
   .windows-only copy replaces its .mac-only twin. */
.windows-only, .platforms a.windows-only, html[data-platform="windows"] .mac-only { display: none; }
html[data-platform="windows"] .windows-only { display: inline; }
html[data-platform="windows"] .platforms a.windows-only { display: inline-flex; }
.requirements { color: var(--ink-3); font-size: 13px; margin: 14px 0 0; }
.section { max-width: 1080px; margin: 0 auto; padding: 96px 20px 0; }
.section h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.02em; margin: 0 0 24px; }
.site-footer { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; padding: 96px 20px 48px; color: var(--ink-2); font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage { width: min(900px, 92vw); margin: 40px auto 0; }
.laptop { position: relative; }
.lid { background: #1b1b1d; border-radius: 18px 18px 6px 6px; padding: 12px 12px 14px; box-shadow: 0 0 0 1.5px #3a3a3e inset, 0 30px 70px rgba(0, 0, 0, .18); }
.screen { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: linear-gradient(160deg, #F7C9A9 0%, #E9A8A0 35%, #9AA9D6 75%, #7C8CC9 100%); container-type: inline-size; font-size: clamp(7px, 1.35cqi, 12px); text-align: left; }
.base { height: 14px; margin: 0 -6%; background: linear-gradient(#cfcfd3, #9b9ba1); border-radius: 0 0 14px 14px; position: relative; }
.base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 5px; transform: translateX(-50%); background: #8a8a90; border-radius: 0 0 6px 6px; }
.caption { color: var(--ink-3); font-size: 14px; text-align: center; margin: 22px 0 0; min-height: 1.6em; }

.menubar { position: absolute; inset: 0 0 auto 0; height: 4.6%; background: rgba(255, 255, 255, .35); display: flex; align-items: center; padding: 0 1.4%; gap: 1.6%; color: #1f1f1f; z-index: 2; }
.menubar-right { margin-left: auto; }
.apple { width: .9em; height: .9em; border-radius: 50%; background: #1f1f1f; }

.island { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 15%; height: 4.6%; background: #000; border-radius: 0 0 1.4cqi 1.4cqi; z-index: 20; color: #fff; overflow: hidden; display: flex; align-items: flex-end; transition: width .55s cubic-bezier(.2, .9, .25, 1.15), height .55s cubic-bezier(.2, .9, .25, 1.15); }
.island.open { width: 50%; height: 16%; border-radius: 0 0 2.6cqi 2.6cqi; }
.island-content { opacity: 0; transition: opacity .25s; display: flex; align-items: center; gap: 1.4cqi; padding: 0 2cqi 1.6cqi; width: 100%; font-size: 1.15em; }
.island.open .island-content { opacity: 1; transition-delay: .25s; }
.said { white-space: nowrap; overflow: hidden; }
.keys { margin-left: auto; color: #9a9a9a; font-size: .85em; white-space: nowrap; }
.wave { display: flex; gap: .25em; align-items: center; height: 1.6em; }
.wave i { display: block; width: .25em; border-radius: 2px; background: var(--pointer); height: .4em; animation: wave-bar .9s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .1s; } .wave i:nth-child(3) { animation-delay: .2s; } .wave i:nth-child(4) { animation-delay: .3s; } .wave i:nth-child(5) { animation-delay: .15s; }
@keyframes wave-bar { 0%, 100% { height: .4em; } 50% { height: 1.5em; } }

.win { position: absolute; left: 14%; top: 14%; width: 62%; height: 72%; background: #FBFAF8; border-radius: 1.1cqi; box-shadow: 0 18px 50px rgba(30, 20, 40, .28); overflow: hidden; color: #222; display: flex; }
.lights { position: absolute; top: 2.4%; left: 1.6%; display: flex; gap: .4em; }
.lights i { width: .8em; height: .8em; border-radius: 50%; background: #ff5f57; } .lights i:nth-child(2) { background: #febc2e; } .lights i:nth-child(3) { background: #28c840; }
.side { width: 34%; background: #EFEDEA; padding: 9% 1.2% 1.2%; display: flex; flex-direction: column; gap: .15em; }
.side > div { padding: .45em .7em; border-radius: .5em; display: flex; align-items: center; gap: .7em; white-space: nowrap; }
.side > div.active { background: #d9d6d1; }
.dot { width: 1.2em; height: 1.2em; border-radius: .35em; flex: none; }
.dot-blue { background: #3b82f6; } .dot-red { background: #ef4444; } .dot-purple { background: #a855f7; } .dot-green { background: #22c55e; } .dot-grey { background: #9ca3af; }
.main { flex: 1; padding: 9% 3% 3%; position: relative; }
.main h4 { margin: 0 0 .9em; font-size: 1.15em; }
.row { display: flex; justify-content: space-between; background: #fff; border: 1px solid #ebe8e3; border-radius: .6em; padding: .7em .9em; margin-bottom: .5em; }
.pane { transition: opacity .3s; }
.pane[hidden] { display: block; opacity: 0; position: absolute; inset: 9% 3% auto 3%; pointer-events: none; }

.pointer { position: absolute; left: 0; top: 0; width: 2cqi; height: 2cqi; z-index: 30; filter: drop-shadow(0 0 6px rgba(240, 69, 43, .9)); transform-origin: center; opacity: 0; transition: opacity .3s; pointer-events: none; }
.pointer.visible { opacity: 1; }
.bubble { position: absolute; z-index: 31; background: var(--pointer); color: #fff; font-weight: 600; padding: .35em .8em; border-radius: .5em; white-space: nowrap; box-shadow: 0 0 14px rgba(240, 69, 43, .6); transform: scale(.4); opacity: 0; transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), opacity .25s; pointer-events: none; }
.bubble.visible { transform: scale(1); opacity: 1; }

.mark { position: absolute; z-index: 25; pointer-events: none; overflow: visible; }
.mark .outline { fill: none; stroke: var(--pointer); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s ease-in-out; }
.mark .fill { opacity: 0; transition: opacity .6s ease-out; }
.mark circle { fill: var(--pointer); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .25s cubic-bezier(.2, 1.8, .4, 1); }
.mark.points circle { transform: scale(1); }
.mark.drawn .outline { stroke-dashoffset: 0; }
.mark.filled .fill { opacity: 1; }
.mark.fade { opacity: 0; transition: opacity .5s; }

.compose { position: absolute; left: 22%; top: 30%; width: 52%; background: #fff; border-radius: 1.1cqi; box-shadow: 0 18px 50px rgba(30, 20, 40, .28); padding: 1.2em 1.4em; font-size: 1.05em; opacity: 0; transition: opacity .4s; z-index: 15; }
.compose.visible { opacity: 1; }
.to { color: #888; border-bottom: 1px solid #eee; padding-bottom: .5em; margin-bottom: .7em; }
.caret { display: inline-block; width: 1.5px; height: 1.1em; background: #222; vertical-align: -.2em; animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.orb { position: absolute; bottom: 3%; left: 50%; transform: translateX(-50%) translateY(10px); background: #111; color: #fff; border-radius: 999px; padding: .5em 1em; display: flex; gap: .7em; align-items: center; opacity: 0; transition: opacity .3s, transform .3s; z-index: 22; }
.orb.visible { opacity: 1; transform: translateX(-50%); }
.screen[data-state="still"] .bubble:empty { display: none; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }
.card video { display: block; width: 100%; height: auto; aspect-ratio: 960 / 630; object-fit: cover; background: #10141c; }
.card h3 { margin: 18px 20px 6px; font-size: 19px; }
.card p { margin: 0 20px 22px; color: var(--ink-2); font-size: 15px; }
.points { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.points li { color: var(--ink-2); }
.points strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.open-source-line { color: var(--ink-2); margin: 0 0 20px; }
.ctas-left { justify-content: flex-start; }
@media (max-width: 820px) { .cards, .points { grid-template-columns: 1fr; } }

.try { position: relative; text-align: center; background: radial-gradient(120% 90% at 50% 0%, #2a2522 0%, #141210 65%); color: #EDE9E1; border-radius: 28px; padding: 120px 24px 80px; margin-top: 96px; overflow: hidden; container-type: inline-size; font-size: 14px; }
.try h2 { color: #EDE9E1; }
.try-line { color: #b0aa9f; max-width: 520px; margin: 0 auto 28px; }
.try .btn-primary { background: #EDE9E1; color: #141210; }
.try .requirements { color: #8e877b; }
.brew code { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-ligatures: none; user-select: all; }
.page-demo .island { width: 20%; height: 26px; }
.page-demo .island.open { width: 56%; height: 72px; border-radius: 0 0 22px 22px; }
.page-demo .island-content { font-size: 14px; }
.page-demo .pointer { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .label-wide { display: none; }
  .label-narrow { display: inline; }
  .also-linux-inline { display: block; margin-top: 4px; }
  .also-linux-inline .separator { display: none; }
  .phone-note { display: block; color: var(--ink-2); font-size: 14px; margin: 6px 0 0; }
  .nav-links a[href="#what"] { display: none; }
  .page-demo { display: none; }
  .try { padding-top: 64px; }
  .stage { width: 100%; }
}

/* Clicky on the page (buddy.js): fixed to the viewport, never takes a click. */
.buddy, .buddy-caption { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; }
.buddy { width: 16px; height: 16px; filter: drop-shadow(0 0 8px rgba(240, 69, 43, .9)); transition: opacity .25s; }
.buddy svg { display: block; width: 100%; height: 100%; }
.buddy-caption { max-width: 300px; background: var(--pointer); color: #fff; font: 500 12px/1.4 var(--font); padding: 5px 9px; border-radius: 6px; box-shadow: 0 0 12px rgba(240, 69, 43, .5); opacity: 0; transition: opacity .3s; }
.buddy-caption.visible { opacity: 1; }
.buddy.hidden, .buddy-caption.hidden { opacity: 0; }

.eyebrow { color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: .01em; margin: 0 0 14px; }
.faq { display: grid; gap: 10px; max-width: 780px; }
.faq details { background: #fff; border-radius: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, .04); }
/* The browser's triangle hung on the card's edge, outside the text: a chevron on the right instead,
   with the question and its answer sharing one left edge. */
.faq summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq summary:hover::after { border-color: var(--ink); }
.faq summary:focus-visible { outline: 3px solid var(--pointer); outline-offset: 2px; }
.faq details p { margin: -4px 0 0; padding: 0 20px 18px; color: var(--ink-2); }
.faq details p a { color: var(--ink); }

/* Linux is new and early: one line under each download button, quieter than the button. */
.also-linux { font-size: 14px; color: var(--ink-2); margin: 10px 0 0; }
.also-linux a { color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.also-linux a:hover { text-decoration: underline; }
.early-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pointer); border: 1px solid rgba(240, 69, 43, .45); border-radius: 999px; padding: 1px 7px; margin-right: 4px; vertical-align: 1px; }
/* In the hero the Linux link shares the requirements line: a line of its own pushed the laptop demo
   below the 35% it needs in view to start playing. */
.also-linux-inline { white-space: nowrap; }
.also-linux-inline a { color: var(--ink); font-weight: 600; text-decoration: none; }
.also-linux-inline a:hover { text-decoration: underline; }
.try .also-linux { color: #b0aa9f; }
.try .also-linux a { color: #EDE9E1; }

/* Windows on the homepage: a card between Open source and the FAQ, and pills under the closing button. */
.platform-card { display: flex; align-items: center; justify-content: space-between; gap: 32px; background: #fff; border-radius: 22px; padding: 32px 36px; box-shadow: 0 6px 24px rgba(0, 0, 0, .06); }
.platform-card h2 { margin: 6px 0 8px; }
.platform-card p { margin: 0; color: var(--ink-2); max-width: 560px; }
.platform-card .eyebrow { margin: 0; }
.platform-card .requirements { margin-top: 10px; }
.platform-card .ctas { flex: none; flex-direction: column; align-items: stretch; }
.win-glyph { width: 15px; height: 15px; flex: none; fill: currentColor; }
.btn-primary .win-glyph { fill: #5aa2ff; }
.platform-keys { color: var(--ink); font-weight: 600; white-space: nowrap; }
.platforms { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 22px 0 0; }
.platforms a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; color: #EDE9E1; box-shadow: inset 0 0 0 1.5px rgba(237, 233, 225, .28); }
.platforms a:hover { box-shadow: inset 0 0 0 1.5px rgba(237, 233, 225, .6); }
.platforms .early-tag { margin: 0; }
.platforms .platform-note { color: #b0aa9f; font-weight: 500; }
@media (max-width: 820px) {
  .platform-card { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
  .platform-card .ctas { align-self: stretch; }
}