/* Reference proportions for the five-state integrations story.
   Geometry scales from a 1774 × 928 panel, without changing story behavior. */
.control-story .control-icon .provider-logo{
  box-sizing:border-box;background:transparent;border:0;border-radius:0;
  width:43%;height:43%;max-width:none;max-height:none;object-fit:contain;
  opacity:.34;filter:saturate(.7);box-shadow:none;
  transition:opacity .35s,filter .35s;
}
.control-story .control-icon.lit .provider-logo{opacity:1;filter:none}
.control-story .control-icon:has(.provider-logo){background:#ffffff02}
.control-story .control-icon>span:last-child:not(.app-badge){display:none}
/* The transparent Codex mark needs light ink on this dark surface. */
.control-story .control-icon .provider-logo[alt="Codex"]{filter:brightness(0) invert(1)}
.control-story .control-icon.lit .provider-logo[alt="Codex"]{filter:brightness(0) invert(1)}

@media(min-width:801px){
  .control-story.nilo-container{
    width:min(86.6vw,calc((100svh - 128px)*1.912));max-width:1774px;
    container-type:inline-size;margin-inline:auto;padding-top:80px;
  }
  .control-story .control-pin{
    top:max(96px,calc((100svh - 52.3cqw)/2));padding:0;
  }
  .control-story .nilo-control{
    width:100%;aspect-ratio:1.912;min-height:0;
    padding:3.608cqw 5.186cqw;gap:6%;
    grid-template-columns:44% 50%;align-items:start;
    border-radius:2.7cqw;background:#101319;
  }
  .control-story .control-copy{min-width:0;align-self:start}
  .control-story .control-copy>h2{
    font-size:3.157cqw;line-height:1.08;letter-spacing:-.11cqw;
    font-weight:650;margin:0 0 1.13cqw;overflow-wrap:normal;
  }
  .control-story .control-copy>p:not(.provider-source-note){
    font-size:1.353cqw;line-height:1.45;color:#a2a5ac;
    margin:0 0 1.35cqw;letter-spacing:-.025cqw;
  }
  .control-story .control-steps{border-top:1px solid #ffffff17}
  .control-story .control-step{
    padding:.9cqw 0;border-bottom:1px solid #ffffff17;
    color:#8f929b;
  }
  .control-story .control-step strong{
    font-size:1.353cqw;line-height:1.3;letter-spacing:-.035cqw;
    font-weight:610;
  }
  .control-story .control-step>span{
    display:block;height:0;max-height:0;padding-top:0;
    font-size:1.184cqw;line-height:1.48;letter-spacing:-.012cqw;
    color:#a2a6b0;opacity:0;overflow:hidden;
    transition:opacity .25s;
  }
  .control-story .control-step.active{color:#f5f6f8}
  .control-story .control-step.active>span{
    height:5.75cqw;max-height:5.75cqw;padding-top:.45cqw;opacity:1;
  }
  .control-story .provider-source-note{
    font-size:.65cqw!important;line-height:1.5!important;
    margin:1.02cqw 0 0!important;color:#778391!important;
  }
  .control-story .control-app-panel{
    align-self:start;width:100%;max-width:none;aspect-ratio:1;
    padding:6.25%;border-radius:1.95cqw;
    background:radial-gradient(ellipse at 50% 55%,#34466c75,transparent 64%),#14171e;
    border:1px solid #ffffff12;box-shadow:none;
  }
  .control-story .control-grid{
    width:100%;height:100%;aspect-ratio:1;gap:2.6%;
    grid-template-rows:repeat(5,minmax(0,1fr));
  }
  .control-story .control-icon{
    width:100%;height:100%;aspect-ratio:1;border-radius:23%;
    background:#ffffff02;border-color:#ffffff04;
  }
  .control-story .control-icon.lit{
    background:#ffffff0d!important;border-color:#ffffff24!important;
    box-shadow:inset 0 1px 0 #ffffff08;
  }
  .control-story .control-icon .app-badge{
    width:43%;height:43%;border-radius:23%;opacity:.24;
    box-shadow:none;filter:saturate(.7);
  }
  .control-story .control-icon.lit .app-badge{opacity:.95;filter:none;transform:none}
  .control-story .control-icon.central{
    background:linear-gradient(145deg,#74a6ed,#bddbfc)!important;
    border-color:#abcdf8!important;box-shadow:0 0 3cqw #6e9ff43d;
  }
  .control-story .central .nilo-mascot{width:76%;height:76%}
  .control-story .control-grid-caption{
    position:absolute;left:6.25%;right:6.25%;bottom:2%;
    padding:0;min-height:0;gap:.35cqw;font-size:.51cqw;
    flex-wrap:nowrap;color:#6f7b8d;line-height:1.3;
  }
  .control-story .control-grid-caption>span,
  .control-story .control-grid-caption>a{font-size:.51cqw}
  .control-story .control-grid-caption>a{margin-left:auto;color:#8e9ab0}
  .control-story .control-grid-caption .online-dot{width:.28cqw;height:.28cqw}
  .control-story .control-map{
    bottom:-8cqw;left:-3cqw;right:-2cqw;height:24cqw;
    background-size:37cqw 37cqw,24cqw 24cqw;
    background-position:left bottom -10cqw,right -5cqw bottom -6cqw;
    opacity:.11;
  }
}
@media(max-width:800px){
  .control-story .control-app-panel{aspect-ratio:1;position:relative;padding:14px}
  .control-story .control-grid{aspect-ratio:1}
  .control-story .control-grid-caption{position:absolute;bottom:4px;left:14px;right:14px;padding:0;min-height:0;line-height:1.2}
  .control-story .control-grid-caption,.control-story .control-grid-caption>a,.control-story .control-grid-caption>span{font-size:6px}
}
@media(max-width:520px){
  .control-story .control-app-panel{padding:15px}
  .control-story .control-copy>p.provider-source-note{font-size:8px!important;margin-top:10px!important}
}
@media(prefers-reduced-motion:reduce){
  .control-story .control-step>span,.control-story .control-icon .provider-logo{transition:none}
  .control-story .control-pin{position:static}
}

/* Explicit inset grid: prevents percentage row heights expanding the fifth row,
   including in Safari. One progress line remains visible at a time. */
.control-story .control-app-panel{padding:0;min-height:0;overflow:hidden;aspect-ratio:1}
.control-story .control-grid{position:absolute;inset:6.25%;width:auto;height:auto;max-width:none;margin:0;aspect-ratio:auto;grid-template-rows:repeat(5,minmax(0,1fr));gap:2.6%}
.control-story .control-icon{min-height:0;width:100%;height:100%;aspect-ratio:auto}
.control-story .control-step:not(.active)>i{width:0}
.control-story .control-map{inset:0;width:100%;height:100%;transform:none;filter:none;background:radial-gradient(ellipse at 82% 92%,#5227ff23,transparent 48%),radial-gradient(ellipse at 7% 100%,#b497cf1c,transparent 48%);z-index:0;opacity:1;pointer-events:none}
.control-story .control-map:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#10131980,transparent 60%);pointer-events:none}
.liquid-ether__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:.32}
[data-fluid-state="paused"] .liquid-ether__canvas,[data-fluid-state="fallback"] .liquid-ether__canvas{visibility:hidden}
.control-story .control-app-panel{background:radial-gradient(ellipse at 50% 55%,#34466c65,transparent 64%),#14171ee8}
.fluid-toggle{position:absolute;z-index:3;bottom:1.1cqw;left:5.186%;font-size:max(9px,.6cqw);color:#9ba5b6;padding:4px 0;border:0;background:none;cursor:pointer}
.fluid-toggle:hover{color:white}.fluid-toggle:disabled{opacity:.6;cursor:default}
@media(min-width:801px){
 .control-story .nilo-control{height:52.3013cqw;grid-template-rows:minmax(0,1fr)}
 .control-story .control-copy>h2{font-size:3cqw;margin-bottom:1.45cqw}
 .control-story .control-copy>p:not(.provider-source-note){font-size:1.25cqw;margin-bottom:2.1cqw}
 .control-story .control-step{padding:1.05cqw 0}
 .control-story .control-step.active>span{height:4.3cqw;max-height:4.3cqw}
 .control-story .control-app-panel{height:auto;align-self:start}
}
@media(max-width:800px){.fluid-toggle{bottom:8px;left:25px;font-size:9px}.control-story .nilo-control{padding-bottom:38px}}
@media(prefers-reduced-motion:reduce){.liquid-ether__canvas{display:none}}