@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&display=swap");
:root { --bg: #f4f5f3; --tile: #ffffff; --ink: #0f1311; --sub: #545c58; --line: #e3e6e3; --you: #2563eb; color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
@media (prefers-color-scheme: dark) { :root { --bg: #0b0d0c; --tile: #151917; --ink: #f1f4f2; --sub: #aab3ae; --line: #242a27; --you: #5b8cff; color-scheme: dark } }
* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16.5px/1.65 "Geist", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased }
.doc { max-width: 720px; margin: 0 auto; padding-block: 28px 80px; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)) }
.mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.03em; color: var(--ink); text-decoration: none; margin-bottom: 36px }
.mark i { width: 22px; height: 22px; border-radius: 7px; background: var(--ink); position: relative }
.mark i::after { content: ""; position: absolute; left: 5px; right: 5px; top: 10px; height: 2px; background: var(--bg) }
.mark i::before { content: ""; position: absolute; left: 12px; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--you) }
h1 { font-size: clamp(34px, 6vw, 48px); letter-spacing: -.045em; line-height: 1; margin: 0 0 8px; font-weight: 800 }
h2 { font-size: 20px; letter-spacing: -.02em; margin: 34px 0 8px; font-weight: 700 }
.meta { color: var(--sub); margin: 0 0 24px }
p, li { color: var(--ink) } ul { padding-left: 20px } li { margin: 6px 0 }
a { color: var(--you) }
.back { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--sub) }