/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * Macrostructure: open product showcase — left copy, floating right demonstration.
 * Existing VaS green palette, Be Vietnam Pro + Space Grotesk, shared navigation.
 */
html[data-public-page] {
  /* Core colors inherit the exact light/dark Studio Tool values from tokens.css. */
  --color-ambient-brand:color-mix(in oklab,var(--color-accent) 11%,transparent);
  --color-shadow-space:oklch(10% .01 225 / .22);
}
html,body{overflow-x:clip}
html[data-public-page] body{background:radial-gradient(ellipse at 78% 5%,var(--color-ambient-brand),var(--color-clear) 38%),var(--color-paper)}
html[data-public-page] .nav-pill{border:1px solid var(--color-rule);background:color-mix(in oklab,var(--color-paper-2) 91%,transparent);box-shadow:0 10px 40px var(--color-shadow-space);backdrop-filter:blur(18px)}
html[data-public-page] .wordmark{letter-spacing:-.03em}
html[data-public-page] .brand-secondary{color:var(--color-ink)}
.ecosystem-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);padding-block:clamp(2.5rem,5vw,5rem) 4.5rem;align-items:center}
.solar-atmosphere{position:absolute;inset:-4rem -6vw -2rem;overflow:hidden;z-index:-1;pointer-events:none;mask-image:linear-gradient(transparent,var(--color-ink) 17%,var(--color-ink) 76%,transparent)}
.solar-atmosphere *{pointer-events:none}
.ambient-glow{position:absolute;width:58%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--color-accent) 9%,transparent),transparent 66%);opacity:.7;animation:ambient-drift 18s ease-in-out infinite alternate;animation-play-state:paused}
.ambient-glow-one{right:-5%;top:-14%}.ambient-glow-two{left:-14%;bottom:-32%;width:52%;opacity:.45;animation-duration:24s;animation-delay:-8s}
.ambient-grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in oklab,var(--color-accent) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--color-accent) 7%,transparent) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 76% 40%,var(--color-ink),transparent 70%);opacity:.4}
.ambient-dust{position:absolute;inset:0}.ambient-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--color-accent);opacity:.18;animation:ambient-float 16s ease-in-out infinite alternate;animation-play-state:paused}
.ambient-particle-0{left:8%;top:22%;animation-delay:-3s}.ambient-particle-1{left:23%;top:71%;width:2px;height:2px;animation-delay:-9s}.ambient-particle-2{left:46%;top:14%;animation-delay:-5s}.ambient-particle-3{left:58%;top:82%;width:2px;height:2px;animation-delay:-11s}.ambient-particle-4{left:71%;top:8%;animation-delay:-14s}.ambient-particle-5{left:87%;top:38%;animation-delay:-7s}.ambient-particle-6{left:93%;top:74%;width:2px;height:2px;animation-delay:-1s}.ambient-particle-7{left:35%;top:91%;animation-delay:-12s}
[data-ambient-motion="running"] .ambient-glow,[data-ambient-motion="running"] .ambient-particle{animation-play-state:running}
@keyframes ambient-drift{to{transform:translate(24px,-18px) scale(1.08)}}
@keyframes ambient-float{to{transform:translate(10px,-24px);opacity:.38}}
.hero-brandline{display:flex;align-items:center;gap:.65rem;font-size:.85rem;font-weight:500;color:var(--color-muted);margin-bottom:1.75rem}
.hero-brandline>span{width:7px;height:7px;background:var(--color-accent);border-radius:50%;box-shadow:0 0 20px var(--color-ambient-brand)}
.ecosystem-hero h1{font:600 clamp(3rem,5.4vw,5.8rem)/1.16 var(--font-body);letter-spacing:-.065em;overflow-wrap:normal;max-width:12ch;min-width:0}
.ecosystem-hero h1>span{color:var(--color-accent)}
.ecosystem-hero .lede{margin-top:1.75rem;font-size:clamp(1rem,1.25vw,1.1rem);max-width:39ch;line-height:1.9;color:var(--color-muted)}
.ecosystem-hero .actions{gap:1.5rem;margin-top:2rem;align-items:center}
.ecosystem-hero .hero-note{font-size:.75rem;line-height:1.7;margin-top:1.5rem;color:var(--color-muted)}
.ecosystem-playground{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.tool-universe{position:relative;isolation:isolate;aspect-ratio:1;width:100%;max-width:540px;margin-inline:auto;border-radius:50%;--pointer-x:50%;--pointer-y:50%;--orbit-radius:150px;--orbit-play-state:paused}
.universe-light{position:absolute;inset:0;background:radial-gradient(circle at var(--pointer-x) var(--pointer-y),var(--color-ambient-brand),var(--color-clear) 58%);mask-image:radial-gradient(ellipse at center,var(--color-ink) 24%,transparent 70%);pointer-events:none;z-index:-1;opacity:.7;transition:opacity var(--dur-long) var(--ease-out)}
.is-pointer-active .universe-light{opacity:1}
.orbit{position:absolute;left:50%;top:50%;border:1px solid var(--color-rule);border-radius:50%;pointer-events:none;opacity:.65;transform:translate(-50%,-50%)}
.orbit-outer{width:calc(var(--orbit-radius) * 2.05);height:calc(var(--orbit-radius) * 1.83);border-style:dashed;opacity:.3;transform:translate(-50%,-50%) rotate(-17deg)}
.orbit-inner{width:calc(var(--orbit-radius) * 1.78);height:calc(var(--orbit-radius) * 2.02);border-color:var(--color-accent);opacity:.09;transform:translate(-50%,-50%) rotate(26deg)}
.core-aura{position:absolute;left:50%;top:50%;width:44%;height:44%;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in oklab,var(--color-accent) 12%,transparent),transparent 70%);pointer-events:none}
.planet{position:absolute;display:flex;flex-direction:column;gap:.7rem;align-items:center;justify-content:center;background:var(--color-clear);color:var(--color-muted);border:0;min-width:96px;min-height:96px;transform:translate(-50%,-50%);cursor:pointer;z-index:2;padding:.4rem;border-radius:1rem;transition:color var(--dur-medium) var(--ease-out)}
.planet:active{transform:translate(-50%,-50%)}
.planet-0{left:50%;top:50%;z-index:3}
.planet-orbit{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2;pointer-events:none}
.planet-carrier{position:absolute;left:0;top:0;width:0;height:0}
.planet-orbit .planet{left:0;top:0;pointer-events:auto;transform:translate(-50%,-50%);width:68px;min-width:68px;height:68px;min-height:68px;padding:0;gap:0}
.planet-orbit .planet-name{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:90px;max-width:90px;white-space:normal;text-align:center;line-height:1.35}
.planet-core{width:100px;min-width:100px;height:100px;min-height:100px;padding:0;gap:0}
.planet-core .planet-name{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:100px;text-align:center}
.planet-symbol{display:grid;place-items:center;width:68px;height:68px;background:var(--color-paper-2);border:1px solid var(--color-rule);border-radius:1.25rem;box-shadow:0 8px 25px var(--color-shadow-space);transition:transform var(--dur-medium) var(--ease-out),border-color var(--dur-medium) var(--ease-out)}
.planet-symbol img{width:43px;height:43px;object-fit:contain}
.planet-0 .planet-symbol{width:94px;height:94px;border-radius:1.8rem}.planet-0 img{width:62px;height:62px}
.planet-name{font-size:clamp(.65rem,1vw,.78rem);font-weight:500;line-height:1.3;white-space:nowrap;pointer-events:none}
.planet[aria-pressed=true]{color:var(--color-accent)}.planet[aria-pressed=true] .planet-symbol{border-color:var(--color-accent)}
.planet:focus-visible{outline:2px solid var(--color-focus);outline-offset:5px}
.universe-caption{position:absolute;inset:auto 0 -2.5rem;text-align:center;color:var(--color-muted);font-size:.7rem;pointer-events:none}
.selection-ring{position:absolute;inset:0;border:1px solid var(--color-accent);border-radius:50%;pointer-events:none;z-index:-1}
.tool-preview{margin:3.8rem auto 0;border-top:1px solid var(--color-rule);padding-top:1.25rem;width:100%;max-width:480px;min-height:174px}
.tool-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.tool-preview h2{font-size:1.1rem;letter-spacing:-.03em}.tool-preview p{font-size:.79rem;line-height:1.85;color:var(--color-muted);margin-top:.6rem;max-width:53ch}.tool-preview .round-link{width:34px;height:34px;min-width:44px;min-height:44px;background:var(--color-paper-3);color:var(--color-accent)}.tool-preview .round-link svg{width:18px;height:18px}
.ecosystem-catalog{padding-top:3rem;border-top:1px solid var(--color-rule)}.ecosystem-catalog .section-top h2{font:600 clamp(2rem,3.2vw,3.25rem)/1.3 var(--font-body);letter-spacing:-.05em}.ecosystem-catalog .section-top p{max-width:39ch;line-height:1.8}
html[data-public-page] .app-card{border:0;border-radius:0;overflow:visible;position:relative;isolation:isolate;transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);background:var(--color-clear)}
/* A pointer spotlight bounded by this row would expose rectangular edges. */
html[data-public-page] .app-card:after{content:none}
html[data-public-page] .app-card:focus-within{border-color:var(--color-accent)}
html[data-public-page] .card-copy{padding:2rem}.card-copy p{font-size:.9rem;line-height:1.9}.card-copy .card-tag{font-size:.7rem}
html[data-public-page] .card-copy h3{font:600 clamp(1.4rem,2vw,2rem)/1.35 var(--font-body);letter-spacing:-.045em}
html[data-public-page] .app-card .card-art{height:190px;background:radial-gradient(ellipse at 50% 55%,var(--color-ambient-brand),var(--color-paper-3) 70%)}
html[data-public-page] .app-card.featured .card-art{height:auto;min-height:300px}
html[data-public-page] .art-label{color:var(--color-muted)}
.app-art-logo{width:100px;height:100px;object-fit:contain;transition:transform var(--dur-long) var(--ease-out)}
html[data-public-page] .filter{border:1px solid var(--color-clear)}html[data-public-page] .filter[aria-pressed=true]{border-color:var(--color-rule);color:var(--color-accent)}
.ecosystem-closing{display:flex;align-items:center;gap:1.5rem;border-block:1px solid var(--color-rule);padding-block:2.75rem;transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out)}.ecosystem-closing>img{flex:none}.ecosystem-closing>div{flex:1}.ecosystem-closing h2{font-size:clamp(1.3rem,2.4vw,2rem);letter-spacing:-.04em}.ecosystem-closing p{font-size:.85rem;color:var(--color-muted);margin-top:.6rem;max-width:55ch}.ecosystem-closing>.text-link{color:var(--color-accent)}
.reveal-pending{opacity:0;transform:translateY(14px)}
html[data-public-page] .site-footer .footer-intro{display:none}
html[data-public-page] .site-footer .footer-meta{border:0;padding-top:0}
html[data-public-page] .button{transition:transform var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out),opacity var(--dur-short) var(--ease-out)}
html[data-public-page] .button:active{transform:translateY(1px)}
.nav-links a{position:relative}.nav-links a:after{content:'';position:absolute;bottom:1px;inset-inline:0;height:1px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-medium) var(--ease-out)}.nav-links a[aria-current=page]:after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){.planet:hover .planet-symbol{transform:translateY(-4px);border-color:var(--color-accent)}.planet:hover{color:var(--color-ink)}html[data-public-page] .app-card:hover{border-color:color-mix(in oklab,var(--color-accent) 55%,var(--color-rule))}.app-card:hover .app-art-logo{transform:translateY(-5px)}.nav-links a:hover:after{transform:scaleX(1)}html[data-public-page] .button:hover{opacity:1;transform:translateY(-2px)}}
@media(max-width:68rem){.nav-pill{gap:.8rem}.nav-links{gap:1rem}.ecosystem-hero h1{font-size:clamp(2.9rem,5.5vw,4.5rem)}.ecosystem-hero{gap:1.5rem}.ecosystem-hero .actions{gap:.75rem}.ecosystem-closing{flex-wrap:wrap}.ecosystem-closing>.text-link{margin-left:5.5rem}}
@media(max-width:50rem){.ecosystem-hero{grid-template-columns:minmax(0,1fr);padding-top:2rem;padding-bottom:2.5rem;gap:1rem}.ecosystem-hero h1{font-size:clamp(3rem,7.5vw,4.5rem);max-width:16ch}.ecosystem-hero .lede{max-width:50ch}.hero-brandline{margin-bottom:1rem}.ecosystem-playground{width:100%;max-width:540px;margin-inline:auto}.tool-universe{max-width:470px}.tool-preview{min-height:150px}.ecosystem-catalog{padding-top:2.5rem}.ecosystem-catalog .section-top{flex-direction:column;align-items:start}.ecosystem-catalog .section-top p{max-width:50ch}html[data-public-page] .app-card.featured .card-art{min-height:220px}}
@media(max-width:45rem){.nav-pill{gap:.4rem}.nav-login{font-size:.75rem}.nav-login>span{display:none}.wordmark img{width:24px;height:24px}.ecosystem-hero h1{font-size:clamp(2.8rem,9vw,4rem)}.hero-brandline{font-size:.75rem}.ecosystem-hero .actions{gap:1rem}.ecosystem-hero .lede{font-size:.92rem}.ecosystem-hero .hero-note{font-size:.7rem}.tool-preview{min-height:174px}.planet-symbol{width:58px;height:58px;border-radius:1rem}.planet-symbol img{width:37px;height:37px}.planet-0 .planet-symbol{width:78px;height:78px;border-radius:1.4rem}.planet-0 img{width:52px;height:52px}.planet{min-width:80px;min-height:80px;gap:.5rem}.planet-name{font-size:.62rem}.planet-1{left:19%}.planet-2{left:79%}.planet-4{left:19%}.universe-caption{font-size:.65rem}.ecosystem-closing{gap:1rem;align-items:start}.ecosystem-closing>img{width:44px;height:44px}.ecosystem-closing>.text-link{margin-left:60px}.ecosystem-closing h2{font-size:1.25rem}.ecosystem-closing p{font-size:.8rem}html[data-public-page] .card-copy{padding:1.5rem}.app-card.featured .card-art{order:-1}.ecosystem-catalog .section-top h2{font-size:2rem}.nav-pill .theme-toggle{width:36px;min-width:36px}.nav-pill .menu-toggle{width:36px;min-width:36px}}
@media(max-width:23rem){.nav-login{font-size:.7rem;padding-inline:.2rem}.nav-pill{gap:.3rem}.nav-pill .wordmark{gap:.35rem}.nav-pill .wordmark span{font-size:1rem}.ecosystem-hero h1{font-size:2.65rem}.hero-note{max-width:34ch}.planet-name{font-size:.56rem}.planet{min-width:70px}.tool-preview{min-height:190px}}
@media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1;transform:none}.orbit{transform:none}.universe-light{background:radial-gradient(circle at center,var(--color-ambient-brand),var(--color-clear) 58%)}.planet:hover .planet-symbol,.app-card:hover .app-art-logo,html[data-public-page] .button:hover{transform:none}.selection-ring{display:none}}
@media(max-width:45rem){.planet-orbit .planet{width:84px;min-width:84px;min-height:80px;gap:.35rem;padding:.25rem}.planet-orbit .planet-symbol{width:48px;height:48px;border-radius:.9rem}.planet-orbit .planet-symbol img{width:32px;height:32px}.planet-orbit .planet-name{max-width:84px;white-space:normal;text-align:center;font-size:.6rem}.solar-atmosphere{inset:-2rem -6vw 0}.ambient-grid{background-size:48px 48px}}
.tool-universe.is-compact .planet-orbit .planet{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;gap:0}
.tool-universe.is-compact .planet-orbit .planet-symbol{width:44px;height:44px;border-radius:.85rem}
.tool-universe.is-compact .planet-orbit .planet-symbol img{width:30px;height:30px}
.tool-universe.is-compact .planet-name{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);width:62px;max-width:62px;white-space:normal;text-align:center;font-size:.56rem;line-height:1.2}
.tool-universe.is-compact .planet-core{width:72px;min-width:72px;height:72px;min-height:72px;padding:0;gap:0}
.tool-universe.is-compact .planet-core .planet-symbol{width:64px;height:64px;border-radius:1.2rem}
.tool-universe.is-compact .planet-core img{width:44px;height:44px}
.tool-universe.is-compact .universe-caption{bottom:-2rem}
.tool-universe.is-compact + .tool-preview{margin-top:3.5rem}
@media(prefers-reduced-motion:reduce){.orbit{transform:translate(-50%,-50%)}.planet-orbit,.planet-carrier,.planet-orbit .planet,.ambient-glow,.ambient-particle{animation:none!important}.ambient-particle{opacity:.18}}

