@font-face{font-family:Newsreader;src:url('fonts/newsreader-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Newsreader;src:url('fonts/newsreader-latin-400-italic.woff2') format('woff2');font-style:italic;font-display:swap}@font-face{font-family:Newsreader;src:url('fonts/newsreader-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}@font-face{font-family:Plex;src:url('fonts/plexmono-latin-400-normal.woff2') format('woff2');font-display:swap}
:root{--paper:#f3f0e7;--ink:#233e32;--muted:#646c60;--rule:#cbd0be;--lime:#d7e69c;--serif:Newsreader,Georgia,serif;--mono:Plex,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit}button,summary{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid #779240;outline-offset:6px}::selection{background:var(--lime);color:var(--ink)}.wrap{width:calc(100% - 112px);max-width:1240px;margin:auto}.masthead{display:flex;align-items:center;justify-content:space-between;padding:31px 0;border-bottom:1px solid var(--rule)}.brand{font:600 29px var(--serif);letter-spacing:-.7px}.brand span{display:block;font:8px var(--mono);letter-spacing:.12em;margin-top:8px}.masthead nav{display:flex;gap:35px;font-size:12px}.masthead nav span{margin-left:18px}.hero{display:grid;grid-template-columns:1fr 340px;gap:70px;padding-top:66px;padding-bottom:65px}.eyebrow,.small-label{font:10px/1.6 var(--mono);letter-spacing:.07em;margin:0}.eyebrow i{display:inline-block;background:#7b8f46;width:6px;height:6px;border-radius:50%;margin-right:8px}h1,h2,h3,p{margin-top:0}h1{font:400 clamp(65px,6.9vw,100px)/1.02 var(--serif);letter-spacing:-.045em;margin:33px 0 28px}em{font-weight:400}h1 em{color:#667d46}.hero-intro{display:grid;grid-template-columns:110px 1fr;gap:25px;max-width:590px;margin:32px 0}.hero-intro .small-label{font-size:8px;padding-top:4px}.hero-intro p{font-size:14px;line-height:1.8;margin:0}.text-link{font-size:12px;display:inline-flex;gap:55px;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:12px}.text-link span{font-size:18px;line-height:12px}a:hover{color:#6a7d46}.notebook{align-self:center;border:1px solid #bfc7b2;background:#e9ecdf;padding:23px 24px 0;transform:rotate(2deg);box-shadow:8px 10px 0 #e1e3d6;margin-top:30px}.notebook-top,.notebook-bottom{font:8px var(--mono);letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center}.sketch{height:225px;position:relative;display:grid;place-items:center;background-image:linear-gradient(#bdc7b333 1px,transparent 1px),linear-gradient(90deg,#bdc7b333 1px,transparent 1px);background-size:20px 20px;margin:24px -8px}.sketch-circle{height:155px;width:155px;border:1px solid #8da17a;border-radius:50%;font:italic 115px var(--serif);text-align:center;padding-top:23px;position:relative;transform:rotate(-12deg)}.sketch-circle:after{content:'';position:absolute;inset:20px -25px;border:1px solid #8da17a;border-radius:50%;transform:rotate(-35deg)}.sketch-label{position:absolute;font:7px var(--mono);background:#e9ecdf;padding:3px}.label-a{top:15px;left:10px}.label-b{right:0;top:90px}.label-c{bottom:5px;left:50px}.notebook>p{font:29px/1.18 var(--serif);letter-spacing:-.5px;margin:27px 0}.notebook>p em{color:#647b44}.notebook-bottom{border-top:1px solid #bdc7b3;padding:16px 0}.notebook-bottom span:last-child{font-size:18px}.discipline{border-block:1px solid var(--rule)}.discipline .wrap{display:flex;justify-content:space-between;padding:21px 0;font:10px var(--mono)}.section{padding-top:72px;padding-bottom:72px}.section-head{display:flex;justify-content:space-between;align-items:start;margin-bottom:44px}.section-head>p:last-child{font:17px/1.35 var(--serif);margin:0}.project-intro{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;margin-bottom:40px}h2{font:400 54px/1.04 var(--serif);letter-spacing:-1.9px;margin-bottom:23px}.project-intro p,.model-copy>p:not(.eyebrow):not(.small-label){font-size:14px;line-height:1.8;color:var(--muted);max-width:455px}.project-intro .text-link{margin-top:8px}.system{background:#233d31;color:var(--paper);padding:24px 28px 0}.system-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #536651;padding-bottom:20px;font:8px var(--mono);gap:15px}.system-header strong{font:500 20px var(--mono);letter-spacing:-1px}.system-status{color:var(--lime)}.system-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:28px 0}.system-flow article{border-right:1px solid #536651;padding:3px 25px}.system-flow article:first-child{padding-left:0}.system-flow article:last-child{border:0}.system-flow article>span{font:9px var(--mono);color:var(--lime)}.system-flow h3{font:37px var(--serif);margin:23px 0 14px}.system-flow p{font-size:12px;line-height:1.85;color:#c8d0be}.system-flow small{font:7px var(--mono);color:#aabd9e}.system-footer{display:flex;justify-content:space-between;border-top:1px solid #536651;padding:16px 0;font:8px var(--mono);color:#c8d0be}.evidence-strip{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;margin-top:29px}.evidence-strip>div{border-right:1px solid var(--rule);padding-left:28px;display:flex;gap:17px}.evidence-strip>div:first-child{display:block;padding:0}.evidence-strip>div:last-child{border:0}.evidence-strip span{font:8px var(--mono)}.evidence-strip b{font:30px var(--serif);color:#7d8c65}.evidence-strip p{font-size:11px;line-height:1.6;margin:0}.evidence-strip>div:first-child p{margin-top:7px}.notes{background:#e8ebdf;border-block:1px solid var(--rule)}.notes-intro{display:flex;justify-content:space-between;gap:70px;margin-bottom:35px}.notes-intro>p{font-size:13px;line-height:1.8;max-width:280px;padding-top:10px}.case{border-top:1px solid #b7c2aa}.case:last-child{border-bottom:1px solid #b7c2aa}.case summary{display:grid;grid-template-columns:60px 145px 1fr 32px;gap:15px;align-items:center;padding:26px 0;list-style:none}.case summary::-webkit-details-marker,.model-notes summary::-webkit-details-marker{display:none}.case-number{font:24px var(--serif);color:#7a8b67}.case-meta{font:8px/1.8 var(--mono);text-transform:uppercase;color:#596a50}.case h3{font:28px/1.2 var(--serif);margin:0;letter-spacing:-.5px}.expand{font:25px var(--serif);text-align:center}.case[open] .expand{transform:rotate(45deg)}.case-body{padding:0 65px 22px 220px;max-width:1060px;font:19px/1.65 var(--serif)}.case-body p{margin-bottom:20px}.case-body .lesson{border-top:1px solid #bdc7b3;padding-top:20px}.lesson b{display:block;font:9px var(--mono);text-transform:uppercase;margin-bottom:12px}.section-footnote{font:9px/1.7 var(--mono);color:var(--muted);margin:23px 0 0;max-width:680px}.model-section{display:grid;grid-template-columns:1fr 1fr;gap:90px}.model-copy h2{margin-top:28px}.model-copy>.small-label{font-size:8px;margin:26px 0;color:var(--muted)}.model-notes{border-block:1px solid var(--rule);font-size:12px;max-width:430px}.model-notes summary{display:flex;justify-content:space-between;list-style:none;padding:17px 0}.model-notes p{font-size:13px;line-height:1.7;color:var(--muted)}.model{border:1px solid #bdc7b2;background:#e9ecdf;padding:27px;align-self:center;min-width:0}.model-top{display:flex;justify-content:space-between;align-items:center;font:8px var(--mono);padding-bottom:25px}.model-top button{background:none;border:0;color:var(--ink);font:9px var(--mono);padding:5px}.model>.small-label{font-size:8px;display:block}.model>output{display:block;font:67px var(--serif);letter-spacing:-3px;margin:9px 0 15px}.model label{display:flex;justify-content:space-between;font:10px var(--mono);margin:17px 0 9px}.model input{width:100%;accent-color:var(--ink);cursor:pointer;margin:0}.model-bars{height:120px;display:flex;gap:16px;align-items:end;border-bottom:1px solid #a8b59a;margin:10px 0 27px;padding:0 10px}.bar{position:relative;background:#9dac87;flex:1;min-height:1px}.bar:last-child{background:var(--ink)}.bar span{position:absolute;width:100%;bottom:-18px;font:8px var(--mono);text-align:center}.bar small{position:absolute;top:-16px;font:8px var(--mono);width:100%;text-align:center}.model-bottom{font:8px/1.8 var(--mono);color:#5c6b51;border-top:1px solid #bdc7b2;padding-top:15px}.method{background:#233d31;color:var(--paper);padding:70px 0}.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px}.method h2{font-size:66px;margin-top:35px}.method em{color:var(--lime)}.method-grid>div>p:last-child{font-size:13px;line-height:1.7;color:#c8d0be;max-width:290px}.principles article{display:flex;gap:24px;border-top:1px solid #546751;padding:23px 0}.principles article>span{font:9px var(--mono);color:var(--lime);padding-top:4px}.principles h3{font:25px var(--serif);margin-bottom:10px}.principles p{font-size:12px;line-height:1.8;color:#c8d0be;margin-bottom:0}.services-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:65px;margin-top:35px}.service-list article{display:grid;grid-template-columns:25px 1fr;gap:0 15px;border-top:1px solid var(--rule);padding:20px 0}.service-list article>span{font:9px var(--mono);padding-top:4px}.service-list h3{font:26px var(--serif);margin-bottom:10px}.service-list p{grid-column:2;font-size:13px;line-height:1.7;color:var(--muted);margin:0;max-width:380px}.contact{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;padding:65px 0;border-top:1px solid var(--rule)}.contact h2{font-size:87px;margin:30px 0 0}.contact-copy{align-self:end;padding-bottom:8px}.contact-copy>p{font-size:14px;line-height:1.8;max-width:350px}.contact-copy .contact-pending{font:9px/1.7 var(--mono);color:var(--muted);margin:25px 0}.contact-copy .text-link{margin-top:12px}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--rule);padding:30px 0;gap:20px}footer p,footer>a:last-child{font:9px var(--mono);margin:0}footer .brand{font-size:23px}.skip{position:absolute;top:-100px;left:15px;padding:15px;background:var(--lime);z-index:5}.skip:focus{top:10px}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero{gap:40px;grid-template-columns:1fr 280px}.notebook{padding:20px 18px 0}.notebook>p{font-size:26px}.hero-intro{grid-template-columns:1fr;gap:10px}h1{font-size:76px}.project-intro{gap:45px}.system-flow article{padding-inline:18px}.system-flow h3{font-size:32px}.system-flow small{font-size:6px}.model-section,.method-grid{gap:45px}.case-body{padding-left:170px}.case summary{grid-template-columns:40px 115px 1fr 30px}.evidence-strip>div{padding-left:16px;gap:10px}.contact h2{font-size:74px}}
@media(max-width:800px){.hero{grid-template-columns:1fr 230px;gap:30px}h1{font-size:64px}.notebook{padding:16px 14px 0}.notebook-top{font-size:6px}.sketch{height:175px}.sketch-circle{width:125px;height:125px;font-size:92px;padding-top:18px}.notebook>p{font-size:23px}.notebook-bottom{font-size:6px}.hero-intro p{font-size:13px}h2{font-size:45px}.system-flow{grid-template-columns:1fr 1fr;gap:25px 0}.system-flow article:nth-child(2){border-right:0}.system-flow article:nth-child(3){padding-left:0}.system-flow small{font-size:8px}.system-status{display:none}.evidence-strip{grid-template-columns:1fr 1fr;gap:22px}.evidence-strip>div:nth-child(2){border:0}.evidence-strip>div:nth-child(3){padding:0}.notes-intro{gap:30px}.notes-intro>p{max-width:210px}.case h3{font-size:25px}.model-section{gap:30px}.model{padding:20px}.model-top{font-size:7px}.model-bars{gap:9px}.method-grid{gap:35px}.method h2{font-size:56px}.services-layout{gap:35px}.contact{gap:30px}.contact h2{font-size:65px}footer p{display:none}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.masthead{padding:24px 0;align-items:center}.brand{font-size:25px}.brand span{font-size:6px;letter-spacing:0}.masthead nav{gap:18px;font-size:10px}.masthead nav a:nth-child(2){display:none}.masthead nav span{margin-left:4px}.hero{display:block;padding:43px 0}.hero h1{font-size:clamp(57px,12.4vw,76px);margin:26px 0}.hero .eyebrow{font-size:8px}.hero-intro{margin:26px 0}.hero-intro p{font-size:14px}.notebook{display:none}.discipline .wrap{font-size:7px;gap:14px;line-height:1.7;padding:16px 0}.section{padding-block:45px}.section-head{margin-bottom:28px;gap:22px}.eyebrow{font-size:8px}.section-head>p:last-child{font-size:14px}.project-intro{grid-template-columns:1fr;gap:0;margin-bottom:30px}h2{font-size:44px}.project-intro p{font-size:14px}.system{padding:18px 17px 0}.system-header{flex-wrap:wrap;gap:10px;font-size:6px;padding-bottom:15px}.system-header strong{font-size:18px}.system-flow{padding:22px 0;gap:28px 0}.system-flow article{padding:0 12px}.system-flow h3{font-size:28px;margin:18px 0 12px}.system-flow article>span{font-size:7px}.system-flow p{font-size:10px}.system-flow small{font-size:6px}.system-footer{font-size:6px;line-height:1.7;gap:12px}.evidence-strip>div{min-width:0}.evidence-strip p{font-size:10px}.notes-intro{display:block;margin-bottom:28px}.notes-intro>p{max-width:none;font-size:14px}.case summary{grid-template-columns:27px 1fr 24px;gap:8px;padding:22px 0}.case-meta{grid-column:2;font-size:7px}.case-number{grid-row:1 / 3;align-self:start;font-size:21px}.case h3{grid-column:2;font-size:25px}.expand{grid-column:3;grid-row:1 / 3}.case-body{padding:0 0 15px 35px;font-size:18px}.section-footnote{font-size:8px}.model-section{grid-template-columns:1fr;gap:30px}.model-copy h2{margin-top:24px}.model{padding:25px}.model-top{font-size:8px}.model-bars{gap:15px}.method{padding:45px 0}.method-grid{grid-template-columns:1fr;gap:25px}.method h2{font-size:58px;margin-top:25px}.method-grid>div>p:last-child{max-width:340px}.principles article{padding:21px 0}.services-layout{grid-template-columns:1fr;gap:10px;margin-top:25px}.service-list h3{font-size:25px}.contact{grid-template-columns:1fr;gap:28px;padding:45px 0}.contact h2{font-size:73px;margin-top:25px}.contact-copy>p{max-width:none}.contact-copy .contact-pending{margin:17px 0}footer{padding:24px 0}footer .brand{font-size:23px}footer>a:last-child{font-size:8px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media print{.notebook,.model input,.masthead nav{display:none}body{background:white;color:black}.wrap{width:100%}.section{padding-block:25px}.case-body{display:block!important}.system,.method{background:#eee;color:black}.system p,.principles p{color:black}}
/* Current layout refinements */
.notes{display:none!important}.project-intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;max-width:none;align-items:start}.project-intro>div{margin-top:0}.project-intro p{max-width:650px}.project-intro .text-link{display:none}@media(max-width:600px){.project-intro{grid-template-columns:1fr;gap:0}.project-intro>div{margin-top:28px}}
/* ================================================================
   Embedded ZTrader workspace demo — visual recreation of the real
   frontend (Documents/code/ZTrader/frontend/{css/style.css,js/**}).
   Class names and colors below are taken directly from that app so
   this reads as the actual UI, not an invented mockup. Only the five
   apps below (Chart, Quote, Clock, Performance, Map) are shown, with
   no zoom control, no Alerts app, and no functional buttons — every
   figure on screen is fictional, generated client-side in script.js.
   ================================================================ */
.system{
  --zt-bg:#020303; --zt-plot:#010202; --zt-surface:#090b0b; --zt-surface-hi:#131717;
  --zt-panel:#0b0e0e; --zt-card:#111515; --zt-border:#465350; --zt-border-hi:#687672;
  --zt-text:#e6ebe7; --zt-text-strong:#fbfdf7; --zt-text-dim:#b2bdb7; --zt-text-muted:#7d8983;
  --zt-text-faint:#5a6761; --zt-accent:#83a5b3; --zt-cyan:#8fc2cb; --zt-amber:#d0ae62;
  --zt-green:#78b88f; --zt-red:#c65d58; --zt-candle-up:#089981; --zt-candle-down:#f23645;
  --zt-font:'IBM Plex Mono','SF Mono','Cascadia Code','JetBrains Mono',monospace;
  background:var(--zt-bg)!important;color:var(--zt-text)!important;
  border:1px solid var(--zt-border)!important;padding:0!important;
  box-shadow:0 12px 24px #15221b66;font-family:var(--zt-font)!important;
  transform:none!important;border-radius:4px;overflow:hidden;
}
.zt-topbar{position:relative;display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:var(--zt-surface);border-bottom:1px solid var(--zt-border-hi);flex-shrink:0}
.zt-topbar .zt-logo{font-size:13px;font-weight:800;color:var(--zt-accent);letter-spacing:-.5px}
.zt-topbar .zt-badge{font-size:8px;font-weight:700;letter-spacing:.14em;color:var(--zt-green);background:rgba(120,184,143,.12);border:1px solid rgba(120,184,143,.35);padding:2px 6px;border-radius:3px}
/* Fixed UTC-4 clock, centered in the top bar — matches frontend/index.html's
   #utc-clock-top exactly (frontend/css/style.css, frontend/js/app.js). */
.zt-topbar .zt-topbar-time{position:absolute;left:50%;transform:translateX(-50%);font-size:12px;font-weight:600;color:var(--zt-text);font-family:var(--zt-font);font-variant-numeric:tabular-nums;pointer-events:none}
.zt-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-areas:'chart chart quotes' 'perf clock map';gap:8px;padding:8px}

/* Window chrome — .wm-window / .wm-titlebar, straight from workspace.js */
.wm-window{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--zt-panel);border:1px solid var(--zt-border-hi);border-radius:6px;overflow:hidden}
.wm-titlebar{display:flex;align-items:center;height:28px;min-height:28px;background:var(--zt-surface);border-bottom:1px solid var(--zt-border-hi);padding:0 8px;gap:6px;flex-shrink:0}
.wm-icon{font-size:12px;line-height:1}
.wm-title{font-size:11px;font-weight:600;color:var(--zt-text);flex:1;white-space:nowrap}
.wm-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.zt-area-chart{grid-area:chart}
.zt-area-quotes{grid-area:quotes}
.zt-area-perf{grid-area:perf}
.zt-area-clock{grid-area:clock}
.zt-area-map{grid-area:map}

/* Chart app — apps/chart.js's .fc-* toolbar/legend classes */
.fc-pane{position:relative;flex:1;min-height:0;background:var(--zt-plot)}
.fc-overlay{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;flex-direction:column;pointer-events:none}
.fc-tool-row{display:flex;align-items:center;gap:6px;padding:6px 8px 3px;background:linear-gradient(to bottom,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 100%)}
.fc-sym-btn{display:flex;align-items:center;gap:4px;background:rgba(2,3,3,.86);border:1px solid var(--zt-border);padding:3px 7px;border-radius:3px;font-family:var(--zt-font)}
.fc-exch{font-size:8px;color:var(--zt-text-muted);font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.fc-sym{font-size:12px;font-weight:800;color:var(--zt-text-strong)}
.fc-tf-badge{font-size:9px;color:var(--zt-text-dim);background:rgba(225,236,231,.18);border-radius:3px;padding:0 4px}
.fc-ohlcv-row{display:flex;align-items:center;gap:8px;padding:0 10px 6px;font-size:10px}
.fc-o,.fc-h,.fc-l,.fc-c{color:var(--zt-text-muted)}
.fc-h b{color:var(--zt-candle-up)}.fc-l b{color:var(--zt-candle-down)}
.fc-o b,.fc-c b{color:var(--zt-text)}
.fc-ohlcv-row b{font-weight:600}
.fc-chg{font-weight:600;font-size:10px}
.fc-chg.up{color:var(--zt-candle-up)}.fc-chg.down{color:var(--zt-candle-down)}
.fc-chart-svg{display:block;width:100%;height:100%}

/* Quote app — apps/quotes.js's .qt-* tile; frameless in the real app, so
   these sit directly in the grid area with no titlebar, exactly like
   several stacked Quote windows would. */
.zt-quote-stack{grid-area:quotes;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:hidden}
.qt-tile{position:relative;display:flex;align-items:center;gap:10px;padding:9px 11px;background:var(--zt-panel);border:1px solid var(--zt-border-hi);border-radius:6px;overflow:hidden;flex:1;min-height:0}
.qt-sym-btn{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;font-family:var(--zt-font)}
.qt-sym{font-size:13px;font-weight:800;color:var(--zt-text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt-exch{font-size:8px;font-weight:700;letter-spacing:.5px;color:var(--zt-text-muted);text-transform:uppercase}
.qt-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.qt-price{font-size:13px;font-weight:800;color:var(--zt-text-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.qt-price.qt-up{color:var(--zt-green)}.qt-price.qt-down{color:var(--zt-red)}
.qt-change{display:flex;gap:6px;font-size:10px;font-weight:600;color:var(--zt-text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.qt-change.qt-up{color:var(--zt-green)}.qt-change.qt-down{color:var(--zt-red)}

/* Clock app — apps/clock.js's .clk-* classes, real ticking time/zones */
.clk-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 12px 12px;gap:5px;flex-shrink:0}
.clk-main-time{display:flex;align-items:baseline;line-height:1;font-family:var(--zt-font)}
.clk-hms{font-size:clamp(24px,5vw,34px);font-weight:600;color:var(--zt-text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.clk-ms{font-size:13px;font-weight:400;color:var(--zt-text-dim);font-variant-numeric:tabular-nums;align-self:flex-end;padding-bottom:.12em}
.clk-date{font-size:11px;font-weight:500;color:var(--zt-text);text-align:center}
.clk-local-tz{font-size:9px;color:var(--zt-text-dim);font-family:var(--zt-font);text-align:center}
.clk-sync{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--zt-text-muted);font-family:var(--zt-font);margin-top:2px}
.clk-sync-dot{width:5px;height:5px;border-radius:50%;background:var(--zt-green);flex-shrink:0;box-shadow:0 0 4px var(--zt-green);animation:zt-clk-pulse 2s ease-in-out infinite}
@keyframes zt-clk-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.clk-divider{height:1px;background:var(--zt-border);margin:0 12px;flex-shrink:0}
.clk-zones-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--zt-border);border-top:1px solid var(--zt-border);flex:1;min-height:0}
.clk-zone{display:flex;flex-direction:column;justify-content:center;padding:6px 10px;background:var(--zt-bg);gap:1px}
.clk-zone--local{background:var(--zt-surface)}
.clk-zone--local .clk-zone-time{color:var(--zt-text-strong)}
.clk-zone-label{font-size:8px;color:var(--zt-text-dim);font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clk-zone-time{font-size:13px;font-weight:600;font-family:var(--zt-font);color:var(--zt-text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.clk-zone-offset{font-size:8px;color:var(--zt-text-muted);font-family:var(--zt-font)}

/* Performance app — apps/performance.js's .pf-* dashboard, own frameless
   header, no PANIC / PROMOTE / SLIPPAGE / PORTFOLIO buttons */
.pf-app{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--zt-bg);color:var(--zt-text);font-family:var(--zt-font);font-size:10px;overflow:hidden}
.pf-head{display:flex;align-items:center;gap:10px;height:26px;padding:0 9px;flex-shrink:0;background:var(--zt-surface);border-bottom:1px solid var(--zt-border)}
.pf-head-title{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--zt-text-strong)}
.pf-head-ts{font-size:9px;color:var(--zt-text-muted);margin-left:auto;font-variant-numeric:tabular-nums}
.pf-body{display:flex;flex:1;min-height:0;overflow:hidden}
.pf-left{flex:0 0 150px;display:flex;flex-direction:column;background:var(--zt-surface);overflow:hidden}
.pf-left-head{padding:5px 7px;font-size:8px;color:var(--zt-text-muted);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--zt-border);flex-shrink:0}
.pf-list{flex:1;min-height:0;overflow-y:auto}
.pf-list-row{display:flex;align-items:center;gap:5px;padding:6px 7px;border-left:2px solid transparent;cursor:pointer;transition:background .08s}
.pf-list-row:hover{background:var(--zt-surface-hi)}
.pf-list-row.active{background:rgba(131,165,179,.13);border-left-color:var(--zt-accent)}
.pf-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.pf-list-name{font-size:9px;font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-list-sub{font-size:8px;color:var(--zt-text-muted);margin-top:1px}
.pf-right{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.pf-detail{flex:1;min-height:0;overflow-y:auto;padding:9px 10px}
.pf-sec{font-size:8px;color:var(--zt-text-muted);letter-spacing:.16em;text-transform:uppercase;margin:10px 0 6px;padding-bottom:3px;border-bottom:1px solid var(--zt-border)}
.pf-sec:first-child{margin-top:0}
.pf-dash-strip{display:flex;gap:1px;background:var(--zt-border);border:1px solid var(--zt-border);margin-bottom:10px}
.pf-dash-cell{flex:1;background:var(--zt-bg);padding:6px 8px;min-width:0}
.pf-dash-lbl{font-size:7px;color:var(--zt-text-muted);letter-spacing:.1em;text-transform:uppercase}
.pf-dash-val{font-size:15px;font-weight:700;line-height:1.1;margin-top:2px;font-variant-numeric:tabular-nums}
.pf-dash-sub{font-size:7px;color:var(--zt-text-muted);margin-top:2px}
.pf-tbl-wrap{overflow-x:auto}
.pf-tbl{width:100%;border-collapse:collapse;font-size:9px}
.pf-tbl th{text-align:left;padding:3px 7px;font-size:7px;font-weight:600;color:var(--zt-text-muted);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--zt-border);white-space:nowrap;background:var(--zt-surface)}
.pf-tbl td{padding:3px 7px;border-bottom:1px solid rgba(70,83,80,.3);white-space:nowrap;font-variant-numeric:tabular-nums}
.pf-tbl .num{text-align:right}

/* Per-strategy detail view (renderPerf in the real app) — headline stat
   grid, equity curve, trade counts. Populated per click via script.js. */
.pf-detail-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.pf-detail-title{font-size:14px;font-weight:700;color:var(--zt-text-strong)}
.pf-detail-badge{font-size:8px;font-weight:700;letter-spacing:.08em;padding:2px 6px;border-radius:3px;border:1px solid currentColor}
.pf-grid{display:grid;gap:1px;background:var(--zt-border);border:1px solid var(--zt-border);margin-bottom:10px}
.pf-grid-4{grid-template-columns:repeat(4,1fr)}
.pf-stat{background:var(--zt-bg);padding:7px 9px;min-width:0}
.pf-stat-lbl{font-size:7px;color:var(--zt-text-muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.pf-stat-val{font-size:14px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.pf-stat-sub{font-size:7px;color:var(--zt-text-muted);margin-top:3px;line-height:1.4}
.pf-eq-svg{display:block;width:100%;height:100px;margin-bottom:10px}

/* Map app — apps/map.js's .mp-* SVG treemap, colorForPct() green/red scale */
.mp-svg{display:block;width:100%;height:100%}
.mp-type-rect{fill:var(--zt-bg);stroke:var(--zt-border);stroke-width:1}
.mp-type-label{fill:var(--zt-text-strong);font:700 8px var(--zt-font);letter-spacing:.1em;text-transform:uppercase}
.mp-type-sep{stroke:var(--zt-border);stroke-width:1}
.mp-tile{stroke:var(--zt-bg);stroke-width:1}
.mp-tile-sym{fill:var(--zt-text-strong);font-family:var(--zt-font);font-weight:700;text-anchor:middle}
.mp-tile-pct{fill:var(--zt-text-strong);font-family:var(--zt-font);font-weight:600;text-anchor:middle;opacity:.92}

.zt-footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--zt-border-hi);padding:6px 10px;font-size:7px;letter-spacing:.04em;color:var(--zt-text-muted);background:var(--zt-surface)}

@media(max-width:900px){
  .zt-grid{grid-template-columns:1fr 1fr;grid-template-areas:'chart chart' 'quotes quotes' 'perf clock' 'map map'}
  .pf-left{display:none}
}
@media(max-width:600px){
  .zt-grid{grid-template-columns:1fr;grid-template-areas:'chart' 'quotes' 'perf' 'clock' 'map'}
  .clk-hms{font-size:28px}
}

/* ================================================================
   Excel-in-browser exhibit (03 / The Approach) — faithful recreation
   of Microsoft Excel's UI: title bar, ribbon, formula bar, grid, sheet
   tabs, status bar. Read-only — no formula engine. Cell contents are
   pre-authored fictional numbers (script.js); clicking a cell selects
   it and updates the Name Box/formula bar, clicking a sheet tab swaps
   the fictional company model shown. System font stack only (Segoe
   UI/Calibri) — no external font requests.
   ================================================================ */
.approach-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}
.approach-grid .small-label{display:block;margin-top:20px;color:#9fb09b}
.xl-app{
  --xl-green:#217346; --xl-green-dark:#185c37; --xl-ribbon:#f3f2f1; --xl-ribbon-border:#e1dfdd;
  --xl-border:#d4d4d4; --xl-header:#616161; --xl-sel-bg:#caead8; --xl-sel-text:#0f5132;
  --xl-input:#1763b1; --xl-text:#243449; --xl-navy:#123b56; --xl-input-bg:#edf5ff;
  background:#fff;color:var(--xl-text);border-radius:6px;overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  font-family:'Segoe UI',Calibri,Arial,sans-serif;font-size:11px;line-height:1.3;
  display:flex;flex-direction:column;height:400px;width:100%;min-width:0;
}
.xl-titlebar{display:flex;align-items:center;gap:12px;height:30px;padding:0 10px;background:var(--xl-green-dark);color:#fff;flex-shrink:0}
.xl-qat{display:flex;align-items:center;gap:8px}
.xl-qat svg{width:13px;height:13px;opacity:.92}
.xl-titlebar-name{flex:1;text-align:center;font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xl-titlebar-search{display:none}

.xl-ribbon{background:var(--xl-ribbon);border-bottom:1px solid var(--xl-ribbon-border);flex-shrink:0}
.xl-tabs{display:flex;gap:2px;padding:3px 10px 0;font-size:10.5px}
.xl-tab{padding:5px 9px;color:#444;cursor:pointer;border:none;background:none;font:inherit;border-radius:3px 3px 0 0}
.xl-tab-inert{cursor:default}
.xl-tab-inert:hover{color:#444}
.xl-tab.active{background:#fff;color:var(--xl-green-dark);font-weight:600}
.xl-ribbon-content{display:flex;align-items:stretch;padding:4px 8px;gap:0;overflow-x:auto}
.xl-group{display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:2px 7px;border-right:1px solid var(--xl-ribbon-border);flex-shrink:0}
.xl-group:last-child{border-right:0}
.xl-group:nth-child(n+6){display:none}
.xl-group-row{display:flex;align-items:center;gap:3px}
.xl-group-row+.xl-group-row{margin-top:3px}
.xl-group-label{font-size:9px;color:#5b5b5b;margin-top:3px;white-space:nowrap}
.xl-btn{display:flex;align-items:center;gap:3px;padding:2px 5px;border-radius:2px;color:#333;font-size:9px;cursor:default;line-height:1.1;white-space:nowrap}
.xl-btn svg{width:13px;height:13px;flex-shrink:0}
.xl-btn.big{flex-direction:column;padding:2px 6px;justify-content:center;font-size:8.5px}
.xl-btn.big svg{width:20px;height:20px}
.xl-fchar{font-family:Georgia,serif;font-size:11px;font-weight:700;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:2px}
.xl-select{display:flex;align-items:center;gap:3px;border:1px solid #c8c6c4;background:#fff;border-radius:2px;padding:2px 5px;font-size:9.5px;color:#333;cursor:default}

.xl-formula-bar{display:flex;align-items:center;border-bottom:1px solid var(--xl-border);flex-shrink:0;height:22px}
.xl-namebox{width:62px;height:100%;display:flex;align-items:center;padding:0 7px;border-right:1px solid var(--xl-border);font-size:10.5px;flex-shrink:0}
.xl-fx{width:26px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--xl-border);color:var(--xl-green);font-style:italic;font-weight:700;font-size:11px;flex-shrink:0}
.xl-formula-input{flex:1;padding:0 7px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.xl-grid-wrap{flex:1;min-width:0;min-height:0;overflow:auto;position:relative;background:#fff}
.xl-grid{border-collapse:separate;border-spacing:0;table-layout:fixed}
.xl-grid th,.xl-grid td{border-right:1px solid var(--xl-border);border-bottom:1px solid var(--xl-border);padding:0 5px;height:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10.5px;font-weight:400}
.xl-corner{position:sticky;top:0;left:0;z-index:3;background:var(--xl-ribbon);border-top:0;border-left:0}
.xl-colhead{position:sticky;top:0;z-index:2;background:var(--xl-ribbon);color:var(--xl-header);text-align:center;font-weight:400;cursor:default}
.xl-rowhead{position:sticky;left:0;z-index:1;background:var(--xl-ribbon);color:var(--xl-header);text-align:center;font-weight:400;width:26px;cursor:default}
.xl-colhead.sel,.xl-rowhead.sel{background:var(--xl-sel-bg);color:var(--xl-sel-text);font-weight:700}
.xl-cell{cursor:default;vertical-align:middle}
.xl-cell.sel{outline:2px solid var(--xl-green);outline-offset:-2px;background:rgba(33,115,70,.05)}
.xl-num{text-align:right;font-variant-numeric:tabular-nums}
.xl-input-cell{color:var(--xl-input)}
.xl-input-fill{color:var(--xl-input);background:var(--xl-input-bg)}
.xl-bold{font-weight:700}
.xl-banner{background:var(--xl-navy);color:#fff;font-weight:700}
.xl-subtotal{background:#e9f1f5;color:var(--xl-navy);font-weight:700}
.xl-dim{color:#64748b}
.xl-title-cell{font-weight:700;font-size:13px;color:var(--xl-navy)}
.xl-center{text-align:center}

.xl-sheettabs{display:flex;align-items:center;gap:0;background:var(--xl-ribbon);border-top:1px solid var(--xl-border);flex-shrink:0;padding:0 5px;font-size:10.5px;overflow-x:auto}
.xl-sheet-add{padding:5px 8px;color:var(--xl-green);font-weight:700;cursor:default}
.xl-sheet{padding:6px 11px;color:#444;cursor:pointer;border-right:1px solid var(--xl-ribbon-border);white-space:nowrap}
.xl-sheet.active{background:#fff;color:var(--xl-green-dark);font-weight:600;border-top:2px solid var(--xl-green)}

.xl-statusbar{display:flex;align-items:center;gap:14px;height:19px;padding:0 12px;background:var(--xl-green);color:#fff;font-size:9.5px;flex-shrink:0}
.xl-ready{margin-right:auto}
.xl-sum{font-variant-numeric:tabular-nums}

@media(max-width:800px){
  .approach-grid{grid-template-columns:1fr;gap:30px}
  .xl-app{height:460px}
}
@media(max-width:600px){
  .xl-app{height:400px;font-size:10px}
  .xl-group:nth-child(n+4){display:none}
}

/* Assumption-desk example switcher (02 / The Assumption Desk) — five
   interactive mini-models sharing one exhibit box (.model). Only the
   tab row is new chrome; the output/sliders/bars/caption elements are
   the same ones the old single DCF calculator used, so switching
   examples never changes the box's size (see script.js MODELS). */
.model-tabs{display:flex;gap:10px;flex-wrap:wrap}
.model-tab{background:none;border:0;padding:2px 0;font:8px var(--mono);color:#8a9483;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-bottom:1px solid transparent;white-space:nowrap}
.model-tab:hover{color:var(--ink)}
.model-tab.active{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}

/* Real contact details (replaces the old "coming soon" placeholder) */
.contact-details{display:flex;flex-direction:column;gap:6px;margin:25px 0;font:14px var(--mono)}
.contact-details a{border-bottom:1px solid var(--rule);padding-bottom:2px;transition:border-color .15s,color .15s}
.contact-details a:hover{border-bottom-color:var(--ink)}