/* AppsOverFlow's four-plane portal: one brand tile, three original illustrated destinations.
   The host sets --portal-progress: 0..1 on [data-flow-portal]. No timers or idle loops. */
.flow-portal{--portal-progress:1;--portal-play:clamp(0,calc(var(--portal-progress) * 3.7),1);--portal-explore:clamp(0,calc((var(--portal-progress) - .26) * 3.7),1);--portal-create:clamp(0,calc((var(--portal-progress) - .52) * 3.7),1);background:#0b0f10;color:#f8f6ec;padding-block:82px 42px;overflow:clip;isolation:isolate}.portal-sticky{display:flex;flex-direction:column;justify-content:center}.portal-layout{display:grid;grid-template-columns:.85fr 1.25fr;gap:35px;align-items:center}.portal-copy{position:relative;z-index:2;min-width:0}.portal-eyebrow{display:flex;align-items:center;gap:12px;color:#c8cbbf;font-size:7px;font-weight:650;letter-spacing:1.8px;line-height:1.7}.portal-eyebrow-mark{width:23px;height:23px;color:#fb642e;flex-shrink:0}.portal-copy h2{font-size:clamp(44px,5.15vw,76px);line-height:1.01;letter-spacing:-.055em;margin-top:23px}.portal-copy h2>span{color:#ff925a}.portal-introduction{color:#c1c8bd;font-size:14px;line-height:1.85;margin-top:24px}.portal-beats{list-style:none;margin:35px 0 0;padding:0;display:grid;gap:23px}.portal-beat{display:flex;align-items:flex-start;gap:16px;--beat-open:var(--portal-play);--beat-accent:#ffc191}.portal-beat:nth-child(2){--beat-open:var(--portal-explore);--beat-accent:#abcaff}.portal-beat:nth-child(3){--beat-open:var(--portal-create);--beat-accent:#d7bfff}.portal-beat-number{display:flex;align-items:center;justify-content:center;width:30px;height:31px;border:1px solid #a4b39845;border-radius:7px;color:var(--beat-accent);font-size:8px;letter-spacing:.6px;flex-shrink:0;margin-top:2px}.portal-beat h3{font-size:25px;letter-spacing:-1px;line-height:1.15}.portal-beat p{font-size:10px;line-height:1.8;color:#bfc8b9;margin-top:6px}.portal-driven .portal-beat{opacity:calc(.52 + var(--beat-open) * .48);translate:calc((1 - var(--beat-open)) * 18px) 0}.portal-driven .portal-beat-number{border-color:rgb(255 206 158 / calc(.17 + var(--beat-open) * .43));background:rgb(255 235 196 / calc(var(--beat-open) * .05))}.portal-visual{container-type:inline-size;min-width:0;max-width:700px;width:100%;margin:auto;position:relative}.portal-stage{position:relative;width:100%;aspect-ratio:1;perspective:1400px;perspective-origin:50% 45%;transform-style:preserve-3d;isolation:isolate}
/* Fixed square silhouettes avoid tall-looking cards under perspective.
   Matching precision-cut fronts and backs; viewport fallback for container units. */
.portal-tile,.portal-core{
  --portal-card-corner-tight:clamp(5px,1.1vw,8px);
  --portal-card-corner-wide:clamp(13px,2.8vw,21px);
  --portal-card-radius:var(--portal-card-corner-tight) var(--portal-card-corner-wide) var(--portal-card-corner-tight) var(--portal-card-corner-wide);
  --portal-card-edge:clamp(1.5px,.38vw,3px);
  --portal-card-shadow-y:clamp(9px,2.4vw,16px);
  --portal-card-shadow-blur:clamp(14px,3.9vw,26px);
}
@supports(width:1cqi){
  .portal-tile,.portal-core{
    --portal-card-corner-tight:clamp(5px,1.35cqi,9px);
    --portal-card-corner-wide:clamp(13px,3.4cqi,23px);
    --portal-card-edge:clamp(1.5px,.46cqi,3px);
    --portal-card-shadow-y:clamp(9px,2.4cqi,16px);
    --portal-card-shadow-blur:clamp(14px,3.9cqi,26px);
  }
}
.portal-tile{position:absolute;left:32%;top:30%;width:36%;height:auto;aspect-ratio:1;transform-style:preserve-3d;transform-origin:50% 50%;--tile-open:var(--portal-play);--tile-color:#e67b44;--tile-edge:#934223;--tile-text:#452719;--tile-subtle:#64381f;opacity:clamp(0,calc(var(--tile-open) * 5),1)}.portal-tile-depth{
  position:absolute;
  inset:0;
  border-radius:var(--portal-card-radius);
  background:linear-gradient(135deg,#ffffff24,transparent 45%,#00000020),var(--tile-edge);
  transform:translate3d(calc(var(--portal-card-edge) * .4),var(--portal-card-edge),calc(var(--portal-card-edge) * -1));
  box-shadow:0 2px 3px #00000030,0 var(--portal-card-shadow-y) var(--portal-card-shadow-blur) #00000038;
}
.portal-tile-face{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
  backface-visibility:hidden;
  border-radius:var(--portal-card-radius);
  background:linear-gradient(140deg,#ffffff16,transparent 48%,#00000008),var(--tile-color);
  border:1px solid #ffffff45;
  box-shadow:inset 1px 1px 0 #ffffff28,inset -1px -1px 0 #0000000c;
  transform:translateZ(1px);
  padding:18px 17px 17px;
  color:var(--tile-text);
}
.portal-tile-caption{display:flex;align-items:center;gap:9px;position:relative;z-index:1;color:var(--tile-subtle);font-size:5px;letter-spacing:.9px;font-weight:700;white-space:nowrap}.portal-tile-caption>span:first-child{font-size:8px;letter-spacing:.1px}.portal-tile-icon{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;margin:0}.portal-tile-icon svg{display:block;width:100%;height:100%;min-width:0;min-height:0;max-height:100%;overflow:hidden;filter:drop-shadow(0 6px 5px #16130f19)}.portal-tile-bottom{position:relative;z-index:1;border-top:1px solid #ffffff38;padding-top:9px;display:flex;flex-direction:column;gap:5px}.portal-tile-bottom strong{font-size:11px;font-weight:800;letter-spacing:2.4px}.portal-tile-bottom>span{font-size:6px;letter-spacing:.05px;color:var(--tile-subtle);font-weight:600}.portal-edge-light{
  position:absolute;
  top:1px;
  left:calc(var(--portal-card-corner-tight) + 2px);
  right:var(--portal-card-corner-wide);
  height:1px;
  background:linear-gradient(90deg,transparent,#fff9 28%,#ffffff38 72%,transparent);
  opacity:.65;
}
.portal-tile-play{transform:translate3d(calc(var(--tile-open) * -66%),calc(var(--tile-open) * -9%),calc(var(--tile-open) * 70px)) rotateX(calc(12deg - var(--tile-open) * 8deg)) rotateY(calc(-10deg - var(--tile-open) * 4deg)) rotateZ(calc(-8deg - var(--tile-open) * 8deg));z-index:2}.portal-tile-explore{--tile-open:var(--portal-explore);--tile-color:#5385dc;--tile-edge:#294f9d;--tile-text:#132f65;--tile-subtle:#193962;transform:translate3d(calc(var(--tile-open) * 13%),calc(var(--tile-open) * -61%),calc(var(--tile-open) * 18px)) rotateX(calc(12deg + var(--tile-open) * 5deg)) rotateY(calc(-10deg + var(--tile-open) * 18deg)) rotateZ(calc(-8deg + var(--tile-open) * 16deg));z-index:1}.portal-tile-create{--tile-open:var(--portal-create);--tile-color:#b5a0e1;--tile-edge:#75629d;--tile-text:#322244;--tile-subtle:#49355f;transform:translate3d(calc(var(--tile-open) * 68%),calc(var(--tile-open) * 14%),calc(var(--tile-open) * 78px)) rotateX(calc(12deg - var(--tile-open) * 17deg)) rotateY(calc(-10deg + var(--tile-open) * 24deg)) rotateZ(calc(-8deg + var(--tile-open) * 25deg));z-index:3}.portal-core{position:absolute;left:31%;top:29.5%;width:38%;height:auto;aspect-ratio:1;transform-style:preserve-3d;transform-origin:center;z-index:4;transform:translate3d(0,calc(var(--portal-progress) * 70%),calc(110px - var(--portal-progress) * 90px)) rotateX(calc(17deg - var(--portal-progress) * 12deg)) rotateY(calc(-18deg + var(--portal-progress) * 26deg)) rotateZ(calc(-8deg + var(--portal-progress) * 15deg)) scale(calc(1.15 - var(--portal-progress) * .43))}.portal-core-depth{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#cdd0c1,#989e90);
  border-radius:var(--portal-card-radius);
  transform:translate3d(calc(var(--portal-card-edge) * -.4),var(--portal-card-edge),calc(var(--portal-card-edge) * -1));
  box-shadow:0 2px 3px #00000030,0 var(--portal-card-shadow-y) var(--portal-card-shadow-blur) #00000038;
}
.portal-core-face{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  align-items:center;
  justify-items:center;
  gap:10px;
  border-radius:var(--portal-card-radius);
  border:1px solid #fffff37a;
  background:linear-gradient(145deg,#f6f5ea,#e9eadf 70%,#e2e5d7);
  box-shadow:inset 1px 1px 0 #ffffff70,inset -1px -1px 0 #66725410;
  transform:translateZ(1px);
  padding:18px;
  backface-visibility:hidden;
  color:#1c251f;
}
.portal-core-label{font-size:5px;letter-spacing:1.9px;color:#65705a;font-weight:700}.portal-core-mark{width:52%;height:100%;min-height:0;max-height:100%;color:#fa5425;filter:drop-shadow(-3px 5px 0 #ad361a38)}.portal-core .flow-ribbon{transform-box:fill-box;transform-origin:center}.portal-core .flow-ribbon-upper{translate:calc(var(--portal-progress) * 2px) calc(var(--portal-progress) * -2px)}.portal-core .flow-ribbon-lower{translate:calc(var(--portal-progress) * -2px) calc(var(--portal-progress) * 2px)}.portal-core-face>strong{font-size:clamp(13px,1.45vw,22px);letter-spacing:-.9px;font-weight:800;line-height:1}.portal-core-foot{font-size:4px;letter-spacing:1.5px;color:#5e6756;font-weight:600}.portal-plinth{position:absolute;left:13%;right:10%;top:82%;height:7%;transform:rotateX(66deg) rotateZ(-11deg) translateZ(-55px);background:linear-gradient(130deg,#293231,#12191b);border:1px solid #6b777033;box-shadow:0 20px 25px #0007;border-radius:6px;opacity:calc(.2 + var(--portal-progress) * .8);display:flex;align-items:center;justify-content:center}.portal-plinth>span{font-size:6px;letter-spacing:2.4px;color:#7c8a7d;font-weight:650}.portal-visual-caption{display:flex;align-items:center;justify-content:center;gap:13px;color:#b7c1b2;font-size:6px;letter-spacing:1.9px;font-weight:500;margin-top:-1px}.portal-caption-rule{width:27px;height:2px;background:#e36a36;transform:skewX(-28deg)}.portal-footer{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:39px;padding-top:24px;border-top:1px solid #bdc6ad26}.portal-meter{width:min(280px,48%)}.portal-meter-label{font-size:6px;letter-spacing:1.8px;color:#bac5b3}.portal-meter>div{display:flex;gap:5px;margin-top:12px}.portal-meter i{position:relative;display:block;flex:1;height:3px;background:#96a68938;border-radius:2px;overflow:hidden}.portal-meter i:after{content:'';display:block;inset:0;position:absolute;background:#ffa367;transform:scaleX(var(--portal-play));transform-origin:left}.portal-meter i:nth-child(2):after{background:#9abcf7;transform:scaleX(var(--portal-explore))}.portal-meter i:nth-child(3):after{background:#d0b8f5;transform:scaleX(var(--portal-create))}.portal-next{display:inline-flex;align-items:center;gap:23px;min-height:44px;font-size:11px;color:#f5f6ec;font-weight:650}.portal-next svg{width:16px;height:16px;transition:transform .3s}.portal-next:hover svg{transform:translateY(3px)}.portal-next:focus-visible{outline:3px solid #ffb877;outline-offset:7px;border-radius:4px}
/* Optional desktop pinning. The host adds portal-pinned only after measuring the scene. */
@media(min-width:900px) and (min-height:700px){.flow-portal.portal-pinned{height:310svh;padding:0}.portal-pinned .portal-sticky{position:sticky;top:88px;min-height:calc(100svh - 88px);padding-block:25px 23px}.portal-pinned .portal-stage{max-height:calc(100svh - 177px);width:auto;max-width:100%;margin:auto}.portal-pinned .portal-layout{width:min(1340px,calc(100% - 96px))}.portal-pinned .portal-footer{margin-top:12px;padding-top:15px}.portal-pinned .portal-copy h2{font-size:clamp(48px,5vw,76px)}.portal-pinned .portal-beats{gap:20px;margin-top:29px}}
@media(min-width:900px) and (max-height:800px){.portal-pinned .portal-copy h2{font-size:53px;margin-top:17px}.portal-pinned .portal-introduction{font-size:12px;margin-top:18px}.portal-pinned .portal-beats{margin-top:24px;gap:15px}.portal-pinned .portal-beat h3{font-size:21px}.portal-pinned .portal-beat p{font-size:9px}.portal-pinned .portal-beat-number{width:26px;height:27px;font-size:7px}.portal-pinned .portal-eyebrow{font-size:6px;letter-spacing:1.4px}}
@media(max-width:1100px){.portal-layout{gap:20px;grid-template-columns:.85fr 1.15fr}.portal-copy h2{font-size:56px}.portal-introduction{font-size:12px}.portal-beats{gap:19px;margin-top:28px}.portal-beat h3{font-size:22px}.portal-beat p{font-size:9px}.portal-eyebrow{font-size:6px;letter-spacing:1.4px;gap:10px}.portal-tile-face{
  padding:14px 12px 13px;
}
.portal-tile-caption{font-size:4px;gap:6px;letter-spacing:.5px}.portal-tile-caption>span:first-child{font-size:6px}.portal-tile-bottom{padding-top:7px;gap:4px}.portal-tile-bottom strong{font-size:9px;letter-spacing:1.6px}.portal-tile-bottom>span{font-size:5px}.portal-core-face{
  padding:13px;
  gap:9px;
}
.portal-core-label{font-size:4px;letter-spacing:1.4px}.portal-core-foot{font-size:3px;letter-spacing:1px}.portal-visual-caption{font-size:5px;letter-spacing:1.4px}.portal-plinth>span{font-size:4px;letter-spacing:1.8px}}
@media(max-width:899px){.flow-portal{padding-block:60px 32px}.portal-layout{grid-template-columns:1fr;gap:0;max-width:640px}.portal-copy{display:contents}.portal-eyebrow{order:0;justify-content:center;font-size:7px}.portal-copy h2{order:1;text-align:center;font-size:clamp(46px,8vw,66px);margin-top:20px}.portal-introduction{order:2;text-align:center;font-size:13px;margin-top:18px;line-height:1.8}.portal-introduction br{display:none}.portal-visual{order:3;max-width:470px;width:100%;margin:10px auto 0}.portal-beats{order:4;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:31px}.portal-beat{display:block;min-width:0}.portal-beat-number{margin:0 0 12px;width:28px;height:29px}.portal-beat h3{font-size:22px;letter-spacing:-.8px;line-height:1.14}.portal-beat p{font-size:10px;line-height:1.75;margin-top:9px}.portal-driven .portal-beat{translate:0 calc((1 - var(--beat-open)) * 12px)}.portal-stage{perspective:1000px}.portal-core-face>strong{font-size:15px;letter-spacing:-.65px}.portal-footer{max-width:640px;margin-top:32px}.portal-tile-face{
  padding:12px;
}
.portal-core-label{font-size:4px}.portal-core-foot{font-size:3px}.portal-tile-caption{font-size:4px;letter-spacing:.4px}.portal-tile-caption>span:first-child{font-size:6px}.portal-tile-bottom strong{font-size:9px}.portal-tile-bottom>span{font-size:5px}.portal-visual-caption{font-size:6px;letter-spacing:1.3px}.portal-plinth>span{font-size:4px}}
@media(max-width:620px){.flow-portal{padding-block:46px 27px}.portal-layout{width:calc(100% - 32px)}.portal-eyebrow{font-size:6px;gap:9px;letter-spacing:1.1px}.portal-eyebrow-mark{width:20px;height:20px}.portal-copy h2{font-size:clamp(43px,10.5vw,61px);margin-top:17px}.portal-introduction{font-size:11px;max-width:285px;margin:18px auto 0;line-height:1.8}.portal-visual{max-width:400px;margin-top:6px}.portal-stage{width:100%;max-width:400px;max-height:400px;perspective:900px}.portal-tile-face{
  padding:10px 9px 10px;
}
.portal-core-face{
  padding:10px;
  gap:8px;
}
.portal-core-face>strong{font-size:13px;letter-spacing:-.75px}.portal-core-label{font-size:3px;letter-spacing:1px}.portal-core-foot{font-size:2.5px;letter-spacing:.8px}.portal-tile-caption{font-size:3px;letter-spacing:.3px;gap:5px}.portal-tile-caption>span:first-child{font-size:5px}.portal-tile-bottom{padding-top:6px;gap:3px}.portal-tile-bottom strong{font-size:7px;letter-spacing:1.5px}.portal-tile-bottom>span{font-size:4px}.portal-visual-caption{font-size:5px;letter-spacing:1.1px;gap:9px;margin-top:3px}.portal-caption-rule{width:19px}.portal-beats{margin-top:29px;gap:12px;padding-inline:7px}.portal-beat h3{font-size:20px;letter-spacing:-.8px}.portal-beat p{font-size:9px}.portal-beat-number{width:26px;height:27px;font-size:7px;margin-bottom:10px}.portal-footer{width:calc(100% - 46px);margin-top:28px;padding-top:19px;gap:18px}.portal-meter{width:42%}.portal-meter-label{font-size:5px;letter-spacing:1px;line-height:1.6;display:block}.portal-meter>div{margin-top:9px}.portal-next{font-size:10px;gap:12px}.portal-next svg{width:13px;height:13px}.portal-plinth>span{font-size:3px;letter-spacing:1.2px}}
@media(max-width:360px){.portal-copy h2{font-size:42px}.portal-beats{gap:10px;padding-inline:4px}.portal-beat h3{font-size:18px}.portal-beat p{font-size:8px}.portal-tile-bottom>span{font-size:3.5px}.portal-tile-caption{letter-spacing:.05px}.portal-core-face>strong{font-size:11px;letter-spacing:-.6px}.portal-core-label{font-size:2.5px}.portal-core-foot{font-size:2px}.portal-footer{gap:12px}.portal-next{font-size:9px;gap:9px}}
.motion-paused .flow-portal{--portal-progress:1!important;height:auto!important;padding-block:50px 30px}.motion-paused .portal-sticky{position:static!important;min-height:0!important}.motion-paused .portal-driven .portal-beat{opacity:1;translate:none}.motion-paused .flow-portal *{transition:none!important}
@media(prefers-reduced-motion:reduce){.flow-portal{--portal-progress:1!important;height:auto!important;padding-block:50px 30px}.portal-sticky{position:static!important;min-height:0!important}.portal-driven .portal-beat{opacity:1;translate:none}.flow-portal *{transition:none!important}}
@media print{.flow-portal{height:auto!important;padding-block:30px;background:white;color:black}.portal-sticky{position:static!important;min-height:0!important}.portal-layout{display:block}.portal-visual,.portal-footer{display:none}.portal-copy{display:block}.portal-copy h2,.portal-copy h2>span,.portal-introduction,.portal-eyebrow,.portal-beat p{color:black}.portal-beats{display:flex;gap:24px}.portal-beat{opacity:1!important;translate:none!important;display:block}.portal-beat-number{color:black;border-color:#aaa}.portal-copy h2{font-size:35px;text-align:left}.portal-eyebrow,.portal-introduction{justify-content:flex-start;text-align:left}.portal-copy h2 br{display:none}}

/* Embedded art shares the host editorial layout, pinning, and chapter controls. */
.flow-portal.portal-object-only{padding:0;background:transparent;overflow:visible}
.portal-object-only .portal-visual{max-width:none;margin:0}
@media(max-width:899px){.portal-object-only .portal-visual{max-width:400px;margin-inline:auto}.portal-object-only .portal-stage{max-width:400px;max-height:400px}}