:root{--white:#fff;--paper:#fafafa;--ink:#050505;--text:#171717;--muted:#666;--subtle:#8a8a8a;--line:#d9d9d9;--line-dark:#111;--soft:#f1f1f1}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--text);font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;letter-spacing:0}a{color:inherit}.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:18px clamp(18px,4vw,52px);background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.logo-link{display:flex;align-items:center}.logo-link img{width:172px;height:auto;display:block}.section-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.section-nav a{text-decoration:none;color:var(--muted);font-size:12px;text-transform:uppercase}.section-nav a:hover{color:var(--ink)}main{background:var(--white)}.hero{padding:34px clamp(18px,4vw,52px) 52px;border-bottom:1px solid var(--line)}.industry-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:20px}.industry-tab{appearance:none;border:1px solid var(--line);background:var(--white);color:var(--ink);min-height:44px;padding:0 14px;display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:"JetBrains Mono",monospace;font-size:12px}.industry-tab.active{border-color:var(--ink);background:var(--ink);color:var(--white)}.industry-tab:disabled{opacity:1}.industry-tab em{font-style:normal;color:var(--subtle);font-size:10px;text-transform:uppercase}.industry-tab.active em{color:#d8d8d8}.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:44px;align-items:end;margin-top:48px}.kicker,.section-head p,.brief-card span{margin:0 0 18px;color:var(--muted);font-size:12px;text-transform:uppercase}.hero h1{font-family:"Unbounded",sans-serif;font-size:clamp(42px,6.6vw,98px);line-height:.96;letter-spacing:0;margin:0;max-width:1220px;color:var(--ink);font-weight:800}.hero-note{border:1px solid var(--line-dark);padding:22px;background:var(--white)}.hero-note p{font-size:16px;line-height:1.5;margin:0 0 18px;color:#303030}.hero-note a,.source-row a{font-weight:700;text-transform:uppercase}.stats{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line-dark);margin-top:44px}.stats div{padding:18px;border-right:1px solid var(--line)}.stats div:last-child{border-right:0}.stats strong{font-family:"Unbounded",sans-serif;display:block;font-size:clamp(24px,3vw,42px);line-height:1;color:var(--ink)}.stats span{display:block;margin-top:8px;color:var(--muted);font-size:11px;text-transform:uppercase}.brief-band{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}.brief-card{padding:42px clamp(18px,4vw,52px);border-right:1px solid var(--line)}.brief-card:last-child{border-right:0}.brief-card h2,.section-head h2,.data-note h2{font-family:"Unbounded",sans-serif;color:var(--ink);line-height:1.05;margin:0;font-weight:700}.brief-card h2{font-size:clamp(28px,3vw,46px)}.brief-card p{font-size:16px;line-height:1.5;color:#333;max-width:760px}.examples-section,.patterns-section,.formula-section,.production-section,.handoff-section,.data-note{padding:64px clamp(18px,4vw,52px);border-bottom:1px solid var(--line)}.section-head{display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;align-items:start;margin-bottom:30px}.section-head h2{font-size:clamp(30px,4vw,58px);max-width:1050px}.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.filter{appearance:none;border:1px solid var(--line);background:var(--white);font-family:"JetBrains Mono",monospace;font-size:12px;min-height:38px;padding:0 12px;text-transform:uppercase}.filter.active{background:var(--ink);color:var(--white);border-color:var(--ink)}.reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.reference-card{border:1px solid var(--line-dark);background:var(--white);min-width:0}.reference-card[hidden]{display:none}.media-shell{position:relative;min-height:500px;background:var(--soft);border-bottom:1px solid var(--line);overflow:hidden}.thumb{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;text-decoration:none}.thumb:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.32)}.thumb span{position:relative;z-index:1;background:var(--white);color:var(--ink);border:1px solid var(--ink);padding:11px 14px;font-size:12px;text-transform:uppercase}.embed-shell{position:absolute;z-index:0;inset:0;opacity:.001;pointer-events:none;overflow:hidden}.embed-shell blockquote{margin:0!important;max-width:100%!important;min-width:0!important;width:100%!important}.reference-body{padding:18px}.card-line,.metric-row,.source-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.card-line span,.metric-row span,.category-pill{border:1px solid var(--line);padding:5px 7px;color:var(--muted);font-size:11px;text-transform:uppercase}.card-line span:first-child{border-color:var(--ink);color:var(--ink)}.reference-body h3{font-family:"Unbounded",sans-serif;font-size:21px;line-height:1.15;margin:18px 0 10px;color:var(--ink);overflow-wrap:anywhere}.category-pill{display:inline-flex;color:var(--ink);border-color:var(--ink);margin-bottom:14px}.lesson-list{margin:0;display:grid;gap:10px}.lesson-list div{border-top:1px solid var(--line);padding-top:10px}.lesson-list dt{font-size:10px;color:var(--muted);text-transform:uppercase;margin-bottom:4px}.lesson-list dd{margin:0;color:#222;line-height:1.42}.caption{color:#555;line-height:1.45;max-height:86px;overflow:hidden;margin:16px 0}.source-row{justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;margin-top:16px;color:var(--muted);font-size:11px}.pattern-grid,.formula-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line-dark)}.pattern-grid article,.formula-grid article{padding:22px;border-right:1px solid var(--line);min-height:250px}.pattern-grid article:last-child,.formula-grid article:last-child{border-right:0}.pattern-grid span,.production-table span{font-family:"Unbounded",sans-serif;font-size:28px;color:var(--ink)}.pattern-grid h3,.formula-grid h3,.production-table h3,.handoff-grid h3{font-family:"Unbounded",sans-serif;font-size:19px;line-height:1.15;margin:28px 0 12px}.pattern-grid p,.formula-grid p,.production-table p,.handoff-grid li,.data-note p{color:#3b3b3b;line-height:1.5}.production-table{border:1px solid var(--line-dark)}.production-table div{display:grid;grid-template-columns:78px minmax(180px,.45fr) 1fr 1fr;gap:20px;padding:22px;border-bottom:1px solid var(--line);align-items:start}.production-table div:last-child{border-bottom:0}.production-table h3,.production-table p{margin:0}.handoff-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.handoff-grid article{border:1px solid var(--line-dark);padding:28px}.handoff-grid h3{margin-top:0}.handoff-grid ul{margin:0;padding-left:18px;columns:2}.handoff-grid li{margin-bottom:10px}.data-note h2{font-size:32px}.data-note p{max-width:980px}.data-note a{font-weight:700}@media(max-width:1180px){.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(3,1fr)}.stats div{border-bottom:1px solid var(--line)}.pattern-grid,.formula-grid{grid-template-columns:1fr 1fr}.pattern-grid article,.formula-grid article{border-bottom:1px solid var(--line)}.production-table div{grid-template-columns:70px 1fr}}@media(max-width:760px){.site-header{position:static;align-items:flex-start;flex-direction:column}.logo-link img{width:150px}.section-nav{gap:12px}.hero-grid,.section-head,.brief-band,.handoff-grid{grid-template-columns:1fr}.hero-grid{margin-top:32px}.stats,.reference-grid,.pattern-grid,.formula-grid{grid-template-columns:1fr}.stats div{border-right:0}.brief-card{border-right:0;border-bottom:1px solid var(--line)}.media-shell{min-height:500px}.production-table div{grid-template-columns:1fr}.handoff-grid ul{columns:1}.hero h1{font-size:40px}}

/* Compact premium pass */
:root{--page-max:1180px;--page-pad:24px;--page-gutter:max(var(--page-pad),calc((100vw - var(--page-max))/2))}
.site-header{min-height:68px;padding:12px var(--page-gutter);gap:24px}
.logo-link img{width:118px}
.section-nav{gap:16px}
.section-nav a{font-size:11px;letter-spacing:.02em}
.hero{padding:26px var(--page-gutter) 38px}
.industry-tabs{gap:8px;overflow:visible;flex-wrap:wrap;padding-bottom:0;margin-bottom:28px}
.industry-tab{min-height:36px;padding:0 12px;font-size:11px;gap:8px}
.industry-tab em{font-size:9px}
.hero-grid{grid-template-columns:minmax(0,1fr) 360px;gap:34px;margin-top:0;align-items:end}
.kicker,.section-head p,.brief-card span{font-size:10px;margin-bottom:12px;letter-spacing:.02em}
.hero h1{font-size:clamp(38px,4.2vw,64px);line-height:1.01;max-width:760px;letter-spacing:0;font-weight:800}
.hero-note{padding:18px;max-width:360px;justify-self:end}
.hero-note p{font-size:13px;line-height:1.55;margin-bottom:14px}
.hero-note a{font-size:11px}
.stats{margin-top:30px}
.stats div{padding:14px 16px}
.stats strong{font-size:clamp(24px,2.2vw,34px)}
.stats span{font-size:9px;margin-top:6px}
.brief-card{padding:30px var(--page-gutter)}
.brief-card h2{font-size:clamp(24px,2.3vw,34px);max-width:560px}
.brief-card p{font-size:13px;line-height:1.55;max-width:600px}
.examples-section,.patterns-section,.formula-section,.production-section,.handoff-section,.data-note{padding:52px var(--page-gutter)}
.section-head{grid-template-columns:170px minmax(0,1fr);gap:24px;margin-bottom:24px}
.section-head h2{font-size:clamp(24px,2.9vw,42px);max-width:820px;line-height:1.08}
.filter-bar{gap:6px;margin-bottom:18px}
.filter{min-height:32px;font-size:10px;padding:0 10px}
.reference-grid{gap:14px}
.media-shell{min-height:380px}
.reference-body{padding:14px}
.reference-body h3{font-size:17px;margin:14px 0 8px}
.card-line span,.metric-row span,.category-pill{font-size:9px;padding:4px 6px}
.lesson-list{gap:8px}
.lesson-list div{padding-top:8px}
.lesson-list dt{font-size:9px}
.lesson-list dd{font-size:12px;line-height:1.4}
.caption{font-size:11px;max-height:62px;margin:12px 0}
.source-row{font-size:9px;padding-top:10px;margin-top:12px}
.pattern-grid article,.formula-grid article{padding:18px;min-height:200px}
.pattern-grid span,.production-table span{font-size:22px}
.pattern-grid h3,.formula-grid h3,.production-table h3,.handoff-grid h3{font-size:16px;margin:22px 0 10px}
.pattern-grid p,.formula-grid p,.production-table p,.handoff-grid li,.data-note p{font-size:12px;line-height:1.48}
.production-table div{grid-template-columns:58px minmax(150px,.38fr) 1fr 1fr;gap:16px;padding:17px 18px}
.handoff-grid{gap:14px}
.handoff-grid article{padding:22px}
.data-note h2{font-size:24px}
@media(max-width:1180px){:root{--page-pad:20px}.hero-grid{grid-template-columns:1fr}.hero-note{justify-self:start;max-width:620px}.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.media-shell{min-height:360px}}
@media(max-width:760px){:root{--page-pad:16px}.site-header{min-height:0;padding:12px var(--page-gutter);gap:12px}.logo-link img{width:104px}.hero{padding-top:20px}.hero h1{font-size:36px;max-width:100%}.industry-tabs{margin-bottom:22px}.industry-tab{font-size:10px;min-height:34px}.stats{grid-template-columns:repeat(2,1fr)}.media-shell{min-height:420px}.section-head{grid-template-columns:1fr}.reference-grid{grid-template-columns:1fr}.brief-band{grid-template-columns:1fr}.pattern-grid,.formula-grid{grid-template-columns:1fr}.production-table div{grid-template-columns:1fr}.handoff-grid{grid-template-columns:1fr}.handoff-grid ul{columns:1}}


/* Strong compact correction after browser audit */
.site-header{min-height:58px;padding:10px var(--page-gutter)}
.logo-link img{width:96px}
.section-nav{gap:14px}
.section-nav a{font-size:10px}
.hero{padding-top:20px;padding-bottom:34px}
.industry-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:24px}
.industry-tabs::-webkit-scrollbar{display:none}
.industry-tab{min-height:32px;padding:0 10px;font-size:10px;flex:0 0 auto}
.industry-tab em{font-size:8px}
.hero-grid{grid-template-columns:minmax(0,560px) 320px;gap:42px;align-items:end}
.hero h1{font-size:clamp(30px,3.25vw,44px);line-height:1.05;max-width:560px}
.hero-note{max-width:320px;padding:16px}
.hero-note p{font-size:12px;line-height:1.5}
.stats{margin-top:24px}
.stats div{padding:12px 14px}
.stats strong{font-size:clamp(22px,1.8vw,30px)}
@media(max-width:1180px){.hero-grid{grid-template-columns:1fr}.hero h1{max-width:640px}.hero-note{max-width:520px;justify-self:start}}
@media(max-width:760px){.logo-link img{width:92px}.hero h1{font-size:32px}.industry-tabs{margin-bottom:18px}.site-header{padding-top:10px;padding-bottom:10px}.stats{grid-template-columns:repeat(2,1fr)}}


