@layer base, layout, components, responsive;
@layer base {
  :root { color-scheme: light; --paper:#faf8f2; --ink:#182d38; --muted:#53636b; --mint:#5ed9bd; --green:#006b58; --line:#d8ddd7; --amber:#ffb454; font-family:Inter, "Segoe UI", Arial, sans-serif; color:var(--ink); background:var(--paper); }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; scroll-padding-top:24px; }
  body { margin:0; }
  a { color:inherit; text-decoration:none; }
  button { font:inherit; }
  img { display:block; max-width:100%; height:auto; }
  h1,h2,h3,p,figure { margin:0; }
  a:focus-visible,button:focus-visible { outline:3px solid var(--green); outline-offset:5px; }
  ::selection { background:var(--mint); color:var(--ink); }
  .skip-link { position:fixed; z-index:20; top:12px; left:12px; padding:12px 20px; background:var(--ink); color:white; transform:translateY(-160%); }
  .skip-link:focus { transform:translateY(0); }
}
@layer layout {
  .wrap { width:min(1280px,calc(100% - 96px)); margin-inline:auto; }
  .site-header { display:flex; justify-content:space-between; align-items:center; min-height:106px; border-bottom:1px solid var(--line); }
  .hero { padding-block:66px 35px; }
  .hero-intro { display:grid; grid-template-columns:1.2fr 1fr; align-items:end; gap:72px; margin-top:23px; margin-bottom:54px; }
  .hero-copy { max-width:460px; padding-bottom:6px; }
  .hero-copy>p:first-child { font-size:20px; line-height:1.6; margin-bottom:24px; }
  .workbench { padding-block:92px 70px; }
  .section-intro { display:grid; grid-template-columns:1.4fr 1fr; align-items:end; column-gap:100px; margin-bottom:44px; }
  .section-intro .eyebrow { grid-column:1/-1; margin-bottom:18px; }
  .section-intro>p:last-child { font-size:19px; line-height:1.65; max-width:350px; padding-bottom:4px; }
  .feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
  .download-inner { display:flex; align-items:center; justify-content:space-between; gap:40px; padding-block:66px; }
  .site-footer { display:flex; gap:30px; align-items:center; justify-content:space-between; padding-block:28px; }
}
@layer components {
  .wordmark { display:inline-flex; align-items:center; gap:9px; font-size:26px; font-weight:750; letter-spacing:-1px; }
  .wordmark-dot { color:var(--green); }
  .site-header nav { display:flex; align-items:center; gap:34px; font-size:14px; font-weight:600; }
  nav a { padding:12px 0; }
  nav a:hover,.site-footer>a:last-child:hover { color:var(--green); text-decoration:underline; text-underline-offset:5px; }
  .nav-download { border:1px solid var(--ink); padding:11px 18px; border-radius:5px; }
  .eyebrow,.feature-number { font:600 11px/1.5 "Cascadia Code",Consolas,monospace; letter-spacing:1.8px; }
  .eyebrow { display:flex; align-items:center; gap:10px; }
  .status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); }
  h1 { font-size:clamp(56px,5.7vw,82px); font-weight:700; letter-spacing:-4px; line-height:1.05; }
  .accent { color:var(--green); }
  h2 { font-size:clamp(36px,4vw,52px); font-weight:650; line-height:1.1; letter-spacing:-2px; }
  h3 { font-size:27px; font-weight:650; line-height:1.25; letter-spacing:-.7px; }
  .button { display:inline-flex; justify-content:center; align-items:center; gap:30px; border:1px solid transparent; border-radius:5px; padding:16px 21px; font-size:14px; font-weight:650; line-height:1.4; transition:background .15s,transform .15s; }
  .button:hover { transform:translateY(-2px); }
  .button-dark { background:var(--ink); color:white; }
  .button-dark:hover { background:#294754; }
  .button-mint { background:var(--mint); color:var(--ink); }
  .button-mint:hover { background:#8fe8d3; }
  .availability { margin-top:13px; font-size:12px; color:var(--muted); }
  .availability span { padding-inline:6px; }
  .hero-figure { border:1px solid #bfcac6; border-radius:9px; background:white; box-shadow:0 18px 45px -30px #182d3859; overflow:hidden; }
  .figure-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 21px; background:#e9eee8; border-bottom:1px solid #c7d2cd; font-size:12px; font-weight:600; }
  .mini-mark { color:var(--green); font-size:19px; margin-right:8px; }
  .figure-tag { font:10px Consolas,monospace; letter-spacing:1.2px; color:var(--muted); }
  .screenshot-link { display:block; position:relative; cursor:zoom-in; }
  .screenshot-link img { width:100%; }
  .zoom-hint { position:absolute; right:16px; bottom:16px; border:1px solid #ffffff50; border-radius:4px; background:var(--ink); color:white; padding:8px 12px; font-size:12px; box-shadow:0 2px 9px #0002; }
  .screenshot-link:hover .zoom-hint { background:var(--green); }
  figcaption { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:17px 21px; border-top:1px solid var(--line); font-size:12px; }
  .sample-note { color:var(--muted); font-size:11px; }
  .protocol-strip { border-block:1px solid var(--line); margin-top:15px; }
  .protocol-strip .wrap { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-block:22px; font:12px/1.5 Consolas,monospace; color:var(--muted); }
  .feature { min-width:0; }
  .feature-heading { padding:25px 0; border-top:2px solid var(--ink); }
  .feature-number { display:block; margin-bottom:14px; color:var(--green); letter-spacing:1px; }
  .feature-heading p { color:var(--muted); max-width:410px; margin-top:12px; line-height:1.6; font-size:15px; min-height:48px; }
  .feature-shot { padding:12px; border:1px solid #c6d1c9; background:#e2ece5; border-radius:6px; }
  .feature:last-child .feature-shot { background:#f1e6d5; border-color:#ded3c3; }
  .feature-shot img { border:1px solid #ced5d9; border-radius:3px; }
  .more-tools { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:34px; padding:23px 0; border-block:1px solid var(--line); font-size:15px; line-height:1.7; }
  .more-tools p { max-width:850px; color:var(--muted); }
  .more-tools strong { color:var(--ink); }
  .more-tools>span { color:var(--green); font-size:36px; }
  .download-section { background:var(--ink); color:var(--paper); }
  .download-inner .eyebrow { color:var(--mint); margin-bottom:16px; }
  .download-inner h2 { font-size:56px; margin-bottom:17px; }
  .download-inner>div>p:last-child { font-size:16px; color:#c6d1d4; }
  .download-actions { text-align:center; }
  .download-actions p { margin:13px 0 22px; color:#c6d1d4; font-size:12px; }
  .source-link { font-size:13px; text-decoration:underline; text-underline-offset:5px; }
  .download-section a:focus-visible { outline-color:var(--mint); }
  .site-footer .wordmark { font-size:20px; }
  .site-footer p,.site-footer>a:last-child { font-size:12px; color:var(--muted); }
  .lightbox { width:min(1600px,96vw); max-width:none; max-height:94dvh; padding:0; border:1px solid #435660; border-radius:8px; background:var(--ink); color:white; }
  .lightbox::backdrop { background:#0b1923e8; }
  .lightbox[open] { display:flex; flex-direction:column; }
  body:has(.lightbox[open]) { overflow:hidden; }
  .lightbox-toolbar { display:flex; align-items:center; gap:24px; padding:13px 18px; }
  .lightbox-toolbar h2 { font-size:17px; font-weight:500; letter-spacing:0; margin-right:auto; }
  .lightbox-toolbar a { font-size:13px; text-decoration:underline; text-underline-offset:4px; }
  .close-lightbox { flex:none; padding:8px 12px; border:1px solid #8a9ca5; border-radius:4px; background:transparent; color:white; cursor:pointer; }
  .close-lightbox span { margin-left:8px; }
  .lightbox-image { overflow:auto; min-height:0; }
  .lightbox-image img { width:100%; }
  .lightbox :focus-visible { outline-color:var(--mint); }
}
@layer responsive {
  @media(min-width:1700px) { .wrap { width:min(1440px,calc(100% - 120px)); } }
  @media(max-width:1000px) {
    .wrap { width:calc(100% - 56px); }
    .hero-intro { gap:36px; grid-template-columns:1.15fr 1fr; }
    h1 { font-size:59px; letter-spacing:-3px; }
    .hero-copy>p:first-child { font-size:17px; }
    .hero-copy .button { gap:16px; font-size:13px; padding:15px; }
    .section-intro { gap:28px; }
    .feature-grid { gap:24px; }
  }
  @media(max-width:700px) {
    .wrap { width:calc(100% - 36px); }
    .site-header { min-height:84px; }
    .wordmark { font-size:23px; gap:5px; }
    .wordmark img { width:39px; }
    .site-header nav { gap:16px; font-size:12px; }
    .site-header nav>a:first-child { display:none; }
    .nav-download { padding:9px 10px; }
    .hero { padding-top:38px; }
    .hero-intro { grid-template-columns:1fr; gap:26px; margin-bottom:32px; }
    h1 { font-size:clamp(49px,10vw,68px); letter-spacing:-2.5px; }
    .hero-copy { max-width:490px; }
    .hero-copy>p:first-child { font-size:17px; margin-bottom:21px; }
    .hero-copy .button { padding:15px 19px; font-size:14px; gap:22px; }
    .figure-bar { padding:10px 12px; font-size:10px; }
    .figure-tag { display:none; }
    figcaption { padding:13px; align-items:start; flex-direction:column; gap:5px; font-size:11px; }
    .zoom-hint { right:8px; bottom:8px; padding:7px 9px; font-size:10px; }
    .protocol-strip .wrap { justify-content:center; gap:12px 22px; font-size:10px; padding-block:17px; }
    .workbench { padding-block:50px 40px; }
    .section-intro { grid-template-columns:1fr; gap:16px; margin-bottom:32px; }
    .section-intro .eyebrow { margin-bottom:0; }
    .section-intro>p:last-child { font-size:17px; }
    .feature-grid { grid-template-columns:1fr; gap:36px; }
    .feature-heading { padding-block:20px; }
    .feature-heading p { min-height:0; }
    h3 { font-size:25px; }
    .more-tools { font-size:14px; gap:16px; }
    .download-inner { flex-direction:column; align-items:flex-start; padding-block:43px; gap:29px; }
    .download-inner h2 { font-size:44px; }
    .download-actions { text-align:left; }
    .site-footer { flex-wrap:wrap; gap:18px; padding-block:24px; }
    .site-footer p { order:3; flex-basis:100%; }
    .lightbox-toolbar { flex-wrap:wrap; gap:12px; }
    .lightbox-toolbar h2 { font-size:14px; }
    .lightbox-toolbar a { order:3; flex-basis:100%; }
    .lightbox-image img { width:1100px; max-width:none; }
  }
  @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } .button:hover { transform:none; } }
  @media(forced-colors:active) { .button,.hero-figure,.feature-shot { border:1px solid ButtonText; } .status-dot { background:CanvasText; } }
}