/* Four colour palettes over the same original layout, type and components. */
.design-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 24px;background:var(--surface,#11120f);color:var(--ink,#f5f0e8);border-bottom:1px solid var(--line,#292820);font-family:Inter,-apple-system,sans-serif;position:relative;z-index:101}
.design-label{font-size:9px;letter-spacing:.16em;color:var(--muted,#aaa99b)}
.design-choices{display:flex;gap:4px}.design-choices button{font:400 11px Inter,-apple-system,sans-serif;display:flex;gap:8px;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;background:transparent;border:1px solid transparent;color:var(--muted,#aaa99b);border-radius:2px;cursor:pointer}.design-choices button[aria-pressed=true]{color:var(--ink,#f5f0e8);border-color:var(--line,#494431);background:var(--bg,#090a08)}.design-choices button:focus-visible{outline:2px solid var(--gold,#c9a84c);outline-offset:2px}.design-swatch{width:12px;height:12px;border-radius:50%;border:1px solid #8a8062}.design-swatch.onyx{background:#14130d}.design-swatch.ivory{background:#f4edda}.design-swatch.forest{background:#295749}
.nav-account{display:flex;gap:14px;align-items:center}.login-link{font-size:12px;min-height:44px;display:flex;align-items:center;white-space:nowrap;color:var(--ink,#f5f0e8);text-decoration:none}.session-actions{display:flex;align-items:center;gap:12px}.session-actions .text-link{background:none;border:0;cursor:pointer}.session-identity{color:var(--muted);font-size:11px}
.session-actions{margin-left:auto}.session-actions [hidden]{display:none!important}#chartEnd{fill:var(--gold)}
:root:is([data-theme=ivory],[data-theme=final]){--bg:#f6f3eb;--black:#f6f3eb;--black-light:#eeeadf;--black-card:#fffdf7;--surface:#fffdf7;--ink:#28291f;--white:#28291f;--white-dim:#666456;--muted:#666456;--gold:#846223;--gold-light:#846223;--gold-dim:#846223;--line:#dcd8cc;--up:#376447;--down:#9b442c}
:root[data-theme=forest]{--bg:#102c26;--black:#102c26;--black-light:#16372e;--black-card:#183930;--surface:#183930;--ink:#f8f3e7;--white:#f8f3e7;--white-dim:#b9cbbc;--muted:#b9cbbc;--gold:#e1c68d;--gold-light:#e1c68d;--gold-dim:#d4b675;--line:#36564a;--up:#b6d6ba;--down:#f2b19c}
:root:is([data-theme=ivory],[data-theme=final]) body,:root[data-theme=forest] body{background:var(--bg);color:var(--ink)}
:root:is([data-theme=ivory],[data-theme=final]) nav,:root:is([data-theme=ivory],[data-theme=final]) nav.scrolled,:root[data-theme=forest] nav,:root[data-theme=forest] nav.scrolled{background:var(--bg);border-color:var(--line)}
:root:is([data-theme=ivory],[data-theme=final]) .nav-links.open,:root[data-theme=forest] .nav-links.open{background:var(--surface);border-color:var(--line)}
:root:is([data-theme=ivory],[data-theme=final]) .stats,:root:is([data-theme=ivory],[data-theme=final]) .product-section,:root[data-theme=forest] .stats,:root[data-theme=forest] .product-section{background:var(--surface);border-color:var(--line)}
:root:is([data-theme=ivory],[data-theme=final]) .mini-account,:root[data-theme=forest] .mini-account{background:var(--bg);border-color:var(--line)}
:root:is([data-theme=ivory],[data-theme=final]) .mini-change,:root:is([data-theme=ivory],[data-theme=final]) .positive,:root:is([data-theme=ivory],[data-theme=final]) .result>span:first-child{color:#376447}
:root:is([data-theme=ivory],[data-theme=final]) .negative{color:#a44730}
:root:is([data-theme=ivory],[data-theme=final]) .mini-chart path:first-child{stroke:#dcd8cc}
:root:is([data-theme=ivory],[data-theme=final]) .mini-chart path+path{stroke:#846223}
:root:is([data-theme=ivory],[data-theme=final]) .btn-primary,:root:is([data-theme=ivory],[data-theme=final]) .button:not(.outline){background:#d8bd78;color:#282419;border-color:#d8bd78}
:root:is([data-theme=ivory],[data-theme=final]) .btn-secondary,:root:is([data-theme=ivory],[data-theme=final]) .nav-cta,:root:is([data-theme=ivory],[data-theme=final]) .button.outline{border-color:#aa9662;color:#76551c}
:root:is([data-theme=ivory],[data-theme=final]) .btn-primary:hover,:root:is([data-theme=ivory],[data-theme=final]) .button:not(.outline):hover{background:#cdb06a}
:root:is([data-theme=ivory],[data-theme=final]) .button.outline:hover,:root:is([data-theme=ivory],[data-theme=final]) .btn-secondary:hover{background:#e9e2cf}
:root:is([data-theme=ivory],[data-theme=final]) .badge,:root:is([data-theme=ivory],[data-theme=final]) .avatar,:root:is([data-theme=ivory],[data-theme=final]) .filters button[aria-pressed=true]{background:#eee6d1;color:#76551c;border-color:#cfc099}
:root:is([data-theme=ivory],[data-theme=final]) .demo-banner{background:#e9e1ce;color:#625022}
:root:is([data-theme=ivory],[data-theme=final]) .next-event,:root:is([data-theme=ivory],[data-theme=final]) .notice{background:#ebe6d7;border-color:#d3cbb3}
:root:is([data-theme=ivory],[data-theme=final]) .entry-icon{background:#ebe9de;color:#666456}
:root:is([data-theme=ivory],[data-theme=final]) .amount-input,:root:is([data-theme=ivory],[data-theme=final]) .apply-form input[type=email]{background:#fffdf7;color:var(--ink);border-color:#b5ad96}
:root:is([data-theme=ivory],[data-theme=final]) .timeline-dot{background:#ebe6d7}
:root:is([data-theme=ivory],[data-theme=final]) .timeline-dot.completed{background:var(--gold)}
:root:is([data-theme=ivory],[data-theme=final]) .timeline>div,:root:is([data-theme=ivory],[data-theme=final]) .calendar-date{border-color:#c8c0a7}
:root:is([data-theme=ivory],[data-theme=final]) .hero-art::before{border-color:#c9bd9e}
:root:is([data-theme=ivory],[data-theme=final]) .grain-overlay{opacity:.02}
:root:is([data-theme=ivory],[data-theme=final]) #particles-canvas{display:none}


:root:is([data-theme=ivory],[data-theme=final]) .app-nav a[aria-current]{border-color:#846223}
:root:is([data-theme=ivory],[data-theme=final]) .app-footer a,:root:is([data-theme=ivory],[data-theme=final]) .text-link{color:#76551c}
:root:is([data-theme=ivory],[data-theme=final]) .result>span+span,:root:is([data-theme=ivory],[data-theme=final]) .mini-header{color:var(--muted)}
:root:is([data-theme=ivory],[data-theme=final]) .apply-toast.error,:root:is([data-theme=ivory],[data-theme=final]) #quoteStatus{color:#9b442c}

:root[data-theme=forest] .next-event{background:#24473a;border-color:#49614a}
:root[data-theme=forest] .badge,:root[data-theme=forest] .avatar,:root[data-theme=forest] .filters button[aria-pressed=true]{background:#2a4939;color:var(--gold);border-color:#647252}
:root[data-theme=forest] .demo-banner{background:#2c4937;color:#e6d6b0}
:root[data-theme=forest] .notice,:root[data-theme=forest] .entry-icon{background:#244637;color:var(--muted)}
:root[data-theme=forest] .amount-input,:root[data-theme=forest] .apply-form input[type=email]{background:#102c26;color:var(--ink);border-color:#698071}
:root[data-theme=forest] .timeline-dot{background:#24473a}
:root[data-theme=forest] .timeline-dot.completed{background:var(--gold)}
:root[data-theme=forest] .button.outline,:root[data-theme=forest] .btn-secondary,:root[data-theme=forest] .nav-cta{border-color:#778066}
:root[data-theme=forest] .button.outline:hover{background:#2b4b3d}


:root[data-theme=forest] .hero-art::before{border-color:#63745a}
:root[data-theme=forest] .hero-art{background:#16372e;border-radius:50% 50% 3px 3px}

:root[data-theme=forest] .portfolio{border-color:#54684d}
@media(min-width:769px){.design-bar{padding-left:48px;padding-right:48px}}
@media(max-width:768px){.design-bar{padding:4px 12px;justify-content:center}.design-label{display:none}.design-choices{width:100%;justify-content:center}.design-choices button{flex:1;min-height:44px;max-width:140px}.nav-account{gap:10px}.nav-account .nav-cta{display:none}.login-link{padding:0 8px}.session-identity{display:none}.profile-name{max-width:90px}.session-actions{gap:8px}:root:is([data-theme=ivory],[data-theme=final]) .hero-art{border:1px solid var(--line);border-radius:2px}:root[data-theme=forest] .hero-art{height:290px}}
@media(max-width:450px){.app-header .profile-name{display:none}.app-header{gap:10px}.app-header .avatar{width:30px;height:30px;font-size:12px}.app-header>.text-link{font-size:10px}}

/* The artwork is a real transparent metal sculpture, shared across palettes. */
.hero-art,.hero-art::before{isolation:isolate}
.hero-art::before{display:none}
.hero-sculpture{display:block;width:100%;height:100%;object-fit:contain;padding:0 0 36px;filter:drop-shadow(0 24px 20px rgba(0,0,0,.14));animation:sculpture-enter 1.2s cubic-bezier(.2,.7,.2,1) both}
:root:is([data-theme=ivory],[data-theme=final]) .hero-art,:root[data-theme=forest] .hero-art{background:transparent;border:0;border-radius:0}
.hero-art,:root[data-theme=forest] .hero-art{height:340px;margin-top:20px}
@keyframes sculpture-enter{from{opacity:0;transform:translateY(18px) rotate(-4deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@media(min-width:769px){.hero-art,:root[data-theme=forest] .hero-art{height:510px;margin-top:0}.hero-sculpture{width:112%;max-width:none;height:112%;margin-top:-45px;padding-bottom:42px}.hero-art .art-caption{z-index:2}:root:is([data-theme=ivory],[data-theme=final]) .hero-art{border:0}}
@media(prefers-reduced-motion:reduce){.hero-sculpture{animation:none}}

.hero-sculpture{position:absolute;inset:0;width:100%;height:calc(100% - 40px);padding:0;margin:0;max-width:none;min-height:0}
@media(min-width:769px){.hero-sculpture{width:112%;height:calc(100% - 30px);left:-6%;top:-15px}}

/* Release 03: monochrome editorial direction. */
.design-swatch.monochrome{background:#fff;border-color:#333;box-shadow:inset 5px 0 #151515}
:root[data-theme=monochrome]{--bg:#fafafa;--black:#fafafa;--black-light:#f0f0f0;--black-card:#fff;--surface:#fff;--ink:#161616;--white:#161616;--white-dim:#606060;--muted:#606060;--gold:#242424;--gold-light:#242424;--gold-dim:#555;--line:#d9d9d9;--up:#242424;--down:#555}
:root[data-theme=monochrome] body{background:var(--bg);color:var(--ink)}
:root[data-theme=monochrome] nav,:root[data-theme=monochrome] nav.scrolled,:root[data-theme=monochrome] .nav-links.open{background:var(--bg);border-color:var(--line)}
:root[data-theme=monochrome] .stats,:root[data-theme=monochrome] .product-section,:root[data-theme=monochrome] .mini-account{background:var(--surface);border-color:var(--line)}
:root[data-theme=monochrome] .hero-sculpture{filter:grayscale(1) drop-shadow(0 24px 20px rgba(0,0,0,.12))}
:root[data-theme=monochrome] img:not(.hero-sculpture),:root[data-theme=monochrome] canvas,:root[data-theme=monochrome] svg{filter:grayscale(1)}
:root[data-theme=monochrome] .button,:root[data-theme=monochrome] .btn-primary{background:#171717;color:#fff;border-color:#171717}
:root[data-theme=monochrome] .button:hover,:root[data-theme=monochrome] .btn-primary:hover{background:#353535}
:root[data-theme=monochrome] .button.outline,:root[data-theme=monochrome] .btn-secondary,:root[data-theme=monochrome] .nav-cta{background:transparent;color:#171717;border-color:#737373}
:root[data-theme=monochrome] .button.outline:hover,:root[data-theme=monochrome] .btn-secondary:hover{background:#eee}
:root[data-theme=monochrome] .badge,:root[data-theme=monochrome] .avatar,:root[data-theme=monochrome] .filters button[aria-pressed=true],:root[data-theme=monochrome] .demo-banner,:root[data-theme=monochrome] .notice,:root[data-theme=monochrome] .entry-icon,:root[data-theme=monochrome] .next-event{background:#ededed;color:#303030;border-color:#c8c8c8}
:root[data-theme=monochrome] .positive,:root[data-theme=monochrome] .negative,:root[data-theme=monochrome] .mini-change,:root[data-theme=monochrome] .result>span:first-child,:root[data-theme=monochrome] .login-status.error,:root[data-theme=monochrome] #quoteStatus,:root[data-theme=monochrome] .apply-toast.error{color:#303030}
:root[data-theme=monochrome] .amount-input,:root[data-theme=monochrome] .apply-form input[type=email]{background:#fff;color:var(--ink);border-color:#999}
:root[data-theme=monochrome] .allocation-track span:first-child,:root[data-theme=monochrome] .allocated,:root[data-theme=monochrome] .available{background:#303030}
:root[data-theme=monochrome] .allocation-track span+span,:root[data-theme=monochrome] .pending{background:#aaa}
:root[data-theme=monochrome] .reserved{border-color:#777}
:root[data-theme=monochrome] .timeline-dot{background:#ededed}
:root[data-theme=monochrome] .timeline-dot.completed{background:#303030}
:root[data-theme=monochrome] .calendar-date,:root[data-theme=monochrome] .timeline>div,:root[data-theme=monochrome] .currency{border-color:#aaa}
:root[data-theme=monochrome] .globe-stat{background:#f0f0f0;border-color:#ddd}



:root[data-theme=monochrome] .grain-overlay{opacity:.018}
:root[data-theme=monochrome] #particles-canvas{display:none}
/* Formatting corrections shared by every design. */
.app-nav{background:var(--surface);border-color:var(--line)}
.text-link:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.design-choices button{gap:6px}
.art-caption{gap:16px;align-items:flex-start;line-height:1.5}
.art-caption span:last-child{text-align:right}
.globe-section .container{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.globe-section .container>*{min-width:0}
#globe-canvas{width:100%!important;height:auto!important;max-width:500px}
.globe-content{padding-right:0}
.hero-copy,.product-layout>*,.fees-layout>*{min-width:0}
.mini-breakdown{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.mini-breakdown strong{font-variant-numeric:tabular-nums;white-space:nowrap}
@media(min-width:769px) and (max-width:1100px){.dashboard-grid,:root[data-theme=forest] .dashboard-grid{grid-template-columns:minmax(0,1fr)}nav,nav.scrolled{padding-left:24px;padding-right:24px}.nav-links{gap:16px}.nav-links a{letter-spacing:.04em}.hero,:root:is([data-theme=ivory],[data-theme=final]) .hero,:root[data-theme=forest] .hero{padding:64px 32px;gap:24px;grid-template-columns:1.15fr 1fr}.hero h1,:root:is([data-theme=ivory],[data-theme=final]) .hero h1{font-size:58px}.hero-actions{flex-direction:column}.product-layout{gap:32px}.mini-account{padding:24px}.mini-value{font-size:48px}}
@media(max-width:768px){.globe-section .container{grid-template-columns:minmax(0,1fr)}.globe-section{padding:64px 24px}.art-caption{font-size:8px;letter-spacing:.06em}.page-heading{align-items:flex-start}.app-header{flex-wrap:wrap}.mini-breakdown strong{font-size:14px}.mini-account{padding:22px}}
@media(max-width:480px){.design-choices button{flex-direction:column;gap:4px;padding:6px 3px;font-size:10px;min-height:48px}.design-number{display:none}.design-swatch{width:10px;height:10px}.design-bar{padding:4px 8px}.login-panel h1{font-size:34px}.demo-access dl>div{flex-wrap:wrap;gap:4px 12px}.demo-access .row{flex-wrap:wrap}}
@media(max-width:359px){.mini-account{padding:18px}.mini-breakdown strong{font-size:12px}.mini-header{font-size:9px}.hero-badge{font-size:9px;letter-spacing:.13em}}

@media(max-width:600px){.section-heading{align-items:flex-start;flex-direction:column}.section-heading .button{width:100%}.section-heading h2{font-size:25px}}

button.btn-primary{border:1px solid transparent}
:root[data-theme=monochrome] .ic{background:#eee;color:#222}
:root[data-theme=monochrome] .login-panel input:autofill{box-shadow:inset 0 0 0 1000px #fff;-webkit-text-fill-color:#161616}
@media(min-width:769px) and (max-width:1000px){.product-layout,:root:is([data-theme=ivory],[data-theme=final]) .product-layout{grid-template-columns:minmax(0,1fr)}.mini-account{width:100%;max-width:none}}

/* Shared semantic colours cover illustrations, controls and native form states. */
:root{--art-bg:#000;--art-ink:#f5f0e8;--art-muted:#b3ad9e;--art-accent:#e0c068;--globe-surface:#050505;--globe-wire:#c9a84c;--positive:#a4cab1;--negative:#edaa95;color-scheme:dark}
:root:is([data-theme=ivory],[data-theme=final]){--globe-surface:#f6f3eb;--globe-wire:#846223;--positive:#376447;--negative:#9b442c;color-scheme:light}
:root[data-theme=forest]{--globe-surface:#102c26;--globe-wire:#e1c68d;--positive:#b6d6ba;--negative:#f2b19c;color-scheme:dark}
:root[data-theme=monochrome]{--art-ink:#fff;--art-muted:#ccc;--art-accent:#fff;--globe-surface:#fafafa;--globe-wire:#242424;--positive:#242424;--negative:#555;color-scheme:light}
/* Photography keeps its original lighting; only the black-and-white palette desaturates it. */
:root:not([data-theme=onyx]) .img-band,:root:not([data-theme=onyx]) .cta-section{background:var(--art-bg);color:var(--art-ink)}
:root:not([data-theme=onyx]) .img-band img,:root:not([data-theme=onyx]) .cta-bg{mix-blend-mode:normal}
:root:not([data-theme=onyx]) .band-cap p,:root:not([data-theme=onyx]) .cta-section p{color:var(--art-muted)}
:root:not([data-theme=onyx]) .band-cap h3 em,:root:not([data-theme=onyx]) .cta-section h2 em{color:var(--art-accent)}
:root[data-theme=monochrome] .cta-section .btn-primary{background:#fff;color:#111;border-color:#fff}
:root[data-theme=monochrome] .cta-section .btn-primary:hover{background:#ddd}
:root:not([data-theme=onyx]) .nav-cta:hover{background:var(--gold);color:var(--bg);border-color:var(--gold)}
:root:not([data-theme=onyx]) .nav-cta:hover .ic{background:transparent;color:inherit}
:root[data-theme=forest] .button:hover{background:#eed9ae}
:root[data-theme=forest] .button.outline:hover{background:#2b4b3d}
:root[data-theme=monochrome] .btn-primary .ic{background:#333;color:#fff}
:root:not([data-theme=onyx]) .mini-chart path:first-child{stroke:var(--line)}
:root:not([data-theme=onyx]) .mini-chart path+path{stroke:var(--gold)}
:root:not([data-theme=onyx]) .globe-stat{background:var(--surface);border-color:var(--line)}
:root:not([data-theme=onyx]) .fund-row,:root:not([data-theme=onyx]) footer{border-color:var(--line)}
:root:not([data-theme=onyx]) .principles-grid,:root:not([data-theme=onyx]) .roadmap-timeline{background:transparent}
:root:not([data-theme=onyx]) .principle{background:var(--bg)}
:root:not([data-theme=onyx]) .result>span:first-child,:root:not([data-theme=onyx]) .positive,:root:not([data-theme=onyx]) .mini-change{color:var(--positive)}
:root:not([data-theme=onyx]) .negative,:root:not([data-theme=onyx]) .login-status.error,:root:not([data-theme=onyx]) #quoteStatus,:root:not([data-theme=onyx]) .apply-toast.error{color:var(--negative)}
:root:not([data-theme=onyx]) .login-panel input:autofill{box-shadow:inset 0 0 0 1000px var(--surface);-webkit-text-fill-color:var(--ink)}
:root[data-theme=monochrome] .nav-logo svg g{fill:var(--gold);stroke:var(--gold)}
:root:is([data-theme=ivory],[data-theme=final]) .nav-logo svg g{fill:var(--gold);stroke:var(--gold)}

/* Final direction: Ivory reading canvas, Onyx identity and account-value surfaces. */
:root[data-theme=final] :is(.hero,.app-header,.portfolio,.login-story,body>footer,nav:not(.app-nav)){
 --bg:#090a08;--surface:#11120f;--ink:#f5f0e8;--white:#f5f0e8;--muted:#b3ad9e;--white-dim:#b3ad9e;--gold:#c9a84c;--gold-light:#e0c068;--line:#343328;--positive:#a4cab1;
 background:var(--bg);color:var(--ink);border-color:var(--line);color-scheme:dark;
}
:root[data-theme=final] .hero{box-shadow:0 0 0 100vmax #090a08;clip-path:inset(0 -100vmax)}
:root[data-theme=final] .hero .btn-primary{background:#e0c068;color:#17170f;border-color:#e0c068}
:root[data-theme=final] .hero .btn-primary:hover{background:#ead38c}
:root[data-theme=final] :is(.hero .btn-secondary,.nav-cta){color:#e0c068;border-color:#6f6140}
:root[data-theme=final] .hero .btn-secondary:hover{background:#24231a}
:root[data-theme=final] .nav-logo svg g{fill:#c9a84c;stroke:#c9a84c}
:root[data-theme=final] .nav-links.open{background:#11120f;border-color:#343328;color:#f5f0e8}
:root[data-theme=final] .nav-cta:hover{background:#e0c068;color:#17170f}
:root[data-theme=final] .portfolio .badge{color:#e0c068;background:#252319;border-color:#665936}
:root[data-theme=final] .portfolio .result>span:first-child{color:#a4cab1}
:root[data-theme=final] .portfolio .result>span+span{color:var(--muted)}
:root[data-theme=final] .app-header .text-link{color:#e0c068}
:root[data-theme=final] .app-header .avatar{background:#28271e;color:#e0c068;border-color:#494431}
:root[data-theme=final] .login-story{padding:32px;border-radius:3px}
:root[data-theme=final] .login-story .eyebrow{color:#e0c068}
:root[data-theme=final] .cta-section .btn-primary{background:#e0c068;color:#17170f;border-color:#e0c068}
:root[data-theme=final] body>footer{max-width:none;padding-left:max(24px,calc((100vw -1100px)/2));padding-right:max(24px,calc((100vw -1100px)/2))}

/* Black market stage keeps the gold globe legible in every palette. */
.globe-market-section{background:#000;color:#f5f0e8;--globe-surface:#000;--globe-wire:#e0c068}
.globe-market-section .section-label,.globe-market-section h2 em,.globe-market-section .globe-stat-value{color:#e0c068}
.globe-market-section .section-desc,.globe-market-section .globe-stat-label{color:#b3ad9e}
:root .globe-market-section .globe-stat{background:#0b0b09;border-color:#343024}
.globe-market-section #globe-canvas{background:#000}
