/* Keep all screen layers on the tracked plane; no bright outer glow. */
.system-page .pos-surface{background:#092536;box-shadow:inset 0 0 0 3px #0f172a80}
.system-page .pos-surface iframe,.system-page .pos-surface[data-display=standby] iframe{filter:brightness(.83) saturate(.92) contrast(1.04)}
.system-page .pos-surface::before{background:linear-gradient(117deg,#ffffff12,transparent 32%,#061c3020 100%);box-shadow:inset 0 0 28px #0a192b60,inset 0 0 0 3px #ffffff28}
.system-page .pos-surface::after{background:linear-gradient(180deg,#09253606,#09253616);box-shadow:inset 0 0 0 2px #061c3040}
/* Only the close-up receives fine LCD texture. Camera travel has no moiré. */
.system-stage[data-mode=pos] .pos-surface::after{background:repeating-linear-gradient(0deg,#031c3022 0 2px,transparent 2px 24px);opacity:.12}
.system-stage[data-mode=online] #story-title{color:var(--text-dark);text-wrap:balance}
.screen-features{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:8px}
.screen-features>span{display:flex;align-items:center;gap:7px}
.screen-features>span:before{content:'';width:4px;height:4px;background:var(--primary-dark);border-radius:50%;flex:none}
/* A separate fixed layer lets the notice accompany both real page sections. */
.ready-notice-layer{position:fixed;inset:var(--header-height) 0 0;z-index:20;pointer-events:none;overflow:hidden}
#ready-notice-position{position:absolute;left:50%;top:var(--ready-y,72px);width:max-content;max-width:calc(100% - 40px);transform:translate(-50%,-50%) scale(var(--ready-scale,1));transform-origin:center}
.system-page #ready-label{position:relative;left:auto;top:auto;transform:none;max-width:none;z-index:6;color:var(--text-dark);background:linear-gradient(130deg,#ffffffe8,#ffffffa6);border:1px solid #ffffff;box-shadow:0 10px 35px #0284c710,inset 0 1px #fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.system-page #ready-label small{letter-spacing:.16em;font-size:9px}
.system-page #ready-label:not([hidden]){animation:ready-notice-in .65s cubic-bezier(.22,1,.36,1) both,ready-notice-glow 2.8s ease-in-out .65s infinite}
.system-page #ready-label.is-dismissed:not([hidden]){animation:ready-notice-out .52s cubic-bezier(.6,-.35,.7,.2) both}
.system-page #ready-label:not([hidden]) svg path{stroke-dasharray:24;animation:ready-check-in .5s ease-out .2s both}
.ready-scroll-cue{position:absolute;z-index:6;display:grid;place-items:center;width:44px;height:96px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--primary-dark);transform:translate(-50%,-50%);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ready-scroll-cue:not([hidden]){animation:ready-cue-in .65s ease-out both}
.ready-scroll-cue svg{width:32px;height:80px;overflow:visible;fill:currentColor;stroke:none;filter:drop-shadow(0 1px 1px #ffffffb0)}
.ready-scroll-cue .cue-chevron{animation:ready-chevron-flow 1.65s ease-in-out infinite both}
.ready-scroll-cue .cue-chevron:nth-child(2){animation-delay:.18s}
.ready-scroll-cue .cue-chevron:nth-child(3){animation-delay:.36s}
.ready-scroll-cue:hover{color:var(--secondary)}
@keyframes ready-notice-in{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ready-notice-out{from{opacity:1;transform:translateY(0) scale(1);visibility:visible}to{opacity:0;transform:translateY(-26px) scale(.82);visibility:hidden}}
@keyframes ready-notice-glow{0%,100%{box-shadow:0 10px 35px #0284c710,inset 0 1px #fff}50%{box-shadow:0 10px 35px #0284c728,0 0 0 5px #38bdf80a,inset 0 1px #fff}}
@keyframes ready-check-in{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes ready-cue-in{from{opacity:0;transform:translate(-50%,-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%,-50%) translateY(0)}}
@keyframes ready-chevron-flow{0%{transform:translateY(-8px);opacity:.08}45%{opacity:.9}85%,100%{transform:translateY(10px);opacity:.08}}
.system-stage[data-mode=ready] .story-shade{opacity:0}
@media(orientation:portrait){
 .screen-features{justify-content:center;gap:8px 13px;font-size:clamp(10px,1.7vw,14px)}
 .system-page #ready-label{white-space:nowrap}
 .system-page #ready-label b{font-size:20px}
}
body:is([data-journey=filter],[data-journey=outro]) .ready-scroll-cue *{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.system-page .pos-surface::after{background:none}.system-page #ready-label:not([hidden]),.system-page #ready-label svg path,.ready-scroll-cue:not([hidden]),.ready-scroll-cue .cue-chevron{animation:none}.system-page #ready-label.is-dismissed:not([hidden]){animation:none;visibility:hidden;opacity:0}.ready-scroll-cue .cue-chevron{opacity:.25}.ready-scroll-cue .cue-chevron:nth-child(2){opacity:.55}.ready-scroll-cue .cue-chevron:nth-child(3){opacity:.9}}