:is([data-work-page="portfolio"],[data-work-page="beach"]) { --portfolio-foreground:#fff; --portfolio-volume-brightness:1; }
:is([data-work-page="portfolio"],[data-work-page="beach"]) .portfolio-page { position:relative; height:100svh; min-height:400px; padding:0; overflow:hidden; background:#173d49; }
:is([data-work-page="portfolio"],[data-work-page="beach"]) .portfolio-header { position:absolute; z-index:4; inset:0 0 auto; padding:20px clamp(24px,4vw,64px) 40px; color:white; background:linear-gradient(#061923b0,transparent); pointer-events:none; }
:is([data-work-page="portfolio"],[data-work-page="beach"]) .portfolio-header a,
:is([data-work-page="portfolio"],[data-work-page="beach"]) .portfolio-header button { pointer-events:auto; filter:drop-shadow(0 1px 3px #00131bb0); }
:is([data-work-page="portfolio"],[data-work-page="beach"]) .portfolio-mark-light { display:none; }
:is([data-work-page="portfolio"],[data-work-page="beach"]) .portfolio-mark-dark { display:block; }
:is([data-work-page="portfolio"],[data-work-page="beach"]) .social-pending { display:grid; }
:is([data-work-page="portfolio"],[data-work-page="beach"]) .social-icon { filter:drop-shadow(0 1px 3px #001b27); }
.character-page { position:absolute; inset:0; display:flex; width:100%; height:100%; margin:0; }
.character-status { margin:auto; text-align:center; font-size:14px; color:white; }
#character-mount { display:flex; flex:1; min-height:0; }
.character-page alain-character { width:100%; height:100%; --alain-fg:#fff; --alain-accent:var(--accent); --alain-key-line:#ffffff75; --city-control-bg:#102730e8; }