.room .hero{--slab-w:min(580px,42vw);--slab-ratio:16/10;--base:34px;display:flex;flex-direction:column;padding-bottom:4px;overflow:hidden}@media (min-width:768px) and (min-aspect-ratio:121/100){.room .hero{height:calc(100svh - 56px - 56px);min-height:560px}.room .hero-sentence{order:-1}}.room .hero-sentence{display:flex;align-items:baseline;justify-content:space-between;gap:32px;margin:16px 0 10px;color:var(--muted)}.room .hero-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-block:-12px;flex:none;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--rule);white-space:nowrap;transition:text-decoration-color var(--t-state) var(--ease)}.room .hero-link:focus-visible,.room .hero-link:hover{text-decoration-color:var(--ink)}.room .hero-line{margin:0;animation:hero-rise var(--t-enter) var(--ease) both}.room .hero-signal{color:var(--signal);white-space:nowrap}.room .hero-scene{position:relative;flex:1;min-height:340px;overflow:hidden;perspective:1600px;perspective-origin:50% 42%}.room .hero-world{--orbit-x:0deg;--orbit-y:0deg;position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% calc(100% - var(--base));transform:rotateX(var(--orbit-x)) rotateY(var(--orbit-y));transition:transform var(--t-enter) var(--ease)}.room .hero-light{width:1800px;height:1100px;margin-left:-900px;transform:translateZ(-1300px);background:radial-gradient(ellipse 38% 42% at 50% 78%,color-mix(in srgb,var(--ink) 11%,transparent),transparent 72%)}.room .hero-floor,.room .hero-light{position:absolute;left:50%;bottom:var(--base);pointer-events:none}.room .hero-floor{width:4000px;height:2600px;margin-left:-2000px;transform-origin:50% 100%;transform:translateZ(320px) rotateX(90deg);background:radial-gradient(ellipse 16% 14% at 50% 87%,color-mix(in srgb,var(--ink) 10%,transparent),transparent 75%),repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 160px),repeating-linear-gradient(0deg,var(--rule) 0 1px,transparent 1px 160px);background-position:50%;-webkit-mask-image:radial-gradient(ellipse 34% 42% at 50% 86%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 34% 42% at 50% 86%,#000 30%,transparent 100%)}.room .slab{position:absolute;left:50%;bottom:var(--base);width:var(--slab-w);margin-left:calc(var(--slab-w) / -2);aspect-ratio:var(--slab-ratio);display:block;transform-style:preserve-3d;transform-origin:50% 100%;transition:transform var(--t-enter) var(--ease),opacity var(--t-enter) var(--ease)}.room .slab:before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:var(--rule);transform-origin:50% 0;transform:rotateX(-90deg)}.room .slab:after{content:"";position:absolute;left:-8%;right:-8%;bottom:0;height:120px;transform-origin:50% 100%;transform:rotateX(90deg);background:radial-gradient(ellipse 50% 40% at 50% 100%,color-mix(in srgb,var(--ground) 90%,transparent),transparent 70%);pointer-events:none}.room .slab-face{position:absolute;inset:0;display:block;overflow:hidden;background:var(--surface);border-radius:3px;box-shadow:0 0 0 1px var(--rule)}.room .slab-phone{display:none}.room .slab-shade{position:absolute;inset:0;border-radius:3px;background:var(--ground);opacity:0;pointer-events:none;transition:opacity var(--t-enter) var(--ease)}.room .slab[data-slot=front]{z-index:3;transform:translateZ(0)}.room .slab[data-slot=right]{transform:translate3d(560px,0,-620px) rotateY(-24deg)}.room .slab[data-slot=left]{transform:translate3d(-560px,0,-620px) rotateY(24deg)}.room .slab:is([data-slot=right],[data-slot=left]) .slab-shade{opacity:.55}.room .slab[data-slot=hidden]{opacity:0;pointer-events:none}@media (hover:hover) and (pointer:fine){.room .slab:not([data-slot=front]):hover .slab-shade{opacity:.3}}.room .slab:focus-visible{outline:none}.room .slab:focus-visible .slab-face{outline:2px solid var(--ink);outline-offset:6px}.room .hero-caption{justify-content:space-between;gap:24px}.room .hero-caption,.room .hero-now{display:flex;align-items:center;min-height:44px}.room .hero-now{gap:16px;min-width:0}.room .hero-now-index{color:var(--muted)}.room .hero-now-name{color:var(--ink)}.room .hero-now-kind{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.room .hero-now-open{display:inline-flex;gap:8px;margin-inline-start:8px;color:var(--ink);white-space:nowrap;border-bottom:1px solid var(--rule);transition:border-color var(--t-state) var(--ease)}.room .hero-now:focus-visible .hero-now-open,.room .hero-now:hover .hero-now-open{border-color:var(--ink)}.room .hero-meta{display:flex;gap:1.4em;margin:0;color:var(--muted);white-space:nowrap}.room .hero-meta-name{color:var(--ink)}@keyframes hero-rise{0%{opacity:0;transform:translateY(24px)}}@media (max-aspect-ratio:6/5),(max-width:767px){.room .hero{--slab-w:54vw;--slab-ratio:9/16;--base:18px;padding-top:18px}.room .hero-scene{flex:none;height:calc(54vw * 16 / 9 + 48px);min-height:0;margin-top:18px;perspective:900px;perspective-origin:50% 40%}.room .slab-desk{display:none}.room .slab-phone{display:block}.room .slab-face,.room .slab-shade{border-radius:14px}.room .slab[data-slot=front]{transform:translate3d(-22%,0,0)}.room .slab[data-slot=right]{transform:translate3d(36%,0,-280px) rotateY(-20deg)}.room .slab[data-slot=left]{opacity:0;pointer-events:none;transform:translateZ(-700px)}.room .hero-caption{flex-wrap:wrap}.room .hero-now-kind{display:none}.room .hero-now{flex:1;gap:10px}.room .hero-now-open{margin-inline-start:auto}.room .hero-meta{flex-basis:100%;display:grid;grid-template-columns:1fr auto;gap:2px 12px}.room .hero-meta-place{grid-column:2;grid-row:1}.room .hero-meta-role{grid-column:1/-1}.room .hero-sentence{flex-direction:column;gap:10px;margin:14px 0 28px}}@media (min-width:768px) and (max-aspect-ratio:6/5){.room .hero{--slab-w:36vw;padding-top:32px}.room .hero-scene{height:calc(36vw * 16 / 9 + 56px);margin-top:28px}.room .hero-sentence{max-width:60ch;margin-bottom:40px}.room .hero-caption{margin-top:12px}.room .hero-meta{flex-basis:100%;display:flex;gap:1.4em}}.room .shop{display:none}@media (min-width:768px) and (min-aspect-ratio:121/100){.room .hero{display:block;height:auto;min-height:0;overflow:visible;padding:0}.room .hero>:not(.shop){display:none}.room .shop{display:block;position:relative;height:calc(100svh - 56px + 120svh)}.room .shop-sticky{position:sticky;top:56px;height:calc(100svh - 56px);min-height:560px;overflow:hidden;container-type:size;background:var(--ground)}.room .shop-sticky>*{--fw:max(100cqw,100cqh * 16/9);--stone:calc(0.39 * var(--fw) + (100cqw - var(--fw)) / 2)}.room .shop-frame{position:absolute;width:var(--fw);aspect-ratio:16/9;left:calc((100cqw - var(--fw)) / 2);top:calc((100cqh - var(--fw) * 9 / 16) / 2);transform-origin:78.57% 47.2%;will-change:transform}.room .shop-screen{position:absolute;overflow:hidden;border-radius:.6%/1%;background:var(--ground)}.room .shop-shot{opacity:0;transition:opacity var(--t-enter) var(--ease)}.room .shop-shot[data-on]{opacity:1}.room .shop-opening{position:absolute;left:45.4%;right:3.4%;top:0;bottom:10.6%;overflow:hidden}.room .shop-shutter{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 7%,color-mix(in srgb,var(--ink) 4%,transparent) 9% 13%,transparent 16% 23%,color-mix(in srgb,var(--ground) 30%,transparent) 26% 31%,transparent 34% 41%),linear-gradient(160deg,color-mix(in srgb,var(--ink) 9%,transparent) 0,transparent 38%,transparent 70%,color-mix(in srgb,var(--ground) 45%,transparent) 100%),linear-gradient(90deg,color-mix(in srgb,var(--ground) 70%,transparent),transparent 14%,transparent 86%,color-mix(in srgb,var(--ground) 70%,transparent)),repeating-linear-gradient(180deg,color-mix(in srgb,var(--ink) 26%,var(--surface)) 0 1px,color-mix(in srgb,var(--ink) 9%,var(--surface)) 1px 6px,var(--surface) 6px 13px,color-mix(in srgb,var(--ground) 55%,var(--surface)) 13px 19px,var(--ground) 19px 21px);box-shadow:inset 0 -1px 0 var(--rule)}.room .shop-shutter:after{content:"";position:absolute;left:2%;right:2%;bottom:-14px;height:14px;background:radial-gradient(ellipse 50% 100% at 50% 0,color-mix(in srgb,var(--ink) 28%,transparent),transparent 80%);pointer-events:none}.room .shop-shutter-bar{position:absolute;left:0;right:0;bottom:0;height:26px;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 22%,var(--surface)),var(--surface) 30%,var(--ground) 85%,color-mix(in srgb,var(--ink) 30%,var(--ground)));border-top:1px solid var(--rule)}.room .shop-shutter-handle{position:absolute;left:50%;top:7px;width:64px;height:10px;margin-left:-32px;border-radius:5px;background:var(--ground);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 20%,transparent),0 0 0 1px var(--rule)}.room .shop-box{position:absolute;left:44.6%;right:2.6%;top:0;height:3.2%;background:linear-gradient(180deg,var(--ground),var(--surface));border-bottom:1px solid var(--rule)}.room .shop-who{top:22px;left:0;gap:1.4em;margin:0;color:var(--muted);text-shadow:0 0 12px var(--ground),0 0 4px var(--ground)}.room .shop-copy,.room .shop-who{position:absolute;z-index:2;display:flex}.room .shop-copy{top:15cqh;left:var(--margin);width:calc(var(--stone) - var(--margin) - 48px);bottom:64px;flex-direction:column;justify-content:space-between;pointer-events:none}.room .shop-line{margin:0;font-size:min(var(--step-display),(var(--stone) - var(--margin) - 48px)/5.15);max-width:6.2em;line-height:1;color:var(--ink)}.room .shop-sentence{max-width:520px;margin:0;color:var(--muted);pointer-events:auto}.room .shop-foot{position:absolute;z-index:2;left:var(--margin);bottom:14px;width:calc(var(--stone) - var(--margin) - 48px);justify-items:start;display:grid;min-height:44px;align-items:center}.room .shop-hint,.room .shop-now{grid-area:1/1;display:flex;align-items:center;gap:16px;min-height:44px}.room .shop-hint{color:var(--ink)}.room .shop-hint .arrow{animation:shop-nudge 1.6s var(--ease) infinite}.room .shop-now{opacity:0;justify-self:start}}@keyframes shop-nudge{0%,to{transform:none}50%{transform:translateY(4px)}}@media (min-width:768px) and (min-aspect-ratio:121/100) and (prefers-reduced-motion:reduce){.room .shop{height:calc(100svh - 56px)}.room .shop-shutter{transform:translateY(-101%)!important}}:root[dir=rtl] .room :is(.hero,.shop) .arrow:not(.down){scale:-1 1}@media (min-width:768px) and (min-aspect-ratio:121/100){:root[dir=rtl] .room .shop-copy{text-align:start}:root[dir=rtl] .room .shop-sentence{margin-inline-start:0}:root[dir=rtl] .room .shop-who{direction:rtl}}