@charset "UTF-8";
:root{color-scheme:light;--ink:#192b3b;--muted:#536575;--paper:#fffef9;--accent:#007580;--tint:#e5f3f0;--line:#ced9dc;--warm:#f7efcb;--night:#122238}
html[data-app=studio]{--accent:#5c47af;--tint:#eeebfa;--warm:#fae9d1}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#dce4e7;color:var(--ink);font:14px/1.5 "Segoe UI",Arial,sans-serif}a{color:var(--accent);text-underline-offset:3px}button,select{font:inherit}a:hover{text-decoration-thickness:2px}button:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.skip{position:absolute;top:-100px;left:20px;z-index:20;background:var(--paper);padding:12px}.skip:focus{top:10px}.toolbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#122238f5;color:white;padding:16px max(22px,calc((100vw - 1060px)/2));backdrop-filter:blur(12px);box-shadow:0 2px 18px #12223820}.toolbar a{color:#e5f3fc;text-decoration:none;font-size:13px}.toolbar .brand{font-weight:750;font-size:16px;white-space:nowrap}.brand span{color:#b8d9e3}.toolbar nav{display:flex;gap:20px}.toolbar button{border:1px solid #72879c;color:white;background:#273e54;border-radius:5px;padding:8px 12px;font-weight:600;cursor:pointer;white-space:nowrap}main{padding:30px 18px 12px}.paper{width:794px;min-height:1123px;margin:0 auto 28px;background:var(--paper);padding:42px 46px 32px;box-shadow:0 16px 48px #23384b18;display:flex;flex-direction:column;border-top:5px solid var(--accent);position:relative}.running{display:flex;justify-content:space-between;gap:12px;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--muted);padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:28px}.running b{margin:0 7px;color:var(--accent)}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:750;color:var(--accent);margin:0 0 11px}h1,h2,h3,p{margin-top:0}h1{font-size:68px;letter-spacing:-.055em;line-height:1.02;margin:10px 0 18px;font-weight:800}h1 em{font-weight:450;font-family:Georgia,serif;color:var(--accent)}h2{font-size:34px;line-height:1.12;letter-spacing:-.035em;margin-bottom:12px}h3{font-size:15px;line-height:1.35;margin:0 0 8px}p{margin-bottom:14px}.lead,.intro{color:var(--muted);font-size:15px;line-height:1.6}.section-head{margin-bottom:14px}.cover .running{margin-bottom:30px}.cover-line{font-size:21px;line-height:1.4;max-width:560px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}.cover .intro{max-width:600px}.cover-art{width:100%;height:auto;border-radius:12px;margin:8px 0 23px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:18px}.stat-grid div{padding-left:16px;border-left:1px solid var(--line)}.stat-grid div:first-child{padding-left:0;border:0}.stat-grid span{display:block;text-transform:uppercase;font-size:10px;letter-spacing:.08em;color:var(--muted)}.stat-grid strong{display:block;font-size:34px;letter-spacing:-.04em;line-height:1.4}.stat-grid small{font-size:14px;font-weight:500;letter-spacing:0}.start-recipe{font-size:12px;line-height:1.8}.note{background:var(--tint);border:1px solid var(--line);border-left:3px solid var(--accent);padding:15px 17px;margin-bottom:15px;border-radius:0 6px 6px 0;font-size:12px}.note p:last-child{margin-bottom:0}.compact{padding:12px 15px}.cover-bottom{display:flex;justify-content:space-between;gap:15px;font-size:11px;padding-top:10px}.cover-bottom a{font-weight:700}.folio{display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding-top:13px;margin-top:auto}.paper>*:nth-last-child(2){margin-bottom:22px}.picker{padding:15px 17px;background:var(--night);color:#e6eff7;border-radius:8px;margin-bottom:18px}.picker label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:7px}.picker-controls{display:flex;gap:10px}.picker select{flex:1;min-width:0;background:#fffef9;color:var(--ink);border:1px solid #b8c8cf;border-radius:4px;padding:9px;font-size:13px}.picker button{cursor:pointer;border:1px solid #a9c4d3;background:#304a60;color:white;border-radius:4px;padding:8px 12px;font-weight:600;white-space:nowrap}.picker output{display:block;margin-top:10px;font-size:11px;line-height:1.6;color:#d1e2ed}.picker .small{color:#d1e2ed;margin:5px 0 0;min-height:0}.table-wrap{border:1px solid var(--line);border-radius:7px;overflow-x:auto;background:#fff;margin-bottom:18px}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px;line-height:1.45}caption{text-align:left;background:var(--paper);font-size:10px;text-transform:uppercase;letter-spacing:.07em;font-weight:650;color:var(--muted);padding:12px 13px;border-bottom:1px solid var(--line)}thead{background:var(--night);color:#f2f7fb}th,td{padding:11px 12px;vertical-align:top;border-bottom:1px solid var(--line)}thead th{font-size:10px;letter-spacing:.025em;font-weight:650}tbody th{font-weight:650}tr:last-child>*{border-bottom:0}tbody tr:nth-child(even){background:#f5f7f7}tbody tr.recommended{background:var(--tint)}tr.recommended th{box-shadow:inset 3px 0 var(--accent)}.cell-sub{display:block;font-size:10px;font-weight:400;line-height:1.35;margin-top:4px;color:var(--muted)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.two-col .note{height:100%;margin:0}.two-col{margin-bottom:18px}.small{font-size:11px;color:var(--muted);line-height:1.55}.bandwidth{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:13px 16px;border:1px solid #d5cba4;background:var(--warm);font-size:11px;border-radius:6px;margin-bottom:14px}.bandwidth strong{font-size:20px}.bandwidth-result{flex-basis:100%;font-weight:650}.pill-line{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}.pill{border:1px solid var(--line);border-radius:30px;font-size:10px;font-weight:600;padding:5px 10px;background:var(--tint)}code{font-family:Consolas,monospace;font-size:.92em;overflow-wrap:anywhere}.hardware th:first-child{width:23%}.hardware td:nth-child(2){width:36%}.hardware th,.hardware td{padding:11px;font-size:11.5px}.flow{display:flex;align-items:center;gap:12px;padding:16px;background:var(--night);border-radius:8px;color:#eaf4fa;margin-bottom:22px}.flow div{flex:1}.flow span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#a9c6d9;display:block}.flow strong{display:block;font-size:13px;margin:6px 0 2px}.flow small{font-size:10px;color:#c7dae5}.flow>b{color:#90c8d8}.do-avoid{gap:24px}.do-avoid h3{font-size:16px;padding-bottom:8px;border-bottom:2px solid var(--accent)}.do-avoid>div:last-child h3{border-color:#b57b3b}.do-avoid ul{padding-left:17px;font-size:12px;margin:0}.do-avoid li{margin-bottom:9px}.measure-context{padding:14px 16px;border-left:3px solid var(--accent);background:var(--tint);font-size:11px;line-height:1.65;margin-bottom:18px}.resources{font-variant-numeric:tabular-nums}.resources th,.resources td{padding:9px 10px;font-size:11px}.resources th:first-child{width:31%}.resources td:nth-child(2){min-width:75px;width:15%}.resources td:nth-child(3){width:25%}.resources td:nth-child(n+4){text-align:right}.resources .cell-sub{font-size:9px}.resources meter{display:block;width:100%;height:7px;margin-top:4px;border:0;border-radius:3px;background:#dfe7e8;appearance:none}.resources meter::-webkit-meter-bar{background:#dfe7e8;border:0;border-radius:3px}.resources meter::-webkit-meter-optimum-value{background:var(--accent);border-radius:3px}.resources meter::-moz-meter-bar{background:var(--accent)}.metric-notes{font-size:10.5px;color:var(--muted);line-height:1.6}.metric-notes p{margin-bottom:8px}.app-figure{margin:6px 0 18px;text-align:center}.app-figure img{display:block;max-width:100%;max-height:285px;margin:0 auto;object-fit:contain;border:1px solid #6b7a85;border-radius:5px}.app-figure figcaption{font-size:10px;color:var(--muted);text-align:left;margin-top:8px}.steps{padding:0;list-style:none;counter-reset:steps;margin:0 0 8px}.steps li{counter-increment:steps;position:relative;padding:0 0 18px 45px}.steps li:before{content:counter(steps,decimal-leading-zero);position:absolute;left:0;top:1px;font-size:20px;color:var(--accent);font-weight:750}.steps h3{margin-bottom:4px}.steps p{font-size:12px;margin-bottom:0}.subhead{margin:6px 0 10px}.references{display:grid;grid-template-columns:1fr 1fr;gap:7px 20px;font-size:10px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:2px 0 18px}.end-mark{display:flex;flex-direction:column;gap:6px;margin-top:8px}.end-mark strong{font:italic 23px Georgia,serif;color:var(--accent)}.end-mark span{font-size:9px;overflow-wrap:anywhere;color:var(--muted)}.screen-footer{display:flex;max-width:794px;justify-content:space-between;gap:20px;margin:0 auto 25px;font-size:12px;padding:0 18px;color:var(--muted)}
@media(max-width:850px){html{scroll-padding-top:140px}.toolbar{flex-wrap:wrap;padding:12px 16px;gap:12px}.toolbar nav{order:3;width:100%;gap:20px}.toolbar button{margin-left:auto}.paper{width:100%;min-height:0;padding:28px 24px 22px;margin-bottom:18px}.folio{margin-top:20px}.cover-art{margin-bottom:18px}h1{font-size:58px}h2{font-size:30px}.running{font-size:9px}.screen-footer{padding:0 18px}.table-wrap{max-width:100%}}
@media(max-width:560px){body{font-size:14px}main{padding:14px 10px}.paper{padding:23px 18px 18px}.running{font-size:8px;letter-spacing:.06em;margin-bottom:22px}.running b{margin:0 3px}.eyebrow{font-size:9px}h1{font-size:51px}.cover-line{font-size:19px}.intro,.lead{font-size:14px}.cover-art{margin:8px 0 18px}.stat-grid{grid-template-columns:repeat(2,1fr);gap:15px 0}.stat-grid div:nth-child(3){border:0;padding-left:0}.stat-grid strong{font-size:32px}.two-col{grid-template-columns:1fr;gap:12px}.cover-bottom{flex-direction:column;gap:8px}.toolbar .brand{font-size:14px}.toolbar button{font-size:11px;padding:7px 9px}.toolbar nav{justify-content:space-between;gap:10px}.toolbar nav a{font-size:12px}.picker{padding:13px}.picker-controls{flex-direction:column}.picker button{align-self:flex-start}table{min-width:570px}.resources{min-width:580px}.hardware{min-width:620px}.table-wrap:after{content:"Scroll table horizontally →";position:sticky;left:0;display:block;width:calc(100vw - 58px);font-size:10px;padding:7px 10px;color:var(--muted);background:var(--tint);border-top:1px solid var(--line)}.flow{gap:7px;padding:12px}.flow strong{font-size:10px}.flow span,.flow small{font-size:8px}.flow b{font-size:10px}.references{gap:9px 14px}.screen-footer{flex-direction:column;gap:8px}.folio{font-size:8px}.app-figure img{max-height:245px}.bandwidth-result{line-height:1.5}}
.retained{background:var(--warm);border-left-color:#9a6c22}
#whip table{font-size:11.5px}#whip th,#whip td{padding:9px 11px}#whip .do-avoid li{margin-bottom:7px}#whip .flow{margin-bottom:16px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@page{size:A4;margin:0}
@media print{html{scroll-behavior:auto}body{background:white;font-size:14px;-webkit-print-color-adjust:exact;print-color-adjust:exact}.toolbar,.screen-only,.skip,.screen-footer{display:none!important}main{padding:0}.paper{width:210mm;min-height:297mm;margin:0;padding:11mm 12mm 8mm;box-shadow:none;border-top:1.3mm solid var(--accent);break-after:page;break-inside:avoid}.paper:last-child{break-after:auto}.folio{margin-top:auto}.table-wrap{overflow:visible;border-radius:5px}table,.resources,.hardware{min-width:0}.table-wrap:after{display:none}thead{display:table-header-group}tr,figure,.note,.flow,.stat-grid{break-inside:avoid}a{text-decoration:none}h1{font-size:68px}h2{font-size:34px}.running{font-size:10px;margin-bottom:28px}.two-col{grid-template-columns:1fr 1fr}.stat-grid{grid-template-columns:repeat(4,1fr);gap:0}.stat-grid div:nth-child(3){border-left:1px solid var(--line);padding-left:16px}.cover-bottom{flex-direction:row}.app-figure img{max-height:285px}.cover-art{margin:8px 0 23px}.intro,.lead{font-size:15px}.cover-line{font-size:21px}.flow strong{font-size:13px}.flow span{font-size:9px}.flow small{font-size:10px}.flow{gap:12px;padding:16px}.folio{font-size:9px}}
#performance .resources th,#performance .resources td{padding:8px 10px}
@media print{.app-figure img{max-height:160px}}
