@font-face{font-family:"SF Mada Current";src:url("./fonts/sfmada-normal.woff2") format("woff2");font-weight:100 700 900;font-style:normal;font-display:swap}
@font-face{font-family:"SF Mada Single";src:url("./fonts/sfmada-normal.woff2") format("woff2"),url("./fonts/sfmada-normal.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SF Mada Static";src:url("./fonts/sfmada-normal.woff2") format("woff2"),url("./fonts/sfmada-normal.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"SF Mada Static";src:url("./fonts/sfmada-bold.woff2") format("woff2"),url("./fonts/sfmada-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Lyon Arabic Display";src:url("./fonts/LyonArabicDisplay-Regular.woff2") format("woff2"),url("./fonts/LyonArabicDisplay-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lyon Arabic Text";src:url("./fonts/LyonArabicText-Regular.woff2") format("woff2"),url("./fonts/LyonArabicText-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lyon Arabic Text";src:url("./fonts/LyonArabicText-Semibold.woff2") format("woff2"),url("./fonts/LyonArabicText-Semibold.woff") format("woff");font-weight:600;font-style:normal;font-display:swap}
:root{color-scheme:dark;--size:36px;--weight:500;--leading:1.25;--synthesis:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:#152040;color:#f4f4f5}*{box-sizing:border-box}body{margin:0;min-width:320px;background:#152040}main{width:min(1180px,calc(100% - 32px));margin:auto;padding:56px 0 80px}header{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;margin-bottom:32px}.eyebrow{margin:0 0 10px;color:#67e8f9;font:700 11px/1.2 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}h1{margin:0;font-size:clamp(32px,5vw,56px);line-height:1;letter-spacing:-.04em}.intro{max-width:720px;margin:18px 0 0;color:#a1a1aa;line-height:1.65}.status{flex:none;border:1px solid #155e75;border-radius:99px;padding:8px 12px;color:#a5f3fc;background:#08334480;font:12px ui-monospace,monospace}.status.error{border-color:#9f1239;color:#fecdd3;background:#4c051980}.controls{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:24px;align-items:center;margin-bottom:20px;border:1px solid #3f3f46;padding:20px;background:#18181bcc}.controls label:not(.toggle){display:grid;gap:10px;color:#d4d4d8;font:12px ui-monospace,monospace}.controls label span{display:flex;justify-content:space-between;gap:12px}.controls output{color:#67e8f9}input[type=range]{width:100%;accent-color:#22d3ee}.toggle{display:flex;align-items:center;gap:9px;color:#d4d4d8;font:12px ui-monospace,monospace;white-space:nowrap}.toggle input{accent-color:#22d3ee}.notice{display:grid;grid-template-columns:1fr 1.4fr;gap:16px 32px;margin-bottom:20px;border:1px solid #854d0e;padding:20px;background:#42200655}.notice h2{margin:0;font-size:18px}.notice>p{grid-column:1/-1;margin:0;color:#d4d4d8;line-height:1.6}.code-comparison{display:grid;gap:9px}.code-comparison div{display:flex;align-items:center;gap:10px}.code-comparison span{width:76px;font:700 10px ui-monospace,monospace;text-transform:uppercase}.bad{color:#fda4af}.good{color:#86efac}code{color:#e4e4e7;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.grid article{overflow:hidden;border:1px solid #3f3f46;background:#18181be6}.grid article.recommended{border-color:#0e7490;box-shadow:inset 0 3px #22d3ee}.card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #3f3f46;padding:14px 18px}.card-header h2{margin:0;font-size:13px}.card-header code{color:#71717a;font-size:11px}.sample{display:flex;align-items:center;min-height:190px;padding:28px;background-image:linear-gradient(#27272a 1px,transparent 1px);background-size:100% 32px}.sample h2{width:100%;margin:0;color:#fafafa;font-size:var(--size);font-style:normal;font-weight:var(--weight);line-height:var(--leading);text-align:right;font-synthesis:var(--synthesis)}.sample h2 em{font-style:italic}.sample h2 strong{font-weight:700}.sample h2 br{display:block}.current h2{font-family:"SF Mada Current",sans-serif}.sf-single h2{font-family:"SF Mada Single",sans-serif}.sf-static h2{font-family:"SF Mada Static",sans-serif}.lyon-display h2{font-family:"Lyon Arabic Display",sans-serif}.lyon-text h2{font-family:"Lyon Arabic Text",sans-serif}.fallback h2{font-family:sans-serif}.note{min-height:58px;margin:0;padding:13px 18px;color:#a1a1aa;font-size:12px;line-height:1.5}details{margin-top:20px;border:1px solid #3f3f46;background:#18181b}summary{cursor:pointer;padding:16px 18px;color:#d4d4d8;font:12px ui-monospace,monospace}pre{overflow-x:auto;margin:0;border-top:1px solid #3f3f46;padding:18px;color:#a5f3fc;font-size:12px;line-height:1.6}@media(max-width:800px){header{display:block}.status{display:inline-block;margin-top:20px}.controls,.notice,.grid{grid-template-columns:1fr}.notice>p{grid-column:auto}}