/* Isolated opening experiment. Do not alter the approved scene layout. */
#opening-back{position:fixed;z-index:30;top:max(4px,env(safe-area-inset-top));left:max(6px,env(safe-area-inset-left));width:44px;height:44px;display:grid;place-items:center;padding:0;background:none;border:0;color:#ffe600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#opening-back[hidden]{display:none}
#opening-back:focus-visible{outline:1px solid #ffe600;outline-offset:-3px;border-radius:50%}
html.opening-active,html.opening-active body{overflow:hidden;overscroll-behavior:none}
#opening[hidden],#opening [hidden],.opening-curtain[hidden]{display:none!important}
#opening{--opening-pad-top:max(22px,env(safe-area-inset-top));--opening-pad-bottom:max(24px,env(safe-area-inset-bottom));position:fixed;inset:0;z-index:2000;overflow:auto;overscroll-behavior:contain;background:#000;color:#fff;font-family:Geist,system-ui,sans-serif;text-align:center;padding:var(--opening-pad-top) max(24px,env(safe-area-inset-right)) var(--opening-pad-bottom) max(24px,env(safe-area-inset-left));box-sizing:border-box;touch-action:pan-y pinch-zoom;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#opening .opening__inner{min-height:calc(100svh - var(--opening-pad-top) - var(--opening-pad-bottom));max-width:38rem;margin:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
#opening [data-opening-heading]{margin:0;font-size:clamp(1.85rem,7.6vw,3.2rem);line-height:1.08;letter-spacing:-.045em;font-weight:700;background:linear-gradient(100deg,#fff 0%,#fffbdc 25%,#ffed4a 50%,#fffbdc 75%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
#opening .opening__visual{position:relative;width:min(70vw,30svh,320px);height:min(70vw,30svh,320px);flex:none;overflow:hidden;background:#000;-webkit-mask-image:radial-gradient(ellipse at center,#000 58%,#000 63%,#0009 69%,#0000 74%);mask-image:radial-gradient(ellipse at center,#000 58%,#000 63%,#0009 69%,#0000 74%)}
#opening-art,#opening-video{position:absolute;display:block;left:4%;top:50%;width:92%;height:auto;max-width:none;transform:translateY(-48%);margin:0;user-select:none;-webkit-user-drag:none}
#opening-video{opacity:0;pointer-events:none}
#opening .is-video-playing #opening-video{opacity:1}
#opening .is-video-playing #opening-art{visibility:hidden}
#opening .opening__languages{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap}
#opening button{font:600 14px/1.2 Geist,system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#opening [data-language]{min-width:58px;min-height:44px;border:1px solid #ffffff38;border-radius:999px;background:#080808;color:#ddd;padding:10px 18px;transition:color .2s,border-color .2s,background .2s}
#opening [data-language][aria-pressed="true"]{color:#ffe600;background:#ffe6000d;border-color:#ffe600b3}
#opening [data-opening-language-label]{font-size:14px;line-height:1.4;color:#b9b9b9;margin:0}
#opening-status{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
#opening .opening__actions{width:100%;min-height:52px;display:flex;flex-direction:column;align-items:center;gap:12px}
#opening-enter{position:relative;min-height:52px;min-width:230px;max-width:100%;padding:16px 42px;border-radius:999px;border:1px solid #ffe60099;background:#ffe600;color:#101000;font-size:16px;box-shadow:0 0 30px #ffe60012;transition:opacity .2s,box-shadow .2s}
#opening-enter:disabled{cursor:wait;opacity:.65;box-shadow:none}
#opening-enter:not(:disabled):hover{box-shadow:0 0 30px #ffe60033}
#opening-skip{max-width:100%;border:0;background:none;color:#c5c5c5;text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:8px 12px;font-size:12px}
#opening button:focus-visible{outline:2px solid #fff;outline-offset:5px}
#opening .opening__preview,#opening [data-frame],#opening [data-opening-preview-label]{display:none!important}
.opening-spinner{display:none;position:absolute;left:17px;top:50%;width:14px;height:14px;margin-top:-7px;border:1.5px solid #10100040;border-top-color:#101000;border-radius:50%;box-sizing:border-box}
#opening-enter.is-loading .opening-spinner{display:block;animation:opening-spin .85s linear infinite}
@keyframes opening-spin{to{transform:rotate(360deg)}}
.opening-curtain{position:fixed;inset:0;z-index:2100;visibility:hidden;pointer-events:none;overflow:hidden;isolation:isolate;background:transparent}
.opening-curtain.is-active{visibility:visible;pointer-events:auto;touch-action:pinch-zoom}
.opening-shutter{position:absolute;inset:-1px;background:#000;will-change:transform}
.opening-shutter--left{clip-path:polygon(0 0,35.15% 0,65.15% 100%,0 100%);transform:translateX(-101%)}
.opening-shutter--right{clip-path:polygon(35% 0,100% 0,100% 100%,65% 100%);transform:translateX(101%)}
.opening-shutter-edge{position:absolute;inset:0;clip-path:polygon(35% 0,35.18% 0,65.18% 100%,65% 100%);background:linear-gradient(#fff0,#fff7ba 35%,#ffe600 65%,#fff0);opacity:0;pointer-events:none}
@media(max-height:740px){#opening .opening__inner{gap:18px}#opening [data-opening-heading]{font-size:clamp(1.6rem,6.5vw,2.8rem)}}
@media(prefers-reduced-motion:reduce){#opening *,#opening *::before,#opening *::after{transition:none!important;animation:none!important}.opening-shutter-edge{display:none}}
/* V43: exact V39 opening viewer composition, adapted only from viewer to modal.
   The flower scene, its yellow logo and all chapter media remain untouched. */
#opening{padding:0;text-align:left;overflow:auto;overscroll-behavior:contain}
#opening .opening__inner{display:block;position:relative;width:100%;height:100svh;min-height:580px;max-width:none;margin:0;overflow:hidden;background:#000}
#opening [data-opening-heading]{position:absolute;top:5%;left:8%;z-index:2;margin:0;font-size:clamp(42px,6vw,88px);line-height:.97;letter-spacing:-.055em;font-weight:650;white-space:pre-line}
#opening .opening__visual{position:absolute;inset:22% 0 32%;width:auto;height:auto;overflow:hidden;background:#000;mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
#opening-art{position:absolute;width:min(163%,1500px);height:auto;max-width:none;left:50%;top:50%;transform:translate(-50%,-50%);display:block}
#opening .opening__selection{position:absolute;left:8%;right:8%;bottom:4%;max-width:480px;z-index:3}
#opening [data-opening-language-label]{font-size:clamp(30px,3vw,43px);font-weight:650;letter-spacing:-.045em;line-height:1.04;margin:0 0 20px;white-space:pre-line}
#opening .opening__languages{display:flex;gap:12px;justify-content:flex-start;flex-wrap:nowrap}
#opening [data-language]{position:relative;min-width:96px;height:54px;min-height:54px;padding:10px 18px;border-radius:14px;background:#171719;border:1px solid #424245;color:#fff;font-size:19px;font-weight:600;line-height:1.2;transition:background .22s,color .22s,border-color .22s;letter-spacing:.02em}
#opening [data-language] span{display:inline-block;overflow:hidden;width:0;opacity:0;transition:width .22s,opacity .22s}
#opening [data-language][aria-pressed=true]{background:#ffe600;color:#000;border-color:#ffe600}
#opening [data-language][aria-pressed=true] span{width:24px;opacity:1}
#opening .opening__actions{position:relative;display:block;width:100%;height:70px;min-height:70px;padding-top:14px;box-sizing:border-box}
#opening-enter{width:100%;height:54px;min-height:54px;min-width:0;max-width:100%;padding:0 20px;border-radius:14px;border:1px solid #555;background:#090909;color:#fff;font-size:19px;font-weight:550;display:flex;align-items:center;justify-content:space-between;box-shadow:none;gap:14px}
#opening-enter::after{content:'↗';font-size:25px;color:#fff;flex:none}
#opening-enter .opening-enter-label{font-size:19px;color:#fff}
#opening-enter:not(:disabled):hover{box-shadow:none;border-color:#9a9a9a}
#opening-enter.is-loading{padding-left:42px}
#opening .opening-spinner{border-color:#ffffff40;border-top-color:#ffe600}
#opening-skip{position:absolute;top:12px;left:0;right:0;margin:auto;min-height:54px;border:1px solid #555;border-radius:14px;background:#090909;font-size:19px;text-decoration:none}
#opening .opening__actions:has(#opening-skip:not([hidden])) #opening-enter{visibility:hidden}
#opening [data-opening-heading],#opening [data-opening-language-label]{color:#fff;background:none;-webkit-text-fill-color:currentColor}
@supports(background-clip:text){#opening [data-opening-heading],#opening [data-opening-language-label],#opening-enter .opening-enter-label{background-image:linear-gradient(100deg,#fff 0%,#fffef6 12%,#fffbdc 25%,#fff5a0 38%,#ffed4a 50%,#fff5a0 62%,#fffbdc 75%,#fffef6 88%,#fff 100%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}}
#opening.has-language #opening-enter:not([hidden]){animation:opening-entry-reveal .35s cubic-bezier(.2,.7,.3,1) both}
@keyframes opening-entry-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){#opening [data-opening-heading]{font-size:44px}#opening [data-opening-language-label]{font-size:36px}#opening .opening__selection{bottom:max(4%,env(safe-area-inset-bottom));max-width:none}#opening-art{width:158%}}
@media(min-width:761px) and (min-height:701px){#opening .opening__visual{top:26%}}
@media(max-height:700px){#opening [data-opening-heading]{font-size:35px;top:4%}#opening .opening__visual{inset:20% 0 36%}#opening [data-opening-language-label]{font-size:30px;margin-bottom:14px}#opening [data-language]{height:46px;min-height:46px}#opening .opening__selection{bottom:3%}#opening .opening__actions{height:65px;min-height:65px}#opening-enter{height:50px;min-height:50px}}

/* V54: one centred product composition. The space reserved for real progress
   becomes the entrance button without shifting the logo or language choice. */
#opening{text-align:center}
#opening .opening__inner{height:100svh;min-height:580px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(180px,40svh) auto;gap:16px;box-sizing:border-box;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));align-content:center;align-items:center;justify-items:center}
#opening [data-opening-heading]{position:relative;inset:auto;max-width:100%;font-size:clamp(42px,5.2vw,78px);line-height:1.02;text-align:center}
#opening .opening__visual{position:relative;inset:auto;width:100%;height:100%;min-height:180px;container-type:size;mask-image:none;-webkit-mask-image:none;pointer-events:none}
#opening-art{width:min(128%,1100px);left:50%;top:50%;transform:translate(-50%,-48%)}
@supports(width:1cqh){#opening-art{width:min(128cqw,204cqh,1400px)}}
#opening .opening__selection{position:relative;inset:auto;width:min(100%,440px);max-width:none;text-align:center}
#opening [data-opening-language-label]{font-size:clamp(28px,3vw,38px);line-height:1.08;white-space:normal;margin:0 0 18px}
#opening .opening__languages{justify-content:center}
#opening [data-language]{width:112px;min-width:112px}
#opening .opening__actions{height:82px;min-height:82px;padding-top:18px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}
#opening-enter{width:min(100%,360px);height:54px;flex:none;justify-content:center;font-size:20px}
#opening-enter .opening-enter-label{font-size:20px}
#opening-enter::after{font-size:24px;margin-left:4px}
#opening-progress{width:min(100%,230px);display:flex;flex-direction:column;align-items:center;gap:10px;contain:layout paint}
#opening-percent{font-size:32px;font-weight:550;letter-spacing:-.055em;line-height:1.15;font-variant-numeric:tabular-nums;color:#fff5a0}
.opening__track{display:block;height:2px;width:164px;background:#ffffff24;border-radius:2px;overflow:hidden}
#opening-progress-fill{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#fffce0,#ffe600,#fffce0)}
#opening-retry{min-height:44px;min-width:170px;border:1px solid #ffe60070;border-radius:12px;padding:10px 20px;background:#0b0b0b;color:#ffe600;font-size:17px}
#opening-skip{position:static;min-height:30px;border:0;padding:3px 12px;background:none;font-size:15px;text-decoration:underline;text-underline-offset:4px}
#opening .opening__actions:has(#opening-retry:not([hidden])){height:auto;min-height:82px}
#opening .opening__actions:has(#opening-skip:not([hidden])) #opening-enter{visibility:visible}
#opening-progress.has-error .opening__track{background:#ffe60024}
@media(max-width:760px){#opening .opening__inner{gap:10px;padding-top:max(24px,env(safe-area-inset-top))}#opening [data-opening-heading]{font-size:clamp(40px,11.6vw,52px)}#opening [data-opening-language-label]{font-size:clamp(26px,7.5vw,34px)}}
@media(max-height:700px){#opening .opening__inner{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));gap:8px}#opening [data-opening-heading]{font-size:38px}#opening [data-opening-language-label]{font-size:28px;margin-bottom:12px}#opening .opening__actions{height:76px;min-height:76px;padding-top:12px}}

/* V55: the site's own typography becomes the interface. No filled app tiles. */
#opening{--opening-type-light:linear-gradient(100deg,#fff 0%,#fffef6 12%,#fffbdc 25%,#fff5a0 38%,#ffed4a 50%,#fff5a0 62%,#fffbdc 75%,#fffef6 88%,#fff 100%)}
#opening .opening__languages{gap:24px}
#opening [data-language]{font-family:Geist,system-ui,sans-serif;font-size:clamp(27px,7vw,32px);font-weight:650;letter-spacing:-.035em;line-height:1.1;width:126px;min-width:0;max-width:42%;height:62px;min-height:54px;padding:8px 12px 13px;border:0;border-radius:0;background:transparent;color:#fff;transition:opacity .25s;isolation:isolate}
#opening .opening__languages [data-language] .opening-language-label{display:inline-block;width:auto;opacity:1;overflow:visible;transition:none}
#opening [data-language]::after{content:'';position:absolute;bottom:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,#fff0,#ffffff60,#fff0);transform:scaleX(.72);transition:transform .35s cubic-bezier(.22,.68,.25,1),background .35s,box-shadow .35s}
#opening [data-language][aria-pressed=true]{color:#fff;background:transparent;border:0}
#opening [data-language][aria-pressed=true]::after{transform:scaleX(1);background:linear-gradient(90deg,#ffe60000,#fffbdc 25%,#ffe600 50%,#fffbdc 75%,#ffe60000);box-shadow:0 4px 18px #ffe60020}
#opening.has-language [data-language][aria-pressed=false]{opacity:.58}
#opening [data-language]:hover{opacity:1}
#opening #opening-enter{height:60px;min-height:54px;padding:0 8px;border:0;border-radius:0;background:transparent;box-shadow:none;font-family:Geist,system-ui,sans-serif;font-weight:650;letter-spacing:-.04em;position:relative}
#opening-enter .opening-enter-label{font:inherit;font-size:clamp(25px,6.7vw,30px);line-height:1.15}
#opening-enter::before{content:'';position:absolute;left:8%;right:8%;bottom:0;height:1px;background:linear-gradient(90deg,#fff0,#fffbdc66,#ffe60099,#fffbdc66,#fff0);transform:scaleX(.8);transition:transform .4s cubic-bezier(.22,.68,.25,1)}
#opening-enter::after{font-family:Geist,system-ui,sans-serif;font-size:24px;font-weight:500;color:#fff6b0}
#opening-enter:not(:disabled):hover{border:0;box-shadow:none}
#opening-enter:not(:disabled):hover::before{transform:scaleX(1)}
#opening-percent{font-family:Geist,system-ui,sans-serif;font-weight:650}
@supports(background-clip:text){#opening [data-language] .opening-language-label,#opening-enter .opening-enter-label,#opening-percent{background-image:var(--opening-type-light);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}}
@media(max-height:700px){#opening [data-language]{height:54px;min-height:54px;font-size:27px}#opening-enter{height:54px}#opening-enter .opening-enter-label{font-size:25px}}
@media(forced-colors:active){#opening .opening-language-label,#opening-enter .opening-enter-label,#opening-percent{background:none;color:ButtonText;-webkit-text-fill-color:ButtonText}#opening [data-language][aria-pressed="true"]{outline:2px solid Highlight;outline-offset:3px}}

/* Clearer separation, with the same logo size, font and central axis. */
#opening .opening__inner{height:auto;min-height:max(580px,100svh);row-gap:28px;overflow:visible}
#opening [data-opening-language-label]{margin-bottom:26px}
#opening .opening__actions{height:100px;min-height:100px;padding-top:28px}
#opening .opening__actions:has(#opening-retry:not([hidden])){height:auto;min-height:100px}
@media(max-width:760px){#opening .opening__inner{row-gap:24px}}
@media(max-height:780px){
  #opening .opening__inner{row-gap:16px}
  #opening [data-opening-language-label]{margin-bottom:18px}
  #opening .opening__actions{height:88px;min-height:88px;padding-top:20px}
  #opening .opening__actions:has(#opening-retry:not([hidden])){height:auto;min-height:88px}
}