/* A responsive, sunlit desktop. Windows stay in normal flow until dragged. */
:root {
  --blue: #215bef; --violet: #7441d9; --ink: #142137; --ink-soft: #35465b; --muted: #52647b;
  --glass: rgba(249, 252, 255, .88); --line: rgba(49, 77, 110, .17);
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Inter Tight", "Inter", sans-serif; --hand: "Kalam", cursive; --pixel: "VT323", monospace;
  --glow-blue: 0 0 0 3px #678cff40, 0 0 14px #4175ff80, 0 0 25px #9a62ff50;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; color: var(--ink); font-family: var(--sans); background: #edf3f8; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, [tabindex="-1"]:focus-visible { outline: 3px solid #254feb; outline-offset: 5px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; top: -80px; left: 16px; padding: 14px; background: white; border-radius: 8px; z-index: 100; }
.skip-link:focus { top: 12px; }
.stage-frame { background: #397ced url("assets/xp-bliss.webp") center / cover no-repeat; }
.stage {
  position: relative; isolation: isolate; max-width: 1800px; margin: auto;
  display: grid; grid-template-columns: minmax(250px, 1fr) minmax(460px, 1.6fr) minmax(250px, 1fr);
  grid-template-rows: 80px 350px 364px minmax(68px, 1fr) 38px;
  column-gap: 32px; padding: 0 40px 0 118px; min-height: max(900px, 100svh);
}
.stage > * { min-width: 0; }
/* A little light behind the headline keeps the blue and purple type legible. */
.stage::before { content: ""; position: absolute; z-index: -1; inset: 40px 20% 45%; background: radial-gradient(ellipse, #f4fbffb8, #e4f4ff50 55%, transparent 72%); pointer-events: none; }
.topbar { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; z-index: 40; }
.brand { display: inline-flex; align-items: center; gap: 9px; justify-self: start; font-size: 28px; font-weight: 700; letter-spacing: -.04em; text-decoration: none; }
.brand img { filter: drop-shadow(0 2px 5px #4377b644); }
.topnav { display: flex; gap: 4px; padding: 4px; background: #f7fcff91; border: 1px solid #ffffffa8; border-radius: 30px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 8px #37659b0a; }
.topnav a { font-size: 12px; font-weight: 600; text-decoration: none; padding: 9px 15px; border-radius: 24px; }
.topnav a:hover, .pill:hover { background: #fff; }
.topbar-actions { display: flex; gap: 16px; align-items: center; justify-self: end; }
.pill { font-size: 12px; font-weight: 600; text-decoration: none; padding: 10px 13px; border-radius: 20px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 19px; border-radius: 22px; font: 600 12px/1.2 var(--sans); text-decoration: none; transition: transform .18s, box-shadow .18s; }
.button svg { flex-shrink: 0; }
.button-glossy { color: #fff; background: linear-gradient(#4485ff, #2163f1 48%, #2455df 52%, #3265ed); border: 1px solid #2558d2; box-shadow: inset 0 1px 1px #ffffffb3, inset 0 -1px 2px #1134a680, 0 4px 10px #235dde33, 0 0 18px #5f8bff20; text-shadow: 0 1px 1px #163b9e; }
.button-glossy:hover { transform: translateY(-2px); box-shadow: inset 0 1px 1px #fff, 0 6px 16px #235dde50; }
.button-light { color: var(--ink); background: linear-gradient(#fff, #f9fcff 48%, #e7eff8 52%, #f9fcff); border-color: #9eb6d0; box-shadow: inset 0 1px 0 #fff, 0 4px 10px #34557915; text-shadow: none; }
.button-large { padding: 14px 22px; font-size: 14px; border-radius: 25px; }
.button-disabled { cursor: default; }
.button-disabled:hover { transform: none; }
/* Downloads keep the saturated primary treatment while the release is pending. */
[data-download].button-light { color: #fff; background: linear-gradient(#4485ff, #2163f1 48%, #2455df 52%, #3265ed); border-color: #2558d2; box-shadow: inset 0 1px 1px #ffffffb3, 0 4px 10px #235dde33; }
.hero { grid-column: 2; grid-row: 2; text-align: center; align-self: start; padding-top: 20px; z-index: 5; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #364d66; margin-bottom: 14px; }
.eyebrow::before { content: "✦ "; color: #3465cc; }
.hero h1 { font: 800 clamp(58px, 4.4vw, 70px)/.99 var(--display); letter-spacing: -.045em; word-spacing: .015em; color: #101c2d; }
.gradient-text { background: linear-gradient(100deg, #1642bd 10%, #4630bf 55%, #7531b4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.caret { display: inline-block; width: 3px; height: .78em; margin-left: .08em; vertical-align: -.06em; background: #4a3fc4; animation: caret-blink 1.1s steps(2) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
.desktop-birds { position: absolute; inset: 0; pointer-events: none; }
.desktop-birds svg { position: absolute; width: 26px; opacity: .9; filter: drop-shadow(0 1px 2px #3f6fb066); }
.desktop-birds svg:nth-child(1) { top: 128px; left: 30%; }
.desktop-birds svg:nth-child(2) { top: 150px; left: 33%; width: 18px; }
.desktop-birds svg:nth-child(3) { top: 112px; right: 30%; width: 22px; }
.margin-note { position: absolute; z-index: 1; left: 34px; bottom: 62px; font: 18px/1.2 var(--pixel); color: #f4fbff; text-shadow: 0 1px 3px #17321e, 0 1px 6px #17321e88; pointer-events: none; }
.hero-lede { max-width: 440px; margin: 16px auto 0; color: #263e56; font-size: 13px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.hero-note { margin: 13px auto 0; max-width: 365px; font-size: 10px; line-height: 1.6; color: #344f68; }
.window { position: relative; min-width: 0; border: 3px solid #0b57d3; border-bottom-color: #0848b4; border-radius: 8px 8px 4px 4px; background: var(--glass); box-shadow: 0 0 0 1px #ffffff70, 0 14px 32px #123a6533, inset 0 0 0 1px #ffffffd0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; }
.stage > .window { align-self: start; z-index: 10; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.window[data-dragging] { box-shadow: 0 0 0 1px #34577d55, 0 24px 45px #123a6540; }
.window-titlebar { display: flex; align-items: center; gap: 8px; height: 30px; margin: -1px -1px 0; padding: 0 5px 0 8px; background: linear-gradient(#5da2ff 0%, #2a7cf5 10%, #0d5ee6 45%, #0b56d9 90%, #0a4ec8 100%); box-shadow: inset 0 1px 0 #a9d0ff, inset 0 -1px 0 #0a45b2; color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 1px #063a9c; user-select: none; }
.window-controls { display: inline-flex; gap: 2px; margin-left: auto; }
.window-controls i { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #ffffffd9; border-radius: 4px; background: linear-gradient(#5b9cf7, #2f77ee 50%, #1d63e3); box-shadow: inset 0 1px 0 #a6ccff, 0 1px 1px #05307a66; color: #fff; font: 700 12px/1 var(--sans); font-style: normal; text-shadow: 0 1px 0 #0a3f9e; }
.window-controls i:first-child { align-items: end; padding-bottom: 5px; }
.window-controls .close { background: linear-gradient(#f5a08e, #e2573e 50%, #cf3f28); box-shadow: inset 0 1px 0 #ffc9bd, 0 1px 1px #05307a66; font-size: 14px; text-shadow: 0 1px 0 #8f2a24; }
.window-controls .close:hover { background: linear-gradient(#ffb8a8, #ee6b52 50%, #d94a32); }
[data-drag-handle] { cursor: grab; touch-action: none; }
[data-dragging] [data-drag-handle] { cursor: grabbing; }
.title { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.title img { filter: drop-shadow(0 0 2px #fff); }
.title-icon { font-size: 12px; line-height: 1; filter: drop-shadow(0 1px 0 #0a3f9e); }

.window-body { padding: 32px; }
.win-textedit { grid-column: 1; grid-row: 2; margin-top: 70px; }
.win-terminal { grid-column: 3; grid-row: 2; margin-top: 60px; }
.win-tips { grid-column: 1; grid-row: 3; width: 100%; max-width: 330px; justify-self: center; margin-top: 52px; }
.tips { list-style: none; margin: 0; padding: 14px 16px 4px; display: grid; gap: 15px; }
.tips li { display: flex; align-items: flex-start; gap: 12px; }
.tip-icon { flex-shrink: 0; width: 26px; height: 26px; filter: drop-shadow(0 1px 2px #22385a2e); }
.tip-emoji { display: grid; place-items: center; font-size: 21px; line-height: 1; }
.tips strong { display: block; font-size: 12px; font-weight: 600; color: #16233a; }
.tips span { display: block; margin-top: 2px; font-size: 10.5px; color: #5a6a80; }
.tips-scribble { margin: 6px 18px 12px; text-align: right; font: 700 20px/1 var(--hand); color: #203e6e; }
.tips-scribble span { display: inline-block; margin-left: 6px; font-size: 26px; vertical-align: middle; }
.win-editor { grid-column: 2; grid-row: 3; width: 100%; max-width: 580px; justify-self: center; scroll-margin-top: 28px; }
.win-find { grid-column: 3; grid-row: 3; margin-top: 62px; width: 100%; }
/* TextEdit's example is static, leaving the main demonstration the focus. */
.demo-stage { height: 165px; position: relative; background: #ffffffeb; font-size: 9px; }
.demo-menubar { display: flex; align-items: center; gap: 10px; height: 23px; padding: 0 10px; background: #f4f6f8; border-bottom: 1px solid #dce3eb; }
.demo-menu-apple { width: 7px; height: 8px; border-radius: 45%; background: var(--ink); }
.demo-menu-app { font-weight: 700; }
.demo-target, .target { position: relative; }
.demo-document { display: grid; gap: 8px; padding: 17px 21px; }
.demo-document p { font-size: 11px; font-family: Georgia, serif; color: #6c7380; margin-bottom: 3px; }
.demo-document > span { width: 82%; height: 4px; border-radius: 3px; background: #e1e6eb; }
.demo-document > .short { width: 49%; }
.demo-dropdown { position: absolute; display: grid; min-width: 112px; padding: 4px; border: 1px solid #a4b3c280; border-radius: 5px; background: #fcfdffed; box-shadow: 0 4px 12px #22324a20; }
.demo-dropdown > span { position: relative; display: flex; justify-content: space-between; padding: 4px 7px; border-radius: 3px; }
.demo-format-menu { left: 29%; top: 25px; }
.demo-text-menu { left: 58%; top: 61px; min-width: 100px; }
.demo-dropdown .demo-target { color: #244dab; background: #e3ecff; }
.demo-mark { position: absolute; inset: -2px; border: 1.5px solid #7794f2; border-radius: 5px; box-shadow: 0 0 5px #7794f244; pointer-events: none; }
.demo-mark b { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 12px; height: 12px; font-size: 8px; color: white; background: #6285e9; border-radius: 50%; }
/* Pip as it really appears: the glow pet beside the cursor, a ring on the target, a bubble. */
.pip-point { position: absolute; z-index: 6; left: var(--px); top: var(--py); width: 0; height: 0; pointer-events: none; filter: drop-shadow(0 2px 6px #1c355f33); }
.pip-point > * { position: absolute; }
.pip-cursor { left: 0; top: 0; width: 19px; height: 19px; }
.pip-point .orb-pet { left: 15px; top: 19px; width: 22px; height: 22px; animation: none; }
.pip-bubble { left: 38px; top: 14px; margin: 0; padding: 6px 9px; width: max-content; max-width: 160px; background: #fff; border: 1px solid #c4d3ea; border-radius: 10px 10px 10px 3px; font: 500 10.5px/1.35 var(--sans); color: #16233a; }
.pip-point-left .pip-bubble { left: auto; right: 6px; top: 20px; border-radius: 10px 10px 3px 10px; white-space: nowrap; }
.waveform { flex-shrink: 0; }
.waveform { display: inline-flex; align-items: center; gap: 3px; height: 22px; }
.waveform i { width: 3px; height: 45%; border-radius: 3px; background: linear-gradient(#688bec, #9873d9); animation: wave 2.4s ease-in-out infinite; }
.waveform i:nth-child(2n) { animation-delay: -.5s; }
.waveform i:nth-child(3n) { animation-delay: -1.3s; }
.waveform i:nth-child(4n) { animation-delay: -.8s; }
.waveform-small { height: 17px; gap: 2px; }
@keyframes wave { 0%, 100% { height: 25%; } 50% { height: 80%; } }
.orb {
  display: inline-block; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #ffffff 0%, #f3f0ff 18%, #6f8cff 48%, #8B5CF6 82%, rgba(139, 92, 246, 0) 100%);
  box-shadow: 0 0 14px rgba(99, 132, 255, 0.85), 0 0 34px rgba(139, 92, 246, 0.55);
  animation: orb-float 3.2s ease-in-out infinite;
}
@keyframes orb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.orb-tiny { width: 18px; height: 18px; }
.orb-corner { width: 58px; height: 58px; }
/* the pet's eyes */
.orb-face { position: relative; }
.orb-face::before, .orb-face::after { content: ""; position: absolute; top: 40%; width: 12%; height: 18%; border-radius: 50%; background: var(--ink); animation: pet-blink 4.5s ease-in-out infinite; }
.orb-face::before { left: 34%; }
.orb-face::after { right: 34%; }
@keyframes pet-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.theme-sky { background: radial-gradient(circle at 40% 38%, #fff 0%, #dff0ff 18%, #5aa8ff 50%, #2f7de1 85%, transparent 100%); box-shadow: 0 0 16px rgba(90, 168, 255, 0.9); }
.theme-sunny { background: radial-gradient(circle at 40% 38%, #fff 0%, #fff4c7 18%, #ffcf4a 50%, #f59e0b 85%, transparent 100%); box-shadow: 0 0 16px rgba(255, 207, 74, 0.9); }
.theme-mint { background: radial-gradient(circle at 40% 38%, #fff 0%, #dbfff0 18%, #4ee0a3 50%, #16a37a 85%, transparent 100%); box-shadow: 0 0 16px rgba(78, 224, 163, 0.9); }
.theme-blossom { background: radial-gradient(circle at 40% 38%, #fff 0%, #ffe3ef 18%, #ff8fb8 50%, #e3487f 85%, transparent 100%); box-shadow: 0 0 16px rgba(255, 143, 184, 0.9); }
.theme-grape { background: radial-gradient(circle at 40% 38%, #fff 0%, #ece3ff 18%, #a77bff 50%, #7c3aed 85%, transparent 100%); box-shadow: 0 0 16px rgba(167, 123, 255, 0.9); }
.theme-snow { background: radial-gradient(circle at 40% 38%, #fff 0%, #ffffff 25%, #dbe6ff 55%, #94a3b8 88%, transparent 100%); box-shadow: 0 0 16px rgba(219, 230, 255, 0.95); }

.orb { animation: orb-float 5s ease-in-out infinite; box-shadow: 0 0 12px #6384ff65, 0 0 24px #8b5cf630; }
/* Main demo: a filmstrip, real scenery and a deliberate, user-started sequence. */
.editor { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: 179px 56px; color: #d4dce8; background: #222833; font-size: 10px; }
.editor-side { display: grid; align-content: start; gap: 7px; padding: 11px 10px; background: #1b2029; border-right: 1px solid #101620; }
.editor-side > span { font-size: 9px; color: #b4c0d1; }
.editor-side small { color: #a1b0c2; font-size: 8px; }
.clip { height: 33px; border-radius: 3px; background: url("assets/sunlit-hills.webp") center 80% / 150px auto; box-shadow: inset 0 0 0 1px #ffffff30; }
.clip.c2 { background-position: 15% 95%; }
.clip.c3 { background-position: 90% 70%; }
.editor-main { position: relative; padding: 0 12px; min-width: 0; }
.editor-toolbar { height: 35px; display: flex; align-items: center; gap: 18px; }
.ratio-control { position: relative; z-index: 3; }
.ratio-button { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 3px 8px; border: 1px solid #556070; border-radius: 4px; color: #f9fbff; background: #363f4e; }
.ratio-button small { font-size: 10px; }
.editor-export { margin-left: auto; color: #c5d5ef; font-size: 9px; }
.editor-preview { display: flex; align-items: center; justify-content: center; height: 117px; position: relative; background: #111722; overflow: hidden; border: 1px solid #ffffff0d; border-radius: 4px; }
.editor-film { position: relative; width: 190px; max-width: 100%; height: 107px; background: url("assets/sunlit-hills.webp") center 85% / cover; overflow: hidden; transition: width 1s ease; box-shadow: 0 0 0 1px #ffffff26; }
.editor-film > span { position: absolute; bottom: 22%; left: 0; right: 0; text-align: center; font: italic 15px Georgia, serif; color: white; text-shadow: 0 1px 6px #122723; white-space: nowrap; }
.preview-ratio { position: absolute; right: 7px; bottom: 6px; color: #ccd4df; font-size: 8px; background: #131b28bf; padding: 2px 4px; border-radius: 2px; }
.player-controls { height: 28px; display: flex; align-items: center; justify-content: space-between; color: #a6b4c8; font-size: 9px; }
.ratio-menu { display: none; position: absolute; left: -4px; top: 25px; width: 100px; padding: 4px; background: #303b4ef5; border: 1px solid #728299; border-radius: 5px; box-shadow: 0 5px 20px #0006; }
.ratio-menu > span { position: relative; display: block; padding: 5px 9px; border-radius: 3px; color: #edf3fc; }
.glow-ring { position: absolute; inset: -4px; border: 2px solid #ecf2ff; border-radius: 7px; box-shadow: var(--glow-blue); pointer-events: none; }
.mark-badge { position: absolute; top: -10px; right: -9px; width: 16px; height: 16px; display: grid; place-items: center; background: linear-gradient(#91baff, #4c72eb); color: #fff; border: 1px solid #c3d6ff; border-radius: 50%; font: 600 9px var(--sans); font-style: normal; }
.ratio-button .glow-ring, .ratio-button .mark-badge, .ratio-target .glow-ring, .ratio-target .mark-badge { display: none; }
.demo-cursor { top: 92px; left: 36%; transition: top .6s, left .6s; }
.demo-cursor .pip-bubble { max-width: 150px; }
.demo-cursor .pip-arrow { transition: opacity .3s; }
[data-demo-step="0"] .demo-cursor .pip-arrow { opacity: 0; }
.film-ring { display: none; inset: -5px; border-width: 3px; }
[data-demo-step="4"] .film-ring { display: block; }
.demo-cursor .pip-arrow { width: 96px; height: 64px; left: -10px; top: -8px; }
.demo-cursor .pip-arrow path { stroke-width: 3; }
.win-editor .glow-ring { border-width: 3px; }
.ratio-button .glow-ring { inset: -6px -7px; }
[data-demo-step="1"] .ratio-button .glow-ring, [data-demo-step="1"] .ratio-button .mark-badge { display: grid; }
[data-demo-step="2"] .ratio-menu, [data-demo-step="3"] .ratio-menu { display: block; }
[data-demo-step="3"] .ratio-target { background: linear-gradient(100deg, #446fe7, #7654c7); }
[data-demo-step="3"] .ratio-target .glow-ring, [data-demo-step="3"] .ratio-target .mark-badge { display: grid; }
[data-demo-step="1"] .demo-cursor, [data-demo-step="2"] .demo-cursor { left: 140px; top: 12px; }
[data-demo-step="3"] .demo-cursor { left: 147px; top: 114px; }
[data-demo-step="4"] .demo-cursor { left: 47%; top: 70px; }
[data-demo-step="4"] .editor-film { width: 60px; }
[data-demo-step="4"] .editor-film > span { font-size: 10px; }
.editor-timeline { position: relative; grid-column: 1 / -1; display: grid; align-content: start; gap: 3px; padding: 4px 15px 5px 72px; background: #191e27; border-top: 1px solid #394252; }
.timeline-ruler { display: flex; justify-content: space-between; font-size: 7px; color: #9aabc0; margin-bottom: 2px; }
.track { display: block; height: 13px; border-radius: 3px; font: 8px/13px -apple-system, sans-serif; color: #eef3ff; padding-left: 8px; }
.track.t1 { width: 93%; background: repeating-linear-gradient(90deg, #345d72cc 0 42px, #7498a3cc 42px 43px), url("assets/sunlit-hills.webp") center 80% / cover; border: 1px solid #82b4c480; }
.track.t2 { width: 77%; height: 13px; line-height: 13px; background: repeating-linear-gradient(90deg, #7479b8 0 1px, #535b89 1px 5px); }
.playhead { position: absolute; top: 5px; bottom: 0; left: 47%; width: 1px; background: #e0e8f3; }
.playhead::before { content: ""; position: absolute; left: -3px; top: 0; width: 7px; height: 7px; background: #e0e8f3; border-radius: 1px 1px 4px 4px; }
.demo-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 11px; border-top: 1px solid #cdd7e7; background: #f5f8fc; }
.demo-label { font: 7px var(--sans); letter-spacing: .06em; color: #53627a; }
.demo-controls > div { display: flex; gap: 5px; }
.demo-controls button { min-height: 29px; padding: 5px 9px; font-size: 10px; color: #315ec7; border: 1px solid #cad5e6; border-radius: 5px; background: linear-gradient(#fff, #edf2f9); }
.demo-controls button:hover:not(:disabled) { background: #e2ebff; border-color: #86a0d4; }
.demo-controls button:disabled { color: #768294; cursor: default; }
.ring-box { inset: -1px; border: 1px solid #8798e8; border-radius: 3px; box-shadow: 0 0 7px #7c82de40; }
/* Sparse annotations and shortcuts occupy the desktop's open corners. */
.scribble { position: absolute; z-index: 1; font: 400 18px/1.2 var(--hand); color: #243f4b; transform: rotate(-7deg); text-shadow: 0 1px 6px #fff9; pointer-events: none; }



.desktop-icons { position: absolute; top: 96px; left: 26px; display: flex; flex-direction: column; gap: 17px; }
.desktop-icon { display: grid; justify-items: center; gap: 5px; width: 68px; text-decoration: none; }
.desktop-icon svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 3px #243d6650); }
.desktop-icon span { font-size: 9px; color: #122b3e; background: #f5fbffd9; padding: 2px 5px; border-radius: 3px; white-space: nowrap; }
.desktop-icon:hover svg { transform: translateY(-3px); }
.dock { grid-column: 2; grid-row: 4; align-self: center; justify-self: center; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #fff9; border-radius: 16px; background: linear-gradient(#f6fbffb3, #e5f0f58c); box-shadow: 0 7px 20px #253e6633, inset 0 1px 0 #fff; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.dock a { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #ffffffa6; border-radius: 10px; background: linear-gradient(#fff, #dce7f3); box-shadow: 0 2px 3px #3b526733, inset 0 1px 0 #fff; transition: transform .2s; }
.dock a:hover { transform: translateY(-5px); }
.dock a svg { width: 29px; height: 29px; }
.dock-pet .orb { width: 27px; height: 27px; }
.taskbar { grid-column: 1 / -1; grid-row: 5; margin: 0 -40px 0 -118px; padding: 0 16px 0 0; display: flex; align-items: center; gap: 12px; color: #fff; background: linear-gradient(#3f8cf6 0%, #2569e6 12%, #1f5fdc 60%, #1a55cf 100%); border-top: 1px solid #7fb4ff; box-shadow: inset 0 1px 0 #a9d0ff, 0 -2px 10px #12357a33; font-size: 10px; }
.taskbar-start, .taskbar-tab, .taskbar-tray, .status-online { display: inline-flex; align-items: center; gap: 7px; }
.taskbar-start { height: 100%; padding: 0 22px 0 12px; text-decoration: none; font-weight: 700; font-style: italic; font-size: 15px; color: #fff; text-shadow: 0 1px 1px #1d5a12; background: linear-gradient(#6ed14a, #3fa322 55%, #2f8a1a); border-radius: 0 12px 12px 0; box-shadow: inset 0 1px 0 #b6f59d, 2px 0 4px #0b3a1c55; }
.taskbar-start img { filter: drop-shadow(0 1px 0 #1d5a12); }
.taskbar-tab { height: 26px; padding: 0 12px; border-radius: 4px; background: #ffffff2b; border: 1px solid #ffffff59; box-shadow: inset 0 1px 0 #ffffff59; font-size: 10px; font-weight: 600; text-shadow: 0 1px 1px #0a3f9e; }
.taskbar-tray { margin-left: auto; height: 100%; padding: 0 12px; gap: 13px; background: linear-gradient(#1ea2f3, #0d7fd8); border-left: 1px solid #0b5aa0; box-shadow: inset 1px 1px 0 #7ed3ff66; text-shadow: 0 1px 1px #0a3f9e; }
.status-online { font: 15px var(--pixel); }
.status-online i { width: 6px; height: 6px; border-radius: 50%; background: #7dfca6; box-shadow: 0 0 6px #7dfca6; animation: status-pulse 4s ease-in-out infinite; }
@keyframes status-pulse { 50% { opacity: .6; } }
/* Small desktop keepsakes, built around the same window chrome. */
/* Photoshop: the dark UI, one tool among many, pointed at with the arrow style */
.ps { position: relative; height: 226px; display: grid; grid-template-rows: 18px 24px minmax(0, 1fr); background: #323232; color: #d8d8d8; font-size: 9.5px; font-family: -apple-system, "Segoe UI", sans-serif; }
.ps-menubar { display: flex; gap: 10px; align-items: center; padding: 0 8px; background: #3c3c3c; border-bottom: 1px solid #262626; color: #cfcfcf; font-size: 9px; }
.ps-options { display: flex; align-items: center; gap: 8px; padding: 0 8px; background: #383838; border-bottom: 1px solid #262626; white-space: nowrap; overflow: hidden; }
.ps-check::before { content: "☐ "; color: #9a9a9a; }
.ps-select { padding: 1px 6px; border: 1px solid #555; border-radius: 2px; background: #454545; }
.ps-body { display: grid; grid-template-columns: 30px minmax(0, 1fr) 84px; min-height: 0; }
.ps-tools { display: grid; align-content: start; justify-items: center; gap: 1px; padding: 4px 0; background: #383838; border-right: 1px solid #262626; }
.ps-tools .tool { position: relative; display: grid; place-items: center; width: 22px; height: 15px; border-radius: 2px; }
.ps .tool svg { width: 11px; height: 11px; fill: #d6d6d6; }
.ps .tool.small svg { width: 10px; height: 10px; }
.ps-target { background: #4b4b4b; }
.ps-target svg { fill: #fff; }
.ps .ring-circle { inset: -5px -3px; }
.ps-colors { position: relative; width: 18px; height: 18px; margin-top: 4px; }
.ps-colors i { position: absolute; width: 11px; height: 11px; border: 1px solid #ddd; background: #000; }
.ps-colors i:last-child { left: 6px; top: 6px; background: #fff; z-index: -1; }
.ps-canvas { position: relative; display: grid; grid-template-rows: 16px minmax(0, 1fr); background: #1f1f1f; }
.ps-tab { display: flex; align-items: end; padding-left: 4px; background: #2a2a2a; border-bottom: 1px solid #1a1a1a; }
.ps-tab span { padding: 2px 8px; background: #323232; border: 1px solid #1a1a1a; border-bottom: 0; border-radius: 3px 3px 0 0; color: #bbb; font-size: 8px; white-space: nowrap; overflow: hidden; }
.ps-doc { position: relative; align-self: center; justify-self: center; width: 118px; height: 130px; margin-top: 4px; background: url("assets/sunlit-hills.webp") center / cover; box-shadow: 0 0 0 1px #000, 0 8px 20px #0008; }
.ps-doc b { position: absolute; left: 10px; bottom: 10px; font: 800 16px var(--display); color: #fff; letter-spacing: .06em; text-shadow: 0 1px 4px #0008; }
.ps-panels { display: grid; align-content: start; gap: 2px; padding: 0 0 6px; background: #383838; border-left: 1px solid #262626; }
.ps-panel-tabs { display: flex; gap: 6px; padding: 3px 6px; background: #2e2e2e; border-bottom: 1px solid #262626; font-size: 8px; color: #999; margin-bottom: 3px; }
.ps-panel-tabs .on { color: #eee; }
.ps-layer { display: flex; align-items: center; gap: 5px; padding: 3px 6px; white-space: nowrap; overflow: hidden; }
.ps-layer.on { background: #4a4a4a; }
.thumb { flex-shrink: 0; width: 16px; height: 13px; border: 1px solid #666; background: repeating-conic-gradient(#888 0 25%, #ccc 0 50%) 0 0 / 6px 6px; }
.thumb.t2 { background: url("assets/sunlit-hills.webp") center / cover; }
.thumb.t3 { background: #fff; }
.ps .chat-mini { position: absolute; top: 58px; right: 92px; z-index: 5; max-width: 140px; padding: 6px 10px; border-radius: 12px 12px 4px 12px; font-size: 10.5px; line-height: 1.3; }
/* The arrow style: Pip parks a little way off and draws a curved arrow to the target */
.pip-point-far .orb-pet { left: 74px; top: 22px; width: 24px; height: 24px; }
.pip-point-far .pip-bubble { left: 104px; top: 14px; }
.demo-cursor.pip-point-far .orb-pet { left: 84px; top: 26px; }
.demo-cursor.pip-point-far .pip-bubble { left: 114px; top: 18px; }
.pip-arrow { position: absolute; left: -6px; top: -6px; width: 84px; height: 56px; overflow: visible; filter: drop-shadow(0 0 4px #4b8dff) drop-shadow(0 1px 2px #0008); animation: arrow-nudge 1.6s ease-in-out infinite; }
.pip-arrow path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }
.pip-arrow polygon { fill: #fff; }
@keyframes arrow-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-3px, -3px); } }
.pip-point .glow-ring, .ps .glow-ring, .win-editor .glow-ring { animation: ring-pulse 1.4s ease-in-out infinite; }
@keyframes ring-pulse { 0%, 100% { box-shadow: var(--glow-blue); } 50% { box-shadow: 0 0 0 6px #678cff55, 0 0 22px #4175ffcc, 0 0 44px #9a62ff80; } }
.term { position: relative; padding: 12px 14px 44px; background: #16191f; color: #d7dde8; font: 11px/1.7 ui-monospace, "SF Mono", Menlo, monospace; }
.term p { margin: 0; white-space: nowrap; overflow: hidden; }
.term .prompt { color: #7dd3fc; }
.term .dim { color: #7b8698; }
.term .err { color: #fb7185; }
.term-cmd { position: relative; color: #fff; padding: 0 3px; }
.term-mini { font-size: 10px; }
.desktop-mascot { position: absolute; z-index: 7; bottom: 47px; right: 47px; display: flex; align-items: flex-end; gap: 10px; }
.mascot-message { align-self: center; padding-top: 8px; }
.pixel-bubble { position: relative; padding: 10px 13px; background: #f5f6ff; color: #3c4573; border: 2px solid #6e75a4; border-radius: 2px; box-shadow: 3px 3px 0 #d7deec, -2px 0 0 #f5f6ff, 0 -2px 0 #f5f6ff; font: 17px/1.03 var(--pixel); width: 180px; min-height: 58px; }
.pixel-bubble::after { content: ""; position: absolute; right: -9px; bottom: 13px; width: 12px; height: 12px; background: #f5f6ff; border-right: 2px solid #6e75a4; border-top: 2px solid #6e75a4; transform: rotate(45deg); }
.mascot-hint { display: block; margin-top: 7px; text-align: center; font: 11px/1.2 var(--hand); color: #fff; text-shadow: 0 1px 3px #17321e, 0 1px 4px #17321e; }
.dog-button { position: relative; display: grid; place-items: center; width: 104px; height: 104px; padding: 0; background: transparent; border: 0; border-radius: 14px; touch-action: manipulation; }
.dog-button img { width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(2px 3px 0 #233f2944); transition: transform .18s; transform-origin: 50% 95%; }
.dog-button:hover img { transform: rotate(-5deg) translateY(-2px); }
.dog-button:active img { transform: scale(.95); }
.dog-button:focus-visible { outline: 3px dashed #fff; outline-offset: 3px; background: #f8fff433; box-shadow: 0 0 0 5px #365ec1; }
.dog-heart { display: none; position: absolute; top: -3px; left: 48%; color: #e9436e; font: 24px/1 var(--pixel); text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff; pointer-events: none; }
.is-petted .dog-heart { display: block; animation: happy-heart 1.2s ease-out both; }
.is-petted img { animation: happy-dog .5s ease-in-out 2; }
@keyframes happy-heart { 0% { transform: translateY(0) scale(.5); opacity: 0; } 25%, 70% { opacity: 1; } 100% { transform: translateY(-28px) scale(1.2); opacity: 0; } }
@keyframes happy-dog { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.desktop-sparkles { position: absolute; inset: 0; pointer-events: none; }
.desktop-sparkles span { position: absolute; font: 22px/1 Georgia, serif; color: #fff; text-shadow: 0 1px 4px #5585c4; }
.desktop-sparkles span:nth-child(1) { top: 102px; left: 18%; transform: rotate(12deg); }
.desktop-sparkles span:nth-child(2) { top: 438px; right: 27%; font-size: 15px; }
.desktop-sparkles span:nth-child(3) { top: 95px; right: 15%; font-size: 32px; transform: rotate(-12deg); }
.desktop-icon-cat svg { width: 40px; height: 40px; }

/* ── Below the fold: what it does, pets, pricing, FAQ, a note ────────────── */
.desktop-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1120px; padding: 80px 28px 32px; margin: auto; }
.desktop-sections .window { box-shadow: 0 0 0 1px #ffffff70, 0 12px 30px #25466b18; }
.window-wide { grid-column: 1 / -1; }
.window-body { padding: 32px; }
.desktop-sections h2 { font: 700 36px/1.12 var(--display); letter-spacing: -.035em; margin: 3px 0 14px; }
.section-lede { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 24px; }
kbd { padding: 2px 5px; border: 1px solid #c2cddd; border-radius: 4px; background: white; box-shadow: 0 2px 0 #d4deea; font: 12px var(--sans); }
.tag { display: inline-block; padding: 5px 13px; border-radius: 20px; background: #ffffffd9; border: 1px solid #fff; box-shadow: 0 1px 4px #25466b14; color: #52647b; font: 600 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Features: an animated window beside a little chat exchange */
.feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; gap: 52px; align-items: center; padding: 28px 0; }
.feature-flip .feature-window { order: 2; }
.feature-window { width: 100%; }
.feature-text { display: grid; gap: 12px; justify-items: start; }
.waveform-deco { height: 22px; gap: 5px; margin-bottom: 14px; opacity: .5; }
.waveform-deco i { width: 4px; background: #8d9bb0; animation-duration: 4s; }
.chat { position: relative; margin: 0; padding: 11px 17px; max-width: 330px; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.chat-user { color: #fff; background: linear-gradient(#63a6ff, #2f7cf6 60%, #2b6fe6); border-radius: 18px 18px 18px 5px; box-shadow: inset 0 1px 0 #ffffff80, 0 5px 14px #2f7cf633; text-shadow: 0 1px 1px #1a4f9e55; }
.chat-pip { font-size: 15px; color: #3d2d7a; background: linear-gradient(#f4f0ff, #e6e0ff); border: 1px solid #cfc2ff; border-radius: 18px 18px 18px 5px; }
.feature-text h2 { margin: 10px 0 0; font-size: 31px; }
.feature-text > p:last-child { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 400px; }
.feature-text kbd { font-size: 13px; }

/* Scenes share one 8s loop. Defaults are the end state, so reduced motion shows the finished frame. */
.scene { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.scene .scene-point { animation: 8s ease-in-out infinite both; }
.scene .pip-bubble { max-width: none; animation: bubble-in 8s infinite both; }
.scene .typed { display: inline-block; max-width: 320px; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: typing 8s steps(44) infinite both; }
.scene .glow-ring, .scene .mark-badge { animation: ring-in 8s infinite both; }
@keyframes bubble-in { 0%, 46% { opacity: 0; transform: translateY(4px); } 51%, 100% { opacity: 1; transform: none; } }
@keyframes typing { 0%, 50% { max-width: 0; } 76%, 100% { max-width: 320px; } }
@keyframes ring-in { 0%, 36% { opacity: 0; } 42%, 100% { opacity: 1; } }
.scene .pip-cursor { width: 21px; height: 21px; }
.scene .orb-pet { width: 24px; height: 24px; left: 24px; top: 6px; }
.scene .pip-bubble { font-size: 12px; left: 52px; top: 2px; }
.scene .pip-point-left .orb-pet { left: -34px; top: 22px; }
.scene .pip-point-left .pip-bubble { left: auto; right: 8px; top: 50px; }

/* App windows for the scenes: plain macOS chrome, dark, like the real apps */
.app-window { position: relative; border-radius: 10px; overflow: hidden; background: #1f232b; box-shadow: 0 0 0 1px #0b0e14, 0 18px 40px #12203a40, inset 0 1px 0 #ffffff14; }
.app-titlebar { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; background: linear-gradient(#343a45, #2a2f39); border-bottom: 1px solid #12151c; color: #d3d9e4; font: 600 12px var(--sans); }
.mac-lights { display: inline-flex; gap: 6px; }
.mac-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px #0004; }
.mac-lights i:nth-child(2) { background: #febc2e; }
.mac-lights i:nth-child(3) { background: #28c840; }
.app-window .mark-badge { border-color: #fff; }

/* DaVinci Resolve: Effects panel, then the transition, then the cut */
.resolve { position: relative; height: 262px; display: grid; grid-template-rows: 34px 1fr 62px; color: #c7cfdb; font-size: 11px; }
.resolve-top { display: flex; align-items: center; gap: 16px; padding: 0 14px; background: #262b34; border-bottom: 1px solid #12151c; }
.resolve-top > span { position: relative; padding: 4px 8px; border-radius: 4px; }
.resolve-tool { background: #3a4252; color: #fff; }
.resolve-spacer { flex: 1; }
.resolve-body { display: grid; grid-template-columns: 170px minmax(0, 1fr); min-height: 0; }
.resolve-effects { list-style: none; margin: 0; padding: 8px 6px; background: #1a1e25; border-right: 1px solid #12151c; display: grid; align-content: start; gap: 1px; }
.resolve-effects li { position: relative; padding: 5px 10px; border-radius: 4px; }
.resolve-effects .head { color: #8b95a6; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.resolve-effects .resolve-step-2 { background: #2e5cff; color: #fff; }
.resolve-preview { position: relative; margin: 12px; border-radius: 6px; background: url("assets/sunlit-hills.webp") center 70% / cover; box-shadow: 0 0 0 1px #0b0e14; }
.resolve-preview span { position: absolute; right: 8px; bottom: 6px; padding: 2px 6px; background: #0b0e14cc; border-radius: 3px; font: 10px ui-monospace, monospace; color: #e5e9f0; }
.resolve-timeline { position: relative; display: flex; align-items: center; gap: 0; padding: 0 60px 0 70px; background: #171a21; border-top: 1px solid #12151c; }
.rclip { display: block; height: 30px; width: 46%; border-radius: 4px; background: repeating-linear-gradient(90deg, #3d7a9a 0 34px, #5aa1c4 34px 35px), url("assets/sunlit-hills.webp") center / cover; border: 1px solid #7fc0dd80; }
.rclip.b { width: 40%; background: repeating-linear-gradient(90deg, #6d5aa8 0 26px, #9583d6 26px 27px); border-color: #b5a3ff80; }
.rcut { position: absolute; left: calc(10px + 46%); top: 8px; bottom: 8px; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; animation: cut-glow 8s infinite both; }
@keyframes cut-glow { 0%, 70% { opacity: .35; } 76%, 100% { opacity: 1; } }
.resolve-step-1 .glow-ring, .resolve-step-1 .mark-badge { animation-name: ring-in-early; }
.resolve-step-2 .glow-ring, .resolve-step-2 .mark-badge { animation-name: ring-in-late; }
@keyframes ring-in-early { 0%, 16% { opacity: 0; } 22%, 100% { opacity: 1; } }
@keyframes ring-in-late { 0%, 48% { opacity: 0; } 54%, 100% { opacity: 1; } }
.scene-resolve .scene-point { left: 15%; top: 78px; animation-name: resolve-point; }
@keyframes resolve-point { 0%, 8% { left: 62%; top: 150px; opacity: 0; } 14% { left: 62%; top: 150px; opacity: 1; } 24%, 42% { left: 6%; top: 14px; opacity: 1; } 56%, 100% { left: 15%; top: 78px; opacity: 1; } }
.scene-resolve .pip-bubble { animation-name: bubble-in-late; }
.scene-resolve .typed { animation-name: typing-late; }
@keyframes bubble-in-late { 0%, 60% { opacity: 0; transform: translateY(4px); } 65%, 100% { opacity: 1; transform: none; } }
@keyframes typing-late { 0%, 64% { max-width: 0; } 84%, 100% { max-width: 320px; } }

/* Terminal: Pip says what to type, the command types itself, the answer prints */
.scene-terminal .term { height: 262px; padding: 14px 16px; font-size: 12px; line-height: 1.8; }
.term-line { position: relative; }
.term-cmd .typed { display: inline-block; max-width: 160px; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: typing-cmd 8s steps(14) infinite both; }
@keyframes typing-cmd { 0%, 34% { max-width: 0; } 58%, 100% { max-width: 160px; } }
.term-caret { display: inline-block; width: 7px; height: 13px; margin-left: 2px; vertical-align: -2px; background: #d7dde8; animation: caret-blink 1s steps(2) infinite; }
.term-out { animation: line-in 8s infinite both; }
@keyframes line-in { 0%, 68% { opacity: 0; } 72%, 100% { opacity: 1; } }
.scene-terminal .glow-ring { animation-name: ring-in-cmd; }
@keyframes ring-in-cmd { 0%, 26% { opacity: 0; } 32%, 100% { opacity: 1; } }
.scene-terminal .scene-point { left: 9%; top: 94px; animation-name: terminal-point; }
@keyframes terminal-point { 0%, 6% { left: 60%; top: 200px; opacity: 0; } 12% { left: 60%; top: 200px; opacity: 1; } 22%, 100% { left: 9%; top: 94px; opacity: 1; } }
.scene-terminal .pip-bubble { animation-name: bubble-in-cmd; }
.scene-terminal .typed { animation-name: typing-bubble-cmd; }
@keyframes bubble-in-cmd { 0%, 20% { opacity: 0; transform: translateY(4px); } 25%, 100% { opacity: 1; transform: none; } }
@keyframes typing-bubble-cmd { 0%, 24% { max-width: 0; } 44%, 100% { max-width: 320px; } }
.scene-terminal .pip-bubble { top: 24px; left: 54px; }

/* Figma: a circle around the + next to Export */
.design { position: relative; height: 262px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 168px; color: #d3d9e4; font-size: 11px; }
.design-tools { display: grid; align-content: start; gap: 10px; padding: 12px 10px; background: #262b34; border-right: 1px solid #12151c; }
.design-tools i { width: 24px; height: 24px; border-radius: 6px; background: #3a4252; }
.design-tools i:first-child { background: #2e5cff; }
.design-canvas { display: grid; place-items: center; background: #1c2027; background-image: radial-gradient(#2c323c 1px, transparent 1px); background-size: 14px 14px; }
.design-frame { width: 190px; height: 140px; padding: 18px; border-radius: 8px; background: #fff; box-shadow: 0 8px 24px #0006; display: grid; align-content: start; gap: 10px; }
.design-frame span { display: block; height: 10px; width: 80%; border-radius: 5px; background: #cfd6e2; }
.design-frame .short { width: 50%; height: 7px; }
.design-frame b { width: 70px; height: 24px; margin-top: 8px; border-radius: 12px; background: linear-gradient(#63a6ff, #2f7cf6); }
.design-panel { padding: 0 12px 12px; background: #262b34; border-left: 1px solid #12151c; display: grid; align-content: start; }
.design-tabs { display: flex; gap: 14px; height: 34px; align-items: center; border-bottom: 1px solid #12151c; margin-bottom: 6px; }
.design-tabs .on { color: #fff; font-weight: 600; }
.design-sec { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #12151c; }
.chip { padding: 2px 7px; border-radius: 4px; background: #3a4252; font-style: normal; font-size: 10px; }
.swatch { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #63a6ff, #8b5cf6); }
.plus { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-style: normal; color: #fff; }
.design-target { background: #3a4252; }
.design .ring-circle { inset: -7px; }
.scene-design .glow-ring { animation-name: ring-in-mid; }
@keyframes ring-in-mid { 0%, 30% { opacity: 0; } 36%, 100% { opacity: 1; } }
.scene-design .scene-point { left: 94.5%; top: 191px; animation-name: design-point; }
@keyframes design-point { 0%, 10% { left: 40%; top: 200px; opacity: 0; } 16% { left: 40%; top: 200px; opacity: 1; } 34%, 100% { left: 94.5%; top: 191px; opacity: 1; } }
.scene-design .pip-point-left .orb-pet { top: 2px; left: -34px; }
.scene-design .pip-point-left .pip-bubble { top: 24px; right: 12px; }

/* Pricing, up in the sky */
.pricing-sky { margin-top: 48px; padding: 84px 24px 96px; background: #3b82f6 url("assets/xp-bliss.webp") center 6% / cover no-repeat; text-align: center; color: #fff; }
.pricing-inner { max-width: 900px; margin: auto; }
.pricing-sky h2 { margin: 24px 0 14px; font: 700 clamp(44px, 5.6vw, 70px)/1 var(--display); letter-spacing: -.045em; text-shadow: 0 2px 24px #1b4aa6a0, 0 1px 2px #1b4aa680; }
.pricing-sub { margin-bottom: 44px; font-size: 19px; text-shadow: 0 1px 8px #1b4aa6c0; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; gap: 26px; text-align: center; }
.plan { display: flex; flex-direction: column; }
.plan-body { flex: 1; align-content: start; display: grid; justify-items: center; gap: 6px; padding: 28px 24px 30px; background: #ffffffea; color: var(--ink); }
.plan h3 { font: 700 32px/1 var(--display); letter-spacing: -.03em; }
.plan-tagline { font-size: 18px; }
.plan-for { width: 100%; padding-bottom: 16px; border-bottom: 1px dashed #c9d6ea; color: var(--muted); font-size: 12px; }
.plan-price { margin-top: 16px; font: 700 64px/1 var(--display); letter-spacing: -.05em; }
.plan-billing { font-size: 13px; color: var(--ink-soft); }
.plan .button { margin-top: 10px; }
.plan ul { width: 100%; list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px dashed #c9d6ea; font-size: 13px; line-height: 2; color: var(--ink-soft); }
.plan-popular { margin-left: auto; margin-right: 6px; padding: 2px 9px; border-radius: 10px; background: #fff; color: #1d5fd8; font-size: 10px; font-weight: 700; text-shadow: none; }
.plan-popular + .window-controls { margin-left: 0; }

/* FAQ */
.faq { position: relative; max-width: 860px; margin: auto; padding: 84px 24px 30px; text-align: center; }
.faq h2 { margin: 20px 0 12px; font: 700 clamp(38px, 5vw, 58px)/1.05 var(--display); letter-spacing: -.045em; }
.faq-sub { margin-bottom: 36px; color: var(--muted); font-size: 16px; }
.faq-list { display: grid; gap: 10px; text-align: left; }
.faq details { padding: 0 22px; background: #fff; border: 1px solid #dfe6ef; border-radius: 12px; box-shadow: 0 2px 8px #25466b0a; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; list-style: none; cursor: pointer; font: 600 18px/1.3 var(--display); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font: 400 26px/1 var(--sans); color: #52647b; }
.faq details[open] summary::after { content: "×"; }
.faq details p { margin: -4px 0 20px; max-width: 640px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.faq details a { color: #2954be; }
.faq-sticker { position: absolute; right: -12px; top: 330px; width: 88px; transform: rotate(8deg); filter: drop-shadow(0 6px 10px #0002); }

/* A note from the founder */
.founder { position: relative; padding: 70px 24px 90px; text-align: center; overflow: hidden; }
.note-window { width: min(640px, 100%); margin: 24px auto 0; text-align: left; }
.note-body { padding: 30px 32px 26px; background: linear-gradient(#fffdf6, #fff8e3); color: #5b5f6a; font-size: 19px; line-height: 1.55; }
.note-body p + p { margin-top: 16px; }
mark { padding: 0 4px; background: #fff1a3; color: var(--ink); border-radius: 3px; }
.note-sign { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.note-avatar { width: 46px; height: 46px; }
.note-name { color: var(--ink); font-size: 18px; line-height: 1.1; }
.note-name small { color: var(--muted); font-size: 15px; }
.note-logo { margin-left: auto; transform: rotate(-4deg); color: var(--ink); font: 700 46px/1 var(--hand); }
.founder-stickers > * { position: absolute; width: 58px; height: 58px; opacity: .9; }
.founder-stickers > :nth-child(1) { left: 12%; top: 150px; transform: rotate(-8deg); }
.founder-stickers > :nth-child(2) { right: 13%; top: 130px; transform: rotate(6deg); }
.founder-stickers > :nth-child(3) { left: 17%; bottom: 100px; transform: rotate(5deg); }
.founder-stickers > :nth-child(4) { right: 16%; bottom: 130px; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; max-width: 1120px; margin: auto; padding: 10px 28px 32px; font-size: 11px; line-height: 1.7; color: var(--muted); }
.site-footer nav { display: flex; gap: 20px; }
.site-footer a:hover { color: #2459d1; }
/* Below 1200px the desktop becomes readable rows instead of a scaled picture. */
@media (min-width: 1200px) and (max-width: 1350px) {
  .stage { padding-inline: 28px; column-gap: 24px; }
  .taskbar { margin-inline: -28px; }
  .hero h1 { font-size: 58px; }
  .desktop-mascot { right: 34px; gap: 5px; }
  .dog-button { width: 95px; height: 95px; }
  .hero-lede { max-width: 390px; }
  .stage { padding-left: 104px; }
  .taskbar { margin-left: -104px; }
  .desktop-icons { left: 18px; gap: 12px; }
  .demo-menubar { gap: 7px; }
  .demo-text-menu { left: 55%; }
}
@media (max-width: 1199px) {
  .stage::before { inset: 78px 8% auto; height: 390px; background: radial-gradient(ellipse closest-side, #f4fbffe0, #e4f4ff80 58%, transparent 100%); }
  .stage-frame { background-size: cover; background-position: center 30%; background-color: #e4eff6; }
  .stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 26px; padding: 0 28px; min-height: auto; }
  .topbar { height: 78px; gap: 16px; }
  .topnav a { padding-inline: 10px; }
  .topbar-actions .button { display: none; }
  .hero { grid-column: 1 / -1; grid-row: auto; padding: 25px 0 16px; }
  .hero h1 { font-size: 66px; }
  .hero-lede { max-width: 425px; }
  .hero-note { font-size: 11px; }
  .win-editor { grid-column: 1 / -1; grid-row: 3; max-width: 600px; }
  .win-tips { grid-column: 1; grid-row: 4; width: 100%; max-width: none; margin: 0; }
  .win-textedit { grid-column: 2; grid-row: 4; margin: 0; }
  .win-terminal { grid-column: 1; grid-row: 5; margin: 0; }
  .win-find { grid-column: 2; grid-row: 5; margin: 0; }
  .stage > .window { align-self: center; }
  [data-drag-handle] { cursor: default; touch-action: auto; }
  .scribble, .desktop-icons, .desktop-sparkles, .desktop-birds, .margin-note { display: none; }
  .caret { display: none; }
  .desktop-mascot { position: relative; bottom: auto; right: auto; grid-column: 1 / -1; grid-row: 6; justify-self: center; margin: 10px 0; }
  .mascot-hint { color: #45617a; text-shadow: none; }
  .dock { grid-column: 1 / -1; grid-row: 7; }
  .taskbar { grid-column: 1 / -1; grid-row: 8; margin: 0 -28px; height: 38px; }
  .desktop-sections { padding-top: 48px; }
  .window-body { padding: 25px; }
  .desktop-sections h2 { font-size: 32px; }
  .feature { gap: 30px; }
  .feature-text h2 { font-size: 27px; }
  .faq-sticker { display: none; }
}
@media (max-width: 1023px) {
  .plans { grid-template-columns: minmax(0, 420px); }
}
@media (max-width: 767px) {
  html { scroll-padding-top: 16px; }
  .stage::before { inset: 90px 0 auto; height: 370px; }
  .stage { display: flex; flex-direction: column; gap: 16px; padding: 0 18px 24px; }
  .topbar { display: flex; justify-content: space-between; height: auto; min-height: 0; padding: 12px 0 4px; flex-wrap: wrap; gap: 12px; order: 0; }
  .brand { font-size: 26px; }
  .brand img { width: 29px; height: 29px; }
  .topbar-actions { margin-left: auto; }
  .pill { padding: 8px 13px; background: #ffffff70; border: 1px solid #ffffffa8; }
  .topnav { order: 3; justify-content: space-between; width: 100%; }
  .topnav a { display: inline-flex; justify-content: center; align-items: center; font-size: 11px; padding: 7px 9px; min-height: 38px; }
  .hero { order: 1; align-self: stretch; width: 100%; padding: 0 0 3px; }
  .eyebrow { font-size: 9px; margin-bottom: 12px; }
  .hero h1 { font-size: clamp(36px, 10.9vw, 58px); line-height: 1.02; }
  .hero-lede { font-size: 13px; max-width: 325px; margin-top: 16px; }
  .hero-lede br { display: none; }
  .hero-actions { gap: 9px; margin-top: 16px; }
  .button-large { padding: 13px 16px; font-size: 12px; }
  .hero-note { max-width: 290px; font-size: 10px; margin-top: 10px; }
  .win-editor { order: 2; }
  .desktop-mascot { order: 3; align-self: center; margin: 3px 0 7px; gap: 15px; }
  .dog-button { width: 88px; height: 88px; }
  .pixel-bubble { font-size: 19px; padding: 10px 13px; width: 190px; }
  .mascot-hint { font-size: 12px; }
  .win-tips { order: 4; }
  .win-textedit { order: 6; }
  .win-terminal { order: 7; }
  .win-find { order: 8; }
  .stage > .window { width: 100%; max-width: 560px; align-self: center; margin: 0; }
  .dock, .taskbar { display: none; }
  .window-titlebar { height: 32px; font-size: 11px; }
  .editor { grid-template-columns: 54px minmax(0, 1fr); }
  .editor-side { padding-inline: 7px; }
  .editor-main { padding-inline: 8px; }
  .editor-toolbar { gap: 12px; }
  .editor-timeline { padding-left: 54px; }
  .editor-film { max-width: 215px; height: 107px; }
  [data-demo-step="4"] .editor-film { width: 60px; }
  .editor-export { font-size: 8px; }
  .demo-controls { padding: 7px 8px; gap: 5px; }
  .demo-controls button { min-height: 44px; padding-inline: 11px; font-size: 11px; }
  .demo-label { font-size: 8px; line-height: 1.5; letter-spacing: .02em; max-width: 110px; }
  /* Phones: the pet's bubble hangs below the pointer instead of beside it, so it never leaves the window */
  .demo-cursor { left: 18%; }
  .demo-cursor.pip-point-far .orb-pet { left: 62px; top: 46px; }
  .demo-cursor.pip-point-far .pip-bubble { left: 0; top: 84px; max-width: 170px; }
  [data-demo-step="1"] .demo-cursor, [data-demo-step="2"] .demo-cursor { left: 120px; }
  [data-demo-step="3"] .demo-cursor { left: 40%; top: 104px; }
  [data-demo-step="3"] .demo-cursor.pip-point-far .pip-bubble { left: 54px; top: 2px; max-width: 96px; }
  [data-demo-step="4"] .demo-cursor { left: 14%; top: 70px; }
  [data-demo-step="4"] .demo-cursor.pip-point-far .orb-pet { left: 34px; top: 58px; }
  [data-demo-step="4"] .demo-cursor.pip-point-far .pip-bubble { left: 0; top: 80px; }
  .win-textedit .pip-point-left .pip-bubble { top: 44px; }
  .ps { height: 256px; }
  .ps-doc { height: 112px; }
  .ps .chat-mini { right: 96px; top: 64px; }
  .design-frame { width: 140px; height: 120px; }
  /* Scenes: no typewriter on phones (the bubbles wrap instead), and the bubble sits clear of the pointed-at label */
  .scene .typed { white-space: normal; max-width: none; animation: none; }
  .scene .pip-bubble { white-space: normal; max-width: 180px; }
  .scene-resolve .scene-point { left: 12%; }
  @keyframes resolve-point { 0%, 8% { left: 62%; top: 150px; opacity: 0; } 14% { left: 62%; top: 150px; opacity: 1; } 24%, 42% { left: 6%; top: 14px; opacity: 1; } 56%, 100% { left: 12%; top: 78px; opacity: 1; } }
  .scene-resolve .orb-pet { left: 14px; top: 44px; }
  .scene-resolve .pip-bubble { left: 46px; top: 40px; }
  .scene-terminal .orb-pet { left: 18px; top: 66px; }
  .scene-terminal .pip-bubble { left: 50px; top: 60px; }
  .scene-design .pip-point-left .pip-bubble { top: 36px; right: 30px; }
  .tips { padding: 18px 18px 6px; gap: 17px; }
  .tips strong { font-size: 14px; }
  .tips span { font-size: 12px; }
  .demo-stage { font-size: 11px; }
  .demo-dropdown > span { padding: 5px 7px; }
  .demo-text-menu { left: 57%; min-width: 108px; }
  .demo-format-menu { left: 25%; }
  .demo-document { padding-top: 24px; }
  .desktop-sections { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px 18px 24px; }
  .desktop-sections h2 { font-size: 30px; }
  .window-body { padding: 24px 21px; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px 0; }
  .feature-flip .feature-window { order: 0; }
  .feature-text h2 { font-size: 26px; }
  .chat { font-size: 15px; padding: 9px 14px; }
  .chat-pip { font-size: 13px; }
  .waveform-deco { margin-bottom: 4px; }
  .scene .pip-bubble { font-size: 11px; }
  .scene .typed { max-width: 200px; }
  .resolve-effects { width: 118px; }
  .resolve-top { gap: 10px; }
  .term { font-size: 10px; }
  .design-panel { width: 118px; }
  .scene-design .scene-point { left: 58%; top: 150px; }
  @keyframes design-point { 0%, 10% { left: 40%; top: 200px; opacity: 0; } 16% { left: 40%; top: 200px; opacity: 1; } 34%, 100% { left: 58%; top: 150px; opacity: 1; } }
  .pricing-sky { padding: 60px 18px 70px; margin-top: 24px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan-price { font-size: 54px; }
  .faq { padding-top: 60px; }
  .faq summary { font-size: 16px; padding: 15px 0; }
  .faq details { padding: 0 16px; }
  .founder { padding: 50px 18px 70px; }
  .founder-stickers { display: none; }
  .note-body { padding: 22px 20px 20px; font-size: 16px; }
  .note-logo { font-size: 36px; }
  .site-footer { gap: 16px; padding-inline: 18px; }
}
/* Pause decorative motion whenever its containing window leaves the viewport. */
[data-motion-paused] *, [data-motion-paused] *::before, [data-motion-paused] *::after,
.page-hidden *, .page-hidden *::before, .page-hidden *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}