:root { color-scheme: dark; --bg:#08090a; --raised:#0d0e10; --surface:#111214; --text:#eceef0; --body:#a4a8ae; --muted:#70747b; --border:rgb(255 255 255 / .09); --border-2:rgb(255 255 255 / .16); --focus:rgb(255 255 255 / .7); --action:#3c9ac6; --action-2:#62bde6; --link:#56b4de; --danger:#f48771; --danger-soft:#f487711a; --selection:rgb(255 255 255 / .2); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Ubuntu,sans-serif; font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased }
@media(prefers-color-scheme:light) { :root { color-scheme: light; --bg:#f7f8f9; --raised:#fff; --surface:#fff; --text:#0b0c0d; --body:#33363a; --muted:#5e6268; --border:#e2e5e8; --border-2:#cfd3d7; --focus:#5e6268; --action:#2a83ad; --action-2:#3c9ac6; --link:#2a83ad; --danger:#ad0707; --danger-soft:#ad07070f; --selection:#00000020 } }
* { box-sizing:border-box } body { margin:0; min-height:100vh; color:var(--body); background:radial-gradient(1200px 600px at 50% -200px, rgb(86 180 222 / .1), transparent 70%), var(--bg) }
header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; max-width:880px; margin:auto; padding:22px 24px; border-bottom:1px solid var(--border) }
header > a { color:var(--text); font-size:17px; font-weight:600; letter-spacing:-.02em; text-decoration:none }
nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap } nav a { padding:6px 12px; border-radius:999px; color:var(--body); text-decoration:none } nav a:hover { color:var(--text); background:rgb(127 127 127 / .12) } nav form { margin:0 0 0 6px }
main { max-width:880px; margin:auto; padding:40px 24px 80px }
h1,h2,h3 { color:var(--text); letter-spacing:-.025em; line-height:1.15 } h1 { margin:0 0 20px; font-size:34px; font-weight:650 } h2 { font-size:21px; font-weight:600 } h3 { font-size:16px; font-weight:600 }
a { color:var(--link); text-underline-offset:3px }
section,article { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px; margin:18px 0; box-shadow:0 20px 60px -30px rgb(0 0 0 / .6) }
form { margin:18px 0 }
label { display:block; margin:14px 0; color:var(--text); font-weight:500 }
input:not([type=checkbox]),textarea { display:block; width:100%; max-width:560px; margin-top:6px; padding:11px 13px; border:1px solid var(--border-2); background:var(--raised); color:var(--text); border-radius:10px; font:inherit; font-weight:400; transition:border-color .15s ease, box-shadow .15s ease }
input:not([type=checkbox]):focus,textarea:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 3px rgb(127 127 127 / .18) }
input[type=checkbox] { width:16px; height:16px; margin-right:8px; vertical-align:-3px; accent-color:var(--action) }
textarea { min-height:110px; resize:vertical }
button { background:linear-gradient(180deg, var(--action-2), var(--action)); color:#fff; border:0; border-radius:999px; padding:10px 20px; cursor:pointer; font:inherit; font-weight:500; box-shadow:inset 0 1px 0 rgb(255 255 255 / .25), 0 0 0 1px rgb(86 180 222 / .5), 0 8px 24px -10px rgb(86 180 222 / .6); transition:filter .15s ease, transform .15s ease }
button:hover { filter:brightness(1.08) } button:active { transform:scale(.98) }
nav button { padding:6px 14px; background:transparent; color:var(--body); box-shadow:inset 0 0 0 1px var(--border-2) }
button+button { margin-left:8px }
button.danger { background:transparent; color:var(--danger); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent) } button.danger:hover { filter:none; background:var(--danger-soft) }
.links { display:flex; flex-wrap:wrap; gap:8px 20px; margin:18px 0 0 }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px } ::selection { background:var(--selection) }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; max-height:420px; overflow:auto; padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--raised) }
.agreement { max-height:460px; overflow:auto; padding:2px 22px 14px; border:1px solid var(--border); border-radius:12px; background:var(--raised); font-size:14px; line-height:1.6 }
.agreement h3 { margin:22px 0 6px; font-size:15px } .agreement h4 { margin:16px 0 4px; color:var(--text); font-size:14px; font-weight:600 } .agreement p { margin:8px 0 } .agreement ul { margin:8px 0; padding-left:20px } .agreement li { margin:4px 0 }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; overflow-wrap:anywhere }
.muted { color:var(--muted) } .inline { display:inline; margin:0 } li { margin:8px 0 }
.notice { padding:16px 18px; border:1px solid rgb(86 180 222 / .35); border-radius:12px; background:rgb(86 180 222 / .08); color:var(--text) }
dl { display:grid; grid-template-columns:140px 1fr; gap:10px 16px } dt { color:var(--muted) } dd { margin:0; color:var(--text); overflow-wrap:anywhere }
details summary { cursor:pointer; color:var(--muted) }
@media (max-width:560px) { h1 { font-size:28px } section,article { padding:20px } dl { grid-template-columns:1fr; gap:2px } dd { margin-bottom:10px } }