@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
:root{--bg:#0B0F1A;--surface:#141927;--surface-2:#1B2235;--ink:#F3F5FB;--muted:#8A92A8;--accent:#5B8CFF;--accent-2:#7AA8FF;--border:#242A3E;--fh:'JetBrains Mono', ui-monospace, monospace;--fb:'Inter', system-ui, sans-serif;}
*,*::before,*::after{box-sizing:border-box;} html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;}
a{color:var(--accent);text-decoration:none;} a:hover{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px;}
.top{padding:22px clamp(20px,4vw,40px);display:flex;justify-content:space-between;border-bottom:1px solid var(--border);}
.brand{font-family:var(--fh);font-weight:700;color:var(--ink);}
.brand:hover{color:var(--ink);text-decoration:none;}
.top>div{display:flex;gap:22px;} .top>div a{color:var(--muted);font-size:.9rem;}
.top>div a:hover{color:var(--ink);text-decoration:none;}
.doc{flex:1;max-width:780px;width:100%;margin:0 auto;padding:clamp(36px,5vw,64px) clamp(20px,4vw,40px);}
.doc header{margin-bottom:28px;animation:rise .8s ease .1s backwards;}
.tag{display:inline-block;font-family:var(--fh);font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);padding:5px 14px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin-bottom:16px;}
.doc header h1{font-family:var(--fh);font-weight:700;font-size:clamp(2.2rem,4.5vw,3.4rem);line-height:1.05;letter-spacing:-0.025em;margin:0 0 10px;color:var(--ink);}
.doc header p{color:var(--muted);margin:0;}
details{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:8px;overflow:hidden;transition:border-color .2s;}
details[open]{border-color:color-mix(in srgb,var(--accent) 35%,var(--border));}
details.hl{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),color-mix(in srgb,var(--accent-2) 8%,var(--surface)));border-color:color-mix(in srgb,var(--accent) 40%,var(--border));}
summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:14px;font-family:var(--fh);font-weight:600;color:var(--ink);position:relative;}
summary::-webkit-details-marker{display:none;}
summary:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);}
.n{font-family:var(--fh);font-weight:700;font-size:.78rem;letter-spacing:.18em;color:var(--accent);flex-shrink:0;}
summary::after{content:"+";margin-left:auto;font-size:1.4rem;color:var(--accent);line-height:1;font-weight:400;}
details[open] summary::after{content:"−";}
details > div{padding:4px 20px 20px;animation:expand .3s ease;}
details > div p{margin:0;color:var(--ink);}
details > div p strong{font-weight:600;color:var(--ink);}
details.hl p strong{color:var(--ink);font-size:1.02rem;}
.bot{padding:18px clamp(20px,4vw,40px);display:flex;justify-content:space-between;font-size:.84rem;color:var(--muted);border-top:1px solid var(--border);background:var(--surface);}
.bot a{color:var(--muted);} .bot a:hover{color:var(--ink);text-decoration:none;}
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes expand{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
::selection{background:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--ink);}