:root{--loader-ease:cubic-bezier(.22,1,.36,1);--loader-exit:420ms}
.studio-loader{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--loader-exit) var(--loader-ease),visibility 0s var(--loader-exit);contain:layout paint}
html[data-studio-state=loading] .studio-loader{opacity:1;visibility:visible;pointer-events:auto;transition:none}
.loader-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:clamp(55px,8vw,125px) clamp(55px,8vw,125px);opacity:.13;mask-image:radial-gradient(ellipse at center,black,transparent 76%)}
.loader-ghost{position:absolute;inset-inline-start:50%;top:50%;transform:translate(calc(-50% * var(--direction)),-50%);font-size:clamp(150px,36vw,650px);font-weight:600;letter-spacing:-.08em;line-height:1;color:transparent;-webkit-text-stroke:1px var(--line);opacity:.18;user-select:none}
.loader-corner{position:absolute;top:clamp(24px,4vw,60px);font-size:10px;letter-spacing:.16em;display:flex;align-items:center;gap:12px;color:var(--muted)}.loader-corner-start{inset-inline-start:var(--space)}.loader-corner-end{inset-inline-end:var(--space)}
.loader-dot{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
.loader-center{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;width:min(640px,85vw);text-align:center;transform:translateY(0);transition:transform var(--loader-exit) var(--loader-ease),opacity var(--loader-exit)}
.loader-symbol{width:78px;height:62px;position:relative;margin-bottom:28px;display:flex;justify-content:center;align-items:center;gap:8px;direction:ltr}.loader-symbol i{width:18px;height:49px;background:var(--ink);transform:skewX(26deg);box-shadow:inset -3px 0 0 var(--muted);animation:loader-symbol-enter 550ms var(--loader-ease) both}.loader-symbol i:nth-child(2){animation-delay:70ms}.loader-symbol i:nth-child(3){background:var(--lime);box-shadow:inset -3px 0 0 var(--line);transform:skewX(-26deg);animation-delay:140ms}
.loader-wordmark{width:min(380px,78vw);margin-bottom:26px}.loader-wordmark img{width:100%;height:auto;object-fit:contain}.loader-opening-copy{font-size:clamp(25px,3vw,42px);letter-spacing:-.045em;line-height:1.25;color:var(--ink)}
.loader-navigation-copy{display:none;font-size:22px;color:var(--ink);letter-spacing:-.02em}
.loader-track{width:min(260px,58vw);height:2px;overflow:hidden;background:var(--line);margin-top:35px;margin-bottom:23px;direction:ltr}.loader-track span{display:block;width:45%;height:100%;background:var(--lime);transform:translateX(-100%);animation:loader-scan 1.2s ease-in-out infinite}
.loader-caption{font-size:9px;text-transform:uppercase;letter-spacing:.2em;line-height:2;color:var(--muted)}
.loader-footer{position:absolute;inset-inline:var(--space);bottom:clamp(24px,4vw,60px);border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:.09em;color:var(--muted)}.loader-orbit{font-size:22px;color:var(--lime);animation:loader-orbit-turn 9s linear infinite}
html[data-studio-state=leaving] .loader-center{opacity:0;transform:translateY(-18px)}
.loader-recovery{display:none;position:fixed;inset-inline-end:var(--space);bottom:90px;z-index:91}.loader-recovery button{background:transparent;color:var(--muted);border:1px solid var(--line);padding:10px 15px;font-size:11px}.loader-recovery button:hover{color:var(--lime);border-color:var(--lime)}
html[data-studio-state=loading] .loader-recovery.available{display:block}
/* Subsequent navigation uses a smaller, quieter bridge to the next page. */
html[data-studio-mode=navigation] .loader-ghost,html[data-studio-mode=navigation] .loader-caption,html[data-studio-mode=navigation] .loader-opening-copy,html[data-studio-mode=navigation] .loader-corner,html[data-studio-mode=navigation] .loader-footer,html[data-studio-mode=navigation] .loader-wordmark{display:none}
html[data-studio-mode=navigation] .loader-navigation-copy{display:block}
html[data-studio-mode=navigation] .loader-symbol{width:45px;height:40px;margin-bottom:18px;gap:5px}
html[data-studio-mode=navigation] .loader-symbol i{height:30px;width:10px;animation:none}
html[data-studio-mode=navigation] .loader-track{width:120px;margin-top:24px;margin-bottom:0}
html[data-studio-mode=navigation]{--loader-exit:220ms}
[dir=rtl] .loader-opening-copy,[dir=rtl] .loader-caption,[dir=rtl] .loader-footer,[dir=rtl] .loader-corner{letter-spacing:0}
[dir=rtl] .loader-recovery button span{display:inline-block;transform:scaleX(-1)}
@keyframes loader-symbol-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes loader-scan{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}@keyframes loader-orbit-turn{to{transform:rotate(360deg)}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:studio-page-out 150ms ease-out both}
::view-transition-new(root){animation:studio-page-in 260ms var(--loader-ease) both}
@keyframes studio-page-out{to{opacity:0;transform:translateY(-5px)}}@keyframes studio-page-in{from{opacity:0;transform:translateX(calc(10px * var(--direction)))}to{opacity:1;transform:none}}
@media(max-width:600px){.loader-corner{font-size:8px}.loader-corner-end{display:none}.loader-footer{font-size:8px;gap:12px}.loader-footer>span:last-child{max-width:120px;text-align:end}.loader-symbol{margin-bottom:20px}.loader-wordmark{margin-bottom:20px}.loader-opening-copy{font-size:28px}.loader-caption{max-width:270px;font-size:8px}.loader-recovery{bottom:100px}.loader-track{margin-top:27px}}
@media(prefers-reduced-motion:reduce){.studio-loader{--loader-exit:0s}.loader-grid,.loader-ghost{display:none}.loader-track span{width:100%;transform:none}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
