@font-face{font-family:ArchitectsDaughter;src:url('assets/ArchitectsDaughter-Regular.ttf') format('truetype');font-display:swap}
.glass-brand{position:relative;display:block;width:100%;height:100%;container-type:inline-size}
.glass-brand img{position:absolute;width:100%;height:100%;object-fit:contain;pointer-events:none}
.glass-brand .glass-outer{inset:-.4% -2.2%;width:104.4%;height:104.4%}
.glass-brand .glass-inner{inset:5.14%;width:89.72%;height:89.72%}
.glass-lettering{position:absolute;inset:23% 0 auto;text-align:center;color:#03587c;font-family:ArchitectsDaughter,cursive;font-weight:400;font-size:25.37cqw;line-height:1.04;text-shadow:0 5px 8px #00000029;letter-spacing:0}
.hero.brand-home .scene-layer{position:relative;transform:none!important;isolation:isolate}
.hero-brand{position:absolute;pointer-events:none;object-fit:contain;z-index:0}
.hero-brand-left{width:29.34%;aspect-ratio:1;left:-2.65%;top:-11.6%}
.hero-brand-right{width:29.2%;aspect-ratio:1;right:-6.5%;top:-1%}
.brand-home .progressive-product{z-index:1}
.brand-home .hero-action{z-index:2}
.opening-stage .experience{height:100%;overflow:hidden}
.opening-demo{height:100%;display:flex;flex-direction:column;min-height:0;width:100%}
.open-scene{position:relative;flex:1;min-height:220px;overflow:hidden;isolation:isolate}
.desktop-device{position:absolute;inset:12% 8% 18%;transition:transform 765ms ease,opacity 595ms ease;transform-origin:75% 80%}
.device-screen{position:relative;height:88%;border:7px solid #34454e;border-radius:8px;background:#fff;box-shadow:0 10px 24px #1c3d511c;overflow:hidden}
.browser-chrome{height:26px;background:#edf1f3;display:flex;align-items:center;gap:4px;padding:0 9px;border-bottom:1px solid #dbe4e7}
.browser-chrome>span{height:5px;width:5px;border-radius:50%;background:#a7b7bf}.browser-chrome b{font-size:9px;font-weight:400;color:#667c86;margin-left:12px}
.desktop-page{display:grid;grid-template-columns:38% 1fr;gap:18px;padding:20px;height:calc(100% - 26px)}
.post-photo{background:#dcebf1 url('assets/hero-v.svg') center/72% no-repeat;min-width:0;border-radius:4px}
.post-discussion{font-size:11px;line-height:1.5;color:#52636c;overflow:hidden}.post-discussion b{color:#263b45;font-size:13px}.post-discussion p{margin:8px 0}
.page-line{height:5px;background:#edf1f3;margin:10px 0;width:90%}.page-line.short{width:55%}
.device-chin{height:10%;background:#b8c6cd;border-radius:0 0 8px 8px;margin-top:-2px}
.device-stand{position:absolute;top:96%;left:37%;width:26%;height:18%;background:#cbd5da;clip-path:polygon(29% 0,71% 0,78% 77%,100% 87%,100% 100%,0 100%,0 87%,22% 77%)}
.launcher-button{border:0;padding:0;background:none;cursor:pointer;aspect-ratio:1;display:block}
.launcher-button:focus-visible{outline:2px solid #177ba4;outline-offset:4px;border-radius:12px}
.device-launcher{position:absolute;width:54px;bottom:12px;right:12px;z-index:3}
.device-launcher::before{content:"";position:absolute;inset:-8px;border-radius:38%;box-shadow:0 0 0 1800px #203b48a3;opacity:0;transition:opacity 500ms ease;pointer-events:none}
.device-launcher::after{content:"";position:absolute;inset:-6px;border:2px solid #54cbbb;border-radius:38%;pointer-events:none;box-shadow:0 0 0 2px #fff,0 0 0 6px #5ad4c52b;opacity:0;transition:opacity 500ms ease}
.open-scene[data-state=spotlight] .device-launcher::before,.open-scene[data-state=spotlight] .device-launcher::after{opacity:1}
.focus-launcher{position:absolute;width:30%;left:10%;top:29%;visibility:hidden;opacity:0;transform-origin:top left;z-index:3}
.open-scene[data-state=overview] .desktop-device{transition:none}
.open-scene:is([data-state=focus],[data-state=click],[data-state=open]) .device-launcher{visibility:hidden}
.open-scene[data-state=focus] .focus-launcher{animation:launcher-travel 1700ms cubic-bezier(.4,0,.2,1) both}
@keyframes launcher-travel{from{transform:translate(var(--launcher-x),var(--launcher-y)) scale(var(--launcher-scale))}to{transform:translate(0,0) scale(1)}}
@keyframes launcher-ring{from{clip-path:inset(0 100% 0 0);opacity:.4}to{clip-path:inset(0);opacity:1}}
.opening-cursor{position:absolute;left:33%;top:65%;width:13%;height:24%;object-fit:contain;opacity:0;pointer-events:none;z-index:4;transform:translate(25px,20px);transition:transform 500ms ease,opacity 300ms ease}
.open-scene[data-state=focus] .desktop-device,.open-scene[data-state=click] .desktop-device,.open-scene[data-state=open] .desktop-device{transform:translate(-23%,3%) scale(1.22);opacity:.16}
.open-scene:is([data-state=focus],[data-state=click],[data-state=open]) .focus-launcher{visibility:visible;opacity:1}
.open-scene[data-state=click] .opening-cursor{opacity:1;transform:translate(0,0)}
.open-scene[data-state=open] .opening-cursor{opacity:0}
.open-panel{position:absolute;right:3%;top:5%;width:49%;height:90%;z-index:5}
.open-panel>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 16px #31566d1c)}
.open-scene[data-state=open] .open-panel{animation:panel-open 550ms cubic-bezier(.2,.8,.2,1) both}
.panel-close{position:absolute;right:2%;top:2%;width:26px;height:26px;border:1px solid #e0e9ed;background:#ffffffec;display:grid;place-items:center;border-radius:50%;cursor:pointer}.panel-close svg{width:14px;height:14px}
.opening-status{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.opening-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 2px 0;font-size:14px;line-height:1.5;color:#526f80;flex:none}.opening-controls .icon-button{flex:none}
@keyframes panel-open{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media(min-width:1700px){.opening-stage{height:570px}.opening-controls{font-size:16px}}
@media(max-width:900px){.hero-brand-left{left:-7%;width:32%}.hero-brand-right{right:-9%;width:32%}.opening-stage{height:430px}}
@media(max-width:600px){.hero-brand-left{width:37%;left:-16%;top:18%}.hero-brand-right{width:37%;right:-18%;top:24%}.brand-home .progressive-product{max-width:67%}.opening-stage{height:390px!important;padding:8px!important}.open-scene{min-height:240px}.desktop-device{inset:20% 4% 22%}.desktop-page{padding:10px;gap:8px}.post-discussion{font-size:9px}.post-discussion b{font-size:10px}.device-screen{border-width:5px}.device-launcher{width:38px;right:7px;bottom:7px}.focus-launcher{width:30%;left:2%;top:36%}.open-panel{width:62%;right:1%;top:5%;height:90%}.opening-cursor{left:25%;top:60%}.opening-controls{font-size:12px;padding:8px;gap:8px}}
@media(prefers-reduced-motion:reduce){.opening-demo *{animation:none!important;transition:none!important}}
.native-launcher{display:block;width:166.667%;max-width:none;height:166.667%;margin:-33.333%;pointer-events:none}
#guide-title{color:var(--accent)}
.desktop-page{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.mock-platform-nav{height:32px;flex:none;display:flex;align-items:center;gap:16px;padding:0 14px;border-bottom:1px solid #edf0f1;font-size:9px;color:#66747a;background:#fff}
.mock-platform-nav>b{color:#df4156;font-size:12px}.mock-search{margin-left:auto;display:flex;align-items:center;gap:32px;background:#f3f5f6;border-radius:12px;padding:3px 9px;color:#98a1a6}.mock-search svg{width:10px;height:10px}
.mock-post{display:grid;grid-template-columns:44% minmax(0,1fr);min-height:0;flex:1;padding:12px 16px;gap:16px;background:#fcfcfc}
.mock-post-media{position:relative;min-height:0;background:#e9f2f5;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border-radius:5px;padding:12px}
.mock-post-media img{display:block;width:100%;height:78%;object-fit:contain}.mock-media-label{font-size:16px;font-weight:700;color:#24566d}.mock-media-count{position:absolute;bottom:7px;font-size:8px;color:#6f8996}
.mock-post-content{min-width:0;overflow:hidden;position:relative;padding-bottom:38px;color:#33444c}.mock-post-content header{display:flex;align-items:center;gap:7px;font-size:10px;margin-bottom:10px}.mock-avatar{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#dfebef;color:#39728a;font-size:10px}.mock-follow{margin-left:auto;color:#dd4055;border:1px solid #efcdd1;border-radius:10px;padding:3px 9px;font-size:9px}.mock-post-content h4{font-size:12px!important;line-height:1.5;margin:0 0 5px!important}.mock-post-content p{font-size:10px;line-height:1.6;margin:3px 0}.mock-tags{font-size:9px;color:#4b849b}.mock-post-content>small{display:block;font-size:8px;color:#97a1a6;margin:7px 0}.mock-comment-heading{font-size:9px;border-top:1px solid #e8edef;padding-top:8px;margin:8px 0;color:#93a0a6}.mock-comment{display:flex;gap:6px}.mock-comment b{font-size:9px;font-weight:500;color:#798990}.mock-comment small{font-size:8px;color:#a0a9ae}.mock-reply{border-left:2px solid #e3eaed;margin-top:7px;padding-left:7px}.mock-post-actions{position:absolute;bottom:0;left:0;right:60px;display:flex;align-items:center;gap:5px;background:#fcfcfc;padding:7px 0;border-top:1px solid #edf0f2;font-size:9px}.mock-post-actions>span{flex:1;background:#f0f3f4;padding:5px 7px;border-radius:10px;color:#99a3aa;white-space:nowrap}.mock-post-actions svg{width:11px;height:11px}.mock-post-actions small{font-size:8px}
@media(max-width:600px){.mock-platform-nav{height:24px;padding:0 6px;gap:8px;font-size:7px}.mock-platform-nav>b{font-size:9px}.mock-search{gap:4px;font-size:7px}.mock-post{padding:7px;gap:8px;grid-template-columns:40% minmax(0,1fr)}.mock-post-media{padding:5px}.mock-media-label{font-size:11px}.mock-post-content header{font-size:8px;gap:4px;margin-bottom:5px}.mock-avatar{width:15px;height:15px;font-size:8px}.mock-follow{padding:2px 4px;font-size:7px}.mock-post-content h4{font-size:9px!important}.mock-post-content p{font-size:8px}.mock-tags,.mock-comment b{font-size:7px}.mock-reply,.mock-post-actions{display:none}.mock-post-content{padding-bottom:0}.mock-comment-heading{padding-top:4px;margin:5px 0}}
.capture-reminder{margin:4px 0 0;padding:8px 12px;border-left:3px solid #287795;color:#24566d;background:#edf5f8;font-size:14px;line-height:1.5;flex:none}
.capture-controls .capture-reminder span{font-size:13px}
.capture-reminder strong,.capture-reminder span{display:block}
.capture-reminder[hidden]{display:none}
.mock-post-content header{margin-bottom:6px}.mock-tags{display:none}.mock-post-content>small{margin:3px 0}.mock-comment-heading{padding-top:4px;margin:4px 0}.mock-post-content>p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.mock-reply{margin-top:3px}