:root{--page-bg:#fff;--page-rgb:255,255,255;--page-ink:#111;--page-muted:#666;--page-rule:#bbb;--page-hover:#fafafa;--icon-filter:none;--logo-filter:brightness(0)}
:root[data-theme="blue"]{--page-bg:#171184;--page-rgb:23,17,132;--page-ink:#fff;--page-muted:#dddafa;--page-rule:#ffffff65;--page-hover:#ffffff0b;--icon-filter:brightness(0) invert(1);--logo-filter:brightness(0) invert(1)}
html[data-theme],html[data-theme] body{background:var(--page-bg);color:var(--page-ink)}
html[data-theme] :is(.about-section,.gallery-section,.gallery-interaction,.featured-section,.project-stream){background:var(--page-bg);color:var(--page-ink)}
html[data-theme] :is(.work-list,.work-row,.site-footer,.body-grid,.project-case,.brand-films-section,.project-editor-link){border-color:var(--page-ink)}
html[data-theme] :is(.story section,.grade-controls){border-color:var(--page-rule)}
html[data-theme] :is(.body-grid dt,.grade-hint,.grade-status,.hint){color:var(--page-muted)}
html[data-theme] .work-row:hover{background:var(--page-hover)}
html[data-theme] .contact-row:hover{background:transparent}
html[data-theme] .contact-link img{filter:var(--icon-filter)}
html[data-theme] :is(.return-top,.contact-trigger,.project-editor-link,.grade-play){color:var(--page-ink)}
html[data-theme] .upload-logo{filter:var(--logo-filter)}
html[data-theme] :is(.upload-screen .pill,.editor-home,.back,.duplicate-button,.tool-button){color:var(--page-ink);border-color:var(--page-ink);background:transparent}
html[data-theme] .tool-button img{filter:var(--icon-filter)}
html[data-theme] .tool-button[aria-pressed="true"]{background:var(--page-ink)}
html[data-theme] .tool-button[aria-pressed="true"] img{filter:invert(1)}
html[data-theme="blue"] .tool-button[aria-pressed="true"] img{filter:none}
html[data-theme="blue"] :is(.pill:not(#uploadButton),.mode-button){background:#fff;color:#171184}
html[data-theme="blue"] .mode-button img{filter:invert(1)}
html[data-theme="blue"] .mode-button svg{fill:#171184}
html[data-theme] .message{background:var(--page-bg);color:var(--page-ink)}
html[data-theme] .drop-veil{background:rgba(var(--page-rgb),.96);border-color:var(--page-ink)}
html[data-theme="blue"] .crop-frame{border-color:white;box-shadow:0 0 0 999px #171184b8,inset 0 0 0 1px #ffffff80}
html[data-theme] :is(.handle,#resultCanvas,.crop-preview){border-color:var(--page-ink)}
html[data-theme] :is(a,button):focus-visible{outline-color:var(--page-ink)}
.theme-picker{position:fixed;z-index:30;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));display:flex;gap:10px;padding:6px;border-radius:50px;background:rgba(var(--page-rgb),.88)}
.theme-orb{display:block;width:44px;height:44px;min-width:44px;padding:0;border:1.5px solid #111;border-radius:50%;cursor:pointer;box-shadow:none;touch-action:manipulation}
.theme-orb-white{background:#fff}
.theme-orb-blue{background:#171184;border-color:#fff}
html[data-theme="white"] .theme-orb-blue{border-color:#171184}
.theme-orb[aria-pressed="true"]{outline:1px solid var(--page-ink);outline-offset:3px}
.theme-orb:focus-visible{outline:3px solid var(--page-ink);outline-offset:4px}
.site-footer{padding-bottom:108px}
.upload-screen{padding-bottom:110px}
.site-preview-open .theme-picker,.preview-open .theme-picker{visibility:hidden}

/* Small visible orbs retain comfortable touch targets. */
.theme-picker{gap:0;padding:0;background:transparent}
.theme-orb{position:relative;background:transparent!important;border:0!important;outline:none!important;width:44px;height:44px}
.theme-orb::before{content:"";position:absolute;width:22px;height:22px;left:11px;top:11px;border-radius:50%;box-sizing:border-box;border:1px solid #111;background:#fff}
.theme-orb-blue::before{background:#171184;border-color:#fff}
html[data-theme="white"] .theme-orb-blue::before{border-color:#171184}
.theme-orb[aria-pressed="true"]::before{outline:1px solid var(--page-ink);outline-offset:2px}
.theme-orb:focus-visible::before{outline:2px solid var(--page-ink);outline-offset:3px}

/* Short press feedback, without moving the surrounding layout. */
body{transition:opacity 140ms ease}
body.is-leaving{opacity:0}
.hero-logo,.upload-home,.editor-home{transition:scale 200ms cubic-bezier(.2,.8,.2,1),opacity 200ms ease}
.hero-logo:active,.upload-home:active,.editor-home:active{scale:.94}
.is-pressed{animation:skull-press 230ms cubic-bezier(.2,.8,.2,1) both}
@keyframes skull-press{0%{scale:1}40%{scale:.91}100%{scale:1.025}}
.theme-orb::before{transition:transform 180ms cubic-bezier(.2,.8,.2,1),outline-color 180ms ease}
.theme-orb:active::before{transform:scale(.82)}
.contact-trigger,.return-top,.hero-scroll{transition:scale 180ms ease,opacity 180ms ease}
.contact-trigger:active,.return-top:active,.hero-scroll:active{scale:.96}
@media(hover:hover) and (pointer:fine){.hero-logo:hover,.upload-home:hover{scale:1.025}.editor-home:hover{scale:1.06}.theme-orb:hover::before{transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){body,.hero-logo,.upload-home,.editor-home,.theme-orb::before,.contact-trigger,.return-top,.hero-scroll{transition:none!important;animation:none!important}.is-pressed{animation:none!important}}

/* Optional phone tilt, opposite the colour controls. */
.motion-toggle{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:1000;min-height:44px;padding:8px 13px;border:1px solid var(--page-rule);border-radius:24px;background:var(--page-bg);color:var(--page-ink);font:12px Arial,sans-serif;cursor:pointer}
.motion-toggle[hidden]{display:none}
.motion-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.motion-toggle:active{scale:.96}
.hero-logo img,.upload-logo{backface-visibility:hidden}