/* Prototype viewer: slim portfolio bar + the prototype filling the rest of the screen */
html,body{height:100%;margin:0;background:#0E0203}
body.proto{display:flex;flex-direction:column;overflow:hidden;color:#F6F1E8}
.proto-bar{flex:0 0 58px;display:flex;align-items:center;gap:14px;padding:0 20px;background:#0E0203;border-bottom:1px solid rgba(255,255,255,.14);position:relative;z-index:3}
.proto-bar a{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font:700 13px 'Manrope',sans-serif;border:1px solid rgba(255,255,255,.55);border-radius:30px;padding:9px 16px;white-space:nowrap;transition:background .25s,border-color .25s,color .25s}
.proto-bar a:hover{background:var(--c);border-color:var(--c);color:var(--ci)}
.proto-title{display:flex;align-items:center;gap:10px;margin:0 auto 0 6px;font:500 12px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#d9d4cb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proto-title i{width:10px;height:10px;border-radius:3px;background:var(--c);flex:0 0 auto}
.proto-bar a.ghost{border-color:rgba(255,255,255,.25);font-weight:600;color:#d9d4cb}
.proto-frame{flex:1 1 auto;min-height:0;position:relative;background:#14171A}
.proto-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.proto-load{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#0E0203;overflow:hidden;color:#d9d4cb;font:500 12px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;transition:opacity .35s ease}
.proto-load>*{position:relative;z-index:2}
.ghost-bg{position:absolute!important;inset:-24px;z-index:0!important;background-size:cover;background-position:top center;background-repeat:no-repeat;filter:blur(9px) saturate(.85) brightness(.5);opacity:0;transform:scale(1.04);transition:opacity .8s ease}
.ghost-bg.on{opacity:.62}
.ghost-bg.low{image-rendering:auto}
.ghost-bg.low.on{opacity:.55}
.ghost-bg.tablet{background-size:auto 112%;background-position:center}
.ghost-shine{position:absolute!important;inset:0;z-index:1!important;pointer-events:none;background:radial-gradient(ellipse at center,rgba(14,2,3,.78) 0%,rgba(14,2,3,.38) 38%,rgba(14,2,3,.12) 70%),linear-gradient(115deg,transparent 35%,color-mix(in srgb,var(--c) 22%,transparent) 50%,transparent 65%);background-size:100% 100%,260% 100%;animation:ghostShine 2.4s ease-in-out infinite}
@keyframes ghostShine{0%{background-position:0 0,130% 0}100%{background-position:0 0,-130% 0}}
@media(prefers-reduced-motion:reduce){.ghost-shine{animation:none}}

.proto-load.done{opacity:0;pointer-events:none}
.proto-load b{font:700 20px 'Manrope',sans-serif;letter-spacing:-.01em;text-transform:none;color:#fff}
.spin{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.14);border-top-color:var(--c);animation:protoSpin .85s linear infinite}
@keyframes protoSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation:none;border-color:var(--c)}}
@media(max-width:760px){.proto-bar{gap:8px;padding:0 10px}.proto-bar a{padding:8px 11px;font-size:12px}.proto-title{display:none}.proto-bar .spacer{margin-left:auto}.proto-bar a.ghost{display:none}}