@layer base, layout, components, motion, responsive;

@layer base {
  :root { color-scheme: light; --bg:#f7f9fc; --surface:#fff; --surface-soft:#edf2f8; --text:#141c2b; --muted:#516176; --line:#dce4ef; --accent:#006bc4; --accent-soft:#e2f1ff; --button:#0078d4; --button-ink:#fff; --shadow:0 24px 80px #142b5020; --header:#f7f9fcee; --code:#eef3f9; }
  :root[data-theme="dark"] { color-scheme:dark; --bg:#0c111b; --surface:#111a28; --surface-soft:#151f2e; --text:#f1f5fb; --muted:#a2b1c6; --line:#263447; --accent:#65c0ff; --accent-soft:#112d47; --button:#0078d4; --button-ink:#fff; --shadow:0 28px 90px #0008; --header:#0c111bee; --code:#111e2e; }
  * { box-sizing:border-box; }
  html { scroll-padding-top:96px; }
  body { margin:0; background:var(--bg); color:var(--text); font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-underline-offset:.2em; }
  a:hover { color:var(--accent); }
  button,input,select { font:inherit; }
  button,a,select,summary { -webkit-tap-highlight-color:transparent; }
  button,select { color:inherit; }
  button { cursor:pointer; }
  img,video { display:block; max-width:100%; height:auto; }
  svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  h1,h2,h3,p { margin-top:0; }
  h1,h2,h3 { color:var(--text); line-height:1.1; letter-spacing:-.045em; font-weight:650; }
  h1 { font-size:clamp(3.25rem,5.4vw,5.75rem); margin-bottom:26px; }
  h2 { font-size:clamp(2.3rem,4vw,3.7rem); margin-bottom:22px; }
  h3 { font-size:1.3rem; letter-spacing:-.025em; margin-bottom:12px; }
  p { margin-bottom:20px; }
  :focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
  ::selection { background:var(--accent); color:var(--bg); }
  [hidden] { display:none !important; }
  code,kbd,pre { font-family:"Cascadia Code","SFMono-Regular",Consolas,monospace; }
  code { font-size:.87em; background:var(--code); padding:2px 5px; border-radius:3px; }
  kbd { font-size:.78em; border:1px solid var(--line); border-bottom-width:2px; padding:2px 5px; border-radius:4px; white-space:nowrap; }
  .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; }
  .skip-link { position:fixed; z-index:20; left:20px; top:12px; background:var(--surface); border:2px solid var(--accent); padding:10px 18px; transform:translateY(-180%); }
  .skip-link:focus { transform:none; }
}

@layer layout {
  .shell { width:min(1360px,calc(100% - 96px)); margin-inline:auto; }
  .section { padding-block:104px; }
  .site-header { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line); background:var(--header); backdrop-filter:blur(18px); }
  .header-inner { display:flex; align-items:center; gap:30px; min-height:78px; }
  .primary-nav { display:flex; gap:28px; margin-left:auto; align-items:center; }
  .hero { display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:center; padding-block:94px 84px; position:relative; }
  .hero::before { content:""; position:absolute; inset:-30px 0 0 20%; pointer-events:none; z-index:-1; background:radial-gradient(ellipse closest-side at 64% 45%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 100%); }
  .hero-copy { max-width:620px; min-width:0; }
  .facts { border-block:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:18px; padding-block:23px; color:var(--muted); font-size:.875rem; font-weight:550; }
  .facts span { display:flex; gap:12px; align-items:center; }
  .facts span::before { content:""; width:5px; height:5px; background:var(--accent); }
  .section-heading { max-width:690px; margin-bottom:48px; }
  .section-heading>p:last-child { max-width:530px; color:var(--muted); }
  .feature-tabs { display:grid; grid-template-columns:320px minmax(0,1fr); gap:56px; align-items:start; }
  .live-section { background:var(--surface-soft); border-block:1px solid var(--line); overflow:hidden; }
  .live-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:84px; align-items:center; }
  .demo-section { display:grid; grid-template-columns:.78fr 1.4fr; gap:80px; align-items:center; }
  .star-callout { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:30px 36px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
  .download-section { background:var(--surface); border-block:1px solid var(--line); }
  .download-grid { display:grid; grid-template-columns:1fr 1fr; gap:120px; align-items:center; }
  .faq-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; }
  .support-section { border-top:1px solid var(--line); padding-block:72px; display:flex; justify-content:space-between; gap:48px; align-items:center; }
  .site-footer { border-top:1px solid var(--line); padding-block:30px 40px; display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; color:var(--muted); font-size:.84rem; }
  .site-footer p { margin:0; }
  .site-footer nav { display:flex; flex-wrap:wrap; gap:20px; margin-left:auto; }
  .developer-hero { padding-block:76px 60px; max-width:920px; }
  .developer-hero h1 { font-size:clamp(3rem,5.2vw,5.1rem); }
  .developer-hero .hero-description { max-width:720px; }
  .developer-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:64px; padding-bottom:100px; }
  .developer-aside { position:sticky; top:110px; align-self:start; font-size:.9rem; }
  .developer-aside nav { display:grid; gap:10px; border-left:1px solid var(--line); padding-left:18px; }
  .developer-content { min-width:0; max-width:1000px; }
  .developer-section { padding-block:42px; border-top:1px solid var(--line); }
  .developer-section h2 { font-size:clamp(2rem,3vw,2.6rem); }
  .developer-section>p { max-width:760px; color:var(--muted); }
  .developer-pair { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-block:28px; }
}

