/* Seven living opal worlds in a single centered composition. */
.quiet-home .system.seven-worlds{width:min(100%,830px);aspect-ratio:830/520;margin:26px auto 25px;overflow:visible;background:transparent;isolation:auto}
.seven-worlds .world{mix-blend-mode:normal;opacity:1;--depth:5}
.seven-worlds .world .world-surface{view-transition-name:none;transform-origin:50% 50%;animation:world-sway var(--sway-period,26s) ease-in-out infinite;animation-delay:var(--sway-phase,0s);--sway-rise:-3px;will-change:transform}
.seven-worlds .jade{--sway-period:28s;--sway-phase:-5s;--sway-angle:.5deg}
.seven-worlds .veil{--sway-period:30s;--sway-phase:-17s;--sway-angle:.8deg}
.seven-worlds .ember{--sway-period:27s;--sway-phase:-9s;--sway-angle:.65deg}
.seven-worlds .pearl{--sway-period:23s;--sway-phase:-14s;--sway-angle:1deg}
.seven-worlds .canopy{--sway-period:29s;--sway-phase:-21s;--sway-angle:.7deg}
.seven-worlds .dune{--sway-period:26s;--sway-phase:-3s;--sway-angle:.8deg}
@keyframes world-sway{0%,100%{transform:translateY(0) rotate(calc(-1 * var(--sway-angle,.7deg)))}50%{transform:translateY(var(--sway-rise)) rotate(var(--sway-angle,.7deg))}}
.paused .seven-worlds .world .world-surface,.seven-worlds.offscreen .world .world-surface,html[data-worlds-visibility="hidden"] .seven-worlds .world .world-surface{animation-play-state:paused}
.seven-worlds .world-surface:after{display:none}
.seven-worlds .world img{clip-path:none;rotate:0deg!important;scale:1!important}
.seven-worlds .world.is-focused .world-surface img{scale:1!important}
.seven-worlds[data-focus] .world{opacity:1;filter:none}
.seven-worlds[data-focus] .world.is-focused{opacity:1;filter:brightness(1.015)}
.seven-worlds .jade{width:29%;left:31%;top:24%;--depth:6}
.seven-worlds .veil{width:19%;left:67%;top:5%;--depth:-5}
.seven-worlds .pearl{width:14%;left:20%;top:6%;--depth:4}
.seven-worlds .canopy{width:20%;left:10%;top:62%;--depth:8}
.seven-worlds .dune{width:18%;left:44%;top:71%;--depth:5}
.seven-worlds .ember{width:15%;left:76%;top:61%;--depth:-7}
.world-optics{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.has-optics .world-optics{opacity:1}
.has-optics>img{opacity:0}
@media(max-width:580px){
 .seven-worlds .world .world-surface{--sway-rise:-2px}
 .quiet-home .system.seven-worlds{aspect-ratio:350/390;margin-top:24px;margin-bottom:26px}
 .seven-worlds .jade{width:40%;left:27%;top:25%}
 .seven-worlds .veil{width:27%;left:69%;top:4%}
 .seven-worlds .pearl{width:22%;left:22%;top:1%}
  .seven-worlds .canopy{width:28%;left:3%;top:60%}
 .seven-worlds .dune{width:26%;left:43%;top:74%}
 .seven-worlds .ember{width:23%;left:76%;top:56%}
}
@media(prefers-reduced-motion:reduce){.has-optics>img{opacity:1}.has-optics .world-optics{display:none}}

/* Preserve the approved artwork exactly, including its original screen compositing. */
.seven-worlds .world.original-world{mix-blend-mode:screen}

@media(prefers-reduced-motion:reduce){.seven-worlds .world .world-surface{animation:none!important;transform:none!important;will-change:auto}}

/* The interaction is within the material, with no marks in the surrounding space. */
.seven-worlds .world .world-surface:after{display:none}
.seven-worlds[data-focus] .world,.seven-worlds[data-focus] .world.is-focused{opacity:1;filter:none}
.seven-worlds .world:focus-visible:before{inset:0;border:1px solid #e2e4cb55}
/* A restrained homepage: one title, one composition, one short introduction. */
.quiet-home .shell{width:calc(100% - 112px);max-width:1120px}
.quiet-home .mast{height:100px}
.quiet-home .brand span{font-size:39px}
.quiet-home .brand img{width:30px;height:36px}
.quiet-home .mast nav{font-size:15px;gap:29px}
.quiet-home .hero{padding:32px 0 80px;text-align:center}
.quiet-home .hero h1{font-size:58px;line-height:1.08;letter-spacing:-.025em}
.quiet-home .system.seven-worlds{width:min(100%,700px);min-width:0;aspect-ratio:830/520;margin:48px auto 48px}
.seven-worlds .world{cursor:default}
.seven-worlds .amber{width:12%;left:4%;top:31%;--depth:-4;--sway-period:27s;--sway-phase:-12s;--sway-angle:.6deg}
.home-intro{max-width:510px;margin:0 auto;text-align:left;color:#b8bbae;font:22px/1.5 var(--serif)}
.home-intro p{margin:0;text-wrap:pretty}.home-intro p+p{margin-top:17px}
.home-colophon{display:block;border:0;background:#20211f;padding:32px 56px 37px}
.colophon-inner{display:flex;align-items:center;justify-content:space-between;max-width:1120px;margin:auto;gap:32px}
.colophon-brand{font:54px/1 var(--serif);letter-spacing:-.035em;color:#deded0}
.colophon-link{font:16px/1.4 var(--serif);color:#aeb2a4;padding:10px 0}
.colophon-link span{font-size:12px;margin-left:15px;opacity:.65}
.colophon-link:hover{color:var(--ink)}
@media(max-width:800px){.quiet-home .shell{width:calc(100% - 64px)}.quiet-home .hero{padding:32px 0 65px}.quiet-home .hero h1{font-size:55px}.quiet-home .system.seven-worlds{width:min(100%,640px);margin:40px auto}.home-colophon{padding:28px 32px 33px}}
@media(max-width:580px){.quiet-home .shell{width:calc(100% - 40px)}.quiet-home .mast{height:84px}.quiet-home .brand span{font-size:32px}.quiet-home .brand img{width:24px;height:31px}.quiet-home .mast nav{font-size:13px;gap:14px}.quiet-home .hero{padding:28px 0 52px}.quiet-home .hero h1{font-size:45px;max-width:290px;line-height:1.02}.quiet-home .system.seven-worlds{width:100%;aspect-ratio:350/390;margin:34px auto 35px}.seven-worlds .amber{width:18%;left:0%;top:25%}.home-intro{max-width:350px;padding:0 5px;font-size:21px;line-height:1.45}.home-intro p+p{margin-top:16px}.home-colophon{padding:27px 24px 30px}.colophon-brand{font-size:45px}.colophon-link{font-size:14px}.colophon-link span{margin-left:8px}.colophon-inner{gap:24px}}
@media(max-width:360px){.quiet-home .mast nav{font-size:12px;gap:10px}.quiet-home .brand span{font-size:29px}.quiet-home .hero h1{font-size:43px}}

/* Keep the homepage atmospheric. The explanation lives on About. */
.quiet-home .hero{min-height:calc(100svh - 100px);padding-bottom:70px}
.quiet-home .system.seven-worlds{margin-bottom:0}
@media(max-width:580px){.quiet-home .hero{min-height:calc(100svh - 84px);padding-bottom:48px}.quiet-home .system.seven-worlds{margin-bottom:0}}

/* One centered view below the navigation, with no lower section. */
.quiet-home{min-height:100svh}
.quiet-home #main{min-height:calc(100svh - 100px);display:flex;align-items:center;justify-content:center}
.quiet-home .hero{min-height:0;padding:30px 0 42px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.quiet-home .system.seven-worlds{width:min(100%,700px,calc((100svh - 280px)*1.596));margin:34px auto 0;flex-shrink:0}
@media(max-width:580px){.quiet-home #main{min-height:calc(100svh - 84px)}.quiet-home .hero{padding:24px 0 32px}.quiet-home .system.seven-worlds{width:min(100%,calc((100svh - 272px)*.8974));margin:28px auto 0}}
@media(max-height:560px){.quiet-home .hero{padding:20px 0 26px}.quiet-home .system.seven-worlds{width:min(100%,430px);margin-top:24px}.quiet-home .hero h1{font-size:44px}}

/* Keep the shells almost still. Depth comes from the viewpoint and interior. */
.seven-worlds .world{transition:none;transform:translate3d(calc(var(--mx)*var(--depth)*1px),calc(var(--my)*var(--depth)*1px),0)}
.seven-worlds .world .world-surface{--sway-rise:-1.2px;--sway-angle:.22deg}
.seven-worlds .jade{--depth:18}
.seven-worlds .canopy{--depth:13}
.seven-worlds .dune{--depth:10}
.seven-worlds .veil{--depth:-8}
.seven-worlds .pearl{--depth:-6}
.seven-worlds .ember{--depth:-5}
.seven-worlds .amber{--depth:-11}
@media(max-width:580px){.seven-worlds .world .world-surface{--sway-rise:-.7px;--sway-angle:.14deg}}
@media(prefers-reduced-motion:reduce){.seven-worlds .world{transform:none!important}}

/* Pointer response stays below a few pixels, even for the nearest world. */
.seven-worlds .jade{--depth:5}
.seven-worlds .canopy{--depth:4}
.seven-worlds .dune{--depth:3}
.seven-worlds .veil{--depth:-2}
.seven-worlds .pearl{--depth:-1.5}
.seven-worlds .ember{--depth:-1.5}
.seven-worlds .amber{--depth:-2.5}

/* A quiet orbital scene around a protected, stationary headline. */
.orbital-home #main{height:calc(100svh - 100px);min-height:460px;display:block}
.orbital-home .hero.shell{width:calc(100% - 96px);max-width:1220px;height:100%;min-height:0;padding:0;display:block;position:relative}
.orbital-home .hero-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:100;pointer-events:none;width:max-content;max-width:60%;}
.orbital-home .hero h1{font-size:58px;line-height:1.04;margin:0;max-width:none;white-space:nowrap}
.orbital-home .system.seven-worlds{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0;max-width:none}
.orbital-home .seven-worlds .world{transition:none}
@media(max-width:800px){.orbital-home .hero.shell{width:calc(100% - 48px)}.orbital-home .hero h1{font-size:49px}}
@media(max-width:580px){.orbital-home #main{height:calc(100svh - 84px);min-height:490px}.orbital-home .hero.shell{width:calc(100% - 24px)}.orbital-home .hero-copy{max-width:62%;width:225px}.orbital-home .hero h1{font-size:43px;white-space:normal;line-height:1.03}.orbital-home .system.seven-worlds{width:100%;height:100%;margin:0}}
@media(max-width:360px){.orbital-home .hero-copy{width:195px}.orbital-home .hero h1{font-size:37px}}
@media(max-height:560px) and (min-width:581px){.orbital-home #main{min-height:360px}.orbital-home .hero h1{font-size:43px}}

/* A true circle, with material motion inside the worlds rather than a shifting ring. */
.orbital-home .seven-worlds .world{transform:none}
.orbital-home .hero h1{font-size:46px}
@media(max-width:800px){.orbital-home .hero h1{font-size:42px}}
@media(max-width:580px){.orbital-home .hero-copy{width:150px}.orbital-home .hero h1{font-size:32px}}
@media(max-width:360px){.orbital-home .hero-copy{width:132px}.orbital-home .hero h1{font-size:28px}}
@media(max-height:560px) and (min-width:581px){.orbital-home .hero h1{font-size:30px}}

/* Orbit on the compositor, with continuous material sway through hover. */
.orbital-home .seven-worlds .world{left:0;top:0;z-index:20}
.seven-worlds .world.is-focused .world-surface{animation-play-state:running}
.paused .seven-worlds .world .world-surface,.seven-worlds.offscreen .world .world-surface,html[data-worlds-visibility="hidden"] .seven-worlds .world .world-surface{animation-play-state:paused}
/* Preserve the static circular layout when reduced motion disables animation. */
@media(prefers-reduced-motion:reduce){.orbital-home .seven-worlds .world{transform:translate3d(var(--orbit-x,0px),var(--orbit-y,0px),0)!important}}