@font-face{font-family:'IBM Plex Sans';font-weight:400;font-display:swap;src:url(/assets/IBMPlexSans-Regular.ttf) format('truetype')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-display:swap;src:url(/assets/IBMPlexSans-SemiBold.ttf) format('truetype')}
@font-face{font-family:'IBM Plex Sans';font-weight:700;font-display:swap;src:url(/assets/IBMPlexSans-Bold.ttf) format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-display:swap;src:url(/assets/IBMPlexMono-Regular.ttf) format('truetype')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-display:swap;src:url(/assets/IBMPlexMono-SemiBold.ttf) format('truetype')}

:root { --bg:#FFFFFF; --ink:#111111; --mut:#5A5A5F; --grp:#F2F2F7; --acc:#840C20; --accbg:#840C20; --accfg:#FFFFFF; --rule:#111111; --hair:#C6C6C8; --bar:#840C20; --canvas:#E9E8E4; }
@media (prefers-color-scheme: dark) { :root { --bg:#000000; --ink:#FFFFFF; --mut:#A1A1A8; --grp:#1C1C1E; --acc:#FF7A8C; --accbg:#FF7A8C; --accfg:#000000; --rule:#FFFFFF; --hair:#3A3A3C; --bar:#FF7A8C; --canvas:#111111; } }
.bl { container-type:inline-size; background:var(--bg); color:var(--ink); font:400 18px/1.6 'IBM Plex Sans',sans-serif; }
.bl *, .bl *::before, .bl *::after { box-sizing:border-box; }
.bl img { max-width:100%; }
.bl a { color:var(--acc); font-weight:600; text-underline-offset:4px; }
.bl a:hover { color:var(--ink); }
.bl .w { max-width:1200px; margin:0 auto; padding:0 48px; }
.bl .hd { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:80px; }
.bl .brand { display:flex; align-items:center; gap:12px; min-height:44px; color:var(--ink); font-weight:700; font-size:22px; text-decoration:none; }
.bl .brand:hover { color:var(--ink); }
.bl .brand img { width:44px; height:44px; border-radius:10px; display:block; }
.bl .nav { display:flex; gap:4px; }
.bl .nav a { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; text-decoration:none; }
.bl .dk { display:none !important; }
@media (prefers-color-scheme: dark) { .bl .lt { display:none !important; } .bl .dk { display:block !important; } }
.bl .r12 { border-top:12px solid var(--rule); }
.bl .r3 { border-top:3px solid var(--rule); }
.bl .hairl { border-top:1px solid var(--hair); }
.bl .hero { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; padding:48px 0 64px; align-items:center; }
.bl .icon { width:120px; height:120px; border-radius:27px; display:block; }
.bl .name { font:600 18px 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; margin:16px 0 8px; }
.bl h1 { font-weight:700; font-size:clamp(44px,6.2cqw,92px); line-height:.98; letter-spacing:-.03em; margin:0 0 24px; }
.bl h1 span, .bl h2 span { color:var(--acc); }
.bl .lede { font-size:22px; line-height:1.5; max-width:30em; margin:0 0 32px; }
.bl .badge { width:168px; height:56px; border:2px dashed var(--ink); border-radius:10px; display:grid; place-items:center; font:600 16px 'IBM Plex Mono',monospace; letter-spacing:.1em; }
.bl .shots { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.bl .shot { aspect-ratio:1206/2622; border-radius:28px; overflow:hidden; border:1px solid var(--hair); background:var(--grp); }
.bl .shot img { width:100%; height:100%; object-fit:cover; display:block; }
.bl .shot.b { margin-top:48px; }
.bl .sec { display:grid; grid-template-columns:5fr 7fr; gap:48px; padding:24px 0 64px; }
.bl .idx { font:600 18px 'IBM Plex Mono',monospace; color:var(--acc); margin:0 0 12px; }
.bl h2 { font-weight:700; font-size:clamp(32px,4cqw,52px); line-height:1.05; letter-spacing:-.02em; margin:0; }
.bl .sec p { margin:0 0 16px; max-width:36em; font-size:20px; }
.bl .sec p:last-child { margin-bottom:0; }
.bl .art { background:#FFFFFF; border:1px solid var(--hair); border-radius:14px; overflow:hidden; margin-top:24px; max-width:520px; }
.bl .art img { display:block; width:100%; height:auto; }
.bl .nih { border:1px solid var(--ink); border-radius:14px; padding:24px; }
.bl .nih .top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; font-weight:600; }
.bl .num { font:600 clamp(36px,5cqw,56px)/1 'IBM Plex Mono',monospace; }
.bl .bar { position:relative; height:28px; border:3px solid var(--ink); border-radius:6px; margin-top:20px; }
.bl .bar i { display:block; height:100%; background:var(--bar); }
.bl .bar b { position:absolute; right:-3px; top:-10px; bottom:-10px; width:6px; background:var(--ink); }
.bl .scale { display:flex; justify-content:space-between; gap:12px; margin-top:12px; color:var(--mut); }
.bl .src { margin:16px 0 0; color:var(--mut); font-size:18px; }
.bl .pro { background:var(--grp); border-radius:14px; padding:32px; margin:0 0 64px; display:grid; grid-template-columns:5fr 7fr; gap:48px; }
.bl .pro ul { margin:0; padding:0; list-style:none; }
.bl .pro li { padding:12px 0; border-top:1px solid var(--hair); font-weight:600; font-size:20px; }
.bl .thread { height:20px; border:3px solid var(--ink); border-radius:6px; position:relative; margin:0 0 48px; }
.bl .thread i { display:block; height:100%; width:75%; background:var(--bar); }
.bl .thread b { position:absolute; right:-3px; top:-8px; bottom:-8px; width:6px; background:var(--ink); }
.bl .ft { border-top:12px solid var(--rule); padding:32px 0 48px; }
.bl .ft .nav { flex-wrap:wrap; margin:0 0 16px -12px; }
.bl .ft p { margin:0 0 12px; color:var(--mut); max-width:40em; }
.bl .doc { max-width:760px; padding:48px 0 64px; }
.bl .doc h1 { font-size:clamp(40px,6cqw,64px); margin:0 0 8px; }
.bl .doc .upd { font:400 18px 'IBM Plex Mono',monospace; color:var(--mut); margin:0 0 32px; }
.bl .doc h2 { font-size:28px; line-height:1.2; letter-spacing:-.01em; border-top:3px solid var(--rule); padding-top:12px; margin:32px 0 12px; }
.bl .doc p { margin:0 0 16px; }
.bl .faq h3 { font-size:22px; line-height:1.3; margin:0 0 4px; font-weight:700; }
.bl .faq .q { padding:16px 0; border-top:1px solid var(--hair); }
.bl .faq .q p { margin:0; }
.bl .thumb { display:block; max-width:320px; background:#FFFFFF; border:1px solid var(--hair); border-radius:10px; overflow:hidden; margin:16px 0; }
.bl .thumb img { display:block; width:100%; height:auto; }
.bl .nf { text-align:center; padding:48px 0 64px; }
.bl .nf h1 { font-size:clamp(36px,6cqw,72px); }
.bl .nf .art { margin:0 auto 32px; }
.bl .btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border-radius:10px; background:var(--accbg); color:var(--accfg); text-decoration:none; font-weight:600; }
.bl .btn:hover { color:var(--accfg); opacity:.9; }
@container (max-width: 760px) {
 .bl .w { padding:0 20px; }
 .bl .hero, .bl .sec, .bl .pro { grid-template-columns:1fr; gap:24px; }
 .bl .hero { padding:24px 0 48px; }
 .bl .sec { padding:16px 0 48px; }
 .bl .pro { padding:24px 20px; }
 .bl .shot.b { margin-top:24px; }
 .bl .lede, .bl .sec p { font-size:18px; }
 .bl .icon { width:96px; height:96px; border-radius:22px; }
 .bl .brand { font-size:20px; }
 .bl .nav a { padding:0 8px; }
 .bl .nih { padding:16px; }
}
html,body{margin:0;background:var(--bg)}
.bl{min-height:100vh}
.badge-link{display:inline-block;min-height:44px}.badge-link img{display:block;height:56px;width:auto}.badge-link .badge-dark{display:none}@media (prefers-color-scheme:dark){.badge-link .badge-light{display:none}.badge-link .badge-dark{display:block}}
.i1{width:50%}
.i2{font-family:'IBM Plex Mono',monospace}
.i3{margin:0 0 16px;font-size:20px}