/* Final homepage proportions. Loaded before first paint. */
.brand-symbol{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;width:42px!important;height:42px!important;flex-basis:42px!important}.brand-symbol:after{display:none}.brand-symbol img{display:block;width:100%;height:100%}.brand-wordmark{font-size:22px;letter-spacing:1px}.brand-caption{font-size:6px;letter-spacing:1.5px}.hero>.eyebrow{font-size:9px;letter-spacing:2.6px;opacity:.65}.hero h1{font-weight:500;letter-spacing:-.6px;line-height:1.4;margin:22px 0 14px}.hero #modeHint{font-size:14px;letter-spacing:.3px;margin:0}.hero .orb{position:relative;isolation:isolate;overflow:visible}.hero .capture-mode-help{font-size:12px!important;letter-spacing:1px;line-height:1.5;margin:14px auto 0!important}.hero .capture-mode{margin-top:23px}.hero .capture-mode button{font-size:14px}.hero .core{position:relative;z-index:3}
@media(max-width:600px){.shell{padding:0 22px}header{padding:18px 0 17px;gap:10px}.brand{gap:9px!important}.brand-symbol{width:36px!important;height:36px!important;flex-basis:36px!important}.brand-wordmark{font-size:19px;gap:5px}.brand-caption{font-size:5.5px;letter-spacing:1.15px}.space-header-actions{gap:5px}.space-header-actions button{font-size:12px;padding:8px;min-height:40px}.space-header-actions .space-avatar{width:38px;height:38px;min-height:38px}.hero{padding-top:28px!important;min-height:calc(100svh - 76px);padding-bottom:42px!important}.hero>.eyebrow{font-size:8px;letter-spacing:2px}.hero h1{font-size:clamp(25px,6.7vw,30px);margin:23px 0 17px;white-space:nowrap}.hero #modeHint{font-size:13px;letter-spacing:.1px}.hero .orb{width:184px;height:184px;margin-top:clamp(48px,9svh,86px)!important;margin-bottom:22px!important}.hero .core{width:136px;height:136px;min-height:136px;flex-shrink:0}.hero .core svg{width:34px;height:34px}.hero .capture-mode{width:min(290px,100%);padding:4px;margin-top:23px}.hero .capture-mode button{font-size:13px;min-height:42px;padding:8px 13px}.hero .capture-mode-help{font-size:12px!important}.workspace{margin-top:20px}}
@media(max-width:360px){.shell{padding:0 16px}.hero h1{font-size:24px}.brand-wordmark{font-size:17px}.space-header-actions button{font-size:11px}.hero>.eyebrow{letter-spacing:1.3px}}
/* The little speaker is decorative; all taps still reach the recording button. */
.orb-friend{position:absolute;width:60px;height:68px;left:calc(50% - 30px);top:calc(50% - 34px);pointer-events:none;z-index:1;visibility:hidden;filter:drop-shadow(0 5px 6px #0008)}.orb-friend svg{width:100%;height:100%;overflow:visible}.orb-friend .friend-eyes{transform-origin:30px 29px}.orb-friend .friend-foot{transform-box:fill-box;transform-origin:center}.orb-friend.walking .friend-foot{animation:friend-step .38s ease-in-out infinite alternate}.orb-friend.walking .friend-foot.right{animation-delay:-.38s}@keyframes friend-step{to{transform:translateY(-3px) rotate(12deg)}}
@media(prefers-reduced-motion:reduce){.orb-friend{display:none!important}}

body:has(.preview-button) .hero{min-height:0;padding:0!important}body:has(.preview-button) .orb{margin-top:65px!important;margin-bottom:45px!important}

header .old{display:none!important}
/* Mobile hierarchy and spacing, v2. Orb materials and animations untouched. */
@media(max-width:600px){
.shell{padding-left:22px;padding-right:22px}
.shell>header{padding-top:16px;padding-bottom:16px;flex-wrap:nowrap;align-items:center}
.brand{align-items:center;flex-wrap:nowrap}
.brand-wordmark{font-size:20px;line-height:1.15}
.brand-caption{font-size:6px;letter-spacing:1.2px}
.space-header-actions>button{font-size:13px}
.shell .hero{padding-top:32px!important;padding-bottom:52px!important;min-height:calc(100svh - 72px)}
.shell .hero>.eyebrow{font-size:8px;letter-spacing:1.7px;line-height:1.5}
.shell .hero h1{font-size:clamp(27px,7.5vw,32px);font-weight:500;line-height:1.35;letter-spacing:-.5px;margin:20px 0 14px}
.shell .hero #modeHint{font-size:15px;line-height:1.6;letter-spacing:0;margin:0}
.shell .hero .orb{margin-top:48px!important;margin-bottom:12px!important}
.shell .hero .capture-mode-help{font-size:14px!important;line-height:1.5;letter-spacing:.5px;margin:0 auto!important}
.shell .hero .capture-mode{width:min(314px,100%);margin-top:20px;padding:4px;gap:4px}
.shell .hero .capture-mode button{flex:1;min-width:0;min-height:48px;padding:10px 8px;font-size:15px;line-height:1.4;white-space:nowrap}
}
@media(max-width:360px){.shell{padding-left:16px;padding-right:16px}.shell .hero h1{font-size:26px}.shell .hero #modeHint{font-size:14px}.brand-wordmark{font-size:18px}.space-header-actions>button{font-size:12px}.shell .hero .capture-mode button{font-size:14px}}
@media(max-width:600px) and (max-height:690px){.shell .hero{padding-top:24px!important}.shell .hero .orb{margin-top:34px!important}}
/* Distribute the first-screen space across content, not below the controls. */
@media(max-width:600px){
.shell .hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(26px,1fr) 216px minmax(18px,.65fr) auto 22px auto;align-content:stretch;justify-items:center;min-height:calc(100svh - 72px);padding:clamp(28px,5svh,48px) 0 clamp(36px,7svh,62px)!important}
.shell .hero>.eyebrow{grid-row:1;font-size:9px;letter-spacing:1.8px}
.shell .hero h1{grid-row:2;font-size:clamp(28px,7.7vw,34px);margin:22px 0 17px;line-height:1.4}
.shell .hero #modeHint{grid-row:3;font-size:16px;line-height:1.6;margin:0}
.shell .hero .orb{grid-row:5;width:216px;height:216px;margin:0!important;align-self:center}
.shell .hero .core{width:160px;height:160px;min-height:160px}
.shell .hero .core svg{width:38px;height:38px}
.shell .hero .capture-mode-help{grid-row:7;margin:0!important;font-size:15px!important;line-height:1.6}
.shell .hero .capture-mode{grid-row:9;width:min(330px,100%);margin:0;padding:5px}
.shell .hero .capture-mode button{font-size:16px;min-height:50px}
.shell .hero #homeCapture:not([hidden]){grid-row:1/-1;width:100%;align-self:start}
}
@media(max-width:360px){.shell .hero h1{font-size:27px}.shell .hero #modeHint{font-size:14px}.shell .hero .capture-mode button{font-size:15px}}
@media(max-width:600px) and (max-height:690px){.shell .hero{padding-top:24px!important;padding-bottom:30px!important;grid-template-rows:auto auto auto minmax(20px,1fr) 184px minmax(12px,.65fr) auto 18px auto}.shell .hero h1{margin-top:16px;margin-bottom:12px}.shell .hero .orb{width:184px;height:184px}.shell .hero .core{width:144px;height:144px;min-height:144px}}