body.brand { background: var(--paper); color: var(--ink); font-family: var(--f-sans); margin: 0; }
.bk { max-width: 1040px; margin: 0 auto; padding: 48px 20px 96px; }
.bk-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 56px; }
.bk-top a.back { color: var(--muted); text-decoration: none; font-size: 14px; }
.bk h1 { font-size: clamp(40px, 7vw, 76px); letter-spacing: -.045em; line-height: .98; margin: 0 0 16px; font-weight: 600; }
.bk h1 em { font-family: var(--f-serif); font-weight: 400; font-style: italic; }
.bk .lead { color: var(--muted); font-size: 18px; max-width: 620px; line-height: 1.5; margin: 0 0 56px; }
.bk h2 { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 64px 0 20px; font-weight: 500; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tile { border-radius: var(--r-lg); padding: 40px; display: grid; place-items: center; min-height: 240px; border: 1px solid var(--line); }
.tile img { max-width: 100%; height: auto; }
.t-paper { background: var(--card); } .t-ink { background: var(--ink); } .t-lime { background: var(--lime); }
.big-mark { width: 120px; height: 120px; }
.cap { font-size: 13px; color: var(--muted); margin-top: 10px; }
.sw { border-radius: var(--r); padding: 20px; min-height: 130px; display: flex; flex-direction: column; justify-content: flex-end; border: 1px solid var(--line); }
.sw b { font-size: 15px; } .sw code { font-family: var(--f-mono); font-size: 12px; opacity: .75; }
.s-ink { background: var(--ink); color: var(--paper); } .s-lime { background: var(--lime); } .s-paper { background: var(--paper-2); }
.s-violet { background: var(--violet); } .s-peach { background: var(--peach); } .s-sky { background: var(--sky); }
.type { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; }
.type .a { font-size: 56px; letter-spacing: -.04em; font-weight: 600; line-height: 1; }
.type .b { font-family: var(--f-serif); font-style: italic; font-size: 40px; margin-top: 12px; }
.type .c { font-family: var(--f-mono); font-size: 14px; color: var(--muted); margin-top: 12px; }
.rules { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding: 0; list-style: none; margin: 0; }
.rules li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; font-size: 15px; line-height: 1.45; }
.rules b { display: block; margin-bottom: 4px; }
.dl { display: inline-block; margin: 8px 8px 0 0; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 14px; }
.pfp { width: 200px; height: 200px; border-radius: 50%; }