*{box-sizing:border-box}
html{scroll-padding-top:84px}
body{
  margin:0;background:radial-gradient(circle at 16% 0%,var(--accent-soft),transparent 36rem),var(--bg);
  color:var(--ink);font:16px/1.7 system-ui,-apple-system,"PingFang SC",sans-serif;
}
.preview-shell{width:min(1140px,calc(100% - 48px));margin:auto;padding:22px 0 48px}
a{color:inherit;text-underline-offset:5px}
header:not(.site-header){max-width:820px;padding:58px 0 42px}
.eyebrow{font-size:11px;letter-spacing:.14em;color:var(--accent);font-weight:650}
h1{font-size:clamp(40px,6.4vw,74px);font-weight:770;letter-spacing:-.058em;line-height:1.08;margin:14px 0 22px}
h2{font-size:23px;margin:0;line-height:1.4;letter-spacing:-.025em}
header>p:not(.eyebrow){max-width:64ch;font-size:14px;color:var(--ink2);line-height:1.9;margin-top:11px}
header .version{font-size:17px;font-weight:650;color:var(--ink)}
.context-note{padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--pill)}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.gallery section{min-width:0;padding:18px;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--glass);box-shadow:var(--glass-shadow)}
.gallery section>div{min-height:165px;padding:5px 5px 18px}
.gallery p{font-size:13px;color:var(--ink2);margin-top:10px}
.native-shot{display:block;border:1px solid var(--line);border-radius:14px;background:var(--bg);overflow:hidden}
.native-shot img{display:block;width:100%;height:auto;background:white}
.drawing-section{padding-top:62px}
.section-heading{max-width:800px;margin-bottom:25px}
.section-heading h2{font-size:clamp(30px,4vw,44px);font-weight:750;line-height:1.18;margin:9px 0 14px}
.section-heading p:not(.eyebrow){color:var(--ink2);font-size:14px;line-height:1.9}
.drawing-gallery{display:grid;grid-template-columns:1fr 2fr;gap:28px;align-items:center}
.drawing-gallery:has(figure:only-child){grid-template-columns:minmax(260px,500px);justify-content:center}
.drawing-gallery figure{margin:0}
.drawing-gallery figcaption{font-size:12px;color:var(--ink2);margin-top:11px}
.feature-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:56px;padding:24px;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--glass);box-shadow:var(--glass-shadow)}
.feature-notes article{padding:8px;border-top:1px solid var(--line)}
.feature-notes h2{font-size:21px;font-weight:700;margin:12px 0 13px}
.feature-notes p{font-size:13px;line-height:1.85;color:var(--ink2);margin-top:10px}
.feature-notes a{display:inline-flex;align-items:center;min-height:40px;color:var(--accent)}
footer{padding:34px 0 12px;color:var(--ink2);font-size:12px}
footer p+p{margin-top:9px}
footer a{color:var(--accent)}
a:focus-visible,.native-shot:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
@media(hover:hover) and (pointer:fine){
  .native-shot{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
  .native-shot:hover{transform:translateY(-2px);border-color:var(--accent-border);box-shadow:var(--glass-shadow)}
}
@media(max-width:850px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drawing-gallery{grid-template-columns:1fr 1.5fr}
  .feature-notes{grid-template-columns:1fr}
}
@media(max-width:560px){
  .preview-shell{width:calc(100% - 30px);padding-bottom:30px}
  header:not(.site-header){padding:38px 0 28px}
  h1{font-size:42px}
  .gallery{grid-template-columns:1fr;gap:15px}
  .gallery section{padding:14px}
  .gallery section>div{min-height:0;padding-bottom:14px}
  .native-shot img{max-width:390px;margin:auto}
  .drawing-section{padding-top:42px}
  .drawing-gallery{grid-template-columns:1fr;gap:26px}
  .drawing-gallery figure:first-child .native-shot{max-width:260px;margin:auto}
  .feature-notes{margin-top:38px;padding:18px}
}
@media(prefers-reduced-motion:reduce){.native-shot{transition:none}.native-shot:hover{transform:none}}
@media(prefers-contrast:more){.gallery section,.feature-notes,.native-shot,.context-note{border-color:currentColor;background:var(--bg);box-shadow:none}}