/* A two-row palette: the lower row drifts toward the product image. */
.theme-feature .showcase-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px;max-width:680px;padding-right:28px}
.theme-feature .showcase-tabs button{white-space:normal;text-wrap:balance;min-height:44px;line-height:1.5;padding:10px 7px}
.theme-feature .showcase-tabs button:nth-child(n+5){position:relative;left:28px}
.nav-shell nav #theme-toggle{display:grid;place-items:center;padding:0;width:44px;height:44px;border-radius:50%;background:transparent;color:var(--ink);border:0;flex-shrink:0}
.theme-sun,.theme-moon{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#theme-toggle .theme-sun{display:none}
[data-theme="dark"] #theme-toggle .theme-sun{display:block}
[data-theme="dark"] #theme-toggle .theme-moon{display:none}
#theme-toggle:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.theme-preferences{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.theme-label{display:block;font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
.theme-segments{display:flex;gap:4px;padding:4px;border-radius:16px;background:color-mix(in srgb,var(--ink) 6%,var(--paper));border:1px solid var(--line)}
.theme-segments button{flex:1;display:flex;justify-content:center;align-items:center;gap:9px;padding:10px 12px;min-height:44px;border-radius:12px;color:var(--muted);font-size:14px}
.theme-segments button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 2px 7px #00000012}
.theme-segments button:hover{color:var(--ink)}
.nav-shell nav{gap:20px}
.nav-shell .brand{flex-shrink:0}

/* Screens keep their native pixels; the presentation frame supplies depth. */
.product-panel{overflow:visible}
.product-panel:before{width:100%;left:0;pointer-events:none}
.product-panel .phone{z-index:3}
.record-panel .solo-phone{overflow:visible}
.product-panel .phone>button,.hero-stage .phone>button,.capability-card>button{transition:transform .55s cubic-bezier(.2,.75,.2,1),box-shadow .55s;transform-origin:50% 100%;will-change:transform}
.product-panel .phone>button{transform:perspective(1000px) rotateY(-9deg) rotateX(3deg) translateX(-16px);box-shadow:18px 20px 38px #1e302c28}
.reverse .product-panel .phone>button{transform:perspective(1000px) rotateY(9deg) rotateX(3deg) translateX(16px)}
.product-panel .detail-scroll{overflow:visible}
.product-panel .detail-scroll>button,.product-panel .detail-scroll .app-crop{height:100%;overflow:hidden;border-radius:20px}
.capability-grid{padding:46px 18px 12px;gap:28px;perspective:1800px}
.capability-card{transform-origin:50% 100%;transition:transform .6s,box-shadow .6s}
.capability-card:nth-child(1){transform:translateX(12px) rotate(-3.5deg)}
.capability-card:nth-child(2){transform:translateY(-16px)}
.capability-card:nth-child(3){transform:translateX(-12px) rotate(3.5deg)}
.capability-card>button{transform:translateY(-32px) perspective(1000px) rotateX(4deg);box-shadow:0 22px 34px #26342d25;margin-bottom:-15px}
.capability-card h3,.capability-card p{position:relative}
.gallery-card{transition:box-shadow .4s,translate .4s}
@media(hover:hover) and (pointer:fine){
 .product-panel .phone>button:hover,.product-panel .phone>button:focus-visible{transform:perspective(1000px) rotateY(-3deg) rotateX(0) translate(-22px,-14px);box-shadow:22px 30px 45px #1d302b3b}
 .reverse .product-panel .phone>button:hover,.reverse .product-panel .phone>button:focus-visible{transform:perspective(1000px) rotateY(3deg) translate(22px,-14px)}
 .hero-stage .phone>button:hover{transform:perspective(1000px) rotateX(6deg) translateY(-14px)}
 .capability-card>button:hover,.capability-card>button:focus-visible{transform:translateY(-48px) perspective(1000px) rotateX(-3deg) scale(1.025);box-shadow:0 30px 40px #26342d36}
 .gallery-card:hover{translate:0 -7px;box-shadow:0 25px 35px #23382a22}
}
#image-dialog{overflow:hidden;perspective:1500px}
#image-viewport{perspective:1500px}
.full-screenshot img{transform-origin:50% 0%;backface-visibility:hidden}
.page-copy-dialog{width:min(980px,calc(100vw - 30px));max-height:90dvh;padding:28px;overflow:auto}
.page-copy-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;position:sticky;top:-28px;z-index:3;background:var(--paper);padding:18px 0;border-bottom:1px solid var(--line)}
.page-copy-tools button{padding:9px 16px;border-radius:22px;border:1px solid var(--line)}
.page-copy-dialog .editorial-page{padding-block:24px}
.page-copy-dialog .editorial-page h1{font-size:calc(34px * var(--heading-size-scale,1))}

/* Dark paper, warm type and native screenshot colours. */
:root[data-theme="dark"]{--ink:#efece3;--muted:#b6c1b8;--paper:#151c19;--line:#445149;--accent:#b9d0bb}
[data-theme="dark"] .nav-shell{background:#1d2924ed;border-color:#6473696b;box-shadow:0 8px 26px #0004}
[data-theme="dark"] .primary,[data-theme="dark"] .nav-shell nav .nav-download{background:#d5e5ca;color:#1e2e23}
[data-theme="dark"] .primary:hover{background:#e4f0dc}
[data-theme="dark"] .hero{background:#25362e}
[data-theme="dark"] .hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(#13211b66,#18271e8c)}
[data-theme="dark"] .hero-copy{background:rgba(23,34,28,var(--copy-opacity,.84));border-color:#9eafa266;box-shadow:0 20px 60px #0002}
[data-theme="dark"] .hero .hero-kicker{color:var(--accent)}
[data-theme="dark"] .hero h1,[data-theme="dark"] .hero-description{text-shadow:none}
[data-theme="dark"] .hero-description,[data-theme="dark"] .quiet-list,[data-theme="dark"] .phone figcaption,[data-theme="dark"] .floating-note{color:var(--ink)}
[data-theme="dark"] .hero-stage:before{background:#24352c}
[data-theme="dark"] .floating-note{background:#3a4535;border-color:#71846c}
[data-theme="dark"] .note-two{background:#544a30}
[data-theme="dark"] .advantage-card,[data-theme="dark"] .capability-card{background:#2d342b}
[data-theme="dark"] .style-card,[data-theme="dark"] .capability-card:nth-child(3){background:#33303d}
[data-theme="dark"] .connection-card{background:#3e332b}
[data-theme="dark"] .filter-card,[data-theme="dark"] .capability-card:nth-child(2){background:#283b36}
[data-theme="dark"] .privacy-card{background:#29372f}[data-theme="dark"] .privacy-motif{color:#acc8ad}
[data-theme="dark"] .advantage-card p,[data-theme="dark"] .advantage-number,[data-theme="dark"] .attribute-motif span,[data-theme="dark"] .filter-motif span{color:#d1d9cb}
[data-theme="dark"] .attribute-motif span,[data-theme="dark"] .filter-motif span{background:#465343}
[data-theme="dark"] .connection-motif span{color:#ead8c4;border-color:#9c8067}
[data-theme="dark"] .lilac,[data-theme="dark"] .theme-panel{background:linear-gradient(150deg,#424151,#292c33 60%,#454638)}
[data-theme="dark"] .sage{background:linear-gradient(150deg,#405444,#2d3e34 65%,#494733)}
[data-theme="dark"] .history-panel{background:linear-gradient(150deg,#544537,#303b30)}
[data-theme="dark"] .phone{background:#29382f;border-color:#788b77;box-shadow:0 18px 36px #0005}
[data-theme="dark"] .panel-caption,[data-theme="dark"] .preview-status{background:#25392ef0;color:#edf0df;border:1px solid #73806a66}
[data-theme="dark"] .record-tabs button{background:#263a2f;color:#dae6d2}
[data-theme="dark"] .showcase-tabs button[aria-pressed="true"]{background:#d0dfc3;color:#1b2c20}
[data-theme="dark"] .gallery-card{background:#303b30;border-color:#58604b}
[data-theme="dark"] .gallery-card:nth-child(3n+2){background:#38372e}
[data-theme="dark"] .gallery-card:nth-child(3n){background:#303a3a}
[data-theme="dark"] .gallery-attribute .chip{color:#29362d}
[data-theme="dark"] .gallery-look,[data-theme="dark"] .card-open{color:#c2d2b9}
[data-theme="dark"] .detail-notes span{background:#3d4838;color:#e4ebdd}
[data-theme="dark"] .detail-notes span:nth-child(2){background:#544336}
[data-theme="dark"] .detail-notes span:nth-child(3){background:#494256}
[data-theme="dark"] dialog{background:#202b25;color:var(--ink);border-color:#6b7d6e}
[data-theme="dark"] dialog::backdrop{background:#050b08ad;backdrop-filter:blur(10px)}
[data-theme="dark"] .close{background:#d2ddc8;color:#1e3023}
[data-theme="dark"] #image-viewport,[data-theme="dark"] .full-screenshot{background:#1a251f}
[data-theme="dark"] .version-card,[data-theme="dark"] .download-band,[data-theme="dark"] .download-option,[data-theme="dark"] .about-prose blockquote{background:#26382d;color:var(--ink)}
[data-theme="dark"] .future-card{background:#383343}
[data-theme="dark"] .future-card p,[data-theme="dark"] .no-package{color:#c9c7d3}
[data-theme="dark"] #site-menu nav a:hover,[data-theme="dark"] #menu-toggle:hover{background:#34443a;color:var(--ink)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{background:#17251d;color:var(--ink);border-color:#677868}
[data-theme="dark"] #image-retry,[data-theme="dark"] .feature-pills a:hover{background:#41593f;color:var(--ink)}
[data-theme="dark"] .author-toolbar{background:#26372ef2;border-color:#66795e;color:var(--ink)}
[data-theme="dark"] .author-label{color:var(--muted)}
[data-theme="dark"] a:hover{color:#d6b98c}
[data-theme="dark"] .primary:hover,[data-theme="dark"] .nav-download:hover{color:#15251b}
[data-theme="dark"] :focus-visible{outline-color:#d4c18d}
@media(max-width:800px){.nav-shell nav{gap:10px}.nav-shell nav #theme-toggle{width:30px;height:30px;font-size:20px}.product-panel .phone>button{transform:perspective(1000px) rotateY(-5deg) translateX(-6px)}.reverse .product-panel .phone>button{transform:perspective(1000px) rotateY(5deg) translateX(6px)}}
@media(max-width:700px){.capability-grid{padding:32px 4px 0;gap:44px}.capability-card:nth-child(n){transform:none}.capability-card>button{transform:translateY(-24px) perspective(1000px) rotateX(3deg)}}
@media(max-width:600px){.nav-shell nav{gap:7px}.nav-shell .brand{font-size:20px}.nav-shell nav #theme-toggle{width:28px;height:28px}.theme-feature .showcase-tabs{gap:10px 5px;padding-right:14px}.theme-feature .showcase-tabs button{font-size:calc(11px * var(--small-size-scale,1));padding:10px 2px}.theme-feature .showcase-tabs button:nth-child(n+5){left:14px}.page-copy-dialog{padding:18px}.page-copy-tools{top:-18px}}
@media(max-width:420px){.nav-shell nav #theme-toggle{display:none}}
@media(max-width:360px){.nav-shell .brand{font-size:18px}.nav-shell nav{gap:5px}.nav-shell nav .nav-versions{font-size:10px}.nav-shell nav a.nav-download{padding-inline:8px}.nav-shell .brand img{width:24px;height:24px}.nav-shell nav #theme-toggle{width:26px;height:28px}.theme-feature .showcase-tabs{gap:8px 3px}.theme-feature .showcase-tabs button{font-size:calc(10px * var(--small-size-scale,1))}}
@media(max-width:360px){.nav-shell{padding:9px 10px;gap:6px}.nav-shell .brand{font-size:16px;gap:5px}.nav-shell .brand img{width:22px;height:22px}.nav-shell nav #menu-toggle{width:26px;min-width:26px;padding-inline:3px}.nav-shell nav .nav-download{font-size:10px;padding-inline:9px}}
@media(max-width:800px){
 .advantages-heading p,.advantage-card p,.capability-card p{white-space:normal;text-wrap:pretty;overflow-wrap:anywhere}
 .hero-description,.intro p,.feature-copy>p{white-space:normal;text-wrap:pretty;word-break:normal;overflow-wrap:anywhere}
 .copy-line{display:block}.copy-indent{display:none}.copy-line+br{display:none}
 .hero-description .copy-line+.copy-line{margin-top:.7em}
 .hero-description .copy-line:not(:first-child){margin-top:.7em}
 .intro p .copy-line:not(:first-child),.feature-copy>p .copy-line:not(:first-child){margin-top:.65em}
 .intro p{max-width:38em;margin-inline:auto}
 .feature-copy>p{line-height:2.1}
 .record-panel .solo-phone{max-width:calc(100% - 14px)}
}
@media(min-width:421px){.nav-shell nav #theme-toggle{width:44px;height:44px}}
@media(max-width:600px){
 .hero-copy{padding:26px 20px 28px}
 .hero-copy h1{font-size:calc(clamp(24px,6.4vw,34px) * var(--heading-size-scale))!important;line-height:1.65;margin-block:20px 24px;text-wrap:balance}
 .hero-description{max-width:29em;font-size:calc(14px * var(--body-size-scale))!important;line-height:1.95;letter-spacing:0}
 .intro p{font-size:calc(15px * var(--body-size-scale))!important;line-height:2.05}
 .feature-copy h2,.section-heading h2,.advantages-heading h2{font-size:calc(clamp(26px,7.3vw,34px) * var(--heading-size-scale));line-height:1.6;text-wrap:balance;letter-spacing:0}
 .details-description li{line-height:2;margin-bottom:16px}
 .detail-notes{gap:8px;flex-wrap:wrap}.detail-notes span{line-height:1.7;padding:10px 13px}
 .section-heading{align-items:start}.section-heading p{max-width:30em}
 .advantage-card h3{font-size:calc(24px * var(--heading-size-scale));text-wrap:balance}
 .advantage-card p,.capability-card p{line-height:2.05}
 .future-card p{font-size:calc(14px * var(--body-size-scale))!important;line-height:2}
 .work-list p,.page-lead{line-height:2.05;text-wrap:pretty;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.product-panel .phone>button,.reverse .product-panel .phone>button,.hero-stage .phone>button,.capability-card>button,.capability-card:nth-child(n),.gallery-card{transform:none!important;translate:none!important;transition:none!important}.full-screenshot img{animation:none!important}}

/* A readable product introduction and first-use guide. */
.product-overview{padding-block:36px;border-block:1px solid var(--line)}
.product-overview h2{font-size:clamp(23px,3vw,32px);letter-spacing:0;line-height:1.5}
.product-overview p{max-width:720px;margin:14px 0;font-size:calc(16px * var(--body-size-scale,1));line-height:1.9}
.guide-page .about-prose h2{font-size:clamp(24px,4vw,34px);letter-spacing:0;margin:40px 0 18px}
.guide-page .about-prose ol{padding-left:1.5em;font-size:calc(18px * var(--body-size-scale,1));line-height:2}
.guide-page li+li{margin-top:14px}
.guide-page figure{margin:32px 0;text-align:center}
.guide-page figure img{display:block;width:min(100%,300px);height:auto;margin:auto;border-radius:22px}
.guide-page figcaption{margin-top:12px;color:var(--muted);font-size:14px}
footer{flex-wrap:wrap}