@layer components {
  .brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; font-size:1.2rem; font-weight:650; letter-spacing:-.035em; color:var(--text); flex:none; }
  .brand img { border-radius:8px; }
  .primary-nav a { text-decoration:none; font-size:.9rem; font-weight:550; white-space:nowrap; }
  .primary-nav a[aria-current="page"] { color:var(--accent); }
  .theme-control { display:flex; align-items:center; border-left:1px solid var(--line); padding-left:22px; gap:8px; color:var(--muted); }
  .theme-control svg { width:17px; height:17px; }
  .theme-control select { border:0; background:transparent; font-size:.82rem; padding:8px 18px 8px 0; cursor:pointer; max-width:102px; }
  .theme-control option { color:var(--text); background:var(--surface); }
  .menu-toggle { display:none; border:0; background:transparent; padding:8px; gap:8px; align-items:center; font-size:.85rem; }
  .eyebrow { font-size:.72rem; line-height:1.4; font-weight:650; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; display:flex; align-items:center; gap:12px; }
  .tiny-grid { display:grid; grid-template-columns:5px 5px; grid-template-rows:5px 5px; gap:2px; }
  .tiny-grid i { background:currentColor; }
  .hero h1 .accent-text { color:var(--accent); }
  .unbroken { white-space:nowrap; }
  .hero-lead { font-size:1.4rem; font-weight:500; letter-spacing:-.02em; margin-bottom:8px; }
  .hero-description { color:var(--muted); font-size:1.07rem; max-width:460px; }
  .hero-actions,.download-actions { display:flex; flex-wrap:wrap; gap:22px; align-items:center; margin-top:30px; }
  .button { display:inline-flex; justify-content:center; align-items:center; gap:12px; padding:13px 21px; min-height:50px; border:1px solid transparent; border-radius:7px; font-weight:600; text-decoration:none; font-size:.91rem; transition:background .18s,transform .18s; }
  .button:hover { transform:translateY(-2px); }
  .primary { background:var(--button); color:var(--button-ink); box-shadow:0 5px 24px #0078d420; }
  .primary:hover { background:#006bbd; color:#fff; }
  .secondary { border-color:var(--line); background:var(--surface); color:var(--text); }
  .secondary:hover { background:var(--accent-soft); color:var(--accent); }
  .star-callout h2 { font-size:1.7rem; margin-bottom:10px; }
  .star-callout p:last-child { margin:0; max-width:570px; color:var(--muted); }
  .star-button { flex:none; min-height:46px; gap:10px; padding:10px 20px; background:var(--surface-soft); color:var(--text); border-color:var(--line); box-shadow:0 1px 0 #00000014; }
  .star-button:hover { background:var(--accent-soft); color:var(--text); border-color:var(--muted); transform:none; }
  .star-button svg { width:18px; height:18px; }
  .star-button:hover svg { color:var(--accent); }
  .text-link { display:inline-flex; gap:10px; align-items:center; background:transparent; border:0; padding:0; font-size:.9rem; font-weight:600; text-decoration:none; color:var(--accent); }
  .text-link:hover { text-decoration:underline; }
  .download-note { color:var(--muted); font-size:.8rem; margin-top:16px; margin-bottom:0; }
  .download-note a { text-decoration-thickness:1px; }
  .hero-product { min-width:0; position:relative; }
  .product-caption { display:flex; align-items:center; gap:10px; font-size:.72rem; color:var(--muted); margin-bottom:12px; }
  .status-dot { width:6px; height:6px; border-radius:50%; background:#42b6a0; }
  .product-screen { aspect-ratio:1.82; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow); }
  .product-screen img { width:147%; max-width:none; }
  .product-bottom { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:16px; color:var(--muted); font-size:.7rem; }
  .product-bottom .text-link { font-size:.72rem; }
  .tab-list { display:grid; }
  .tab-list button { border:0; border-top:1px solid var(--line); background:transparent; display:flex; gap:18px; text-align:left; padding:25px 5px; color:var(--muted); align-items:flex-start; }
  .tab-list button:last-child { border-bottom:1px solid var(--line); }
  .tab-list button[aria-selected="true"] { color:var(--text); border-top-color:var(--accent); }
  .tab-list button>span:last-child { margin-left:auto; color:var(--accent); }
  .tab-list button small { display:block; font-size:.77rem; margin-top:4px; color:var(--muted); }
  .tab-number { font:12px "Cascadia Code",Consolas,monospace; color:var(--accent); line-height:2.1; }
  .feature-image { border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#1e1e1e; aspect-ratio:2.35; }
  .feature-image img { width:100%; }
  .feature-image.studio-image { aspect-ratio:auto; margin-top:24px; }
  .tile-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .tile-gallery img { width:100%; height:auto; min-width:0; aspect-ratio:1; }
  .feature-image.search-image { aspect-ratio:2.2; }
  .feature-copy { padding-top:25px; max-width:700px; }
  .feature-copy>p { color:var(--muted); }
  .detail-note { color:var(--muted); font-size:.78rem; line-height:1.7; }
  .feature-copy .detail-note { padding-top:8px; margin-bottom:0; }
  .no-js .tab-panels article+article { margin-top:40px; }
  .live-art { min-width:0; overflow:hidden; border-radius:5px; box-shadow:var(--shadow); background:#1e1e1e; }
  .live-art img { width:100%; }
  .live-copy>p:not(.eyebrow) { color:var(--muted); }
  .live-copy>.detail-note { margin-top:26px; margin-bottom:0; }
  .plain-list { padding:0; list-style:none; display:grid; gap:12px; font-size:.9rem; margin-block:26px; }
  .plain-list li { display:flex; gap:12px; align-items:baseline; }
  .list-mark { color:var(--accent); font-weight:600; }
  .demo-heading>p:not(.eyebrow) { color:var(--muted); }
  .video-frame { border:1px solid var(--line); background:#1e1e1e; border-radius:7px; overflow:hidden; box-shadow:var(--shadow); }
  .video-frame video { width:100%; aspect-ratio:16/9; }
  .download-grid>div>p:not(.eyebrow) { max-width:490px; color:var(--muted); }
  .install-steps { list-style:none; padding:0; margin:0; display:grid; gap:30px; }
  .install-steps li { display:flex; gap:22px; align-items:flex-start; }
  .install-steps li>span { display:grid; place-items:center; min-width:42px; height:42px; border:1px solid var(--line); color:var(--accent); font:13px "Cascadia Code",Consolas,monospace; }
  .install-steps h3 { font-size:1.1rem; margin:2px 0 8px; }
  .install-steps p { margin-bottom:0; color:var(--muted); font-size:.88rem; }
  .faq-list details { border-top:1px solid var(--line); }
  .faq-list details:last-child { border-bottom:1px solid var(--line); }
  .faq-list summary { cursor:pointer; padding:21px 24px 21px 0; font-size:.98rem; font-weight:550; list-style:none; position:relative; }
  .faq-list summary::-webkit-details-marker { display:none; }
  .faq-list summary::after { content:"+"; position:absolute; right:0; top:18px; font-size:1.3rem; color:var(--accent); font-weight:300; }
  .faq-list details[open] summary::after { content:"−"; }
  .faq-list details p { color:var(--muted); font-size:.9rem; padding-right:22px; }
  .support-section h2 { font-size:clamp(2rem,3.2vw,2.8rem); margin-bottom:14px; }
  .support-section p:last-child { margin:0; color:var(--muted); }
  .support-actions { display:grid; gap:18px; justify-items:stretch; }
  .coffee-link { display:flex; align-items:center; justify-content:center; gap:12px; background:#ffdc59; color:#1c210d; border:1px solid #d3b12f; padding:12px 18px; border-radius:7px; font-size:.9rem; font-weight:650; text-decoration:none; }
  .coffee-link:hover { color:#1c210d; background:#ffe789; }
  body:has(.screenshot-dialog[open]) { overflow:hidden; }
  .screenshot-dialog { border:0; background:transparent; color:#f1f5fb; padding:0; width:fit-content; max-width:calc(100vw - 40px); max-height:calc(100dvh - 40px); overflow:visible; }
  .screenshot-dialog::backdrop { background:#050911e8; backdrop-filter:blur(12px); }
  .screenshot-dialog img { width:auto; max-width:calc(100vw - 40px); max-height:calc(100dvh - 110px); object-fit:contain; border:1px solid #ffffff20; border-radius:8px; box-shadow:0 24px 100px #0007; }
  .screenshot-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; font-size:.75rem; color:#d6e1f2; }
  .screenshot-toolbar>span>span { color:#74849b; margin-inline:8px; }
  .screenshot-controls { display:flex; align-items:center; gap:14px; }
  .screenshot-controls kbd { color:#a5b4ca; border-color:#ffffff24; font-size:.65rem; }
  .dialog-close { display:grid; place-items:center; flex:none; width:42px; height:42px; padding:0; border:1px solid #ffffff1c; background:#ffffff0d; color:#f1f5fb; border-radius:50%; transition:background .2s,transform .2s; }
  .dialog-close svg { width:18px; height:18px; }
  .dialog-close:hover { background:#ffffff20; transform:rotate(90deg); }
  .breadcrumb { color:var(--muted); font-size:.82rem; margin-bottom:28px; }
  .breadcrumb span { margin-inline:12px; }
  .developer-aside a { text-decoration:none; color:var(--muted); }
  .developer-aside a:hover { color:var(--accent); }
  .code-panel { border:1px solid var(--line); background:var(--code); border-radius:6px; min-width:0; overflow:hidden; }
  .code-label { border-bottom:1px solid var(--line); padding:10px 16px; color:var(--muted); font:12px "Cascadia Code",Consolas,monospace; }
  pre { margin:0; padding:22px; overflow-x:auto; font-size:.78rem; line-height:1.8; tab-size:2; }
  pre code { background:transparent; padding:0; border:0; font:inherit; }
  .code-key { color:var(--accent); }
  .code-string { color:#278a69; }
  [data-theme="dark"] .code-string { color:#8adbb7; }
  .code-comment { color:var(--muted); }
  .resource-list { display:grid; margin-top:28px; }
  .resource-list a { display:flex; gap:22px; align-items:baseline; justify-content:space-between; padding:20px 0; border-top:1px solid var(--line); text-decoration:none; }
  .resource-list a:last-child { border-bottom:1px solid var(--line); }
  .resource-list strong { font-size:1.02rem; font-weight:600; }
  .resource-list small { display:block; color:var(--muted); margin-top:5px; }
  .resource-list a>span:last-child { color:var(--accent); }
  .callout { border-left:3px solid var(--accent); background:var(--accent-soft); padding:20px 24px; margin-block:28px; color:var(--text); }
  .callout p:last-child { margin-bottom:0; }
  .api-table { width:100%; border-collapse:collapse; font-size:.87rem; margin-block:26px; }
  .table-scroll { overflow-x:auto; }
  .api-table th,.api-table td { text-align:left; padding:14px 14px 14px 0; border-bottom:1px solid var(--line); vertical-align:top; }
  .api-table th { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
  .api-table td:first-child { white-space:nowrap; }
  .developer-support { display:flex; gap:24px; align-items:center; justify-content:space-between; }
}

@layer responsive {
  @media(max-width:900px) { .menu-toggle { order:1; } .theme-control { order:2; } .primary-nav { order:3; } }
  @media(min-width:1600px) { .hero { gap:90px; padding-block:115px 100px; } }
  @media(max-width:1120px) { .shell { width:calc(100% - 64px); } .hero { gap:34px; grid-template-columns:1fr 1fr; padding-top:72px; } .hero h1 { font-size:clamp(3rem,5.6vw,4.2rem); } .hero-lead { font-size:1.2rem; } .hero-description { font-size:1rem; } .hero-actions { gap:18px; } .feature-tabs { grid-template-columns:270px minmax(0,1fr); gap:34px; } .live-grid,.download-grid,.faq-grid,.demo-section { gap:48px; } .developer-layout { gap:40px; grid-template-columns:160px minmax(0,1fr); } .header-inner { gap:22px; } .primary-nav { gap:20px; } }
  @media(max-width:820px) { .shell { width:calc(100% - 44px); } .section { padding-block:76px; } .header-inner { min-height:70px; gap:16px; flex-wrap:wrap; } .brand { font-size:1.1rem; } .primary-nav { gap:16px; } .primary-nav a { font-size:.8rem; } .theme-control { padding-left:14px; } .theme-control svg { display:none; } .hero { grid-template-columns:1fr; gap:50px; padding-block:58px; } .hero-copy { max-width:630px; } .hero h1 { font-size:clamp(3.6rem,8.5vw,5rem); } .hero-product { max-width:720px; } .product-screen { aspect-ratio:2.05; } .product-screen img { width:130%; } .facts { flex-wrap:wrap; justify-content:flex-start; gap:15px 28px; font-size:.8rem; } .feature-tabs { grid-template-columns:1fr; gap:28px; } .tab-list { grid-template-columns:repeat(3,1fr); gap:15px; } .tab-list button { border-bottom:1px solid var(--line); font-size:.87rem; padding-block:18px; gap:9px; } .tab-list button>span:last-child { display:none; } .tab-list button small { font-size:.7rem; } .live-grid { grid-template-columns:1fr; gap:36px; } .live-art { max-width:720px; } .live-copy { max-width:600px; } .demo-section { grid-template-columns:1fr; gap:30px; } .demo-heading h2 br { display:none; } .download-grid { gap:44px; grid-template-columns:1fr; } .install-steps { grid-template-columns:repeat(3,1fr); gap:22px; } .install-steps li { display:block; } .install-steps li>span { width:36px; height:36px; min-width:36px; margin-bottom:16px; } .faq-grid { grid-template-columns:1fr; gap:24px; } .faq-grid h2 br { display:none; } .support-section { padding-block:54px; } .support-section h2 br { display:none; } .site-footer nav { width:100%; margin-left:0; } .developer-layout { grid-template-columns:1fr; } .developer-aside { display:none; } .developer-hero { padding-block:55px 36px; } }
  @media(max-width:600px) { .shell { width:calc(100% - 36px); } .section { padding-block:58px; } .header-inner { gap:12px; min-height:66px; padding-block:14px; } .brand img { width:28px; height:28px; } .brand { font-size:1.05rem; } .js .menu-toggle { display:flex; margin-left:auto; } .theme-control { padding-left:12px; } .theme-control select { font-size:.78rem; max-width:80px; } .primary-nav { width:100%; margin:0; padding-block:12px 2px; gap:8px; align-items:stretch; flex-wrap:wrap; } .primary-nav a { padding:8px 10px; background:var(--surface-soft); border-radius:4px; font-size:.85rem; flex:1 1 calc(50% - 8px); text-align:center; } .js .primary-nav:not(.is-open) { display:none; } .hero { padding-block:45px 40px; gap:34px; } .hero h1 { font-size:clamp(3.2rem,11.8vw,4.8rem); margin-bottom:22px; } .eyebrow { font-size:.66rem; margin-bottom:18px; letter-spacing:.12em; } .hero-lead { font-size:1.1rem; } .hero-description { font-size:.94rem; } .hero-actions { gap:18px; margin-top:24px; } .hero-actions .button { padding:12px 15px; font-size:.84rem; } .hero-actions .text-link { font-size:.82rem; } .download-note { font-size:.74rem; } .product-caption { font-size:.66rem; } .product-screen { aspect-ratio:1.55; border-radius:6px; } .product-screen img { width:180%; } .product-bottom { font-size:.65rem; } .product-bottom .text-link { font-size:.67rem; } .facts { gap:12px 21px; padding-block:19px; font-size:.72rem; } .facts span { gap:8px; } h2 { font-size:clamp(2.2rem,9vw,3rem); } .section-heading { margin-bottom:30px; } .section-heading>p:last-child { font-size:.94rem; } .tab-list { grid-template-columns:1fr; gap:0; } .tab-list button { padding:16px 0; border-bottom:0; font-size:.94rem; } .tab-list button small { display:none; } .tab-list button>span:last-child { display:block; } .tab-number { margin-right:6px; } .tab-list button:last-child { border-bottom:1px solid var(--line); } .feature-image { aspect-ratio:1.6; } .feature-image img { width:150%; max-width:none; } .feature-image.search-image img { width:100%; } .feature-copy { padding-top:20px; } .feature-copy p { font-size:.91rem; } .live-art { overflow:auto; border-radius:3px; } .live-art:not(.tile-gallery) img { min-width:600px; } .live-copy p { font-size:.94rem; } .plain-list { font-size:.86rem; } .install-steps { grid-template-columns:1fr; gap:26px; } .install-steps li { display:flex; gap:18px; } .install-steps li>span { margin:0; } .install-steps h3 { margin-top:0; } .download-actions { gap:12px; } .download-actions .button { font-size:.84rem; padding-inline:17px; } .support-section { display:block; padding-block:44px; } .support-actions { margin-top:28px; grid-template-columns:1fr; justify-items:start; } .site-footer { gap:18px; padding-block:24px 32px; } .site-footer p { width:100%; font-size:.76rem; } .site-footer nav { gap:14px 20px; font-size:.76rem; } .developer-hero h1 { font-size:clamp(2.8rem,11vw,4rem); } .developer-layout { padding-bottom:50px; } .developer-pair { grid-template-columns:1fr; gap:20px; } .developer-section { padding-block:32px; } pre { padding:18px; font-size:.72rem; } .api-table { font-size:.76rem; } .api-table th,.api-table td { padding-right:8px; } .developer-support { display:block; } .developer-support .coffee-link { margin-top:22px; width:fit-content; } }
  @media(max-width:820px) { .star-callout { align-items:flex-start; flex-direction:column; gap:26px; padding:30px; } }
  @media(max-width:600px) { .star-callout { padding:26px 22px; } .star-button { width:100%; } }
  @media(min-width:601px) and (max-width:900px) { .header-inner { flex-wrap:wrap; padding-block:14px; } .js .menu-toggle { display:flex; margin-left:auto; } .primary-nav { width:100%; margin:0; padding-top:12px; justify-content:space-between; gap:12px; } .js .primary-nav:not(.is-open) { display:none; } .primary-nav a { font-size:.85rem; padding:8px 12px; background:var(--surface-soft); border-radius:4px; } .theme-control { padding-left:12px; } }
  @media(prefers-reduced-motion:no-preference) { html { scroll-behavior:smooth; } }
  @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
  @media(forced-colors:active) { .button,.coffee-link,.product-screen { border:1px solid ButtonText; } .hero::before { display:none; } }
}