/* Six little worlds. Their decoration stays inside each portal's hit area. */
.planet-shell,.planet.is-active .planet-shell { padding:0; background:none; box-shadow:none; border-radius:0; }
.planet-shell::after { display:none; }
.scene-art { display:block; position:relative; width:100%; height:100%; isolation:isolate; --gesture:0deg; }
.scene-art>img,.planet .scene-art>img { position:absolute; inset:8%; width:84%; height:84%; object-fit:cover; border-radius:22%; box-shadow:0 12px 22px #0005; filter:saturate(1.06); }
.scene-art>span { position:absolute; pointer-events:none; }
.planet .planet-badge { top:-5px; right:-3px; font-size:9px; padding:3px 6px; z-index:5; }
.scene-desktop_pet>img,.planet .scene-desktop_pet>img { inset:0 15% 16%; width:70%; height:84%; object-fit:cover; border-radius:40% 40% 9% 9%; clip-path:inset(0 0 5%); z-index:2; transform-origin:50% 85%; }
.tiny-window { left:3%; right:3%; bottom:0; height:32%; border:1px solid #a4c7d18c; border-radius:5px; background:linear-gradient(140deg,#a6cfca26,#111c2ced); box-shadow:0 10px 20px #0005; transform:rotate(-5deg); padding:6%; }
.tiny-window i { display:inline-block; width:5%; aspect-ratio:1; border-radius:50%; background:#ff9d80; margin-right:5%; vertical-align:top; }
.tiny-window b { display:block; width:72%; height:2px; background:#b1cab966; margin-top:5%; }
.tiny-window b:last-child { width:43%; }
.hello-pop { right:-1%; top:0; z-index:3; background:#ffe8c0; color:#11232d; border-radius:50% 50% 50% 0; padding:5% 8%; font:700 12px Syne,sans-serif; opacity:0; transform:translateY(8px) scale(.7); transition:.3s; }
.scene-today_swing>img,.planet .scene-today_swing>img { border-radius:18% 18% 43% 43%; transform-origin:65% 8%; transform:rotate(-9deg); }
.swing-arc { inset:15% 0 0; border:1px solid #ffb98b70; border-top-color:transparent; border-left-color:transparent; border-radius:50%; transform:rotate(22deg); }
.swing-arc.arc-two { inset:28% -4% 12%; opacity:.35; transform:rotate(38deg); }
.scene-changan>img,.planet .scene-changan>img { inset:0 0 12%; width:100%; height:88%; clip-path:polygon(50% 0,100% 29%,100% 78%,50% 100%,0 77%,0 27%); border-radius:0; z-index:2; }
.city-platform { inset:31% 2% -1%; background:linear-gradient(125deg,#827252,#304742 60%,#111d29); clip-path:polygon(50% 0,100% 30%,100% 70%,50% 100%,0 72%,0 28%); box-shadow:0 10px 10px #0008; }
.city-smoke { top:13%; left:40%; width:13%; height:38%; border-left:2px solid #edf6ec66; border-radius:50%; filter:blur(2px); z-index:3; opacity:.2; }
.city-lights { inset:53% 18% auto; text-align:center; color:#ffd184; font-size:25px; z-index:3; opacity:0; filter:drop-shadow(0 0 5px #ffd184); transition:opacity .6s; }
.scene-manyouzhi { transform:rotate(-9deg); }
.scene-manyouzhi>img,.planet .scene-manyouzhi>img { inset:8% 0; width:100%; height:84%; border-radius:4%; clip-path:polygon(0 6%,32% 0,66% 9%,100% 0,100% 91%,66% 100%,32% 91%,0 100%); }
.scene-manyouzhi::after { content:''; position:absolute; inset:8% 0; background:linear-gradient(90deg,transparent 30%,#040d3055 32%,#d8edff33 33%,transparent 36% 64%,#040d3055 66%,#d8edff33 67%,transparent 70%); pointer-events:none; }
.route-thread { inset:28% 18% 24%; border:2px dashed #ffe4b0; border-radius:45% 15% 70% 20%; transform:rotate(-15deg); z-index:2; opacity:.7; }
.map-pin { width:8%; aspect-ratio:1; background:#ff735f; border:2px solid #ffe7d0; border-radius:50% 50% 50% 0; transform:rotate(-45deg); z-index:3; box-shadow:0 4px 10px #070a27; }
.pin-one { top:24%; left:18%; }.pin-two { top:54%; left:46%; }.pin-three { top:28%; right:13%; }
.scene-hundred_lives { transform:rotate(7deg); }
.scene-hundred_lives>img,.planet .scene-hundred_lives>img { inset:0 12%; width:76%; height:100%; border-radius:4px; clip-path:polygon(0 0,100% 0,100% 74%,94% 78%,100% 82%,100% 100%,0 100%,0 82%,6% 78%,0 74%); }
.ticket-edge { inset:auto 12% 4%; text-align:center; font:700 8px Syne,sans-serif; letter-spacing:.15em; color:#f2d7b3; z-index:3; padding-top:5%; border-top:1px dashed #e4b38f70; }
.rain-lines { inset:0 12% 22%; background:repeating-linear-gradient(104deg,transparent 0 15px,#aecbe033 16px,transparent 17px 24px); opacity:.45; }
.ticket-light { left:24%; right:24%; bottom:22%; height:2px; background:#f8b45d; box-shadow:0 0 17px 5px #ffb26450; opacity:.6; }
.scene-woodpecker>img,.planet .scene-woodpecker>img { inset:15% 2% 0 14%; width:84%; height:80%; border-radius:12%; transform:rotate(8deg); z-index:2; }
.inspection-back { inset:0 16% 14% 0; background:linear-gradient(145deg,#64aafa40,#a0bce110); border:1px solid #9bbcff88; border-radius:12%; transform:rotate(-10deg); box-shadow:0 10px 15px #0004; }
.scan-beam { top:35%; left:8%; right:0; height:1px; background:#ffc1a4; box-shadow:0 0 8px 2px #ff836470; z-index:4; }
.inspection-mark { width:17%; height:16%; border:1px solid #ff8b73; z-index:3; opacity:0; transition:opacity .2s; }
.mark-one { left:29%; top:33%; }.mark-two { right:9%; bottom:17%; }
.planet:is(:hover,:focus-visible,.is-active) .hello-pop,.is-playing .hello-pop { opacity:1; transform:none; }
.planet:is(:hover,:focus-visible,.is-active) .scene-desktop_pet>img,.is-playing .scene-desktop_pet>img { animation:pet-greet 1.1s ease-in-out infinite alternate; }
.planet:is(:hover,:focus-visible,.is-active) .scene-today_swing>img,.is-playing .scene-today_swing>img { animation:animal-swing 1s ease-in-out infinite alternate; }
.planet:is(:hover,:focus-visible,.is-active) .city-smoke { animation:city-breath 2.4s ease-out infinite; }
.planet:is(:hover,:focus-visible,.is-active) .city-lights,.is-night .city-lights { opacity:1; }
.planet:is(:hover,:focus-visible,.is-active) .map-pin { animation:pin-hop 1.5s ease-in-out infinite alternate; }
.planet:is(:hover,:focus-visible,.is-active) .rain-lines { animation:rain-fall 1s linear infinite; }
.planet:is(:hover,:focus-visible,.is-active) .scan-beam { animation:scan-pass 2s ease-in-out infinite alternate; }
.planet:is(:hover,:focus-visible,.is-active) .inspection-mark { opacity:1; }
@keyframes pet-greet { to{transform:rotate(8deg) translateY(-4%);} }
@keyframes animal-swing { from{transform:rotate(-20deg);}to{transform:rotate(22deg);} }
@keyframes city-breath { from{opacity:0;transform:translateY(5%);}50%{opacity:.65;}to{opacity:0;transform:translateY(-35%) scale(1.4);} }
@keyframes pin-hop { to{transform:rotate(-45deg) translate(2px,-2px);} }
@keyframes rain-fall { to{background-position:-5px 24px;} }
@keyframes scan-pass { to{transform:translateY(38px);} }

/* The detail is a small playable exhibit, with a clear route to the real app. */
.detail-hero:has(.playable-detail) { align-items:center; gap:clamp(30px,5vw,90px); padding-bottom:68px; }
.detail-copy h1 { font-size:clamp(38px,4.2vw,68px); letter-spacing:-.045em; }
.playable-detail,.playable-detail:hover { display:block; position:relative; width:100%; min-width:0; aspect-ratio:auto; height:580px; padding:28px; text-align:left; overflow:hidden; transform:none; border-radius:28px; border:1px solid #889fd43d; background:radial-gradient(ellipse at 0 15%,#164d9640,transparent 56%),radial-gradient(ellipse at 100% 90%,#a4355533,transparent 58%),#0b101e; box-shadow:0 32px 90px #03071566,inset 0 1px #d2ddff15; }
.playable-detail::before { content:''; position:absolute; inset:0; background-image:radial-gradient(#bbd8ff5c .65px,transparent .8px); background-size:37px 43px; pointer-events:none; mask-image:linear-gradient(transparent,#000,transparent); }
.demo-topline { display:flex; justify-content:space-between; gap:12px; align-items:center; font:10px Syne,sans-serif; letter-spacing:.12em; color:#a2b1cf; position:relative; }
.demo-topline>span:first-child { display:flex; align-items:center; gap:7px; letter-spacing:.06em; }
.demo-topline i { width:5px; height:5px; background:#ffad8e; border-radius:50%; box-shadow:0 0 10px #ffab89; }
.demo-heading { position:relative; margin:20px 0 0; color:#f2e9e3; font-size:clamp(17px,1.6vw,22px); font-weight:450; letter-spacing:-.025em; }
.demo-universe { position:absolute; top:115px; left:25px; right:25px; bottom:114px; display:grid; place-items:center; perspective:800px; }
.demo-universe .scene-art { width:210px; height:210px; transition:filter .7s,transform .7s; }
.demo-universe .scene-art>img { box-shadow:0 28px 45px #0007; }
.demo-orbit { position:absolute; width:85%; height:64%; border:1px solid #779eda35; border-radius:50%; transform:rotate(-24deg); }
.demo-orbit.second { width:71%; height:78%; transform:rotate(32deg); border-color:#ec9b912b; }
.demo-caption { position:absolute; bottom:-15px; text-align:center; width:100%; color:#b8c7e2; font-size:13px; line-height:1.7; }
.demo-controls { position:absolute; bottom:51px; left:28px; right:28px; display:flex; justify-content:center; gap:10px; z-index:4; }
.demo-controls button { min-height:43px; padding:10px 20px; border:1px solid #afbedd55; border-radius:30px; background:#19243a; color:#e4edff; font-size:13px; transition:background .2s,transform .2s; }
.demo-controls button:hover { background:#2b3f61; transform:translateY(-2px); }
.demo-controls button>span { margin-left:20px; color:#ffb19d; }
.demo-controls button[aria-pressed=true] { border-color:#ffa28c; color:#ffdacc; background:#6b364345; }
.demo-choices { display:flex; gap:10px; }
.demo-zoom { position:absolute; bottom:14px; right:25px; color:#b1bfd7; font-size:10px; padding:4px; background:none; text-decoration:underline; text-underline-offset:4px; }
.demo-zoom img[hidden] { display:none; }
.demo-universe .hello-pop { font-size:20px; }
.demo-universe .ticket-edge { font-size:12px; }
.demo-universe .city-lights { font-size:46px; }
.is-night .demo-universe { background:radial-gradient(ellipse,#d8883222,transparent 67%); }
.is-night .scene-changan>img { filter:brightness(.65) saturate(.8); }
[data-choice=alley] .route-thread { transform:rotate(125deg); border-color:#ff9e8c; }
[data-choice=alley] .pin-two { top:25%; left:50%; }
[data-choice=alley] .scene-manyouzhi { transform:rotate(6deg); }
[data-choice=leave] .scene-hundred_lives { transform:translateX(14px) rotate(15deg); }
[data-choice=stay] .scene-hundred_lives { transform:rotate(-6deg); }
[data-choice=leave] .ticket-light { box-shadow:0 0 45px 18px #ffb26455; }
.compare-stage { position:absolute; top:113px; left:28px; right:28px; bottom:141px; border-radius:16px; border:1px solid #b7c3e54d; overflow:hidden; background:#17243c; box-shadow:0 14px 35px #01091677; }
.compare-layer { position:absolute; inset:0; overflow:hidden; }
.compare-changed { clip-path:inset(0 0 0 var(--reveal)); }
.sample-card { position:absolute; inset:0; padding:24px 30px; background:#e7edf5; color:#132a53; }
.sample-eyebrow { display:block; font:9px Syne,sans-serif; letter-spacing:.13em; color:#5e7498; }
.sample-icon { position:absolute; top:50px; right:34px; color:#315cec; font-size:70px; line-height:1; }
.sample-card strong { display:block; position:relative; margin-top:25px; font-size:clamp(23px,2.3vw,36px); line-height:1.25; letter-spacing:-.06em; font-weight:650; }
.sample-line { display:block; width:60%; height:5px; border-radius:10px; margin-top:19px; background:#b9c8dd; }
.sample-line.short { width:42%; margin-top:8px; }
.sample-button { display:block; width:70%; text-align:center; margin-top:22px; padding:10px 12px; border-radius:7px; background:#315cec; color:white; font-size:11px; }
.sample-changed { background:#e7edf5; }.sample-changed strong { transform:translate(10px,5px); }.sample-changed .sample-button { background:#d15566; }.sample-changed .sample-icon { transform:rotate(13deg); }
.difference-box { position:absolute; border:1px solid #e66061; color:#a33545; font-size:9px; line-height:1; padding:3px; pointer-events:none; }
.difference-title { top:75px; left:36px; width:46%; height:95px; text-align:right; }.difference-button { bottom:33px; left:26px; width:129px; height:40px; text-align:right; }
.compare-label { position:absolute; top:11px; right:11px; font-size:9px; color:#526b93; }
.compare-original .compare-label { left:11px; right:auto; top:auto; bottom:10px; }
.compare-handle { position:absolute; top:0; bottom:0; left:var(--reveal); width:2px; background:#f37763; transform:translateX(-50%); pointer-events:none; box-shadow:0 0 12px #d8565c55; }
.compare-handle>span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:33px; height:42px; display:grid; place-items:center; background:#ff927c; color:#162947; border:1px solid #ffdace; border-radius:25px; }
.compare-control { display:grid; grid-template-columns:1fr auto; width:100%; max-width:430px; gap:8px; color:#d2dded; font-size:11px; }
.compare-control input { grid-row:2; grid-column:1 / -1; width:100%; accent-color:#ff927c; cursor:ew-resize; min-height:28px; margin:0; }
.compare-control>span { color:#8e9eba; font-size:10px; }
.compare-stage { touch-action:pan-y; cursor:ew-resize; user-select:none; }
.playground[data-render-state=hidden] .scene-art *,.playground[data-render-state=offscreen] .scene-art * { animation-play-state:paused!important; }
.detail-info { border-top:1px solid #839ccc26; padding-top:40px; }
@media(max-width:1000px) { .playable-detail { height:530px; }.demo-universe .scene-art { width:180px; height:180px; }.sample-card { padding-inline:22px; }.sample-icon { font-size:53px;right:19px;}.sample-card strong { font-size:28px; }.difference-title { height:79px; } }
@media(max-width:500px) { .playable-detail { height:500px; padding:20px; border-radius:22px; }.demo-topline { font-size:9px; }.demo-heading { margin-top:17px; font-size:17px; }.demo-universe { top:100px; left:16px; right:16px; bottom:113px; }.demo-universe .scene-art { width:160px; height:160px; }.demo-caption { font-size:11px; bottom:-10px; }.demo-controls { left:20px;right:20px; }.demo-controls button { padding:10px 15px;font-size:12px; }.compare-stage { top:101px;left:20px;right:20px;bottom:135px; }.sample-card { padding:20px; }.sample-card strong { font-size:26px; }.sample-icon { font-size:46px;top:53px;right:13px; }.sample-eyebrow {font-size:8px;}.sample-line { margin-top:15px; }.sample-button {margin-top:15px;}.difference-title {top:67px;left:28px;height:77px;}.difference-button {bottom:23px;left:16px;}.planet .planet-badge { font-size:8px; padding:2px 5px; } }
.motion-off .scene-art *,.is-paused .scene-art * { animation:none!important; }
@media(prefers-reduced-motion:reduce) { .scene-art *, .demo-universe .scene-art,.demo-controls button { animation:none!important;transition:none!important; } }
:root:not(.js) .demo-controls { display:none; }