/* Shared brand and navigation across the public site and private creation workspace. */
.site-shell-header{max-width:none;margin:0;padding:22px clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--line);font:15px/1.4 system-ui,sans-serif}
.site-shell-header .site-brand{color:var(--ink);font:900 36px/1.1 'Trebuchet MS',sans-serif;letter-spacing:-2px;white-space:nowrap;text-decoration:none}
.site-brand span{color:#ff792f;margin-left:3px}
.site-shell-header .site-main-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:14px;font-weight:650}
.site-shell-header nav.site-main-nav>a{display:inline-flex;color:var(--ink);text-decoration:none;align-items:center;min-height:40px;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.site-shell-header nav.site-main-nav>a:hover,.site-shell-header nav.site-main-nav>a[aria-current=page]{border-bottom-color:#ff792f}
.site-shell-header nav.site-main-nav>.site-create{background:#ff792f;color:#18121a;border-radius:10px;padding:10px 18px;font-weight:800;border-bottom:0}
.site-shell-header .account-controls{display:flex;flex-basis:auto;align-items:center;gap:16px;padding:0;font-size:14px;order:0;justify-content:flex-start;flex-wrap:wrap}
.site-shell-header .signed-in-label{display:inline-block;align-self:center;margin:0 4px;max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;font-weight:600;color:var(--muted,#b9bfd0);font-size:.85rem}
@media (max-width:560px){.site-shell-header .signed-in-label{display:none}}
.site-shell-header .account-controls a{font-weight:650;color:var(--ink);text-decoration:none}
.site-shell-header .account-controls a:hover{text-decoration:underline}
.site-shell-header .account-controls .create-account-link{border:0;padding:0}
.site-shell-header .account-controls form{margin:0}
.site-shell-header .account-controls button,.site-shell-header .site-mode{font:inherit;font-size:13px;border:1px solid var(--line);background:transparent;color:var(--ink);padding:10px 12px;border-radius:10px;min-height:40px;cursor:pointer}
.site-shell-header a:focus-visible,.site-shell-header button:focus-visible,.site-workspace-nav a:focus-visible{outline:3px solid #ff792f;outline-offset:4px}
.site-workspace-nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:12px clamp(20px,4vw,64px);border-bottom:1px solid var(--line);font:14px/1.5 system-ui,sans-serif}
.site-workspace-nav a{color:var(--muted);text-decoration:none;padding:5px 0}
.site-workspace-nav a[aria-current=page],.site-workspace-nav a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:#ff792f;text-underline-offset:6px}
.site-entry-note{font-size:14px;color:var(--muted);border-left:3px solid #ff792f;padding-left:14px}
.mockup-actions .site-home-create{display:inline-flex;background:#ff792f;color:#18121a;padding:12px 22px;border-radius:12px;font-weight:800;text-decoration:none}
@media(max-width:1100px){.site-shell-header{gap:18px}.site-shell-header .site-main-nav{order:3;flex-basis:100%;justify-content:center;gap:24px}.site-shell-header .account-controls{margin-left:auto}.site-shell-header .site-mode{order:2}}
@media(max-width:600px){.site-shell-header{padding:18px 20px;gap:16px}.site-shell-header .site-brand{font-size:32px}.site-shell-header .site-mode{order:0;margin-left:auto}.site-shell-header .site-main-nav{order:2;justify-content:flex-start;gap:8px 20px}.site-shell-header .account-controls{order:3;margin-left:0;flex-basis:100%;gap:20px}.site-shell-header nav.site-main-nav>a{font-size:13px}.site-workspace-nav{gap:8px 20px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.site-shell-header nav.site-main-nav>a{transition:none}}

@media(min-width:1101px){.site-shell-header{flex-wrap:nowrap;gap:clamp(12px,1.6vw,24px)}.site-shell-header .site-main-nav{flex-wrap:nowrap;gap:clamp(12px,1.6vw,22px);margin-left:auto}.site-shell-header .account-controls{flex-wrap:nowrap;white-space:nowrap}.site-shell-header .site-mode{margin-left:auto;flex-shrink:0}}

/* Finished artwork includes its full frame: never crop scene content. */
.mockup-stage>img,.mockup-stage>noscript>img{display:block;width:100%;height:auto;margin:0}
#sample-dialog .sample-artwork{width:100%;max-width:117.1875vh;margin-inline:auto}
#sample-dialog .sample-artwork img{display:block;width:100%;height:auto;max-height:none;margin:0}
.sample-artwork{line-height:0}
.mockup-actions small{display:block;font-size:.75rem;margin-top:.4rem}

/* Logged-out desktop homepage: artwork begins behind the transparent header. */
@media(min-width:1101px){
 .site-shell-header.site-home-overlay{position:absolute;inset:0 0 auto;z-index:10;background:transparent;border-bottom:0;box-shadow:none}
 .site-home-overlay .site-brand,.site-home-overlay nav.site-main-nav>a,.site-home-overlay .account-controls a,.site-home-overlay .site-mode{text-shadow:0 1px 3px var(--bg)}
}
/* Signed out soon (session-timeout.js, 10-03): a notice above everything, bottom centre. */
.session-timeout{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:2147483000;max-width:min(520px,calc(100vw - 32px));box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:16px 18px;border-radius:14px;background:#1b1d24;color:#fff;box-shadow:0 12px 40px rgba(0,0,0,.35);font:15px/1.4 system-ui,-apple-system,sans-serif}
.session-timeout p{margin:0;flex:1 1 220px}
.session-timeout button{font:inherit;font-weight:700;border:0;border-radius:10px;padding:9px 14px;cursor:pointer;background:#f5b43b;color:#1b1d24}
.session-timeout button.session-timeout-out{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.session-timeout button:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* The signed-in name sits just left of the light/dark button at every width (10-05, owner). */
@media(min-width:1101px){.site-shell-header .signed-in-label{margin-left:auto}.site-shell-header .signed-in-label+.site-mode{margin-left:0}}
@media(max-width:1100px){.site-shell-header .signed-in-label{order:2}}
@media(max-width:600px){.site-shell-header .signed-in-label{order:0;margin-left:auto}.site-shell-header .signed-in-label+.site-mode{margin-left:0}}