/* Hero text enters gently; product screenshots remain static until input. */
.hero .hero-description{display:block;max-width:1000px;margin:24px auto 36px;text-align:center}
.hero .hero-description p{max-width:none;font-size:18px;line-height:1.65;color:#b4c3d9;text-wrap:balance}
#flow-theater .theater-top{gap:20px;flex-wrap:wrap;padding-block:11px}
#flow-theater .theater-top .expand{margin-left:auto}
@media(prefers-reduced-motion:no-preference){
 .hero h1>span,.hero .hero-description p{animation:hero-text-appear 1.8s ease-out both}
 .hero h1>span:first-child{animation-delay:.1s}
 .hero h1>span:nth-child(2){animation-delay:.3s}
 .hero .hero-description p{animation-delay:.55s}
}
@keyframes hero-text-appear{from{opacity:0}to{opacity:1}}
@media(max-width:900px){.hero .hero-description{max-width:760px;margin:22px auto 28px}.hero .hero-description p{font-size:16px;line-height:1.65}}
@media(max-width:640px){
 .hero .hero-description{margin:20px auto 26px;text-align:left}
 .hero .hero-description p{font-size:15px;line-height:1.65}
 #flow-theater .theater-top{gap:12px;padding:12px}
 #flow-theater .theater-product{font-size:12px}
 #flow-theater .theater-top .expand{font-size:11px;white-space:normal;text-align:right}
}

/* Remote configuration owns download availability in the release. */
.link-actions a[hidden],.store-actions a[hidden],.app-download-menu a[hidden]{display:none!important}

/* Crawlable language navigation also works without JavaScript. */
.locale-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;padding-block:0 28px;font-size:13px;color:#9bb1d1}
.locale-links a:hover,.locale-links a[aria-current=page]{color:#fff;text-decoration:underline;text-underline-offset:4px}
.static-walkthrough{display:grid;gap:24px;padding-block:32px}
.static-walkthrough article{max-width:760px}.static-walkthrough p{line-height:1.7;margin:12px 0}

/* Keep translated text in readable phrases at every breakpoint. */
:where(h1,h2,h3,h4){text-wrap:balance}
:where(p,dt,.tab-label,.text-action,.expand,.scene-next){text-wrap:pretty;overflow-wrap:normal;word-break:normal}
:lang(ko) :where(h1,h2,h3,h4,p,dt,.tab-label,.text-action,.expand,.scene-next){word-break:keep-all}
.journey-tabs button .tab-label{overflow-wrap:normal;word-break:normal}
:lang(ko) .journey-tabs button .tab-label{word-break:keep-all}

:lang(zh) :where(p,dt),:lang(ja) :where(p,dt){text-wrap:balance;line-break:strict}
.catalog-supported{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 28px;color:#b4c3d9;font-size:15px;line-height:1.6;border-top:1px solid #24344b;padding-top:22px}
.catalog-supported span{white-space:nowrap}
.overview-intro .sync-note{font-size:16px;line-height:1.6;color:#b4c3d9;margin:14px auto 0;max-width:700px}
@media(max-width:640px){.catalog-supported{font-size:13px;gap:8px 20px}.overview-intro .sync-note{font-size:13px}}
@media(max-width:740px){
 .header-actions>.button{min-width:0;max-width:100%}
 .header-actions>.button>span[data-en]{min-width:0;text-wrap:balance}
 .header-actions>.button>span[aria-hidden]{flex-shrink:0}
}
@media(max-width:360px){
 .header{grid-template-columns:minmax(0,1fr) 108px;height:auto;min-height:120px}
 .header .brand{gap:7px}.header .brand>span{font-size:14px}.header .brand img{width:28px;height:28px}
 .app-download summary{width:100%;min-width:0;padding:6px;gap:5px}
 .app-download summary>span{min-width:0}.app-download summary strong{text-wrap:balance}
 html{scroll-padding-top:150px}
}
/* The image viewer reserves space for translated titles and controls. */
#inspector[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
#inspector .inspector-top{height:auto;min-height:80px;align-items:center}
#inspector .inspector-top>div:first-child{min-width:0}
#inspector .inspector-top h2{font-size:23px;line-height:1.3;overflow-wrap:normal}
#inspector .inspector-actions{flex-shrink:0}
#inspector .inspector-actions button{flex-shrink:0}
#inspector #zoom-toggle{white-space:normal;text-wrap:balance}
#inspector .inspector-body{height:auto;min-height:0}
#inspector .inspector-caption{height:auto;max-height:22dvh;line-height:1.6}
@media(max-width:640px){
 #inspector .inspector-top{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px}
 #inspector .inspector-top h2{font-size:20px;line-height:1.35}
 #inspector .inspector-top>div>span{font-size:9px}
 #inspector .inspector-actions{width:100%;justify-content:space-between;gap:12px}
 #inspector #zoom-toggle{font-size:13px;min-width:0;flex:1;padding:10px 12px}
 #inspector #close-inspector{width:40px;height:40px;min-width:40px}
 #inspector .inspector-caption{font-size:12px;padding:12px 14px}
}

/* Use the existing transparent app trademark and the selected device-tab blue. */
.button.web-app-cta{gap:10px;background:#19478a;padding:4px 16px 4px 5px;min-height:50px}
.button.web-app-cta:hover{background:#20579e}
.button.web-app-cta .app-cta-icon{width:42px;height:42px;flex:0 0 42px;object-fit:contain;border-radius:0}
@media(max-width:740px){
 .header .web-app-cta{gap:7px;padding:4px 8px 4px 4px;min-height:44px}
 .header .web-app-cta .app-cta-icon{width:36px;height:36px;flex-basis:36px}
}
@media(max-width:360px){
 .header{grid-template-columns:minmax(0,1fr) 120px}
 .header .web-app-cta{gap:5px;padding-right:5px}
}

/* Branded entry preserves legacy Link deep links at the footer downloads. */
.flow-bridge>.link-download-entry{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid #365b91;border-radius:8px;background:#0e1b32;min-height:78px;max-width:100%;color:#f8fafc;transition:background .2s,border-color .2s}
.link-download-entry:hover{background:#142a4a;border-color:#60a5fa}
.link-download-entry>img{width:36px;height:36px;flex:0 0 36px;object-fit:contain}
.link-entry-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.link-entry-copy .link-wordmark{font-size:22px;line-height:1.15;white-space:nowrap}
.link-entry-action{font-size:13px;font-weight:600;color:#b8d3f8;line-height:1.4;text-wrap:pretty}
.link-entry-arrow{font-size:24px;color:#8fc5ff;flex-shrink:0;margin-left:4px}
#filament-genius-link,#link-downloads{scroll-margin-top:120px}
#filament-genius-link:target .link-wordmark{ text-decoration:underline;text-decoration-color:#3b82f6;text-underline-offset:8px }
@media(max-width:640px){
 .flow-bridge>.link-download-entry{grid-row:2;width:100%;padding:12px;gap:10px}
 .flow-bridge #slicer-strip{grid-row:3}
 .link-entry-copy .link-wordmark{font-size:20px}
 .link-download-entry>img{width:30px;height:30px;flex-basis:30px}
 .link-entry-arrow{font-size:20px;margin-left:0}
 #filament-genius-link,#link-downloads{scroll-margin-top:145px}
}

/* Desktop download entry and slicer compatibility share a single row. */
.flow-bridge{grid-template-columns:350px minmax(0,1fr);align-items:center;gap:30px;padding:26px 0;border-bottom:1px solid #263149}
.flow-bridge>.link-download-entry{grid-column:1;grid-row:1;justify-self:stretch}
.slicer-compatibility{min-width:0;display:flex;flex-direction:column;gap:18px}
.slicer-compatibility #slicer-title{display:block;color:#a6b8d1;font-size:13px;line-height:1.5;margin:0}
.flow-bridge #slicer-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;border:0;padding:0}
.flow-bridge #slicer-strip>span{font-size:11px;gap:10px;line-height:1.4;align-items:center;flex-direction:column;text-align:center}
.flow-bridge #slicer-strip img{width:30px;height:30px}
@media(max-width:1100px){.flow-bridge{grid-template-columns:310px minmax(0,1fr);gap:22px}.flow-bridge #slicer-strip{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:16px}.link-entry-copy .link-wordmark{font-size:20px}}
@media(max-width:740px){.flow-bridge{grid-template-columns:minmax(0,1fr);gap:22px}.flow-bridge>.link-download-entry{grid-row:1}.slicer-compatibility{gap:16px}.flow-bridge #slicer-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 10px}.flow-bridge #slicer-strip>span{font-size:10px}.flow-bridge #slicer-strip img{width:28px;height:28px}}
@media(max-width:1100px){.link-entry-copy .link-wordmark{font-size:18px}.link-download-entry .link-entry-arrow{display:none}}

/* Match AnimatedBrandLogo: a five-second turn with two subtle breathing cycles. */
.header .brand > img,
.download-title > img {
  transform-origin: center;
  animation: brand-logo-turn 5s linear infinite, brand-logo-breathe 2.5s linear infinite;
}
@keyframes brand-logo-turn {
  to { rotate: 360deg; }
}
@keyframes brand-logo-breathe {
  0% { scale: 1.000000; }
  3.125% { scale: 1.009755; }
  6.25% { scale: 1.019134; }
  9.375% { scale: 1.027779; }
  12.5% { scale: 1.035355; }
  15.625% { scale: 1.041573; }
  18.75% { scale: 1.046194; }
  21.875% { scale: 1.049039; }
  25% { scale: 1.050000; }
  28.125% { scale: 1.049039; }
  31.25% { scale: 1.046194; }
  34.375% { scale: 1.041573; }
  37.5% { scale: 1.035355; }
  40.625% { scale: 1.027779; }
  43.75% { scale: 1.019134; }
  46.875% { scale: 1.009755; }
  50% { scale: 1.000000; }
  53.125% { scale: 0.990245; }
  56.25% { scale: 0.980866; }
  59.375% { scale: 0.972221; }
  62.5% { scale: 0.964645; }
  65.625% { scale: 0.958427; }
  68.75% { scale: 0.953806; }
  71.875% { scale: 0.950961; }
  75% { scale: 0.950000; }
  78.125% { scale: 0.950961; }
  81.25% { scale: 0.953806; }
  84.375% { scale: 0.958427; }
  87.5% { scale: 0.964645; }
  90.625% { scale: 0.972221; }
  93.75% { scale: 0.980866; }
  96.875% { scale: 0.990245; }
  100% { scale: 1.000000; }
}
@media (prefers-reduced-motion: reduce) {
  .header .brand > img,
  .download-title > img { animation: none; }
}

/* Download-section brand mark: 20% larger at both responsive sizes. */
.download-title > img { width: 78px; height: 78px; }
@media (max-width: 640px) {
  .download-title > img { width: 60px; height: 60px; }
}

/* Inline functional exploration, without a full-screen image viewer. */
.feature-actions{display:flex;flex-wrap:wrap;gap:12px;padding:16px 20px;border-top:1px solid #293b56;grid-column:1/-1;background:#0b1425}
.feature-actions button{color:#c4dcff;background:#142c4b;border:1px solid #365b91;border-radius:6px;padding:10px 14px;font:600 13px Outfit,sans-serif;cursor:pointer;text-align:left}
.feature-actions button:hover,.field-list button:hover{background:#19478a;color:white}
.feature-actions button:focus-visible,.field-list button:focus-visible{outline:2px solid #60a5fa;outline-offset:3px}
.feature-detail{position:relative;grid-column:1/-1;padding:16px 54px 16px 20px;background:#102341;border-top:1px solid #365b91;color:#ccddf4;line-height:1.6;font-size:14px}
.feature-detail strong{display:block;color:white}.feature-detail button{position:absolute;right:14px;top:12px;background:none;border:0;color:white;font-size:24px;cursor:pointer}
.feature-detail[hidden],.detail-marker[hidden]{display:none}
.detail-marker{position:absolute;width:74px;height:46px;border:2px solid #72b7ff;border-radius:8px;background:#3b82f620;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 4px #3b82f615}
@media(max-width:640px){.feature-actions{padding:12px;gap:8px}.feature-actions button{font-size:12px;min-height:44px}.feature-detail{font-size:13px}.detail-marker{width:44px;height:34px}}

.feature-hotspot{position:absolute;z-index:2;transform:translate(-50%,-50%);max-width:220px;padding:9px 12px;border:1px solid #60a5fa;border-radius:6px;background:#0e213eee;color:#e3efff;font:600 12px Outfit,sans-serif;cursor:pointer;text-align:left}.feature-hotspot:focus-visible{outline:2px solid white;outline-offset:3px}@media(max-width:740px){.feature-hotspot{display:none}}

.feature-actions[hidden]{display:none}