*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{background:#060609;display:grid;place-items:center;overflow:hidden;font:15px/1.5 -apple-system,BlinkMacSystemFont,system-ui,sans-serif}.stage{width:402px;height:874px;transform:scale(var(--phone-scale,1))}.phone{height:100%;padding:5px;border-radius:56px;background:linear-gradient(150deg,#62626a,#26262c 45%,#53535d);position:relative}.phone::after{content:"";position:absolute;right:-2px;top:190px;width:3px;height:80px;background:#45454c;border-radius:2px}.screen{height:100%;overflow:hidden;position:relative;border-radius:51px;background:#101426;isolation:isolate}.island{position:absolute;top:12px;left:50%;translate:-50% 0;width:122px;height:36px;background:#000;border-radius:24px;z-index:12;pointer-events:none}.intro-header{position:absolute;left:26px;right:26px;top:67px;color:#f1f2fc;z-index:4;pointer-events:none;transition:opacity 180ms}.intro-header a{color:inherit;text-decoration:none;font-size:20px;font-weight:750;letter-spacing:-.04em;pointer-events:auto}.intro-header p{font-size:12px;color:#c2c7df;margin:5px 0}.worlds{position:absolute;inset:0;--seam-left:57%;--seam-right:44%}.world{position:absolute;inset:0;overflow:hidden;display:block;text-decoration:none;color:var(--ds-text);isolation:isolate;transition:clip-path 640ms cubic-bezier(.22,1,.36,1);-webkit-tap-highlight-color:transparent;--px:50%;--py:40%}.world--subculture{background:#161d36;clip-path:polygon(0 0,100% 0,100% var(--seam-right),0 var(--seam-left))}.world--realism{background:#fff3be;clip-path:polygon(0 var(--seam-left),100% var(--seam-right),100% 100%,0 100%)}.world-bg{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.38;pointer-events:none}.pointer-light{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 400ms;background:radial-gradient(ellipse 230px 220px at var(--px) var(--py),rgba(153,163,236,.18),transparent 75%)}.world--realism .pointer-light{background:radial-gradient(ellipse 220px 230px at var(--px) var(--py),rgba(255,255,244,.65),transparent 75%)}.world-copy{position:absolute;left:26px;top:190px;z-index:3;transition:translate 640ms cubic-bezier(.22,1,.36,1),opacity 200ms}.mode-type{font-size:10px;font-weight:700;letter-spacing:.13em;opacity:.75}.world h1,.world h2{font-size:32px;font-weight:750;line-height:1.25;letter-spacing:-.035em;margin:12px 0 28px}.world-action{display:inline-flex;gap:10px;align-items:center;font-size:12px;font-weight:650;min-height:44px;padding:9px 12px;border:1px solid rgba(193,199,244,.24);background:rgba(22,29,54,.88);border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background 180ms}.world-action svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:translate 260ms}.world--realism .world-copy{top:568px;left:auto;right:26px;text-align:right}.world--realism .world-action{background:rgba(255,253,246,.88);border:0}.figure{position:absolute;width:246px;pointer-events:none;transition:transform 700ms cubic-bezier(.22,1,.36,1),filter 450ms;transform-origin:50% 70%;filter:drop-shadow(0 9px 18px #0002)}.figure svg{display:block;width:100%;height:auto;overflow:visible}.figure--subculture{top:152px;right:-28px;rotate:9deg;--hair:#777fb7;--face:#d0d3f2;--body:#444f81;--sleeve:#6673aa;--collar:#aab5e2;--eye:#414f82}.figure--realism{bottom:44px;left:-27px;rotate:-8deg;--hair:#8a7752;--face:#e9d8af;--body:#e3ca80;--sleeve:#eddb9d;--collar:#fff8dc;--eye:#7a6743}.hair,.fringe{fill:var(--hair)}.face,.neck{fill:var(--face)}.body,.belt{fill:var(--body)}.sleeve{fill:var(--sleeve)}.collar,.jewel{fill:var(--collar)}.eyes{fill:none;stroke:var(--eye);stroke-width:4;stroke-linecap:round}.intro-footer{position:absolute;bottom:24px;left:0;right:0;text-align:center;font-size:11px;color:#6b624b;pointer-events:none;z-index:4;transition:opacity 180ms}.worlds[data-active=subculture]{--seam-left:65%;--seam-right:52%}.worlds[data-active=realism]{--seam-left:49%;--seam-right:36%}.worlds[data-active=subculture] .world--subculture .figure{transform:translate(-5px,3px) scale(1.045);filter:drop-shadow(0 0 3px #a2a7ee99) drop-shadow(0 0 12px #8d98da44)}.worlds[data-active=realism] .world--realism .figure{transform:translate(5px,-3px) scale(1.045);filter:drop-shadow(0 0 3px #fffbe8bb) drop-shadow(0 0 12px #fffdf666)}.worlds[data-active=subculture] .world--subculture .pointer-light,.worlds[data-active=realism] .world--realism .pointer-light{opacity:1}.worlds[data-active=subculture] .world--subculture .world-copy{translate:0 6px}.worlds[data-active=realism] .world--realism .world-copy{translate:0 -6px}.world:focus-visible{outline:0}.world:focus-visible .world-action{outline:2px solid var(--ds-focus);outline-offset:4px}.world:hover .world-action svg{translate:3px 0}.world.is-pressing .figure{transform:scale(.975)!important}.world.is-pressing .world-action{scale:.97}.world.is-selected{z-index:6;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.world.is-selected .figure{transform:scale(1.12)!important}.screen.is-leaving .intro-header,.screen.is-leaving .intro-footer{opacity:0}.screen.is-leaving .world{pointer-events:none}.screen.is-leaving .world-copy{opacity:0}.worlds.is-entering .figure{animation:figure-enter 850ms cubic-bezier(.22,1,.36,1) both}.worlds.is-entering .world--realism .figure{animation-delay:90ms}.worlds.is-entering .world-copy{animation:copy-enter 650ms 150ms both}.worlds.is-entering .world--realism .world-copy{animation-delay:230ms}@keyframes figure-enter{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}@keyframes copy-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@supports not (backdrop-filter:blur(1px)){.world-action{background:#161d36}.world--realism .world-action{background:#fffdf6}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.figure{transform:none!important}.worlds[data-active]{--seam-left:57%;--seam-right:44%}.world-copy,.world-action svg{translate:none!important}}@media(prefers-reduced-transparency:reduce){.world-action{background:#161d36;backdrop-filter:none}.world--realism .world-action{background:#fffdf6}}

.world--realism .world-action { position: relative; isolation: isolate; overflow: hidden; }
.world--realism .world-action::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: linear-gradient(135deg, #fff7d6, #fffef5); transition: opacity 260ms ease; }
.worlds[data-active="realism"] .world--realism .world-action::before,
.world--realism:focus-visible .world-action::before { opacity: 1; }
@media(prefers-reduced-motion:reduce){.world--realism .world-action::before{transition:none}}