:root{--bg:#08090d;--surface:#11131a;--surface2:#171a23;--border:#292d3a;--text:#f5f5f7;--muted:#a9adba;--yellow:#ffd84d;--purple:#a98cff;--green:#79e6a5;--radius:18px}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 Arial,Helvetica,sans-serif}a{color:inherit}.page-width{width:min(960px,calc(100% - 32px));margin-inline:auto}.site-header{border-bottom:1px solid var(--border);background:rgba(8,9,13,.96)}.header-inner{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{color:var(--yellow);font-weight:800;letter-spacing:.03em;text-decoration:none}.site-header nav{display:flex;gap:20px;flex-wrap:wrap}.site-header nav a{color:var(--muted);text-decoration:none}.site-header nav a:hover,.site-header nav a:focus-visible{color:var(--yellow)}.hero{padding:72px 0 44px;text-align:center}.eyebrow{margin:0 0 8px;color:var(--purple);font-size:.78rem;font-weight:800;letter-spacing:.13em}.hero h1{margin:0;color:var(--yellow);font-size:clamp(2.6rem,8vw,5rem);line-height:.95}.hero-copy{max-width:700px;margin:24px auto 0;color:var(--muted);font-size:1.08rem}.neutral-note{max-width:700px;margin:22px auto 0;padding:14px 16px;border-left:3px solid var(--yellow);background:var(--surface2);color:var(--text);text-align:left}.chart-section{padding-bottom:34px}.section-heading{margin-bottom:20px}.section-heading h2,.content-card h2{margin:0 0 8px;color:var(--yellow);font-size:clamp(1.8rem,5vw,2.5rem)}.section-heading p:not(.eyebrow),.content-card p{color:var(--muted)}.chart-card,.content-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:clamp(18px,4vw,30px)}.mark-picker{display:grid;grid-template-columns:repeat(9,1fr);gap:8px}.mark-button{aspect-ratio:1;border:1px solid var(--border);border-radius:50%;background:var(--surface2);color:var(--text);cursor:pointer;font-weight:800}.mark-button:hover,.mark-button:focus-visible,.mark-button.selected{border-color:var(--yellow);outline:none}.mark-button.selected{background:var(--yellow);color:#111}.selection-summary{min-height:28px;margin:18px 0;color:var(--yellow);font-weight:700;text-align:center}.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px}table{width:100%;border-collapse:collapse}th,td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:left}th{color:var(--purple);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}td:first-child{width:35%;color:var(--yellow);font-weight:800}tr:last-child td{border-bottom:0}tr.selected-row{background:rgba(255,216,77,.1)}tr.selected-row td:first-child{box-shadow:inset 3px 0 var(--yellow)}.blocking-list{display:flex;flex-wrap:wrap;gap:8px}.number-ball{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);font-weight:800}.information-section{padding-bottom:32px}.source-note a,.back-to-strategies{color:var(--yellow);font-weight:800}.back-navigation{padding:12px 0 60px}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:10px;top:10px;background:#fff;color:#000;padding:8px;z-index:3}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.site-footer{border-top:1px solid var(--border);padding:25px 0;color:var(--muted)}.site-footer p{display:inline;margin:0 1.1rem 0 0}@media(max-width:700px){.hero{padding-top:50px}.site-header .header-inner{align-items:flex-start;flex-direction:column;padding-block:14px;gap:8px}.site-header nav{gap:12px;font-size:.9rem}.mark-picker{grid-template-columns:repeat(6,1fr)}.chart-card,.content-card{padding:18px}th,td{padding:10px}.site-footer p{display:block;margin-bottom:6px}}
.selected-result{margin-top:12px;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);text-align:center}.selected-result h3{margin:0 0 4px;color:var(--yellow)}.selected-result p{margin:0 0 12px;color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}.blocking-list{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.number-ball{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);font-weight:800}
.number-ball{width:48px;height:48px;background:var(--yellow);border-color:var(--yellow);color:#111;font-size:1.3rem;line-height:1}
.number-ball{background:radial-gradient(circle at 35% 30%,#fff4a3 0%,#ffd21f 38%,#e5ad00 100%);color:#171717;border:2px solid #e2ad00;box-shadow:inset 0 2px 1px rgba(255,255,255,.65),0 4px 11px rgba(133,93,0,.30)}
.number-ball:hover{box-shadow:inset 0 2px 1px rgba(255,255,255,.72),0 6px 14px rgba(133,93,0,.38)}
.live-reference{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:50px}.reference-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:22px}.card-label{margin:0 0 8px;color:var(--purple);font-size:.78rem;font-weight:800;letter-spacing:.13em}.draw-placeholder,.under-placeholder{color:var(--muted)}.strategy-draws,.strategy-under-scroll{max-width:100%;min-width:0}.strategy-draws{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}.strategy-draw{text-align:center;min-width:0}.strategy-draw-time{display:block;margin-bottom:10px;color:var(--muted);font-size:.95rem;font-weight:700;line-height:1.35}.strategy-draw-balls{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-height:76px}.strategy-draw-ball,.under-number{display:inline-grid;place-items:center;border-radius:50%;background:var(--yellow);color:#111;font-weight:900}.strategy-draw-ball{width:64px;height:64px;font-size:1.35rem}.strategy-draw-ball.pending{border:2px dashed var(--border);background:var(--surface2);color:var(--muted);box-shadow:none}.strategy-draw-mark{display:block;margin-top:10px;color:var(--muted);font-size:.95rem;font-weight:700;line-height:1.3;overflow-wrap:anywhere}.strategy-under-scroll{overflow:visible;margin-top:10px}.strategy-under-table{display:table;width:100%;max-width:100%;min-width:0;table-layout:fixed;border-collapse:collapse;text-align:center}.strategy-under-table th,.strategy-under-table td{padding:10px 7px;border-bottom:1px solid var(--border);white-space:normal;overflow-wrap:anywhere;text-align:center}.strategy-under-table th{color:var(--muted);font-size:.82rem}.strategy-under-table td:first-child{color:var(--muted);font-size:.86rem}.under-number{width:38px;height:38px;font-size:.88rem}.under-na,.context-empty{color:var(--muted)}
@media(max-width:520px){.strategy-draws{grid-template-columns:repeat(2,1fr);gap:16px 10px}.strategy-draw-ball{width:58px;height:58px;font-size:1.2rem}.strategy-draw-mark{font-size:.9rem}.strategy-under-table th,.strategy-under-table td{padding:8px 2px;font-size:.72rem}.strategy-under-table th{font-size:.7rem}.strategy-under-table td:first-child{font-size:.72rem}.under-number{width:30px;height:30px;font-size:.76rem}}

/* Bank Chart: reproduce the Diary's combined circle and left-pointing triangle. */
.bank-chart{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:24px 16px;min-width:790px;padding:18px 8px 28px}
.bank-unit{position:relative;height:142px}
.bank-circle,.bank-triangle{position:absolute;top:9px;height:124px;border:0;cursor:pointer;font:inherit}
.bank-circle{left:0;width:126px;border-radius:50%;background:radial-gradient(circle at 38% 30%,#fff4a3 0%,#ffd21f 45%,#dca400 100%);box-shadow:inset 0 3px 3px rgba(255,255,255,.62),0 5px 12px rgba(133,93,0,.28);z-index:1}
.bank-triangle{right:0;width:112px;clip-path:polygon(100% 0,100% 100%,0 50%);background:linear-gradient(135deg,#c49cff,#7d5ac7 58%,#58389b);color:#fff;z-index:2}
.bank-circle:hover,.bank-circle:focus-visible,.bank-triangle:hover,.bank-triangle:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.bank-circle.selected,.bank-triangle.selected{outline:4px solid var(--yellow);outline-offset:3px}
.bank-main-mark{position:absolute;top:50%;left:50%;z-index:3;transform:translate(-50%,-50%);color:var(--green);font-size:2rem;font-weight:900;line-height:1;text-shadow:0 1px 1px rgba(0,0,0,.4)}
.bank-blocker{position:absolute;z-index:4;color:#541d68;font-size:1.25rem;font-weight:900;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.18)}
.bank-blocker.active{color:#baf6d0;text-shadow:0 0 7px rgba(121,230,165,.9)}
.bank-circle .bank-blocker:first-child{top:21px;left:50%;transform:translateX(-50%)}
.bank-circle .bank-blocker:last-child{bottom:21px;left:50%;transform:translateX(-50%)}
.bank-triangle .bank-blocker:first-child{top:21px;right:20px}
.bank-triangle .bank-blocker:last-child{bottom:21px;right:20px}
.bank-triangle .bank-main-mark{left:59%}
.bank-circle.selected .bank-main-mark,.bank-triangle.selected .bank-main-mark{color:#fff}
@media(max-width:700px){.bank-chart{grid-template-columns:repeat(2,minmax(190px,1fr));gap:20px 12px;min-width:410px;padding-inline:4px}.bank-unit{height:132px}.bank-circle,.bank-triangle{top:7px;height:116px}.bank-circle{width:116px}.bank-triangle{width:104px}.bank-main-mark{font-size:1.75rem}.bank-blocker{font-size:1.1rem}.bank-circle .bank-blocker:first-child,.bank-triangle .bank-blocker:first-child{top:19px}.bank-circle .bank-blocker:last-child,.bank-triangle .bank-blocker:last-child{bottom:19px}}

/* Visual polish: larger Diary-proportioned units with room around each mark. */
.bank-chart{grid-template-columns:repeat(4,minmax(215px,1fr));gap:34px 22px;min-width:950px;padding:24px 10px 36px}
.bank-unit{height:190px}
.bank-circle,.bank-triangle{top:10px;height:170px;padding:0}
.bank-circle{width:174px}
.bank-triangle{width:154px}
.bank-main-mark{font-size:2.65rem}
.bank-blocker{font-size:1.45rem}
.bank-circle .bank-blocker:first-child,.bank-triangle .bank-blocker:first-child{top:29px}
.bank-circle .bank-blocker:last-child,.bank-triangle .bank-blocker:last-child{bottom:29px}
.bank-triangle .bank-blocker:first-child,.bank-triangle .bank-blocker:last-child{right:27px}
.bank-triangle .bank-main-mark{left:60%}
@media(max-width:700px){.bank-chart{grid-template-columns:repeat(2,215px);gap:28px 18px;min-width:448px;padding:20px 6px 30px}.bank-unit{height:180px}.bank-circle,.bank-triangle{top:8px;height:160px}.bank-circle{width:164px}.bank-triangle{width:146px}.bank-main-mark{font-size:2.45rem}.bank-blocker{font-size:1.3rem}.bank-circle .bank-blocker:first-child,.bank-triangle .bank-blocker:first-child{top:27px}.bank-circle .bank-blocker:last-child,.bank-triangle .bank-blocker:last-child{bottom:27px}.bank-triangle .bank-blocker:first-child,.bank-triangle .bank-blocker:last-child{right:25px}}
@media(max-width:500px){.bank-chart{grid-template-columns:215px;min-width:215px;justify-content:center}}

/* Readability pass: preserve the Diary geometry with restrained outlined shapes. */
.bank-circle,.bank-triangle{background:transparent;box-shadow:none}
.bank-circle{border:2px solid rgba(255,216,77,.78)}
.bank-triangle{border:0;color:var(--text)}
.bank-triangle::before,.bank-triangle::after{position:absolute;inset:0;content:"";pointer-events:none;clip-path:polygon(100% 0,100% 100%,0 50%)}
.bank-triangle::before{background:rgba(169,140,255,.9);z-index:0}
.bank-triangle::after{inset:4px;background:var(--surface);clip-path:polygon(100% 4%,100% 96%,9% 50%);z-index:1}
.bank-main-mark{font-size:2.25rem;z-index:5}
.bank-blocker{font-size:1.18rem;z-index:6;color:var(--purple);text-shadow:none;white-space:nowrap}
.bank-blocker.active{color:var(--green);text-shadow:0 0 7px rgba(121,230,165,.55)}
.bank-circle .bank-blocker:first-child{top:25px;left:50%;transform:translateX(-50%)}
.bank-circle .bank-blocker:last-child{bottom:25px;left:50%;transform:translateX(-50%)}
.bank-triangle .bank-blocker:first-child{top:25px;right:23px}
.bank-triangle .bank-blocker:last-child{bottom:25px;right:23px}
.bank-triangle .bank-main-mark{left:52%;z-index:7}
.bank-circle.selected,.bank-triangle.selected{outline:3px solid var(--yellow);outline-offset:4px;background:transparent}
.bank-triangle.selected::before{background:var(--yellow)}
.bank-triangle.selected::after{background:var(--surface)}
@media(max-width:700px){.bank-main-mark{font-size:2.12rem}.bank-blocker{font-size:1.1rem}.bank-circle .bank-blocker:first-child,.bank-triangle .bank-blocker:first-child{top:24px}.bank-circle .bank-blocker:last-child,.bank-triangle .bank-blocker:last-child{bottom:24px}.bank-triangle .bank-blocker:first-child,.bank-triangle .bank-blocker:last-child{right:22px}}

/* Geometry safety: keep every circle/triangle pair inside its own grid cell. */
.bank-chart{column-gap:28px;min-width:0}
.bank-unit{overflow:hidden}
.bank-triangle{width:140px;right:0}
.bank-circle .bank-main-mark{left:39%}
.bank-triangle .bank-main-mark{left:62%}
.bank-triangle .bank-blocker:first-child,.bank-triangle .bank-blocker:last-child{right:21px}
.bank-circle:hover,.bank-circle:focus-visible,.bank-triangle:hover,.bank-triangle:focus-visible{outline:none}
.bank-circle:hover,.bank-circle:focus-visible{box-shadow:inset 0 0 0 3px var(--yellow)}
.bank-triangle:hover::before,.bank-triangle:focus-visible::before{background:var(--yellow)}
.bank-circle.selected,.bank-triangle.selected{outline:none;outline-offset:0}
.bank-circle.selected{box-shadow:inset 0 0 0 3px var(--yellow)}
@media(max-width:1000px){.bank-chart{grid-template-columns:repeat(3,minmax(215px,1fr));min-width:0}.bank-triangle{width:140px}}
@media(max-width:700px){.bank-chart{grid-template-columns:repeat(2,215px);min-width:0;column-gap:24px}.bank-triangle{width:132px}.bank-circle .bank-main-mark{left:39%}.bank-triangle .bank-main-mark{left:62%}.bank-triangle .bank-blocker:first-child,.bank-triangle .bank-blocker:last-child{right:20px}}
@media(max-width:500px){.bank-chart{grid-template-columns:215px;min-width:0;column-gap:0}.bank-triangle{width:132px}}

/* Keep the second blocker in its lower slot; the Main Mark is the final span. */
.bank-circle .bank-blocker:nth-of-type(2){top:auto;bottom:25px;left:50%;transform:translateX(-50%)}
.bank-triangle .bank-blocker:nth-of-type(2){top:auto;bottom:25px;right:21px}
.bank-circle .bank-main-mark{left:42%}
.bank-triangle .bank-main-mark{left:55%}
@media(max-width:700px){.bank-circle .bank-blocker:nth-of-type(2){bottom:24px}.bank-triangle .bank-blocker:nth-of-type(2){bottom:24px;right:20px}.bank-circle .bank-main-mark{left:42%}.bank-triangle .bank-main-mark{left:55%}}

/* Keep the circle behind the triangle while placing its Main Mark safely left. */
.bank-circle{z-index:1}
.bank-circle .bank-main-mark{left:30%}
.bank-triangle .bank-blocker:first-child{top:38px;right:24px}
.bank-triangle .bank-blocker:nth-of-type(2){bottom:38px;right:24px}
@media(max-width:700px){.bank-circle .bank-main-mark{left:30%}.bank-triangle .bank-blocker:first-child{top:36px;right:22px}.bank-triangle .bank-blocker:nth-of-type(2){bottom:36px;right:22px}}

/* Selected Blocking Marks use the gold accent; green remains reserved for Main Marks. */
.bank-blocker.active{color:var(--yellow);text-shadow:0 0 7px rgba(255,216,77,.65)}

/* Main Marks use the standard dimensional Play Whe ball treatment. */
.bank-main-mark{display:grid;place-items:center;width:52px;height:52px;border:2px solid #e2ad00;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4a3 0%,#ffd21f 38%,#e5ad00 100%);color:#171717;font-size:1.65rem;text-shadow:none;box-shadow:inset 0 2px 1px rgba(255,255,255,.65),0 4px 11px rgba(133,93,0,.3)}
.bank-circle.selected .bank-main-mark,.bank-triangle.selected .bank-main-mark{color:#171717}
.main-result-ball{margin:4px auto 16px}

/* Chart Main Marks are plain green numbers; only the result display uses a ball. */
.bank-main-mark{display:block;width:auto;height:auto;border:0;border-radius:0;background:transparent;color:var(--green);font-size:2.25rem;box-shadow:none}
.bank-circle.selected .bank-main-mark,.bank-triangle.selected .bank-main-mark{color:var(--green)}
@media(max-width:700px){.bank-main-mark{font-size:2.12rem}}

/* The detailed result panel below the chart is the single selection summary. */
.selection-summary{display:none}

/* Secondary associations are exploratory and visually separate from primary blockers. */
.bank-circle.secondary-related{border-color:rgba(169,140,255,.9)}
.bank-triangle.secondary-related::before{background:rgba(169,140,255,.95)}
.bank-blocker.secondary-active{color:#d7c1ff;text-shadow:0 0 6px rgba(169,140,255,.55)}
.secondary-result-block{margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.secondary-result-block p{margin:0 0 12px;color:var(--purple);font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.secondary-list{margin-bottom:18px}
.secondary-ball{background:radial-gradient(circle at 35% 30%,#eadfff 0%,#b996ff 42%,#7654bd 100%);border-color:#9d7be7}
.bank-explorer-actions{display:grid;gap:10px;margin-top:22px}
.bank-explorer-link{display:flex;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--border);border-radius:9px;background:var(--surface);color:var(--text);font-size:.9rem;font-weight:800;text-decoration:none}
.bank-explorer-link:hover,.bank-explorer-link:focus-visible{border-color:var(--yellow);color:var(--yellow);outline:none}
.combined-explorer-link{border-color:var(--yellow);color:var(--yellow)}