/* Adopted preview controls. Scoped so the rest of the homepage is unchanged. */
body.landing .controls { --control-edge:#333; --control-copy:#a1a1a1; }
body.landing .controls .container-main { row-gap:0; }
.controls .section-head { grid-column:1/-1; display:flex; align-items:center; min-height:44px; margin-bottom:40px; }
.controls .section-head h2 { margin:0; display:flex; align-items:center; gap:12px; font:400 13px/1.5 'IBM Plex Mono',monospace; letter-spacing:.035em; color:#aaa; }
.controls .section-head h2::before { content:''; width:10px; height:1px; background:#aaa; flex:none; }
.controls .control-layout { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr); gap:64px; align-items:start; }
.controls .control-tabs { border-top:1px solid var(--control-edge); }
.controls .control-tab { border:0; border-bottom:1px solid var(--control-edge); background:transparent; width:100%; padding:23px 0; text-align:left; display:grid; grid-template-columns:1fr 16px; column-gap:14px; align-items:center; cursor:pointer; }
.controls .control-name { font:500 21px/1.25 'Inter Tight',Arial,sans-serif; letter-spacing:-.015em; color:#8e8e8e; transition:color .25s; }
.controls .control-tab:hover .control-name,.controls .control-tab.is-active .control-name { color:#ddd; }
.controls .control-tab svg { display:block; width:16px; fill:none; stroke:#777; stroke-width:1; transition:transform .3s,stroke .3s; }
.controls .control-tab.is-active svg { transform:rotate(90deg); stroke:#ccc; }
.controls .control-desc { grid-column:1/-1; font:400 15px/1.55 'IBM Plex Sans',Arial,sans-serif; color:var(--control-copy); max-width:38ch; display:none; padding-top:18px; padding-bottom:4px; }
.controls .control-tab.is-active .control-desc { display:block; }
.controls .control-stage { position:relative; isolation:isolate; min-width:0; min-height:475px; display:flex; flex-direction:column; justify-content:center; padding:44px 24px; }
.controls .control-background { position:absolute; z-index:-1; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; mask-image:none; -webkit-mask-image:none; }
.controls .control-windows { width:100%; margin-left:0; min-width:0; box-shadow:0 18px 48px #0003; border-radius:7px; }
.controls .control-panel { width:100%; border-radius:7px; overflow:hidden; background:#1c1917; clip-path:inset(0 round 7px); }
.controls .control-panel[hidden] { display:none; }
.controls .control-panel img { display:block; width:100%; height:auto; }
.controls .control-panel.is-active { animation:controls-panel-in .45s cubic-bezier(.22,1,.36,1) both; }
.controls .screen-hint { display:none; }
.controls button:focus-visible,.controls [tabindex]:focus-visible { outline:1px solid #ddd; outline-offset:5px; }
@keyframes controls-panel-in { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
@media(max-width:1100px) {
 .controls .control-layout { gap:36px; grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr); }
 .controls .control-name { font-size:19px; }
}
@media(max-width:850px) {
 .controls .control-layout { grid-template-columns:1fr; }
 .controls .control-stage { min-height:460px; max-width:680px; width:100%; justify-self:center; }
 .controls .control-desc { max-width:60ch; }
}
@media(max-width:600px) {
 .controls .section-head { margin-bottom:26px; }
 .controls .section-head h2 { font-size:11px; letter-spacing:.01em; gap:8px; }
 .controls .control-layout { gap:24px; }
 .controls .control-tab { padding:18px 0; }
 .controls .control-name { font-size:20px; }
 .controls .control-desc { padding-top:14px; }
 .controls .control-stage { padding:24px 12px 16px; min-height:0; }
 .controls .control-windows { box-shadow:none; }
 .controls .control-panel { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#777 #252525; }
 .controls .control-panel img { width:560px; min-width:560px; max-width:none; }
 .controls .screen-hint { display:block; font:400 11px/1.5 'IBM Plex Sans',sans-serif; color:#999; margin-top:14px; }
}
@media(prefers-reduced-motion:reduce) {
 .controls .control-panel.is-active { animation:none; }
 .controls .control-tab svg,.controls .control-name { transition:none; }
}

/* Original Luna Decimal prototype, scaled without altering its design. */
body.home.landing .controls .control-name { font-size:20px; }
.decimal-prototype { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:#1c1917; }
.controls .decimal-prototype img { display:block; width:100%; height:auto; min-width:0; max-width:100%; }
@media(max-width:600px) { .decimal-prototype { width:760px; min-width:760px; } }

.controls .showcase-intro{grid-column:1/-1;margin:0 0 40px;max-width:740px}.controls .showcase-intro h3{font:400 30px/1.2 "Inter Tight",Arial,sans-serif;letter-spacing:-.025em;color:#ddd;margin:0 0 20px}.controls .showcase-intro p,.controls .showcase-deployment{font:400 16px/1.6 "IBM Plex Sans",Arial,sans-serif;color:#a1a1a1}.controls .showcase-intro p{margin:0}.controls .showcase-deployment{grid-column:1/-1;margin:32px 0 0;max-width:800px;font-size:14px}.controls .showcase-deployment strong{font-weight:400;color:#ddd}

.controls .showcase-intro p{font:400 24px/1.35 "Inter Tight",Arial,sans-serif;letter-spacing:-.015em;color:#ddd}
@media(max-width:600px){.controls .showcase-intro p{font-size:21px}}

/* Static screenshots fit the mobile viewport without an inner scroll area. */
@media(max-width:850px){
 .controls .control-panel{overflow:hidden}
 .controls .decimal-prototype{width:100%;min-width:0;aspect-ratio:16/9}
 .controls .decimal-prototype img{width:100%;min-width:0;max-width:100%;height:auto}
 .controls .screen-hint{display:none}
 .controls .control-stage{padding:20px 12px;min-height:0;max-width:100%}
}