/* DESIGN-binance.md: dark canvas, yellow actions, flat cards and light footer. */
@media screen{
html[data-design=binance]{color-scheme:dark;--primary:#fcd535;--primary-active:#f0b90b;--primary-disabled:#3a3a1f;--canvas:#0b0e11;--surface:#1e2329;--elevated:#2b3139;--text:#eaecef;--text-secondary:#929aa5;--text-muted:#707a8a;--dark-ink:#181a20;--border:#2b3139;--light:#fff;--light-soft:#fafafa;--light-border:#eaecef;--focus:#3b82f6;--paper:var(--canvas);--ink:var(--text);--muted:var(--text-secondary);--line:var(--border);--orange:var(--primary);--soft:var(--surface);--sans:BinanceNova,Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',LibrarySans,Arial,sans-serif;--numbers:BinancePlex,'IBM Plex Sans',Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--shell:1280px}
html[data-design=binance] body{background:var(--canvas);color:var(--text);font-size:14px;line-height:1.6}
html[data-design=binance] h1,html[data-design=binance] h2,html[data-design=binance] h3{letter-spacing:0;font-weight:600}
html[data-design=binance] h1{letter-spacing:-.5px;font-weight:700}
html[data-design=binance] a:hover{text-decoration:none;color:var(--primary)}
html[data-design=binance] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 2px #3b82f640}
html[data-design=binance] .utility{border-color:var(--border);padding-block:12px;color:var(--text-secondary);font-size:11px}
html[data-design=binance] .masthead{padding-block:20px}
html[data-design=binance] .brand{font-family:var(--sans);font-size:34px;letter-spacing:-1px;font-weight:700;color:var(--primary)}
html[data-design=binance] .brand-dot{color:inherit}
html[data-design=binance] .brand-note{font-size:12px;color:var(--text-secondary)}
html[data-design=binance] .navigation{border-top:0;border-bottom:1px solid var(--border);min-height:64px;align-items:center;font-size:14px;font-weight:500;padding-block:12px}
html[data-design=binance] .navigation #main-nav{gap:32px}
html[data-design=binance] .nav-search{background:var(--primary);color:var(--dark-ink);padding:12px 20px;border-radius:6px;line-height:1.2;font-weight:600}
html[data-design=binance] .nav-search:hover{background:var(--primary-active)}
html[data-design=binance] .eyebrow{font-size:12px;line-height:1.4;font-weight:500;letter-spacing:.02em;color:var(--primary)}
html[data-design=binance] .home-intro{padding-block:80px;gap:80px;align-items:center}
html[data-design=binance] .home-intro h1{font-size:64px;line-height:1.15;font-weight:700;letter-spacing:-1px;color:#fff;margin-top:24px}
html[data-design=binance] .home-intro p{font-size:16px;line-height:1.7;margin-top:24px;color:var(--text-secondary)}
html[data-design=binance] .hero-search{background:var(--surface);border:0;border-radius:12px;padding:32px}
html[data-design=binance] .hero-search label{font-size:20px;font-weight:600;color:#fff}
html[data-design=binance] .search-input{border:1px solid #474d57;border-radius:8px;background:var(--canvas);padding:6px 8px 6px 16px;margin-top:24px;align-items:center}
html[data-design=binance] .search-input input{font-size:14px;padding-block:10px;color:#fff;min-height:40px}
html[data-design=binance] input::placeholder,html[data-design=binance] textarea::placeholder{color:var(--text-secondary);opacity:1}
html[data-design=binance] .search-input button{background:var(--primary);color:var(--dark-ink);border-radius:6px;font-size:24px;min-width:44px;min-height:40px;padding:0}
html[data-design=binance] .hero-search p{font-family:var(--numbers);font-variant-numeric:tabular-nums;font-size:12px;color:var(--text-secondary);line-height:1.7;margin-top:16px}
html[data-design=binance] .home-section{padding-block:48px 80px;border-color:var(--border)}
html[data-design=binance] .section-title{margin-bottom:32px}
html[data-design=binance] .section-title h2{font-size:32px;line-height:1.2;font-weight:600;color:#fff}
html[data-design=binance] .section-title p,html[data-design=binance] .section-title>a{font-size:12px;color:var(--text-secondary);line-height:1.5}
html[data-design=binance] .stage-tabs{margin-top:24px;border-color:var(--border);gap:8px}
html[data-design=binance] .stage-tabs button{font-size:14px;font-weight:500;color:var(--text-secondary);padding:16px 20px;border-bottom-width:2px;min-height:48px}
html[data-design=binance] .stage-tabs button[aria-selected=true]{color:var(--primary);border-color:var(--primary);font-weight:600}
html[data-design=binance] .task-panel{background:var(--surface);border:0;border-radius:12px;padding:32px;margin-top:24px;color:var(--text)}
html[data-design=binance] .task-panel>.eyebrow{color:var(--primary)}
html[data-design=binance] .task-panel>h3{font-size:32px;line-height:1.3;margin-top:16px;font-weight:600;color:#fff}
html[data-design=binance] .task-panel>p{font-size:14px;color:var(--text-secondary);line-height:1.7}
html[data-design=binance] .task-pair{gap:32px;margin-top:32px}
html[data-design=binance] .task-pair>div,html[data-design=binance] .task-panel .task-output{border-color:#3b424d}
html[data-design=binance] .task-pair span{color:var(--text-secondary);font-size:12px}
html[data-design=binance] .task-pair a{font-size:20px;line-height:1.5;font-weight:600;color:var(--text)}
html[data-design=binance] .task-pair a:hover{color:var(--primary)}
html[data-design=binance] .task-panel .task-output{font-size:12px;color:var(--text-secondary);margin-top:24px;padding-top:16px}
html[data-design=binance] .resource-grid{gap:24px}
html[data-design=binance] .resource-card{border:1px solid transparent;background:var(--surface);border-radius:12px;padding:24px;box-shadow:none;min-width:0}
html[data-design=binance] .resource-card:hover{border-color:#474d57}
html[data-design=binance] .card-top{font-size:12px;color:var(--text-secondary);line-height:1.4;align-items:start}
html[data-design=binance] .card-top .eyebrow{font-size:12px}
html[data-design=binance] .card-top time{font-family:var(--numbers);font-variant-numeric:tabular-nums;font-size:12px;white-space:nowrap}
html[data-design=binance] .tags{font-size:11px;margin-block:16px;color:var(--text-secondary);gap:4px}
html[data-design=binance] .tags>span{border:0;border-radius:4px;background:var(--elevated);padding:4px 8px;line-height:1.5}
html[data-design=binance] .resource-card h3{font-size:20px;line-height:1.45;font-weight:600;margin-top:0;color:#fff}
html[data-design=binance] .resource-card:hover h3{color:var(--primary)}
html[data-design=binance] .outcome{font-size:14px;line-height:1.7;color:var(--text-secondary);margin-block:12px 24px}
html[data-design=binance] .card-next{font-size:12px;line-height:1.5;color:var(--primary)}
html[data-design=binance] .briefing-split{gap:24px}
html[data-design=binance] .briefing-split .resource-card{margin-top:16px}
html[data-design=binance] .briefing-split .small{border:0;padding:0;margin-top:16px}
html[data-design=binance] .document-strip{gap:24px}
html[data-design=binance] .document-strip>a{background:var(--surface);border:1px solid transparent;border-radius:12px;padding:24px;gap:16px}
html[data-design=binance] .document-strip>a:hover{border-color:#474d57;color:inherit}
html[data-design=binance] .paper-icon{color:var(--primary);border-radius:4px}
html[data-design=binance] .document-strip strong{font-size:20px;line-height:1.4;font-weight:600;color:#fff}
html[data-design=binance] .document-strip a>span:last-child{color:var(--text-secondary);font-size:12px}
html[data-design=binance] .mission{background:var(--surface);padding:80px 0}
html[data-design=binance] .mission h2{font-size:48px;line-height:1.2;letter-spacing:-.5px;color:var(--primary);margin-block:24px}
html[data-design=binance] .mission p{font-size:14px;color:var(--text-secondary)}
html[data-design=binance] .mission a{font-size:14px;color:var(--primary);border:0;margin-top:16px}
html[data-design=binance] .page-heading{padding-block:48px 32px}
html[data-design=binance] .page-heading h1{font-size:48px;line-height:1.2;color:#fff;margin-top:16px;font-weight:700}
html[data-design=binance] .page-heading p{font-size:14px;color:var(--text-secondary);line-height:1.7;margin-top:16px}
html[data-design=binance] .filters{border-radius:12px;padding:24px;gap:16px;background:var(--surface)}
html[data-design=binance] label{font-size:12px;color:var(--text-secondary)}
html[data-design=binance] :is(input,select,textarea){background:var(--canvas);border:1px solid #474d57;border-radius:6px;color:var(--text);padding:10px 16px;min-height:40px;font-size:14px;line-height:1.5}
html[data-design=binance] :is(input,select,textarea):focus{border-color:var(--focus)}
html[data-design=binance] .button{background:var(--primary);border-color:var(--primary);border-radius:6px;color:var(--dark-ink);padding:12px 24px;min-height:40px;font:600 14px/1.2 var(--sans)}
html[data-design=binance] .button:hover,html[data-design=binance] .button:active{background:var(--primary-active);border-color:var(--primary-active);color:var(--dark-ink)}
html[data-design=binance] button:disabled{background:var(--primary-disabled);border-color:var(--primary-disabled);color:var(--text-muted);opacity:1}
html[data-design=binance] .reset{font-size:12px;color:var(--text-secondary)}
html[data-design=binance] .results-heading{margin-top:32px}
html[data-design=binance] .results-heading p{font-size:14px;font-weight:500}
html[data-design=binance] .results-heading>span{font-size:12px;color:var(--text-secondary)}
html[data-design=binance] .results{margin-top:24px;row-gap:24px}
html[data-design=binance] .briefing-types button{background:var(--surface);border:0;border-radius:6px;padding:12px 20px;color:var(--text-secondary);font-size:14px;min-height:40px}
html[data-design=binance] .briefing-types button[aria-pressed=true]{background:var(--primary);color:var(--dark-ink)}
html[data-design=binance] .empty-state{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:48px}
html[data-design=binance] .empty-state button{border:1px solid #474d57;border-radius:6px;padding:12px 24px;color:#fff;background:var(--elevated)}
html[data-design=binance] .breadcrumbs{color:var(--text-secondary);font-size:12px}
html[data-design=binance] .story-heading h1{font-size:40px;font-weight:600;line-height:1.3;color:#fff;letter-spacing:-.3px}
html[data-design=binance] .dek{font-size:16px;line-height:1.8;color:#b7bdc6}
html[data-design=binance] .story-meta{font-family:var(--numbers);font-variant-numeric:tabular-nums;font-size:12px;color:var(--text-secondary);gap:16px}
html[data-design=binance] .decision-summary{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:32px;margin-bottom:48px}
html[data-design=binance] .summary-title h2{color:#fff;font-size:24px;line-height:1.3}
html[data-design=binance] .summary-title>span{font-size:12px;color:var(--text-secondary)}
html[data-design=binance] dl>div{border-color:#3b424d;font-size:14px;padding-block:12px;line-height:1.6}
html[data-design=binance] dt{font-weight:500;color:var(--text-secondary)}
html[data-design=binance] dd{color:var(--text);line-height:1.7}
html[data-design=binance] .review-date{font-family:var(--numbers);font-size:12px;color:var(--text-secondary)}
html[data-design=binance] .summary-actions{font-size:13px;line-height:1.7;color:var(--primary);gap:12px 24px}
html[data-design=binance] .toc{font-size:12px;color:var(--text-secondary)}
html[data-design=binance] .toc h2{color:var(--text);font-size:16px}
html[data-design=binance] .toc li{padding-block:12px;border-color:var(--border)}
html[data-design=binance] .toc button{background:var(--surface);border-radius:6px;border-color:var(--border);font-size:12px;padding:12px 16px;color:#fff}
html[data-design=binance] .article-body{font-size:16px;line-height:1.9;color:var(--text)}
html[data-design=binance] .article-body h2{color:#fff;font-size:24px;line-height:1.4}
html[data-design=binance] .article-body h3{color:#fff;font-size:20px}
html[data-design=binance] .article-figure img{border-radius:12px}
html[data-design=binance] .article-figure figcaption{font-size:12px;line-height:1.6;color:var(--text-secondary)}
html[data-design=binance] .image-disclosure{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding-inline:16px}
html[data-design=binance] .image-disclosure summary{font-size:14px;padding-block:16px}
html[data-design=binance] .image-disclosure summary span{font-size:12px;color:var(--text-secondary)}
html[data-design=binance] .application{border-top:1px solid var(--border);padding-top:32px}
html[data-design=binance] .source-box{border:0;background:var(--surface);border-radius:12px;padding:24px;font-size:14px;color:var(--text-secondary)}
html[data-design=binance] .source-box h2{font-size:24px}
html[data-design=binance] .next-work{border-top:1px solid var(--border);padding-block:48px 80px}
html[data-design=binance] .next-work h2{font-size:32px;color:#fff;line-height:1.3}
html[data-design=binance] .next-work>p{font-size:14px;color:var(--text-secondary)}
html[data-design=binance] .next-work .resource-card{background:var(--surface)}
html[data-design=binance] .correction-line{font-size:12px;border-color:var(--border);color:var(--text-secondary)}
html[data-design=binance] .procurement-box>article{background:var(--surface);border:0;border-radius:12px;padding:24px}
html[data-design=binance] .procurement-box dl>div{font-size:13px;border-color:#3b424d}
html[data-design=binance] .procurement-box a{font-size:14px}
html[data-design=binance] .template-overview{background:var(--surface);padding:32px;border-radius:12px;gap:48px}
html[data-design=binance] .template-overview h2{font-size:24px;color:#fff;line-height:1.4}
html[data-design=binance] .download-box{border-color:#3b424d;padding-left:32px}
html[data-design=binance] .download-box p{font-size:14px;color:var(--text-secondary)}
html[data-design=binance] .download-box>span:last-child{font-size:12px;color:var(--text-secondary)}
html[data-design=binance] .download-box button{color:var(--text-secondary)}
html[data-design=binance] .table-scroll{border:1px solid #eaecef;border-radius:8px;background:#fff;color:#181a20;color-scheme:light}
html[data-design=binance] table{font-family:var(--numbers),LibrarySans,sans-serif;font-size:13px;color:#181a20}
html[data-design=binance] th{background:#f5f5f5;color:#707a8a;font-weight:500}
html[data-design=binance] td{background:#fff;color:#181a20}
html[data-design=binance] :is(th,td){border-color:#eaecef;padding:16px}
html[data-design=binance] .notice{background:var(--surface);border:0;border-radius:8px;padding:24px;color:var(--text-secondary);font-size:14px}
html[data-design=binance] .small{font-size:12px;color:var(--text-secondary)}
html[data-design=binance] .prose{font-size:16px;line-height:1.8}
html[data-design=binance] .prose h2{font-size:24px;color:#fff}
html[data-design=binance] .contact-form{background:#fff;color:#181a20;border-radius:12px;padding:32px;color-scheme:light;--muted:#707a8a;--line:#eaecef}
html[data-design=binance] .contact-form label{color:#181a20;font-size:14px}
html[data-design=binance] .contact-form :is(input,select,textarea){background:#fff;color:#181a20;border-color:#cdd1d6;border-radius:6px}
html[data-design=binance] .contact-form .small,html[data-design=binance] .contact-form label>span{color:#707a8a}
html[data-design=binance] .contact-form a{color:#765900;text-decoration:underline}
html[data-design=binance] .consent input{padding:0;min-height:18px;accent-color:#f0b90b}
html[data-design=binance] mark{background:#fcd535;color:#181a20}
html[data-design=binance] .search-excerpt{border-color:var(--primary);font-size:12px;color:var(--text-secondary)}
html[data-design=binance] .article-body h2.body-label{font-size:12px;color:var(--primary)}
/* Existing operational diagrams stay light for legible connectors and labels. */
html[data-design=binance] .article-body .work-flow{background:#fafafa;color:#181a20;border-radius:12px;border-color:#eaecef}
html[data-design=binance] .work-flow :is(h2,h3){color:#181a20}
/* A deliberate light footer closes the dark pages, as in the supplied system. */
html[data-design=binance] .footer{background:#fafafa;border:0;color:#181a20;padding-top:64px;color-scheme:light;--line:#eaecef;--muted:#707a8a}
html[data-design=binance] .footer .brand{color:#181a20;font-size:30px}
html[data-design=binance] .footer .brand-dot{color:#c59d00}
html[data-design=binance] .footer h2{font-size:14px;color:#181a20;font-weight:600}
html[data-design=binance] .footer :is(p,a){font-size:13px;color:#707a8a}
html[data-design=binance] .footer a:hover{color:#181a20}
html[data-design=binance] .footer-bottom{margin-top:48px;padding-block:24px;border-color:#eaecef;font-family:var(--numbers);font-size:12px}
/* Vendor examples share the selected shell without changing their data. */
html[data-design=binance] body.partners-page{background:var(--canvas);color:var(--text)}
html[data-design=binance] .partners-page :is(.partner-card,.partner-filter-note,.partner-filters,.partner-profile-intro,.partner-facts,.partner-section){background:var(--surface);border-color:var(--border);color:var(--text);border-radius:12px}
html[data-design=binance] .partners-page :is(.partner-hero-index,.partner-card-detail){background:var(--surface);border-color:var(--border)}
html[data-design=binance] .partners-page :is(.partner-summary,.partner-location,.partner-hero p,.partner-card-detail p,.partner-card-label,.partner-card-bottom,.partner-profile-description){color:var(--text-secondary)}
html[data-design=binance] .partners-page :is(.partner-hero h1,.partner-card h3,.partner-profile h1){color:#fff}
html[data-design=binance] .partners-page :is(.partner-kicker,.partner-symbol,.partner-index,.partner-card-bottom a,.partner-reading b){color:var(--primary)}
html[data-design=binance] .partners-page .partner-sample-note{background:var(--surface);border-color:var(--border);color:var(--text-secondary)}
html[data-design=binance] .partners-page .partner-sample-note strong{color:var(--primary)}
html[data-design=binance] .partners-page .partner-searchbar{background:var(--surface);border-color:var(--border);border-radius:8px}
html[data-design=binance] .partners-page .partner-searchbar input{background:transparent;color:var(--text)}
html[data-design=binance] .partners-page .partner-searchbar button{background:var(--primary);color:#181a20;border-radius:6px}
html[data-design=binance] .partners-page .partner-category{color:var(--text-secondary)}
html[data-design=binance] .partners-page .partner-category:has(input:checked){background:var(--elevated);color:var(--primary)}
html[data-design=binance] .partners-page .sample-badge{background:var(--elevated);color:var(--primary);border-color:var(--border)}
html[data-design=binance] .partners-page .partner-services span{background:var(--elevated);color:var(--text-secondary);border-color:var(--border)}
html[data-design=binance] .partners-page .partner-reading{background:var(--surface);border-color:var(--border);border-radius:12px}
@media(max-width:767px){html[data-design=binance] .brand{font-size:28px}html[data-design=binance] .masthead{padding-block:20px;gap:12px}html[data-design=binance] .navigation{min-height:56px}html[data-design=binance] .nav-search{padding:10px 16px;font-size:12px}html[data-design=binance] .menu-toggle{color:var(--text);min-height:40px;align-items:center}html[data-design=binance] .navigation #main-nav{background:var(--canvas);box-shadow:none;border-color:var(--border)}html[data-design=binance] .navigation #main-nav a{border-color:var(--border);padding:16px 0}html[data-design=binance] .home-intro{padding-block:48px}html[data-design=binance] .home-intro h1{font-size:40px;line-height:1.2;letter-spacing:-.5px;margin-top:16px}html[data-design=binance] .home-intro p{font-size:14px;margin-top:16px}html[data-design=binance] .hero-search{margin-top:32px;padding:24px}html[data-design=binance] .hero-search label{font-size:16px}html[data-design=binance] .search-input{margin-top:16px;padding-left:12px}html[data-design=binance] .hero-search p{font-size:12px}html[data-design=binance] .home-section{padding-block:32px 48px}html[data-design=binance] .section-title{margin-bottom:24px}html[data-design=binance] .section-title h2{font-size:24px;line-height:1.35}html[data-design=binance] .section-title p,html[data-design=binance] .section-title>a{font-size:12px;line-height:1.6}html[data-design=binance] .stage-tabs{gap:0;margin-top:16px}html[data-design=binance] .stage-tabs button{font-size:12px;padding:12px 16px}html[data-design=binance] .task-panel{padding:24px;margin-top:16px}html[data-design=binance] .task-panel>h3{font-size:24px;line-height:1.4}html[data-design=binance] .task-panel>p{font-size:14px}html[data-design=binance] .task-pair{gap:24px;margin-top:24px}html[data-design=binance] .task-pair a{font-size:18px}html[data-design=binance] .task-panel .task-output{font-size:12px}html[data-design=binance] .resource-grid{gap:16px}html[data-design=binance] .resource-card{padding:24px}html[data-design=binance] .resource-card h3{font-size:20px}html[data-design=binance] .card-top{flex-wrap:wrap;gap:8px}html[data-design=binance] .briefing-split{gap:32px}html[data-design=binance] .document-strip{gap:16px}html[data-design=binance] .mission{padding:48px 0}html[data-design=binance] .mission h2{font-size:32px;line-height:1.3}html[data-design=binance] .page-heading{padding-block:32px 24px}html[data-design=binance] .page-heading h1{font-size:32px;line-height:1.3}html[data-design=binance] .filters{padding:20px}html[data-design=binance] .results-heading{align-items:start}html[data-design=binance] .results-heading>span{font-size:11px}html[data-design=binance] .results{margin-top:16px}html[data-design=binance] .story-heading h1{font-size:30px;line-height:1.4}html[data-design=binance] .dek{font-size:16px}html[data-design=binance] .decision-summary{padding:24px;margin-bottom:32px}html[data-design=binance] .summary-title h2{font-size:20px}html[data-design=binance] .summary-title>span{font-size:12px}html[data-design=binance] dl>div{font-size:14px}html[data-design=binance] .review-date{font-size:12px}html[data-design=binance] .toc li{font-size:12px;padding:8px}html[data-design=binance] .toc button{font-size:12px}html[data-design=binance] .article-body h2{font-size:24px}html[data-design=binance] .article-body h3{font-size:20px}html[data-design=binance] .image-disclosure summary{font-size:12px}html[data-design=binance] .image-disclosure summary span{display:block;margin-left:0;font-size:12px;margin-top:4px}html[data-design=binance] .next-work{padding-block:32px 48px}html[data-design=binance] .next-work h2{font-size:24px}html[data-design=binance] .template-overview{padding:24px;gap:24px}html[data-design=binance] .download-box{padding-left:0}html[data-design=binance] .contact-form{padding:24px}html[data-design=binance] .footer{padding-top:48px}html[data-design=binance] .footer-grid{grid-template-columns:1fr;gap:32px}html[data-design=binance] .footer-grid>div:first-child{grid-column:auto}html[data-design=binance] .footer-bottom{margin-top:32px;font-size:11px}html[data-design=binance] .empty-state{padding:32px 20px}}
}
@media screen and (max-width:1000px){html[data-design=binance] .home-intro{gap:40px}html[data-design=binance] .filters{gap:12px}html[data-design=binance] .brand-note{display:none}html[data-design=binance] .resource-grid{gap:20px}}
@media screen{
.resource-image{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#2b3139;margin-bottom:24px}.resource-image img{display:block;width:100%;height:100%;object-fit:cover}.resource-image img[data-image-kind=diagram]{object-fit:contain;background:#fff}.image-label{position:absolute;bottom:8px;left:8px;max-width:calc(100% - 16px);padding:4px 8px;border-radius:4px;background:#0b0e11;color:#eaecef;font-size:10px;line-height:1.5}.story-visual{margin:0 0 40px;max-width:100%}.story-visual .article-figure{margin:0}.story-visual img{display:block;width:100%;max-height:480px;object-fit:cover;aspect-ratio:16/9;border-radius:12px}.story-visual .diagram img{object-fit:contain;background:#fff;max-height:none;aspect-ratio:auto}.story-visual figcaption{font-size:12px;line-height:1.6;color:#929aa5;margin-top:12px}.resource-card.compact .resource-image{aspect-ratio:2/1}
html[data-design=binance] .partners-page :is(.profile-facts,.partner-empty){background:var(--surface);border-color:var(--border);color:var(--text)}
html[data-design=binance] .partners-page :is(.profile-service-list strong,.profile-facts dd,.profile-section>p,.profile-hero-copy>p,.profile-collaboration p,.partner-card-label>span:first-child){color:var(--text-secondary)}
html[data-design=binance] .partners-page .partner-reading>a{background:var(--elevated);color:var(--text)}
html[data-design=binance] .partners-page .profile-deliverables>div{background:var(--surface)}
html[data-design=binance] .partners-page .profile-deliverables strong{color:var(--text)}
html[data-design=binance] .partners-page .partner-category{background:transparent}
html[data-design=binance] .partners-page .partner-category:has(input:checked){background:var(--elevated)}
}
@media screen and (max-width:700px){.story-visual{margin-bottom:24px}.story-visual img{max-height:280px}.resource-image{margin-bottom:20px}.story-visual figcaption{font-size:11px}.resource-card.compact .resource-image{aspect-ratio:16/9}}
@media screen{html[data-design=binance] .search-input input{border:0;background:transparent;border-radius:0;box-shadow:none}html[data-design=binance] .search-input input:focus-visible{outline:0;box-shadow:none}html[data-design=binance] .search-input:focus-within{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f640}}
/* Compact home entry: MD display-md, body-md, 40px controls, 4px spacing scale. */
@media screen{
html[data-design=binance] .home .work-start{display:flex;flex-direction:column;align-items:stretch;gap:0;max-width:720px;padding-block:32px}
html[data-design=binance] .work-start .work-start-copy{max-width:none}
html[data-design=binance] .home .work-start h1{font-size:40px;font-weight:600;line-height:1.15;letter-spacing:-.3px;margin:0;color:#fff}
html[data-design=binance] .home .work-start p{font-size:14px;font-weight:400;line-height:1.5;color:#929aa5;margin:16px 0 24px}
html[data-design=binance] .work-start .hero-search{width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent}
html[data-design=binance] .work-start .search-input{margin:0;border:1px solid #2b3139;border-radius:8px;background:#1e2329;padding:0 4px 0 16px;height:40px;min-height:40px;gap:8px}
html[data-design=binance] .work-start .search-input input{font-size:14px;line-height:1.5;padding:0;height:38px;min-height:0;width:100%;background:transparent;color:#eaecef}
html[data-design=binance] .work-start .search-input input::placeholder{color:#929aa5}
html[data-design=binance] .work-start .search-input button{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#fcd535;height:32px;min-height:32px;width:32px;min-width:32px;border-radius:6px;font-size:20px;padding:0}
html[data-design=binance] .work-start .search-input button:hover{background:#2b3139;color:#f0b90b}
html[data-design=binance] .work-start .search-input:focus-within{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f640}
html[data-design=binance] .work-start .hero-stage-tabs{border:0;display:flex;flex-wrap:wrap;gap:8px;overflow:visible;margin-top:16px}
html[data-design=binance] .work-start .hero-stage-tabs button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #2b3139;border-radius:6px;background:#1e2329;color:#eaecef;font-size:14px;line-height:1;font-weight:500;padding:0 16px;height:40px;min-height:40px;white-space:nowrap}
html[data-design=binance] .work-start .hero-stage-tabs button[aria-selected=true]{border-color:#fcd535;background:#fcd535;color:#181a20;font-weight:600}
html[data-design=binance] .work-start .hero-stage-tabs button:hover{border-color:#707a8a}
html[data-design=binance] .work-start .hero-stage-tabs button[aria-selected=true]:hover{background:#f0b90b;border-color:#f0b90b}
}
@media screen and (max-width:767px){
html[data-design=binance] .home .work-start{padding-block:24px;max-width:100%}
html[data-design=binance] .home .work-start h1{font-size:32px;line-height:1.25;letter-spacing:-.3px}
html[data-design=binance] .home .work-start p{font-size:14px;line-height:1.5;margin:12px 0 16px}
html[data-design=binance] .work-start .search-input{height:44px;min-height:44px;padding-left:12px}
html[data-design=binance] .work-start .search-input input{height:42px;text-overflow:ellipsis}
html[data-design=binance] .work-start .search-input button{height:40px;min-height:40px;width:36px;min-width:36px}
html[data-design=binance] .work-start .hero-stage-tabs{margin-top:12px;gap:8px}
html[data-design=binance] .work-start .hero-stage-tabs button{font-size:14px;padding:0 12px;height:44px;min-height:44px}
}

/* The stage row sets the search width; the latest stories share one image banner. */
@media screen{
html[data-design=binance] .home .work-start{display:grid;grid-template-columns:max-content minmax(250px,1fr);gap:32px;max-width:none;align-items:center}
html[data-design=binance] .work-start-main{min-width:0;width:max-content;max-width:100%}
html[data-design=binance] .work-start-main .hero-stage-tabs{width:max-content;max-width:100%;flex-wrap:nowrap}
html[data-design=binance] .work-start-main .hero-search{width:100%}
html[data-design=binance] .hero-updates{min-width:0;align-self:center}
html[data-design=binance] .hero-updates-heading{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
html[data-design=binance] .hero-updates-heading h2{font-size:14px;line-height:1.4;font-weight:600;color:var(--primary)}
html[data-design=binance] .hero-updates-heading>span{font-size:11px;color:var(--text-secondary)}
html[data-design=binance] .hero-banner{position:relative;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface)}
html[data-design=binance] .hero-story{position:relative;display:block;height:300px;color:#fff}
html[data-design=binance] .hero-story-image{position:absolute;inset:0;background:var(--surface)}
html[data-design=binance] .hero-story-image img{display:block;width:100%;height:100%;object-fit:cover}
html[data-design=binance] .hero-story-image img[data-image-kind=diagram]{object-fit:contain;background:#fff}
html[data-design=binance] .hero-story:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.38) 22%,rgba(0,0,0,.86) 74%,rgba(0,0,0,.94))}
html[data-design=binance] .hero-story-copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 24px 72px;min-width:0}
html[data-design=binance] .hero-story-meta{display:flex;flex-wrap:wrap;gap:5px 12px;font-size:11px;color:#eaecef;line-height:1.5}
html[data-design=binance] .hero-story-meta time{font-variant-numeric:tabular-nums;white-space:nowrap}
html[data-design=binance] .hero-story h3{font-size:22px;line-height:1.5;font-weight:600;margin:10px 0 0;word-break:keep-all;overflow-wrap:normal;letter-spacing:-.03em;color:#fff}
html[data-design=binance] .hero-story:hover h3{text-decoration:underline;text-underline-offset:5px}
html[data-design=binance] .hero-carousel-controls{position:absolute;bottom:14px;right:20px;z-index:2;display:flex;gap:4px}
html[data-design=binance] .hero-carousel-controls button{display:inline-flex;align-items:center;justify-content:center;min-height:32px;min-width:32px;padding:8px;border:0;border-radius:4px;background:transparent}
html[data-design=binance] .hero-carousel-controls button span{display:block;width:12px;height:12px;border:1px solid #ffffffb3;border-radius:2px;background:#ffffff4d}
html[data-design=binance] .hero-carousel-controls button[aria-pressed=true] span{background:var(--primary);border-color:var(--primary)}
html[data-design=binance] .hero-carousel-controls button:hover span{border-color:var(--primary)}
}
@media screen and (min-width:960px) and (max-width:1099px){
html[data-design=binance] .hero-story-copy{padding:20px 20px 70px}
html[data-design=binance] .hero-story h3{font-size:18px}
html[data-design=binance] .hero-carousel-controls{right:16px}
}
@media screen and (max-width:959px){
html[data-design=binance] .home .work-start{grid-template-columns:minmax(0,1fr);gap:28px}
html[data-design=binance] .work-start-main{width:100%}
html[data-design=binance] .work-start-main .hero-stage-tabs{width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
html[data-design=binance] .work-start-main .hero-stage-tabs button{padding-inline:8px}
html[data-design=binance] .hero-story{height:300px}
}
@media screen and (max-width:599px){
html[data-design=binance] .work-start-main .hero-stage-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-design=binance] .hero-story-copy{padding:20px 20px 76px}
html[data-design=binance] .hero-story h3{font-size:20px}
html[data-design=binance] .hero-carousel-controls{right:16px}
html[data-design=binance] .hero-carousel-controls button{min-height:36px;min-width:36px}
}

@media screen and (min-width:768px) and (max-width:1100px){html[data-design=binance] .navigation #main-nav{gap:20px}}