/* MAKETZO — "Can You Trade?" live trading sim. Scoped .diag-* */ /* The lightbox is appended to , OUTSIDE #diag-root, so it must be declared here too or every --d-* resolves to nothing inside it. That is not theoretical: the legend swatches (background: var(--d-gold-hi) etc) rendered as invisible 8px boxes, so the enlarged chart shipped with a legend that named colours it did not show. */ #diag-root, .diag-lightbox { --d-gold: #d4af37; --d-gold-hi: #e5c572; --d-up: #7ed957; --d-down: #ff6b6b; --d-ink: #f3f5f8; --d-dim: #9aa6b3; --d-panel: rgba(18,24,34,.7); --d-line: rgba(255,255,255,.10); } #diag-root { width: 100%; max-width: 900px; margin: 0 auto; color: var(--d-ink); font-family: var(--mk-font-sans, "DM Sans", system-ui, sans-serif); } .diag-lightbox { color: var(--d-ink); font-family: var(--mk-font-sans, "DM Sans", system-ui, sans-serif); } /* ── Intro ───────────────────────────────────────────────────────────────── */ .diag-intro { text-align: center; padding: 8px 4px 4px; max-width: 600px; margin: 0 auto; } .diag-eyebrow { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--d-gold-hi); margin-bottom: 18px; } .diag-h1 { font-family: var(--mk-font-display, "Bebas Neue", Impact, sans-serif); font-weight: 400; font-size: clamp(38px, 10vw, 66px); line-height: .98; letter-spacing: .01em; color: #fff; margin-bottom: 18px; } .diag-h1 em { font-style: normal; color: var(--d-gold); } /* ── The same-tape promise ────────────────────────────────────────────────── The single most important sentence on the intro: it is the reason a shared result means anything. Framed, not buried in small print. */ .diag-same { margin: 0 auto 18px; max-width: 520px; text-align: left; font-size: 13.5px; line-height: 1.5; color: var(--d-dim); background: rgba(212,175,55,.07); border: 1px solid rgba(212,175,55,.28); border-left: 3px solid var(--d-gold); border-radius: 0 10px 10px 0; padding: 11px 14px; } .diag-same b { color: var(--d-gold-hi); font-weight: 700; } .diag-streak { display: flex; width: fit-content; align-items: center; gap: 6px; margin: 0 auto 14px; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--d-gold-hi); background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.35); border-radius: 999px; padding: 5px 12px; } .diag-practice-link { display: block; margin: 14px auto 0; background: none; border: 0; color: var(--d-dim); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .diag-practice-link:hover { color: var(--d-ink); } /* "Daily #13 opens in 6h 12m" — the whole point of the lock. */ .diag-next { margin-top: 14px; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--d-dim); } .diag-next b { color: var(--d-gold-hi); } /* ── Already played today ─────────────────────────────────────────────────── Nothing to do but come back, so the job is to make tomorrow feel worth it. */ .diag-done-card { max-width: 340px; margin: 0 auto 16px; padding: 18px 16px; border-radius: 14px; background: linear-gradient(160deg, rgba(42,54,72,.5), rgba(13,15,20,.86)); border: 1px solid var(--d-line); } .diag-done-grade { font-family: var(--mk-font-display, "Bebas Neue", Impact, sans-serif); font-size: 40px; line-height: 1; color: var(--d-gold-hi); } .diag-done-name { font-family: var(--mk-font-display, "Bebas Neue", Impact, sans-serif); font-size: 30px; line-height: 1.05; color: #fff; margin: 2px 0 6px; } .diag-done-net { font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; } .diag-done-net.up { color: var(--d-up); } .diag-done-net.down { color: var(--d-down); } .diag-done-share { display: flex; justify-content: center; margin: 14px 0 4px; } .diag-done-line { max-width: 440px; margin: 14px auto 0; font-size: 13.5px; line-height: 1.5; color: var(--d-dim); } .diag-done-cta { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--d-line); } /* A labeled share trigger. Used where sharing is the PRIMARY action (the done screen), never where it would sit next to the Train-it-free CTA and compete with it. */ .diag-share-labeled .diag-share-icon { width: auto; height: auto; gap: 8px; padding: 10px 18px; border-radius: 999px; border-color: rgba(212,175,55,.45); background: rgba(212,175,55,.1); } .diag-share-labeled .diag-share-icon:hover { background: rgba(212,175,55,.2); color: #fff; } .diag-share-lbl { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; } .diag-lede { font-size: 16px; line-height: 1.55; color: var(--d-dim); max-width: 460px; margin: 0 auto 30px; } .diag-lede b { color: var(--d-ink); font-weight: 600; } .diag-start { font-family: var(--mk-font-sans, "DM Sans", sans-serif); font-weight: 700; font-size: 18px; color: #0d0f14; background: var(--mk-gold-gradient, linear-gradient(135deg, #e5c572, #d4af37)); border: none; border-radius: 14px; padding: 17px 40px; cursor: pointer; box-shadow: 0 10px 30px rgba(212,175,55,.28); transition: transform .15s ease, box-shadow .15s ease; } .diag-start:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(212,175,55,.36); } .diag-intro-note { margin-top: 18px; font-size: 12.5px; color: var(--d-dim); letter-spacing: .02em; } .diag-intro-disc { margin: 9px auto 0; max-width: 430px; font-size: 11px; line-height: 1.5; color: var(--d-dim); opacity: .68; } /* ── Trading terminal ────────────────────────────────────────────────────── */ .diag-term { display: flex; gap: 14px; align-items: stretch; animation: diagFade .28s ease; border-radius: 16px; border: 1px solid var(--d-line); background: linear-gradient(180deg, rgba(20,26,36,.7), rgba(10,13,18,.85)); padding: 14px 14px 16px; box-shadow: 0 24px 60px rgba(0,0,0,.45); } .diag-main { flex: 1; min-width: 0; position: relative; } @keyframes diagFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .diag-term-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; } .diag-term-sym { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 14px; letter-spacing: .14em; color: var(--d-gold-hi); } .diag-term-px { color: #fff; font-size: 20px; font-weight: 700; margin-left: 8px; font-variant-numeric: tabular-nums; } .diag-term-clock { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 18px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } .diag-term-clock.low { color: var(--d-down); } .diag-chart { display: block; width: 100%; height: 300px; border-radius: 12px; background: #0a0d12; border: 1px solid var(--d-line); } .diag-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 8px 2px 0; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 10.5px; letter-spacing: .04em; color: var(--d-dim); } .diag-leg { display: inline-flex; align-items: center; gap: 6px; } .diag-sw { width: 14px; height: 0; border-top: 2px solid transparent; border-radius: 2px; } .diag-sw-e9 { border-top-color: #fff; } .diag-sw-e20 { border-top-color: #7fb4ff; } .diag-sw-vwap { border-top-color: #ff9f43; border-top-style: dotted; } .diag-sw-res { border-top-color: #ff7ab0; border-top-style: dashed; } .diag-sw-vol { height: 9px; border-top: none; border-radius: 1px; background: linear-gradient(90deg, rgba(126,217,87,.55) 0 50%, rgba(255,107,107,.55) 50% 100%); } /* ── Right rail: Level 2 + Time & Sales + blotter ────────────────────────── */ .diag-side { width: 258px; flex: 0 0 258px; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; } .diag-side-h { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--d-dim); margin-bottom: 7px; display: flex; align-items: baseline; gap: 6px; } .diag-side-sub { font-size: 8.5px; letter-spacing: .08em; opacity: .65; } /* Level 2 order book — depth bars so pressure reads at a glance */ .diag-l2-wrap { flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--d-line); background: rgba(8,11,16,.6); padding: 10px 10px 9px; } .diag-l2 { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; } .diag-l2-row { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 2.5px 8px; border-radius: 4px; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11px; overflow: hidden; } .diag-l2-bar { position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; border-radius: 4px; transition: width .18s ease; } .diag-l2-row.ask .diag-l2-bar { background: rgba(255,107,107,.15); } .diag-l2-row.bid .diag-l2-bar { background: rgba(126,217,87,.15); } .diag-l2-px, .diag-l2-sz { position: relative; z-index: 1; } .diag-l2-row.ask .diag-l2-px { color: #ffb3b3; } .diag-l2-row.bid .diag-l2-px { color: #aee88f; } .diag-l2-sz { color: var(--d-ink); opacity: .82; } .diag-l2-row.wall .diag-l2-sz { font-weight: 800; opacity: 1; color: #fff; } .diag-l2-row.wall.ask .diag-l2-bar { background: rgba(255,107,107,.42); box-shadow: inset 0 0 0 1px rgba(255,107,107,.7); } .diag-l2-row.wall.bid .diag-l2-bar { background: rgba(126,217,87,.42); box-shadow: inset 0 0 0 1px rgba(126,217,87,.7); } .diag-l2-spread { text-align: center; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--d-gold-hi); padding: 3px 0; margin: 1px 0; border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); } /* View toggle (DAS montage <-> price ladder) */ .diag-l2-toggle { margin-left: auto; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--d-dim); background: rgba(255,255,255,.05); border: 1px solid var(--d-line); border-radius: 6px; padding: 3px 8px; cursor: pointer; transition: color .14s ease, border-color .14s ease; } .diag-l2-toggle:hover { color: var(--d-ink); border-color: rgba(212,175,55,.5); } /* Level 1 strip — inside bid / spread / inside ask */ .diag-l1 { display: flex; align-items: stretch; gap: 4px; margin-bottom: 8px; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .diag-l1-cell { flex: 1; text-align: center; padding: 4px 0; border-radius: 5px; } .diag-l1-cell.bid { background: #5fd35f; color: #08210a; } .diag-l1-cell.ask { background: #f0897e; color: #2a0a07; } .diag-l1-spr { flex: 0 0 auto; align-self: center; padding: 0 4px; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: var(--d-dim); } /* DAS-style Level 2 montage — bids left, asks right, price-level color bands */ .diag-mont { display: flex; gap: 3px; } .diag-mont-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .diag-mont-row { display: flex; align-items: center; gap: 3px; padding: 2.5px 5px; border-radius: 3px; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .diag-mm { flex: 0 0 auto; width: 38px; font-weight: 700; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; } .diag-mp { flex: 1; text-align: right; } .diag-ml { flex: 0 0 auto; width: 22px; text-align: right; opacity: .92; } .diag-mont-row.wall { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9); } .diag-mont-row.wall .diag-ml { font-weight: 800; } .diag-mont-row.bid.lvl0 { background: #5fd35f; color: #08210a; } .diag-mont-row.bid.lvl1 { background: #cdd84a; color: #1a1c08; } .diag-mont-row.bid.lvl2 { background: #52c6d6; color: #06212a; } .diag-mont-row.bid.lvl3 { background: #5b8def; color: #061230; } .diag-mont-row.bid.lvl4 { background: #34427f; color: #dfe6ff; } .diag-mont-row.bid.lvl5 { background: #566070; color: #e7edf5; } .diag-mont-row.ask.lvl0 { background: #5fd35f; color: #08210a; } .diag-mont-row.ask.lvl1 { background: #f0897e; color: #2a0a07; } .diag-mont-row.ask.lvl2 { background: #52c6d6; color: #06212a; } .diag-mont-row.ask.lvl3 { background: #5b8def; color: #061230; } .diag-mont-row.ask.lvl4 { background: #34427f; color: #dfe6ff; } .diag-mont-row.ask.lvl5 { background: #566070; color: #e7edf5; } /* Time & Sales — the prints. Green hits the offer, red hits the bid. */ .diag-tape-wrap { flex: 1 1 auto; min-height: 200px; display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--d-line); background: rgba(8,11,16,.6); padding: 10px 10px 9px; overflow: hidden; } .diag-tape { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; } .diag-print { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; border-radius: 4px; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11px; animation: diagPrint .16s ease; } .diag-print.buy { background: rgba(126,217,87,.10); } .diag-print.sell { background: rgba(255,107,107,.10); } .diag-print.buy .diag-print-px { color: #aee88f; } .diag-print.sell .diag-print-px { color: #ffb3b3; } .diag-print-sz { color: var(--d-ink); opacity: .8; } .diag-print.block { box-shadow: inset 2px 0 0 var(--d-gold); } .diag-print.block .diag-print-sz { font-weight: 800; opacity: 1; } @keyframes diagPrint { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } } /* Live blotter (running trade tally — itself a behavioral trap) */ .diag-blotter { flex: 0 0 auto; display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--d-line); background: rgba(8,11,16,.6); padding: 11px 11px; } .diag-blotter-top { border-bottom: 1px solid var(--d-line); padding-bottom: 9px; margin-bottom: 8px; } .diag-blotter-h { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--d-dim); margin-bottom: 6px; } .diag-blotter-pnl { font-size: 23px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; } .diag-blotter-pnl.up { color: var(--d-up); } .diag-blotter-pnl.down { color: var(--d-down); } .diag-blotter-rec { font-size: 12px; color: var(--d-dim); margin-top: 4px; font-variant-numeric: tabular-nums; } .diag-blotter-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; max-height: 96px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; } .diag-blotter-list::-webkit-scrollbar { width: 6px; } .diag-blotter-list::-webkit-scrollbar-track { background: transparent; } .diag-blotter-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 3px; } .diag-blotter-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); } .diag-brow { display: flex; align-items: center; justify-content: space-between; padding: 6px 9px; border-radius: 7px; background: rgba(255,255,255,.03); border-left: 2px solid var(--d-line); font-variant-numeric: tabular-nums; animation: diagRow .25s ease; } .diag-brow.win { border-left-color: var(--d-up); } .diag-brow.loss { border-left-color: var(--d-down); } .diag-brow-dir { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 10px; letter-spacing: .08em; color: var(--d-dim); } .diag-brow-pnl { font-weight: 700; font-size: 13.5px; } .diag-brow.win .diag-brow-pnl { color: var(--d-up); } .diag-brow.loss .diag-brow-pnl { color: var(--d-down); } .diag-brow-empty { font-size: 12px; color: var(--d-dim); opacity: .55; text-align: center; padding: 14px 0; } @keyframes diagRow { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } @media (max-width: 720px) { .diag-term { flex-direction: column; padding-bottom: 150px; } .diag-side { width: auto; flex: none; } .diag-chart { height: 210px; } .diag-cd, .diag-pause-over { height: 210px; } .diag-legend { display: none; } .diag-tape-wrap { min-height: 96px; } .diag-tape { max-height: 118px; } .diag-blotter-list { max-height: 84px; } /* Trade cockpit pinned to the bottom: live P&L + BUY/SELL + pause, always under your thumb while the chart, Level 2 and T&S sit above it on one screen. */ .diag-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 6px 12px calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(13,17,24,.95), rgba(8,11,16,.99)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--d-line); box-shadow: 0 -10px 28px rgba(0,0,0,.55); } .diag-actions .diag-pos { margin: 0 2px 4px; min-height: 0; } .diag-actions .diag-pause-toggle { margin-top: 7px; padding: 7px 0; font-size: 11px; } .diag-trade-btn { font-size: 24px; padding: 12px 0; } .diag-term-hint { display: none; } } /* ── Top bar: pause + clock ──────────────────────────────────────────────── */ .diag-term-topright { display: flex; align-items: center; gap: 10px; } .diag-term-exit { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 13px; line-height: 1; color: var(--d-dim); background: rgba(255,255,255,.05); border: 1px solid var(--d-line); border-radius: 7px; cursor: pointer; transition: color .14s ease, border-color .14s ease; } .diag-term-exit:hover { color: var(--d-down); border-color: rgba(255,107,107,.5); } .diag-share-game { display: inline-flex; } .diag-term-topright .diag-share-icon { width: 26px; height: 26px; border-radius: 7px; } .diag-term-topright .diag-share-icon svg { width: 15px; height: 15px; } .diag-pause-toggle { width: 100%; margin-top: 10px; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--d-ink); background: rgba(255,255,255,.05); border: 1px solid var(--d-line); border-radius: 11px; padding: 11px 0; cursor: pointer; transition: color .14s ease, border-color .14s ease; } .diag-pause-toggle:hover { border-color: rgba(212,175,55,.5); } /* ── Overlays: 3-2-1-GO countdown + paused ───────────────────────────────── */ .diag-hidden { display: none !important; } .diag-cd, .diag-pause-over { position: absolute; left: 8px; right: 8px; top: 44px; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(8,10,14,.66); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-radius: 12px; z-index: 6; } .diag-cd-num { font-family: var(--mk-font-display, "Bebas Neue", Impact, sans-serif); font-size: 112px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .diag-cd-num.go { color: var(--d-up); font-size: 92px; letter-spacing: .05em; } .diag-cd-num.tick { animation: diagCdPop .5s ease; } @keyframes diagCdPop { 0% { transform: scale(.6); opacity: 0; } 45% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } } .diag-pause-title { font-family: var(--mk-font-display, "Bebas Neue", Impact, sans-serif); font-size: 44px; color: #fff; letter-spacing: .02em; } /* ── Catalyst event banner (the "reason": offering, squeeze, halt) ───────── */ .diag-event { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); z-index: 7; max-width: calc(100% - 28px); font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11px; letter-spacing: .03em; line-height: 1.3; text-align: center; padding: 8px 14px; border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,.5); animation: diagEventIn .3s ease; } .diag-event.rug { background: rgba(255,107,107,.16); border: 1px solid rgba(255,107,107,.5); color: #ffc7c7; } .diag-event.squeeze { background: rgba(126,217,87,.16); border: 1px solid rgba(126,217,87,.5); color: #cdf5b4; } .diag-event.news { background: rgba(212,175,55,.14); border: 1px solid rgba(212,175,55,.45); color: #f0d99a; } .diag-event.tape { background: rgba(127,180,255,.13); border: 1px solid rgba(127,180,255,.42); color: #d3e4ff; } @keyframes diagEventIn { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } } /* ── Shared .mk-share host (component styles live in audio-player.css) ────── */ .diag-share { display: flex; justify-content: center; margin: 22px 0 4px; } .diag-share-mk { display: inline-flex; } /* ── Result head (eyebrow + quiet share icon) + card stats line ──────────── */ .diag-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .diag-result-head .diag-result-eyebrow { margin-bottom: 0; } .diag-share-top { display: inline-flex; } .diag-share-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; background: var(--d-panel); border: 1px solid var(--d-line); color: var(--d-gold-hi); cursor: pointer; transition: border-color .14s ease, background .14s ease; } .diag-share-icon:hover { border-color: rgba(212,175,55,.5); background: rgba(28,34,48,.7); } .diag-share-icon svg { width: 18px; height: 18px; fill: currentColor; } .diag-card-stats { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11px; letter-spacing: .02em; color: var(--d-dim); margin-bottom: 14px; font-variant-numeric: tabular-nums; } .diag-pos { display: flex; align-items: center; justify-content: space-between; margin: 10px 2px 2px; min-height: 26px; font-variant-numeric: tabular-nums; } .diag-pos-state { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 12.5px; letter-spacing: .08em; color: var(--d-dim); } .diag-pos.open .diag-pos-state { color: var(--d-gold-hi); } .diag-pos-pnl { font-size: 18px; font-weight: 800; } .diag-pos.up .diag-pos-pnl { color: var(--d-up); } .diag-pos.down .diag-pos-pnl { color: var(--d-down); } .diag-term-bottom { display: flex; justify-content: flex-end; margin: 2px 2px 10px; } .diag-bal { font-size: 13px; color: var(--d-dim); font-variant-numeric: tabular-nums; } .diag-bal b { color: #fff; font-size: 16px; margin-left: 4px; } .diag-trade-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .diag-trade-btn { font-family: var(--mk-font-display, "Bebas Neue", Impact, sans-serif); font-weight: 400; font-size: 30px; letter-spacing: .06em; padding: 16px 0; border-radius: 13px; border: 1px solid; cursor: pointer; transition: transform .08s ease, filter .12s ease; -webkit-user-select: none; user-select: none; touch-action: manipulation; } .diag-trade-btn:active { transform: scale(.98); } .diag-trade-btn.buy { color: #07120a; background: linear-gradient(180deg, #8ef064, #5bbf3b); border-color: rgba(126,217,87,.5); } .diag-trade-btn.sell { color: #1a0707; background: linear-gradient(180deg, #ff8a8a, #e25555); border-color: rgba(255,107,107,.5); } .diag-trade-btn:disabled { opacity: .32; cursor: default; filter: grayscale(.4); } .diag-trade-btn.flash-buy { filter: brightness(1.3); } .diag-trade-btn.flash-win { box-shadow: 0 0 0 3px rgba(126,217,87,.5); } .diag-trade-btn.flash-loss { box-shadow: 0 0 0 3px rgba(255,107,107,.5); } .diag-term-hint { text-align: center; font-size: 12px; color: var(--d-dim); margin-top: 12px; } /* ── Result ──────────────────────────────────────────────────────────────── */ .diag-result { text-align: center; animation: diagFade .3s ease; max-width: 620px; margin: 0 auto; } .diag-result-eyebrow { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--d-dim); margin-bottom: 12px; } .diag-card { position: relative; border-radius: 18px; padding: 30px 24px 22px; overflow: hidden; background: linear-gradient(160deg, rgba(42,54,72,.5), rgba(13,15,20,.82)); border: 1px solid var(--d-line); box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); } .diag-card.slam { animation: diagSlam .5s cubic-bezier(.2,.9,.25,1.2); } @keyframes diagSlam { 0% { transform: scale(.86); opacity: 0; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(1); } } /* Card tiers are the BADGE tier (flex / sin / style / legend), not the letter grade. The grade is a separate axis now and renders in its own corner. flex = earned (green), sin = savage (red), style = a neutral fingerprint (gold, the house colour), legend = the rare collectible, which gets the only glow on the surface so it reads as special. */ .diag-tier-flex .diag-card { background: linear-gradient(160deg, rgba(126,217,87,.16), rgba(13,15,20,.86)); border-color: rgba(126,217,87,.4); } .diag-tier-sin .diag-card { background: linear-gradient(160deg, rgba(255,107,107,.16), rgba(13,15,20,.86)); border-color: rgba(255,107,107,.4); } .diag-tier-style .diag-card { background: linear-gradient(160deg, rgba(212,175,55,.14), rgba(13,15,20,.86)); border-color: rgba(212,175,55,.34); } .diag-tier-legend .diag-card { background: linear-gradient(160deg, rgba(212,175,55,.28), rgba(60,40,10,.6) 55%, rgba(13,15,20,.9)); border-color: rgba(212,175,55,.75); box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(212,175,55,.3), 0 0 42px rgba(212,175,55,.28), inset 0 1px 0 rgba(255,255,255,.1); } .diag-card-grade { position: absolute; top: 16px; right: 18px; font-family: var(--mk-font-display, "Bebas Neue", Impact, sans-serif); font-size: 46px; line-height: 1; color: #fff; opacity: .92; } .diag-tier-flex .diag-card-grade { color: var(--d-up); } .diag-tier-sin .diag-card-grade { color: var(--d-down); } .diag-tier-legend .diag-card-grade { color: var(--d-gold-hi); } .diag-card-name { font-family: var(--mk-font-display, "Bebas Neue", Impact, sans-serif); font-weight: 400; font-size: clamp(44px, 13vw, 76px); line-height: .92; letter-spacing: .01em; color: #fff; margin: 4px 0 8px; } .diag-tier-flex .diag-card-name { color: var(--d-up); } .diag-tier-sin .diag-card-name { color: var(--d-down); } .diag-tier-style .diag-card-name, .diag-tier-legend .diag-card-name { color: var(--d-gold-hi); } .diag-card-tag { font-size: 14.5px; font-style: italic; color: #fff; opacity: .92; margin-bottom: 14px; } .diag-card-roast { font-size: 15.5px; line-height: 1.55; color: var(--d-ink); max-width: 430px; margin: 0 auto 18px; } .diag-card-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; } .diag-meta-box { background: rgba(13,15,20,.5); border: 1px solid var(--d-line); border-radius: 10px; padding: 10px 6px; } .diag-meta-num { display: block; font-weight: 800; font-size: 19px; color: #fff; font-variant-numeric: tabular-nums; } .diag-meta-num.up { color: var(--d-up); } .diag-meta-num.down { color: var(--d-down); } .diag-meta-num.gold { color: var(--d-gold-hi); } .diag-meta-den { font-weight: 600; font-size: 12px; opacity: .55; } .diag-meta-cap { display: block; font-size: 10.5px; line-height: 1.25; color: var(--d-dim); margin-top: 3px; } .diag-card-wm { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--d-dim); opacity: .8; } .diag-verdict { margin: 16px auto 0; max-width: 440px; font-size: 14px; line-height: 1.5; color: var(--d-ink); font-style: italic; } .diag-tells { margin: 18px auto 0; max-width: 440px; text-align: left; } .diag-tells-h { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--d-gold-hi); margin-bottom: 8px; text-align: center; } .diag-tell { font-size: 13.5px; line-height: 1.45; color: var(--d-dim); padding: 9px 12px; border-left: 2px solid rgba(255,107,107,.5); background: rgba(255,107,107,.05); border-radius: 0 8px 8px 0; margin-bottom: 7px; } .diag-tier-flex .diag-tell, .diag-tier-legend .diag-tell { border-left-color: rgba(126,217,87,.5); background: rgba(126,217,87,.05); } /* ── The badge shelf ──────────────────────────────────────────────────────── The headline is the punch and the share artifact. The shelf is the collection: it carries the nuance the headline cannot, so a headline that reads slightly off is survivable instead of infuriating, and it is what makes two cards comparable. */ .diag-shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 auto 16px; max-width: 430px; } .diag-shelf-badge { position: relative; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--d-line); background: rgba(13,15,20,.5); color: var(--d-dim); cursor: default; } /* First time you have ever earned this badge. The whole point of the collection. */ .diag-shelf-badge.is-new { animation: diagNewPop .5s cubic-bezier(.2,.9,.25,1.4) both; } @keyframes diagNewPop { 0% { transform: scale(.7); opacity: 0; } 65% { transform: scale(1.09); opacity: 1; } 100% { transform: scale(1); } } .diag-new { margin-left: 6px; font-size: 8.5px; letter-spacing: .1em; color: var(--d-gold-hi); border: 1px solid rgba(212,175,55,.5); border-radius: 999px; padding: 1px 4px; vertical-align: 1px; } /* On the headline the name is ~76px display type, so the marker needs its own scale and must not inherit the display font's tracking. */ .diag-new--head { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; vertical-align: middle; margin-left: 12px; padding: 3px 8px; background: rgba(212,175,55,.14); animation: diagNewPop .5s cubic-bezier(.2,.9,.25,1.4) both; display: inline-block; } .diag-bt-flex { border-color: rgba(126,217,87,.45); color: var(--d-up); background: rgba(126,217,87,.08); } .diag-bt-sin { border-color: rgba(255,107,107,.45); color: var(--d-down); background: rgba(255,107,107,.08); } .diag-bt-legend { border-color: rgba(212,175,55,.7); color: var(--d-gold-hi); background: rgba(212,175,55,.14); box-shadow: 0 0 14px rgba(212,175,55,.25); } .diag-bt-style { border-color: rgba(212,175,55,.3); color: var(--d-gold-hi); background: rgba(212,175,55,.05); } /* The receipt behind every shelf badge. No badge appears without one. */ .diag-shelf-why { margin: 16px auto 0; max-width: 440px; text-align: left; } .diag-shelf-line { font-size: 13px; line-height: 1.45; color: var(--d-dim); padding: 7px 0; border-top: 1px solid var(--d-line); } .diag-shelf-line:first-child { border-top: 0; } .diag-shelf-name { color: #fff; font-weight: 700; } .diag-share { margin: 22px auto 0; max-width: 480px; } .diag-share-h { font-size: 13px; color: var(--d-dim); margin-bottom: 10px; } .diag-share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .diag-sbtn { font-family: var(--mk-font-sans, "DM Sans", sans-serif); font-weight: 600; font-size: 13px; color: var(--d-ink); background: var(--d-panel); border: 1px solid var(--d-line); border-radius: 10px; padding: 9px 14px; cursor: pointer; text-decoration: none; transition: border-color .14s ease, background .14s ease; } .diag-sbtn:hover { border-color: rgba(212,175,55,.5); background: rgba(28,34,48,.7); } .diag-sbtn--native, .diag-sbtn--copy { background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.4); color: var(--d-gold-hi); } .diag-share-toast { margin-top: 10px; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 12px; color: var(--d-up); } .diag-funnel { margin: 26px auto 0; max-width: 440px; } .diag-funnel-line { font-size: 15.5px; line-height: 1.5; color: var(--d-ink); margin-bottom: 16px; } .diag-funnel-line strong { color: #fff; } .diag-cta { display: inline-block; font-weight: 700; font-size: 17px; color: #0d0f14; background: var(--mk-gold-gradient, linear-gradient(135deg, #e5c572, #d4af37)); border-radius: 13px; padding: 15px 36px; text-decoration: none; box-shadow: 0 10px 28px rgba(212,175,55,.26); transition: transform .15s ease; } .diag-cta:hover { transform: translateY(-2px); } .diag-funnel-sub { margin-top: 12px; font-size: 12px; color: var(--d-dim); } .diag-endbar { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .diag-again { background: none; border: none; color: var(--d-dim); font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 8px; } .diag-again:hover { color: var(--d-ink); } /* Copy the result BLOCK (the Wordle mechanic). Distinct from the share widget, which sends a link to a platform. This one puts text on the clipboard for anywhere. */ .diag-copy { background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.4); color: var(--d-gold-hi); font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background var(--mk-dur-fast, .15s), color var(--mk-dur-fast, .15s); } .diag-copy:hover { background: rgba(212,175,55,.18); color: #fff; } .diag-copy.is-done { background: rgba(126,217,87,.14); border-color: rgba(126,217,87,.5); color: var(--d-up); } /* Off-screen sink for the execCommand fallback. Must be focusable + selectable, so it cannot be display:none, and must never scroll the page into a jump. */ .diag-copy-sink { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; } .diag-vault-line { margin-top: 12px; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--d-dim); opacity: .75; } /* ── "See your trades" · the review chart ─────────────────────────────────── The full session with your fills on it. The most instructive surface here, and a live demo of the product: reviewing your own entries once the emotion has drained. */ .diag-seetrades { border-color: rgba(126,217,87,.4); background: rgba(126,217,87,.08); color: var(--d-up); } .diag-seetrades:hover { background: rgba(126,217,87,.18); color: #fff; } .diag-review { margin: 18px auto 0; max-width: 560px; background: rgba(13,15,20,.5); border: 1px solid var(--d-line); border-radius: 12px; padding: 14px 12px 12px; } .diag-review-h { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--d-gold-hi); margin-bottom: 10px; } /* The whole chart is one big button. A canvas gives no affordance on its own, so the hint sits on it and the cursor changes: nothing else here says "there is more". */ .diag-review-tap { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; border-radius: 8px; } .diag-review-tap:hover .diag-review-expand, .diag-review-tap:focus-visible .diag-review-expand { opacity: 1; border-color: rgba(212,175,55,.55); } .diag-review-tap:focus-visible { outline: 2px solid rgba(212,175,55,.6); outline-offset: 2px; } .diag-review-expand { position: absolute; right: 6px; top: 6px; font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--d-gold-hi); background: rgba(6,7,10,.78); border: 1px solid rgba(212,175,55,.3); border-radius: 999px; padding: 3px 8px; opacity: .78; transition: opacity .14s ease, border-color .14s ease; pointer-events: none; } .diag-review-cv { display: block; width: 100%; height: 190px; } .diag-review-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; font-size: 10.5px; color: var(--d-dim); } .diag-review-key span { display: inline-flex; align-items: center; gap: 5px; } .diag-k { width: 8px; height: 8px; display: inline-block; } .diag-k-entry { background: var(--d-gold-hi); clip-path: polygon(50% 0, 100% 100%, 0 100%); } .diag-k-win { background: var(--d-up); border-radius: 50%; } .diag-k-loss { background: var(--d-down); border-radius: 50%; } .diag-review-note { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--d-line); font-size: 12px; line-height: 1.45; color: var(--d-dim); text-align: left; } @media (max-width: 480px) { .diag-review-cv { height: 150px; } } /* ── Lightbox · the review chart at a size you can actually read ──────────── z-index must clear the fixed nav (50), the retired sticky-bar band (55) and the mobile drawer (100). A fixed bottom bar out-z-indexing a modal is a real bug this page has had before. */ .diag-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(4,5,8,.9); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: diagLbIn .18s ease both; } @keyframes diagLbIn { from { opacity: 0; } to { opacity: 1; } } .diag-lb-inner { width: min(1100px, 96vw); background: linear-gradient(160deg, rgba(28,34,48,.7), rgba(13,15,20,.94)); border: 1px solid rgba(212,175,55,.3); border-radius: 14px; padding: 16px 16px 14px; box-shadow: 0 30px 90px rgba(0,0,0,.7); } .diag-lb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .diag-lb-title { font-family: var(--mk-font-mono, "DM Mono", monospace); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--d-gold-hi); } .diag-lb-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: rgba(13,15,20,.6); border: 1px solid var(--d-line); border-radius: 8px; color: var(--d-ink); font-size: 14px; cursor: pointer; } .diag-lb-close:hover { border-color: rgba(212,175,55,.5); color: #fff; } /* 62vh so the legend + the lesson stay on screen with it, not below the fold. */ .diag-lb-cv { display: block; width: 100%; height: 62vh; max-height: 620px; } .diag-lb-inner .diag-review-note { text-align: center; } body.diag-lb-open { overflow: hidden; } @media (max-width: 640px) { .diag-lightbox { padding: 10px; } .diag-lb-inner { padding: 12px 10px 10px; } .diag-lb-cv { height: 56vh; } } /* Second share icon, in the bottom action row beside "Copy your result". */ .diag-share-end { display: inline-flex; } .diag-share-end .diag-share-icon { width: 34px; height: 34px; border-radius: 999px; border-color: rgba(212,175,55,.4); background: rgba(212,175,55,.08); } .diag-share-end .diag-share-icon:hover { background: rgba(212,175,55,.18); color: #fff; } .diag-share-end .diag-share-icon svg { width: 15px; height: 15px; } @media (max-width: 480px) { .diag-cd-num { font-size: 84px; } .diag-cd-num.go { font-size: 72px; } .diag-card { padding: 26px 18px 20px; } .diag-card-grade { font-size: 38px; top: 14px; right: 14px; } .diag-card-meta { grid-template-columns: repeat(2, 1fr); } .diag-meta-num { font-size: 17px; } .diag-sbtn { font-size: 12px; padding: 8px 11px; } }