/* One composition for the home, portfolio and reading views. */
.studio{--studio-edge:max(6vw,calc((100vw - 1120px)/2));--studio-title:"Songti SC","STSong","SimSun",serif;--studio-gold:#edc78f;--studio-line:#b5c8e529;--studio-soft:#a7b4c7;--paper:#f4f7fb;--reading-ink:#203248;--reading-muted:#52637a;--leaf:#365d87;--paper-line:#263d561f}
.studio.reading-dark{--paper:#0b1423;--reading-ink:#eef3fa;--reading-muted:#a7b4c7;--leaf:#b6d2ef;--paper-line:#b5c8e529}
.studio button,.studio a{-webkit-tap-highlight-color:transparent}
.studio button{cursor:pointer}
.studio a:focus-visible,.studio button:focus-visible{outline:2px solid var(--studio-gold);outline-offset:5px}
.studio .site-header{padding:26px var(--studio-edge);gap:22px;z-index:30}
.studio .site-header .brand{font-size:21px;gap:12px;letter-spacing:1px}
.studio .site-header .brand-icon{width:38px;height:38px}
.studio .brand-note{font-size:11px;line-height:1.6;letter-spacing:1px;color:#a7b4c7;margin-top:3px}
.studio .site-header .glass-nav{--tab-width:68px;margin-right:0;padding:5px;border-color:#c9d8f023;box-shadow:inset 0 1px 0 #ffffff0c;background:#0b142366}
.studio .site-header .glass-nav>a{font-size:12px}
.studio .nav-indicator{left:5px;top:5px;bottom:5px;box-shadow:inset 0 1px 0 #ffffff15;border-color:#ffffff1c}
.studio .site-header .header-actions{gap:10px;position:relative}
.studio .site-header .header-actions>.icon-button{border:0;background:transparent;color:#d3ddeb}
.studio .site-header .header-actions>.icon-button:hover{background:#dbe8ff10;color:var(--studio-gold)}
.studio .site-tools[hidden]{display:none}
.studio .site-tools{position:absolute;top:58px;right:0;width:288px;max-width:calc(100vw - 32px);padding:16px;background:var(--paper);border:1px solid var(--paper-line);border-radius:16px;color:var(--reading-ink);box-shadow:0 18px 60px #0006}
.studio .tools-heading{display:flex;align-items:center;justify-content:space-between;padding:0 2px 12px 12px;font-size:14px}
.studio .tools-close{width:44px;min-height:44px;display:grid;place-items:center;background:none;color:var(--reading-muted);border-radius:7px}
.studio .tools-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.studio .tools-actions{display:grid;gap:3px}
.studio .site-header .tools-actions button{width:100%;height:auto;min-height:46px;min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:var(--reading-ink);font-size:13px;letter-spacing:0}
.studio .site-header .tools-actions button span{display:inline}
.studio .site-header .tools-actions button:hover{background:#829ab51c}
.studio .tools-actions svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.4}
.studio .animation-settings{padding:17px 0 0;margin-top:12px;border-top:1px solid var(--paper-line)}
.studio .tools-label{display:block;font-size:12px;color:var(--reading-muted);margin:0 12px 8px}
.studio .speed-control{justify-content:space-between;gap:6px;padding:0 8px}
.studio .speed-control .control-label{display:none}
.studio .speed{flex:1;min-height:44px;border-radius:7px;background:transparent;color:var(--reading-muted);font-size:12px}
.studio .speed.selected{background:#8ea5c025;color:var(--reading-ink)}
.studio .tools-secondary{display:flex;gap:8px;justify-content:space-between;margin:9px 8px 0}
.studio .tools-secondary button{display:flex;align-items:center;gap:7px;min-height:44px;padding:0 6px;font-size:11px;letter-spacing:0;color:var(--reading-muted);background:none;white-space:nowrap}
.studio .tools-secondary svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3}
.studio.inside-blog .site-tools .animation-settings,.studio.inside-blog .site-tools #immersive,.studio.inside-blog .site-tools #about{display:none}
.studio:not(.view-immersive).landscape-mode.blog-home .universe{height:100svh;min-height:780px}
.studio:not(.view-immersive) .hero-copy{left:var(--studio-edge);top:26%;max-width:480px;right:auto}
.studio .hero-copy .hello-note{display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.8;letter-spacing:1px;margin:0 0 27px;color:#e1cda9}
.studio .intro-line{display:block;width:27px;height:1px;background:currentColor;opacity:.65}
.studio .hero-copy h1{font-family:var(--studio-title);font-size:clamp(54px,5.3vw,80px);line-height:1.34;letter-spacing:2px;font-weight:400;color:#f4f2ed;text-shadow:0 2px 30px #02071466;margin:0 0 28px}
.studio .hero-intro{font-size:15px;font-weight:400;line-height:2.05;color:#c1cddd;margin:0 0 32px;letter-spacing:.3px}
.studio .hero-links{display:flex;align-items:center;gap:25px;pointer-events:auto}
.studio.landscape-mode .hero-primary{min-height:48px;padding:11px 19px;border-radius:7px;border-color:#edc78f;background:#edc78f;color:#162336;gap:19px;font-size:13px;font-weight:500;letter-spacing:.5px;transition:background .2s,transform .2s}
.studio.landscape-mode .hero-primary:hover{background:#f2d5aa;transform:translateY(-2px)}
.studio .hero-secondary{font-size:13px;color:#c6d2e3;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.studio .hero-secondary:hover{color:#fff;border-bottom-color:#d9e7fb70}
.studio:not(.view-immersive).bunny-mode.landscape-mode.blog-home .scene{width:min(65vw,900px);left:64%;top:56%}
.studio .studio-hero-bottom{left:var(--studio-edge);right:var(--studio-edge);bottom:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.studio .scroll-invitation{min-height:44px;display:flex;gap:20px;align-items:center;font-size:12px;letter-spacing:1px;color:#a7b4c7;text-decoration:none;transition:color .2s}
.studio .scroll-invitation:hover{color:#f0d4ab}
.studio .scroll-invitation svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3}
.studio .studio-player{display:flex;align-items:center;gap:12px}
.studio .studio-player .play-button{width:44px;height:44px;min-width:44px;border:1px solid #c9d8f03b;border-radius:50%;background:#e6efff08;color:#dde7f5;box-shadow:none}
.studio .studio-player .play-button:hover{background:#e6efff18}
.studio .player-caption{display:block;font-size:10px;line-height:1.8;letter-spacing:1px;color:#8292a8}
.studio .bottom-note{font-size:11px!important;letter-spacing:.5px;color:#bcc8d9;margin:2px 0 0;text-shadow:none}
.studio .bottom-note .status-dot{width:4px;height:4px;margin-right:7px;background:#b8d7cd;box-shadow:none}
.studio .cosmic-photo-credit{font-size:8px;bottom:13px;opacity:.7}
.studio.landscape-mode .blog-content,.studio.landscape-mode.inside-blog .blog-content{border:0;border-radius:0;background:#f4f7fbe8;margin:0;--reading-ink:#203248;--reading-muted:#52637a;--leaf:#365d87;--paper-line:#263d561f}
.studio.landscape-mode.reading-dark .blog-content{background:linear-gradient(#08111fe0,#0a1423f0);--reading-ink:#eef3fa;--reading-muted:#a7b4c7;--leaf:#b6d2ef;--paper-line:#b5c8e529}
.studio .reading-shell,.studio.landscape-mode .reading-shell{width:min(calc(100% - var(--studio-edge)*2),1120px);max-width:1120px;padding:100px 0;margin:0 auto}
.studio .studio-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:35px}
.studio .studio-section-heading h2{font-family:var(--studio-title);font-size:40px;line-height:1.4;font-weight:400;letter-spacing:1px;margin:0 0 10px}
.studio .studio-section-heading p{font-size:14px;line-height:1.9;color:var(--reading-muted);margin:0}
.studio .quiet-link{font-size:13px;line-height:1.8;gap:12px;flex-shrink:0}
.studio .quiet-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}
.studio .featured-project{display:grid;grid-template-columns:1.12fr 1fr;gap:60px;align-items:center;padding:0 0 42px;border-bottom:1px solid var(--paper-line)}
.studio .featured-project+.featured-project{margin-top:50px}
.studio .featured-project-image{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:1.2;background:#080e19;box-shadow:0 14px 45px #0002}
.studio .featured-project-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.studio .featured-project-image:hover img{transform:scale(1.035)}
.studio .project-availability{display:flex;gap:9px;align-items:center;font-size:12px;color:var(--reading-muted);margin-bottom:20px}
.studio .project-availability:before{content:"";width:5px;height:5px;border-radius:50%;background:#86b4a5}
.studio .featured-project-copy h3{font-size:32px;line-height:1.45;letter-spacing:1px;font-weight:500;margin:0 0 18px}
.studio .featured-project-copy>p{font-size:15px;line-height:2;color:var(--reading-muted);margin:0 0 26px;max-width:380px}
.studio .project-tags{gap:7px;margin:0 0 25px}
.studio .project-tags span{font-size:11px;line-height:1.8;padding:5px 10px;border:1px solid var(--paper-line);border-radius:5px;background:transparent;color:var(--reading-muted)}
.studio .featured-project-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.studio .project-detail-link{min-height:44px;display:inline-flex;gap:18px;align-items:center;text-decoration:none;font-size:14px;color:var(--reading-ink);border-bottom:1px solid #a9b9d04d}
.studio .project-detail-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .2s}
.studio .project-detail-link:hover svg{transform:translateX(4px)}
.studio .featured-project-actions button{min-height:44px;background:none;color:var(--leaf);font-size:13px;padding:0 5px}
.studio .studio-project-note{display:flex;justify-content:space-between;gap:20px;margin:20px 0 0;color:var(--reading-muted);font-size:12px;line-height:1.8}
.studio .studio-notes{margin-top:106px}
.studio .sample-note{font-size:12px;color:var(--reading-muted);line-height:1.9;margin:0 0 20px;opacity:.8}
.studio .essay-row{display:block;border-top:1px solid var(--paper-line);border-bottom:0;padding:0;margin:0}
.studio .essay-row:last-child{border-bottom:1px solid var(--paper-line)}
.studio .essay-entry{display:grid;grid-template-columns:90px minmax(0,1fr) 30px;gap:26px;align-items:start;padding:31px 0;text-decoration:none;color:inherit}
.studio .essay-date{font-size:13px;line-height:1.8;color:var(--reading-muted);padding-top:3px;font-variant-numeric:tabular-nums}
.studio .essay-copy .post-meta{font-size:11px;gap:12px;color:var(--reading-muted);line-height:1.8;margin-bottom:10px}
.studio .essay-copy h3{font-size:23px;font-weight:500;line-height:1.55;letter-spacing:.4px;margin:0 0 11px;transition:color .2s}
.studio .essay-copy p{max-width:670px;font-size:14px;line-height:1.9;color:var(--reading-muted);margin:0}
.studio .essay-entry:hover h3{color:var(--leaf)}
.studio .essay-arrow{padding-top:28px;color:var(--reading-muted)}
.studio .essay-arrow svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .2s}
.studio .essay-entry:hover .essay-arrow svg{transform:translate(3px,-3px)}
.studio .all-essays{margin-top:27px;font-size:13px;padding:0;min-height:44px}
.studio .creative-signature{border:0;border-top:1px solid var(--paper-line);border-radius:0;background:transparent;color:var(--reading-ink);margin:110px 0 0;padding:55px 0 0;grid-template-columns:1.1fr 1fr;gap:80px}
.studio .signature-copy>p:first-child{font-size:12px;color:var(--reading-muted);margin-bottom:19px}
.studio .signature-copy h2{font-family:var(--studio-title);font-size:35px;line-height:1.55;font-weight:400;letter-spacing:1px;margin-bottom:18px}
.studio .signature-copy>p{font-size:14px;line-height:1.9;color:var(--reading-muted)}
.studio .signature-link{font-size:13px;color:var(--leaf)}
.studio .type-art{--orbit-radius:112px;--type-bg:var(--paper);height:330px;opacity:.8}
.studio .type-orbit{color:var(--reading-ink)}
.studio .art-controls{gap:18px;margin-top:14px}
.studio .art-control{padding:0;border:0;background:none;color:var(--reading-muted);font-size:11px;border-radius:0;gap:7px}
.studio .art-control:hover{color:var(--leaf);background:none}
.studio.landscape-mode .site-footer{background:#f4f7fbe8;max-width:none;padding:28px var(--studio-edge) 35px;margin:0;border-radius:0;border-top:1px solid var(--paper-line);gap:15px;row-gap:14px;color:var(--reading-ink)}
.studio.landscape-mode.reading-dark .site-footer{background:#0a1423f0;color:var(--reading-ink)}
.studio .site-footer>a:first-child{font-size:13px;font-weight:500;letter-spacing:.5px}
.studio .site-footer>p{font-size:12px;color:var(--reading-muted)}
.studio .site-footer>span,.studio .footer-photo-credit{font-size:10px;color:var(--reading-muted);line-height:1.8}
.studio .footer-photo-credit{opacity:.65}
.studio.inside-blog .site-header{position:sticky;top:0;background:var(--paper);border-color:var(--paper-line);box-shadow:0 1px 0 var(--paper-line)}
.studio .inner-shell,.studio.landscape-mode .inner-shell{padding-top:70px;padding-bottom:100px}
.studio .page-heading{margin-bottom:44px}
.studio .page-heading h1{font-family:var(--studio-title);font-size:46px;font-weight:400;letter-spacing:1px;line-height:1.4;margin:14px 0 18px}
.studio .page-heading p{font-size:15px;line-height:1.9;color:var(--reading-muted)}
.studio .page-heading>p:first-child{font-size:12px}
.studio .blog-columns{display:block}
.studio .blog-sidebar{display:none}
.studio .category-filters{gap:8px;margin-bottom:23px;padding-bottom:22px;border-bottom:1px solid var(--paper-line)}
.studio .category-filters a{font-size:13px;padding:0 16px;border-radius:7px}
.studio .category-filters a[aria-current],.studio .category-filters a:hover{background:#91a7c31a}
.studio .article-shell,.studio.landscape-mode .article-shell{width:min(calc(100% - var(--studio-edge)*2),800px);max-width:800px}
.studio .article-heading h1{font-family:var(--studio-title);font-size:42px;line-height:1.5;font-weight:400;letter-spacing:1px;margin:24px 0}
.studio .article-heading>p{font-size:17px;line-height:1.9}
.studio .article-prose{max-width:700px;font-size:18px;line-height:2;letter-spacing:.3px}
.studio .article-prose p{margin:30px 0}
.studio .article-cover{margin:22px 0 12px;aspect-ratio:1.8;border-radius:10px}
.studio .code-example{margin:32px 0}
.studio .code-example pre{border-radius:10px;padding:24px;font-size:13px;line-height:1.85}
.studio .reading-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:100;background:#b6d2ef;transform-origin:left center;pointer-events:none}
.studio .reading-progress[hidden]{display:none}
.studio .project-gallery{border-radius:14px}
.studio .project-count,.studio .project-instruction,.studio .project-caption{font-size:12px;line-height:1.8}
.studio .about-layout{grid-template-columns:.9fr 1.1fr;gap:70px}
.studio .about-prose h2{font-family:var(--studio-title);font-size:30px;font-weight:400;line-height:1.5}
.studio .about-prose p{font-size:16px;line-height:2}
.studio .about-visual .type-art{height:360px}
.studio .project-page-layout{gap:60px}
.studio .project-page-prose p{font-size:16px;line-height:1.95}
.studio.view-immersive .studio-hero-bottom{display:none}
@media(min-width:1700px){.studio:not(.view-immersive).bunny-mode.landscape-mode.blog-home .scene{left:62%;width:930px}}
@media(max-width:1100px){.studio .site-header{gap:15px}.studio .site-header .glass-nav{--tab-width:62px}.studio .brand-note{font-size:10px}.studio:not(.view-immersive) .hero-copy{max-width:390px}.studio .hero-copy h1{font-size:60px}.studio:not(.view-immersive).bunny-mode.landscape-mode.blog-home .scene{width:76vw;left:64%;top:57%}.studio .featured-project{gap:38px}.studio .featured-project-copy h3{font-size:28px}.studio .creative-signature{gap:35px}.studio .type-art{--orbit-radius:96px}}
@media(max-width:900px){.studio{--studio-edge:40px}.studio .site-header{flex-wrap:wrap;row-gap:15px}.studio .site-header .glass-nav{order:3;margin:0 auto;--tab-width:72px}.studio .site-header .header-actions{margin-left:auto}.studio:not(.view-immersive).landscape-mode.blog-home .universe{height:1000px;min-height:1000px}.studio:not(.view-immersive) .hero-copy{top:210px;max-width:440px}.studio .hero-copy h1{font-size:62px}.studio:not(.view-immersive).bunny-mode.landscape-mode.blog-home .scene{width:92vw;left:54%;top:68%}.studio .featured-project{gap:30px}.studio .featured-project-copy>p{font-size:14px}.studio .studio-project-note{font-size:11px}.studio .reading-shell,.studio.landscape-mode .reading-shell{padding:76px 0}.studio .studio-notes{margin-top:80px}.studio .creative-signature{margin-top:80px}.studio .signature-copy h2{font-size:30px}.studio .type-art{--orbit-radius:88px;height:290px}.studio .about-layout{gap:35px}}
@media(max-width:700px){.studio{--studio-edge:24px}.studio .site-header{padding:20px 24px 12px;gap:12px}.studio .site-header .brand{font-size:19px;gap:9px}.studio .site-header .brand-icon{width:32px;height:32px}.studio .brand-note{display:none}.studio .site-header .header-actions{gap:3px}.studio .site-header .header-actions>.icon-button{width:44px;height:44px}.studio .site-header .glass-nav{--tab-width:calc((100vw - 48px - 56px)/4);width:100%;max-width:none;margin-top:1px;grid-template-columns:repeat(4,var(--tab-width)) 44px;padding:5px}.studio .site-header .glass-nav>a{font-size:13px;gap:0}.studio .site-header .glass-nav>a svg{display:none}.studio .site-header .glass-nav .theme-toggle{min-width:44px}.studio .site-tools{top:52px;right:0}.studio:not(.view-immersive).landscape-mode.blog-home .universe{height:980px;min-height:980px}.studio:not(.view-immersive) .hero-copy{top:184px;max-width:calc(100% - 48px);width:calc(100% - 48px)}.studio .hero-copy .hello-note{font-size:12px;margin-bottom:20px}.studio .hero-copy h1{font-size:51px;line-height:1.35;letter-spacing:1px;margin-bottom:22px}.studio .hero-intro{font-size:13px;line-height:1.95;margin-bottom:23px}.studio .hero-links{gap:20px}.studio.landscape-mode .hero-primary{font-size:12px;gap:15px;min-height:46px;padding:10px 15px}.studio .hero-secondary{font-size:12px}.studio:not(.view-immersive).bunny-mode.landscape-mode.blog-home .scene{width:125vw;left:44%;top:68%}.studio .studio-hero-bottom{bottom:61px;gap:12px}.studio .scroll-invitation{font-size:10px;gap:8px;letter-spacing:0}.studio .studio-player{gap:8px}.studio .player-caption{display:none}.studio .bottom-note{font-size:9px!important;letter-spacing:0}.studio .studio-player .play-button{width:44px;height:44px;min-width:44px}.studio .cosmic-photo-credit{font-size:7px;bottom:12px}.studio .reading-shell,.studio.landscape-mode .reading-shell{width:calc(100% - 48px);padding:62px 0}.studio .studio-section-heading{gap:18px;align-items:flex-start;margin-bottom:25px}.studio .studio-section-heading h2{font-size:31px;margin-bottom:10px}.studio .studio-section-heading p{font-size:12px;line-height:1.9}.studio .studio-section-heading .quiet-link{font-size:11px;padding-top:2px}.studio .featured-project{display:block;padding-bottom:30px}.studio .featured-project-image{aspect-ratio:1.22;border-radius:11px}.studio .featured-project-copy{padding-top:25px}.studio .project-availability{font-size:11px;margin-bottom:12px}.studio .featured-project-copy h3{font-size:28px;margin-bottom:15px}.studio .featured-project-copy>p{font-size:14px;margin-bottom:20px}.studio .project-tags{margin-bottom:19px}.studio .featured-project-actions{gap:25px}.studio .studio-project-note{display:block;font-size:11px;margin-top:17px}.studio .studio-project-note span{display:block}.studio .studio-project-note a{min-height:44px;display:inline-flex;align-items:center}.studio .studio-notes{margin-top:65px}.studio .essay-entry{grid-template-columns:1fr 22px;gap:13px;padding:25px 0}.studio .essay-date{display:none}.studio .essay-copy .post-meta{font-size:10px;gap:12px;margin-bottom:10px}.studio .essay-copy h3{font-size:20px;line-height:1.6;margin-bottom:11px}.studio .essay-copy p{font-size:13px;line-height:1.9}.studio .essay-arrow{padding-top:35px}.studio .essay-arrow svg{width:18px;height:18px}.studio .sample-note{font-size:11px;line-height:1.8}.studio .all-essays{font-size:12px;margin-top:20px}.studio .creative-signature{display:grid;grid-template-columns:1fr;gap:8px;margin-top:65px;padding-top:38px}.studio .signature-copy h2{font-size:30px}.studio .signature-copy>p{font-size:13px}.studio .type-art{--orbit-radius:95px;height:270px}.studio .signature-copy>p:first-child{font-size:11px}.studio .art-controls{gap:18px;margin-top:9px}.studio .art-control{font-size:10px}.studio.landscape-mode .site-footer{padding:25px 24px 30px;display:flex;flex-wrap:wrap;column-gap:20px;row-gap:8px}.studio .site-footer>p{margin:0;font-size:11px}.studio .site-footer>span{margin-left:0;flex-basis:100%;font-size:9px}.studio .footer-photo-credit{font-size:8px;margin-top:6px}.studio .inner-shell,.studio.landscape-mode .inner-shell{padding-top:43px;padding-bottom:62px}.studio .page-heading h1{font-size:35px;margin-top:12px}.studio .page-heading p{font-size:13px}.studio .page-heading>p:first-child{font-size:11px}.studio .page-heading{margin-bottom:30px}.studio .category-filters{gap:2px;padding-bottom:16px;flex-wrap:wrap;justify-content:flex-start}.studio .category-filters a{font-size:11px;padding:0 12px}.studio .article-shell,.studio.landscape-mode .article-shell{width:calc(100% - 48px)}.studio .article-heading h1{font-size:31px;line-height:1.5;margin:18px 0}.studio .article-heading>p{font-size:15px}.studio .article-prose{font-size:17px;line-height:2}.studio .article-cover{border-radius:8px}.studio .about-layout{display:flex;flex-direction:column-reverse;gap:20px}.studio .about-prose h2{font-size:27px}.studio .about-prose p{font-size:15px}.studio .about-visual{width:100%}.studio .about-visual .type-art{height:300px}.studio .project-page-layout{gap:25px}.studio .project-page-prose p{font-size:15px}.studio .code-example pre{padding:17px;font-size:12px}}
@media(max-width:360px){.studio .hero-copy h1{font-size:47px}.studio .hero-links{gap:15px}.studio .scroll-invitation{font-size:9px}.studio .studio-player{gap:6px}.studio .bottom-note{font-size:8px!important}.studio .featured-project-copy h3{font-size:26px}}
@media(prefers-reduced-motion:reduce){.studio .hero-primary,.studio .featured-project-image img,.studio .essay-arrow svg,.studio .project-detail-link svg{transition:none}.studio.landscape-mode .hero-primary:hover,.studio .featured-project-image:hover img,.studio .essay-entry:hover .essay-arrow svg,.studio .project-detail-link:hover svg{transform:none}}
/* Keep immersive mode a complete, keyboard-clean canvas. */
.studio.view-immersive{overflow:hidden}
.studio.view-immersive.landscape-mode.blog-home .universe{height:100svh;min-height:0}
.studio.view-immersive .site-footer{display:none}
.studio.view-immersive .hero-copy,.studio.view-immersive .cat-note{visibility:hidden}
.studio.view-immersive.bunny-mode.landscape-mode .scene{width:min(100vw,1100px);left:38%;top:50%}
@media(max-width:700px){.studio:not(.view-immersive).bunny-mode.landscape-mode.blog-home .scene{left:38%}.studio.view-immersive.bunny-mode.landscape-mode .scene{width:124vw;left:30%;top:51%}}
/* Reading-theme contrast also applies to the sticky navigation. */
.studio.inside-blog:not(.reading-dark) .site-header{color:#203248;background:#f4f7fb}
.studio.inside-blog:not(.reading-dark) .brand-note{color:#52637a}
.studio.inside-blog:not(.reading-dark) .brand-icon{color:#92703d}
.studio.inside-blog:not(.reading-dark) .site-header .header-actions>.icon-button{color:#52637a;background:transparent}
.studio.inside-blog:not(.reading-dark) .site-header .glass-nav{background:#e7edf57d;border-color:#314d6c25}
.studio.inside-blog:not(.reading-dark) .site-header .glass-nav>a{color:#52637a}
.studio.inside-blog:not(.reading-dark) .site-header .glass-nav>a[aria-current]{color:#203248}
.studio.inside-blog:not(.reading-dark) .theme-toggle{color:#52637a}

/* Navigation is a single, interruptible camera move; the header stays anchored. */
.studio.route-transitioning{overflow-x:clip}
.studio.route-transitioning>main{transform-origin:50% 25vh}
.studio .route-trace{position:fixed;inset:0 0 auto;height:2px;z-index:80;overflow:hidden;pointer-events:none}
.studio .route-trace[hidden]{display:none}
.studio .route-trace>span{display:block;width:32%;height:100%;background:linear-gradient(90deg,transparent,#b6d2ef 48%,#edc78f 64%,transparent);transform:translateX(-100%);opacity:0}
.studio .navigation-cover{position:fixed;z-index:40;object-fit:cover;transform-origin:0 0;border-radius:14px;pointer-events:none;will-change:transform;max-width:none;box-shadow:0 18px 48px #0003}
@media(max-width:700px){.studio .navigation-cover{border-radius:11px}}
@media(prefers-reduced-motion:reduce){.studio .route-trace,.studio .navigation-cover{display:none}}
html.route-transitioning{overflow-x:clip}

/* A finite three-dimensional flight. The header remains interactive. */
.studio.route-transitioning>main{transform-origin:50% 47vh}
.studio.route-transitioning .site-header{z-index:70}
.studio .route-warp{position:fixed;inset:0;z-index:50;overflow:hidden;pointer-events:none;contain:strict}
.studio .route-warp[hidden]{display:none}
.studio .warp-veil{position:absolute;inset:0;background:#020714;opacity:0;will-change:opacity}
.studio .warp-flight-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;will-change:opacity}
.studio .warp-flight-canvas[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.studio .route-warp{display:none}}

/* Quiet secondary destinations, gathered behind one navigation entry. */
.studio .more-button{display:flex;align-items:center;gap:6px;height:44px;background:transparent;border:0;color:#d3ddeb;font:inherit;font-size:12px;padding:0 5px;white-space:nowrap}
.studio .more-button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
.studio .more-button[aria-expanded=true]{color:var(--studio-gold)}
.studio .more-menu[hidden]{display:none}
.studio .more-menu{position:absolute;right:48px;top:58px;width:320px;max-width:calc(100vw - 40px);padding:10px 18px;background:var(--paper);color:var(--reading-ink);border:1px solid var(--paper-line);border-radius:16px;box-shadow:0 20px 60px #0005;z-index:75}
.studio .more-menu>a{display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:12px 4px;border-bottom:1px solid var(--paper-line);font-size:14px}
.studio .more-menu>a:last-child{border-bottom:0}.studio .more-menu>a:hover{color:var(--leaf)}
.studio .more-menu small{display:block;color:var(--reading-muted);font-size:11px;margin-top:5px}.studio .more-menu svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2}
.studio.inside-blog:not(.reading-dark) .more-button{color:#52637a}
.studio .footer-extras{display:flex;flex-wrap:wrap;gap:20px;font-size:11px;color:#a7b4c7}.studio .footer-extras a{min-height:44px;display:inline-flex;align-items:center}
.studio .extras-shell{min-height:calc(100svh - 260px)}
.studio .tag-index{display:flex;flex-wrap:wrap;gap:0 36px;padding:10px 0 35px;margin-bottom:24px;border-bottom:1px solid var(--paper-line)}
.studio .tag-index a{display:flex;align-items:baseline;gap:12px;min-height:56px;font-size:20px;color:var(--reading-muted);padding:10px 0;border-bottom:1px solid transparent}
.studio .tag-index a[aria-current]{color:var(--reading-ink);border-bottom-color:var(--leaf)}.studio .tag-index a:hover{color:var(--leaf)}.studio .tag-index span{font-size:11px;opacity:.65}
.studio .article-tags{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0}.studio .article-tags a{font-size:12px;border-bottom:1px solid var(--paper-line);padding:8px 0;color:var(--leaf)}
.studio .album-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:55px 40px;align-items:start}.studio .album-item{margin:0}.studio .album-item:first-child{grid-row:span 2;position:sticky;top:130px}
.studio .album-photo{display:block;width:100%;padding:0;background:#101722;border:0;border-radius:12px;overflow:hidden;position:relative;cursor:zoom-in;aspect-ratio:1.12}
.studio .album-item:first-child .album-photo{aspect-ratio:.88}.studio .album-photo img{display:block;width:100%;height:100%;object-fit:cover}
.studio .photo-turned{transform:rotate(180deg)}
.studio .album-photo>span{position:absolute;bottom:16px;right:16px;display:flex;align-items:center;gap:7px;padding:9px 13px;background:#081321b8;color:#eef3fa;font-size:11px;border-radius:6px}
.studio .album-photo svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.studio .album-item figcaption{padding:20px 0 0}.studio .album-item h2{font-family:var(--studio-title);font-size:26px;font-weight:400;margin:0 0 10px}.studio .album-item p{font-size:13px;color:var(--reading-muted);line-height:1.8;margin:0}
.studio .album-source{font-size:11px;color:var(--reading-muted);margin:40px 0 0}
.studio .photo-lightbox{position:fixed;inset:0;width:100vw;height:100svh;max-width:none;max-height:none;border:0;border-radius:0;padding:45px 6vw 26px;background:#030814f5;color:#eef3fa;overflow:hidden;margin:0;box-sizing:border-box}
.studio .photo-lightbox::backdrop{background:#020714ed}.studio .photo-lightbox .lightbox-close{position:absolute;right:24px;top:15px;background:none;color:#eef3fa;border:0;width:44px;height:44px;font-size:32px;z-index:1}
.studio .lightbox-picture{height:calc(100% - 96px);display:grid;place-items:center;pointer-events:none}.studio .lightbox-picture>.album-image{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden;pointer-events:none}
.studio .lightbox-bottom{height:96px;display:flex;align-items:center;justify-content:space-between;max-width:800px;margin:auto;gap:25px}.studio .lightbox-bottom button{width:48px;height:48px;background:#d5e4ff0b;border:1px solid #d5e4ff2b;border-radius:50%;color:#d5e4ff;font-size:22px}.studio .lightbox-bottom>div{text-align:center}.studio .lightbox-title{font-size:15px;margin:0 0 6px}.studio .lightbox-count{font-size:11px;color:#a7b4c7}
.studio .friends-empty{padding:40px 0 65px;border-bottom:1px solid var(--paper-line)}.studio .friends-empty>svg{width:64px;height:64px;color:var(--leaf);margin-bottom:20px}.studio .friends-empty h2,.studio .subscribe-copy h2{font-family:var(--studio-title);font-size:34px;font-weight:400;line-height:1.5;margin:0 0 20px}.studio .friends-empty p{font-size:15px;line-height:2;color:var(--reading-muted);margin:0 0 25px}
.studio .site-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:25px;padding:40px 0}.studio .site-card h2{font-size:12px;font-weight:400;color:var(--reading-muted);margin:0 0 15px}.studio .site-card p{font-size:21px;margin:0 0 10px}.studio .site-card span{font-size:13px;color:var(--reading-muted)}.studio .site-card>.extras-status{flex-basis:100%;font-size:12px;margin:0}
.studio .subscribe-layout{display:grid;grid-template-columns:190px 1fr;gap:60px;padding:40px 0;max-width:900px}.studio .rss-mark{width:120px;height:120px;border:1px solid var(--paper-line);border-radius:24px;display:grid;place-items:center;color:var(--leaf)}.studio .rss-mark svg{width:64px;height:64px;fill:currentColor}
.studio .subscribe-copy>p{font-size:15px;line-height:2;color:var(--reading-muted);margin:0 0 30px}.studio .subscribe-copy label{display:block;font-size:12px;color:var(--reading-muted);margin-bottom:12px}.studio .feed-address{display:flex;align-items:center;gap:15px;border-bottom:1px solid var(--paper-line);padding-bottom:10px}.studio .feed-address input{width:100%;min-width:0;background:none;border:0;color:var(--reading-ink);font:13px ui-monospace,monospace;line-height:2}.studio .feed-address button{flex-shrink:0;min-height:44px}.studio .subscribe-actions{display:flex;align-items:center;gap:25px;margin-top:30px}.studio .subscribe-copy .subscribe-note{font-size:12px;margin-top:30px;line-height:1.9}.studio .extras-status{color:var(--leaf);font-size:12px;min-height:20px}
.studio .comments-section{max-width:780px;margin-top:50px;padding-top:35px;border-top:1px solid var(--paper-line)}.studio .extras-shell>.comments-section{margin-top:0;padding-top:0;border-top:0}.studio .comments-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.studio .comments-heading h2{font-family:var(--studio-title);font-weight:400;font-size:29px;line-height:1.6;margin:0}.studio .comments-heading button{min-height:44px}.studio .comments-status{font-size:12px;color:var(--reading-muted);line-height:1.9;min-height:24px;margin:15px 0 25px}.studio .comments-empty{padding:15px 0 40px;color:var(--reading-muted);font-size:15px;line-height:2}
.studio .comment-item{display:flex;gap:18px;padding:25px 0;border-top:1px solid var(--paper-line)}.studio .comment-avatar{flex:0 0 38px;height:38px;display:grid;place-items:center;border:1px solid var(--paper-line);border-radius:50%;color:var(--leaf);font-family:var(--studio-title);font-size:18px}.studio .comment-copy{min-width:0;flex:1}.studio .comment-copy header{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.studio .comment-copy strong{font-weight:500;font-size:14px}.studio .comment-copy time{font-size:11px;color:var(--reading-muted)}.studio .comment-copy header button{font-size:11px;margin-left:auto;min-height:28px}.studio .comment-copy p{font-size:15px;line-height:1.95;margin:12px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.studio .comments-auth{padding:20px 0;color:var(--reading-muted);font-size:14px}.studio .comments-auth p{margin:0 0 20px}.studio .comment-form{margin-top:30px}.studio .comment-form label{display:block;font-size:13px;margin:0 0 10px}.studio .comment-form input,.studio .comment-form textarea{display:block;border:1px solid var(--paper-line);border-radius:8px;background:#7d95b509;color:var(--reading-ink);font:inherit;font-size:15px;line-height:1.8;padding:13px 16px;width:100%;box-sizing:border-box}.studio .comment-name-field{max-width:280px;margin-bottom:22px}.studio .comment-form textarea{resize:vertical;min-height:140px;max-height:500px}.studio .comment-form input:focus-visible,.studio .comment-form textarea:focus-visible{outline:2px solid var(--leaf);outline-offset:3px}.studio .comment-form-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px}.studio .comment-form-footer>span{font-size:11px;color:var(--reading-muted)}.studio button:disabled{cursor:wait;opacity:.55}.studio .comment-form[hidden],.studio .comments-auth[hidden]{display:none}
@media(max-width:700px){.studio .more-button{font-size:11px;gap:2px}.studio .more-button svg{width:12px;height:12px}.studio .site-header .header-actions{gap:5px}.studio .more-menu{right:0;top:49px;width:290px;padding:6px 16px}.studio .more-menu>a{min-height:61px;font-size:13px}.studio .more-menu small{font-size:10px}.studio .footer-extras{width:100%;gap:23px;order:3}.studio .footer-extras a{min-height:36px}.studio .tag-index{gap:0 25px;padding-bottom:23px}.studio .tag-index a{font-size:17px;min-height:48px}.studio .album-grid{grid-template-columns:1fr;gap:35px}.studio .album-item:first-child{grid-row:auto;position:static}.studio .album-item:first-child .album-photo{aspect-ratio:1.12}.studio .album-item h2{font-size:24px}.studio .album-item p{font-size:12px}.studio .photo-lightbox{padding:65px 18px 20px}.studio .lightbox-bottom{gap:14px}.studio .lightbox-title{font-size:13px}.studio .friends-empty{padding:15px 0 40px}.studio .friends-empty h2,.studio .subscribe-copy h2{font-size:27px}.studio .friends-empty p{font-size:13px}.studio .site-card{padding:30px 0;gap:20px}.studio .site-card span{font-size:12px}.studio .subscribe-layout{grid-template-columns:1fr;gap:30px;padding:10px 0}.studio .rss-mark{width:80px;height:80px;border-radius:16px}.studio .rss-mark svg{width:45px;height:45px}.studio .subscribe-copy>p{font-size:14px}.studio .feed-address{gap:10px}.studio .feed-address input{font-size:11px}.studio .subscribe-actions{gap:20px}.studio .comments-heading h2{font-size:25px}.studio .comments-heading button{font-size:11px}.studio .comments-status{font-size:11px}.studio .comment-item{gap:12px;padding:20px 0}.studio .comment-avatar{flex-basis:32px;height:32px;font-size:16px}.studio .comment-copy header{gap:6px 10px}.studio .comment-copy strong{font-size:13px}.studio .comment-copy time{font-size:10px}.studio .comment-copy p{font-size:14px}.studio .comment-form-footer{align-items:flex-start;gap:15px}.studio .comment-form-footer>span{font-size:10px;line-height:1.8;max-width:135px}.studio .comment-form .read-button{font-size:12px;min-height:44px}}
.studio .cursor-fish{position:fixed;inset:0;z-index:25;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 180ms ease;contain:strict}.studio .cursor-fish.is-visible{opacity:.92}.studio .cursor-fish-item{position:absolute;left:0;top:0;width:52px;height:28px;transform-origin:center;will-change:transform}.studio .cursor-fish-item svg{display:block;width:100%;height:100%;overflow:visible}.studio .fish-tail{transform-box:fill-box;transform-origin:100% 50%}.studio .is-swimming .fish-tail{animation:fish-tail 230ms ease-in-out infinite alternate}@keyframes fish-tail{from{transform:scaleY(.55)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.studio .cursor-fish{display:none}}
/* The selected reference: a large center photo with muted previews on both sides. */
.studio .album-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;color:var(--reading-muted);margin-bottom:20px}
.studio .album-carousel{position:relative;height:560px;outline-offset:6px;touch-action:pan-y;user-select:none;cursor:grab}.studio .album-carousel.is-dragging{cursor:grabbing}.studio .carousel-window{position:absolute;inset:0;overflow:clip;border-radius:12px}.studio .photo-slide{position:absolute;top:0;left:50%;width:72%;height:100%;border-radius:12px;overflow:hidden;background:#050c17;box-shadow:inset 0 0 0 1px #b5c8e51a;transform-origin:50% 50%;will-change:transform}.studio .photo-slide>.album-image{display:block;width:100%;height:100%;pointer-events:none;overflow:hidden}.studio .slide-shade{position:absolute;inset:0;background:#050c17;opacity:.65;pointer-events:none}.studio .carousel-select{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:inherit}.studio .carousel-select:focus-visible{outline:2px solid #edc78f;outline-offset:-4px}.studio .carousel-zoom{position:absolute;left:24px;bottom:22px;display:flex;align-items:center;gap:9px;min-height:44px;background:#081321c2;color:#eef3fa;border:1px solid #d7e8ff3d;border-radius:6px;font-size:12px;padding:9px 13px;cursor:zoom-in}.studio .carousel-zoom[hidden]{display:none}.studio .carousel-zoom svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}.studio .carousel-arrow{position:absolute;top:calc(50% - 24px);z-index:20;width:52px;height:48px;border:1px solid #b5c8e54d;border-radius:8px;background:#eff4f9e6;color:#1b2a3d;font-size:23px;box-shadow:0 8px 24px #02071433}.studio .carousel-prev{left:15px}.studio .carousel-next{right:15px}.studio .carousel-caption{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:28px}.studio .carousel-caption h2{font-family:var(--studio-title);font-size:29px;font-weight:400;line-height:1.5;margin:0 0 10px}.studio .carousel-caption p{font-size:13px;color:var(--reading-muted);line-height:1.9;margin:0}.studio .carousel-dots{display:flex;gap:0;flex-shrink:0}.studio .carousel-dots button{width:34px;height:44px;background:none;border:0;position:relative}.studio .carousel-dots button:after{content:'';position:absolute;left:13px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--reading-muted);opacity:.4}.studio .carousel-dots button[aria-pressed=true]:after{background:var(--leaf);opacity:1;transform:scale(1.35)}
@media(max-width:700px){.studio .album-carousel{height:400px}.studio .photo-slide{width:84%}.studio .album-toolbar{font-size:10px;gap:10px;margin-bottom:17px}.studio .carousel-arrow{width:44px;height:44px;font-size:20px}.studio .carousel-prev{left:-10px}.studio .carousel-next{right:-10px}.studio .carousel-zoom{left:14px;bottom:15px;font-size:11px;padding:8px 11px}.studio .carousel-caption{gap:10px;margin-top:23px;align-items:flex-start}.studio .carousel-caption h2{font-size:23px;margin-bottom:8px}.studio .carousel-caption p{font-size:12px}.studio .carousel-dots button{width:24px}.studio .carousel-dots button:after{left:9px;width:5px;height:5px}}

/* The approved simple grooming mascot. Real readiness controls the initial screen. */
.studio .grooming-loader{background:#07101b;color:#e7c99c}.studio .grooming-art{width:230px;height:230px;display:grid;place-items:center}.studio .grooming-art .grooming-cat{width:100%;height:100%;display:block}.studio .grooming-loader>.loading-wordmark{position:absolute;top:13vh;color:#e7c99c;font-size:15px;letter-spacing:2px}.studio .grooming-loader>p{font-size:12px;letter-spacing:1px;color:#e7c99c;margin:28px 0 18px}.studio .grooming-progress{width:145px;height:3px;background:#edc78f25;overflow:hidden;border-radius:4px}.studio .grooming-progress>span{display:block;width:45%;height:100%;background:#edc78f;border-radius:4px;animation:groom-progress 1.6s ease-in-out infinite}.studio .grooming-loader[hidden] .grooming-progress>span,.studio.effects-sleep .grooming-progress>span{animation-play-state:paused}@keyframes groom-progress{0%{transform:translateX(-105%)}100%{transform:translateX(330%)}}.studio .grooming-intro{background:#07101b;border-color:#b5c8e52b;padding:52px 35px 35px;max-width:420px}.studio .grooming-intro h2{font-family:var(--studio-title);font-size:24px;color:#edc78f;font-weight:400}.studio .grooming-intro .grooming-art{width:240px;height:240px;margin:10px auto}.studio .grooming-intro>p{font-size:12px;letter-spacing:1px;color:#a7b4c7}.studio .grooming-intro:not([open]) .grooming-cat *{animation-play-state:paused}@media(max-width:700px){.studio .grooming-art{width:210px;height:210px}.studio .grooming-loader>.loading-wordmark{font-size:13px}.studio .grooming-loader>p{font-size:11px}.studio .grooming-intro{padding:50px 20px 30px}.studio .grooming-intro .grooming-art{width:220px;height:220px}}@media(prefers-reduced-motion:reduce){.studio .grooming-progress>span{animation:none;width:60%}}

/* A real photograph and quieter lettering make the personal identity feel human. */
.studio .site-header .brand{gap:11px;letter-spacing:0}.studio .brand-avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;overflow:hidden;display:block;border:1px solid #c7d7ec35;background:#172335}.studio .brand-avatar img{display:block;width:100%;height:100%;object-fit:cover;object-position:42% 43%;transform:scale(1.8);transform-origin:43% 43%}.studio .brand-copy{display:block}.studio .brand-name{display:block;font-family:var(--studio-title);font-size:25px;line-height:1.15;font-weight:400;letter-spacing:2px}.studio .brand-note{font-size:10px;line-height:1.5;letter-spacing:.5px;margin-top:5px;color:#9daec3}.studio.inside-blog:not(.reading-dark) .brand-note{color:#64768b}@media(max-width:700px){.studio .brand-avatar{width:32px;height:32px;flex-basis:32px}.studio .brand-name{font-size:22px}.studio .brand-note{display:none}.studio .site-header .brand{gap:9px}}
/* Projection prologue, inspired by the requested projection-map reference. */
.studio.opening-active{overflow:hidden}.studio .opening-dialog{position:fixed;inset:0;width:100vw;height:100svh;max-width:none;max-height:none;border:0;border-radius:0;padding:0;margin:0;overflow:hidden;background:#03070d;color:#ecf1f8;box-sizing:border-box}.studio .opening-dialog::backdrop{background:transparent}.studio .opening-top{position:absolute;top:34px;left:6vw;right:6vw;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#b8c9dc;z-index:5}.studio .opening-top>span{font-family:var(--studio-title);font-size:20px;letter-spacing:2px}.studio .opening-top button{background:none;color:#8a9db4;border:0;min-height:44px;font-size:11px;display:flex;gap:12px;align-items:center}.studio .opening-copy{position:absolute;top:13vh;left:10vw;z-index:3}.studio .opening-copy>p{font-size:11px;color:#8e9fb5;letter-spacing:1px;margin:0 0 20px}.studio .opening-copy h1{font-family:var(--studio-title);font-size:clamp(36px,4.5vw,66px);font-weight:400;letter-spacing:2px;line-height:1.45;margin:0}.studio .projection-room{position:absolute;inset:0;perspective:1000px;pointer-events:none}.studio .projector{position:absolute;left:43%;top:27%;width:min(44vw,560px);aspect-ratio:1.55;transform-style:preserve-3d;transition:transform 180ms cubic-bezier(.23,1,.32,1);pointer-events:auto}.studio .projection-screen{position:absolute;inset:0;width:100%;height:100%;border:1px solid #c0d6ff4d;padding:0;background:#0a1120;overflow:hidden;box-shadow:0 0 70px #6a9cdd25,0 0 150px #d3b8880a;cursor:pointer}.studio .projection-screen>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 46%;opacity:.94}.studio .projection-glass{position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#d3e4fc16,transparent 45%,#d1b89a09),repeating-linear-gradient(0deg,#01070d00 0 3px,#01070d25 3px 4px)}.studio .projection-label{position:absolute;left:20px;right:20px;bottom:18px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:2px;text-shadow:0 1px 8px #000}.studio .projection-reflection{position:absolute;left:-4%;right:-4%;top:105%;height:70%;overflow:hidden;transform:perspective(450px) rotateX(51deg);transform-origin:50% 0;opacity:.3;mask-image:linear-gradient(#000b,transparent 88%);pointer-events:none}.studio .projection-reflection img{width:100%;height:150%;object-fit:cover;transform:scaleY(-1);transform-origin:50% 38%}.studio .projection-halo{position:absolute;left:28%;top:15%;width:72%;height:68%;background:radial-gradient(ellipse,#365f9630,transparent 62%);opacity:.8}.studio .projection-floor{position:absolute;left:24%;right:0;top:57%;height:40%;transform:perspective(500px) rotateX(65deg);transform-origin:50% 0;background:radial-gradient(circle,#89abd047 .7px,transparent 1px) 0 0/7px 7px;mask-image:radial-gradient(ellipse at 55% 0,#0007,transparent 66%);opacity:.55}.studio .opening-actions{position:absolute;bottom:11vh;left:10vw;display:flex;gap:25px;align-items:center;z-index:4}.studio .opening-enter{display:flex;align-items:center;gap:28px;min-height:48px;padding:13px 22px;background:#e7c596;border:1px solid #f0ddc17d;border-radius:7px;color:#132238;font-size:12px}.studio .opening-enter>span{font-size:18px}.studio .opening-work{min-height:44px;background:none;border:0;color:#9bacc0;font-size:11px;padding:8px 0}.studio .opening-dialog:not([open]){display:none}.studio .opening-dialog button:focus-visible{outline:2px solid #edc78f;outline-offset:6px}
.studio>main{position:relative;z-index:1}.studio .site-footer{position:relative;z-index:1}
@media(max-width:700px){.studio .opening-top{top:20px;left:25px;right:25px}.studio .opening-top>span{font-size:16px}.studio .opening-copy{top:17vh;left:28px;right:28px;text-align:center}.studio .opening-copy>p{font-size:10px;margin-bottom:15px}.studio .opening-copy h1{font-size:37px;line-height:1.4}.studio .projector{left:12%;top:40%;width:76%;aspect-ratio:1.45}.studio .projection-reflection{height:55%}.studio .projection-floor{left:-15%;right:-15%;top:65%;height:28%}.studio .projection-halo{left:0;top:30%;width:100%;height:45%}.studio .projection-label{font-size:9px;left:13px;right:13px;bottom:12px}.studio .opening-actions{left:0;right:0;bottom:9vh;flex-direction:column;gap:7px}.studio .opening-enter{min-height:46px;font-size:11px;padding:12px 22px;gap:30px}.studio .opening-work{font-size:10px;min-height:40px}}
@media(prefers-reduced-motion:reduce){.studio .projector{transition:none}}

.studio .projection-scan{position:absolute;inset:0;height:30%;pointer-events:none;background:linear-gradient(transparent,#c3dafa12,transparent);transform:translateY(-120%);animation:projection-scan 6s linear infinite}.studio .opening-dialog:not([open]) .projection-scan,.studio.effects-sleep .projection-scan{animation-play-state:paused}@keyframes projection-scan{to{transform:translateY(430%)}}@media(prefers-reduced-motion:reduce){.studio .projection-scan{animation:none;display:none}}

/* Live projection: the same moving texture lights both the screen and the dotted floor. */
.studio .projector.projection-live{top:18%;aspect-ratio:1.03;transition:none}.studio .projection-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.studio .projection-live .projection-screen{background:transparent;border:0;box-shadow:none}.studio .projection-live .projection-screen>img,.studio .projection-live .projection-glass,.studio .projection-live .projection-scan,.studio .projection-live .projection-reflection{display:none}.studio .projection-live .projection-label{top:51%;bottom:auto;left:20%;right:20%;font-size:10px;color:#fff8e9;opacity:.82}.studio .projection-room:has(.projection-live)>.projection-floor{display:none}.studio .projection-room:has(.projection-live)>.projection-halo{opacity:.25}@media(max-width:700px){.studio .projector.projection-live{top:34%;aspect-ratio:1.03}.studio .projection-live .projection-label{font-size:8px;top:51%}}

/* Scroll journey: projection room → a flash of light → galaxy → Earth → home. */
.studio .opening-view{position:absolute;inset:0;opacity:1;pointer-events:none}.studio .opening-view .projector{pointer-events:auto}.studio .opening-dialog[data-stage="1"] .opening-view,.studio .opening-dialog[data-stage="2"] .opening-view{opacity:0;pointer-events:none}.studio .opening-dialog[data-stage="1"] .opening-view .projector,.studio .opening-dialog[data-stage="2"] .opening-view .projector{pointer-events:none}
.studio .opening-copy{top:12vh;left:10%;right:10%;text-align:center}.studio .opening-copy>p{margin-bottom:9px}.studio .opening-copy h1{font-size:clamp(28px,2.8vw,40px);line-height:1.25}.studio .opening-copy h1 br{display:none}.studio .projector.projection-live{left:8%;top:24%;width:84%;max-width:none;aspect-ratio:1.85}.studio .projection-live .projection-label{top:54%;left:13%;right:13%;font-size:10px}
.studio .journey-galaxy,.studio .journey-earth{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden}.studio .journey-galaxy{transform:scale(1.5)}.studio .journey-galaxy>img{width:100%;height:100%;object-fit:cover;filter:saturate(.7);transform:scale(1.05)}.studio .journey-space-shade{position:absolute;inset:0;background:linear-gradient(#02091394,transparent 30%,#03112625 60%,#020710c9),linear-gradient(110deg,#00142b44,#00142b33)}.studio .journey-earth{transform:scale(.18)}.studio .journey-earth-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.studio .journey-earth.earth-fallback:after{content:'';position:absolute;inset:20% 15%;border-radius:50%;background:url('./assets/earth-day.jpg') center/cover;box-shadow:inset -60px -20px 65px #000,0 0 35px #86c7ff66}
.studio .opening-dialog[data-stage="1"] .journey-galaxy{opacity:1;transform:scale(1.04)}.studio .opening-dialog[data-stage="1"] .journey-galaxy>img{animation:journey-drift 20s ease-in-out infinite alternate}.studio .opening-dialog[data-stage="2"] .journey-galaxy{opacity:.18;transform:scale(2.2)}.studio .opening-dialog[data-stage="2"] .journey-earth{opacity:1;transform:scale(1)}
.studio .journey-caption{position:absolute;left:10%;right:10%;top:14vh;text-align:center;pointer-events:none;opacity:0}.studio .journey-caption p{font-family:var(--studio-title);font-size:clamp(30px,4vw,52px);font-weight:400;letter-spacing:3px;margin:0;text-shadow:0 3px 28px #0009}.studio .opening-dialog[data-stage="1"] .journey-caption,.studio .opening-dialog[data-stage="2"] .journey-caption{opacity:1}
.studio .opening-actions{left:0;right:0;bottom:6vh;flex-direction:column;gap:5px}.studio .opening-enter{background:#06111f66;color:#eff6ff;border:1px solid #d7e6f15e;border-radius:100px;padding:10px 23px;min-height:46px;gap:21px;backdrop-filter:blur(8px)}.studio .opening-enter>.journey-action-text{font-size:12px;letter-spacing:1px}.studio .opening-enter:disabled{cursor:default}.studio .opening-work{font-size:10px;min-height:32px;opacity:.65}.studio .opening-dialog[data-stage="1"] .opening-work,.studio .opening-dialog[data-stage="2"] .opening-work{opacity:.8;color:#dce8f4}
.studio .journey-progress{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:7px;pointer-events:none}.studio .journey-progress i{width:20px;height:2px;background:#bdcfdf44}.studio .journey-progress i.is-current{background:#f4e2bf}.studio .journey-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:10}
@keyframes journey-drift{from{transform:scale(1.05) translateX(-1%)}to{transform:scale(1.16) translateX(1%)}}
@media(max-width:700px){.studio .opening-copy{top:13vh;left:22px;right:22px}.studio .opening-copy>p{font-size:9px;margin-bottom:13px}.studio .opening-copy h1{font-size:29px;line-height:1.45}.studio .opening-copy h1 br{display:block}.studio .projector.projection-live{left:0;top:29%;width:100%;aspect-ratio:1.03}.studio .projection-live .projection-label{top:54%;left:13%;right:13%;font-size:8px}.studio .journey-caption{top:16vh}.studio .journey-caption p{font-size:30px}.studio .opening-actions{bottom:8vh;gap:5px}.studio .opening-enter>.journey-action-text{font-size:11px}.studio .journey-progress{bottom:27px}.studio .journey-galaxy>img{object-position:49% 50%}}
@media(prefers-reduced-motion:reduce){.studio .opening-dialog[data-stage="1"] .journey-galaxy>img{animation:none}.studio .opening-enter{backdrop-filter:none}}

.studio .projection-live .projection-label{display:none}

.studio .opening-dialog[data-stage="2"] .journey-caption{top:10vh}@media(max-width:700px){.studio .opening-dialog[data-stage="2"] .journey-caption{top:16vh}}

.studio .journey-world{position:absolute;inset:0;overflow:hidden}.studio .opening-dialog button.opening-enter:focus-visible{outline:1px solid #ead5b2;outline-offset:4px}

/* The galaxy and planet now share one perspective camera; DOM scenes are fallbacks. */
.studio .opening-dialog.journey-live[data-stage="1"] .journey-galaxy,.studio .opening-dialog.journey-live[data-stage="2"] .journey-galaxy{visibility:hidden}.studio .opening-dialog.journey-live[data-stage="1"] .journey-earth,.studio .opening-dialog.journey-live[data-stage="2"] .journey-earth{opacity:1;transform:none}

.studio #universe[tabindex="-1"]:focus{outline:none}

/* A continuous, reversible corridor. The scene stays still when the camera stops. */
.studio .corridor-dialog .journey-earth{opacity:0;transform:none}.studio .corridor-dialog .journey-galaxy{display:none}.studio .corridor-dialog .opening-view{opacity:1}.studio .corridor-dialog .journey-caption{top:20%;left:7%;right:auto;max-width:340px;text-align:left;opacity:0}.studio .corridor-dialog .journey-caption p{font-size:clamp(20px,2.2vw,32px);line-height:1.6;letter-spacing:1px}.studio .corridor-place{display:block;font-size:11px;letter-spacing:3px;color:#d8c19d;margin-bottom:15px}.studio .corridor-dialog .opening-actions{bottom:86px;gap:4px}.studio .corridor-help{font-size:9px;letter-spacing:1px;color:#afbdd1;opacity:.65;margin-top:3px}.studio .corridor-dialog .opening-work{min-height:27px}.studio .corridor-progress{position:absolute;bottom:24px;left:7%;right:7%;pointer-events:none}.studio .corridor-track{height:1px;background:#b8cde42e}.studio .corridor-track i{display:block;height:100%;width:100%;background:#e8d0a8;transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 7px #e4cc9b44}.studio .corridor-stops{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#aab9cd;margin-top:11px}.studio .planet-credit{display:block;font-size:8px;opacity:.7;margin-top:6px}
@media(max-width:700px){.studio .corridor-dialog .journey-caption{top:13%;left:25px;max-width:250px}.studio .corridor-dialog .journey-caption p{font-size:21px}.studio .corridor-place{font-size:9px;margin-bottom:10px}.studio .corridor-dialog .opening-actions{bottom:94px}.studio .corridor-progress{left:25px;right:25px;bottom:25px}.studio .corridor-stops{font-size:8px}.studio .corridor-help{font-size:8px}}

.studio .corridor-dialog{overflow:clip;overscroll-behavior:none}.studio .corridor-dialog .opening-view{overflow:clip}

.studio .corridor-dialog .journey-caption{top:14%}.studio .corridor-dialog .journey-caption p{font-size:clamp(20px,2vw,28px)}@media(max-width:700px){.studio .corridor-dialog .journey-caption{top:13%}.studio .corridor-dialog .journey-caption p{font-size:21px}}

.studio .corridor-help{font-size:10px;line-height:1.6;opacity:.78}.studio .corridor-dialog .opening-enter{transition:background-color 160ms,border-color 160ms}.studio .corridor-dialog .opening-enter:hover{background:#132437c9;border-color:#d9e9fa99}@media(max-width:700px){.studio .corridor-help{font-size:9px}}
.studio .corridor-dialog .journey-caption p{text-wrap:balance;text-shadow:0 2px 8px #01040be6,0 0 24px #01040b99}
.studio .journey-playback{display:flex;align-items:center;justify-content:center;gap:12px;max-width:calc(100vw - 32px)}.studio .journey-auto{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:10px 14px;background:#071321db;color:#c8d8e9;border:1px solid #a4bed054;border-radius:999px;font-size:11px;white-space:nowrap;cursor:pointer}.studio .journey-auto svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4}.studio .journey-auto .auto-pause{display:none}.studio .journey-auto[aria-pressed="true"]{color:#f0d5a7;border-color:#e6c38a88}.studio .journey-auto[aria-pressed="true"] .auto-play{display:none}.studio .journey-auto[aria-pressed="true"] .auto-pause{display:block}.studio .journey-auto:disabled{opacity:.4;cursor:default}.studio .corridor-dialog .opening-enter{backdrop-filter:none;background:#071321db}.studio .corridor-dialog{cursor:grab;user-select:none;touch-action:none}.studio .corridor-dialog.is-dragging{cursor:grabbing}.studio.opening-covered>main,.studio.opening-covered>.site-header,.studio.opening-covered>.site-footer,.studio.opening-covered>.landscape-backdrop{visibility:hidden}.studio.opening-covered .cosmos-image{animation-play-state:paused}@media(max-width:700px){.studio .journey-playback{gap:8px}.studio .corridor-dialog .opening-enter{padding:10px 15px;gap:12px}.studio .journey-auto{padding:10px 12px;gap:6px}}
.studio .hero-replay{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;margin-top:24px;padding:10px 16px;border:1px solid #a6bfd057;border-radius:999px;background:#0c172455;color:#cfdef0;font:inherit;font-size:12px;letter-spacing:.5px;cursor:pointer;pointer-events:auto;transition:background-color 160ms,border-color 160ms}.studio .hero-replay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4}.studio .hero-replay:hover{background:#20344999;border-color:#c3d7ebaa}.studio .hero-replay:focus-visible{outline:2px solid #f0d7a3;outline-offset:5px}.studio .journey-source-credit{position:absolute;right:7%;bottom:68px;max-width:45%;font-size:10px;line-height:1.5;color:#b7c7d9;text-align:right;text-decoration:none;opacity:0;z-index:5}.studio .journey-source-credit:focus-visible{outline:2px solid #e7cea4;outline-offset:4px}@media(max-width:700px){.studio .hero-replay{margin-top:18px;font-size:11px}.studio .journey-source-credit{right:25px;bottom:72px;font-size:9px;max-width:55%}}

/* A circular target follows the globe, beneath the foreground paws. */
.studio .earth-hit{position:absolute;inset:7%;z-index:1;display:block;padding:0;background:transparent;border:0;border-radius:50%;clip-path:circle(50%);pointer-events:auto;cursor:pointer;color:#fff;outline-offset:-3px}.studio .earth-hit:focus-visible{outline:2px solid #f0d29c;background:#f0d29c10}.studio .earth-hit:disabled{pointer-events:none}.studio .earth-hit span{position:absolute;left:50%;top:62%;transform:translate(-50%,3px);white-space:nowrap;background:#081423d9;border:1px solid #b8c9dd55;border-radius:20px;padding:5px 10px;font-size:10px;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s}.studio .earth-hit:hover span,.studio .earth-hit:focus-visible span{opacity:1;transform:translate(-50%,0)}.studio .is-boosted .earth-hit span{color:#f0d29c}

.studio .opening-utilities{display:flex;align-items:center;gap:18px}.studio .music-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:5px 8px;background:transparent;color:#b9c9dc;border:0;border-radius:20px;font-size:11px;white-space:nowrap}.studio .music-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}.studio .music-toggle:hover,.studio .music-toggle.is-playing{color:#f0d3a2}.studio .music-toggle.is-playing svg{animation:music-breathe 1.4s ease-in-out infinite}.studio .site-header .music-toggle span{display:none}.studio .music-settings-link{min-height:44px;background:transparent;color:var(--reading-ink);font-size:13px;text-align:left;padding:10px 12px}.studio .music-dialog{width:min(410px,calc(100vw - 32px));padding:32px;border:1px solid #a5bbd337;border-radius:20px;background:#0d1726;color:#dce7f4;box-shadow:0 24px 90px #0008}.studio .music-dialog::backdrop{background:#020711a8}.studio #closeMusic{position:absolute;right:12px;top:10px;min-width:44px;min-height:44px;background:none;color:#a8bbd0;font-size:24px}.studio .music-eyebrow{font-size:10px;letter-spacing:3px;color:#d8bf99;margin:0 0 20px}.studio .music-dialog h2{font-family:var(--studio-title);font-size:34px;font-weight:400;letter-spacing:2px;margin:0 0 7px}.studio .music-artist{font-size:12px;color:#93a6bd;margin:0 0 24px}.studio #musicStatus{font-size:13px;line-height:1.8;min-height:46px;color:#c7d6e8}.studio .music-panel-actions{display:flex;gap:12px;align-items:center;margin:18px 0}.studio #chooseMusic{min-height:44px;padding:9px 15px;border:1px solid #c9af8055;border-radius:8px;background:#dac09312;color:#e7cc9d;font-size:12px}.studio .music-volume{display:flex;align-items:center;gap:17px;color:#acbdd1;font-size:12px;margin:25px 0}.studio .music-volume input{accent-color:#e7cc9d;flex:1}.studio .music-note{font-size:11px;line-height:1.8;color:#879cb5}.studio .music-dialog>a{display:inline-flex;align-items:center;min-height:44px;font-size:11px;color:#c7ab80;text-decoration:none}@keyframes music-breathe{50%{opacity:.45}}@media(prefers-reduced-motion:reduce){.studio .music-toggle.is-playing svg{animation:none}}@media(max-width:700px){.studio .opening-utilities{gap:8px}.studio .opening-utilities .music-toggle{font-size:10px;padding:5px}.studio .site-header .header-actions{gap:5px}.studio .music-dialog{padding:28px 24px}}

:root:has(#openingDialog[open]),body.opening-active,.studio .corridor-dialog{overscroll-behavior:none}.studio .music-clear{display:inline-flex;align-items:center;min-height:44px;background:none;color:#9bb0c9;font-size:11px;padding:0;margin-right:14px}.studio .music-clear:disabled{opacity:.35;cursor:default}

/* The liquid grows out of the original screen into the same viewport. */
.studio .portal-surface-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none}.studio .portal-surface-canvas[hidden]{display:none}.studio .corridor-dialog .opening-view{z-index:2}.studio .corridor-dialog .journey-caption{z-index:3}.studio .corridor-dialog .journey-source-credit{z-index:3}.studio .corridor-dialog .corridor-progress{z-index:4}.studio .corridor-dialog .opening-copy{pointer-events:none}

/* Keep navigation centered; flex order alone moved it behind the toolbar at 864px. */
.studio .site-header{
 display:grid;
 grid-template-areas:"brand navigation actions";
 grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);
 column-gap:16px;
 align-items:center;
}
.studio .site-header>.brand{grid-area:brand;justify-self:start;min-width:0}
.studio .site-header>.glass-nav{
 grid-area:navigation;justify-self:center;order:0;
 width:max-content;max-width:none;margin:0;
}
.studio .site-header>.header-actions{
 grid-area:actions;justify-self:end;order:0;
 margin:0;flex-wrap:nowrap;
}
@media(min-width:821px) and (max-width:1100px){
 .studio .site-header{column-gap:12px}
 .studio .site-header>.glass-nav{--tab-width:58px}
}
@media(max-width:820px){
 .studio .site-header{
  grid-template-areas:"brand actions" "navigation navigation";
  grid-template-columns:minmax(0,1fr) max-content;
  row-gap:15px;
 }
}
@media(max-width:700px){
 .studio .site-header>.glass-nav{width:100%;margin:0}
}
@media(max-width:360px){
 .studio .site-header{padding-left:16px;padding-right:16px;column-gap:8px}
 .studio .site-header>.header-actions{gap:3px}
 .studio .site-header>.glass-nav{--tab-width:calc((100vw - 32px - 56px)/4)}
}

/* A static aperture avoids backdrop-filter seams where the orbit intersects its
   3D plane. Only the existing letter transform animates; pause/reduced motion
   and front/back letter occlusion remain under the original orbit controls. */
.studio .type-aperture,
.studio .type-aperture:hover{
 backdrop-filter:none;
 -webkit-backdrop-filter:none;
 background:radial-gradient(circle,var(--type-bg) 0 60%,transparent 74%);
 background-size:auto;
 border-color:var(--paper-line);
}
/* Licensing is available with background settings, without a page footer. */
.background-dialog .source-credits{margin-top:22px;padding-top:8px;border-top:1px solid #93a7c530;color:#a8b7ca;font-size:11px;line-height:1.8;text-align:left}
.background-dialog .source-credits>summary{min-height:44px;padding:10px 0;cursor:pointer;color:#d2dceb}
.background-dialog .source-credits .source-credit{display:block;margin:8px 0;color:inherit;overflow-wrap:anywhere;text-underline-offset:3px}
.background-dialog .source-credits a:hover{color:#fff}
.background-dialog .source-credits a:focus-visible,
.background-dialog .source-credits summary:focus-visible{outline:2px solid #d2dceb;outline-offset:4px}

/* Settings live on a reading surface, so header's white cosmic icon colors
   must not override the panel's light/dark states. Scope every state here. */
.studio:not(.reading-dark) .site-header #siteTools button{color:#28394c;background:transparent}
.studio:not(.reading-dark) .site-header #siteTools button:is(:hover,:focus-visible){color:#172e45;background:#e2ecf5}
.studio:not(.reading-dark) .site-header #siteTools button:active{color:#102b43;background:#cfdfed}
.studio:not(.reading-dark) .site-header #siteTools .speed.selected{color:#193c59;background:#d7e6f3}
.studio.reading-dark .site-header #siteTools button{color:#d8e6f4;background:transparent}
.studio.reading-dark .site-header #siteTools button:is(:hover,:focus-visible){color:#f5f9ff;background:#21374c}
.studio.reading-dark .site-header #siteTools button:active{color:#fff;background:#2b4761}
.studio.reading-dark .site-header #siteTools .speed.selected{color:#edf6ff;background:#29435b}
.studio .site-header #siteTools button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.studio .site-header #siteTools button span,
.studio .site-header #siteTools button svg{color:inherit}
.studio .site-header #siteTools button svg{stroke:currentColor}