/* ── READING THE TAPE + THE TAPE READER ────────────────────────────────────── Rebuilt 2026-08-14. The original wyckoff-method-2bd6efa532.css was lost when TCW/css was regenerated from the pre-tape page on 2026-08-11 22:20. FRAME GEOMETRY IS LOCKED (see _build/fix_ledger.py, reading-the-tape-section- SHIPPED). .trd-frame, .trd-chartcol, .trd-canvaswrap, .trd-top, .trd-legend and .trd-hud all carry FIXED heights at each of the three breakpoints, so the frame and the canvas are exactly one size across all 40 states. The HUD scrolls internally rather than growing the frame. Do not replace any of these heights with auto/min-content — that reintroduces the resize the owner rejected on review. ────────────────────────────────────────────────────────────────────────── */ /* ── the one-sentence callout ─────────────────────────────────────────────── */ .tape-callout{ max-width:820px;margin:clamp(26px,3.4vw,42px) auto 0; padding:clamp(22px,2.8vw,32px); background:linear-gradient(180deg,rgba(13,13,24,0.94) 0%,rgba(4,4,12,0.94) 100%); border:1px solid rgba(230,179,77,0.28); box-shadow:0 0 0 1px rgba(0,0,0,0.6),0 24px 60px -30px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,223,158,0.10); } .tape-callout-k{ font-family:var(--mono);font-size:12px;letter-spacing:0.32em;text-transform:uppercase; color:var(--btc2);margin-bottom:12px; filter:drop-shadow(0 0 10px rgba(230,179,77,0.45)) drop-shadow(0 0 22px rgba(230,179,77,0.20)); } .tape-callout-p{margin:0;color:var(--silver);line-height:1.75;font-size:clamp(15px,1.5vw,17px);} .tape-callout-p strong{color:var(--near-white);} .tape-callout-p em{color:var(--btc2);font-style:italic;} /* ── the four-question criteria block ─────────────────────────────────────── */ .tape-crit{ max-width:900px;margin:0 auto; border:1px solid var(--border); background:linear-gradient(180deg,rgba(10,10,20,0.92) 0%,rgba(2,2,6,0.94) 100%); } .tape-crit-row,.tape-crit-verdict{ display:flex;gap:clamp(16px,2vw,26px);align-items:flex-start; padding:clamp(20px,2.4vw,28px) clamp(18px,2.4vw,30px); border-bottom:1px solid rgba(255,255,255,0.07); } .tape-crit-row:last-of-type{border-bottom:1px solid rgba(230,179,77,0.22);} .tape-crit-verdict{ border-bottom:none; background:linear-gradient(180deg,rgba(230,179,77,0.055) 0%,rgba(230,179,77,0.015) 100%); } .tape-crit-n{ flex:0 0 auto;min-width:42px; font-family:var(--condensed);font-weight:900;font-size:clamp(20px,2.2vw,26px); line-height:1.05;letter-spacing:0.04em;color:var(--btc2); filter:drop-shadow(0 0 10px rgba(230,179,77,0.55)) drop-shadow(0 0 24px rgba(230,179,77,0.22)); } .tape-crit-n-v{color:var(--green); filter:drop-shadow(0 0 10px rgba(77,255,176,0.60)) drop-shadow(0 0 24px rgba(77,255,176,0.25));} .tape-crit-q{ font-family:var(--condensed);font-weight:700;font-size:clamp(18px,2vw,23px); letter-spacing:0.02em;color:var(--white);margin-bottom:8px;line-height:1.2; } .tape-crit-a{margin:0;color:var(--muted);line-height:1.7;font-size:clamp(14px,1.4vw,16px);} .tape-crit-a strong{color:var(--near-white);} .tape-crit-a em{color:var(--btc2);font-style:italic;} /* ── THE TAPE READER ──────────────────────────────────────────────────────── */ .trd-section{position:relative;} .trd-start,.trd-done{ max-width:820px;margin:0 auto;text-align:center; padding:clamp(30px,4vw,52px) clamp(22px,3vw,42px); background:linear-gradient(180deg,rgba(10,10,20,0.94) 0%,rgba(2,2,6,0.96) 100%); border:1px solid rgba(230,179,77,0.24); box-shadow:0 0 0 1px rgba(0,0,0,0.6),0 30px 80px -40px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,223,158,0.09); } .trd-badge{ display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:0.30em; text-transform:uppercase;color:var(--btc2); padding:7px 16px;border:1px solid rgba(230,179,77,0.34);margin-bottom:22px; filter:drop-shadow(0 0 10px rgba(230,179,77,0.35)); } .trd-h{ font-family:var(--condensed);font-weight:900;text-transform:uppercase; font-size:clamp(26px,3.4vw,42px);line-height:1.06;letter-spacing:0.01em; color:var(--white);margin:0 0 14px; } .trd-p{color:var(--muted);line-height:1.75;font-size:clamp(15px,1.5vw,17px);margin:0 auto 26px;max-width:660px;} .trd-p strong{color:var(--near-white);} .trd-p em{color:var(--btc2);font-style:italic;} .trd-btns{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;} .trd-go{font-size:14px;} .trd-snd{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; font-family:var(--mono);font-size:11px;letter-spacing:0.20em;text-transform:uppercase; color:var(--dim);background:transparent;border:1px solid var(--border); padding:11px 16px;transition:color .25s,border-color .25s; } .trd-snd:hover{color:var(--btc2);border-color:rgba(230,179,77,0.40);} .trd-snd[aria-pressed="false"]{opacity:.55;} .trd-snd-t{white-space:nowrap;} /* progress */ .trd-prog{max-width:1180px;margin:0 auto 16px;display:flex;flex-direction:column;gap:10px;} .trd-dots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;} .trd-dot{width:26px;height:3px;background:rgba(255,255,255,0.14);display:block;transition:background .3s,box-shadow .3s;} .trd-dot.ok{background:var(--green);box-shadow:0 0 9px rgba(77,255,176,0.75),0 0 20px rgba(77,255,176,0.35);} .trd-dot.no{background:#f87171;box-shadow:0 0 9px rgba(248,113,113,0.70),0 0 20px rgba(248,113,113,0.30);} .trd-dot.now{background:var(--btc2);box-shadow:0 0 9px rgba(255,223,158,0.85),0 0 20px rgba(230,179,77,0.40);} .trd-meta{ display:flex;justify-content:space-between;align-items:center; font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--dim); } /* ── LOCKED FRAME — desktop ≥1100px ───────────────────────────────────────── */ .trd-frame{ max-width:1180px;margin:0 auto; display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:0; height:560px; /* LOCKED */ border:1px solid rgba(230,179,77,0.22); background:linear-gradient(180deg,rgba(8,8,16,0.96) 0%,rgba(2,2,6,0.97) 100%); box-shadow:0 0 0 1px rgba(0,0,0,0.6),0 34px 90px -46px rgba(0,0,0,0.95); overflow:hidden; } .trd-chartcol{ display:flex;flex-direction:column;height:560px; /* LOCKED — matches .trd-frame */ border-right:1px solid rgba(255,255,255,0.08);min-width:0; } .trd-top{ flex:0 0 38px;height:38px; /* LOCKED */ display:flex;align-items:center;gap:12px; padding:0 14px;border-bottom:1px solid rgba(255,255,255,0.07); font-family:var(--mono);font-size:11px;letter-spacing:0.20em;text-transform:uppercase; } .trd-sym{color:var(--near-white);} .trd-tf{color:var(--dim);} .trd-hold{ margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:22px;padding:0 10px; color:#04040c;background:var(--btc2);font-weight:700;letter-spacing:0.18em; box-shadow:0 0 14px rgba(255,223,158,0.55),0 0 30px rgba(230,179,77,0.28); } .trd-hold[hidden]{display:none;} .trd-hold-dot{width:6px;height:6px;border-radius:50%;background:#04040c;animation:trdPulse 1.15s ease-in-out infinite;} @keyframes trdPulse{0%,100%{opacity:1;}50%{opacity:.25;}} .trd-canvaswrap{flex:1 1 auto;min-height:0;position:relative;} .trd-canvaswrap canvas{display:block;width:100%;height:100%;} .trd-legend{ flex:0 0 32px;height:32px; /* LOCKED */ display:flex;align-items:center;gap:18px;padding:0 14px; border-top:1px solid rgba(255,255,255,0.07); font-family:var(--mono);font-size:10px;letter-spacing:0.16em;text-transform:uppercase;color:var(--dim); } .trd-legend span{display:inline-flex;align-items:center;gap:7px;} .trd-sw{width:10px;height:10px;display:inline-block;} .trd-sw-up{background:#f2ede6;box-shadow:0 0 8px rgba(242,237,230,0.60);} .trd-sw-dn{background:#7a7874;box-shadow:0 0 8px rgba(122,120,116,0.55);} .trd-sw-v{background:rgba(230,179,77,0.85);box-shadow:0 0 8px rgba(230,179,77,0.55);} /* ── HUD — fixed height, scrolls internally so the frame never resizes ────── */ .trd-hud{ height:560px; /* LOCKED */ overflow-y:auto;overscroll-behavior:contain; padding:clamp(16px,1.8vw,24px); display:flex;flex-direction:column;gap:14px;min-width:0; background:linear-gradient(180deg,rgba(4,4,12,0.55) 0%,rgba(0,0,0,0.55) 100%); scrollbar-width:thin;scrollbar-color:rgba(230,179,77,0.35) transparent; } .trd-hud::-webkit-scrollbar{width:6px;} .trd-hud::-webkit-scrollbar-thumb{background:rgba(230,179,77,0.35);} .trd-eye{ font-family:var(--mono);font-size:10.5px;letter-spacing:0.30em;text-transform:uppercase; color:var(--btc2);flex:0 0 auto; filter:drop-shadow(0 0 9px rgba(230,179,77,0.42)); } .trd-wait{display:flex;align-items:center;gap:11px;color:var(--dim);font-size:14px;line-height:1.6;margin:0;} .trd-spin{ width:13px;height:13px;flex:0 0 auto;border:2px solid rgba(230,179,77,0.28); border-top-color:var(--btc2);border-radius:50%;animation:trdSpin .8s linear infinite; } @keyframes trdSpin{to{transform:rotate(360deg);}} .trd-skip,.trd-next,.trd-again{ align-self:flex-start;cursor:pointer; font-family:var(--mono);font-size:11px;letter-spacing:0.22em;text-transform:uppercase; color:var(--btc2);background:transparent;border:1px solid rgba(230,179,77,0.34); padding:11px 18px;transition:background .25s,color .25s,box-shadow .25s; } .trd-skip:hover,.trd-next:hover,.trd-again:hover{ background:rgba(230,179,77,0.10);color:var(--btc2); box-shadow:0 0 18px -4px rgba(230,179,77,0.55); } .trd-again{align-self:center;} .trd-q{ font-family:var(--condensed);font-weight:700;font-size:clamp(19px,2vw,24px); line-height:1.22;letter-spacing:0.01em;color:var(--white);margin:0; } .trd-opts{display:flex;flex-direction:column;gap:9px;} .trd-opt{ display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;cursor:pointer; padding:13px 15px;background:rgba(255,255,255,0.022); border:1px solid var(--border);color:var(--silver); transition:border-color .22s,background .22s,box-shadow .22s; } .trd-opt:hover{border-color:rgba(230,179,77,0.45);background:rgba(230,179,77,0.055); box-shadow:0 0 22px -8px rgba(230,179,77,0.6);} .trd-opt:disabled{cursor:default;opacity:.5;} .trd-k{ flex:0 0 auto;font-family:var(--mono);font-size:11px;letter-spacing:0.14em; color:var(--btc2);padding-top:2px; } .trd-t{font-size:14.5px;line-height:1.55;} .trd-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:0.20em;text-transform:uppercase;color:var(--dim);margin:2px 0 0;} .trd-verd{ display:flex;align-items:center;gap:10px; font-family:var(--condensed);font-weight:900;text-transform:uppercase; font-size:clamp(20px,2.2vw,26px);letter-spacing:0.03em; } .trd-verd span{font-size:0.86em;} .trd-verd.ok{color:var(--green); filter:drop-shadow(0 0 12px rgba(77,255,176,0.65)) drop-shadow(0 0 28px rgba(77,255,176,0.28));} .trd-verd.no{color:#ff8888; filter:drop-shadow(0 0 12px rgba(248,113,113,0.60)) drop-shadow(0 0 28px rgba(248,113,113,0.25));} .trd-why{ padding:14px 16px;border-left:2px solid rgba(230,179,77,0.55); background:rgba(255,255,255,0.022); } .trd-why p{margin:6px 0 0;color:var(--muted);font-size:14.5px;line-height:1.7;} .trd-why strong{color:var(--near-white);} .trd-why em{color:var(--btc2);font-style:italic;} .trd-why-r{border-left-color:rgba(77,255,176,0.6);} /* ── DONE ─────────────────────────────────────────────────────────────────── */ .trd-final{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:14px;} .trd-final #trdFinal{ font-family:var(--condensed);font-weight:900;font-size:clamp(64px,9vw,110px);line-height:1; background:linear-gradient(135deg,var(--btc2) 0%,var(--btc) 45%,#9e9a96 80%,#f2ede6 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; filter:drop-shadow(0 0 18px rgba(230,179,77,0.45)) drop-shadow(0 0 44px rgba(230,179,77,0.22)); } .trd-of{font-family:var(--condensed);font-weight:200;font-size:clamp(24px,3vw,36px);color:var(--dim);} .trd-review{display:flex;flex-direction:column;gap:7px;margin:24px 0 28px;text-align:left;} .trd-rv{ display:flex;gap:11px;align-items:flex-start;padding:11px 14px; border-left:2px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.022); color:var(--muted);font-size:14px;line-height:1.6; } .trd-rv.ok{border-left-color:var(--green);} .trd-rv.no{border-left-color:#f87171;} .trd-note{ margin:26px auto 0;max-width:620px; font-size:12.5px;line-height:1.65;color:var(--dim); } /* ── LOCKED FRAME — tablet 700–1099px ─────────────────────────────────────── */ @media (max-width:1099px){ /* STACKED LAYOUT — the canvas is locked by .trd-chartcol's own fixed height, so the HUD does NOT need to be a fixed-height scroll container and MUST NOT be one. 2026-08-14: it was, at 580/690px with overscroll-behavior:contain. On a Pixel 6 the 980px frame is taller than the viewport, so the Next button sat off-screen — and because the HUD swallowed the touch scroll and refused to chain it to the page, there was no way to reach it. Reported as "the screen partially locks". height:auto also makes this immune to Android text-scaling and to any device narrower than the widths we measured. Do not reintroduce a fixed height here. */ .trd-frame{grid-template-columns:1fr;height:auto;} .trd-chartcol{height:400px;border-right:none;border-bottom:1px solid rgba(255,255,255,0.08);} .trd-hud{height:auto;overflow:visible;overscroll-behavior:auto;} } /* ── LOCKED FRAME — mobile <700px ─────────────────────────────────────────── */ @media (max-width:699px){ .trd-frame{height:auto;} /* see the stacked-layout note above */ .trd-chartcol{height:300px;} /* locks the canvas — this one stays fixed */ .trd-hud{height:auto;overflow:visible;overscroll-behavior:auto;padding-bottom:24px;} .trd-top{flex:0 0 34px;height:34px;} .trd-legend{flex:0 0 30px;height:30px;gap:12px;font-size:9px;letter-spacing:0.10em;} .trd-btns{flex-direction:column;align-items:stretch;} .trd-snd{justify-content:center;} .tape-crit-row,.tape-crit-verdict{flex-direction:column;gap:10px;} .tape-crit-n{min-width:0;} } @media (prefers-reduced-motion:reduce){ .trd-spin,.trd-hold-dot{animation:none;} .trd-opt,.trd-skip,.trd-next,.trd-again,.trd-dot{transition:none;} } /* play state container — JS toggles display between none and block */ .trd-play{display:block;} /* ── IN THIS GUIDE — jump nav ─────────────────────────────────────────────── */ /* the site sets a bare nav{position:fixed;top:0;z-index:1000} for the header — this jump nav is a