:root { --bg:#170c1c; --bg2:#1f1125; --card:#2a1830; --line:#3d2747; --text:#fbeee6; --muted:#c7b2c5; --accent:#ff4f7b; --accent2:#ffb36b; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16.5px/1.65 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent2); }
.wrap { max-width: 780px; margin: 0 auto; padding: calc(22px + env(safe-area-inset-top, 0px)) 22px calc(60px + env(safe-area-inset-bottom, 0px)); }
.top { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 19px; color: var(--text); text-decoration: none; letter-spacing: -.02em; }
@font-face { font-family: 'CatchMe Wordmark'; src: url('/static/catchme-wordmark.woff') format('woff'); font-weight: 700; font-display: swap; }
.wm { font-family: 'CatchMe Wordmark', Poppins, sans-serif; font-weight: 700; letter-spacing: -.01em; }
.wm b { font-weight: 700; background: linear-gradient(90deg, #ff3fa4, #ff6b6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand .cmlogo { width: 28px; height: 28px; } .cmlogo { border-radius: 50%; vertical-align: middle; flex: none; }
.brand .wm { font-size: 21px; }
.brand i { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#ff4f7b,#ff8a5c); display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; }
.back { margin-left: auto; color: var(--muted); text-decoration: none; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
h1 { font-size: clamp(30px, 6vw, 42px); line-height: 1.1; margin: 0 0 8px; letter-spacing: -.02em; font-weight: 850; }
.updated { color: var(--muted); font-size: 14px; margin: 0 0 30px; }
h2 { font-size: 21px; margin: 36px 0 10px; letter-spacing: -.01em; }
h3 { font-size: 17px; margin: 22px 0 6px; }
p, li { color: #eadbe5; }
ul { padding-left: 22px; }
li { margin: 4px 0; }
.box { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; margin: 14px 0; }
.box p { margin: 4px 0; }
.todo { background: rgba(255,179,107,.18); color: #ffd9b3; border-radius: 6px; padding: 0 5px; font-weight: 700; }
table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.scroll { overflow-x: auto; }
footer { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--text); text-decoration: none; font-weight: 700; }