.studio-intro{position:fixed;inset:0;z-index:100;background:#07090c;display:grid;place-items:center;align-content:center;gap:22px;animation:studioIntro 2.8s cubic-bezier(.76,0,.24,1) forwards;pointer-events:none}.intro-logo{display:flex;align-items:center;gap:13px;font-family:var(--label);font-size:clamp(26px,4vw,46px);letter-spacing:.18em;text-transform:uppercase;opacity:0;animation:introLogo 1s .2s ease forwards}.intro-logo i{width:1px;height:35px;background:var(--warm);transform:rotate(20deg)}.intro-logo em{font-family:var(--display);font-size:1.04em;letter-spacing:0;text-transform:none;color:var(--warm)}.intro-line{width:min(220px,42vw);height:1px;background:var(--warm);transform:scaleX(0);transform-origin:center;animation:introLine .8s .65s ease forwards}.studio-intro small{font-family:var(--label);font-size:8px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);opacity:0;animation:introText .7s .9s ease forwards}@keyframes studioIntro{0%,76%{opacity:1}100%{opacity:0;visibility:hidden}}@keyframes introLogo{to{opacity:1;transform:translateY(0)}}@keyframes introLine{to{transform:scaleX(1)}}@keyframes introText{to{opacity:1}}.demo-section{padding:clamp(90px,12vw,160px) clamp(24px,11vw,175px);background:#e8e7e2;color:var(--ink)}.demo-section .section-heading{align-items:start}.demo-section .section-label{color:#67717a}.demo-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(40px,8vw,125px);margin-top:72px;align-items:center}.demo-copy h2{font-family:var(--display);font-weight:500;font-size:clamp(48px,5vw,78px);line-height:1.02}.demo-copy h2 i{color:#617083}.demo-copy>p{max-width:310px;color:#5d656c;font-size:14px;line-height:1.8;margin:30px 0 42px}.demo-tabs{border-top:1px solid rgba(8,10,13,.22)}.demo-tab{display:flex;align-items:center;gap:20px;width:100%;padding:18px 0;background:none;border:0;border-bottom:1px solid rgba(8,10,13,.22);font-family:var(--label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-align:left;color:#7a8288;cursor:pointer;transition:color .25s,padding-left .25s}.demo-tab span{font-size:9px;color:#a98f65}.demo-tab:hover,.demo-tab.is-active{color:var(--ink);padding-left:8px}.demo-viewer{min-width:0;background:#080a0d;box-shadow:0 25px 70px rgba(8,10,13,.2)}.browser-bar{height:46px;display:flex;align-items:center;gap:15px;padding:0 16px;background:#171c22;border-bottom:1px solid rgba(245,244,240,.12);font-family:var(--label);font-size:9px;color:#8c969e;letter-spacing:.08em}.browser-dots{display:flex;gap:5px}.browser-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#687079}.browser-dots i:first-child{background:#a98f65}.browser-url{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browser-bar a{font-size:9px;color:var(--warm);white-space:nowrap}.browser-bar a.is-disabled{opacity:.5;pointer-events:none}.demo-frame-wrap{position:relative;height:clamp(390px,48vw,620px);background:var(--night);overflow:hidden}.demo-frame-wrap iframe{width:100%;height:100%;display:block;border:0;background:var(--night)}.demo-scroll-note{position:absolute;right:18px;bottom:18px;padding:8px 11px;background:rgba(8,10,13,.82);color:#d8d8d3;font-family:var(--label);font-size:8px;letter-spacing:.12em;text-transform:uppercase}.demo-scroll-note span{margin-left:8px;color:var(--warm);font-size:14px}@media(max-width:900px){.demo-layout{grid-template-columns:1fr;gap:52px}.demo-copy>p{max-width:430px}.demo-frame-wrap{height:540px}}@media(max-width:600px){.demo-section{padding:84px 24px}.demo-layout{margin-top:52px}.browser-bar{padding:0 11px;gap:9px}.browser-bar a{font-size:8px}.demo-frame-wrap{height:460px}.studio-intro small{font-size:7px;letter-spacing:.18em}}