@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--k:#0f0f0f;--w:#fafaf8;--r:#ff3b00;--g:#8c8c8c;--line:1px solid #0f0f0f}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--w);color:var(--k);font:16px/1.55 'Space Grotesk',sans-serif}
a{color:inherit}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.02em;text-transform:uppercase}
header[role=banner]{display:grid;grid-template-columns:1fr auto;border-bottom:var(--line)}
header[role=banner] .id{padding:18px 24px;border-right:var(--line);font-weight:700;font-size:1.25rem;text-decoration:none;letter-spacing:-.02em}
header[role=banner] .id span{color:var(--r)}
header[role=banner] nav{display:flex}
header[role=banner] nav a{padding:22px 22px;border-left:var(--line);text-decoration:none}
header[role=banner] nav a:hover{background:var(--k);color:var(--w)}
.intro{display:grid;grid-template-columns:repeat(12,1fr);border-bottom:var(--line)}
.intro h1{grid-column:1/9;font-size:clamp(2.6rem,7vw,6rem);line-height:.95;letter-spacing:-.04em;font-weight:700;padding:48px 24px;border-right:var(--line)}
.intro aside{grid-column:9/13;padding:48px 24px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.intro aside p{font-size:1.05rem}
.count{font-size:4rem;font-weight:700;color:var(--r);line-height:1}
.idx{list-style:none}
.idx li{border-bottom:var(--line)}
.idx a{display:grid;grid-template-columns:80px 1fr 160px 110px 140px;align-items:center;gap:16px;padding:16px 24px;text-decoration:none;position:relative}
.idx a:hover{background:var(--k);color:var(--w)}
.idx a:hover .thumb{opacity:1;transform:translateY(-50%) rotate(-3deg)}
.idx .n{font-family:'IBM Plex Mono',monospace;color:var(--r)}
.idx .t{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.idx .thumb{position:absolute;right:30%;top:50%;width:220px;aspect-ratio:4/3;object-fit:cover;opacity:0;transform:translateY(-50%);transition:.25s;pointer-events:none;z-index:2}
.sheet{display:grid;grid-template-columns:repeat(12,1fr);border-bottom:var(--line)}
.sheet .meta{grid-column:1/4;border-right:var(--line);padding:28px 24px;position:sticky;top:0;align-self:start}
.sheet .meta dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:20px}
.sheet .meta dt{color:var(--g)}
.sheet .main{grid-column:4/13}
.sheet h1{font-size:clamp(2.2rem,5vw,4rem);line-height:1;letter-spacing:-.03em;padding:28px 24px 18px;border-bottom:var(--line)}
.sheet .dek{padding:18px 24px;font-size:1.2rem;border-bottom:var(--line)}
.sheet figure img{display:block;width:100%;max-height:620px;object-fit:cover;border-bottom:var(--line)}
.text{padding:24px;max-width:720px}
.text p{margin-bottom:1em}
.text h2{font-size:1.4rem;letter-spacing:-.02em;margin:1.6em 0 .5em;padding-top:10px;border-top:var(--line)}
.text ul{margin:0 0 1em 1.2em}
.formula{display:grid;grid-template-columns:1fr 1fr;border-top:var(--line)}
.formula>div{padding:24px}
.formula>div:first-child{border-right:var(--line)}
.formula h3{margin-bottom:14px}
.formula ul{list-style:none}
.formula ul li{padding:7px 0;border-bottom:1px dashed #bbb}
.formula ol{list-style:none;counter-reset:x}
.formula ol li{counter-increment:x;display:grid;grid-template-columns:42px 1fr;padding:8px 0;border-bottom:1px dashed #bbb}
.formula ol li::before{content:counter(x,decimal-leading-zero);font-family:'IBM Plex Mono',monospace;color:var(--r)}
.plain{max-width:780px;padding:40px 24px 60px}
.plain h1{font-size:3rem;letter-spacing:-.03em;line-height:1;margin-bottom:24px}
.plain h2{font-size:1.25rem;margin:1.8em 0 .5em}
.plain p{margin-bottom:1em}
.plain input,.plain textarea{display:block;width:100%;border:0;border-bottom:var(--line);background:none;font:inherit;padding:12px 0;margin-bottom:18px}
.plain button{background:var(--k);color:var(--w);border:0;padding:14px 26px;font:inherit;cursor:pointer}
footer[role=contentinfo]{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--line)}
footer[role=contentinfo]>*{padding:22px 24px;border-right:var(--line)}
footer[role=contentinfo]>*:last-child{border-right:0}
footer a{display:block;text-decoration:none;margin-bottom:4px}
footer a:hover{color:var(--r)}
@media(max-width:860px){.intro h1,.intro aside,.sheet .meta,.sheet .main{grid-column:1/-1;border-right:0}.sheet .meta{position:static;border-bottom:var(--line)}.idx a{grid-template-columns:50px 1fr}.idx a .h{display:none}.idx .thumb{display:none}.formula{grid-template-columns:1fr}.formula>div:first-child{border-right:0;border-bottom:var(--line)}footer[role=contentinfo]{grid-template-columns:1fr 1fr}header[role=banner] nav a{padding:20px 12px}}