:root{ --bg:#000000; --bg-2:#070809; --panel:#0B0D10; --panel-2:#13161A; --line:#1B1F25; --line-2:#2C323A; --text:#EDEFF2; --muted:#949BA5; --dim:#6B727D; --ink:#3F7BA0; /* blueprint line colour, damped for black */ --teal:#35D2F5; --cyan:#3E8EF0; --amber:#F5A524; --green:#4ADE80; --rose:#FB7185; --shadow:0 18px 40px -20px rgba(0,0,0,.85); --r:3px; /* drawings do not have soft corners */ } /* ================= LIGHT THEME ================= Opt-in via data-theme="light" on . Dark stays the default and is untouched. Blueprint-on-paper rather than terminal-on-black. */ html[data-theme="light"]{ --bg:#F4F6F9; --bg-2:#EAEEF3; --panel:#FFFFFF; --panel-2:#F1F4F8; --line:#D2DAE6; --line-2:#B2BECE; --text:#101720; --muted:#3E4B5A; --dim:#6B7787; --ink:#46708F; --teal:#0B7896; --cyan:#1A5FB4; --amber:#96611A; --green:#157F44; --rose:#C2334D; --shadow:0 18px 40px -22px rgba(30,50,80,.30); } /* dark-only assumptions that need flipping on paper */ html[data-theme="light"] body::before{ background-image: linear-gradient(rgba(70,110,150,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(70,110,150,.14) 1px, transparent 1px), linear-gradient(rgba(70,110,150,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(70,110,150,.06) 1px, transparent 1px); } html[data-theme="light"] header{background:rgba(244,246,249,.85)} html[data-theme="light"] .ticker{background:rgba(234,238,243,.75)} html[data-theme="light"] .ticker::before{background:linear-gradient(90deg,var(--bg),transparent)} html[data-theme="light"] .ticker::after{background:linear-gradient(270deg,var(--bg),transparent)} html[data-theme="light"] .panel-card{ background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.96))} html[data-theme="light"] .dw, html[data-theme="light"] .card, html[data-theme="light"] .modal, html[data-theme="light"] .stat, html[data-theme="light"] .exit, html[data-theme="light"] .lim, html[data-theme="light"] .uni, html[data-theme="light"] .corow, html[data-theme="light"] .qz-card, html[data-theme="light"] .metric, html[data-theme="light"] .lead-stat, html[data-theme="light"] .lp{ background:#FFFFFF; background-image:linear-gradient(180deg,rgba(20,40,70,.02),transparent 40%)} html[data-theme="light"] .dw-hero{background:linear-gradient(180deg,#FFFFFF,#F4F7FB)} html[data-theme="light"] .dw-scan{ background-image: linear-gradient(rgba(70,110,150,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(70,110,150,.10) 1px, transparent 1px)} html[data-theme="light"] .con-panel{ background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,248,251,.99))} html[data-theme="light"] .con-head{background:rgba(240,244,248,.97)} html[data-theme="light"] .con-bar input{caret-color:var(--teal)} html[data-theme="light"] .overlay{background:rgba(30,45,70,.42)} html[data-theme="light"] .navpanel{background:rgba(255,255,255,.98)} html[data-theme="light"] .dw-big span, html[data-theme="light"] .hero-h1 em{text-shadow:none} html[data-theme="light"] .dw-spark svg, html[data-theme="light"] .sc-tip, html[data-theme="light"] .typing i{filter:none; box-shadow:none} html[data-theme="light"] .sc-tip{background:#FFFFFF; box-shadow:0 20px 44px -18px rgba(30,50,80,.3)} html[data-theme="light"] .oc-bar, html[data-theme="light"] .dw-track, html[data-theme="light"] .gr-track, html[data-theme="light"] .con-out .con-body{background:#EEF2F6} html[data-theme="light"] ::selection{background:color-mix(in srgb,var(--teal) 26%,transparent); color:#000} html[data-theme="light"] *::-webkit-scrollbar-thumb{background:var(--line-2)} /* theme toggle control */ .theme-tog{display:inline-flex; align-items:center; gap:6px; flex:none; border:1px solid var(--line-2); border-radius:2px; background:var(--panel); color:var(--muted); cursor:pointer; padding:7px 10px; font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; transition:all .18s} .theme-tog:hover{border-color:var(--teal); color:var(--teal)} .theme-tog svg{width:13px; height:13px; display:block} .theme-tog .tt-sun{display:none} html[data-theme="light"] .theme-tog .tt-moon{display:none} html[data-theme="light"] .theme-tog .tt-sun{display:block} @media (max-width:900px){ .bar .theme-tog{display:none} .np-theme .theme-tog{display:inline-flex} } .np-theme{border-top:1px solid var(--line-2); margin-top:6px; padding:12px 8px 4px; display:flex; align-items:center; justify-content:space-between; gap:10px} .np-theme .np-h{border:0; padding:0} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:"IBM Plex Sans",system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* blueprint grid backdrop */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(rgba(90,150,190,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(90,150,190,.13) 1px, transparent 1px), linear-gradient(rgba(90,150,190,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(90,150,190,.055) 1px, transparent 1px); background-size:104px 104px, 104px 104px, 13px 13px, 13px 13px; opacity:.85; mask-image:linear-gradient(180deg,#000 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.2) 100%); } .mono{font-family:"IBM Plex Mono",monospace} /* live figures must not reflow as they tick */ .tk-val,.tk-d,.sbar .val,.gauge-row .num,.sd-v,.baltag,.ar-num,.stat .v,.metric .val,.salary,.growth{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1} .disp{font-family:"IBM Plex Sans Condensed",sans-serif} .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1; transform:none} .wrap{max-width:1180px; margin:0 auto; padding:0 24px; position:relative; z-index:1} /* ---------- top bar ---------- */ header{position:sticky; top:0; z-index:40; backdrop-filter:blur(12px); background:rgba(0,0,0,.82); border-bottom:1px solid var(--line)} .scanline{position:absolute; left:0; bottom:-1px; height:2px; width:0%; background:linear-gradient(90deg,var(--teal),var(--cyan)); transition:width .1s linear; z-index:2} .bar{display:flex; align-items:center; gap:12px; height:66px} .bar nav{flex:1; justify-content:center; overflow-x:auto; scrollbar-width:none} .bar nav::-webkit-scrollbar{display:none} .brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)} .brand .glyph{width:32px; height:32px; flex:none; display:flex; align-items:center; justify-content:center} .brand .glyph img{display:block; width:100%; height:100%; object-fit:contain} .wordmark{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; letter-spacing:.14em; font-size:1.06rem} .wordmark span{color:var(--teal)} nav{display:flex; gap:1px; align-items:center; min-width:0; position:relative} nav a{position:relative; color:var(--muted); text-decoration:none; font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; padding:7px 11px; border-radius:2px; border:1px solid transparent; white-space:nowrap; transition:color .18s, background .18s, border-color .18s} nav a:hover{color:var(--text); background:var(--panel-2)} nav a:focus-visible{outline:none; border-color:var(--teal); color:var(--text)} nav a.on{color:var(--teal); background:color-mix(in srgb,var(--teal) 10%,transparent); border-color:color-mix(in srgb,var(--teal) 34%,transparent)} /* leading index tick, drawing-callout style */ /* persistent index tick, brighter on the active page */ nav a::before{content:attr(data-i); position:absolute; top:2px; left:11px; font-size:.48rem; letter-spacing:.04em; color:var(--dim); opacity:.4; transition:all .18s} nav a.on::before{opacity:1; color:var(--teal)} nav a{padding:9px 11px 7px} /* active page gets a top rule, like a selected drawing sheet tab */ nav a.on::after{content:""; position:absolute; left:8px; right:8px; top:-1px; height:2px; background:var(--teal)} .bar nav{position:relative} .bar nav::before,.bar nav::after{content:""; position:absolute; top:0; bottom:0; width:26px; pointer-events:none; z-index:2; opacity:0; transition:opacity .2s} .bar nav::before{left:0; background:linear-gradient(90deg,#000,transparent)} .bar nav::after{right:0; background:linear-gradient(270deg,#000,transparent)} .bar nav.scrollable::before,.bar nav.scrollable::after{opacity:1} .brand-rule{width:1px; height:22px; background:var(--line-2); margin:0 4px; flex:none} .region{display:flex; align-items:center; gap:0; border:1px solid var(--line-2); border-radius:2px; background:var(--panel); flex:none; overflow:hidden} .region button{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.1em; padding:7px 9px; border:0; background:transparent; color:var(--dim); cursor:pointer; transition:all .16s} .region button+button{border-left:1px solid var(--line-2)} .region button:hover{color:var(--text)} .region button.on{background:color-mix(in srgb,var(--teal) 16%,transparent); color:var(--teal); font-weight:600} .live{display:flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--muted); letter-spacing:.06em; flex:none; border:1px solid var(--line-2); border-radius:2px; padding:6px 10px; background:var(--panel); font-variant-numeric:tabular-nums} .live b{color:var(--teal); font-weight:600; letter-spacing:.1em} .dot{width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(53,210,245,.6); animation:pulse 2.4s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(53,210,245,.5)}70%{box-shadow:0 0 0 7px rgba(53,210,245,0)}100%{box-shadow:0 0 0 0 rgba(53,210,245,0)}} /* ---------- live ticker ---------- */ .ticker{position:relative; z-index:30; border-bottom:1px solid var(--line); background:rgba(9,10,12,.75); overflow:hidden; height:34px; display:flex; align-items:center} .ticker::before,.ticker::after{content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none} .ticker::before{left:0; background:linear-gradient(90deg,#000,transparent)} .ticker::after{right:0; background:linear-gradient(270deg,#000,transparent)} .ticker-track{display:flex; gap:0; white-space:nowrap; will-change:transform; animation:scroll 46s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .tk{display:inline-flex; align-items:center; gap:8px; padding:0 20px; font-family:"IBM Plex Mono",monospace; font-size:.74rem; border-right:1px solid var(--line); cursor:pointer} .tk .tk-code{color:var(--muted); letter-spacing:.06em} .tk .tk-val{color:var(--text); font-weight:500} .tk .tk-d{font-size:.68rem} .tk .up{color:var(--green)} .tk .down{color:var(--rose)} .tk .flat{color:var(--dim)} /* ---------- hero ---------- */ .hero{padding:66px 0 30px; text-align:center} .eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink); margin-bottom:20px; display:flex; align-items:center; justify-content:center; gap:14px} .eyebrow::before,.eyebrow::after{content:""; flex:1; max-width:120px; height:1px; background:linear-gradient(90deg,transparent,var(--line-2))} .eyebrow::after{background:linear-gradient(270deg,transparent,var(--line-2))} h1{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:clamp(2.2rem,5.4vw,3.7rem); line-height:1.02; letter-spacing:.005em; max-width:19ch; text-transform:uppercase; margin:0 auto} h1 em{font-style:normal; color:var(--teal)} .lede{color:var(--muted); font-size:1.06rem; max-width:60ch; margin:22px auto 0} .index-strip{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; justify-content:center} .stat{background:var(--panel); border:1px solid var(--line-2); border-radius:2px; padding:13px 17px; min-width:148px; position:relative} .stat::before{content:""; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--ink); opacity:.5} .stat{text-align:center} .stat .k{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)} .stat .v{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.5rem; font-weight:600; margin-top:4px} .stat .v small{font-size:.78rem; color:var(--muted); font-weight:400; margin-left:5px} .stat .v .up{color:var(--green)} .stat .v .down{color:var(--rose)} /* ---------- shared section head ---------- */ .panel-card{margin-top:44px; background:linear-gradient(180deg,rgba(14,17,21,.92),rgba(6,7,9,.92)); border:1px solid var(--line-2); border-radius:var(--r); padding:24px 24px 18px; box-shadow:var(--shadow); position:relative} /* corner registration marks — drawing sheet convention */ .panel-card::before,.panel-card::after{content:""; position:absolute; width:13px; height:13px; pointer-events:none} .panel-card::before{top:7px; left:7px; border-top:1px solid var(--ink); border-left:1px solid var(--ink); opacity:.55} .panel-card::after{bottom:7px; right:7px; border-bottom:1px solid var(--ink); border-right:1px solid var(--ink); opacity:.55} .panel-head{border-bottom:1px solid var(--line); padding-bottom:11px; margin-bottom:16px!important} /* section detail marker, e.g. SECTION A-A */ .detail{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.18em; color:var(--ink); border:1px solid var(--line-2); border-radius:2px; padding:2px 7px; margin-right:10px; opacity:.9} .panel-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:6px} .panel-head h2{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.02rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase} .panel-head .sub{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--dim); letter-spacing:.06em} /* ---------- signature: demand spectrum ---------- */ .spectrum{display:flex; align-items:flex-end; gap:6px; height:184px; padding:22px 0 0 40px; position:relative} .spectrum .axis{position:absolute; left:0; top:22px; bottom:26px; width:34px; pointer-events:none} .spectrum .axis .tickrow{position:absolute; left:0; right:-100%; display:flex; align-items:center; gap:6px; transform:translateY(-50%)} .spectrum .axis .tickrow span{font-family:"IBM Plex Mono",monospace; font-size:.56rem; color:var(--dim); width:20px; text-align:right; flex:none} .spectrum .axis .tickrow i{flex:1; height:1px; background:var(--line); opacity:.6} .sbar{flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer; min-width:0; z-index:1} .sbar .col-wrap{width:100%; height:130px; display:flex; align-items:flex-end; justify-content:center; position:relative} .sbar .col{width:72%; max-width:30px; border-radius:1px 1px 0 0; height:0; transition:height 1.1s cubic-bezier(.2,.7,.2,1), filter .2s, transform .2s; box-shadow:0 0 18px -6px currentColor} .sbar .code{font-family:"IBM Plex Mono",monospace; font-size:.62rem; color:var(--muted); letter-spacing:.04em; transition:color .2s; white-space:nowrap} .sbar:hover .col{filter:brightness(1.25); transform:scaleY(1.02)} .sbar:hover .code{color:var(--text)} .sbar .val{position:absolute; top:-15px; font-family:"IBM Plex Mono",monospace; font-size:.62rem; color:var(--text); font-weight:500; transition:color .2s} .dimline{display:block; width:100%; height:22px; color:var(--ink); opacity:.55; margin-top:2px} .dimlabel{text-align:center; font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.18em; color:var(--ink); opacity:.8; margin-top:-4px} .spectrum-legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:16px; padding-top:12px; border-top:1px solid var(--line)} .lg{display:flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--muted)} .lg i{width:10px; height:10px; border-radius:3px; display:inline-block; flex:none} .lg.cite{display:block; line-height:1.5; max-width:100%} .lg.cite em{font-style:italic; color:var(--dim)} /* ---------- supply vs demand scatter ---------- */ .scatter-wrap{margin-top:8px; width:100%} .scatter-wrap svg{width:100%; height:auto; display:block; overflow:visible} .pt{cursor:pointer; transition:transform .2s} .pt circle{transition:r .2s, filter .2s} .pt .halo{opacity:0; transition:opacity .2s} .pt:hover .halo{opacity:.28} .pt:hover text{fill:#fff} .pt:hover circle{filter:brightness(1.3)} .pt text{font-family:"IBM Plex Mono",monospace; font-size:11px; fill:var(--text); pointer-events:none} .scatter-legend{display:flex; gap:20px; flex-wrap:wrap; margin-top:6px; padding-top:14px; border-top:1px solid var(--line)} /* ---------- AI exposure ---------- */ .ai-lede{color:var(--muted); font-size:.9rem; max-width:74ch; margin:2px 0 20px} .ai-lede b{color:var(--text); font-weight:600} .airows{display:flex; flex-direction:column; gap:2px} .airow{display:grid; grid-template-columns:172px 1fr 44px 132px; align-items:center; gap:14px; padding:9px 10px; border-radius:2px; cursor:pointer; transition:background .18s} .airow:hover{background:var(--panel-2)} .airow:focus-visible{outline:2px solid var(--teal); outline-offset:-2px} .airow .ar-name{font-family:"IBM Plex Mono",monospace; font-size:.73rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .18s} .airow .ar-name b{color:var(--text); font-weight:600} .airow:hover .ar-name{color:var(--text)} .airow .ar-track{display:block; height:9px; background:var(--bg); border-radius:99px; overflow:hidden; position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)} /* reference ticks at 25 / 50 / 75 */ .airow .ar-track::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), var(--line-2) calc(25% - 1px), var(--line-2) 25%); opacity:.55} .airow .ar-fill{display:block; height:100%; width:0; border-radius:99px; position:relative; z-index:0; transition:width 1.1s cubic-bezier(.2,.7,.2,1), filter .18s} .airow:hover .ar-fill{filter:brightness(1.2)} .airow .ar-num{font-family:"IBM Plex Mono",monospace; font-size:.8rem; font-weight:600; text-align:right} .airow .ar-stance{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.04em; padding:3px 8px; border-radius:2px; text-align:center; white-space:nowrap} .ai-scale{display:grid; grid-template-columns:172px 1fr 44px 132px; gap:14px; padding:0 10px; margin-bottom:9px} .ai-scale .sc{grid-column:2; display:flex; justify-content:space-between; font-family:"IBM Plex Mono",monospace; font-size:.6rem; color:var(--dim); letter-spacing:.08em} /* modal AI block */ .m-ai .ai-bar{position:relative; height:8px; background:var(--bg); border-radius:99px; overflow:hidden; margin:10px 0 14px} .m-ai .ai-bar div{position:absolute; left:0; top:0; bottom:0; border-radius:99px} .m-ai .ai-split{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px} .m-ai .ai-cell .aic-k{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:5px; display:flex; align-items:center; gap:6px} .m-ai .ai-cell p{font-size:.88rem; color:var(--muted)} @media (max-width:700px){ .airow,.ai-scale{grid-template-columns:96px 1fr 38px} .airow .ar-stance{display:none} .m-ai .ai-split{grid-template-columns:1fr} } /* ---------- entry checker ---------- */ .seg{display:inline-flex; border:1px solid var(--line-2); border-radius:999px; padding:3px; gap:3px; background:var(--bg)} .seg button{font-family:"IBM Plex Mono",monospace; font-size:.74rem; padding:6px 16px; border-radius:999px; border:0; background:transparent; color:var(--muted); cursor:pointer; transition:all .18s} .seg button.on{background:var(--teal); color:#01161f; font-weight:600} .seg button:not(.on):hover{color:var(--text)} .pick-row{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:18px 0 4px} .pick-lbl{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)} .subjects{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px} .subj{font-family:"IBM Plex Mono",monospace; font-size:.74rem; padding:7px 13px; border-radius:2px; border:1px solid var(--line-2); background:transparent; color:var(--muted); cursor:pointer; transition:all .16s} .subj:hover{border-color:var(--teal); color:var(--text)} .subj.on{background:color-mix(in srgb,var(--teal) 18%,transparent); border-color:var(--teal); color:var(--teal); font-weight:600} .subj.warn.on{background:color-mix(in srgb,var(--amber) 16%,transparent); border-color:var(--amber); color:var(--amber)} .verdict-bar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:22px 0 14px; padding:13px 16px; border:1px solid var(--line); border-radius:2px; background:var(--bg-2)} .verdict-bar .vb-big{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.15rem; font-weight:600} .verdict-bar .vb-note{font-size:.86rem; color:var(--muted)} .res{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(238px,100%),1fr)); gap:9px} .rcell{display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border-radius:2px; border:1px solid var(--line); background:var(--panel); cursor:pointer; transition:border-color .18s, transform .18s} .rcell:hover{border-color:var(--line-2); transform:translateY(-2px)} .rcell:focus-visible{outline:2px solid var(--teal); outline-offset:2px} .rcell .mark{font-family:"IBM Plex Mono",monospace; font-size:.8rem; font-weight:700; flex:none; width:15px; line-height:1.5} .rcell .rc-name{font-family:"IBM Plex Sans",sans-serif; font-size:.88rem; font-weight:500; color:var(--text)} .rcell .rc-why{font-family:"IBM Plex Mono",monospace; font-size:.65rem; color:var(--dim); margin-top:3px; line-height:1.45} .rcell.ok{border-left:3px solid var(--green)} .rcell.caution{border-left:3px solid var(--amber)} .rcell.no{border-left:3px solid var(--rose); opacity:.72} /* modal entry block */ .entry-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px} .ecol{background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:13px 14px} .ecol .ec-k{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--tier,var(--teal)); margin-bottom:8px} .ecol .ec-req{font-size:.86rem; color:var(--text); font-weight:500; line-height:1.45} .ecol .ec-sub{font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--dim); margin-top:6px; line-height:1.5} @media (max-width:700px){ .entry-grid{grid-template-columns:1fr} } /* ---------- fit quiz + exits ---------- */ .qz{display:flex; flex-direction:column; gap:16px} .qz-q .qq-k{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:8px} .qz-q .qq-t{font-size:.95rem; color:var(--text); margin-bottom:10px; font-weight:500} .qz-opts{display:flex; flex-wrap:wrap; gap:7px} .qz-opts button{font-family:"IBM Plex Mono",monospace; font-size:.72rem; padding:8px 13px; border-radius:2px; border:1px solid var(--line-2); background:transparent; color:var(--muted); cursor:pointer; transition:all .16s} .qz-opts button:hover{border-color:var(--teal); color:var(--text)} .qz-opts button.on{background:color-mix(in srgb,var(--teal) 18%,transparent); border-color:var(--teal); color:var(--teal); font-weight:600} .qz-res{margin-top:22px; padding-top:20px; border-top:1px solid var(--line)} .qz-card{display:flex; gap:14px; align-items:flex-start; border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:2px; padding:14px 16px; background:var(--panel); margin-bottom:9px; cursor:pointer; transition:border-color .18s, transform .18s} .qz-card:hover{transform:translateY(-2px); border-color:var(--line-2)} .qz-card .qc-r{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.5rem; font-weight:700; color:var(--teal); line-height:1; flex:none; width:26px} .qz-card .qc-n{font-size:1rem; font-weight:600; color:var(--text)} .qz-card .qc-w{font-size:.85rem; color:var(--muted); margin-top:4px; line-height:1.5} .qz-reset{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em; color:var(--dim); background:transparent; border:1px solid var(--line-2); border-radius:2px; padding:7px 12px; cursor:pointer} .qz-reset:hover{color:var(--rose); border-color:var(--rose)} .exits{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:12px} .exit{border:1px solid var(--line); border-radius:2px; padding:16px 17px; background:var(--panel); border-top:2px solid var(--ink)} .exit h3{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.08rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px} .exit .ex-h{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin-bottom:9px} .exit p{font-size:.87rem; color:var(--muted); line-height:1.55; margin-bottom:10px} .exit .ex-k{font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:10px 0 5px} .exit .ex-route{font-size:.83rem; color:var(--muted); line-height:1.5} .exit .tags{gap:5px} .exit .t{font-size:.66rem; padding:4px 8px} .exit .feed button{font-family:"IBM Plex Mono",monospace; font-size:.62rem; padding:4px 8px; border-radius:2px; border:1px solid var(--line-2); background:transparent; color:var(--muted); cursor:pointer; transition:all .16s} .exit .feed button:hover{border-color:var(--teal); color:var(--teal)} /* ---------- pivot map ---------- */ .pivot-wrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start} .pivot-svg{width:100%; max-width:560px; margin:0 auto; height:auto; display:block; overflow:visible} .pivot-chips{display:none; gap:6px; flex-wrap:wrap; margin-bottom:4px} .pivot-chips button{font-family:"IBM Plex Mono",monospace; font-size:.72rem; padding:9px 12px; border-radius:2px; border:1px solid var(--line-2); background:transparent; color:var(--muted); cursor:pointer; transition:all .16s} .pivot-chips button.on{background:color-mix(in srgb,var(--teal) 18%,transparent); border-color:var(--teal); color:var(--teal); font-weight:600} .pnode{cursor:pointer} .pnode circle{transition:fill .2s, r .2s} .pnode text{font-family:"IBM Plex Mono",monospace; font-size:11px; fill:var(--muted); pointer-events:none; transition:fill .2s} .pnode.sel text{fill:var(--text); font-weight:600} .pnode.tgt text{fill:var(--text)} .pnode.dim text{fill:var(--dim); opacity:.5} .pedge{fill:none; transition:opacity .25s, stroke-width .25s} .pivot-side .ps-h{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.15rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px} .pivot-side .ps-v{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:12px} .pivot-side .ps-note{font-size:.88rem; color:var(--muted); margin-bottom:16px; line-height:1.55} .ps-group{margin-bottom:13px} .ps-group .pg-k{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:7px; display:flex; align-items:center; gap:7px} .ps-group .pg-k i{width:9px; height:2px; flex:none} .ps-list{display:flex; flex-wrap:wrap; gap:6px} .ps-list button{font-family:"IBM Plex Mono",monospace; font-size:.68rem; padding:5px 10px; border-radius:2px; border:1px solid var(--line-2); background:transparent; color:var(--muted); cursor:pointer; transition:all .16s} .ps-list button:hover{border-color:var(--teal); color:var(--teal)} .ps-score{border:1px solid var(--line-2); border-radius:2px; padding:11px 13px; background:var(--panel); display:flex; align-items:baseline; gap:9px; margin-bottom:15px} .ps-score b{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.5rem; color:var(--teal); font-weight:700} .ps-score span{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)} @media (max-width:860px){ .pivot-wrap{grid-template-columns:1fr; gap:16px} .pivot-side{order:-1} } /* ---------- graduate output ---------- */ .gradrows{display:flex; flex-direction:column; gap:2px} .gradrow{display:grid; grid-template-columns:172px 1fr 74px 96px; align-items:center; gap:14px; padding:9px 10px; border-radius:2px; cursor:pointer; transition:background .18s} .gradrow:hover{background:var(--panel-2)} .gradrow:focus-visible{outline:2px solid var(--teal); outline-offset:-2px} .gradrow .gr-name{font-family:"IBM Plex Mono",monospace; font-size:.73rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .18s} .gradrow .gr-name b{color:var(--text); font-weight:600} .gradrow:hover .gr-name{color:var(--text)} .gradrow .gr-track{display:block; height:9px; background:#0A0C0F; border-radius:2px; overflow:hidden; position:relative} .gradrow .gr-fill{display:block; height:100%; width:0; border-radius:2px; transition:width 1.1s cubic-bezier(.2,.7,.2,1), filter .18s} /* smallest pipelines are <1% of the largest — keep them visible at any width */ .gradrow:not(.na) .gr-fill{min-width:3px} .gradrow:hover .gr-fill{filter:brightness(1.25)} .gradrow .gr-n{font-family:"IBM Plex Mono",monospace; font-size:.78rem; font-weight:600; text-align:right; color:var(--text); font-variant-numeric:tabular-nums} .gradrow .gr-share{font-family:"IBM Plex Mono",monospace; font-size:.62rem; color:var(--dim); text-align:right} .gradrow.na .gr-track{opacity:.3} .gradrow.na .gr-n{color:var(--dim); font-size:.64rem; font-weight:400} @media (max-width:700px){ .gradrow{grid-template-columns:96px 1fr 62px} .gradrow .gr-share{display:none} } /* ---------- employers ---------- */ .empgroups{display:flex; flex-direction:column; gap:13px} .empgroup .eg-k{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:7px; display:flex; align-items:center; gap:8px} .empgroup .eg-k::after{content:""; flex:1; height:1px; background:var(--line)} .co{font-family:"IBM Plex Sans",sans-serif; font-size:.8rem; padding:5px 11px; border-radius:2px; background:var(--panel-2); border:1px solid var(--line-2); color:#d7e3ed; display:inline-block} /* employer index */ .empbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px} .coindex{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(252px,100%),1fr)); gap:9px; max-height:430px; overflow-y:auto; padding-right:4px} .corow{border:1px solid var(--line); border-radius:2px; background:var(--panel); padding:11px 13px; border-left:2px solid var(--ink)} .corow .co-n{font-size:.86rem; font-weight:600; color:var(--text); margin-bottom:6px} .corow .co-tags{display:flex; flex-wrap:wrap; gap:4px} .cotag{font-family:"IBM Plex Mono",monospace; font-size:.6rem; padding:2px 6px; border-radius:2px; border:1px solid var(--line-2); color:var(--muted); cursor:pointer; transition:all .16s; background:transparent} .cotag:hover{border-color:var(--teal); color:var(--teal)} .co-count{font-family:"IBM Plex Mono",monospace; font-size:.6rem; color:var(--dim); float:right} .empty{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--muted); padding:16px 0} /* ---------- controls ---------- */ .controls{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin:56px 0 22px} .section-label{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px} .section-label::before{content:""; width:16px; height:1px; background:var(--ink)} .filters{display:flex; gap:8px; flex-wrap:wrap} .chip{font-family:"IBM Plex Mono",monospace; font-size:.74rem; padding:7px 14px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--muted); cursor:pointer; transition:all .18s; letter-spacing:.03em} .chip:hover{border-color:var(--teal); color:var(--text)} .chip.active{background:var(--teal); border-color:var(--teal); color:#01161f; font-weight:600} .searchbox{position:relative} .searchbox input{background:var(--panel); border:1px solid var(--line-2); border-radius:2px; padding:9px 14px 9px 34px; color:var(--text); font-family:"IBM Plex Mono",monospace; font-size:.82rem; width:210px; transition:border-color .2s} .searchbox input:focus{outline:none; border-color:var(--teal)} .searchbox svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--dim)} /* ---------- grid ---------- */ .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(272px,100%),1fr)); gap:16px} .card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:20px; cursor:pointer; position:relative; overflow:hidden; transition:transform .2s, border-color .2s, box-shadow .2s; display:flex; flex-direction:column; min-height:210px} .card::after{content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--tier,var(--teal)); opacity:.7} .card::before{content:""; position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .25s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--tier,#35D2F5) 12%, transparent), transparent 62%)} .card:hover::before{opacity:1} .card:hover{transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--shadow)} .card>*{position:relative; z-index:1} .card:focus-visible{outline:2px solid var(--teal); outline-offset:2px} .card-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px} .fcode{font-family:"IBM Plex Mono",monospace; font-size:.7rem; font-weight:600; letter-spacing:.08em; padding:4px 9px; border:1px solid var(--line-2); border-radius:2px; color:var(--muted)} .tier{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:2px; font-weight:600} .fname{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.24rem; font-weight:600; line-height:1.1} .ftag{color:var(--muted); font-size:.86rem; margin-top:6px; flex:1} .gauge{margin-top:16px} .gauge-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:8px} .gauge-row .lbl{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)} .gauge-row .rt{display:flex; align-items:center; gap:8px} .gauge-row .spark{display:block} .gauge-row .num{font-family:"IBM Plex Mono",monospace; font-size:.8rem; font-weight:600; color:var(--tier,var(--teal)); min-width:34px; text-align:right} .track{height:5px; background:var(--bg); border-radius:99px; overflow:hidden} .fill{height:100%; border-radius:99px; width:0; background:var(--tier,var(--teal)); transition:width 1s cubic-bezier(.2,.7,.2,1)} /* supply/demand mini block on card */ .sd{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:16px} .sd .sd-cell .sd-k{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)} .sd .sd-cell .sd-v{font-family:"IBM Plex Mono",monospace; font-size:.9rem; font-weight:600; margin-top:2px} .sd .sd-v .up{color:var(--green)} .sd .sd-v .down{color:var(--rose)} .sd .sd-v .cy{color:var(--cyan)} .balbar{margin-top:12px} .balbar .bl-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:5px} .balbar .bl-lbl{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)} .baltag{font-family:"IBM Plex Mono",monospace; font-size:.62rem; font-weight:600; padding:2px 7px; border-radius:2px} .bl-track{position:relative; height:6px; background:var(--bg); border-radius:99px; overflow:hidden} .bl-track .mid{position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line-2); z-index:2} .bl-track .bl-fill{position:absolute; top:0; bottom:0; border-radius:99px; transition:width .9s cubic-bezier(.2,.7,.2,1), left .9s cubic-bezier(.2,.7,.2,1)} .card-foot{display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:1px solid var(--line)} .salary{font-family:"IBM Plex Mono",monospace; font-size:.82rem; font-weight:600} .salary small{color:var(--dim); font-weight:400; font-size:.66rem; display:block; letter-spacing:.06em} .growth{font-family:"IBM Plex Mono",monospace; font-size:.74rem; display:flex; align-items:center; gap:5px} .growth.g-fast{color:var(--green)} .growth.g-avg{color:var(--cyan)} .growth.g-vol{color:var(--amber)} /* ---------- comparison console ---------- */ .console{position:fixed; left:0; right:0; bottom:0; z-index:60; pointer-events:none} .console-in{max-width:1180px; margin:0 auto; padding:0 24px; pointer-events:auto} .con-panel{background:linear-gradient(180deg,rgba(13,15,19,.98),rgba(0,0,0,.99)); border:1px solid var(--line-2); border-bottom:0; border-radius:var(--r) var(--r) 0 0; box-shadow:0 -24px 50px -26px rgba(0,0,0,1); backdrop-filter:blur(16px); position:relative; transition:border-color .2s} /* accent hairline along the top edge */ .con-panel::before{content:""; position:absolute; left:0; right:0; top:-1px; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--teal) 65%,transparent),transparent)} .con-panel:focus-within{border-color:color-mix(in srgb,var(--teal) 45%,transparent)} .con-out{max-height:0; overflow:hidden; transition:max-height .34s cubic-bezier(.2,.7,.2,1)} .con-out.open{max-height:min(50vh,440px); overflow-y:auto; border-bottom:1px solid var(--line)} .con-out::-webkit-scrollbar{width:9px} .con-out::-webkit-scrollbar-track{background:transparent} .con-out::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:0} .con-out::-webkit-scrollbar-thumb:hover{background:var(--dim)} .con-head{position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 18px; background:rgba(8,9,11,.97); border-bottom:1px solid var(--line); backdrop-filter:blur(8px)} .con-head .ch-t{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); display:flex; align-items:center; gap:9px} .con-head .ch-t i{width:5px; height:5px; border-radius:50%; background:var(--teal); flex:none} .con-body{padding:16px 18px 18px; font-size:.9rem; color:#d3dae2; line-height:1.62} .con-body b{color:var(--text); font-weight:600} .con-body .con-q{font-family:"IBM Plex Mono",monospace; font-size:.74rem; color:var(--text); letter-spacing:.02em; margin-bottom:14px; display:flex; gap:9px; align-items:flex-start; padding-bottom:12px; border-bottom:1px dashed var(--line)} .con-body .con-q i{font-style:normal; color:var(--teal); flex:none; font-weight:600} .con-bar{display:flex; align-items:center; gap:10px; padding:12px 18px} .con-bar .caret{font-family:"IBM Plex Mono",monospace; color:var(--teal); font-size:.86rem; flex:none; font-weight:600} .con-bar input{flex:1; background:transparent; border:0; outline:none; color:var(--text); font-family:"IBM Plex Mono",monospace; font-size:.85rem; min-width:0; padding:4px 0} .con-bar input::placeholder{color:var(--dim)} .kbd{font-family:"IBM Plex Mono",monospace; font-size:.6rem; color:var(--dim); border:1px solid var(--line-2); border-radius:2px; padding:3px 6px; flex:none; letter-spacing:.05em} .con-send{display:flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--line-2); border-radius:2px; background:transparent; color:var(--muted); cursor:pointer; flex:none; transition:all .18s} .con-send svg{display:block} .con-send:hover:not(:disabled){border-color:var(--teal); color:var(--teal); background:color-mix(in srgb,var(--teal) 10%,transparent)} .con-send:disabled{opacity:.35; cursor:default} .con-close{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.12em; color:var(--dim); background:transparent; border:1px solid transparent; border-radius:2px; cursor:pointer; padding:5px 8px; transition:all .18s; flex:none} .con-close:hover{color:var(--rose); border-color:color-mix(in srgb,var(--rose) 40%,transparent)} .con-chips{display:flex; gap:7px; padding:0 18px 13px; flex-wrap:wrap; align-items:center} .con-chips .cc-k{font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-right:2px} .con-chip{font-family:"IBM Plex Mono",monospace; font-size:.66rem; padding:5px 10px; border-radius:2px; border:1px dashed var(--line-2); background:transparent; color:var(--muted); cursor:pointer; transition:all .16s} .con-chip:hover{border-color:var(--teal); border-style:solid; color:var(--teal); background:color-mix(in srgb,var(--teal) 8%,transparent)} .cmp{width:100%; border-collapse:collapse; margin-top:4px; font-family:"IBM Plex Mono",monospace; font-size:.74rem} .cmp th,.cmp td{border:1px solid var(--line); padding:7px 10px; text-align:left} .cmp th{color:var(--muted); font-weight:500; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; background:var(--panel-2)} .cmp td:first-child{color:var(--dim); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; width:152px; background:rgba(255,255,255,.012)} .cmp tr:hover td{background:rgba(255,255,255,.022)} .cmp .best{color:var(--teal); font-weight:600} .con-note{font-family:"IBM Plex Mono",monospace; font-size:.62rem; color:var(--dim); margin-top:14px; padding-top:11px; border-top:1px dashed var(--line)} .typing{display:inline-flex; align-items:center; gap:5px; font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--dim); letter-spacing:.1em} .typing i{display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--teal); animation:blink 1.2s infinite} .typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s} @keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}} @media (max-width:700px){ .con-chips{display:none} .console-in{padding:0 10px} .kbd{display:none} .con-send span{display:none} .con-send{padding:8px 11px} } /* ---------- modal ---------- */ .overlay{position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.86); backdrop-filter:blur(4px); display:none; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto} .overlay.open{display:flex} .modal{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r); max-width:720px; width:100%; box-shadow:var(--shadow); position:relative; animation:rise .3s cubic-bezier(.2,.7,.2,1)} @keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:translateY(0)}} .m-head{padding:26px 28px 22px; border-bottom:1px solid var(--line); position:relative; border-radius:3px 18px 0 0; background:linear-gradient(180deg,var(--panel-2),transparent)} .m-close{position:absolute; top:20px; right:20px; width:32px; height:32px; border-radius:2px; border:1px solid var(--line-2); background:transparent; color:var(--muted); cursor:pointer; font-size:1.1rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:all .18s} .m-close:hover{border-color:var(--rose); color:var(--rose)} .m-code{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.1em; color:var(--tier,var(--teal)); margin-bottom:8px} .m-title{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.7rem; font-weight:600; line-height:1.05; padding-right:40px} .m-tag{color:var(--muted); margin-top:6px; font-size:.94rem} .m-metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:22px} .metric{background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:12px 13px} .metric .k{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)} .metric .val{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.12rem; font-weight:600; margin-top:4px} .metric .val .up{color:var(--green)} .metric .val .down{color:var(--rose)} .metric .val .cy{color:var(--cyan)} .m-body{padding:22px 28px 28px} .m-sec{margin-bottom:22px} .m-sec h4{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; display:flex; align-items:center; gap:8px} .m-sec h4::before{content:""; width:14px; height:1px; background:var(--tier,var(--teal))} .m-sec p{color:var(--muted); font-size:.94rem} .tags{display:flex; flex-wrap:wrap; gap:7px} .t{font-family:"IBM Plex Mono",monospace; font-size:.74rem; padding:5px 11px; border-radius:2px; background:var(--panel); border:1px solid var(--line-2); color:var(--muted)} .req-list{list-style:none; display:flex; flex-direction:column; gap:9px} .req-list li{display:flex; gap:11px; font-size:.92rem; color:var(--muted)} .req-list li .rk{font-family:"IBM Plex Mono",monospace; font-size:.68rem; color:var(--tier,var(--teal)); flex:none; width:82px; padding-top:2px; letter-spacing:.04em; text-transform:uppercase} .verdict{background:var(--panel); border:1px solid var(--line-2); border-left:3px solid var(--tier,var(--teal)); border-radius:2px; padding:15px 17px; font-size:.94rem; color:#dfe5f0} .verdict b{color:var(--tier,var(--teal)); font-family:"IBM Plex Sans Condensed",sans-serif} /* balance meter in modal */ .m-balance{background:var(--panel); border:1px solid var(--line-2); border-radius:2px; padding:16px 17px} .m-balance .bm-line{display:flex; justify-content:space-between; font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted); margin-bottom:10px} .m-balance .bm-track{position:relative; height:8px; background:var(--bg); border-radius:99px; overflow:hidden; margin-bottom:8px} .m-balance .bm-track .mid{position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line-2); z-index:2} .m-balance .bm-fill{position:absolute; top:0; bottom:0; border-radius:99px} .m-balance .bm-foot{font-size:.9rem; color:var(--muted)} .m-balance .bm-foot b{font-family:"IBM Plex Sans Condensed",sans-serif} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line-2); margin-top:78px; padding:0 0 150px} /* ISO 7200-style drawing title block */ .titleblock{display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--line-2); border-bottom:0; margin-top:-1px; background:var(--panel)} .tb{border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:11px 13px; min-height:60px} .tb:nth-child(6n){border-right:0} .tb .tb-k{font-family:"IBM Plex Mono",monospace; font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-bottom:5px} .tb .tb-v{font-family:"IBM Plex Mono",monospace; font-size:.78rem; color:var(--text); font-weight:500} .tb.wide{grid-column:span 3} .tb.wide .tb-v{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase} .tb.wide .tb-v span{color:var(--teal)} .foot-in{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; padding-top:22px} .foot-note{color:var(--dim); font-size:.78rem; max-width:62ch; line-height:1.6} .foot-brand{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; letter-spacing:.12em; font-size:.9rem} .foot-brand span{color:var(--teal)} @media (max-width:640px){ .wordmark{font-size:.92rem} .m-metrics{grid-template-columns:1fr 1fr} .titleblock{grid-template-columns:repeat(2,1fr)} .tb.wide{grid-column:span 2} .spectrum{height:150px; padding-left:34px} .sbar .col-wrap{height:100px} } /* ================= PHONE ================= */ @media (max-width:760px){ .wrap{padding:0 14px} .panel-card{padding:18px 14px 14px; margin-top:30px} .panel-card::before,.panel-card::after{display:none} .panel-head{flex-direction:column; align-items:flex-start; gap:4px} .panel-head .sub{font-size:.66rem} .hero{padding:40px 0 22px} .lede{font-size:1rem} .ai-lede{font-size:.88rem} /* legibility floor — nothing below ~11px on a phone */ .detail{font-size:.62rem} .dimlabel,.ai-scale .sc,.ps-v,.stat .k,.gauge-row .lbl,.sd .sd-cell .sd-k, .balbar .bl-lbl,.metric .k,.ecol .ec-k,.empgroup .eg-k,.ps-group .pg-k, .m-ai .ai-cell .aic-k,.con-note,.foot-note,.tb .tb-k{font-size:.68rem} .sbar .code,.sbar .val,.corow .co-tags .cotag,.gradrow .gr-share{font-size:.7rem} /* figures must never fall below comfortable reading size */ .gradrow .gr-n,.airow .ar-num,.gauge-row .num,.sd .sd-cell .sd-v,.stat .v, .metric .val,.salary,.growth{font-size:.86rem} .tier,.baltag,.corow .co-count,.con-head .ch-t,.con-close,.pick-lbl, .detail,.pivot-side .ps-v,.con-chips .cc-k{font-size:.68rem} .spectrum ~ .scroll-hint,.scroll-hint{font-size:.66rem} .corow .co-tags .cotag{display:inline-flex; align-items:center; min-height:32px} .brand{padding:4px 0} .scatter-wrap svg{min-width:720px} /* scatter has the same downscale problem as the pivot circle — let it scroll at readable size */ .scatter-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -14px; padding:0 14px} .scatter-wrap::-webkit-scrollbar{display:none} .scatter-wrap svg{min-width:660px} .con-close{padding:9px 10px} .con-send{padding:11px 13px} .cotag{min-height:32px; padding:7px 10px} .tk{font-size:.78rem} /* touch targets */ nav a{padding:11px 10px; font-size:.68rem} .region button{padding:11px 12px; font-size:.68rem} .chip,.subj,.con-chip,.ps-list button,.pivot-chips button,.seg button{min-height:38px; display:inline-flex; align-items:center; justify-content:center} .seg button{padding:9px 18px} .cotag{min-height:26px; padding:5px 9px} .airow,.gradrow,.rcell,.corow{padding-top:12px; padding-bottom:12px} .m-close{width:40px; height:40px} /* demand spectrum: 15 bars will not fit — scroll it instead of crushing to 11px */ .spectrum{overflow-x:auto; overflow-y:hidden; padding-left:0; scrollbar-width:none; -webkit-overflow-scrolling:touch} .spectrum::-webkit-scrollbar{display:none} .spectrum .axis{display:none} .sbar{min-width:40px; flex:0 0 40px} .scroll-hint{display:block; font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:center; margin-top:10px} /* pivot: chips instead of the chord circle */ .pivot-chips{display:flex} .pivot-svg{display:none} /* console: was taking 56% of the screen */ .con-out.open{max-height:min(34vh,270px)} .con-bar{padding:10px 14px} .con-body{padding:14px 14px 16px} .con-head{padding:10px 14px} .cmp-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -14px; padding:0 14px} .cmp{min-width:430px} .m-head{padding:20px 18px 18px} .m-body{padding:18px 18px 22px} .m-metrics{gap:8px} .index-strip{gap:9px} .stat{min-width:0; flex:1 1 calc(50% - 5px); padding:11px 12px} .stat .v{font-size:1.25rem} footer{padding-bottom:190px} } @media (min-width:761px){ .scroll-hint{display:none} } @media (max-width:400px){ .wordmark{font-size:.82rem} .brand .glyph{width:26px; height:26px} } @media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important} .sbar .col,.fill,.bl-fill{transition:none!important} .ticker-track{animation:none!important} } /* ================= DASHBOARD ================= */ .dash-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:13px; margin-top:8px} .dw{background:linear-gradient(180deg,rgba(14,17,21,.94),rgba(6,7,9,.94)); border:1px solid var(--line-2); border-radius:var(--r); padding:17px 18px 15px; position:relative; display:flex; flex-direction:column} .dw-hero{grid-column:span 12} .dw-third{grid-column:span 4} .dw-cta{grid-column:span 12} .dw-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px; padding-bottom:9px; border-bottom:1px solid var(--line)} .dw-t{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:.88rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; gap:8px} .dw-t::before{content:""; width:3px; height:12px; background:var(--ink); flex:none} .dw-l{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.09em; color:var(--dim); text-decoration:none; white-space:nowrap; transition:color .18s} .dw-l:hover{color:var(--teal)} .dw-rows{display:flex; flex-direction:column; gap:1px; flex:1} .dw-row{display:grid; grid-template-columns:1fr 62px 60px; align-items:center; gap:9px; width:100%; background:transparent; border:0; padding:7px 5px; border-radius:2px; cursor:pointer; text-align:left; transition:background .16s} .dw-row:hover{background:var(--panel-2)} .dw-n{font-family:"IBM Plex Mono",monospace; font-size:.71rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .dw-row:hover .dw-n{color:var(--text)} .dw-track{height:5px; background:#0A0C0F; border-radius:2px; overflow:hidden} .dw-fill{display:block; height:100%; border-radius:2px; min-width:3px; transition:width .9s cubic-bezier(.2,.7,.2,1)} .dw-v{font-family:"IBM Plex Mono",monospace; font-size:.71rem; font-weight:600; text-align:right; font-variant-numeric:tabular-nums} .dw-note{font-family:"IBM Plex Mono",monospace; font-size:.58rem; color:var(--dim); margin-top:auto; padding-top:10px; line-height:1.55} /* hero tile */ .dw-hero{padding:22px 24px 20px} .dw-hero-in{display:grid; grid-template-columns:minmax(0,270px) minmax(0,1fr); gap:26px; align-items:center} .dw-big{display:flex; align-items:baseline; gap:10px} .dw-big span{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:3.4rem; font-weight:700; color:var(--teal); line-height:.9; font-variant-numeric:tabular-nums; letter-spacing:-.01em} .dw-big em{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:.58rem; color:var(--dim); letter-spacing:.08em; text-transform:uppercase; line-height:1.4; max-width:9ch} .dw-delta{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.06em; margin-top:9px; color:var(--dim)} .dw-delta b{font-weight:600} .dw-spark svg{width:100%; height:74px; display:block} .dw-kv{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; padding-top:15px; border-top:1px solid var(--line)} .dw-kv div{display:flex; flex-direction:column; gap:3px} .dw-kv b{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.3rem; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums} .dw-kv span{font-family:"IBM Plex Mono",monospace; font-size:.54rem; letter-spacing:.09em; text-transform:uppercase; color:var(--dim); line-height:1.4} /* start-here block */ .dw-cta-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:11px} .dw-cta-grid a{display:flex; flex-direction:column; gap:6px; padding:15px 16px; border:1px solid var(--line); border-left:2px solid var(--ink); border-radius:2px; background:var(--panel); text-decoration:none; transition:border-color .18s, transform .18s, background .18s} .dw-cta-grid a:hover{transform:translateY(-2px); border-left-color:var(--teal); background:var(--panel-2)} .dw-cta-grid b{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:.98rem; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.04em} .dw-cta-grid span{font-size:.79rem; color:var(--muted); line-height:1.45} @media (max-width:980px){ .dw-third{grid-column:span 6} .dw-hero-in{grid-template-columns:1fr; gap:14px} .dw-cta-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .dash-grid{gap:11px} .dw-third,.dw-hero,.dw-cta{grid-column:span 12} .dw-big span{font-size:2.6rem} .dw-kv{grid-template-columns:repeat(2,1fr)} .dw-cta-grid{grid-template-columns:1fr} .dw-row{grid-template-columns:1fr 54px 58px; padding:9px 5px} } /* ================= METHOD ================= */ .mt-scroll{overflow-x:auto; scrollbar-width:none; margin:0 -2px} .mt-scroll::-webkit-scrollbar{display:none} .mt{width:100%; border-collapse:collapse; font-size:.86rem; min-width:640px} .mt th{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-align:left; padding:9px 12px; border-bottom:1px solid var(--line-2); font-weight:500; background:var(--panel-2)} .mt td{padding:12px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; line-height:1.5} .mt tr:hover td{background:rgba(255,255,255,.02)} .mt tr:last-child td{border-bottom:0} .mt .mt-n{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; color:var(--text); text-transform:uppercase; letter-spacing:.04em; font-size:.9rem; white-space:nowrap} .mt .mt-s{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted); line-height:1.55} .mt .mt-b{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:2px; font-weight:600; white-space:nowrap} .mt a{color:var(--teal); text-decoration:none; font-family:"IBM Plex Mono",monospace; font-size:.72rem} .mt a:hover{text-decoration:underline} .lims{display:grid; grid-template-columns:repeat(2,1fr); gap:11px} .lim{border:1px solid var(--line); border-left:2px solid var(--amber); border-radius:2px; padding:14px 16px; background:var(--panel)} .lim b{display:block; font-family:"IBM Plex Sans Condensed",sans-serif; font-size:.98rem; font-weight:700; color:var(--text); margin-bottom:5px; letter-spacing:.02em} .lim span{font-size:.84rem; color:var(--muted); line-height:1.55} #method .panel-card:first-child{margin-top:20px} @media (max-width:760px){ .lims{grid-template-columns:1fr} } /* ================= MOBILE HEADER ================= Below 900px the single row cannot hold brand + 7 links + region + status, so the nav drops to its own full-width row and scrolls as a tab strip. */ @media (max-width:1150px){ .live #clock{display:none} } @media (max-width:900px){ .live{display:none} .brand-rule{display:none} .bar{flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:0; gap:10px; align-items:center; row-gap:0} .brand{flex:1; min-width:0} .region{order:2} .bar nav{order:3; flex:0 0 100%; width:100%; justify-content:flex-start; margin:0 -14px; padding:0 14px; gap:0; border-top:1px solid var(--line); margin-top:10px} nav a{flex:none; padding:13px 14px 11px; font-size:.7rem; border-radius:0; border:0; border-bottom:2px solid transparent} nav a:hover{background:transparent; color:var(--text)} nav a.on{background:transparent; border-bottom-color:var(--teal); color:var(--teal)} nav a.on::after{display:none} nav a::before{top:3px; left:14px; font-size:.46rem} .bar nav::before,.bar nav::after{width:22px} .bar nav.scrollable::after{opacity:1} } @media (max-width:420px){ .brand .glyph{width:26px; height:26px} .wordmark{font-size:.84rem; letter-spacing:.1em} .region button{padding:9px 9px; font-size:.6rem} nav a{padding:12px 11px 10px; font-size:.66rem} } /* ---------- mobile nav menu ---------- */ .navbtn{display:none; align-items:center; gap:9px; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; padding:9px 13px; border:1px solid var(--line-2); border-radius:2px; background:var(--panel); color:var(--muted); cursor:pointer; flex:none; transition:all .18s} .navbtn:hover,.navbtn.on{border-color:var(--teal); color:var(--teal)} .navbtn-i{display:flex; flex-direction:column; gap:3px; width:13px} .navbtn-i i{display:block; height:1.5px; background:currentColor; border-radius:1px; transition:all .22s} .navbtn.on .navbtn-i i:nth-child(1){transform:translateY(4.5px) rotate(45deg)} .navbtn.on .navbtn-i i:nth-child(2){opacity:0} .navbtn.on .navbtn-i i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)} .navpanel{display:none; position:absolute; left:0; right:0; top:100%; z-index:50; background:rgba(0,0,0,.97); border-bottom:1px solid var(--line-2); backdrop-filter:blur(16px); max-height:0; overflow:hidden; transition:max-height .28s cubic-bezier(.2,.7,.2,1)} .navpanel.open{max-height:70vh; overflow-y:auto} .navpanel-in{max-width:1180px; margin:0 auto; padding:6px 14px 12px} .navpanel a{display:grid; grid-template-columns:26px 1fr 18px; align-items:center; gap:12px; padding:15px 8px; text-decoration:none; border-bottom:1px solid var(--line); font-family:"IBM Plex Sans Condensed",sans-serif; transition:background .16s} .navpanel a:last-child{border-bottom:0} .navpanel a:active{background:var(--panel-2)} .navpanel .np-i{font-family:"IBM Plex Mono",monospace; font-size:.6rem; color:var(--dim); letter-spacing:.06em} .navpanel .np-l{font-size:1.05rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)} .navpanel .np-a{font-family:"IBM Plex Mono",monospace; font-size:.8rem; color:var(--dim); text-align:right} .navpanel a.on{border-left:2px solid var(--teal); padding-left:12px; margin-left:-14px} .navpanel a.on .np-l,.navpanel a.on .np-i,.navpanel a.on .np-a{color:var(--teal)} @media (max-width:900px){ .navbtn{display:inline-flex; order:2; padding:13px 14px; min-height:44px; font-size:.7rem} .navpanel{display:block} .region{order:3} .bar nav{display:none} .bar{padding-bottom:10px} header{position:sticky} } /* ---------- shortlist pins ---------- */ .card-top-r{display:flex; align-items:center; gap:7px} .pin{display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; width:24px; height:24px; border-radius:2px; border:1px solid var(--line-2); background:transparent; color:var(--dim); cursor:pointer; transition:all .16s; padding:0} .pin .pin-i{font-family:"IBM Plex Mono",monospace; font-size:.82rem; line-height:1; transition:transform .2s} .pin:hover{border-color:var(--teal); color:var(--teal)} .pin.on{border-color:var(--teal); background:color-mix(in srgb,var(--teal) 20%,transparent); color:var(--teal)} .pin.on .pin-i{transform:rotate(45deg)} .pin-wide{position:absolute; top:20px; right:60px; width:auto; height:auto; padding:7px 11px; font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase} .pin-wide .pin-i{font-size:.75rem} /* ---------- tray ---------- */ .tray{display:none; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 18px; border-bottom:1px solid var(--line); background:rgba(53,210,245,.045)} .tray.open{display:flex} .tray-k{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); flex:none} .tray-k b{color:var(--teal); font-weight:600} .tray-items{display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0} .tray-i{display:inline-flex; align-items:center; border:1px solid var(--line-2); border-left:2px solid var(--teal); border-radius:2px; background:var(--panel); overflow:hidden} .tray-open{font-family:"IBM Plex Mono",monospace; font-size:.68rem; padding:6px 9px; border:0; background:transparent; color:var(--text); cursor:pointer; white-space:nowrap} .tray-open:hover{color:var(--teal)} .tray-x{font-family:"IBM Plex Mono",monospace; font-size:.62rem; padding:6px 8px; border:0; border-left:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer} .tray-x:hover{color:var(--rose); background:color-mix(in srgb,var(--rose) 12%,transparent)} .tray-act{display:flex; gap:6px; flex:none} .tray-cmp,.tray-clr{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; padding:8px 13px; border-radius:2px; cursor:pointer; transition:all .16s; border:1px solid var(--line-2); background:transparent; color:var(--muted)} .tray-cmp{border-color:var(--teal); color:var(--teal); background:color-mix(in srgb,var(--teal) 14%,transparent); font-weight:600} .tray-cmp:hover:not(:disabled){background:color-mix(in srgb,var(--teal) 26%,transparent)} .tray-cmp:disabled{opacity:.4; cursor:default; border-color:var(--line-2); color:var(--dim); background:transparent} .tray-clr:hover{border-color:var(--rose); color:var(--rose)} .toast{position:fixed; left:50%; bottom:120px; transform:translate(-50%,10px); z-index:90; background:var(--panel-2); border:1px solid var(--line-2); border-left:2px solid var(--amber); border-radius:2px; padding:11px 16px; font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--text); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s} .toast.show{opacity:1; transform:translate(-50%,0)} /* ---------- menu button: says where you are ---------- */ .navbtn-c{font-size:.7rem; transition:transform .22s; margin-left:-2px} .navbtn.on .navbtn-c{transform:rotate(180deg)} .navbtn-t{max-width:12ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} @keyframes navhint{0%,100%{box-shadow:0 0 0 0 rgba(53,210,245,0)} 40%{box-shadow:0 0 0 5px rgba(53,210,245,.16)}} .navbtn.hint{animation:navhint 1.5s ease-out 2; border-color:var(--teal); color:var(--teal)} .np-h{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); padding:10px 8px 8px; border-bottom:1px solid var(--line-2)} @media (max-width:760px){ .tray{padding:10px 14px; gap:9px} .tray-items{order:3; flex:0 0 100%} .tray-act{margin-left:auto} .tray-cmp,.tray-clr{padding:9px 12px} .pin-wide{top:16px; right:56px} .toast{bottom:150px; width:calc(100% - 32px); text-align:center} } /* tray empty state — the only discovery route to Compare */ .tray.empty{background:transparent; border-bottom:1px dashed var(--line)} .tray-empty{font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--dim); flex:1; min-width:0; line-height:1.5} .tray-empty b{color:var(--teal); font-weight:600} .tray-go{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-decoration:none; border:1px solid var(--line-2); border-radius:2px; padding:7px 11px; flex:none; transition:all .16s} .tray-go:hover{border-color:var(--teal); color:var(--teal)} /* labelled pin on cards */ .pin-card{width:auto; height:auto; padding:5px 9px; gap:5px; font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase} .pin-card .pin-i{font-size:.72rem} .pin-card.on{font-weight:600} /* five call-to-action tiles need a tighter grid than four */ .dw-cta-grid{grid-template-columns:repeat(5,1fr)} @media (max-width:1100px){ .dw-cta-grid{grid-template-columns:repeat(3,1fr)} } @media (max-width:760px){ .tray.empty{padding:9px 14px} .tray-empty{font-size:.62rem} .tray-go{display:none} .pin-card .pin-l{display:none} .pin-card{padding:6px 9px} .dw-cta-grid{grid-template-columns:1fr} } /* ================= HEADER FIT ================= The bar held brand + menu + region + status; on a phone that overran the width and the menu button sat on top of the wordmark. Region moves into the menu panel, and the brand is allowed to shrink properly. */ .brand{min-width:0} .wordmark{white-space:nowrap; overflow:hidden; text-overflow:clip} .np-region{border-top:1px solid var(--line-2); margin-top:6px} .region-panel{display:flex; width:100%; margin:0 8px 6px} .region-panel button{flex:1; padding:13px 0; font-size:.7rem} @media (max-width:900px){ .bar .region{display:none} .bar{gap:10px; flex-wrap:nowrap; padding-bottom:12px} .brand{flex:1 1 auto; min-width:0; overflow:hidden} .navbtn{flex:0 0 auto; margin-left:auto} .navbtn-t{max-width:10ch} } @media (min-width:901px){ .np-region{display:none} } @media (max-width:430px){ .wordmark{font-size:.8rem; letter-spacing:.08em} .navbtn{padding:12px 11px; gap:7px} .navbtn-t{max-width:8ch; font-size:.64rem} .brand{gap:8px} } @media (max-width:360px){ .navbtn-t{display:none} } /* ================= DASHBOARD TREATMENT ================= */ .dw{overflow:hidden} /* corner registration marks, matching the drawing-sheet panels */ .dw::before,.dw::after{content:""; position:absolute; width:9px; height:9px; pointer-events:none; opacity:.5; transition:opacity .25s, border-color .25s} .dw::before{top:6px; left:6px; border-top:1px solid var(--ink); border-left:1px solid var(--ink)} .dw::after{bottom:6px; right:6px; border-bottom:1px solid var(--ink); border-right:1px solid var(--ink)} .dw:hover::before,.dw:hover::after{opacity:1; border-color:var(--teal)} .dw{transition:border-color .25s, transform .25s, box-shadow .25s} .dw:hover{border-color:var(--line-2); transform:translateY(-2px); box-shadow:0 16px 34px -24px rgba(53,210,245,.4)} /* tile index, bottom-left */ .dw[data-i]{position:relative} .dw[data-i]::marker{content:none} .dw-h::after{content:attr(data-x)} .dw[data-i] .dw-t::after{content:attr(data-n)} .dw[data-i] > .dw-h > .dw-t::before{content:""} .dw[data-i]{--idx:attr(data-i)} .dw-idx{position:absolute; bottom:7px; left:10px; font-family:"IBM Plex Mono",monospace; font-size:.5rem; letter-spacing:.16em; color:var(--dim); opacity:.65; pointer-events:none} /* hero tile: faint grid + a slow scan sweep */ .dw-hero{background: linear-gradient(180deg,rgba(16,20,25,.95),rgba(5,6,8,.96)); position:relative} .dw-hero .dw-hero-in{position:relative; z-index:1} .dw-hero > *:not(.dw-scan){position:relative; z-index:1} .dw-scan{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; background-image: linear-gradient(rgba(90,150,190,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(90,150,190,.09) 1px, transparent 1px); background-size:22px 22px; mask-image:radial-gradient(ellipse 70% 90% at 20% 50%, #000, transparent 75%)} .dw-scan::after{content:""; position:absolute; top:0; bottom:0; width:34%; background:linear-gradient(90deg,transparent,rgba(53,210,245,.07),transparent); animation:sweep 7s ease-in-out infinite} @keyframes sweep{0%{left:-40%}55%{left:106%}100%{left:106%}} .dw-big span{text-shadow:0 0 26px rgba(53,210,245,.35)} .dw-status{display:flex; gap:14px; flex-wrap:wrap; margin-top:13px; padding-top:11px; border-top:1px dashed var(--line); font-family:"IBM Plex Mono",monospace; font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)} .dw-status .ds-i{display:flex; align-items:center; gap:6px; color:var(--green)} .dw-status .ds-i i{width:5px; height:5px; border-radius:50%; background:var(--green); animation:pulse 2.4s infinite} .dw-spark svg{filter:drop-shadow(0 0 7px rgba(53,210,245,.3))} /* ================= SITE-WIDE POLISH ================= */ ::selection{background:color-mix(in srgb,var(--teal) 32%,transparent); color:#fff} html{scrollbar-color:var(--line-2) transparent} *::-webkit-scrollbar{width:10px; height:10px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:0; border:3px solid transparent; background-clip:padding-box} *::-webkit-scrollbar-thumb:hover{background:var(--dim); background-clip:padding-box} a,button{-webkit-tap-highlight-color:transparent} :focus-visible{outline:2px solid var(--teal); outline-offset:2px; border-radius:2px} button:disabled{cursor:not-allowed} img{max-width:100%} /* consistent hover for every clickable row across the site */ .card,.rcell,.corow,.qz-card,.exit,.dw-row,.airow,.gradrow,.tray-i{will-change:transform} .exit{transition:border-color .2s, transform .2s} .exit:hover{transform:translateY(-2px); border-color:var(--line-2)} .lim{transition:border-color .2s} .lim:hover{border-left-color:var(--teal)} .mt tr{transition:background .16s} /* the sticky header should read as a layer once you scroll */ header{transition:box-shadow .25s, background .25s} body.scrolled header{box-shadow:0 10px 30px -22px rgba(0,0,0,1)} @media print{ header,.console,.ticker,.tray,.navpanel{display:none!important} body::before{display:none} .panel-card{break-inside:avoid} } @media (max-width:760px){ .dw-status{gap:10px; font-size:.52rem} .dw-scan::after{animation:none} } /* ---------- universities ---------- */ .uni-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:16px 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line)} .uni-n{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.2rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em} .uni-r{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--dim)} .uni-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr)); gap:8px} .uni{display:flex; align-items:center; gap:11px; padding:12px 14px; border:1px solid var(--line); border-left:2px solid var(--ink); border-radius:2px; background:var(--panel); font-size:.9rem; color:var(--text); transition:border-color .18s, transform .18s} .uni:hover{border-left-color:var(--teal); transform:translateX(2px)} .uni-i{font-family:"IBM Plex Mono",monospace; font-size:.6rem; color:var(--dim); flex:none} .vintage-line{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.06em; color:var(--muted); margin-bottom:8px} .vintage-line a{color:var(--teal); text-decoration:none} .vintage-line a:hover{text-decoration:underline} /* ================= CONSOLE: TERMINAL TREATMENT ================= */ .con-panel{border-radius:var(--r) var(--r) 0 0; overflow:hidden} .con-panel::before{height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--teal) 80%,transparent) 30%, color-mix(in srgb,var(--cyan) 80%,transparent) 70%,transparent)} .con-panel:focus-within{border-color:color-mix(in srgb,var(--teal) 55%,transparent); box-shadow:0 -26px 54px -28px rgba(53,210,245,.35), 0 0 0 1px color-mix(in srgb,var(--teal) 18%,transparent)} /* faint scan texture behind the bar */ .con-bar{position:relative} .con-bar::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background:repeating-linear-gradient(0deg, rgba(90,150,190,.05) 0 1px, transparent 1px 3px)} .con-bar > *{position:relative; z-index:1} .con-bar .caret{color:var(--dim); font-size:.72rem; letter-spacing:.02em; white-space:nowrap; flex:none} .con-bar .caret b{color:var(--teal); font-weight:600} .con-bar input{caret-color:var(--teal); letter-spacing:.01em} /* blinking block cursor when empty and unfocused */ .con-bar::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:linear-gradient(90deg,var(--teal),transparent); transition:width .35s ease} .con-panel:focus-within .con-bar::after{width:100%} .con-head .ch-b{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:.52rem; letter-spacing:.14em; padding:3px 6px; border-radius:2px; margin-left:8px; font-weight:600; color:var(--teal); background:color-mix(in srgb,var(--teal) 16%,transparent); border:1px solid color-mix(in srgb,var(--teal) 34%,transparent)} .con-body .con-q i{font-family:"IBM Plex Mono",monospace; font-weight:700} .con-send{position:relative; overflow:hidden} .con-send::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--teal) 22%,transparent),transparent); transform:translateX(-110%)} .con-send:hover:not(:disabled)::after{animation:swipe .7s ease} @keyframes swipe{to{transform:translateX(110%)}} .typing{letter-spacing:.12em; text-transform:uppercase; font-size:.62rem} .typing i{box-shadow:0 0 8px rgba(53,210,245,.7)} .con-out{scroll-behavior:smooth} .con-out.open{animation:conopen .34s cubic-bezier(.2,.7,.2,1)} @keyframes conopen{from{opacity:.4}to{opacity:1}} .con-chip{position:relative} .con-chip::before{content:"› "; color:var(--dim)} .con-chip:hover::before{color:var(--teal)} @media (max-width:760px){ .con-bar .caret b{display:none} .con-bar .caret{font-size:.8rem} .con-bar .caret::before{content:"$"; color:var(--teal); font-weight:700} .con-bar .caret{color:transparent; width:10px} .con-bar .caret::before{color:var(--teal)} } /* ===================================================================== FINAL PASS — one motion language, one depth language ===================================================================== */ :root{ --ease:cubic-bezier(.22,.68,.24,1); --ease-out:cubic-bezier(.16,1,.3,1); --dur:.34s; } /* ---------- page entrance ---------- */ @keyframes pagein{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}} main{animation:pagein .38s var(--ease-out) both} header{animation:pagein .4s var(--ease-out) both} .ticker{animation:pagein .45s var(--ease-out) .05s both} /* ---------- dashboard choreography ---------- */ @keyframes tilein{ from{opacity:0; transform:translateY(16px) scale(.985); filter:blur(2px)} to{opacity:1; transform:none; filter:none}} .dw-in{animation:tilein .46s var(--ease-out) both; animation-delay:var(--d,0ms)} .dw-in::before,.dw-in::after{animation:pagein .5s var(--ease-out) both; animation-delay:calc(var(--d,0ms) + 220ms)} @keyframes sparkin{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}} .dw-spark.drawn svg{animation:sparkin 1.1s var(--ease-out) both} @keyframes ctain{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}} .dw-cta-grid a{animation:ctain .5s var(--ease-out) both} .dw-cta-grid a:nth-child(1){animation-delay:.30s} .dw-cta-grid a:nth-child(2){animation-delay:.35s} .dw-cta-grid a:nth-child(3){animation-delay:.40s} .dw-cta-grid a:nth-child(4){animation-delay:.45s} .dw-cta-grid a:nth-child(5){animation-delay:.50s} .dw-kv div{animation:ctain .5s var(--ease-out) both} .dw-kv div:nth-child(1){animation-delay:.30s} .dw-kv div:nth-child(2){animation-delay:.36s} .dw-kv div:nth-child(3){animation-delay:.30s} .dw-kv div:nth-child(4){animation-delay:.35s} .dw-row{animation:ctain .42s var(--ease-out) both} .dw-row:nth-child(1){animation-delay:.22s} .dw-row:nth-child(2){animation-delay:.27s} .dw-row:nth-child(3){animation-delay:.32s} .dw-row:nth-child(4){animation-delay:.37s} .dw-row:nth-child(5){animation-delay:.30s} /* ---------- depth: a hairline of light on every raised surface ---------- */ .panel-card,.dw,.card,.modal,.con-panel,.stat,.exit,.uni,.lim,.corow,.qz-card{position:relative} .panel-card::after{} .dw,.card,.modal,.stat,.exit,.lim,.corow,.qz-card,.metric,.ecol,.empgroup .co{ background-image:linear-gradient(180deg,rgba(255,255,255,.028),transparent 42%)} .panel-card{background-image:linear-gradient(180deg,rgba(255,255,255,.022),transparent 30%)} /* ---------- unified transitions ---------- */ a,button,.card,.dw,.exit,.uni,.lim,.corow,.rcell,.qz-card,.tray-i,.chip,.subj,.con-chip,.pin, .cotag,.ps-list button,.pivot-chips button,.seg button,.region button,nav a,.navbtn,.dw-row, .airow,.gradrow,.tray-cmp,.tray-clr,.con-send,.dw-l,.tray-go{ transition:color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease)} button:active:not(:disabled),.card:active,.exit:active{transform:scale(.985)} .card:hover,.exit:hover,.dw:hover,.qz-card:hover{transform:translateY(-3px)} /* ---------- typography refinement ---------- */ h1{letter-spacing:-.008em; text-wrap:balance} .panel-head h2{letter-spacing:.085em} .lede,.ai-lede{text-wrap:pretty} .fname,.uni-n,.dw-t,.exit h3{letter-spacing:.035em} .dw-big span{letter-spacing:-.02em} body{text-rendering:optimizeLegibility} /* ---------- accent hairline across every panel head ---------- */ .panel-head{position:relative} .panel-head::after{content:""; position:absolute; left:0; bottom:-1px; width:52px; height:1px; background:linear-gradient(90deg,var(--teal),transparent)} /* ---------- refined focus + selection ---------- */ :focus-visible{outline:2px solid var(--teal); outline-offset:3px} .card:focus-visible,.dw-row:focus-visible{outline-offset:-2px} /* ---------- ticker easing ---------- */ .tk{transition:background var(--dur) var(--ease)} .tk:hover{background:rgba(255,255,255,.03)} @media (prefers-reduced-motion:reduce){ main,header,.ticker,.dw-in,.dw-cta-grid a,.dw-kv div,.dw-row,.dw-spark.drawn svg, .dw-in::before,.dw-in::after{animation:none!important} .card:hover,.exit:hover,.dw:hover,.qz-card:hover{transform:none} } /* ===================================================================== CONSOLE — lifted off the edge and given real depth It read as a slab because it spanned the full width, sat flush to the viewport bottom, and kept the suggestion chips permanently open. ===================================================================== */ .console-in{padding:0 20px 16px} .con-panel{ max-width:880px; margin:0 auto; border:1px solid var(--line-2); border-radius:10px; background:linear-gradient(180deg, rgba(20,24,30,.97), rgba(6,8,11,.99)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.5), 0 12px 26px -10px rgba(0,0,0,.85), 0 34px 70px -30px rgba(0,0,0,1), 0 0 60px -30px rgba(53,210,245,.35); overflow:hidden; transition:box-shadow .4s var(--ease-out), transform .4s var(--ease-out), border-color .3s var(--ease)} .con-panel:focus-within{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--teal) 50%,transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(0,0,0,.6), 0 3px 6px rgba(0,0,0,.5), 0 18px 34px -12px rgba(0,0,0,.9), 0 46px 90px -34px rgba(0,0,0,1), 0 0 74px -24px rgba(53,210,245,.55)} /* top light seam sits inside the rounded corners now */ .con-panel::before{left:14%; right:14%; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(53,210,245,.75),transparent)} /* slimmer resting state */ .con-bar{padding:10px 15px; gap:9px} .con-bar input{font-size:.82rem} .con-head{padding:10px 16px} .con-body{padding:15px 16px 17px} .tray{padding:10px 15px} /* chips only when the console is in use — this was most of the bulk */ .con-chips{max-height:0; overflow:hidden; padding:0 15px; opacity:0; transition:max-height .34s var(--ease-out), opacity .26s var(--ease), padding .34s var(--ease-out)} .con-panel:focus-within .con-chips, .con-panel:hover .con-chips{max-height:110px; opacity:1; padding:0 15px 11px} .con-out.open ~ .con-chips{max-height:110px; opacity:1; padding:0 15px 11px} .con-out.open{max-height:min(46vh,400px)} @media (max-width:900px){ .console-in{padding:0 10px 10px} .con-panel{max-width:100%; border-radius:9px} .con-panel:focus-within{transform:none} } @media (max-width:760px){ .con-bar{padding:9px 12px} .tray{padding:9px 12px} footer{padding-bottom:170px} } /* ---------- graduate outcomes ---------- */ .oc-rows{display:flex; flex-direction:column; gap:2px} .ocrow{display:grid; grid-template-columns:172px 1fr 78px 92px; align-items:center; gap:13px; padding:10px; border-radius:2px; cursor:pointer; background:transparent} .ocrow:hover{background:var(--panel-2)} .oc-n{font-family:"IBM Plex Mono",monospace; font-size:.73rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .oc-n b{color:var(--text); font-weight:600} .oc-n em{font-style:normal; color:var(--dim)} .ocrow:hover .oc-n{color:var(--text)} .ocrow.proxy{opacity:.72} .oc-bar{display:flex; height:9px; background:#0A0C0F; border-radius:2px; overflow:hidden} .oc-une,.oc-und{display:block; height:100%; transition:width .9s var(--ease-out)} .oc-une{background:var(--rose)} .oc-und{background:var(--amber); opacity:.75} .oc-v{display:flex; flex-direction:column; align-items:flex-end; gap:1px} .oc-v b{font-family:"IBM Plex Mono",monospace; font-size:.78rem; font-variant-numeric:tabular-nums} .oc-v span{font-family:"IBM Plex Mono",monospace; font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)} /* ---------- 2030 slope chart ---------- */ .slope{width:100%; max-width:760px; margin:6px auto 0; height:auto; display:block; overflow:visible} .slope-g{cursor:pointer} .slope-g .sl-l,.slope-g circle,.slope-g .sl-t{transition:all .2s var(--ease)} .slope-g:hover .sl-l,.slope-g.sel .sl-l{opacity:1; stroke-width:3} .slope-g:hover .sl-t,.slope-g.sel .sl-t{fill:#EDEFF2; font-weight:600} .slope-g:hover circle,.slope-g.sel circle{r:6} .ol-detail{margin-top:18px; padding-top:18px; border-top:1px solid var(--line)} .ol-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px} .ol-n{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.25rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em} .ol-m{font-family:"IBM Plex Mono",monospace; font-size:1rem; color:var(--muted); font-variant-numeric:tabular-nums} .ol-m em{font-style:normal; color:var(--dim); margin:0 4px} .ol-c{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border-radius:2px; font-weight:600} .ol-split{display:grid; grid-template-columns:1fr 1fr; gap:18px} .ol-k{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px} .ol-split p{font-size:.88rem; color:var(--muted); line-height:1.55} @media (max-width:760px){ .ocrow{grid-template-columns:96px 1fr 62px; gap:9px} .ocrow .oc-v:last-child{display:none} .oc-n{font-size:.68rem} .slope{min-width:620px} #slopeChart{overflow-x:auto; margin:0 -14px; padding:0 14px; scrollbar-width:none} #slopeChart::-webkit-scrollbar{display:none} .ol-split{grid-template-columns:1fr; gap:14px} } /* ---------- leadership ---------- */ .lead-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin:6px 0 20px} .lead-stat{border:1px solid var(--line); border-left:2px solid var(--teal); border-radius:2px; padding:15px 16px; background:var(--panel)} .lead-stat b{display:block; font-family:"IBM Plex Sans Condensed",sans-serif; font-size:2rem; font-weight:700; color:var(--teal); line-height:1; margin-bottom:7px; font-variant-numeric:tabular-nums} .lead-stat span{font-size:.82rem; color:var(--muted); line-height:1.5} .lead-stat:nth-child(4){border-left-color:var(--amber)} .lead-stat:nth-child(4) b{color:var(--amber)} .lead-two{display:grid; grid-template-columns:1fr 1fr; gap:22px} .lead-two p{font-size:.9rem; color:var(--muted); line-height:1.6} .lead-people{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr)); gap:8px} .lp{border:1px solid var(--line); border-radius:2px; padding:11px 13px; background:var(--panel)} .lp b{display:block; font-size:.88rem; color:var(--text); font-weight:600} .lp span{font-family:"IBM Plex Mono",monospace; font-size:.63rem; color:var(--dim); letter-spacing:.03em} @media (max-width:900px){ .lead-grid{grid-template-columns:repeat(2,1fr)} .lead-two{grid-template-columns:1fr; gap:16px} } @media (max-width:760px){ .lead-grid{grid-template-columns:1fr} .lead-stat b{font-size:1.7rem} } /* ---------- demand × AI-resistance scatter ---------- */ .ai-map-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:20px 0 6px} .amh-t{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.05rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em} .amh-s{font-family:"IBM Plex Mono",monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)} .ai-scatter{width:100%; max-width:820px; margin:0 auto; height:auto; display:block; overflow:visible} .sc-grid{stroke:var(--line); stroke-width:1; stroke-dasharray:2 5; opacity:.5} .sc-mid{stroke:var(--line-2); stroke-width:1; stroke-dasharray:4 4; opacity:.9} .sc-axis{stroke:var(--line-2); stroke-width:1} .sc-tick{fill:var(--dim); font-size:10px; font-family:"IBM Plex Mono",monospace} .sc-axl{fill:var(--muted); font-size:11px; font-family:"IBM Plex Mono",monospace; letter-spacing:.1em} .sc-quad{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:12px; letter-spacing:.03em; opacity:.9} .sc-quadsub{fill:var(--dim); font-size:9.5px; font-family:"IBM Plex Mono",monospace} .sc-dot{transition:r .14s var(--ease)} .sc-hit{cursor:pointer; outline:none} .sc-hit:focus-visible + *{} .sc-lbl{font-family:"IBM Plex Mono",monospace; font-size:10px; fill:var(--text); opacity:.9; pointer-events:none} .sc-leader{stroke:var(--line-2); stroke-width:1; opacity:.5} .sc-tip{position:fixed; z-index:70; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .14s var(--ease), transform .14s var(--ease); max-width:250px; background:rgba(9,11,14,.98); border:1px solid var(--line-2); border-radius:6px; padding:12px 14px; box-shadow:0 20px 44px -18px rgba(0,0,0,1), 0 0 40px -24px rgba(53,210,245,.5)} .sc-tip.on{opacity:1; transform:translateY(0)} .sc-tip .sct-n{font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:.95rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px} .sc-tip .sct-r{display:flex; justify-content:space-between; gap:16px; font-size:.78rem; margin:3px 0; font-family:"IBM Plex Mono",monospace} .sc-tip .sct-r span:first-child{color:var(--muted)} .sc-tip .sct-note{font-size:.78rem; color:var(--muted); margin-top:9px; padding-top:9px; border-top:1px solid var(--line); line-height:1.5} .sc-tip .sct-tag{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; padding:3px 8px; border-radius:2px; margin-top:9px; border:1px solid} @media (max-width:760px){ #aiScatter{overflow-x:auto; margin:0 -14px; padding:0 14px; scrollbar-width:none} #aiScatter::-webkit-scrollbar{display:none} .ai-scatter{min-width:640px} } /* ---------- dashboard hero headline ---------- */ .hero-h1{ font-size:clamp(2.6rem, 8vw, 5.8rem); line-height:.98; letter-spacing:-.02em; max-width:none; margin:0 auto; text-transform:uppercase; font-weight:700; } .hero-h1 br{display:block} .hero-h1 em{ font-style:normal; color:var(--teal); text-shadow:0 0 40px color-mix(in srgb, var(--teal) 45%, transparent); } @media (max-width:640px){ .hero-h1{font-size:clamp(2.1rem,10vw,3.2rem)} } /* ---------- master's routes ---------- */ .msc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr)); gap:12px; margin-top:14px} .msc{border:1px solid var(--line); border-top:2px solid var(--cyan); border-radius:2px; padding:16px 17px; background:var(--panel); display:flex; flex-direction:column} .msc-h{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); letter-spacing:.02em; margin-bottom:8px; line-height:1.15} .msc-w{font-size:.87rem; color:var(--muted); line-height:1.55; margin-bottom:12px} .msc-k{font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:9px 0 5px} .msc-role{font-size:.85rem; color:var(--text)} .msc-from{display:flex; flex-wrap:wrap; gap:5px} .msc-from button{font-family:"IBM Plex Mono",monospace; font-size:.62rem; padding:4px 8px; border-radius:2px; border:1px solid var(--line-2); background:transparent; color:var(--muted); cursor:pointer; transition:all .16s} .msc-from button:hover,.msc-from button.hit{border-color:var(--teal); color:var(--teal)} .msc-uni{display:flex; flex-wrap:wrap; gap:5px} .msc-uni span{font-family:"IBM Plex Mono",monospace; font-size:.66rem; padding:4px 8px; border-radius:2px; background:var(--panel-2); border:1px solid var(--line); color:#d7e3ed} html[data-theme="light"] .msc-uni span{color:var(--text)} .msc-note{font-family:"IBM Plex Mono",monospace; font-size:.64rem; color:var(--dim); line-height:1.5; margin-top:auto; padding-top:11px; margin-top:11px; border-top:1px dashed var(--line)} /* light-mode definition: firmer card edges and readable chart text */ html[data-theme="light"] .panel-card{border-color:#CBD5E1; box-shadow:0 1px 0 rgba(255,255,255,.9), 0 12px 30px -20px rgba(30,50,80,.22)} html[data-theme="light"] .card, html[data-theme="light"] .dw, html[data-theme="light"] .exit, html[data-theme="light"] .uni, html[data-theme="light"] .msc, html[data-theme="light"] .lead-stat, html[data-theme="light"] .metric, html[data-theme="light"] .lp{border-color:#CBD5E1} html[data-theme="light"] .sl-t, html[data-theme="light"] .sc-tick, html[data-theme="light"] .axis-tick{fill:#3E4B5A} html[data-theme="light"] .sc-lbl{fill:#101720} html[data-theme="light"] .msc-uni span{background:#EEF3F8; border-color:#D2DAE6} html[data-theme="light"] .con-panel{border-color:#C6D0DE} html[data-theme="light"] .fcode, html[data-theme="light"] .dw-idx{color:#5A6B7D} html[data-theme="light"] .tk{border-color:#D2DAE6} /* ---------- work style ---------- */ .ws-pick{display:flex; align-items:flex-end; gap:14px; margin:6px 0 18px; flex-wrap:wrap} .ws-sel{display:flex; flex-direction:column; gap:5px} .ws-sel label{font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)} .ws-sel select{background:var(--panel-2); border:1px solid var(--line-2); border-radius:2px; color:var(--text); font-family:"IBM Plex Sans Condensed",sans-serif; font-size:.95rem; font-weight:600; padding:9px 12px; cursor:pointer; min-width:210px; transition:border-color .18s} .ws-sel select:hover{border-color:var(--teal)} .ws-vs{font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--dim); padding-bottom:11px} .ws-grid{display:grid; grid-template-columns:1fr; gap:14px} .ws-grid.two{grid-template-columns:1fr 1fr} .ws-card{border:1px solid var(--line); border-radius:2px; padding:16px 18px; background:var(--panel)} .ws-h{display:flex; align-items:center; gap:9px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line)} .ws-h b{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.05rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em} .ws-dot{width:9px; height:9px; border-radius:50%; flex:none} .ws-dot.a{background:var(--teal)} .ws-dot.b{background:var(--amber)} .ws-row{display:grid; grid-template-columns:82px 1fr 76px; align-items:center; gap:11px; padding:5px 0} .ws-l{font-family:"IBM Plex Mono",monospace; font-size:.72rem; color:var(--muted)} .ws-track{position:relative; height:9px; background:var(--panel-2); border-radius:2px; overflow:hidden} html[data-theme="light"] .ws-track{background:#E7ECF2} .ws-fill{position:absolute; inset:0 auto 0 0; height:100%; background:linear-gradient(90deg,var(--ink),var(--teal)); border-radius:2px; transition:width .7s var(--ease-out)} .ws-ghost{position:absolute; top:-2px; height:13px; width:0; border-right:2px dashed var(--amber); opacity:.85} .ws-v{font-family:"IBM Plex Mono",monospace; font-size:.72rem; text-align:right; color:var(--text); font-variant-numeric:tabular-nums; display:flex; align-items:center; justify-content:flex-end; gap:5px} .ws-v em{font-style:normal; color:var(--dim); font-size:.6rem} .ws-d{font-family:"IBM Plex Mono",monospace; font-size:.62rem; padding:1px 5px; border-radius:2px; background:var(--panel-2); color:var(--dim)} .ws-d.up{color:var(--green); background:color-mix(in srgb,var(--green) 14%,transparent)} .ws-d.dn{color:var(--rose); background:color-mix(in srgb,var(--rose) 14%,transparent)} .ws-note{font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--dim); margin-top:12px; line-height:1.5} .ws-mini .ws-row{grid-template-columns:74px 1fr 52px; padding:3px 0} .ws-mini .ws-v em,.ws-mini .ws-d{display:none} @media (max-width:760px){ .ws-grid.two{grid-template-columns:1fr} .ws-sel select{min-width:0; width:100%} .ws-sel{flex:1} .ws-row{grid-template-columns:70px 1fr 64px} } /* ---------- AI stance legend ---------- */ .stance-key{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:16px 0 20px} .sk{display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:9px; border:1px solid var(--line); border-radius:2px; padding:11px 13px; background:var(--panel)} .sk-d{width:9px; height:9px; border-radius:50%; flex:none} .sk b{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap} .sk span:last-child{font-size:.78rem; color:var(--muted); line-height:1.4} @media (max-width:760px){ .stance-key{grid-template-columns:1fr} .sk{grid-template-columns:auto 1fr; } .sk span:last-child{grid-column:1/-1} } /* ---------- pivot mobility ---------- */ .ps-mob{display:flex; align-items:center; gap:12px; margin:10px 0 12px; padding:11px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)} .ps-mob-s{font-family:"IBM Plex Sans Condensed",sans-serif; line-height:1; flex:none} .ps-mob-s b{font-size:1.9rem; font-weight:700; font-variant-numeric:tabular-nums} .ps-mob-s span{font-family:"IBM Plex Mono",monospace; font-size:.6rem; color:var(--dim)} .ps-mob-l b{display:block; font-family:"IBM Plex Sans Condensed",sans-serif; font-size:.92rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em} .ps-mob-l span{font-family:"IBM Plex Mono",monospace; font-size:.62rem; color:var(--muted)} .ps-list button{display:inline-flex; align-items:center; gap:7px} .pc-e{font-family:"IBM Plex Mono",monospace; font-size:.54rem; letter-spacing:.08em; text-transform:uppercase; padding:2px 5px; border-radius:2px; font-weight:600} .pc-e.easy{color:var(--green); background:color-mix(in srgb,var(--green) 15%,transparent)} .pc-e.mod{color:var(--amber); background:color-mix(in srgb,var(--amber) 15%,transparent)} .ps-caveat{font-family:"IBM Plex Mono",monospace; font-size:.6rem; color:var(--dim); line-height:1.5; margin:-4px 0 12px; padding-bottom:11px; border-bottom:1px dashed var(--line)} /* ---------- reality check (modal) ---------- */ .rc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px} .rc{border:1px solid var(--line); border-radius:2px; padding:10px 12px; background:var(--panel)} .rc span{display:block; font-family:"IBM Plex Mono",monospace; font-size:.54rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:4px} .rc b{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.3rem; font-weight:700; color:var(--text)} .rc b.hard{color:var(--rose)} .rc-sur{margin-top:12px; border-left:2px solid var(--amber); padding:2px 0 2px 13px} .rc-sur span{font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:4px} .rc-sur p{font-size:.9rem; color:var(--muted); line-height:1.5} /* ---------- family tree (visual) ---------- */ .fam-root{display:inline-flex; align-items:center; gap:11px; font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.05rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--text); padding:11px 18px; border:1px solid var(--line-2); border-radius:3px; background:var(--panel-2); margin:10px 0 4px; position:relative} .fam-root-dot{width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal)} .fam-root-sub{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.08em; color:var(--dim); font-weight:400; margin-left:2px} .fam-branches{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:14px; margin-top:18px; position:relative} .fam-branch{border:1px solid var(--line); border-top:2px solid var(--fc); border-radius:3px; padding:16px 17px 15px; background:linear-gradient(180deg,color-mix(in srgb,var(--fc) 5%,var(--panel)),var(--panel)); position:relative; transition:border-color .2s, transform .2s} .fam-branch:hover{transform:translateY(-2px)} .fam-branch::before{content:""; position:absolute; top:-13px; left:24px; width:1px; height:11px; background:var(--fc); opacity:.5} .fam-head{margin-bottom:13px} .fam-title{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.08rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fc)} .fam-blurb{font-size:.78rem; color:var(--muted); line-height:1.5; margin-top:5px} .fam-kids{display:flex; flex-direction:column; gap:5px} .fam-kid{display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; background:var(--panel-2); border:1px solid var(--line); border-radius:2px; padding:9px 11px; transition:border-color .16s, background .16s, transform .16s} .fam-kid:hover{border-color:var(--fc); background:color-mix(in srgb,var(--fc) 8%,var(--panel-2)); transform:translateX(3px)} .fk-code{font-family:"IBM Plex Mono",monospace; font-size:.66rem; color:var(--muted); min-width:40px; font-weight:600} .fam-kid:hover .fk-code{color:var(--fc)} .fk-name{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:.92rem; font-weight:600; color:var(--text); text-transform:uppercase; letter-spacing:.02em} .fk-multi{font-family:"IBM Plex Mono",monospace; font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); background:color-mix(in srgb,var(--cyan) 15%,transparent); padding:2px 6px; border-radius:2px} .fk-sc{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:.78rem; font-weight:600; font-variant-numeric:tabular-nums} /* ---------- engineering DNA quiz ---------- */ .qz-prog{display:flex; align-items:center; gap:12px; margin-bottom:18px} .qzp-track{flex:1; height:5px; background:var(--panel-2); border-radius:3px; overflow:hidden} .qzp-track span{display:block; height:100%; background:linear-gradient(90deg,var(--ink),var(--teal)); border-radius:3px; transition:width .4s var(--ease-out)} .qzp-n{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.08em; color:var(--dim); white-space:nowrap} .dna-lbl{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap} .dna-tag{font-family:"IBM Plex Sans Condensed",sans-serif; font-size:1.05rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--teal)} .dna-conf{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.06em; color:var(--dim)} .qc-main{display:flex; flex-direction:column; gap:6px; flex:1; min-width:0} .qc-n{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap} .qc-match{font-family:"IBM Plex Mono",monospace; font-size:.66rem; font-weight:600; white-space:nowrap} .qc-bar{display:block; height:4px; background:var(--panel-2); border-radius:2px; overflow:hidden} .qc-bar span{display:block; height:100%; border-radius:2px; transition:width .5s var(--ease-out)}