/* Hero alignment correction */
.hero-grid{align-items:start}
.hero-note p{font-size:12px;line-height:1.45}

/* Density and alignment correction */
.brief-band{grid-template-columns:1fr 1fr}
.brief-card{padding-top:28px;padding-bottom:28px}
.brief-card h2{font-size:clamp(22px,2vw,30px);max-width:500px}
.brief-card p{font-size:12px;line-height:1.5;max-width:520px;margin-bottom:0}
.examples-section,.patterns-section,.formula-section,.production-section,.handoff-section{padding-top:42px;padding-bottom:42px}
.section-head{display:block;margin-bottom:18px;max-width:760px}
.section-head p{margin-bottom:8px}
.section-head h2{font-size:clamp(22px,2.2vw,32px);max-width:720px;line-height:1.08}
.filter-bar{margin-bottom:16px}
.reference-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.media-shell{min-height:280px}
.reference-body{padding:12px}
.reference-body h3{font-size:14px;margin:12px 0 8px}
.category-pill{margin-bottom:10px}
.caption{display:none}
.lesson-list{gap:7px}
.lesson-list div{padding-top:7px}
.lesson-list div:nth-child(n+3){display:none}
.lesson-list dd{font-size:11px;line-height:1.35}
.metric-row{margin-top:10px}
.source-row{margin-top:10px}
.pattern-grid,.formula-grid{border:0;gap:10px}
.pattern-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.formula-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.pattern-grid article,.formula-grid article{border:1px solid var(--line);padding:14px;min-height:0}
.pattern-grid article:last-child,.formula-grid article:last-child{border-right:1px solid var(--line)}
.pattern-grid span{font-size:16px}
.pattern-grid h3,.formula-grid h3{font-size:13px;line-height:1.12;margin:14px 0 8px}
.pattern-grid p,.formula-grid p{font-size:10.5px;line-height:1.38;margin:0}
.pattern-grid article p:nth-of-type(2){display:none}
.formula-grid article h3{font-size:12px}
.production-table{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border:0}
.production-table div{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-areas:"num title" "copy copy";gap:8px 12px;border:1px solid var(--line);padding:14px;min-height:0}
.production-table div:last-child{border-bottom:1px solid var(--line)}
.production-table span{grid-area:num;font-size:17px;line-height:1}
.production-table h3{grid-area:title;font-size:14px;line-height:1.1;margin:0}
.production-table p:first-of-type{grid-area:copy;font-size:11px;line-height:1.4;margin:0}
.production-table p:nth-of-type(2){display:none}
.handoff-grid{gap:10px}
.handoff-grid article{padding:18px;border-color:var(--line)}
.handoff-grid h3{font-size:15px;margin-bottom:12px}
.handoff-grid ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;columns:auto;padding-left:16px}
.handoff-grid li{font-size:11px;line-height:1.25;margin:0}
@media(max-width:1180px){.reference-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pattern-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.formula-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.production-table{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.brief-band,.reference-grid,.pattern-grid,.formula-grid,.production-table,.handoff-grid{grid-template-columns:1fr}.media-shell{min-height:360px}.handoff-grid ul{grid-template-columns:1fr}}

section[id]{scroll-margin-top:82px}

/* Make performance proof impossible to miss */
.card-line{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"rank platform" "views views";gap:6px 8px;align-items:start}
.card-line span:first-child{grid-area:rank;width:max-content}
.card-line span:nth-child(2){grid-area:platform;width:max-content}
.card-line span:nth-child(3){grid-area:views;border:0;padding:2px 0 0;color:var(--ink);font-family:"Unbounded",sans-serif;font-size:clamp(24px,2.4vw,36px);font-weight:800;line-height:.95;letter-spacing:0;text-transform:uppercase}
.reference-body h3{margin-top:10px}
.metric-row span{font-size:8.5px}

/* Right-align hero note to the content edge */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(320px,420px)}
.hero-note{justify-self:end;width:100%;max-width:420px}