:root{ --bg:#ddd6c4;--surface:#f6f1e4;--surface-2:#ece6d6;--line:#d5ccb7;--line-strong:#bfb59e; --text:#173f35;--muted:#5b7069;--faint:#87958f;--accent:#2d765d;--accent-soft:#dce9df; --pos:#277659;--neg:#ae6257;--radius:2px } body.dark{--bg:#101217;--surface:#171a20;--surface-2:#1c2027;--line:#292e38;--line-strong:#383f4c;--text:#f0f2f6;--muted:#a3aab6;--faint:#747d8b;--accent:#7d9dff;--accent-soft:#202d52;--pos:#43c794;--neg:#f06b86;color-scheme:dark} /* The page canvas paints before is parsed, so the root carries the dark ground itself to stop a light flash on reload. */ html.dark{background:#000;color-scheme:dark} *{box-sizing:border-box} html,body{min-height:100%;max-width:100%;overflow-x:hidden} body{margin:0;background:var(--bg);color:var(--text);font:12px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums} button,input,select{font:inherit;color:inherit} button{cursor:pointer} .hidden{display:none!important} .brand-lockup{display:flex;align-items:center;gap:9px;min-width:0} .brand-mark{display:block;width:24px;height:24px;flex:none;border-radius:2px} .brand-copy{display:flex;flex-direction:column;line-height:1.08} .brand-copy strong{font-size:13px;font-weight:650;letter-spacing:-.01em} .brand-copy span{margin-top:3px;color:var(--faint);font-size:8px;font-weight:650;letter-spacing:.13em;text-transform:uppercase} .eyebrow{color:var(--muted);font-size:9px;font-weight:650;letter-spacing:.1em;text-transform:uppercase} /* Authentication — quiet institutional layout, using the Rooted desk system. */ .auth-shell{min-height:100vh;display:grid;grid-template-rows:48px 1fr 34px;background:var(--surface)} .auth-header{display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line-strong)} .auth-classification,.auth-footer,.context-index{color:var(--faint);font-size:9px;font-weight:650;letter-spacing:.12em} .auth-stage{display:grid;grid-template-columns:minmax(360px,1fr) minmax(440px,44%);min-height:0} .auth-context{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(42px,7vw,110px);overflow:hidden;background:var(--surface-2);border-right:1px solid var(--line-strong)} .auth-context:before,.auth-context:after{content:"";position:absolute;pointer-events:none} .auth-context:before{inset:0;background:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;opacity:.43} .auth-context:after{width:62%;aspect-ratio:1;right:-12%;top:50%;transform:translateY(-50%) rotate(45deg);border:1px solid #dbe1e9;box-shadow:0 0 0 48px rgba(235,239,245,.38),0 0 0 96px rgba(235,239,245,.22)} .auth-context>*{position:relative;z-index:1} .context-index{color:var(--accent)} .auth-context h1{max-width:680px;margin:22px 0 18px;font-size:clamp(38px,4.4vw,70px);font-weight:350;line-height:.98;letter-spacing:-.055em} .auth-context p{max-width:430px;margin:0;color:var(--muted);font-size:14px;line-height:1.6} .context-rule{display:flex;gap:22px;margin-top:54px;padding-top:12px;border-top:1px solid var(--line-strong);color:var(--muted);font-size:9px;font-weight:650;letter-spacing:.1em} .auth-card{width:min(390px,calc(100% - 64px));align-self:center;justify-self:center} .auth-card h2{margin:12px 0 6px;font-size:24px;font-weight:550;letter-spacing:-.035em} .muted{margin:0 0 28px;color:var(--muted)} label{display:block;margin:15px 0 6px;color:var(--muted);font-size:10px;font-weight:650;letter-spacing:.055em;text-transform:uppercase} label span{float:right;color:var(--faint);font-weight:500} input,select{width:100%;height:38px;padding:0 11px;border:1px solid var(--line-strong);border-radius:var(--radius);outline:none;background:var(--surface)} input::placeholder{color:#a6adb7} input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)} .primary,.secondary{height:34px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);font-size:11px;font-weight:600} .primary{width:100%;margin-top:14px;border-color:var(--accent);background:var(--accent);color:#fff} .primary:hover{filter:brightness(1.06)} .primary.compact{width:auto;margin:0} .secondary:hover{background:var(--surface-2)} .link{padding:0;margin-top:16px;border:0;background:none;color:var(--accent);font-size:11px} .error{min-height:16px;margin-top:10px;color:var(--neg);font-size:11px} .auth-footer{display:flex;align-items:center;padding:0 22px;border-top:1px solid var(--line);background:var(--surface-2)} /* Application frame */ .shell{min-height:100vh;padding-top:48px} .topbar{position:fixed;z-index:20;inset:0 0 auto;height:48px;display:grid;grid-template-columns:190px minmax(0,1fr) 110px;align-items:center;padding:0 14px;border-bottom:1px solid var(--line-strong);background:var(--surface)} .topbar nav{justify-self:center;display:flex;height:28px;padding:2px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)} .nav{display:flex;align-items:center;padding:0 13px;border:0;border-right:1px solid transparent;background:transparent;color:var(--muted);text-decoration:none;font-size:10px;font-weight:600;white-space:nowrap} .nav:hover{color:var(--text)} .nav.active{border:1px solid var(--line-strong);background:var(--surface);color:var(--text);margin:-1px;z-index:1} .aside-foot{justify-self:end;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9px;font-weight:650;letter-spacing:.08em} .status-dot{width:6px;height:6px;background:var(--pos)} .workspace{min-width:0} .pagebar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid var(--line);background:var(--surface)} .pagebar h1{margin:3px 0 0;font-size:17px;font-weight:550;letter-spacing:-.025em} .header-right{display:flex;align-items:center;gap:12px} .header-right select{width:155px;height:30px;padding:0 9px;font-size:11px;text-transform:capitalize} .account-chip{display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid var(--line)} .account-chip small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em} .avatar{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;overflow:hidden;border:1px solid #cbd7fa;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:650} .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;image-rendering:pixelated} .plus-script{font-family:"Segoe Script","Brush Script MT",cursive;font-size:1.18em;font-weight:600;letter-spacing:-.04em;text-transform:none} .plus-corner{position:fixed;z-index:18;right:14px;top:58px;display:flex;flex-direction:column;align-items:flex-start;min-width:178px;padding:9px 11px;border:1px solid #b9c9f8;border-radius:4px;background:var(--surface);color:var(--text);box-shadow:0 7px 22px rgba(24,43,88,.13);text-align:left}.plus-corner span{font-size:11px;font-weight:650}.plus-corner small{margin-top:2px;color:var(--accent);font-size:8px}.plus-corner.unlocked{border-color:#b9dfd1}.plus-corner.unlocked small{color:var(--pos)} .view{max-width:1700px;margin:auto;padding:14px 18px 28px} /* Market data modules */ .metric-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:4px;border:1px solid var(--line-strong);background:var(--line)} .metric-grid article{min-width:0;padding:14px 16px;background:var(--surface)} .metric-grid article+article{border-left:1px solid var(--line)} article label,.account-row label{margin:0 0 8px;color:var(--muted);font-size:9px;font-weight:650;letter-spacing:.075em;text-transform:uppercase} .metric-grid strong{display:block;font-size:21px;font-weight:400;line-height:1.15;letter-spacing:-.025em} .metric-grid small{display:block;margin-top:5px;color:var(--faint);font-size:9px} .bid{color:var(--pos)}.ask{color:var(--neg)} .terminal-grid{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:4px} .panel,.profile-bar{overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface)} .panel-head{height:52px;display:flex;align-items:center;justify-content:space-between;padding:9px 13px;border-bottom:1px solid var(--line)} .panel-head h2,.profile-bar h2{margin:0;font-size:11px;font-weight:650} .panel-head p,.profile-bar p{margin:2px 0 0;color:var(--muted);font-size:9px} .chart-panel{min-width:0} .chart-panel #chart{height:430px} .segments{display:flex;height:25px;padding:2px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)} .segments button{min-width:31px;padding:0 7px;border:0;background:transparent;color:var(--muted);font-size:9px} .segments button.active{border:1px solid var(--line-strong);background:var(--surface);color:var(--text);margin:-1px} .live-pill{padding:3px 6px;border:1px solid #b9dfd1;border-radius:var(--radius);background:#f1faf7;color:var(--pos);font-size:8px;font-weight:700;letter-spacing:.08em} .dom-panel{grid-row:span 2} .dom-head,.book-row{display:grid;grid-template-columns:1.2fr 1fr 1fr;padding:0 11px;text-align:right} .dom-head{height:27px;align-items:center;border-bottom:1px solid var(--line);color:var(--faint);font-size:8px;font-weight:650;letter-spacing:.08em;text-transform:uppercase} .dom-scroll{height:555px;overflow:hidden;scrollbar-width:thin}.book{height:258px;overflow:hidden}.plus-enabled .dom-scroll{overflow-y:auto}.plus-enabled .book{height:auto;min-height:0;overflow:visible} .book-row{position:relative;height:25px;align-items:center;font:10px/1.2 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace} .book-row:before{content:"";position:absolute;inset:2px 0 2px auto;width:var(--depth);background:var(--fill);opacity:.075} .book-row span{position:relative;z-index:1}.book-row span:first-child{text-align:left} .ask-side span:first-child{color:var(--neg)}.bid-side span:first-child{color:var(--pos)} /* The slot is held open on every row, with or without a button in it, so a level that carries per-listing detail does not sit a few pixels off the prices above and below it. */ .detail-slot{display:inline-block;width:14px;text-align:left;font-style:normal} .row-detail{width:11px;height:11px;padding:0;border:1px solid var(--line-strong);border-radius:2px;background:var(--surface);color:var(--muted);font:7px/9px ui-monospace,SFMono-Regular,Consolas,monospace;opacity:.55;vertical-align:middle;transition:opacity .16s ease,color .16s ease,border-color .16s ease,background-color .16s ease} .row-detail:before{content:"\2261"} .row-detail:hover,.row-detail[aria-expanded="true"]{opacity:1;border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .row-detail:focus-visible{opacity:1;outline:1px solid var(--accent);outline-offset:1px} .book-mid{height:39px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-block:1px solid var(--line);background:var(--surface-2)} .book-mid strong{font:500 14px ui-monospace,SFMono-Regular,Consolas,monospace}.book-mid span{color:var(--faint);font-size:8px;text-transform:uppercase;letter-spacing:.08em} .heat-panel{min-width:0}.heat-wrap{position:relative;overflow:hidden}.heat-panel canvas{display:block;width:100%;height:250px;cursor:grab;touch-action:none}.heat-panel canvas.dragging{cursor:grabbing}.heat-actions{display:flex;align-items:center;gap:10px}.legend{display:flex;align-items:center;gap:6px;color:var(--faint);font-size:8px}.legend i{width:52px;height:4px;background:linear-gradient(90deg,#edf1f7,#4e79dc,#d95770)}.lock-button{height:24px;padding:0 8px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);font-size:9px;font-weight:650}.lock-button[aria-pressed="false"]{border-color:var(--line-strong);background:var(--surface);color:var(--muted)}.heat-help{position:absolute;right:68px;top:7px;padding:3px 5px;background:rgba(255,255,255,.88);color:var(--faint);font-size:8px;pointer-events:none} /* Disabled state paints a static blurred stand-in so no canvas work happens. */ .heat-wrap.heat-disabled canvas{visibility:hidden;cursor:default} .heat-wrap.heat-disabled:before{content:"";position:absolute;inset:-14px;background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(45,118,93,.17) 7px 12px),repeating-linear-gradient(0deg,transparent 0 10px,rgba(174,98,87,.15) 10px 15px),linear-gradient(180deg,rgba(174,98,87,.20),rgba(45,118,93,.24));filter:blur(7px);opacity:.6;pointer-events:none} .heat-off{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:10px} .heat-off p{margin:0;color:var(--text);font-size:10px;font-weight:650;letter-spacing:.04em} .heat-off span{color:var(--faint);font-size:8px;letter-spacing:.08em} .enable-button{margin-top:6px;height:26px;padding:0 14px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);font-size:9px;font-weight:650;cursor:pointer} .enable-button:hover{background:var(--accent);color:var(--surface)} /* Player and settings */ .profile-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;padding:12px 14px} .inline{display:flex;gap:5px}.inline input{width:190px;height:34px} .stat-grid{grid-template-columns:repeat(5,1fr)} .stat-grid article:nth-child(6){border-left:0} .pnl-panel #pnlChart{height:430px} .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px} .settings-card{min-width:0;padding-bottom:14px} .stack{padding:0 14px} .key-row{display:grid;grid-template-columns:1fr auto;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)} .key-row strong{font-size:11px}.key-row small{display:block;margin-top:3px;color:var(--muted);font:9px ui-monospace,SFMono-Regular,Consolas,monospace} .icon-button{height:25px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--neg);font-size:9px} .secret-box,.setting-status{margin:12px 14px 0;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);color:var(--muted);font-size:10px} .secret-box{border-color:#cbd7fa;background:var(--accent-soft);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all} .import-block{min-width:0;margin:16px 14px 0;padding-top:14px;border-top:1px solid var(--line)}.import-block strong{font-size:11px}.import-block p{margin:3px 0 10px;color:var(--muted);font-size:9px}.import-block form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}.import-block input[type=file]{min-width:0;height:34px;padding:6px 8px;font-size:9px}.import-block .setting-status{margin:8px 0 0} .account-row{display:grid;grid-template-columns:1fr 1fr;padding:14px}.danger{margin:2px 14px;color:var(--neg)} .admin-hero{display:flex;align-items:flex-end;justify-content:space-between;min-height:150px;margin-bottom:4px;padding:28px 32px;background:linear-gradient(120deg,var(--surface) 55%,var(--accent-soft))}.admin-hero h2{margin:10px 0 5px;font-size:28px;font-weight:450;letter-spacing:-.04em}.admin-hero p{margin:0;color:var(--muted)}.admin-total{text-align:right}.admin-total strong{display:block;font-size:34px;font-weight:400}.admin-total small{color:var(--muted);font-size:8px;letter-spacing:.12em}.admin-directory>.panel-head{height:58px}.admin-table-wrap{overflow-x:auto}.admin-table{width:100%;min-width:1050px;border-collapse:collapse}.admin-table th{padding:10px 13px;border-bottom:1px solid var(--line-strong);background:var(--surface-2);color:var(--muted);font-size:8px;letter-spacing:.09em;text-align:left;text-transform:uppercase}.admin-table td{padding:12px 13px;border-bottom:1px solid var(--line);vertical-align:top;font-size:10px}.admin-table tr:last-child td{border-bottom:0}.admin-table td:first-child strong{display:inline-block;margin-right:7px;font-size:11px}.admin-table td:first-child small{padding:2px 4px;border:1px solid var(--accent);color:var(--accent);font-size:6px;letter-spacing:.08em}.admin-muted{color:var(--faint)}.referral-count{display:inline-grid;place-items:center;min-width:23px;height:23px;border:1px solid var(--line-strong);background:var(--surface-2);font-weight:600}.referred-user{display:inline-block;margin:0 4px 4px 0;padding:3px 6px;border:1px solid var(--line);background:var(--surface-2)}.admin-empty{text-align:center!important;color:var(--muted);padding:30px!important}.plus-admin-control{display:flex;align-items:center;gap:7px;white-space:nowrap}.plus-access{padding:3px 5px;border:1px solid var(--line-strong);color:var(--faint);font-size:7px;font-weight:700;letter-spacing:.08em}.plus-access.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.plus-admin-control button{height:27px;margin:0}.plus-admin-control button:disabled{cursor:default;opacity:.65}.plus-admin-control .remove-plus{color:var(--neg)} .candle-tool{margin-top:10px}.candle-tool>.panel-head{height:58px}.candle-tool-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:15px}.candle-tool-row label{flex:1 1 150px;margin:0}.candle-tool-row button{margin:0;height:32px}.candle-tool .setting-status{margin:0 15px 15px} .plus-pill{padding:3px 7px;border:1px solid #cbd7fa;background:var(--accent-soft);color:var(--accent);font-size:9px;font-weight:700}.plus-pill.unlocked{border-color:#b9dfd1;background:#f1faf7;color:var(--pos)}body.dark .plus-pill.unlocked{background:#173329}.plus-benefits{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:14px;background:var(--line)}.plus-benefits span{padding:9px;background:var(--surface-2);font-size:10px}.plus-benefits span:before{content:"✓";margin-right:7px;color:var(--accent)}.invite-label{margin:14px}.copy-row{display:flex;gap:5px}.copy-row input{min-width:0}.copy-row button{flex:none}.theme-row{display:flex;align-items:center;justify-content:space-between;margin:14px;padding-top:14px;border-top:1px solid var(--line)}.theme-row strong{font-size:11px}.theme-row small{display:block;margin-top:2px;color:var(--muted);font-size:9px}.admin-test{padding:14px}.button-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}.danger-inline{color:var(--neg)} .time-settings{padding:0 14px}.time-settings .setting-status{margin:14px 0 0;font-variant-numeric:tabular-nums}.time-settings label:first-child select{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:none} .modal-backdrop{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:18px;background:rgba(10,14,22,.56);backdrop-filter:blur(3px)}.plus-modal{position:relative;width:min(520px,100%);padding:28px;border:1px solid var(--line-strong);background:var(--surface);box-shadow:0 24px 80px rgba(0,0,0,.24)}.plus-modal h2{margin:9px 0;font-size:30px;font-weight:500;letter-spacing:-.04em}.plus-modal>p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}.modal-close{position:absolute;right:13px;top:11px;width:30px;height:30px;border:0;background:none;color:var(--muted);font-size:23px}.modal-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:22px 0;background:var(--line)}.modal-benefits div{min-width:0;padding:14px 8px;background:var(--surface-2)}.modal-benefits strong,.modal-benefits span{display:block}.modal-benefits strong{font-size:17px}.modal-benefits span{margin-top:3px;color:var(--muted);font-size:8px}.plus-modal>small{display:block;margin-top:10px;color:var(--accent)} .dark .live-pill{background:#173329}.dark .heat-help{background:rgba(23,26,32,.88)} .toast{position:fixed;z-index:50;right:18px;bottom:18px;padding:9px 12px;border:1px solid #333943;border-radius:var(--radius);background:#171a20;color:#fff;font-size:10px;opacity:0;transform:translateY(6px);transition:.15s;pointer-events:none}.toast.show{opacity:1;transform:none} @media(max-width:1050px){.terminal-grid{grid-template-columns:minmax(0,1fr)}.dom-panel{grid-row:auto}.settings-grid{grid-template-columns:minmax(0,1fr)}.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.plus-corner{top:auto;bottom:14px}} @media(max-width:760px){.auth-stage{display:block}.auth-context{display:none}.auth-card{min-height:calc(100vh - 82px);display:flex;flex-direction:column;justify-content:center}.topbar{grid-template-columns:auto 1fr;height:auto;min-height:48px;padding:8px 10px}.topbar nav{grid-column:1/-1;grid-row:2;width:100%;margin-top:7px;overflow-x:auto}.nav{flex:1;justify-content:center;padding:0 8px}.aside-foot{display:none}.shell{padding-top:86px}.pagebar{height:62px;padding:0 12px}.view{padding:8px}.metric-grid{grid-template-columns:1fr 1fr}.metric-grid article:nth-child(3){border-left:0;border-top:1px solid var(--line)}.metric-grid article:nth-child(4){border-top:1px solid var(--line)}.profile-bar{align-items:flex-start;gap:12px;flex-direction:column}.inline{width:100%;flex-wrap:wrap}.account-chip>div:last-child{display:none}} @media(max-width:480px){.brand-copy span{display:none}.metric-grid,.stat-grid{grid-template-columns:minmax(0,1fr)}.metric-grid article+article,.metric-grid article:nth-child(3){border-left:0;border-top:1px solid var(--line)}.header-right{min-width:0}.header-right select{width:min(112px,32vw)}.chart-panel #chart{height:340px}.pagebar h1{font-size:15px}.plus-corner{right:8px;bottom:8px;min-width:160px}.modal-benefits{grid-template-columns:1fr 1fr}.plus-modal{padding:22px 16px}.plus-benefits{grid-template-columns:1fr}.copy-row{align-items:stretch}.copy-row button{padding-inline:9px}} /* Rooted Plus roadmap and premium surfaces */ body.dark{--bg:#000;--surface:#050505;--surface-2:#0b0b0d;--line:#1a1a1e;--line-strong:#292a30;--text:#f5f6f8;--muted:#9da0aa;--faint:#646873;--accent:#8ba6ff;--accent-soft:#111a34;--pos:#42d69b;--neg:#ff708b;color-scheme:dark} body.dark .topbar,body.dark .pagebar{background:rgba(5,5,5,.94);backdrop-filter:blur(18px)}body.dark input,body.dark select,body.dark button.secondary{background:#09090b}body.dark .panel,body.dark .profile-bar{box-shadow:inset 0 1px rgba(255,255,255,.025)}body.dark .avatar{border-color:#243667}body.dark .primary{box-shadow:0 0 20px rgba(98,132,255,.16)} .workspace{position:relative;isolation:isolate}.workspace>*{position:relative;z-index:1}.plus-enabled .workspace:before{content:"";position:fixed;z-index:0;inset:48px 0 0;pointer-events:none;background-image:radial-gradient(circle at 12% 8%,rgba(67,105,224,.10),transparent 28%),radial-gradient(circle at 88% 22%,rgba(111,75,210,.08),transparent 24%),linear-gradient(rgba(82,105,170,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(82,105,170,.028) 1px,transparent 1px);background-size:auto,auto,38px 38px,38px 38px}.dark.plus-enabled .workspace:before{background-image:radial-gradient(circle at 16% 7%,rgba(67,105,224,.16),transparent 30%),radial-gradient(circle at 86% 28%,rgba(103,68,203,.12),transparent 28%),linear-gradient(rgba(130,149,210,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(130,149,210,.035) 1px,transparent 1px)}.plus-enabled .panel{background:color-mix(in srgb,var(--surface) 91%,transparent);backdrop-filter:blur(10px)} .topbar{grid-template-columns:190px minmax(0,1fr) auto 90px;gap:10px}.plus-corner{position:static;z-index:auto;min-width:0;height:28px;display:flex;flex-direction:row;align-items:center;gap:9px;padding:0 10px;border:1px solid #bdcaf0;border-radius:3px;background:linear-gradient(135deg,var(--surface),var(--accent-soft));box-shadow:none;color:var(--text);white-space:nowrap}.plus-corner span{font-size:9px;font-weight:700;letter-spacing:.025em}.plus-corner b{color:var(--accent);font-size:13px;transition:transform .15s}.plus-corner:hover b{transform:translateX(2px)}.plus-corner.unlocked{border-color:#344b8f;background:linear-gradient(135deg,var(--accent-soft),var(--surface))}.plus-corner small{display:none} .advanced-nav{gap:6px}.advanced-nav b{padding:1px 4px;border:1px solid var(--line-strong);border-radius:2px;color:var(--faint);font-size:6px;letter-spacing:.08em}.advanced-nav.unlocked b{border-color:#3553a3;background:var(--accent-soft);color:var(--accent)} .advanced-hero{min-height:235px;display:flex;align-items:flex-end;justify-content:space-between;padding:34px;background:linear-gradient(120deg,var(--surface) 45%,var(--accent-soft));position:relative}.advanced-hero:after{content:"";position:absolute;right:8%;top:50%;width:180px;height:180px;border:1px solid rgba(94,126,220,.18);transform:translateY(-50%) rotate(45deg);box-shadow:0 0 0 28px rgba(94,126,220,.035)}.advanced-hero>div,.advanced-hero>.coming-pill{position:relative;z-index:1}.plus-kicker{color:var(--accent);font-size:8px;font-weight:750;letter-spacing:.14em}.advanced-hero h2{margin:12px 0 9px;font-size:30px;font-weight:450;letter-spacing:-.045em}.advanced-hero p{max-width:610px;margin:0;color:var(--muted);font-size:12px;line-height:1.65}.coming-pill{padding:6px 9px;border:1px solid #425ba1;background:var(--accent-soft);color:var(--accent);font-size:8px;font-weight:750;letter-spacing:.1em}.advanced-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:4px}.advanced-preview-grid article{padding:22px}.advanced-preview-grid article>span{color:var(--accent);font-size:7px;font-weight:700;letter-spacing:.12em}.advanced-preview-grid strong{display:block;margin-top:28px;font-size:14px}.advanced-preview-grid p{margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.55} .settings-roadmap{margin:14px}.roadmap-step{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);background:var(--surface-2)}.roadmap-step i{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line-strong);border-radius:50%;font-style:normal;font-weight:700}.roadmap-step strong,.roadmap-step small{display:block}.roadmap-step strong{font-size:10px}.roadmap-step small{margin-top:2px;color:var(--muted);font-size:8px}.step-state{color:var(--faint);font-size:7px;font-weight:750;letter-spacing:.1em}.roadmap-line{width:1px;height:10px;margin:auto;background:var(--line-strong)}.roadmap-step.complete{border-color:#344e97;background:linear-gradient(90deg,var(--accent-soft),var(--surface-2))}.roadmap-step.complete i{border-color:var(--accent);background:var(--accent);color:#fff}.roadmap-step.complete .step-state{color:var(--pos)} .modal-backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}.plus-modal{width:min(670px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:0;border:1px solid #30384e;border-radius:6px;background:var(--surface);box-shadow:0 35px 100px rgba(0,0,0,.45)}.plus-modal:before{content:"";position:absolute;inset:0 0 auto;height:180px;pointer-events:none;background:radial-gradient(circle at 80% 20%,rgba(78,112,220,.18),transparent 45%),linear-gradient(135deg,rgba(80,105,190,.07),transparent)}.plus-modal-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:24px;align-items:center;padding:32px 34px 25px;border-bottom:1px solid var(--line)}.plus-modal h2{margin:8px 0 7px;font-size:34px}.plus-modal-head p{max-width:480px;margin:0;color:var(--muted);font-size:11px;line-height:1.6}.modal-progress-ring{display:grid;place-items:center;align-content:center;width:72px;height:72px;border:1px solid #3c54a0;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),var(--surface));box-shadow:0 0 0 6px rgba(80,110,210,.045)}.modal-progress-ring strong{font-size:20px;font-weight:500}.modal-progress-ring span{color:var(--accent);font-size:7px;font-weight:750;letter-spacing:.12em}.modal-roadmap{padding:24px 34px}.modal-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:13px;position:relative}.modal-step+.modal-step{margin-top:12px}.modal-step:not(:last-child):after{content:"";position:absolute;left:16px;top:34px;bottom:-13px;width:1px;background:var(--line-strong)}.step-marker{position:relative;z-index:1;display:grid;place-items:start center}.step-marker span{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--muted);font-weight:700}.step-card{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:15px 16px;border:1px solid var(--line);border-radius:3px;background:var(--surface-2)}.step-card small,.step-card strong{display:block}.step-card small{color:var(--accent);font-size:7px;letter-spacing:.12em}.step-card strong{margin-top:3px;font-size:12px}.step-card ul{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:11px 0 0;border-top:1px solid var(--line);list-style:none;color:var(--muted);font-size:9px}.step-card li:before{content:"·";margin-right:6px;color:var(--accent)}.step-card em{color:var(--faint);font-size:7px;text-transform:uppercase}.modal-step.complete .step-marker span{border-color:var(--accent);background:var(--accent);color:#fff}.modal-step.complete .step-card{border-color:#314889;background:linear-gradient(90deg,var(--accent-soft),var(--surface-2))}.modal-step.complete .step-state{color:var(--pos)}.modal-invite{padding:0 34px 30px}.modal-invite label{margin:0 0 7px}.modal-invite>small{display:block;margin-top:8px;color:var(--accent);font-size:8px}.modal-close{z-index:3} @media(max-width:1050px){.topbar{grid-template-columns:auto minmax(0,1fr) auto}.topbar nav{grid-column:auto;grid-row:auto}.aside-foot{display:none}.plus-corner{top:auto;bottom:auto}} @media(max-width:760px){.topbar{grid-template-columns:auto 1fr auto}.topbar nav{grid-column:1/-1;grid-row:2}.plus-corner{grid-column:3;grid-row:1}.shell{padding-top:86px}.advanced-preview-grid{grid-template-columns:1fr}.advanced-hero{padding:24px}.advanced-hero:after{display:none}} @media(max-width:480px){.plus-corner{position:static;min-width:0;height:28px;padding:0 8px}.plus-corner span{font-size:0}.plus-corner span .plus-script{font-size:12px}.plus-modal{padding:0}.plus-modal-head{grid-template-columns:1fr;padding:26px 18px 20px}.modal-progress-ring{position:absolute;right:18px;top:24px;width:58px;height:58px}.plus-modal-head>div:first-child{padding-right:56px}.modal-roadmap{padding:18px}.modal-invite{padding:0 18px 22px}.step-card ul{display:block}.step-card li+li{margin-top:5px}.advanced-nav b{display:none}} /* Motion system */ @keyframes viewReveal{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:none}} @keyframes cardReveal{0%{opacity:0;transform:translateY(10px) scale(.995)}100%{opacity:1;transform:none}} @keyframes backdropIn{0%{opacity:0;backdrop-filter:blur(0)}100%{opacity:1;backdrop-filter:blur(10px)}} @keyframes modalIn{0%{opacity:0;transform:translateY(18px) scale(.975)}60%{opacity:1}100%{opacity:1;transform:none}} @keyframes modalOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(8px) scale(.985)}} @keyframes roadmapIn{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:none}} @keyframes ringIn{0%{opacity:0;transform:scale(.72) rotate(-20deg)}70%{transform:scale(1.04) rotate(2deg)}100%{opacity:1;transform:none}} @keyframes unlockPop{0%{transform:scale(1)}38%{transform:scale(1.012);box-shadow:0 0 0 1px rgba(112,143,255,.4),0 0 26px rgba(82,115,220,.18)}100%{transform:scale(1);box-shadow:none}} @keyframes markerPop{0%{transform:scale(.65)}65%{transform:scale(1.14)}100%{transform:scale(1)}} @keyframes subtlePulse{0%,100%{box-shadow:0 0 0 0 rgba(95,126,231,0)}50%{box-shadow:0 0 0 5px rgba(95,126,231,.07)}} @keyframes textureDrift{0%{background-position:0 0,0 0,0 0,0 0}100%{background-position:28px -16px,-20px 24px,38px 38px,38px 38px}} @keyframes themeWash{0%{opacity:.34}100%{opacity:0}} .view-enter{animation:viewReveal .32s cubic-bezier(.2,.75,.3,1) both}.view-enter>.metric-grid,.view-enter>.profile-bar,.view-enter>.advanced-hero{animation:cardReveal .38s .035s cubic-bezier(.2,.75,.3,1) both}.view-enter>.terminal-grid,.view-enter>.pnl-panel,.view-enter>.settings-grid,.view-enter>.advanced-preview-grid{animation:cardReveal .42s .08s cubic-bezier(.2,.75,.3,1) both} .nav,.primary,.secondary,.icon-button,.plus-corner,.account-chip,.roadmap-step,.step-card,.step-marker span{transition:color .18s ease,background-color .28s ease,border-color .28s ease,box-shadow .28s ease,transform .18s ease,opacity .18s ease}.nav:hover{transform:translateY(-1px)}.nav:active,.primary:active,.secondary:active,.plus-corner:active{transform:translateY(1px) scale(.985)}.primary:hover{box-shadow:0 6px 18px rgba(47,98,232,.18)}.plus-corner{overflow:hidden}.plus-corner:before{content:"";position:absolute;inset:-1px auto -1px -55%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.36),transparent);transform:skewX(-18deg);transition:left .5s ease}.plus-corner:hover:before{left:115%}.plus-corner.unlocked{animation:subtlePulse 3.2s ease-in-out infinite} .modal-backdrop.opening{animation:backdropIn .3s ease both}.modal-backdrop.opening .plus-modal{animation:modalIn .46s cubic-bezier(.18,.82,.24,1) both}.modal-backdrop.closing{animation:modalOut .18s ease both}.modal-backdrop.closing .plus-modal{animation:modalOut .18s ease both}.modal-backdrop.opening .plus-modal-head>div:first-child{animation:roadmapIn .35s .1s ease both}.modal-backdrop.opening .modal-progress-ring{animation:ringIn .5s .12s cubic-bezier(.2,.8,.3,1) both}.modal-backdrop.opening .modal-step{animation:roadmapIn .38s cubic-bezier(.2,.75,.3,1) both}.modal-backdrop.opening .modal-step:nth-child(1){animation-delay:.17s}.modal-backdrop.opening .modal-step:nth-child(2){animation-delay:.25s}.modal-backdrop.opening .modal-invite{animation:cardReveal .36s .32s ease both} .unlock-pop{animation:unlockPop .7s cubic-bezier(.2,.75,.3,1)}.unlock-pop .step-marker span,.roadmap-step.unlock-pop i{animation:markerPop .55s cubic-bezier(.2,.8,.3,1)}.modal-step.complete .step-marker span{box-shadow:0 0 18px rgba(86,119,226,.22)} .plus-enabled .workspace:before{animation:textureDrift 28s linear infinite alternate}.advanced-hero:after{animation:subtlePulse 4s ease-in-out infinite}.advanced-preview-grid article{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.advanced-preview-grid article:hover{transform:translateY(-3px);border-color:#344b8f;box-shadow:0 12px 28px rgba(25,42,90,.09)} body:after{content:"";position:fixed;z-index:200;inset:0;pointer-events:none;background:var(--accent)}body:not(.theme-shift):after{display:none}body.theme-shift:after{animation:themeWash .5s ease-out both} @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}} /* Premium composition across the core workspace */ .section-kicker,.module-index{display:block;color:var(--accent);font-size:7px;font-weight:750;letter-spacing:.14em}.section-kicker i{display:inline-block;width:5px;height:5px;margin-right:7px;background:var(--pos);box-shadow:0 0 0 4px color-mix(in srgb,var(--pos) 12%,transparent)} #terminal,#portfolio,#settings{padding-top:14px}#terminal>.panel,#portfolio>.panel,#settings>.panel,#terminal .panel,#portfolio .panel,#settings .panel{border-radius:6px} .terminal-hero{position:relative;min-height:188px;display:flex;align-items:flex-end;justify-content:space-between;padding:30px 34px 50px;overflow:hidden;background:linear-gradient(115deg,var(--surface) 40%,color-mix(in srgb,var(--accent-soft) 72%,var(--surface)))}.terminal-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.8%,rgba(91,117,190,.065) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(91,117,190,.065) 50%,transparent 50.2%);background-size:46px 46px}.terminal-hero:after{content:"";position:absolute;right:13%;top:-90px;width:260px;height:260px;border:1px solid rgba(73,104,199,.16);border-radius:50%;box-shadow:0 0 0 34px rgba(73,104,199,.035),0 0 0 70px rgba(73,104,199,.02)}.desk-intro,.desk-signal{position:relative;z-index:1}.desk-intro h2{margin:12px 0 9px;font-size:30px;font-weight:430;line-height:1.02;letter-spacing:-.048em}.desk-intro p{margin:0;color:var(--muted);font-size:11px}.desk-signal{min-width:225px;display:flex;align-items:center;gap:15px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));background:color-mix(in srgb,var(--surface) 78%,transparent);backdrop-filter:blur(12px)}.signal-orbit{position:relative;width:38px;height:38px;border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line));border-radius:50%}.signal-orbit:before,.signal-orbit:after{content:"";position:absolute;border:1px solid color-mix(in srgb,var(--accent) 15%,transparent);border-radius:50%}.signal-orbit:before{inset:5px}.signal-orbit:after{inset:11px}.signal-orbit span{position:absolute;z-index:1;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--pos);transform:translate(-50%,-50%);box-shadow:0 0 12px var(--pos)}.signal-orbit i{position:absolute;inset:-1px;border-top:1px solid var(--accent);border-radius:50%;animation:orbitSpin 5s linear infinite}.desk-signal small,.desk-signal strong,.desk-signal p{display:block}.desk-signal small{color:var(--faint);font-size:7px;letter-spacing:.12em}.desk-signal strong{margin-top:3px;font-size:11px}.desk-signal p{margin:2px 0 0;color:var(--muted);font-size:8px} @keyframes orbitSpin{to{transform:rotate(360deg)}} #terminal>.metric-grid{position:relative;z-index:2;width:calc(100% - 36px);margin:-30px auto 12px;border:0;border-radius:5px;background:transparent;box-shadow:0 12px 34px rgba(25,38,75,.08)}#terminal>.metric-grid article{position:relative;min-height:86px;padding:17px 18px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px)}#terminal>.metric-grid article:first-child{border-radius:5px 0 0 5px}#terminal>.metric-grid article:last-child{border-radius:0 5px 5px 0}#terminal>.metric-grid article:after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:2px;background:var(--line)}#terminal>.metric-grid article:nth-child(1):after{background:var(--accent)}#terminal>.metric-grid article:nth-child(3):after{background:var(--pos)}#terminal>.metric-grid article:nth-child(4):after{background:var(--neg)}#terminal>.metric-grid label{margin-bottom:9px}#terminal>.metric-grid strong{font-size:19px} .terminal-grid{gap:10px}.terminal-grid .panel{border-color:var(--line);box-shadow:0 8px 25px rgba(25,38,75,.035)}.terminal-grid .panel-head{height:66px;padding:11px 15px}.module-index+ h2{margin-top:4px}.chart-panel #chart{position:relative;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 46px;background-position:-1px -1px}.chart-panel.market-empty #chart:after{content:"AWAITING MARKET DATA\A The price structure will resolve when the live feed arrives.";white-space:pre;position:absolute;left:50%;top:50%;color:var(--faint);font:8px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.09em;text-align:center;transform:translate(-50%,-50%)}.dom-head{background:var(--surface-2)}.book-mid{background:linear-gradient(90deg,var(--surface-2),var(--accent-soft),var(--surface-2))}.heat-wrap{background:var(--surface-2)} .profile-hero{position:relative;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(350px,42%);align-items:center;gap:34px;margin-bottom:12px;padding:20px 34px 22px;overflow:hidden;background:linear-gradient(118deg,var(--surface) 45%,color-mix(in srgb,var(--accent-soft) 65%,var(--surface)))}.profile-hero:before{content:"";position:absolute;right:7%;top:50%;width:240px;height:240px;border:1px solid rgba(81,111,205,.13);transform:translateY(-50%) rotate(45deg);box-shadow:0 0 0 32px rgba(81,111,205,.03)}.player-intro,.player-connect{position:relative;z-index:1}.player-intro h2{margin:8px 0 7px;font-size:30px;font-weight:430;line-height:1.03;letter-spacing:-.048em}.player-intro p{max-width:430px;margin:0;color:var(--muted);font-size:11px}.player-connect{padding:15px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(12px)}.connect-label{display:flex;align-items:center;gap:10px;margin-bottom:11px}.connect-label>span{display:grid;place-items:center;width:27px;height:27px;border:1px solid var(--accent);border-radius:50%;color:var(--accent);font-size:8px}.connect-label strong,.connect-label small{display:block}.connect-label strong{font-size:10px}.connect-label small{margin-top:2px;color:var(--muted);font-size:8px}.player-connect .inline input{flex:1;width:auto}.player-connect .inline{width:100%}#statMetrics:not(:empty){margin-bottom:12px;border:0;border-radius:5px;overflow:hidden;box-shadow:0 8px 25px rgba(25,38,75,.04)}#statMetrics article{border-color:var(--line)}.pnl-panel{box-shadow:0 8px 25px rgba(25,38,75,.035)}.pnl-panel .panel-head{height:68px;padding:11px 15px}.empty-chart{position:relative;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 54px}.chart-empty-copy{position:absolute;left:50%;top:50%;width:min(360px,80%);text-align:center;transform:translate(-50%,-50%)}.chart-empty-copy span,.chart-empty-copy strong,.chart-empty-copy p{display:block}.chart-empty-copy span{color:var(--accent);font-size:7px;font-weight:750;letter-spacing:.14em}.chart-empty-copy strong{margin-top:10px;font-size:16px;font-weight:500}.chart-empty-copy p{margin:7px 0 0;color:var(--muted);font-size:9px;line-height:1.55} .settings-hero{position:relative;min-height:170px;display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px;padding:30px 34px;overflow:hidden;background:linear-gradient(120deg,var(--surface) 47%,color-mix(in srgb,var(--accent-soft) 68%,var(--surface)))}.settings-hero:before{content:"";position:absolute;right:12%;bottom:-120px;width:250px;height:250px;border:1px solid rgba(81,111,205,.14);border-radius:50%;box-shadow:0 0 0 28px rgba(81,111,205,.035)}.settings-hero>div{position:relative;z-index:1}.settings-hero h2{margin:12px 0 7px;font-size:29px;font-weight:430;letter-spacing:-.045em}.settings-hero p{margin:0;color:var(--muted);font-size:11px}.settings-orbit{display:flex;align-items:center;gap:10px}.settings-orbit span{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--accent);border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:17px}.settings-orbit small{color:var(--muted);font-size:7px;font-weight:700;line-height:1.5;letter-spacing:.12em}.settings-grid{gap:10px;align-items:start}.settings-card{border-color:var(--line);box-shadow:0 8px 25px rgba(25,38,75,.035)}.settings-card>.panel-head{height:66px;padding:11px 15px;background:linear-gradient(90deg,var(--surface),var(--surface-2))}.settings-card>.panel-head h2{font-size:12px}.plus-settings{grid-column:1/-1}.plus-settings>.panel-head{background:linear-gradient(105deg,var(--surface),var(--accent-soft))}.plus-settings .settings-roadmap{display:grid;grid-template-columns:1fr 14px 1fr;align-items:center}.plus-settings .roadmap-line{width:14px;height:1px}.plus-settings .invite-label,.plus-settings .theme-row{margin-inline:16px}.account-row{padding:17px}.time-settings,.stack{padding-inline:16px}.secret-box,.setting-status{border-radius:4px} body.dark .terminal-hero,body.dark .profile-hero,body.dark .settings-hero{background:linear-gradient(115deg,#050505 38%,#0d1224)}body.dark .desk-signal,body.dark .player-connect{background:rgba(7,7,9,.75)}body.dark #terminal>.metric-grid article{background:rgba(5,5,5,.91)}body.dark .terminal-grid .panel,body.dark .pnl-panel,body.dark .settings-card{box-shadow:0 12px 35px rgba(0,0,0,.28)}body.dark .chart-panel #chart,body.dark .empty-chart{background-image:linear-gradient(#15161a 1px,transparent 1px),linear-gradient(90deg,#15161a 1px,transparent 1px)} @media(max-width:1050px){.terminal-hero,.profile-hero{min-height:200px}.profile-hero{grid-template-columns:1fr}.player-connect{width:min(520px,100%)}.plus-settings .settings-roadmap{display:block}.plus-settings .roadmap-line{width:1px;height:10px}} @media(max-width:760px){.terminal-hero,.profile-hero,.settings-hero{min-height:0;padding:25px 20px}.terminal-hero{display:block;padding-bottom:48px}.desk-signal{display:none}.desk-intro h2,.player-intro h2{font-size:25px}.profile-hero{display:block}.player-connect{margin-top:22px}.settings-orbit{display:none}#terminal>.metric-grid{width:calc(100% - 16px);margin-top:-30px}.terminal-grid{gap:8px}.plus-settings{grid-column:auto}} @media(max-width:480px){.terminal-hero,.profile-hero,.settings-hero{border-radius:5px!important}.player-connect .inline{display:grid;grid-template-columns:1fr 1fr}.player-connect .inline input{grid-column:1/-1;width:100%}#terminal>.metric-grid article:first-child,#terminal>.metric-grid article:last-child{border-radius:0}.settings-hero h2{font-size:25px}} .settings-grid>.settings-card:first-child{grid-row:2}.settings-grid>.plus-settings{grid-row:1} @media(max-width:760px){.settings-grid>.settings-card:first-child,.settings-grid>.plus-settings{grid-row:auto}} /* Corporate home and viewport console */ .on-home .pagebar{border-bottom-color:transparent}.on-home #marketSelect{display:none}.home-view{padding-top:14px}.home-hero{position:relative;min-height:clamp(430px,64vh,650px);display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,46%);align-items:center;padding:clamp(38px,6vw,90px);overflow:hidden;background:linear-gradient(118deg,var(--surface) 42%,color-mix(in srgb,var(--accent-soft) 74%,var(--surface)))}.home-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(77,102,174,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(77,102,174,.05) 1px,transparent 1px);background-size:56px 56px;mask-image:linear-gradient(90deg,transparent 25%,#000)}.home-copy,.home-visual{position:relative;z-index:1}.home-copy h2{margin:20px 0 18px;font-size:clamp(43px,5vw,76px);font-weight:360;line-height:.92;letter-spacing:-.064em}.home-copy h2 em{color:var(--accent);font-family:"Segoe Script","Brush Script MT",cursive;font-size:.82em;font-style:normal;font-weight:500;letter-spacing:-.045em}.home-copy>p{max-width:550px;margin:0;color:var(--muted);font-size:14px;line-height:1.7}.home-actions{display:flex;gap:8px;margin-top:30px}.home-actions .primary{height:40px;padding:0 18px}.home-actions .primary span{margin-left:16px;font-size:15px}.home-actions .secondary{height:40px;padding-inline:17px}.home-trust{display:flex;gap:24px;margin-top:38px;padding-top:15px;border-top:1px solid var(--line);color:var(--faint);font-size:7px;font-weight:750;letter-spacing:.13em}.home-visual{height:min(440px,48vw)}.visual-orbit,.visual-axis,.visual-core,.visual-point{position:absolute}.visual-orbit{left:50%;top:50%;border:1px solid rgba(72,104,202,.2);border-radius:50%;transform:translate(-50%,-50%)}.orbit-one{width:72%;aspect-ratio:1;animation:homeOrbit 24s linear infinite}.orbit-two{width:48%;aspect-ratio:1;border-style:dashed;animation:homeOrbit 18s linear infinite reverse}.visual-axis{background:rgba(72,104,202,.13)}.axis-x{left:5%;right:5%;top:50%;height:1px}.axis-y{top:5%;bottom:5%;left:50%;width:1px}.visual-core{left:50%;top:50%;width:150px;height:150px;display:grid;place-items:center;align-content:center;border:1px solid #4c68bb;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),color-mix(in srgb,var(--surface) 80%,transparent));box-shadow:0 0 0 16px rgba(73,104,199,.035),0 20px 60px rgba(40,66,135,.12);transform:translate(-50%,-50%)}.visual-core span,.visual-core strong,.visual-core small{display:block}.visual-core span{color:var(--accent);font-size:7px;font-weight:750;letter-spacing:.14em}.visual-core strong{margin:5px 0;font-size:38px;font-weight:300}.visual-core small{color:var(--muted);font-size:6px;line-height:1.45;letter-spacing:.12em;text-align:center}.visual-point{width:8px;height:8px;border:2px solid var(--surface);border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(76,104,187,.12)}.point-a{left:14%;top:27%}.point-b{right:12%;bottom:24%;background:var(--pos);box-shadow:0 0 0 6px color-mix(in srgb,var(--pos) 13%,transparent)}@keyframes homeOrbit{to{transform:translate(-50%,-50%) rotate(360deg)}}.home-capabilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}.home-capabilities article{min-height:145px;padding:22px}.home-capabilities span{color:var(--accent);font-size:7px;font-weight:750;letter-spacing:.13em}.home-capabilities strong{display:block;margin-top:30px;font-size:14px}.home-capabilities p{max-width:330px;margin:7px 0 0;color:var(--muted);font-size:9px;line-height:1.55}.home-capabilities article{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.home-capabilities article:hover{transform:translateY(-3px);border-color:#344b8f;box-shadow:0 14px 30px rgba(25,42,90,.08)} body.dark .home-hero{background:linear-gradient(118deg,#050505 40%,#0d1224)}body.dark .visual-core{background:radial-gradient(circle,#111a34,#050505)} @media(min-width:1180px){#terminal{height:calc(100vh - 118px);padding:12px 18px;overflow:hidden}#terminal>.metric-grid{width:100%;margin:0 0 10px;box-shadow:none}#terminal>.metric-grid article{min-height:76px;padding:13px 16px}#terminal>.metric-grid article:first-child{border-radius:6px 0 0 6px}#terminal>.metric-grid article:last-child{border-radius:0 6px 6px 0}.terminal-grid{height:calc(100% - 86px);grid-template-columns:minmax(420px,1.45fr) minmax(250px,.72fr) minmax(290px,.9fr);grid-template-rows:minmax(0,1fr);gap:8px}.chart-panel,.dom-panel,.heat-panel{grid-row:1;min-height:0}.chart-panel{grid-column:1}.dom-panel{grid-column:2}.heat-panel{grid-column:3}.chart-panel #chart{height:calc(100% - 66px)}.dom-scroll{height:calc(100% - 93px)}.heat-wrap{height:calc(100% - 66px)}.heat-panel canvas{height:100%}} @media(max-width:900px){.home-hero{grid-template-columns:1fr;min-height:auto}.home-visual{display:none}.home-capabilities{grid-template-columns:1fr}.home-copy h2{font-size:clamp(42px,10vw,62px)}} @media(max-width:560px){.home-hero{padding:34px 22px}.home-actions{align-items:stretch;flex-direction:column}.home-actions button{width:100%!important}.home-trust{flex-wrap:wrap;gap:12px 18px}.home-capabilities{gap:8px}} /* Dense navbar and classic terminal stack */ .topbar{grid-template-columns:150px minmax(360px,1fr) auto auto;gap:8px}.navbar-account{min-width:0;gap:8px}.navbar-account select{width:104px;height:28px}.navbar-account .account-chip{min-width:0;padding-left:8px}.navbar-account .avatar{width:26px;height:26px}.navbar-account #accountName{max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.navbar-account #accountRole{font-size:7px}.pagebar.hidden{display:none!important}.workspace{min-height:calc(100vh - 48px)} @media(min-width:1180px){#terminal{height:calc(100vh - 48px);padding:10px 14px;overflow:hidden}#terminal>.metric-grid{height:54px;margin:0 0 8px}#terminal>.metric-grid article{min-height:54px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:12px;padding:7px 13px}#terminal>.metric-grid article label{grid-row:1;grid-column:1;margin:0;font-size:7px}#terminal>.metric-grid article strong{grid-row:1/3;grid-column:2;align-self:center;font-size:17px;text-align:right}#terminal>.metric-grid article small{grid-row:2;grid-column:1;margin:2px 0 0;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px}#terminal>.metric-grid article:after{left:13px;right:13px}.terminal-grid{height:calc(100% - 62px);grid-template-columns:minmax(0,1fr) 310px;grid-template-rows:minmax(255px,1.55fr) minmax(170px,.8fr);gap:8px}.chart-panel{grid-column:1;grid-row:1}.heat-panel{grid-column:1;grid-row:2}.dom-panel{grid-column:2;grid-row:1/3}.terminal-grid .panel-head{height:54px;padding:8px 13px}.terminal-grid .panel-head p{margin-top:1px}.chart-panel #chart{height:calc(100% - 54px)}.heat-wrap{height:calc(100% - 54px)}.heat-panel canvas{height:100%}.dom-scroll{height:calc(100% - 81px)}} @media(max-width:1179px){.topbar{grid-template-columns:140px minmax(0,1fr) 214px auto}.aside-foot{display:none}.terminal-grid{grid-template-columns:minmax(0,1fr) 300px}.dom-panel{grid-row:span 2}.heat-panel{grid-column:1}} @media(max-width:900px){.topbar{grid-template-columns:auto 1fr auto;height:auto;min-height:48px;padding:8px 10px}.topbar nav{grid-column:1/-1;grid-row:2;width:100%;margin-top:7px;overflow-x:auto}.navbar-account{grid-column:2;grid-row:1;justify-self:end}.plus-corner{grid-column:3;grid-row:1}.shell{padding-top:86px}.workspace{min-height:calc(100vh - 86px)}.terminal-grid{grid-template-columns:1fr}.dom-panel{grid-row:auto}.heat-panel{grid-column:auto}} @media(max-width:560px){.navbar-account select{width:92px}.navbar-account .account-chip>div:last-child{display:none}.navbar-account .account-chip{padding-left:5px}.plus-corner span{font-size:0}.plus-corner span .plus-script{font-size:12px}} .brand-name{display:flex;align-items:baseline;gap:7px;white-space:nowrap}.brand-plus{height:auto;padding:0;border:0;background:none;color:var(--accent);font-family:"Segoe Script","Brush Script MT",cursive;font-size:14px;font-weight:600;line-height:1;letter-spacing:-.05em;transform:rotate(-3deg);transition:color .18s ease,transform .18s ease,text-shadow .18s ease}.brand-plus:hover{color:color-mix(in srgb,var(--accent) 76%,#fff);text-shadow:0 0 14px color-mix(in srgb,var(--accent) 32%,transparent);transform:rotate(-3deg) translateY(-1px)}.brand-plus:active{transform:rotate(-3deg) translateY(1px)} /* Rooted home — editorial market desk */ .home-view{max-width:1800px;padding:12px 14px 30px} .root-hero{--ink:#173f35;--paper:#e7e0cd;position:relative;min-height:clamp(560px,calc(100vh - 88px),760px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);grid-template-rows:1fr 42px;gap:0;overflow:hidden;border:0;border-radius:7px;background:var(--ink);color:#f5f0e3;box-shadow:0 20px 60px rgba(21,47,41,.18)} .root-hero:before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;opacity:.23;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")} .root-hero:after{content:"ROOTED";position:absolute;left:-.035em;bottom:-.27em;color:rgba(235,229,211,.035);font-size:clamp(150px,23vw,420px);font-weight:800;line-height:1;letter-spacing:-.095em;pointer-events:none} .root-contours{position:absolute;right:-7%;top:-19%;width:61%;aspect-ratio:1;opacity:.32;transform:rotate(-9deg);background:repeating-radial-gradient(ellipse at 56% 47%,transparent 0 17px,rgba(225,216,190,.19) 18px 19px,transparent 20px 27px)} .root-contours:after{content:"";position:absolute;inset:18%;border:1px solid rgba(235,226,201,.24);border-radius:46% 54% 57% 43%/56% 38% 62% 44%;box-shadow:0 0 0 22px rgba(230,220,194,.025),0 0 0 55px rgba(230,220,194,.018)} .root-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(48px,6.5vw,104px) clamp(38px,6.5vw,104px) 62px} .root-overline{position:absolute;left:clamp(38px,6.5vw,104px);right:20px;top:25px;display:flex;justify-content:space-between;padding-bottom:11px;border-bottom:1px solid rgba(235,229,211,.2);color:rgba(245,240,227,.58);font:700 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.17em} .root-kicker{color:#cec5a9;font:700 8px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em}.root-kicker i{display:inline-block;width:6px;height:6px;margin-right:9px;border-radius:50%;background:#a9d88d;box-shadow:0 0 0 5px rgba(169,216,141,.1)} .root-copy h2{max-width:850px;margin:24px 0 22px;font-size:clamp(52px,6.8vw,106px);font-weight:420;line-height:.83;letter-spacing:-.072em}.root-copy h2 em{display:inline-block;color:#d6c9a5;font-family:Georgia,"Times New Roman",serif;font-size:.82em;font-style:italic;font-weight:400;letter-spacing:-.045em} .root-copy>p{max-width:550px;margin:0;color:rgba(245,240,227,.68);font-size:clamp(12px,1.1vw,15px);line-height:1.7} .root-hero .home-actions{margin-top:30px}.root-hero .home-actions .primary{height:44px;margin:0;padding:0 20px;border-color:#e9e1cc;background:#e9e1cc;color:#173f35;font-weight:750}.root-hero .home-actions .primary:hover{background:#fff8e8}.root-hero .home-actions .primary span{margin-left:24px}.root-ghost{height:44px;padding:0 18px;border:1px solid rgba(235,229,211,.3);border-radius:2px;background:rgba(255,255,255,.025);color:#f5f0e3;font-weight:650}.root-ghost:hover{border-color:rgba(235,229,211,.62);background:rgba(255,255,255,.06)} .root-footnotes{display:flex;gap:28px;margin-top:44px;color:rgba(245,240,227,.5);font:700 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}.root-footnotes b{margin-right:7px;color:#a9d88d;font-weight:700} .market-specimen{position:relative;z-index:3;align-self:center;justify-self:center;width:min(390px,calc(100% - 56px));padding:0;border:1px solid rgba(229,222,201,.38);background:rgba(10,31,27,.76);box-shadow:0 28px 70px rgba(4,19,16,.32);backdrop-filter:blur(13px);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;transform:rotate(1.1deg)} .market-specimen:before{content:"DEPTH / 01";position:absolute;right:-1px;top:-23px;color:rgba(241,235,216,.5);font-size:7px;letter-spacing:.18em}.market-specimen header,.market-specimen footer{display:flex;align-items:center;justify-content:space-between}.market-specimen header{height:64px;padding:0 17px;border-bottom:1px solid rgba(229,222,201,.2)}.market-specimen header span,.specimen-price span{display:block;color:rgba(245,240,227,.43);font-size:7px;letter-spacing:.14em}.market-specimen header strong{display:block;margin-top:4px;color:#f2ecd9;font-size:10px;letter-spacing:.04em}.specimen-live{display:flex;align-items:center;gap:7px;color:#b7df9f;font-size:7px;letter-spacing:.13em}.specimen-live i{width:5px;height:5px;border-radius:50%;background:#a9d88d;box-shadow:0 0 9px #a9d88d;animation:rootLive 2.4s ease-in-out infinite} .specimen-price{display:flex;align-items:end;justify-content:space-between;padding:21px 17px 17px}.specimen-price strong{display:block;margin-top:4px;color:#f4efdf;font:400 30px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.045em}.specimen-price>small{color:#a9d88d;font-size:9px}.specimen-columns,.specimen-book>div,.specimen-mid{display:grid;grid-template-columns:1fr .7fr 1fr;align-items:center}.specimen-columns{height:26px;padding:0 17px;border-block:1px solid rgba(229,222,201,.12);color:rgba(245,240,227,.35);font-size:6px;letter-spacing:.13em}.specimen-columns span:not(:first-child),.specimen-book span{text-align:right}.specimen-columns span:last-child{text-align:center}.specimen-book>div{position:relative;height:31px;padding:0 17px;overflow:hidden;font-size:9px}.specimen-book b,.specimen-book span{position:relative;z-index:1;font-weight:500}.specimen-book i{position:absolute;right:0;top:4px;bottom:4px;width:var(--bar);opacity:.17}.asks b{color:#dfa49a}.asks i{background:#db7669}.bids b{color:#a9d88d}.bids i{background:#81bd73}.specimen-mid{height:34px;padding:0 17px;border-block:1px solid rgba(229,222,201,.2);background:rgba(230,221,194,.07);color:rgba(245,240,227,.42);font-size:6px;letter-spacing:.12em}.specimen-mid b{color:#f4efdf;font-size:9px;text-align:right}.specimen-mid small{text-align:right}.market-specimen footer{height:38px;padding:0 17px;border-top:1px solid rgba(229,222,201,.16);color:rgba(245,240,227,.35);font-size:6px;letter-spacing:.13em} .root-ticker{position:relative;z-index:4;grid-column:1/-1;display:flex;align-items:center;justify-content:space-around;gap:16px;padding:0 28px;border-top:1px solid rgba(235,229,211,.18);background:rgba(8,28,24,.45);color:rgba(245,240,227,.55);font:700 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em}.root-ticker i{width:3px;height:3px;border-radius:50%;background:#a9d88d} @keyframes rootLive{50%{opacity:.35;box-shadow:0 0 2px #a9d88d}} .root-capabilities{gap:9px;margin-top:9px}.root-capabilities article{position:relative;min-height:190px;display:flex;flex-direction:column;padding:23px 24px 20px;border:0;border-radius:6px;background:#ebe6d8;color:#193c34;box-shadow:none}.root-capabilities article:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}.root-capabilities article.featured{background:#d7cfb7}.root-capabilities article>div{display:flex;justify-content:space-between}.root-capabilities span,.root-capabilities article>div b{color:#4f6c64;font:700 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}.root-capabilities article>strong{margin-top:43px;font-size:19px;font-weight:560;letter-spacing:-.035em}.root-capabilities p{max-width:340px;margin:7px 0 0;color:#5e716b;font-size:10px;line-height:1.55}.root-capabilities article>small{margin-top:auto;color:#244e43;font:750 7px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}.root-capabilities article:hover{transform:translateY(-2px);border-color:transparent;box-shadow:0 12px 28px rgba(22,53,45,.1)} body.dark .root-capabilities article{background:#121c19;color:#ece6d5}body.dark .root-capabilities article.featured{background:#192620}body.dark .root-capabilities span,body.dark .root-capabilities article>div b,body.dark .root-capabilities p{color:#94a69f}body.dark .root-capabilities article>small{color:#b8d7c6} @media(max-width:1060px){.root-hero{grid-template-columns:minmax(0,1fr) 360px}.root-copy{padding-inline:44px}.root-overline{left:44px}.root-copy h2{font-size:clamp(52px,7.4vw,78px)}} @media(max-width:820px){.root-hero{grid-template-columns:1fr;grid-template-rows:auto auto 38px}.root-copy{padding:76px 34px 42px}.root-overline{left:34px;right:34px}.market-specimen{margin:0 auto 44px;transform:none}.root-ticker{grid-column:1}.root-capabilities{grid-template-columns:1fr}.root-capabilities article{min-height:155px}.root-capabilities article>strong{margin-top:30px}} @media(max-width:560px){.home-view{padding:8px}.root-hero{border-radius:5px}.root-copy{padding:70px 22px 36px}.root-overline{left:22px;right:22px}.root-copy h2{margin-top:20px;font-size:clamp(47px,15vw,68px)}.root-copy>p{font-size:12px}.root-footnotes{gap:12px;flex-wrap:wrap;margin-top:34px}.market-specimen{width:calc(100% - 28px);margin-bottom:28px}.root-ticker{justify-content:space-between;padding:0 15px}.root-ticker span:nth-of-type(2),.root-ticker span:nth-of-type(4),.root-ticker i:nth-of-type(2),.root-ticker i:nth-of-type(4){display:none}.root-capabilities article{padding:21px}.root-capabilities article>strong{font-size:17px}} /* Home viewport and theme corrections */ body:not(.dark) .root-hero{background:#e9e2ce;color:#173f35;box-shadow:0 18px 48px rgba(31,62,53,.13)} body:not(.dark) .root-hero:before{opacity:.14;mix-blend-mode:multiply} body:not(.dark) .root-hero:after{color:rgba(23,63,53,.035)} body:not(.dark) .root-contours{opacity:.28;background:repeating-radial-gradient(ellipse at 56% 47%,transparent 0 17px,rgba(23,63,53,.17) 18px 19px,transparent 20px 27px)} body:not(.dark) .root-contours:after{border-color:rgba(23,63,53,.2);box-shadow:0 0 0 22px rgba(23,63,53,.022),0 0 0 55px rgba(23,63,53,.016)} body:not(.dark) .root-overline{border-color:rgba(23,63,53,.25);color:rgba(23,63,53,.58)} body:not(.dark) .root-kicker{color:#45645b}body:not(.dark) .root-kicker i{background:#2d765d;box-shadow:0 0 0 5px rgba(45,118,93,.1)} body:not(.dark) .root-copy h2 em{color:#45675d}body:not(.dark) .root-copy>p{color:#526861} body:not(.dark) .root-hero .home-actions .primary{border-color:#173f35;background:#173f35;color:#f4efdf}body:not(.dark) .root-hero .home-actions .primary:hover{background:#235448} body:not(.dark) .root-ghost{border-color:rgba(23,63,53,.34);background:rgba(255,255,255,.18);color:#173f35}body:not(.dark) .root-ghost:hover{border-color:#173f35;background:rgba(255,255,255,.35)} body:not(.dark) .root-footnotes{color:rgba(23,63,53,.55)}body:not(.dark) .root-footnotes b{color:#2d765d} body:not(.dark) .root-ticker{border-color:rgba(23,63,53,.2);background:rgba(23,63,53,.065);color:rgba(23,63,53,.62)}body:not(.dark) .root-ticker i{background:#2d765d} body.dark .root-hero{background:#070a09;box-shadow:0 18px 55px rgba(0,0,0,.42)} .root-hero:after{left:.01em;bottom:-.11em;font-size:clamp(110px,17vw,300px)} .root-copy h2{font-size:clamp(48px,5.5vw,82px)} .market-specimen{width:min(365px,calc(100% - 48px))} @media(min-width:821px){ .on-home{overflow:hidden} .home-view{height:calc(100vh - 48px);display:grid;grid-template-rows:minmax(0,1fr) 126px;gap:9px;padding:10px 14px 12px;overflow:hidden} .root-hero{min-height:0;height:100%;grid-template-rows:minmax(0,1fr) 36px} .root-copy{padding-top:54px;padding-bottom:38px} .root-overline{top:21px} .root-copy h2{margin:18px 0 16px} .root-copy>p{font-size:12px;line-height:1.6} .root-hero .home-actions{margin-top:22px} .root-footnotes{margin-top:26px} .root-ticker{height:36px} .root-capabilities{height:126px;margin:0} .root-capabilities article{min-height:0;padding:17px 20px 15px} .root-capabilities article>strong{margin-top:20px;font-size:16px} .root-capabilities p{margin-top:4px;font-size:9px} } @media(min-width:821px) and (max-height:820px){ .home-view{grid-template-rows:minmax(0,1fr) 104px} .root-copy{padding-top:45px;padding-bottom:28px} .root-copy h2{font-size:clamp(43px,5vw,68px);margin:14px 0 12px} .root-copy>p{font-size:11px;line-height:1.5} .root-hero .home-actions{margin-top:16px}.root-hero .home-actions .primary,.root-ghost{height:38px} .root-footnotes{margin-top:18px} .market-specimen{transform:rotate(.6deg) scale(.88)} .root-capabilities{height:104px}.root-capabilities article{padding:13px 18px}.root-capabilities article>strong{margin-top:12px}.root-capabilities p{display:none} } @media(max-width:820px){.on-home{overflow:auto}.home-view{height:auto;display:block;overflow:visible}} /* Advanced analytics — one dense, legible market workspace. */ #advanced>.advanced-hero,#advanced>.advanced-preview-grid{display:none} .advanced-toolbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:linear-gradient(105deg,var(--surface),color-mix(in srgb,var(--accent-soft) 55%,var(--surface)))} .advanced-toolbar h2{margin:3px 0 0;font-size:18px;font-weight:500;letter-spacing:-.035em}.advanced-toolbar p{margin:1px 0 0;color:var(--muted);font-size:8px}.advanced-toolbar .segments{flex:none} .advanced-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:66px;margin-top:8px;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--line)} .advanced-metrics article{min-width:0;padding:9px 13px;background:var(--surface)}.advanced-metrics article+article{border-left:1px solid var(--line)}.advanced-metrics label{margin:0;color:var(--muted);font-size:7px}.advanced-metrics strong{display:block;margin-top:3px;overflow:hidden;font-size:16px;font-weight:500;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}.advanced-metrics small{display:block;margin-top:3px;overflow:hidden;color:var(--faint);font-size:7px;text-overflow:ellipsis;white-space:nowrap} .advanced-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(330px,.78fr);gap:8px;margin-top:8px}.advanced-chart-grid{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}.advanced-chart-card,.execution-panel,.activity-panel{min-width:0;border-color:var(--line);border-radius:6px;box-shadow:0 8px 25px rgba(25,38,75,.035)} .mini-head{height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-bottom:1px solid var(--line)}.mini-head span,.chart-readout{color:var(--accent);font-size:6px;font-weight:750;letter-spacing:.13em}.mini-head h3{margin:3px 0 0;font-size:10px;font-weight:650}.chart-readout{color:var(--faint);white-space:nowrap}.advanced-chart{height:calc(100% - 48px);min-height:138px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 42px;background-position:-1px -1px} .mini-legend{display:flex;align-items:center;gap:5px;color:var(--faint);font-size:6px;white-space:nowrap}.mini-legend i{width:12px;height:2px;background:var(--accent)}.mini-legend .micro-dot{background:#b88b3d}.mini-legend .imbalance-dot{background:var(--pos)}.mini-legend .vol-dot{background:var(--neg)}.mini-legend.bands i:nth-of-type(1){opacity:.38}.mini-legend.bands i:nth-of-type(2){opacity:.68}.mini-legend.bands i:nth-of-type(3){opacity:1} .advanced-rail{min-width:0;display:grid;grid-template-rows:minmax(330px,1.35fr) minmax(180px,.82fr);gap:8px}.execution-controls{display:grid;grid-template-columns:auto 1fr 1fr;gap:7px;padding:9px 11px;border-bottom:1px solid var(--line);background:var(--surface-2)}.execution-controls .segments{align-self:end}.execution-controls label{position:relative;margin:0;font-size:6px}.execution-controls input{height:27px;margin-top:3px;padding-inline:7px;font-size:9px}.execution-controls label span{position:absolute;right:7px;bottom:7px;color:var(--faint);font-size:6px}.execution-controls label:last-child input{padding-right:50px} .execution-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}.execution-results>div{min-width:0;padding:9px 10px}.execution-results>div+div{border-left:1px solid var(--line)}.execution-results span,.execution-results small{display:block;overflow:hidden;color:var(--faint);font-size:6px;text-overflow:ellipsis;white-space:nowrap}.execution-results strong{display:block;margin:4px 0 2px;overflow:hidden;font-size:12px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.execution-curve{height:calc(100% - 178px);min-height:92px} .activity-panel{position:relative}.activity-panel .mini-head select{width:116px;height:25px;padding:0 6px;font-size:7px;text-transform:none}.activity-chart{position:relative}.advanced-empty{position:absolute;inset:48px 0 0;display:grid;place-items:center;padding:20px;color:var(--faint);font-size:8px;text-align:center;pointer-events:none} body.dark .advanced-chart{background-image:linear-gradient(#242832 1px,transparent 1px),linear-gradient(90deg,#242832 1px,transparent 1px)} @media(min-width:1180px){#advanced{height:calc(100vh - 48px);max-width:1900px;padding:10px 14px;overflow:hidden}.advanced-layout{height:calc(100% - 146px)}} @media(max-width:1179px){.advanced-layout{grid-template-columns:1fr}.advanced-chart-grid{grid-auto-rows:260px}.advanced-rail{grid-template-columns:1fr 1fr;grid-template-rows:360px}.execution-curve{height:145px}} @media(max-width:760px){.advanced-metrics{height:auto;grid-template-columns:1fr 1fr}.advanced-metrics article:nth-child(3){border-left:0}.advanced-metrics article:nth-child(n+3){border-top:1px solid var(--line)}.advanced-chart-grid,.advanced-rail{grid-template-columns:1fr;grid-template-rows:none}.advanced-chart-grid{grid-auto-rows:245px}.advanced-rail>*{min-height:320px}.activity-panel{height:260px}.execution-controls{grid-template-columns:1fr 1fr}.execution-controls .segments{grid-column:1/-1}.advanced-toolbar p{display:none}} /* Warm paper / green ink system for every light workspace surface */ body:not(.dark) .topbar,body:not(.dark) .pagebar{background:var(--surface);backdrop-filter:none} body:not(.dark) .panel,body:not(.dark) .profile-bar{box-shadow:0 7px 24px rgba(32,63,54,.045)} body:not(.dark) input::placeholder{color:#91a099} body:not(.dark) .primary{color:#f6f1e4} body:not(.dark) .avatar{border-color:#a9c5b8} body:not(.dark) .plus-corner{border-color:#abc3b7;background:linear-gradient(135deg,var(--surface),var(--accent-soft))} body:not(.dark) .plus-corner.unlocked{border-color:#79a791} body:not(.dark) .advanced-nav.unlocked b,body:not(.dark) .coming-pill{border-color:var(--accent)} body:not(.dark) .live-pill,body:not(.dark) .plus-pill.unlocked{border-color:#a7c8b8;background:#e2eee7} body:not(.dark) .legend i{background:linear-gradient(90deg,#e4decd,#2d765d,#ae6257)} body:not(.dark) .heat-help{background:rgba(246,241,228,.9)} body:not(.dark) .secret-box,body:not(.dark) .plus-pill{border-color:#abc3b7} body:not(.dark) .plus-enabled .workspace:before{background-image:radial-gradient(circle at 12% 8%,rgba(45,118,93,.09),transparent 28%),radial-gradient(circle at 88% 22%,rgba(101,123,91,.07),transparent 24%),linear-gradient(rgba(45,118,93,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(45,118,93,.025) 1px,transparent 1px)} body:not(.dark) .advanced-hero:after,body:not(.dark) .terminal-hero:after{border-color:rgba(45,118,93,.2);box-shadow:0 0 0 34px rgba(45,118,93,.035),0 0 0 70px rgba(45,118,93,.02)} body:not(.dark) .profile-hero:before{border-color:rgba(45,118,93,.16);box-shadow:0 0 0 32px rgba(45,118,93,.03)} body:not(.dark) .settings-hero:before{border-color:rgba(45,118,93,.17);box-shadow:0 0 0 28px rgba(45,118,93,.035)} body:not(.dark) .roadmap-step.complete,body:not(.dark) .modal-step.complete .step-card{border-color:#77a08e;background:linear-gradient(90deg,var(--accent-soft),var(--surface-2))} body:not(.dark) .plus-modal{border-color:var(--line-strong)} body:not(.dark) .plus-modal:before{background:radial-gradient(circle at 80% 20%,rgba(45,118,93,.15),transparent 45%),linear-gradient(135deg,rgba(45,118,93,.06),transparent)} body:not(.dark) .modal-progress-ring{border-color:var(--accent);box-shadow:0 0 0 6px rgba(45,118,93,.045)} body:not(.dark) .chart-panel #chart,body:not(.dark) .empty-chart{background-color:var(--surface)} /* Lightweight Charts drawing layer */ /* Locked like the drawing tools: visibly there, so what Plus adds is legible from the console rather than only from the settings page. The candles stay readable because they are the option a standard account already has. */ #priceMode.plus-locked button:not(.active){opacity:.45} .chart-head-actions{display:flex;align-items:center;gap:8px} .refresh-button{display:flex;align-items:center;gap:4px;height:25px;padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);color:var(--muted);font-size:8px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.refresh-button:hover{color:var(--text);background:var(--surface)}.refresh-button[disabled]{cursor:progress;opacity:.6}.refresh-button.spinning{color:var(--accent)} .draw-tools{position:relative;display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:4px;background:var(--surface-2)}.draw-tools button{min-width:25px;height:23px;padding:0 6px;border:0;border-radius:3px;background:transparent;color:var(--muted);font:11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;cursor:pointer}.draw-tools button:last-child{font-size:7px;text-transform:uppercase}.draw-tools button:hover{color:var(--text);background:var(--surface)}.draw-tools button.active{color:#fff;background:var(--accent)}.draw-tools.locked button{opacity:.25;filter:grayscale(1)}.draw-tools.locked:after{content:'Plus';position:absolute;z-index:2;left:50%;top:50%;padding:1px 9px 3px;border:1px solid color-mix(in srgb,var(--faint) 55%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--muted);font:600 13px/1 "Segoe Script","Brush Script MT",cursive;pointer-events:none;transform:translate(-50%,-50%) rotate(-5deg)}#drawingCanvas{position:absolute;inset:0;z-index:5;width:100%;height:100%;pointer-events:none;touch-action:none}#drawingCanvas.drawing{cursor:crosshair;pointer-events:auto} /* Public landing uses the authenticated Home composition without exposing desk controls. */ .public-sign-in{display:none}.public-home .topbar{grid-template-columns:1fr auto}.public-home .topbar nav,.public-home .navbar-account,.public-home .plus-corner,.public-home .aside-foot{display:none!important}.public-home .public-sign-in{display:block!important}.public-home .workspace{min-height:calc(100vh - 48px)} @media(max-width:820px){.chart-panel .panel-head{height:auto;min-height:66px;align-items:flex-start;gap:8px}.chart-head-actions{align-items:flex-end;flex-direction:column-reverse;gap:4px}.draw-tools button{min-width:22px;padding:0 4px}} /* The market specimen is intentionally solid and high-contrast. */ .market-specimen{background:#09271f;border-color:#42695e;box-shadow:0 25px 58px rgba(8,34,28,.3);backdrop-filter:none} .market-specimen header{border-color:#34554c}.market-specimen header span,.specimen-price span{color:#87a399} .market-specimen header strong,.specimen-price strong{color:#fff9e9} .specimen-columns{border-color:#294a41;color:#718f85} .specimen-book>div{border-bottom:1px solid rgba(110,145,133,.07)}.specimen-book span{color:#e6e0cd} .specimen-book i{opacity:.34}.asks b{color:#e69a8d}.asks i{background:#9d5046}.bids b{color:#9ed289}.bids i{background:#3c815e} .specimen-mid{border-color:#3a5b52;background:#16372f;color:#8da79e}.specimen-mid b{color:#fff9e9}.specimen-mid small{color:#9bb1a9} .market-specimen footer{border-color:#34554c;color:#78968c} /* ---------------------------------------------------- player stats controls */ .stat-chart-controls{display:flex;align-items:center;flex-wrap:wrap;gap:7px;justify-content:flex-end} .stat-chart-controls select{height:25px;min-width:120px;font-size:9px} .stat-chart-controls #statsUpdated{width:100%;text-align:right;color:var(--muted);font-size:8px} .pnl-panel .panel-head{height:auto;min-height:68px;gap:12px;flex-wrap:wrap} .username-lock{display:block;margin-top:8px;color:var(--muted);font-size:8px} .username-lock.locked{color:var(--neg)} /* ------------------------------------------------------- delta calendar */ .calendar-panel{margin-top:12px;box-shadow:0 8px 25px rgba(25,38,75,.035)} .calendar-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:5px;font-size:9px} .calendar-crumbs button{height:21px;padding:0 8px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:8px} .calendar-crumbs button:last-child{border-color:var(--line-strong);background:var(--surface);color:var(--text)} .calendar-crumbs i{color:var(--faint);font-style:normal} .calendar-body{position:relative;padding:15px} .calendar-grid{display:grid;gap:4px} .calendar-grid.by-weekday{grid-template-columns:repeat(7,minmax(0,1fr))} .calendar-grid.by-slot{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))} .calendar-weekday{padding-bottom:3px;color:var(--faint);font-size:8px;font-weight:700;letter-spacing:.09em;text-align:center} .calendar-blank{visibility:hidden} .calendar-cell{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:6px;min-width:0;min-height:56px;padding:7px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);color:var(--text);text-align:left;transition:transform .12s,border-color .12s} .calendar-cell:not([disabled]):hover{transform:translateY(-1px);border-color:var(--accent)} .calendar-cell[disabled]{cursor:default} .calendar-cell-label{max-width:100%;overflow:hidden;color:var(--muted);font-size:8px;letter-spacing:.04em;text-overflow:ellipsis;white-space:nowrap} /* The figure is abbreviated in JavaScript; this only keeps an unusually long one (a duration, say) inside the cell rather than over its neighbour. */ .calendar-cell b{max-width:100%;overflow:hidden;font-size:13px;font-weight:500;text-overflow:ellipsis;white-space:nowrap} .calendar-cell.step-0 b{color:var(--faint)} .calendar-cell.step-1{background:color-mix(in srgb,var(--accent) 12%,var(--surface-2))} .calendar-cell.step-2{background:color-mix(in srgb,var(--accent) 27%,var(--surface-2))} .calendar-cell.step-3{background:color-mix(in srgb,var(--accent) 45%,var(--surface-2))} .calendar-cell.step-4{background:color-mix(in srgb,var(--accent) 66%,var(--surface-2));border-color:var(--accent)} .calendar-cell.step-3 .calendar-cell-label,.calendar-cell.step-4 .calendar-cell-label{color:color-mix(in srgb,var(--text) 72%,transparent)} .calendar-cell.negative.step-1{background:color-mix(in srgb,var(--neg) 12%,var(--surface-2))} .calendar-cell.negative.step-2{background:color-mix(in srgb,var(--neg) 27%,var(--surface-2))} .calendar-cell.negative.step-3{background:color-mix(in srgb,var(--neg) 45%,var(--surface-2))} .calendar-cell.negative.step-4{background:color-mix(in srgb,var(--neg) 66%,var(--surface-2));border-color:var(--neg)} .calendar-empty{padding:34px 15px;color:var(--muted);font-size:10px;text-align:center} .calendar-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:11px 15px;border-top:1px solid var(--line)} .calendar-summary{color:var(--muted);font-size:9px} .calendar-summary strong{color:var(--text);font-size:11px} .calendar-legend{display:flex;align-items:center;gap:4px;color:var(--faint);font-size:8px} .calendar-legend i{width:12px;height:12px;border:1px solid var(--line);border-radius:1px;background:var(--surface-2)} .calendar-legend i[data-step="1"]{background:color-mix(in srgb,var(--accent) 12%,var(--surface-2))} .calendar-legend i[data-step="2"]{background:color-mix(in srgb,var(--accent) 27%,var(--surface-2))} .calendar-legend i[data-step="3"]{background:color-mix(in srgb,var(--accent) 45%,var(--surface-2))} .calendar-legend i[data-step="4"]{background:color-mix(in srgb,var(--accent) 66%,var(--surface-2))} @media(max-width:760px){.stat-chart-controls{justify-content:flex-start}.calendar-grid.by-slot{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}.calendar-cell{min-height:48px}} /* ------------------------------------------- stats: tiles pick the metric */ .stat-grid article{cursor:pointer;position:relative;transition:background .14s,box-shadow .14s} .stat-grid article:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;transition:background .14s} .stat-grid article:hover{background:color-mix(in srgb,var(--accent) 7%,var(--surface))} .stat-grid article:focus-visible{outline:1px solid var(--accent);outline-offset:-2px} .stat-grid article.active{background:color-mix(in srgb,var(--accent) 12%,var(--surface))} .stat-grid article.active:after{background:var(--accent)} .stat-grid article.active label{color:var(--accent)} /* Nine tiles across five columns leave a hole; the last one closes it. */ .stat-grid article:last-child{grid-column:span 2} /* ---------------------------------------- stats: chart and calendar split */ .stat-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px;align-items:stretch} .stat-split .calendar-panel{margin-top:0;display:flex;flex-direction:column} .stat-split .pnl-panel #pnlChart{height:430px} /* The calendar takes whatever height the chart sets and scrolls inside it. */ .stat-split .calendar-body{flex:1;min-height:0;overflow-y:auto} .stat-split .calendar-grid.by-slot{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))} .stat-split .calendar-cell{min-height:50px;padding:6px 7px} .stat-split .calendar-cell b{font-size:11px} @media(max-width:1180px){ .stat-split{grid-template-columns:minmax(0,1fr)} .stat-split .calendar-body{max-height:none} .stat-grid article:last-child{grid-column:auto} } @media(max-width:1050px){.stat-grid article:last-child{grid-column:auto}} /* ------------------------------------------------------------ price alerts */ .alerts-nav.has-unread b{border-color:var(--neg);background:color-mix(in srgb,var(--neg) 14%,transparent);color:var(--neg)} .alerts-hero{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;min-height:160px;margin-bottom:12px;padding:30px 34px;overflow:hidden;background:linear-gradient(120deg,var(--surface) 47%,color-mix(in srgb,var(--accent-soft) 68%,var(--surface)))} .alerts-hero h2{margin:12px 0 7px;font-size:29px;font-weight:430;letter-spacing:-.045em} .alerts-hero p{max-width:52ch;margin:0;color:var(--muted);font-size:11px} .alerts-global{display:flex;align-items:center;gap:16px;flex:none;padding:13px 15px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface)} .alerts-global .global-copy strong{display:block;font-size:11px} .alerts-global .global-copy small{display:block;max-width:34ch;margin-top:3px;color:var(--muted);font-size:9px;line-height:1.4} .switch input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} .switch{position:relative;display:inline-flex;flex:none;cursor:pointer} .switch .switch-track{position:relative;display:block;width:38px;height:21px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface-2);transition:background-color .2s ease,border-color .2s ease} .switch .switch-track i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--faint);transition:transform .2s ease,background-color .2s ease} .switch input:checked+.switch-track{border-color:var(--accent);background:var(--accent-soft)} .switch input:checked+.switch-track i{background:var(--accent);transform:translateX(17px)} .switch input:focus-visible+.switch-track{outline:2px solid var(--accent);outline-offset:2px} .switch.small .switch-track{width:32px;height:18px} .switch.small .switch-track i{width:12px;height:12px;transform:none} .switch.small input:checked+.switch-track i{transform:translateX(14px)} .alerts-layout{display:grid;gap:10px;align-items:start} .alert-builder>.panel-head,.alert-list-panel>.panel-head{min-height:66px;padding:11px 15px;background:linear-gradient(90deg,var(--surface),var(--surface-2))} .alert-builder>.panel-head h2,.alert-list-panel>.panel-head h2{font-size:12px} .alert-builder-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,270px);gap:0;border-top:1px solid var(--line)} .alert-chart-wrap{position:relative;min-width:0;border-right:1px solid var(--line)} #alertChart{height:290px} .alert-chart-empty{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--muted);font-size:10px;pointer-events:none} .alert-chart-hint{position:absolute;left:0;right:0;bottom:0;padding:5px 9px;border-top:1px solid var(--line);background:var(--surface-2);color:var(--faint);font-size:8px;letter-spacing:.02em;pointer-events:none} .alert-level{position:absolute;left:0;right:66px;height:0;border-top:1px dashed var(--alert-color,#c33d5c);cursor:ns-resize;touch-action:none;z-index:2} .alert-level b{position:absolute;top:-9px;left:7px;padding:1px 5px;border-radius:2px;background:var(--alert-color,#c33d5c);color:#fff;font-size:8px;font-weight:650;letter-spacing:.02em} .alert-level i{position:absolute;top:-7px;right:-6px;width:13px;height:13px;border:1px solid var(--surface);border-radius:50%;background:var(--alert-color,#c33d5c)} .alert-level.dragging i{transform:scale(1.18)} .alert-form{padding:14px 16px 4px} .alert-form .segments{width:100%;height:29px;margin-bottom:11px} .alert-form .segments button{flex:1;font-size:10px} .alert-builder .setting-status{margin:0 16px 16px} .color-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;color:var(--muted);font-size:9px} .color-row input[type=color]{width:46px;height:26px;padding:2px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .alert-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 8px;border-top:1px solid var(--line);background:var(--surface-2)} .alert-history-head h3{margin:4px 0 0;font-size:11px;font-weight:600} .alert-list.history .alert-row{opacity:.92} .alert-field{display:flex;flex-direction:column;gap:3px;margin:0;color:var(--faint);font-size:6px;font-weight:700;letter-spacing:.09em;text-transform:uppercase} .alert-field input[type=number]{width:96px;height:26px;margin:0;padding:0 7px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);font-size:10px} .alert-field.colour input{width:38px;height:26px;padding:2px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .alert-toggle{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--faint);font-size:6px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;cursor:pointer} .checkbox-row{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px;color:var(--muted);font-size:9px;line-height:1.4;cursor:pointer} .checkbox-row input{flex:none;width:14px;height:14px;margin:0;accent-color:var(--accent)} .alert-list{padding:6px 0} .alert-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)} .alert-row:last-child{border-bottom:0} .alert-face{min-width:0} .alert-face strong{display:block;margin-top:5px;font-size:12px;font-weight:550} .alert-face small{display:block;margin-top:3px;color:var(--muted);font-size:9px} .alert-state{display:inline-block;padding:2px 5px;border:1px solid var(--line-strong);color:var(--faint);font-size:6px;font-weight:750;letter-spacing:.1em} .alert-row.armed .alert-state{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .alert-row.triggered{background:color-mix(in srgb,var(--neg) 6%,transparent)} .alert-row.triggered .alert-state{border-color:var(--neg);color:var(--neg)} .alert-row.paused{opacity:.72} .alert-controls{display:flex;flex:none;align-items:center;gap:8px} .alert-controls button{height:27px;margin:0} /* The alert row carries a colour swatch of its own line. */ .alert-row{border-left:3px solid var(--alert-color,transparent)} @media(max-width:980px){ .alert-builder-body{grid-template-columns:minmax(0,1fr)} .alert-chart-wrap{border-right:0;border-bottom:1px solid var(--line)} #alertChart{height:240px} } @media(max-width:760px){ .alerts-hero{display:block;min-height:0;padding:25px 20px} .alerts-hero h2{font-size:25px} .alerts-global{margin-top:20px} .alert-row{flex-wrap:wrap} .alert-controls{flex-wrap:wrap;width:100%} .alert-builder>.panel-head{flex-wrap:wrap;gap:8px} } /* Panel explainers — a dot sized in em so it can never outgrow the line box of the head or label it sits in, and one floating popover shared by all of them: panel bodies are sized in calc(), so nothing may join a panel's own flow. Motion is the app-wide transition system, so reduced motion is already honoured. */ .info-dot{display:inline-flex;align-items:center;justify-content:center;width:1.35em;height:1.35em;margin-left:6px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--muted);font:inherit;font-weight:700;line-height:1;vertical-align:middle;transition:color .18s ease,background-color .18s ease,border-color .18s ease} .info-dot:before{content:"i"} .info-dot:hover,.info-dot[aria-expanded="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .info-dot:focus-visible{outline:1px solid var(--accent);outline-offset:2px} .info-pop{position:fixed;z-index:60;width:min(310px,calc(100vw - 16px));padding:10px 12px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);box-shadow:0 14px 34px rgba(25,38,75,.14);opacity:0;transform:translateY(-3px);transition:opacity .16s ease,transform .16s ease;pointer-events:none} .info-pop.open{opacity:1;transform:none} .info-pop.expanded{pointer-events:auto} .info-pop strong{display:block;font-size:10px;font-weight:650} .info-pop p{margin:5px 0 0;color:var(--muted);font-size:9px;line-height:1.6} /* Every other explainer's brief is one sentence; a level's is one line per listing, so its newlines are kept. Text with none is unaffected. */ #panelInfoBrief{white-space:pre-line;font-variant-numeric:tabular-nums} /* 0fr → 1fr animates the real height of the copy without measuring it. */ .info-full{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.2,.75,.3,1)} .info-pop.expanded .info-full{grid-template-rows:1fr} .info-full>div{min-height:0;overflow:hidden} .info-full p{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)} body.dark .info-pop{box-shadow:0 16px 42px rgba(0,0,0,.5)} /* ================================================================== studies The desk is three columns — what you have, what you are writing, what it draws — and it holds that shape until there is no longer room for it. */ .studies-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:10px;padding:18px 22px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(118deg,var(--surface) 46%,color-mix(in srgb,var(--accent-soft) 62%,var(--surface)))} .studies-bar h2{margin:7px 0 5px;font-size:26px;font-weight:430;line-height:1.04;letter-spacing:-.045em} .studies-bar p{margin:0;color:var(--muted);font-size:10px} .studies-bar-actions{display:flex;gap:8px;flex:none} .studies-layout{display:grid;grid-template-columns:250px minmax(0,1.05fr) minmax(0,1.15fr);gap:8px;align-items:stretch; min-height:calc(100vh - 290px)} .studies-rail,.studies-editor,.studies-preview{min-width:0;display:flex;flex-direction:column;border-color:var(--line);border-radius:6px;box-shadow:0 8px 25px rgba(25,38,75,.035)} .studies-rail{padding:10px} .studies-source{margin-bottom:8px} .studies-search input{height:30px;font-size:10px} .studies-list{flex:1;min-height:0;margin-top:8px;overflow-y:auto;display:flex;flex-direction:column;gap:5px} .study-card{display:block;width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:4px;background:var(--surface);text-align:left;transition:border-color .16s,transform .16s,background .16s} .study-card:hover{border-color:var(--line-strong);transform:translateY(-1px)} .study-card.active{border-color:var(--accent);background:var(--accent-soft)} .study-card strong{display:block;font-size:11px;font-weight:600} .study-card small{display:block;margin-top:3px;color:var(--muted);font-size:9px;line-height:1.4; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .study-card-foot{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px} .study-flag{padding:1px 5px;border:1px solid var(--line-strong);border-radius:2px;color:var(--faint);font-size:7px;font-style:normal;font-weight:700;letter-spacing:.09em} .study-flag.published{border-color:var(--accent);color:var(--accent)} .study-flag.applied{border-color:var(--pos);color:var(--pos)} .study-flag.builtin{border-color:var(--line-strong);background:var(--surface-2);color:var(--muted)} .studies-rail-foot{margin-top:8px;padding-top:8px;border-top:1px solid var(--line);color:var(--faint);font-size:8px} .studies-editor .panel-head{height:auto;gap:10px;padding:9px 12px} .studies-identity{flex:1;min-width:0} .studies-name,.studies-description{width:100%;height:auto;padding:0;border:0;background:none} .studies-name{font-size:14px;font-weight:600;letter-spacing:-.02em} .studies-description{margin-top:2px;color:var(--muted);font-size:9px} .studies-name:focus,.studies-description:focus{outline:none;box-shadow:0 1px 0 var(--accent)} .studies-editor-actions{display:flex;gap:6px;flex:none} .studies-code-wrap{position:relative;flex:1;min-height:0;display:flex;border-top:1px solid var(--line);background:var(--surface-2)} .studies-gutter{padding:9px 6px 9px 9px;border-right:1px solid var(--line);color:var(--faint);font:9px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:right;white-space:pre;overflow:hidden;user-select:none} #studyCode{flex:1;height:auto;min-height:0;padding:9px 11px;border:0;border-radius:0;background:none;font:10px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;resize:none;white-space:pre;overflow:auto;tab-size:2} #studyCode:focus{outline:none} .studies-status{padding:6px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:8px;letter-spacing:.05em;text-transform:uppercase} .studies-status.failed{color:var(--neg)} .studies-console{height:104px;overflow-y:auto;padding:7px 12px;border-top:1px solid var(--line);background:var(--surface-2);font:9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace} .study-log{padding:1px 0;color:var(--text);white-space:pre-wrap;word-break:break-word} .study-log.error{color:var(--neg)} .study-log.muted{color:var(--faint)} .studies-chart{position:relative;flex:1;min-height:260px;overflow:hidden;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 46px;background-position:-1px -1px} .studies-chart>canvas,#studyLayer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2} /* The price panel is not a .studies-chart, so the study layer needs the same lift there: left in flow it takes real height from the chart and pushes the panes off the bottom of the panel. */ #chart{position:relative} .studies-inputs{flex:none;max-height:132px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:7px;padding:9px 12px;border-top:1px solid var(--line);background:var(--surface-2)} .study-field{display:flex;flex-direction:column;gap:3px;font-size:8px} .study-field>span{color:var(--muted);font-weight:650;letter-spacing:.07em;text-transform:uppercase} .study-field input,.study-field select{height:27px;padding:0 7px;font-size:10px} .study-field input[type=color]{padding:2px} .study-field.toggle{flex-direction:row;align-items:center;justify-content:space-between} /* The studies desk is locked to the viewport at desk widths, exactly as the console is: the page itself must never scroll, because the thing being scrolled away is the chart the reader is watching. Everything that is not the chart is capped — the header shrinks, the console and the input rack scroll inside themselves — so the height a study's panes are proportioned against is the largest one the screen can give them. */ @media(min-width:1321px){ #studies{height:calc(100vh - 48px);display:flex;flex-direction:column;padding:12px 18px;overflow:hidden} .studies-bar{flex:none;margin-bottom:8px;padding:12px 18px} .studies-bar h2{margin:3px 0 3px;font-size:19px} .studies-layout{flex:1;min-height:0;height:100%;grid-template-rows:minmax(0,1fr);align-items:stretch} .studies-rail,.studies-editor,.studies-preview{min-height:0;overflow:hidden} .studies-editor .studies-code-wrap{flex:1;min-height:0} .studies-status{flex:none} .studies-console{flex:none;height:88px} .studies-list,.studies-console{overscroll-behavior:contain} .studies-preview .panel-head{flex:none} /* No floor here: the chart takes whatever is left, and the panes divide it between themselves rather than running off the bottom of the panel. */ .studies-chart{min-height:0} } /* The chips are the studies on the console, so they sit in the price panel's own head rather than in a panel of their own. */ .study-chips{display:flex;flex-wrap:wrap;gap:4px;max-width:270px} .study-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border:1px solid var(--line-strong);border-radius:11px;background:var(--surface);font-size:8px;font-weight:650;letter-spacing:.04em;transition:border-color .16s,transform .16s} .study-chip:hover{border-color:var(--accent);transform:translateY(-1px)} .study-chip i{width:5px;height:5px;border-radius:50%;background:var(--accent)} .study-chip.failed{border-color:var(--neg);color:var(--neg)} .study-chip.failed i{background:var(--neg)} /* -------------------------------------------------------------- the veil A study recompiles in 30ms on a desk machine and 400ms on a phone. One gesture covers both: the chart lifts and blurs, the label falls in from above, and both leave downward. Nothing ever flashes, because the veil is only ever removed a frame after the work is actually finished. */ .study-veil{position:absolute;inset:0;z-index:4;display:grid;place-items:center;opacity:0;pointer-events:none; background:color-mix(in srgb,var(--surface) 55%,transparent);transition:opacity .22s ease} .study-veil span{padding:5px 12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface); color:var(--muted);font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; transform:translateY(-14px);opacity:0;transition:transform .28s cubic-bezier(.2,.75,.3,1),opacity .2s ease} .study-working .study-veil{opacity:1} .study-working .study-veil span{transform:translateY(0);opacity:1} #chart>*,#studyPreviewChart>*{transition:filter .26s ease,transform .26s ease,opacity .26s ease} .study-working>*:not(.study-veil){filter:blur(5px) saturate(.86);transform:scale(.994);opacity:.72} @media(prefers-reduced-motion:reduce){ .study-veil,.study-veil span,#chart>*,#studyPreviewChart>*,.study-card,.study-chip{transition:none} .study-working>*:not(.study-veil){filter:none;transform:none;opacity:1} } /* ------------------------------------------------------------- study modals */ .study-modal{position:relative;width:min(680px,94vw);max-height:88vh;overflow-y:auto;padding:26px 28px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);box-shadow:0 30px 80px rgba(12,20,40,.28)} .docs-modal{width:min(900px,95vw)} .study-modal-head{margin-bottom:16px} .study-modal-head h2{margin:6px 0 5px;font-size:22px;font-weight:440;letter-spacing:-.035em} .study-modal-head p{margin:0;color:var(--muted);font-size:10px;line-height:1.55} .study-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px} .study-delivery{display:flex;gap:18px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line)} .study-modal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} .study-modal-foot-actions{display:flex;align-items:center;gap:8px} .docs-body{display:flex;flex-direction:column;gap:18px} .docs-block h3{margin:0 0 4px;font-size:12px;font-weight:650} .docs-block>p{margin:0 0 9px;color:var(--muted);font-size:10px;line-height:1.55} .docs-block dl{display:flex;flex-direction:column;gap:1px;margin:0;border:1px solid var(--line);border-radius:4px;overflow:hidden} .docs-row{display:grid;grid-template-columns:minmax(190px,.9fr) minmax(0,1.4fr);gap:12px;padding:7px 10px;background:var(--surface)} .docs-row:nth-child(odd){background:var(--surface-2)} .docs-row dt code,.docs-row dd code{padding:1px 4px;border-radius:2px;background:var(--accent-soft);color:var(--accent);font:9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace} .docs-row dd{margin:0;color:var(--muted);font-size:9px;line-height:1.55} .docs-example{padding:2px 8px;border:1px solid var(--accent);border-radius:2px;background:var(--accent-soft);color:var(--accent);font-size:9px;font-weight:650} /* ============================================================ desk layout mode Edit mode replaces the fixed grid with a flexible one. Nothing about the default desk changes until the reader drags something, and the tray hands back anything they put away. */ .terminal-grid.custom{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:dense;grid-auto-rows:80px;align-items:stretch;overflow:auto;scrollbar-gutter:stable} .terminal-grid.custom>.panel{min-width:0;min-height:0;overflow:hidden} .terminal-grid.custom>.panel-hidden{display:none} .panel-tray{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:8px;padding:8px 11px;border:1px dashed var(--line-strong);border-radius:5px;background:var(--surface); animation:trayDrop .26s cubic-bezier(.2,.75,.3,1) both} @keyframes trayDrop{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} .tray-label{color:var(--faint);font-size:7px;font-weight:750;letter-spacing:.14em} .tray-empty{color:var(--muted);font-size:9px} .tray-add,.tray-reset,.tray-done{height:23px;padding:0 9px;border:1px solid var(--accent);border-radius:12px;background:var(--accent-soft);color:var(--accent);font-size:8px;font-weight:700;letter-spacing:.05em} .tray-reset{margin-left:auto;border-color:var(--line-strong);background:var(--surface);color:var(--muted)} .tray-done{background:var(--accent);color:#fff} .panels-editing .terminal-grid>.panel{position:relative;outline:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-2px} .panels-editing .chart-head-actions>*:not(#panelEdit),.panels-editing .heat-actions,.panels-editing .live-pill, .panels-editing .dom-head,.panels-editing .terminal-grid .panel-head p{visibility:hidden} .panels-editing .panel-head{overflow:hidden} .panels-editing .terminal-grid>.panel>*:not(.panel-tools):not(.panel-resize):not(.panel-edit-shield){pointer-events:none;user-select:none} .panel-edit-shield{position:absolute;z-index:5;inset:0;cursor:grab;touch-action:none;background:color-mix(in srgb,var(--surface) 4%,transparent)} .panel-edit-shield:active,.panel-moving .panel-edit-shield{cursor:grabbing} .panel-tools{position:absolute;top:5px;right:5px;z-index:8;display:flex;align-items:center;gap:5px;padding:2px 3px 2px 7px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface); animation:toolsIn .22s cubic-bezier(.2,.75,.3,1) both} @keyframes toolsIn{from{opacity:0;transform:translateY(-5px) scale(.94)}to{opacity:1;transform:none}} .panel-grip{color:var(--faint);font-size:7px;font-weight:750;letter-spacing:.1em;text-transform:uppercase} .panel-tools button{width:17px;height:17px;border:0;border-radius:50%;background:var(--surface-2);color:var(--muted);font-size:11px;line-height:1} .panel-tools button:hover{background:var(--neg);color:#fff} .panel-resize{position:absolute;right:0;bottom:0;z-index:9;width:24px;height:24px;cursor:nwse-resize;touch-action:none} .panel-resize:after{content:"";position:absolute;right:5px;bottom:5px;width:10px;height:10px;border-right:3px solid var(--line-strong);border-bottom:3px solid var(--line-strong);transition:border-color .16s} .panel-resize:hover:after{border-color:var(--accent)} .panel-dragging{user-select:none;cursor:nwse-resize}.panel-moving{user-select:none} .terminal-grid>.panel.panel-moving{z-index:4;opacity:.72;outline:2px solid var(--accent)} .terminal-grid>.panel.panel-drop-target{outline:2px solid var(--accent);outline-offset:-2px} .panel-leaving{animation:panelLeave .18s ease both} .panel-arriving{animation:panelArrive .34s cubic-bezier(.2,.75,.3,1) both} @keyframes panelLeave{to{opacity:0;transform:scale(.97)}} @keyframes panelArrive{from{opacity:0;transform:scale(.97) translateY(6px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}} #panelEdit.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .panels-editing #panelEdit{display:none!important} @media(prefers-reduced-motion:reduce){ .panel-tray,.panel-tools,.panel-leaving,.panel-arriving{animation:none} } @media(max-width:1320px){ .studies-layout{grid-template-columns:220px minmax(0,1fr);grid-template-rows:minmax(340px,1fr) minmax(300px,.9fr)} .studies-rail{grid-row:1/3} .studies-preview{grid-column:2} } @media(max-width:900px){ .studies-bar{flex-direction:column;align-items:flex-start;gap:14px} .studies-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:none} .studies-rail{grid-row:auto;max-height:280px} .studies-preview{grid-column:auto} .study-chips{max-width:100%} .terminal-grid.custom{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:80px} .docs-row{grid-template-columns:1fr;gap:3px} } /* ------------------------------------------------------ scripted widgets Scripts describe data; these trusted components own the DOM. A widget is a normal desk panel, so the same edit shield, drag order and constraints apply. */ .study-widget-panel{display:flex;flex-direction:column} .study-widget-panel .panel-head{flex:0 0 54px;height:54px;padding:8px 13px} .study-widget-config{height:24px;padding:0 9px;border:1px solid var(--line-strong);border-radius:3px;background:var(--surface-2);color:var(--muted);font-size:8px;font-weight:700} .study-widget-config:hover{border-color:var(--accent);color:var(--accent)} .study-widget-body{position:relative;flex:1;min-height:0;overflow:hidden} .study-widget-chart{position:absolute;inset:0} .study-widget-metrics{height:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line)} .study-widget-metric{display:flex;min-width:0;flex-direction:column;justify-content:center;padding:14px 16px;background:var(--surface)} .study-widget-metric span{color:var(--faint);font-size:7px;font-weight:750;letter-spacing:.12em;text-transform:uppercase} .study-widget-metric strong{margin-top:7px;overflow:hidden;color:var(--text);font-size:clamp(17px,2vw,27px);font-weight:420;text-overflow:ellipsis;white-space:nowrap} .study-widget-metric small{margin-top:3px;color:var(--muted);font-size:8px} .study-widget-metric.positive strong{color:var(--pos)}.study-widget-metric.negative strong{color:var(--neg)}.study-widget-metric.accent strong{color:var(--accent)} .study-widget-text{height:100%;overflow:auto;padding:16px;color:var(--muted);font:10px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap} .study-widget-shelved{height:100%;display:grid;place-items:center;color:var(--faint);font-size:8px;font-weight:700;letter-spacing:.12em;text-transform:uppercase} .study-widget-panel .panel-head h2{display:flex;align-items:center} .study-widget-panel .panel-head h2 .info-dot{width:1.2em;height:1.2em;font-size:9px} /* Progress gauges — a labelled bar per item, filled to its share, tinted by tone the same way metrics are. */ .study-widget-gauges{height:100%;display:flex;flex-direction:column;justify-content:center;gap:13px;padding:15px 17px;overflow:auto} .study-widget-gauge{display:flex;flex-direction:column;gap:6px} .study-widget-gauge .gauge-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0} .study-widget-gauge .gauge-line span{overflow:hidden;color:var(--muted);font-size:9px;font-weight:650;text-overflow:ellipsis;white-space:nowrap} .study-widget-gauge .gauge-line strong{flex:0 0 auto;color:var(--text);font-size:12px;font-weight:520;font-variant-numeric:tabular-nums} .study-widget-gauge .gauge-track{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden} .study-widget-gauge .gauge-track i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .45s cubic-bezier(.2,.75,.3,1)} .study-widget-gauge small{color:var(--faint);font-size:8px} .study-widget-gauge.positive .gauge-track i{background:var(--pos)}.study-widget-gauge.positive .gauge-line strong{color:var(--pos)} .study-widget-gauge.negative .gauge-track i{background:var(--neg)}.study-widget-gauge.negative .gauge-line strong{color:var(--neg)} .study-widget-gauge.accent .gauge-track i{background:var(--accent)}.study-widget-gauge.accent .gauge-line strong{color:var(--accent)} /* Live controls beneath an interactive widget — the study's own inputs, wired to its console settings. */ .study-widget-controls{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;padding:9px 13px;border-top:1px solid var(--line);background:var(--surface-2)} .study-widget-controls.hidden{display:none} .study-widget-controls .widget-controls-label{color:var(--faint);font-size:7px;font-weight:750;letter-spacing:.12em;text-transform:uppercase} .study-widget-controls .study-field{display:flex;align-items:center;gap:6px;margin:0;font-size:8px} .study-widget-controls .study-field>span{color:var(--muted);font-size:8px;font-weight:650} .study-widget-controls .study-field input[type=number],.study-widget-controls .study-field select{width:64px;height:24px;padding:0 6px;font-size:9px} .study-widget-controls .study-field.toggle{gap:8px} .compact-modal{max-width:440px} /* Per-study visibility switches in the settings modal: the price-chart drawings and each sub-pane the study draws. */ .study-view-toggles{display:flex;flex-direction:column;gap:10px;margin-top:4px;padding-top:13px;border-top:1px solid var(--line)} .study-view-toggles.hidden{display:none} .config-section-label{color:var(--faint);font-size:7px;font-weight:750;letter-spacing:.12em;text-transform:uppercase} /* The Panels button lives in the navbar beside the market selector, sized to sit with it and hidden away from the desk view. */ .navbar-account .refresh-button{height:28px;white-space:nowrap} .navbar-account .refresh-button.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} @media(max-width:900px){.nav-panels{display:none!important}} /* Chart config modal — the price series, timeframe and guide toggles that used to crowd the chart head. */ .chart-config-body{display:flex;flex-direction:column;gap:15px;margin-top:2px} .chart-config-body .config-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0} .chart-config-body .config-row>span{color:var(--text);font-size:11px;font-weight:600} .chart-config-body .config-toggles{display:flex;flex-direction:column;gap:11px;padding-top:13px;border-top:1px solid var(--line)} .chart-config-body .alert-toggle{align-items:flex-start} .chart-config-body .alert-toggle>span{display:flex;flex-direction:column;gap:2px;font-size:11px;font-weight:600;color:var(--text)} .chart-config-body .alert-toggle>span small{color:var(--muted);font-size:8px;font-weight:400;line-height:1.4} .study-modal-foot.spaced{display:flex;justify-content:flex-end;gap:10px} .info-pop #panelInfoFull{white-space:pre-line} @media(min-width:1180px){ .panels-editing .terminal-grid{height:calc(100% - 112px)} .terminal-grid.custom>.panel{min-height:0} } /* ================================================================ navigation Three grouped menus rather than nine flat tabs. A tile carries what the view is for, not only what it is called, which is the whole reason to group them: "Advanced stats" means nothing until it says spread, microprice and liquidity. The bar itself stays one row high — the menus are the only thing that grows. */ .topbar nav{justify-self:center;display:flex;align-items:center;gap:2px;height:30px;padding:2px; border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)} .nav-item{position:relative;display:flex} .nav-link,.nav-group{display:flex;align-items:center;gap:5px;height:24px;padding:0 11px;border:1px solid transparent; border-radius:2px;background:transparent;color:var(--muted);font-size:10px;font-weight:600;white-space:nowrap} .nav-link:hover,.nav-group:hover{color:var(--text);background:var(--surface)} .nav-link.active,.nav-group.active{border-color:var(--line-strong);background:var(--surface);color:var(--text)} .nav-group[aria-expanded="true"]{border-color:var(--line-strong);background:var(--surface);color:var(--text)} .nav-chevron{width:8px;height:5px;opacity:.6;transition:transform .22s cubic-bezier(.2,.75,.3,1)} .nav-group[aria-expanded="true"] .nav-chevron{transform:rotate(180deg);opacity:1} /* An open group that is also the current view keeps a mark of its own, so the bar never loses track of where the reader actually is while they browse. */ .nav-group.active:after{content:"";position:absolute;left:50%;bottom:-3px;width:14px;height:2px; border-radius:2px;background:var(--accent);transform:translateX(-50%)} .nav-menu{position:absolute;z-index:40;top:calc(100% + 9px);left:50%;width:max-content;max-width:min(94vw,608px); padding:11px 12px 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface); box-shadow:0 22px 60px rgba(16,26,50,.17),0 2px 6px rgba(16,26,50,.06); transform:translateX(-50%) translateY(-6px) scale(.985);transform-origin:top center; opacity:0;visibility:hidden;pointer-events:none; transition:opacity .17s ease,transform .22s cubic-bezier(.2,.75,.3,1),visibility 0s linear .19s} /* Kept in the layout so it can animate, but genuinely hidden while closed: visibility takes it out of hit testing and out of the accessibility tree, which opacity alone does not. The attribute stays for anything reading the markup rather than the styles. */ .nav-menu[hidden]{display:block} .nav-item.open .nav-menu{opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1);transition-delay:0s} /* The pointer has to cross the gap between the trigger and the panel without the panel closing under it. */ .nav-menu:before{content:"";position:absolute;left:0;right:0;top:-11px;height:11px} .nav-menu:after{content:"";position:absolute;left:50%;top:-5px;width:9px;height:9px;border:1px solid var(--line-strong); border-right:0;border-bottom:0;background:var(--surface);transform:translateX(-50%) rotate(45deg)} .nav-menu-head{display:flex;flex-direction:column;gap:2px;padding:0 6px 8px;margin-bottom:7px; border-bottom:1px solid var(--line);color:var(--text);font-size:9px;font-weight:750;letter-spacing:.13em;text-transform:uppercase} .nav-menu-head small{color:var(--faint);font-size:8px;font-weight:500;letter-spacing:.02em;text-transform:none} /* A menu is two halves now, the way a trade desk brochure is: the list of places you can go, a rule, and a drawing of the one you are pointing at. The rule is the panel's spine — the preview owns everything right of it, and nothing in the left column ever reflows when the drawing changes. */ .nav-menu-body{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:12px;align-items:stretch} .nav-tiles{display:flex;flex-direction:column;gap:2px;min-width:250px} .nav-preview{position:relative;display:grid;padding-left:12px;border-left:1px solid var(--line)} /* Every drawing sits in the same cell, so swapping one for another cannot move the panel by a pixel; only opacity and a few pixels of lift change. */ .nav-art{grid-area:1/1;display:flex;flex-direction:column;gap:8px;margin:0; opacity:0;visibility:hidden;transform:translateY(4px); transition:opacity .18s ease,transform .24s cubic-bezier(.2,.75,.3,1),visibility 0s linear .2s} .nav-art.on{opacity:1;visibility:visible;transform:none;transition-delay:0s} .art-frame{position:relative;display:grid;place-items:center;flex:1;min-height:118px;overflow:hidden; border:1px solid var(--line);border-radius:5px;background:var(--surface-2)} /* Graph paper under the drawing, faint enough to read as texture rather than as data. */ .art-frame:before{content:"";position:absolute;inset:0;opacity:.5; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:18px 18px} .art-frame svg{position:relative;width:88%;height:auto;max-height:126px} .nav-art figcaption{display:flex;flex-direction:column;gap:2px;padding-left:1px} .nav-art figcaption strong{color:var(--text);font-size:10px;font-weight:700;letter-spacing:.02em} .nav-art figcaption small{color:var(--faint);font-size:8.5px;line-height:1.4} /* One palette for all eight drawings, so the panel reads as one hand. */ .a-fill{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.4} .a-down{fill:color-mix(in srgb,var(--neg) 16%,transparent);stroke:var(--neg);stroke-width:1.4} .a-line{fill:none;stroke:var(--line-strong);stroke-width:1.4;stroke-linecap:round} .a-dash{fill:none;stroke:var(--line-strong);stroke-width:1.2;stroke-dasharray:3 4;stroke-linecap:round} .a-stroke{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .a-stroke-b{fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .a-area{fill:color-mix(in srgb,var(--accent) 17%,transparent)} .a-area-b{fill:color-mix(in srgb,var(--neg) 15%,transparent)} .a-dot{fill:var(--surface);stroke:var(--accent);stroke-width:2} .a-card{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.4} .a-knob{fill:var(--surface);stroke:var(--accent);stroke-width:2} .a-check{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .nav-tile{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%; padding:8px 9px;border:1px solid transparent;border-radius:4px;background:transparent;color:inherit; text-align:left;text-decoration:none;transition:background .16s ease,border-color .16s ease,transform .16s ease} .nav-tile:hover,.nav-tile:focus-visible,.nav-tile.previewing{border-color:var(--line);background:var(--surface-2);outline:none} .tile-go{width:10px;height:10px;flex:none;color:var(--faint);opacity:0;transform:translateX(-3px); transition:opacity .16s ease,transform .16s ease} .nav-tile.previewing .tile-go,.nav-tile:hover .tile-go,.nav-tile:focus-visible .tile-go{opacity:1;transform:none} .nav-tile.active .tile-go{color:var(--accent);opacity:1;transform:none} .nav-tile.active{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));background:var(--accent-soft)} .tile-icon{display:grid;place-items:center;width:27px;height:27px;flex:none;border:1px solid var(--line); border-radius:5px;background:var(--surface-2);color:var(--muted);transition:color .16s ease,border-color .16s ease} .tile-icon svg{width:15px;height:15px} .nav-tile:hover .tile-icon,.nav-tile.previewing .tile-icon{border-color:var(--line-strong);color:var(--text)} .nav-tile.active .tile-icon{border-color:color-mix(in srgb,var(--accent) 46%,var(--line));background:var(--surface);color:var(--accent)} .tile-copy{min-width:0;display:flex;flex-direction:column;gap:1px} .tile-copy strong{font-size:11px;font-weight:600;letter-spacing:-.005em} .tile-copy small{overflow:hidden;color:var(--muted);font-size:8.5px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap} .nav-tile .tile-state{flex:none;padding:1px 4px;border:1px solid var(--line-strong);border-radius:2px; color:var(--faint);font-size:6px;font-weight:700;letter-spacing:.08em} .nav-tile.unlocked .tile-state{border-color:#3553a3;background:var(--accent-soft);color:var(--accent)} .nav-tile.has-unread .tile-state{border-color:var(--neg);background:color-mix(in srgb,var(--neg) 14%,transparent);color:var(--neg)} body:not(.dark) .nav-tile.unlocked .tile-state{border-color:var(--accent)} body.dark .nav-menu{box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03)} @media(prefers-reduced-motion:reduce){ .nav-menu,.nav-chevron,.nav-tile,.nav-art,.tile-go{transition:none} .nav-art{transform:none} .nav-item.open .nav-menu{transform:translateX(-50%)} } /* On a narrow bar the menu stops trying to centre itself on its trigger and simply hangs from the left of the nav, which is the only placement that cannot walk off the edge of a phone. */ @media(max-width:900px){ .topbar nav{height:auto;flex-wrap:wrap;justify-content:flex-start;overflow:visible} .nav-menu{left:0;right:auto;transform:translateY(-6px) scale(.985);max-width:calc(100vw - 32px);width:min(360px,calc(100vw - 32px))} .nav-menu-body{grid-template-columns:minmax(0,1fr);gap:0} .nav-tiles{min-width:0} .nav-preview{display:none} .nav-item.open .nav-menu{transform:translateY(0) scale(1)} .nav-menu:after{left:26px} .nav-item:last-child .nav-menu{left:auto;right:0} .nav-item:last-child .nav-menu:after{left:auto;right:26px} } @media(max-width:480px){ .nav-tile .tile-state{display:inline-block} .tile-copy small{font-size:8px} }