/* Open sections: the page itself is the canvas, without enclosing card surfaces. */
html[data-public-page] .apps-heading{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);max-width:none;
  align-items:end;padding-block:var(--space-xl);
}
html[data-public-page] .apps-heading h1{font-size:clamp(2.25rem,4vw,3.5rem);max-width:17ch}
html[data-public-page] .apps-heading p{max-width:38ch;justify-self:start;margin:0}
html[data-public-page] .apps-heading + .catalog-section{padding-top:0}
html[data-public-page] .app-grid{display:flex;flex-direction:column;gap:var(--space-xl)}
html[data-public-page] .app-card,html[data-public-page] .app-card.featured{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:center;column-gap:clamp(2rem,5vw,5rem);min-height:0;
  padding-block:clamp(1.5rem,3vw,2.5rem);
}
html[data-public-page] .app-card + .app-card::before{
  content:"";position:absolute;top:calc(var(--space-xl) / -2);left:0;
  width:var(--space-2xl);height:var(--rule-hair);background:var(--color-rule);
}
html[data-public-page] .app-card .card-art,html[data-public-page] .app-card.featured .card-art{
  grid-column:2;grid-row:1;order:0;height:auto;min-height:0;aspect-ratio:auto;
  border-radius:0;overflow:visible;
}
html[data-public-page] .app-card .card-copy{
  grid-column:1;grid-row:1;justify-content:center;align-self:center;
  padding:0;gap:var(--space-lg);max-width:29rem;
}
html[data-public-page] .app-card .card-copy h3{font-size:clamp(1.65rem,2.5vw,2.5rem)}
.app-title-link{
  display:inline-flex;align-items:center;gap:var(--space-sm);min-width:0;min-height:44px;
  color:var(--color-ink);border-radius:var(--radius-sm);
  transition:color var(--dur-short) var(--ease-out);
}
.app-title-link span{min-width:0;text-decoration:underline;text-decoration-color:var(--color-clear);text-underline-offset:.2em;text-decoration-thickness:1px}
.app-title-link:hover,.app-title-link:focus-visible{color:var(--color-accent)}
.app-title-link:hover span,.app-title-link:focus-visible span{text-decoration-color:currentColor}
.app-title-link:active{opacity:.8}
.app-title-link>img{flex:none}
.app-title-link>svg{width:.65em;height:.65em;flex:none;align-self:center;color:var(--color-accent);transition:transform var(--dur-medium) var(--ease-out)}
.app-title-link:is(:hover,:focus-visible)>svg{transform:translate(2px,-2px)}
.product-heading{display:grid;gap:var(--space-xs)}
html[data-public-page] .app-card .card-tag{color:var(--color-muted);font-size:var(--text-xs)}
html[data-public-page] .app-card .tag-row{gap:var(--space-xs) var(--space-md)}
html[data-public-page] .app-card .tag{
  display:inline-flex;align-items:baseline;gap:var(--space-xs);padding:0;
  background:var(--color-clear);border-radius:0;color:var(--color-muted);
}
html[data-public-page] .app-card .tag::before{
  content:"";width:4px;height:4px;align-self:center;flex:none;border-radius:50%;background:var(--color-accent);
}
html[data-public-page] .card-copy .text-link{margin-top:var(--space-xs);color:var(--color-accent)}
@media(max-width:55rem){
  html[data-public-page] .apps-heading{grid-template-columns:minmax(0,1fr);gap:var(--space-md);padding-block:var(--space-lg)}
  html[data-public-page] .apps-heading h1{font-size:clamp(2rem,5vw,2.75rem)}
  html[data-public-page] .apps-heading p{justify-self:start;max-width:45ch}
  html[data-public-page] .app-card,html[data-public-page] .app-card.featured{
    grid-template-columns:minmax(0,1fr);row-gap:var(--space-lg);padding-block:var(--space-lg);
  }
  html[data-public-page] .app-card .card-copy{grid-column:1;grid-row:1;max-width:38rem}
  html[data-public-page] .app-card .card-art,html[data-public-page] .app-card.featured .card-art{
    grid-column:1;grid-row:2;width:100%;max-width:40rem;justify-self:center;
  }
}
/* Reserve enough copy height for the three feature crossfades without page jumps. */
.studio-feature-copy{display:grid;gap:.65rem;min-width:0;min-height:150px;align-content:start;width:100%}
.studio-feature-copy h4{margin:0;font:500 1.05rem/1.5 var(--font-body);letter-spacing:-.025em;color:var(--color-ink)}
.studio-feature-copy p{margin:0;color:var(--color-muted);line-height:1.9}
.studio-features{display:grid;gap:var(--space-sm);width:100%;min-width:0}
.studio-feature-controls{display:flex;align-items:center;gap:var(--space-sm)}
.studio-feature-controls button{
  display:grid;place-items:center;width:44px;height:44px;padding:0;flex:none;
  border:var(--rule-hair) solid var(--color-rule);border-radius:50%;
  color:var(--color-ink);background:var(--color-clear);cursor:pointer;
  transition:background var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out);
}
.studio-feature-controls button svg{width:18px;height:18px}
.studio-feature-controls button:is(:hover,:focus-visible){background:var(--color-paper-3);border-color:var(--color-accent);color:var(--color-accent)}
.studio-feature-controls button:active{background:var(--color-paper-2)}
.studio-feature-controls>span{min-width:4ch;text-align:center;font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--color-muted)}
.studio-detail .studio-feature-copy{margin-top:1.25rem}
html[data-public-page] :is(.ecosystem-hero h1,.page-heading h1,.section-top h2,.card-copy h3,.ecosystem-closing h2){
  letter-spacing:-.035em;text-wrap:balance;
}
html[data-public-page] :is(.lede,.page-heading p,.card-copy p,.section-top p){text-wrap:pretty}
@media(max-width:45rem){
  .studio-feature-copy{min-height:160px}
}
@media(prefers-reduced-motion:reduce){
  .app-title-link,.app-title-link>svg,.studio-feature-controls button{transition:none}
  .app-title-link:is(:hover,:focus-visible)>svg{transform:none}
}