
:root{--paper:#ebe9e2;--ink:#2d3531;--muted:#7b8178;--gold:#a58e69;--positive:#426c5b;--negative:#a45e4d;font-family:MiSans,'Microsoft YaHei',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden}button,input,select{font:inherit}button{background:none;border:0;color:inherit;cursor:pointer;min-width:44px;min-height:44px;touch-action:manipulation}button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:1px solid var(--gold);outline-offset:5px}[hidden]{display:none!important}#world{position:fixed;inset:0;touch-action:none;outline-offset:-5px}#world canvas{width:100%;height:100%;display:block}.atmosphere{pointer-events:none;position:fixed;inset:0;background:linear-gradient(180deg,#ebe9e288,transparent 24%,transparent 77%,#ebe9e2aa)}header{position:fixed;left:5%;right:5%;top:max(30px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:flex-start;z-index:3}#brand{display:flex;align-items:center;gap:20px;padding:0;text-align:left}#brand svg{width:58px;height:44px;color:var(--ink)}#brand>span{font-size:25px;font-weight:700;letter-spacing:-.8px;line-height:1}#brand small{font-size:8px;display:block;letter-spacing:2.25px;font-weight:400;margin-top:9px}.mock{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:2px;padding-top:11px}.mock i{width:4px;height:4px;border-radius:50%;background:var(--gold)}.axis{position:fixed;top:27%;left:5%;display:flex;gap:12px;align-items:center;writing-mode:vertical-rl;font-size:8px;letter-spacing:2px;color:#8b9087;pointer-events:none}.axis i{width:1px;height:54px;background:#8e988b55}#edge{position:fixed;right:0;top:33%;height:34%;width:36px;min-width:36px;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}#edge span{height:1px;width:12px;background:#919988;transition:width .4s}#edge span:nth-child(2){width:22px}#edge b{font-size:14px;font-weight:400;margin-top:10px;opacity:.65}#edge:hover span{width:23px}footer{position:fixed;left:5%;right:5%;bottom:max(25px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;pointer-events:none;z-index:3}#clock-open{pointer-events:auto;text-align:left;padding:0}#clock{display:flex;font-size:23px;letter-spacing:1px;font-variant-numeric:tabular-nums;line-height:1.1}#clock-open small{display:block;font-size:8px;letter-spacing:1.5px;color:#788278;margin-top:9px}#connection-dot{display:inline-block;width:4px;height:4px;background:var(--positive);margin-left:9px;border-radius:50%}#hint{font-size:9px;letter-spacing:1px;color:#737d73;padding-bottom:3px;transition:opacity .5s}#health{position:absolute;right:0;bottom:26px;font-size:10px;color:var(--negative)}.slot{display:inline-block;overflow:hidden;vertical-align:bottom;min-width:.6em}.slot>span{display:block;animation:roll .48s cubic-bezier(.16,1,.3,1)}@keyframes roll{from{transform:translateY(110%);filter:blur(2px)}to{transform:translateY(0);filter:none}}
#specimen{position:fixed;left:9%;top:22%;width:310px;z-index:2;pointer-events:none;animation:reveal .8s both}.indexline{display:flex;align-items:baseline;gap:13px;font-size:9px;letter-spacing:2px;color:var(--muted)}.indexline b{font-size:35px;font-weight:400;color:var(--ink);letter-spacing:-1px}#asset-status{font-size:11px;margin-top:22px;letter-spacing:1px}#pnl{font-size:clamp(24px,4vw,42px);font-weight:600;letter-spacing:-1px;margin-top:8px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.positive{color:var(--positive)}.negative{color:var(--negative)}#detail{pointer-events:auto;padding:0;font-size:11px;margin-top:12px;display:flex;align-items:center;gap:48px}#detail span{font-size:24px}#rotor-nav{position:fixed;left:9%;bottom:19%;display:flex;gap:20px;align-items:center;z-index:3}#rotor-nav button{font-size:22px}#nav-label{font-size:13px;letter-spacing:2px;min-width:58px;text-align:center}body[data-view=archive] #edge{display:none}body[data-view=archive] .axis{opacity:0}
#boot{position:fixed;inset:0;background:var(--paper);z-index:20;display:grid;place-items:center;overflow:hidden}#boot.out{animation:bootExit .7s ease forwards;pointer-events:none}.boot-mark{text-align:center;width:230px;z-index:1}.boot-mark svg{width:174px;height:128px;overflow:visible}.boot-mark svg path{stroke-dasharray:500;stroke-dashoffset:500;animation:draw 1.25s .45s cubic-bezier(.4,0,.2,1) forwards}.boot-mark svg g[fill=currentColor]{opacity:0;animation:appear .4s 1.45s forwards}.boot-mark strong{display:block;font-size:35px;font-weight:700;letter-spacing:-1px;overflow:hidden;animation:reveal .7s 1.2s both}.boot-mark small{display:block;font-size:8px;letter-spacing:2px;margin-top:18px;animation:appear .4s 1.6s both;color:var(--muted)}.boot-lines{position:absolute;inset:30% -20%;transform:rotate(-18deg)}.boot-lines i{position:absolute;left:0;right:0;top:40%;height:1px;background:linear-gradient(90deg,transparent,#80948655,transparent);animation:signal 1.6s both}.boot-lines i:nth-child(2){top:50%;animation-delay:.12s;background:linear-gradient(90deg,transparent,#b19a7455,transparent)}.boot-lines i:nth-child(3){top:60%;animation-delay:.25s}#skip{position:absolute;right:5%;bottom:5%;font-size:11px}.boot-id{position:absolute;left:5%;bottom:6%;font-size:8px;letter-spacing:2px;color:var(--muted)}@keyframes draw{to{stroke-dashoffset:0}}@keyframes signal{from{transform:translateX(-55%);opacity:0}50%{opacity:1}to{transform:translateX(30%);opacity:0}}@keyframes bootExit{to{opacity:0;filter:blur(3px)}}@keyframes appear{from{opacity:0}to{opacity:1}}@keyframes reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
dialog{border:0;background:#f0eee8f5;color:var(--ink);padding:42px;width:min(490px,calc(100% - 32px));max-height:85dvh;overflow:auto;box-shadow:0 25px 100px #36433222;border-radius:2px}dialog::backdrop{background:#afb4a944;backdrop-filter:blur(8px)}dialog h2{font-size:30px;font-weight:600;letter-spacing:-1px;margin:15px 0 25px}dialog p{font-size:12px;line-height:1.8}dialog small{font-size:10px;color:var(--muted);line-height:1.7}.eyebrow{font-size:9px;letter-spacing:2px;color:var(--muted)}.close{position:absolute;right:12px;top:10px;font-size:27px;font-weight:400}.row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 0;border-bottom:1px solid #9ca69830;font-size:12px}.row b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.big-number{font-size:clamp(25px,6.5vw,41px);letter-spacing:-1px;overflow-wrap:anywhere;font-weight:600}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.actions button{font-size:11px;padding:8px 13px;border-bottom:1px solid #939d8a55}.actions button[aria-pressed=true]{color:var(--gold);border-color:var(--gold)}.solid{display:block;background:var(--ink);color:var(--paper);width:100%;margin:18px 0}.chart{width:100%;height:auto;display:block;margin:20px 0}select,input{width:100%;background:transparent;border:0;border-bottom:1px solid #7e8c7955;color:inherit;padding:14px 0;font-size:14px}input[type=checkbox]{width:20px;height:20px;accent-color:var(--ink)}#code{font-size:28px;letter-spacing:10px;text-align:center}#auth-error{min-height:18px;color:var(--negative)}details{padding:15px 0;border-bottom:1px solid #89958033}summary{font-size:12px;cursor:pointer}#toast{position:fixed;bottom:110px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:30;background:var(--ink);color:var(--paper);padding:12px 20px;font-size:11px;transition:.3s;max-width:85%;white-space:nowrap}#toast.show{transform:translate(-50%,0);opacity:1}.price-rail{height:2px;position:relative;background:#9d9e8b55;margin:30px 5px 12px}.price-rail i{position:absolute;left:var(--position);height:16px;width:2px;top:-7px;background:var(--gold)}.rail-labels{display:flex;justify-content:space-between;font-size:10px;gap:12px}.rail-labels small{display:block}
@media(max-width:650px){header{left:26px;right:25px;top:28px}#brand{gap:12px}#brand svg{width:45px;height:37px}#brand>span{font-size:22px}#brand small{font-size:6px;letter-spacing:1.65px}.mock{font-size:8px;padding-top:8px}.axis{left:25px;top:25%;font-size:7px}.axis i{height:30px}footer{left:28px;right:25px;bottom:max(26px,env(safe-area-inset-bottom))}#hint{font-size:8px}#clock{font-size:21px}#specimen{left:30px;top:19%;width:240px}.indexline b{font-size:28px}#asset-status{margin-top:15px}#pnl{font-size:28px}#rotor-nav{left:23px;bottom:18%}dialog{padding:34px 25px}.boot-mark svg{width:148px}.boot-mark strong{font-size:30px}}
@media(max-height:650px){header{top:16px}#specimen{top:22%}#pnl{font-size:24px}#detail{margin-top:3px}.axis{display:none}footer{bottom:14px}}
.paused *{animation-play-state:paused!important}.reduced *{animation:none!important;transition:none!important}.reduced #boot{display:none} .reduced *{scroll-behavior:auto!important}

.pnl-unit{display:block;margin-top:6px;font-size:8px;letter-spacing:1px;color:var(--muted)}#edge{touch-action:none}

.chart #curve{stroke-dasharray:650;stroke-dashoffset:0;animation:trace .65s ease-out}@keyframes trace{from{stroke-dashoffset:650}to{stroke-dashoffset:0}}

/* Camera and typography share one reversible transition. */
#specimen{animation:none;opacity:var(--archive-opacity,0);transform:translateY(var(--archive-shift,18px))}#specimen[inert] #detail{pointer-events:none}.axis,#edge{opacity:var(--home-opacity,1)}body[data-view=archive] #edge{display:flex;pointer-events:none}body[data-view=archive] .axis{opacity:var(--home-opacity,1)}

/* Quiet home readout; signs carry P/L direction, not signal colors. */
.positive,.negative{color:var(--ink)}
#capital-summary{position:fixed;top:112px;left:5%;display:flex;gap:42px;z-index:2;pointer-events:none;opacity:var(--home-opacity,1);color:#73766c;font-variant-numeric:tabular-nums}
#capital-summary>div{min-width:0}#capital-summary>div>span{display:block;font-size:9px;letter-spacing:1px}#capital-summary small{font-size:7px;margin-left:5px;letter-spacing:.5px;color:#8c8e84}#capital-summary b{display:block;margin-top:8px;font-size:18px;letter-spacing:.1px;font-weight:400}#capital-summary .slot{min-width:0}
@media(max-width:650px){#capital-summary{left:28px;right:25px;top:112px;gap:26px;justify-content:space-between}#capital-summary b{font-size:16px}#capital-summary>div>span{font-size:8px}#capital-summary small{font-size:6px;margin-left:3px}}
@media(max-width:350px){#capital-summary{gap:12px}#capital-summary b{font-size:14px}}
@media(max-height:650px){#capital-summary{top:92px}}

/* Sampling aperture emblem: graphic silhouette instead of repeated initials. */
#brand{gap:15px;align-items:center}#brand svg{width:41px;height:41px;flex:none}#brand>span{font-size:23px;letter-spacing:-.6px}#brand small{font-size:7px;letter-spacing:1.7px;margin-top:8px}
.boot-mark svg{width:112px;height:112px;margin-bottom:24px}.boot-mark svg path{stroke-dasharray:none;stroke-dashoffset:0;animation:none}.boot-mark svg g[fill=currentColor]{opacity:1;animation:none}.boot-mark svg g[fill=currentColor] path{transform-box:fill-box;transform-origin:center;animation:apertureIn 1s cubic-bezier(.16,1,.3,1) both}.boot-mark svg g[fill=currentColor] path:nth-child(1){animation-delay:.25s}.boot-mark svg g[fill=currentColor] path:nth-child(2){animation-delay:.45s}.boot-mark svg g[fill=currentColor] path:nth-child(3){animation-delay:.6s}.boot-mark svg g[fill=currentColor] path:nth-child(4){animation-delay:.8s}.boot-mark svg g[fill=none]{animation:appear .6s 1s both}@keyframes apertureIn{from{opacity:0;transform:translateY(-15px) scaleX(.25);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:650px){#brand{gap:12px}#brand svg{width:35px;height:35px}#brand>span{font-size:21px}#brand small{font-size:6px;letter-spacing:1.25px}.boot-mark svg{width:100px;height:100px}}

/* Give the solid emblem more presence than its calibration lines. */
#brand svg{width:48px;height:46px}#brand{gap:16px}@media(max-width:650px){#brand svg{width:43px;height:42px}#brand{gap:13px}}

.header-tools{display:flex;align-items:center;gap:18px}.header-tools .mock{padding-top:0}#header-replay{display:flex;align-items:center;gap:6px;padding:0;font-size:9px;letter-spacing:1px;color:var(--muted)}#header-replay svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
#auth{position:fixed;inset:0;z-index:15;background:var(--paper);overflow:auto;isolation:isolate;min-height:100dvh}.login-mast{position:absolute;top:38px;left:6%;display:flex;align-items:center;gap:16px}.login-mast img{width:47px;height:47px}.login-mast>span{font-size:23px;font-weight:700;letter-spacing:-.7px}.login-mast small{display:block;font-size:7px;letter-spacing:1.5px;margin-top:7px;font-weight:400}.login-demo{position:absolute;right:6%;top:57px;font-size:8px;letter-spacing:1.5px;color:var(--muted)}#auth-form{position:relative;width:min(350px,calc(100% - 64px));margin:max(170px,23vh) auto 120px;animation:reveal .8s both}#auth h1{font-size:38px;letter-spacing:-1.5px;font-weight:500;margin:18px 0 12px}.login-caption{font-size:12px;letter-spacing:3px;color:var(--muted);margin-bottom:54px}#auth label{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:var(--muted)}#auth label span{font-size:8px}#auth #code{border:0;border-radius:0;background:transparent;text-align:left;font-size:38px;letter-spacing:17px;padding:17px 0 10px;color:var(--ink);height:78px}#auth #code:focus-visible{outline:none;box-shadow:0 1px 0 #a58e6966}#auth-error{font-size:10px;margin:4px 0 12px;height:22px;color:#8c6855}#login-submit{display:flex;width:100%;justify-content:space-between;align-items:center;padding:0;text-align:left;font-size:15px;letter-spacing:3px;margin:14px 0 27px}#login-submit span:last-child{font-size:32px;font-weight:400;transition:transform .3s}#login-submit:hover span:last-child{transform:translate(4px,-4px)}#login-note{font-size:9px;line-height:1.7;color:var(--muted)}.login-foot{position:absolute;bottom:30px;left:6%;right:6%;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.5px;color:var(--muted)}.login-orbit{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.login-orbit i{position:absolute;width:100vh;height:100vh;border:1px solid #a58e6920;border-radius:50%;left:60%;top:10%;transform:rotateX(35deg) rotateZ(-25deg);animation:loginDrift 24s ease-in-out infinite alternate}.login-orbit i:nth-child(2){width:94vh;height:94vh;left:63%;top:13%;border-color:#7e8a7d1a;animation-delay:-8s}.login-orbit i:nth-child(3){width:115vh;height:115vh;left:58%;top:4%;border-style:dashed;border-color:#a58e6918;animation-delay:-16s}@keyframes loginDrift{to{transform:translate(-25px,30px) rotateX(48deg) rotateZ(12deg)}}
@media(max-width:650px){.header-tools{gap:12px}#header-replay span{display:none}.login-mast{left:28px;top:28px;gap:13px}.login-mast img{width:43px;height:42px}.login-mast>span{font-size:21px}.login-demo{right:28px;top:91px}#auth h1{font-size:34px}.login-orbit i{left:48%;opacity:.7}.login-foot{left:32px;right:32px;font-size:7px}.login-caption{margin-bottom:44px}}
@media(max-height:650px){#auth-form{margin-top:145px;margin-bottom:85px}.login-caption{margin-bottom:25px}.login-foot{position:relative;bottom:22px}}

#auth{overflow-x:hidden}@media(max-height:650px){.login-foot{width:calc(100% - 64px);left:32px;right:auto}}

/* Abstract fast/slow convergence and a smoothed trend, independent of live data. */
.boot-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.65;animation:flowReveal 1.1s ease both}.signal-curves{fill:none;stroke:url(#signal-ink);stroke-width:1;animation:signalDrift 9s ease-in-out infinite alternate;transform-origin:center}.signal-curves>use:nth-child(2){opacity:.6;stroke-width:1.3}.signal-curves>use:nth-child(3){opacity:.36;stroke-width:1.4}.signal-curves .signal-trace{stroke:#b69b74;stroke-width:1.7;stroke-dasharray:80 1650;animation:signalTravel 4.2s linear infinite;opacity:.8}.signal-curves .signal-trace.slow{stroke:#85958a;stroke-dasharray:120 1550;animation-duration:5.7s;animation-delay:-2s}.signal-samples{fill:none;stroke:#ac9979;stroke-width:2;opacity:.3}.signal-samples path{transform-box:fill-box;transform-origin:center;animation:sampleReveal 1.1s var(--delay) cubic-bezier(.2,.7,.2,1) both}@keyframes sampleReveal{from{opacity:0;transform:scaleY(.05)}to{opacity:1;transform:scaleY(1)}}@keyframes flowReveal{from{opacity:0}to{opacity:.65}}@keyframes signalTravel{from{stroke-dashoffset:1700}to{stroke-dashoffset:0}}@keyframes signalDrift{from{transform:translate(-12px,10px)}to{transform:translate(20px,-18px)}}

.signal-curves use{vector-effect:non-scaling-stroke}.signal-samples path{vector-effect:non-scaling-stroke;stroke-width:1.2}.signal-samples{opacity:.45}

/* Stronger signal presence; motion stays decorative and separate from values. */
.boot-flow{animation-name:flowRevealStrong}.signal-curves{stroke-width:1.45}.signal-curves>use:nth-child(2){opacity:.85;stroke-width:1.7}.signal-curves>use:nth-child(3){opacity:.6;stroke-width:1.5}.signal-curves .signal-trace{stroke:#94713c;stroke-width:2.4;opacity:1;stroke-dasharray:140 1200;animation-duration:2.8s}.signal-curves .signal-trace.slow{stroke:#657e70;stroke-width:2;animation-duration:3.8s}.signal-samples{opacity:.65}@keyframes flowRevealStrong{from{opacity:0}to{opacity:.92}}

#auth .auth-field{display:block;width:100%;border:0;border-bottom:1px solid #87917b55;border-radius:0;background:transparent;font:inherit;font-size:18px;letter-spacing:1px;padding:12px 0 10px;margin:4px 0 22px;color:var(--ink)}#auth .auth-field:focus-visible{outline:none;border-bottom-color:var(--gold)}
#auth .auth-alt{display:block;width:100%;padding:15px 0;margin:0 0 12px;border:1px solid #87917b55;border-radius:2px;background:transparent;color:var(--ink);font:inherit;font-size:13px;letter-spacing:2px}#auth .auth-alt:hover{border-color:var(--gold)}
#auth .auth-link{display:block;padding:6px 0;margin:0 0 18px;border:0;background:none;color:var(--muted);font:inherit;font-size:11px;letter-spacing:1px;text-decoration:underline;text-underline-offset:4px}
#passkey-offer{position:relative;width:min(350px,calc(100% - 64px));margin:max(170px,23vh) auto 120px;animation:reveal .8s both}#passkey-error{font-size:10px;color:#8c6855;min-height:18px}
[hidden]{display:none!important}
/* Crisp pass: no haze over the scene, stronger ink, readable minimum sizes on phones. */
:root{--muted:#5f675f}
.atmosphere{display:none}
#capital-summary{color:#555d55}
#capital-summary b{color:var(--ink);font-weight:500;letter-spacing:-.2px}
#capital-summary small{color:#6f766d}
.axis{color:#6f766d}
#clock-open small{color:#5f675f}
#hint{color:#5f675f}
@media(max-width:650px){
  #capital-summary b{font-size:18px}
  #capital-summary>div>span{font-size:10px}
  #capital-summary small{font-size:8px}
  #brand small{font-size:7px;letter-spacing:1.4px}
  .mock{font-size:10px}
  #hint{font-size:10px}
  #clock-open small{font-size:9px}
  .pnl-unit{font-size:10px}
  .indexline{font-size:10px}
}

/* Three-figure summary: total, today, unsettled. */
@media(max-width:650px){#capital-summary{gap:12px}#capital-summary b{font-size:17px}}
@media(max-width:350px){#capital-summary b{font-size:13px}#capital-summary>div>span{font-size:9px}}

/* Theme-only palette: no signal red/green anywhere; state is shown by tone and form. */
:root{--positive:var(--ink);--negative:var(--ink)}
#connection-dot{background:#87917b;box-sizing:border-box}
#connection-dot[data-state=loading]{background:var(--gold)}
#connection-dot[data-state=offline],#connection-dot[data-state=stale]{background:transparent;border:1px solid var(--muted)}
#health{color:var(--gold)}
#auth-error,#passkey-error{color:var(--gold)}
#capital-summary b,#auth h1{font-weight:400}
/* Time-of-day palettes. Literal colours above are re-pointed at tokens so every period re-tints the whole UI. */
@property --paper{syntax:'<color>';inherits:true;initial-value:#ebe9e2}
@property --ink{syntax:'<color>';inherits:true;initial-value:#2d3531}
@property --muted{syntax:'<color>';inherits:true;initial-value:#5f675f}
@property --gold{syntax:'<color>';inherits:true;initial-value:#a58e69}
@property --sub{syntax:'<color>';inherits:true;initial-value:#555d55}
@property --faint{syntax:'<color>';inherits:true;initial-value:#6f766d}
@property --line{syntax:'<color>';inherits:true;initial-value:#9ca69838}
@property --sheet{syntax:'<color>';inherits:true;initial-value:#f0eee8f5}
@property --scrim{syntax:'<color>';inherits:true;initial-value:#afb4a944}
@property --sage{syntax:'<color>';inherits:true;initial-value:#87917b}
:root{--sub:#555d55;--faint:#6f766d;--line:#9ca69838;--sheet:#f0eee8f5;--scrim:#afb4a944;--sage:#87917b;
  transition:--paper 2.8s ease,--ink 2.8s ease,--muted 2.8s ease,--gold 2.8s ease,--sub 2.8s ease,--faint 2.8s ease,--line 2.8s ease,--sheet 2.8s ease,--scrim 2.8s ease,--sage 2.8s ease}
:root[data-period=dawn]{--paper:#171c20;--ink:#e6e3d9;--muted:#9aa39a;--gold:#c7a877;--sub:#b4bab1;--faint:#8e978e;--line:#c8d2c82e;--sheet:#1f2529f5;--scrim:#05080a88;--sage:#7f9a8c;color-scheme:dark}
:root[data-period=afternoon]{--paper:#ede4d4;--ink:#3a3128;--muted:#7d6f5e;--gold:#b0874f;--sub:#5f5243;--faint:#85776a;--line:#9a876a38;--sheet:#f3ebdff5;--scrim:#b3a48a44;--sage:#9a8f72}
:root[data-period=dusk]{--paper:#262228;--ink:#ece2d6;--muted:#a89c95;--gold:#d4a86a;--sub:#c1b5ab;--faint:#958a86;--line:#e6c8aa29;--sheet:#2d282ef5;--scrim:#0a070b88;--sage:#9d8c98;color-scheme:dark}
body{background:var(--paper);color:var(--ink)}
#capital-summary,#clock-open small,#hint{color:var(--sub)}
#capital-summary small,.axis{color:var(--faint)}
dialog{background:var(--sheet);color:var(--ink)}dialog::backdrop{background:var(--scrim)}
.row,details{border-bottom-color:var(--line)}
select,input,.actions button{border-bottom-color:var(--line)}
.price-rail{background:var(--line)}
#auth .auth-field,#auth .auth-alt{border-color:var(--line)}
#edge span{background:var(--faint)}
#connection-dot{background:var(--sage)}
#connection-dot[data-state=loading]{background:var(--gold)}
#connection-dot[data-state=offline],#connection-dot[data-state=stale]{background:transparent;border:1px solid var(--muted)}
:root[data-period=dawn] .login-mast img,:root[data-period=dusk] .login-mast img{filter:invert(.9)}
select option{background:var(--paper);color:var(--ink)}
#period-label{margin-left:6px}
:root.instant{transition:none!important}
a{color:var(--gold);text-underline-offset:3px}
/* The opening waits on its first frame until the app is ready, so it plays once, from the start. */
#boot.waiting,#boot.waiting *{animation-play-state:paused!important}
/* Root and safe-area strips follow the period with a plain colour transition (see applyPeriod). */
html,body{transition:background-color 2.8s ease}
:root.instant,:root.instant body{transition:none!important}
/* Sheets: instrument-panel styling — hairlines, small caps, gold ticks, tabular figures. */
dialog{padding:34px 30px 30px;border:1px solid var(--line);border-radius:3px;box-shadow:0 30px 90px #00000024}
dialog[open]{animation:sheetIn .38s cubic-bezier(.16,1,.3,1)}
@keyframes sheetIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.reduced dialog[open]{animation:none}
@media(max-width:650px){dialog{width:calc(100% - 24px);max-height:88dvh;padding:30px 22px 26px}}
.close{right:8px;top:6px;font-size:22px;font-weight:300;color:var(--muted)}
.sh-head{margin:0 0 20px}
.sh-head .eyebrow{margin:0;padding-right:40px}
.sh-head h2{margin:10px 0 0;font-size:26px;font-weight:600;letter-spacing:-.5px;display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.sh-head::after{content:"";display:block;height:1px;margin-top:16px;background:linear-gradient(90deg,var(--gold) 0 26px,var(--line) 26px)}
.sh-sub{margin:6px 0 0;font-size:12px;color:var(--muted)}
.sh-tag{font-size:10px;font-weight:400;letter-spacing:1px;padding:4px 8px;border:1px solid var(--line);border-radius:2px;color:var(--sub)}
.sh-menu{display:flex;flex-direction:column}
.sh-menu button{display:grid;grid-template-columns:30px 1fr auto 16px;align-items:center;gap:10px;min-height:58px;padding:0;border-bottom:1px solid var(--line);text-align:left}
.sh-menu i{font-style:normal;font-size:10px;letter-spacing:1px;color:var(--gold);font-variant-numeric:tabular-nums}
.sh-menu span{font-size:15px}
.sh-menu small{font-size:9px;letter-spacing:1.6px;color:var(--faint)}
.sh-menu b{font-weight:400;color:var(--muted);transition:transform .25s}
.sh-menu button:hover b,.sh-menu button:focus-visible b{transform:translate(2px,-2px);color:var(--gold)}
.sh-note{display:flex;gap:10px;margin:18px 0 0;font-size:11px;line-height:1.7;color:var(--sub)}
.sh-dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--sage);margin-top:7px}
.sh-hero{display:flex;align-items:baseline;gap:8px}
.sh-hero b{font-size:clamp(30px,9vw,42px);font-weight:600;letter-spacing:-1px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sh-hero span{font-size:11px;letter-spacing:1px;color:var(--muted)}
.sh-caption{margin:5px 0 0;font-size:10px;letter-spacing:.3px;color:var(--faint);min-height:1em}
.sh-grid{display:grid;grid-template-columns:1fr 1fr;margin:20px 0 0;border-top:1px solid var(--line)}
.sh-stat{min-width:0;padding:14px 0;border-bottom:1px solid var(--line)}
.sh-stat:nth-child(odd){padding-right:14px;border-right:1px solid var(--line)}
.sh-stat:nth-child(even){padding-left:14px}
.sh-stat span{display:block;font-size:10px;letter-spacing:.5px;color:var(--muted)}
.sh-stat b{display:block;margin-top:6px;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sh-stat b em{font-style:normal;font-weight:400;font-size:11px;color:var(--muted)}
.sh-stat small{display:block;margin-top:5px;font-size:9.5px;line-height:1.55;color:var(--faint)}
.sh-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:13px 0;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--sub)}
.sh-line b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.sh-tabs{display:flex;gap:2px;margin:22px 0 4px;border-bottom:1px solid var(--line)}
.sh-tabs button{min-height:36px;min-width:0;padding:0 12px;margin-bottom:-1px;font-size:11px;letter-spacing:1px;color:var(--muted);border-bottom:1.5px solid transparent}
.sh-tabs button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--gold)}
.sh-chart{margin:16px 0 0;color:var(--gold)}
.sh-chart svg{display:block;width:100%;height:auto;overflow:visible}
.sh-chart .line{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sh-chart .base{stroke:var(--line);vector-effect:non-scaling-stroke}
.sh-chart .dot{fill:var(--paper);stroke:currentColor;stroke-width:1.5;vector-effect:non-scaling-stroke}
.sh-chart figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:9.5px;color:var(--faint)}
.sh-chart figcaption b{display:block;margin-top:2px;font-size:11px;font-weight:600;color:var(--sub);font-variant-numeric:tabular-nums}
.sh-chart figcaption span:last-child{text-align:right}
.sh-chart.empty{padding:44px 0;text-align:center;font-size:11px;color:var(--faint);border:1px dashed var(--line)}
.sh-day{margin:20px 0 8px;font-size:10px;font-weight:400;letter-spacing:1.5px;color:var(--gold)}
.sh-head+.sh-day{margin-top:4px}
.sh-timeline{list-style:none;margin:0;padding:0 0 0 16px;border-left:1px solid var(--line)}
.sh-timeline li{position:relative;display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:baseline;padding:9px 0}
.sh-timeline li::before{content:"";position:absolute;left:-19.5px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--paper);border:1px solid var(--muted);box-sizing:border-box}
.sh-timeline li.trade::before{background:var(--gold);border-color:var(--gold)}
.sh-timeline time{font-size:10px;color:var(--faint);font-variant-numeric:tabular-nums}
.sh-timeline p{margin:0;font-size:12.5px;line-height:1.45}
.sh-timeline p b{font-weight:600;margin-right:7px}
.sh-timeline small{display:block;margin-top:3px;font-size:10px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.sh-timeline em{font-style:normal;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.sh-rail{position:relative;height:1px;margin:44px 6px 10px;background:var(--line)}
.sh-rail i{position:absolute;top:-4px;width:1px;height:9px;background:var(--muted)}
.sh-rail i.entry{top:-3px;height:7px;background:var(--faint)}
.sh-rail i.now{top:-8px;width:2px;height:17px;margin-left:-.5px;background:var(--gold)}
.sh-rail i.now::after{content:attr(data-label);position:absolute;bottom:21px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:600;color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}
.sh-rail-labels{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.sh-rail-labels small{display:block;font-size:9px;letter-spacing:.5px;color:var(--faint)}
.sh-rail-labels span:nth-child(2):not(:last-child){text-align:center}
.sh-rail-labels span:last-child{text-align:right}
.sh-group{margin-top:20px}
.sh-group h3{margin:0 0 2px;font-size:10px;font-weight:400;letter-spacing:1.8px;color:var(--gold)}
.sh-field,.sh-switch{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;cursor:pointer}
.sh-field small,.sh-switch small{display:block;margin-top:3px;font-size:10px;color:var(--faint)}
.sh-select{position:relative;flex:0 1 200px;min-width:0}
.sh-select select{-webkit-appearance:none;appearance:none;width:100%;border:0;padding:8px 18px 8px 0;font-size:12.5px;text-align:right;text-align-last:right;color:var(--ink);background:transparent;cursor:pointer}
.sh-select::after{content:"";position:absolute;right:3px;top:50%;width:6px;height:6px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sh-switch input{position:absolute;width:1px;height:1px;opacity:0}
.sh-switch i{flex:none;position:relative;width:34px;height:18px;border:1px solid var(--line);border-radius:9px;transition:background .25s,border-color .25s}
.sh-switch i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .25s,background .25s}
.sh-switch input:checked+i{background:var(--gold);border-color:var(--gold)}
.sh-switch input:checked+i::after{transform:translateX(16px);background:var(--paper)}
.sh-switch input:focus-visible+i{outline:1px solid var(--gold);outline-offset:3px}
.sh-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sh-btn{min-height:34px;min-width:0;padding:0 14px;border:1px solid var(--line);border-radius:2px;font-size:11px;letter-spacing:1px;transition:border-color .2s,color .2s}
.sh-btn:hover,.sh-btn:focus-visible{border-color:var(--gold);color:var(--gold)}
.sh-foot{margin:22px 0 0;font-size:10px;line-height:1.7;color:var(--faint)}
.sh-rail-labels{position:relative}.sh-rail-labels span.entry{position:absolute;top:0;transform:translateX(-50%);text-align:center}
/* Solid strips on the top/bottom edges: Safari samples fixed edge elements to tint its status bar and toolbar. */
.edge-tint{position:fixed;left:0;right:0;z-index:25;pointer-events:none;background-color:var(--edge-bg,var(--paper));transition:background-color 2.8s ease}
.edge-tint.top{top:0;height:max(env(safe-area-inset-top),6px)}
.edge-tint.bottom{bottom:0;height:max(env(safe-area-inset-bottom),6px)}
:root.instant .edge-tint{transition:none}
/* Home-screen app: the page runs under a translucent status bar, so content clears the notch and the
   period colour reaches the very top. Light periods get a faint shade so the (always white) status text stays legible. */
:root{--sat:env(safe-area-inset-top,0px)}
header{top:calc(30px + var(--sat))}
#capital-summary{top:calc(112px + var(--sat))}
.login-mast{top:calc(38px + var(--sat))}
.login-demo{top:calc(57px + var(--sat))}
@media(max-width:650px){header{top:calc(28px + var(--sat))}#capital-summary{top:calc(112px + var(--sat))}.login-mast{top:calc(28px + var(--sat))}.login-demo{top:calc(91px + var(--sat))}}
@media(max-height:650px){header{top:calc(16px + var(--sat))}#capital-summary{top:calc(92px + var(--sat))}}
.status-shade{display:none}
@media(display-mode:standalone){
  .edge-tint{display:none}
  .status-shade{display:block;position:fixed;top:0;left:0;right:0;height:calc(var(--sat) + 24px);z-index:26;pointer-events:none;background:linear-gradient(#1b211e5c,#1b211e00);opacity:0;transition:opacity 2.8s ease}
  :root[data-period=day] .status-shade,:root[data-period=afternoon] .status-shade{opacity:1}
  :root.instant .status-shade{transition:none}
}
/* The vertical axis label always starts below the balance row (which clears the status bar). */
.axis{top:max(27%,calc(196px + var(--sat)))}
@media(max-width:650px){.axis{top:max(25%,calc(196px + var(--sat)))}}
/* Header tools: symbols only. Refresh spins while pulling. */
.header-tools{gap:6px}
.header-tools .tool{display:grid;place-items:center;width:40px;height:40px;min-width:40px;min-height:40px;padding:0;color:var(--muted)}
.header-tools .tool svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
#header-replay svg path{fill:currentColor;stroke:none}
#refresh.spinning svg{animation:toolSpin .9s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes toolSpin{to{transform:rotate(360deg)}}
/* Clean touch: no grey tap rectangles, no long-press callouts; a quiet fade acknowledges the press instead. */
*{-webkit-tap-highlight-color:transparent}
body{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
button{transition:opacity .2s ease}
button:active{opacity:.5;transition:none}
:focus:not(:focus-visible){outline:none}
/* Header symbols share one optical size; the triangle is filled, the refresh arcs are stroked at matching weight. */
.header-tools .tool svg{width:18px;height:18px}
#header-replay svg{width:18px;height:18px}
#header-replay svg path{fill:currentColor;stroke:currentColor;stroke-width:1.2;stroke-linejoin:round}
#refresh svg{stroke-width:1.6}
/* Vertical pages (02 CAPITAL / 03 EVENTS): hairlines, tokens only, gold marks "now" and the selection. */
#pages{position:fixed;inset:0;z-index:2;pointer-events:none}
.page{position:absolute;inset:0;pointer-events:none;touch-action:none;overflow:hidden}
.page.active{pointer-events:auto}
.pg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.pg-svg path,.pg-svg circle{fill:none;vector-effect:non-scaling-stroke}
.pg-axis{stroke:var(--faint);stroke-width:1;opacity:.8}
.pg-ring{stroke:var(--faint);stroke-width:1;stroke-opacity:.55}.pg-ring.faint{stroke:var(--line);stroke-opacity:1}
.pg-tick{stroke:var(--faint);stroke-width:.8;stroke-opacity:.7}
.pg-settle{stroke:var(--sub);stroke-width:1}
.pg-arc{stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.pg-today{stroke:var(--sub);stroke-width:1}
.pg-trace,.pg-signal{stroke:var(--ink);stroke-width:1.25;stroke-linejoin:round;stroke-linecap:round}
.pg-svg .pg-now{fill:var(--gold);stroke:var(--paper);stroke-width:1.5}
.pg-now-tick{stroke:var(--gold);stroke-width:1.5}
.pg-cursor,.pg-leader{stroke:var(--gold);stroke-width:1}
.pg-bars{stroke:var(--ink);stroke-width:1.2;stroke-opacity:.75}.pg-bars.today{stroke-width:1.7;stroke-opacity:1}
.pg-now-bar{stroke:var(--gold);stroke-width:2.2}
.pg-groove{stroke:var(--faint);stroke-width:.9;stroke-opacity:.8}
.pg-ridge{stroke:var(--ink);stroke-width:1;stroke-linejoin:round}.pg-ridge.today{stroke-width:1.6}.pg-ridge.sel{stroke:var(--gold);stroke-width:1.6}
.pg-svg .pg-ridge-fill{fill:var(--paper);stroke:none;opacity:.94}
.pg-dayline{stroke:var(--line);stroke-width:1}
.pg-svg text{font-family:MiSans,sans-serif;font-variant-numeric:tabular-nums;fill:var(--faint);font-size:9px;letter-spacing:1px}
.pg-svg .pg-time{fill:var(--sub);font-size:10px;letter-spacing:.3px}.pg-svg .pg-sym{font-size:8.5px;letter-spacing:1.2px}.pg-svg .pg-daytext{font-size:8.5px;letter-spacing:1.4px}
.pg-hours text{text-anchor:middle}
/* Event marks: form, not colour, carries the type. */
.pg-svg .mk-solid{fill:var(--ink);stroke:none}
.pg-svg .mk-open{stroke:var(--ink);stroke-width:1}
.pg-svg .mk-dash{stroke:var(--ink);stroke-width:1.2;stroke-dasharray:4 3}
.pg-svg .mk-dot{stroke:var(--ink);stroke-width:1.6;stroke-dasharray:.5 3.5;stroke-linecap:round}
.pg-svg .mk-settle{fill:var(--ink);stroke:var(--ink);stroke-width:1}
.pg-svg .mk-line{stroke:var(--ink);stroke-width:1}
.pg-svg .mk-stem{stroke:var(--ink);stroke-width:1.5}
.pg-svg .mk-thick{stroke:var(--ink);stroke-width:3}
.pg-svg .sel{stroke:var(--gold)}.pg-svg .mk-solid.sel,.pg-svg .mk-settle.sel{fill:var(--gold)}
/* Readouts */
.pg-center{position:absolute;left:0;top:0;padding:0;text-align:center;color:var(--ink);min-width:44px;min-height:44px;font-variant-numeric:tabular-nums}
.pg-center.plain{pointer-events:none}
.pg-big{display:block;font-size:22px;font-weight:400;letter-spacing:-.4px;line-height:1.1;white-space:nowrap}
.pg-unit{display:block;margin-top:7px;font-size:8.5px;letter-spacing:1.3px;color:var(--faint);white-space:nowrap}
.pg-daily{display:block;margin-top:5px;font-size:10px;letter-spacing:.4px;color:var(--sub);white-space:nowrap}
.pg-split{display:none}.pg-center.split .pg-big,.pg-center.split .pg-unit{display:none}
.pg-center.split .pg-split{display:grid;gap:8px}.pg-split div{display:grid;gap:2px}.pg-split small{font-size:8.5px;letter-spacing:1.3px;color:var(--faint)}.pg-split b{font-size:15px;font-weight:400}
.pg-range{position:absolute;left:0;top:0;min-width:44px;min-height:44px;padding:0 6px;font-size:9px;letter-spacing:1.5px;color:var(--faint);white-space:nowrap}
.pg-range[aria-pressed=true]{color:var(--ink)}.pg-range[aria-pressed=true]::after{content:"";position:absolute;left:50%;bottom:9px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:var(--gold)}
.pg-scales{position:absolute;left:0;top:0;display:flex}.pg-scales .pg-range{position:relative}
.pg-block{position:absolute;left:0;top:0;min-width:52px;min-height:44px;font-size:8.5px;letter-spacing:1.2px;color:var(--faint)}
.pg-block::before{content:"";position:absolute;inset:13px 3px;border:1px solid var(--line);border-radius:1px;transition:border-color .3s}
.pg-block[aria-pressed=true]{color:var(--ink)}.pg-block[aria-pressed=true]::before{border-color:var(--gold)}
.pg-foot{position:absolute;left:0;top:0;text-align:center;white-space:nowrap}
.pg-foot b{display:block;font-size:15px;font-weight:400;font-variant-numeric:tabular-nums}.pg-foot b::before{content:attr(data-label);font-size:8.5px;letter-spacing:1.3px;color:var(--faint);margin-right:8px;vertical-align:2px}
.pg-foot small{display:block;margin-top:6px;font-size:8.5px;letter-spacing:1px;color:var(--faint)}
.pg-read{position:absolute;left:0;top:0}.pg-read .pg-big{font-size:clamp(24px,7vw,34px)}
.pg-empty{position:absolute;left:50%;top:48%;transform:translateX(-50%);font-size:10px;letter-spacing:2px;color:var(--faint)}
.pg-card{position:absolute;left:0;top:0;max-width:min(240px,64vw);pointer-events:none;color:var(--ink);text-shadow:0 0 8px var(--paper),0 0 3px var(--paper)}
.pg-card-head{font-size:12.5px;line-height:1.3}.pg-card-head b{font-weight:600;margin-right:7px}
.pg-card-meta{margin-top:4px;font-size:10px;line-height:1.5;color:var(--sub);overflow-wrap:anywhere}
.pg-card-pnl{display:block;margin-top:4px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.pg-card[data-align=right]{text-align:right}.pg-card[data-align=center],.pg-card[data-align=above]{text-align:center}
.pg-card [aria-label]>span{display:inline-block;white-space:pre;animation:pgSpell .42s cubic-bezier(.16,1,.3,1) both}
@keyframes pgSpell{from{opacity:0;transform:translateY(55%);filter:blur(1.5px)}to{opacity:1;transform:none;filter:none}}
.pg-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;list-style:none}
/* Depth chrome: the › below the device, a bottom band that drags the stack, and the home readout fading with depth. */
#depth-zone{position:fixed;left:0;right:0;bottom:0;height:14vh;z-index:3;touch-action:none}
#descend{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:4;width:44px;height:44px;margin-left:-22px;display:grid;place-items:center;padding:0;color:var(--faint)}
#descend svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transform:rotate(var(--descend-rot,90deg))}
body[data-page="0"] #descend svg{animation:descendBreath 2.6s ease-in-out infinite}
@keyframes descendBreath{50%{translate:0 3px}}
#descend:hover,#descend:focus-visible{color:var(--gold)}
body[data-view=archive] #descend,body[data-view=archive] #depth-zone{opacity:0;pointer-events:none}
#capital-summary{opacity:calc(var(--home-opacity,1)*var(--depth-home,1))}
body[data-page="0"]:not([data-view=archive]) #capital-summary{pointer-events:auto;cursor:pointer}
.axis,#edge{opacity:calc(var(--home-opacity,1)*var(--depth-home,1))}
.axis{opacity:var(--home-opacity,1)}
body:not([data-page="0"]) #edge{pointer-events:none}
.pg-big .slot,.pg-split .slot,.pg-foot .slot{min-width:0}
