/* Mobile is a separate composition, not a scaled-down desktop orbit. */
.identity{display:flex;align-items:center;gap:24px;flex-shrink:0}
.owner-lockup{display:flex;align-items:center;gap:8px;padding-left:20px;border-left:1px solid var(--line);font-size:12px;color:var(--muted)}
.owner-lockup img{width:110px;height:auto}
.matto-light{display:none}
[data-theme=dark] .matto-dark{display:none}
[data-theme=dark] .matto-light{display:block}
.footer-owner{display:flex;align-items:center;gap:16px}
.footer-owner img{width:154px;height:auto}
.footer-owner>span{font-size:12px}
.mobile-label,.menu-toggle,.mobile-module-picker,.mobile-image-tools{display:none}
.mobile-menu[hidden]{display:none!important}
.menu-lines{position:relative;width:20px;height:14px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menu-lines::before{content:'';position:absolute;left:0;right:0;top:5px;border-top:2px solid currentColor}
.screen-image{touch-action:pan-y}
.channel-universe.has-seven .channel-node{left:var(--node-x,50%);top:var(--node-y,50%);right:auto;bottom:auto;transform:translate(-50%,-50%)}
.channel-universe.has-seven .channel-node:hover{transform:translate(-50%,calc(-50% - 3px))}
.channel-reference{display:block;margin-top:12px;font-size:12px;text-decoration:underline;text-underline-offset:3px;color:#c6d3bc}
.mobile-menu{background:var(--surface);border-top:1px solid var(--line);box-shadow:0 18px 30px -20px #26332950}
.mobile-menu nav{display:grid;padding-block:12px 24px}
.mobile-menu a,.mobile-menu nav>button{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-bottom:1px solid var(--line);font-size:16px;text-align:left}
.mobile-menu a>span{color:var(--accent)}
.mobile-menu nav>button{font-size:14px;border:0;color:var(--muted)}
#mobileTheme>svg{width:20px;height:20px;flex-shrink:0}
.mobile-menu{max-height:calc(100dvh - 84px);overflow-y:auto}
.channel-reference[hidden]{display:none}
.mobile-image-tools[hidden]{display:none}
.menu-toggle[aria-expanded=true] .menu-lines{border:0}
.menu-toggle[aria-expanded=true] .menu-lines::before{top:6px;transform:rotate(45deg)}
.menu-toggle[aria-expanded=true] .menu-lines::after{content:'';position:absolute;left:0;right:0;top:6px;border-top:2px solid currentColor;transform:rotate(-45deg)}
@media(min-width:851px) and (max-width:1180px){
 .identity{gap:12px}.owner-lockup{padding-left:12px}.owner-lockup img{width:88px}
 .nav-links{gap:16px;font-size:12px}.nav{gap:12px}
}
@media(max-width:1000px) and (min-width:851px){.owner-lockup{display:none}}
@media(max-width:850px){
 html{scroll-padding-top:96px}
 .nav{height:84px;gap:12px}
 .identity{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;flex-shrink:1}
 .owner-lockup{border:0;padding:0;margin-left:2px;gap:7px;font-size:12px;line-height:1}
 .owner-lockup img{width:96px;height:auto}
 .nav .brand{font-size:1.22rem}
 .nav .brand-mark{width:22px;height:22px}
 .nav-right{gap:8px;flex-shrink:0}
 .nav-right>#theme{display:none}
 .nav-cta{white-space:nowrap!important;min-height:44px;padding:10px 15px!important;font-size:14px!important}
 .nav-cta .cta-arrow,.desktop-label{display:none}
 .mobile-label{display:inline}
 .menu-toggle{display:flex!important;width:44px!important;height:44px!important;border:1px solid var(--line)!important;background:var(--surface)}
 .hero{padding-top:32px;gap:0;min-height:0}
 .hero h1{margin-top:20px;font-size:clamp(3.25rem,11.8vw,5.4rem)}
 .hero-actions{margin-block:24px}
 .hero-scene{display:flex;flex-direction:column;aspect-ratio:auto;width:100%;min-height:0;margin-top:20px;padding-top:48px;perspective:none;gap:12px;overflow:visible}
 .hero-sphere{position:absolute;inset:auto 0 auto auto;top:0;width:180px;height:180px;z-index:0;pointer-events:none}
 .hero-window{position:relative;inset:auto;width:100%;transform:none;animation:mobile-window-in .7s var(--ease) both;z-index:2;box-shadow:0 20px 35px -25px #27302755;border-radius:10px;background:var(--surface);isolation:isolate}
 .hero-window img{width:100%;aspect-ratio:1.28;object-fit:cover;object-position:50% 45%;background:var(--surface)}
 .hero-window picture{display:block}
 .window-bar{height:32px;font-size:12px}
 .hero-window-foot{padding:12px;font-size:12px}
 .floating-plan{position:relative;inset:auto;display:flex;justify-content:flex-start;align-self:stretch;border-radius:7px;padding:14px 16px;box-shadow:none;animation:none;transform:none;z-index:2}
 .floating-plan small{display:block}.floating-plan>span:last-child{margin-left:auto}
 .floating-plan strong{font-size:14px}
 .scene-coordinate,.scene-stamp{display:none}
 @keyframes mobile-window-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
 .product-theatre{display:flex;flex-direction:column}
 .module-tabs{display:none!important}
 .mobile-module-picker{display:block;padding:16px 20px;background:var(--soft);order:0}
 .mobile-module-picker label{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-bottom:8px}
 .mobile-module-picker select{width:100%;min-height:50px;border:1px solid var(--line);border-radius:7px;padding:10px 38px 10px 12px;background:var(--surface);font-size:16px;font-weight:700;color:var(--ink)}
 .module-panel{order:2;padding:20px;gap:16px}
 .module-story{display:block}
 .module-story h3{font-size:1.7rem;margin:12px 0 0;max-width:none}
 .module-story>p,.module-story .why-box{display:none}
 .scene-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:16px}
 .scene-option{font-size:12px;min-height:44px;padding:10px 6px;justify-content:center;text-align:center}
 .scene-option .step-no{display:none}
 .tour-controls{order:1;border-top:0;border-bottom:1px solid var(--line);padding:8px 16px;gap:8px;background:var(--surface)}
 .tour-controls .tour-hint{display:none}.tour-controls .tour-progress{min-width:12px}
 .transport{gap:0}.transport .icon-btn{width:44px;min-width:44px}
 .play-button{padding-inline:8px;min-height:44px;font-size:12px}
 .play-button span:last-child{max-width:none;white-space:nowrap}
 .screen-toolbar{flex-wrap:nowrap;gap:8px;align-items:center}
 .screen-toolbar>div:first-child{min-width:0;font-size:12px;line-height:1.4}
 .screen-actions{gap:6px;flex-shrink:0}
 .screen-toolbar .guide-trigger{font-size:12px;padding:8px;min-height:44px}
 .screen-toolbar .icon-btn{min-width:44px;min-height:44px}
 .screen-image{aspect-ratio:1.25;background:var(--soft)}
 .screen-image img{object-fit:contain;transition:transform .45s var(--ease);transform-origin:var(--focus-x,50%) var(--focus-y,50%);}
 .screen-image.mobile-detail img{transform:scale(1.9)}
 .screen-image.changing img{animation:mobile-screen-fade .4s ease}
 @keyframes mobile-screen-fade{from{opacity:.25}to{opacity:1}}
 .mobile-image-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);padding-top:8px}
 .mobile-image-tools button{min-height:44px;border:1px solid var(--line);padding:8px 12px;border-radius:5px;color:var(--ink);white-space:nowrap}
 .mobile-image-tools span{font-size:12px;text-align:right;max-width:150px}
 .context-tray{padding:16px;min-height:0}
 .context-tray strong{font-size:15px}.context-tray p{font-size:14px}
 .guide-spotlight{box-shadow:none}
 .inline-guide,.inline-guide.guide-left{width:100%;position:relative;inset:auto;margin-top:12px;padding:16px;box-shadow:0 6px 20px -12px #0004}
 .inline-guide>p{font-size:14px}
 .guide-controls button{min-height:44px;padding:10px 14px}
 .screen-foot{flex-direction:column;gap:6px}.screen-foot span{max-width:none;font-size:12px}
 .channel-layout{display:flex;flex-direction:column;gap:0;align-items:stretch}
 .channel-copy{display:contents}
 .channel-copy>.eyebrow{order:0}
 .channel-copy>h2{order:1;margin-block:20px;font-size:clamp(2.35rem,8vw,3.2rem)}
 .channel-copy>h2 br{display:initial}
 .channel-copy>p:not(.channel-caveat){order:2;font-size:15px;max-width:45ch}
 .channel-universe{order:3;width:100%;max-width:440px;aspect-ratio:1;min-height:0;margin:28px auto 32px}
 .channel-detail{order:4;margin-top:0;padding:20px;background:#ffffff08;border:1px solid #ffffff1a;border-radius:9px}
 .channel-detail h3{margin:8px 0 12px;font-size:1.55rem}
 .channel-detail p{min-height:0;max-width:none;font-size:14px}
 .channel-copy>.channel-caveat{order:5;margin-top:20px;font-size:12px}
 .channel-node{width:74px;height:68px;gap:5px}.channel-node svg{width:23px;height:23px}.channel-node strong{line-height:1.15}
 .channel-node[data-channel=display],.channel-node[data-channel=video]{left:calc(50% - 37px)}
 .universe-instruction{font-size:12px;bottom:-8%}
 .channel-detail.updated{animation:channel-detail-in .4s ease}
 @keyframes channel-detail-in{from{opacity:.3}to{opacity:1}}
 .footer-owner{flex-direction:column;align-items:flex-start;gap:12px}
 .footer-owner img{width:170px}
 .footer{align-items:flex-start}
 .image-dialog{max-height:calc(100dvh - 24px);width:calc(100% - 24px);padding:12px}
}
@media(max-width:360px){
 .shell{width:calc(100% - 32px)}
 .nav .brand{font-size:1.05rem}.nav .brand-mark{width:19px;height:19px}
 .nav-cta{padding-inline:12px!important;font-size:13px!important}
 .nav{gap:8px}.nav-right{gap:6px}
 .module-panel{padding:14px}.mobile-module-picker{padding:14px}
 .tour-controls{padding-inline:10px;gap:4px}
 .transport .icon-btn{min-width:38px;width:38px}
 .guide-trigger{max-width:98px;white-space:normal;font-size:12px;line-height:1.3}
 .hero h1{font-size:3rem}
 .channel-node{width:66px;height:64px}
 .channel-node[data-channel=display],.channel-node[data-channel=video]{left:calc(50% - 33px)}
}