/* ===== Commons base ===== */ :root{ --bg:#ffffff; --fg:#0f172a; /* slate-900 */ --muted:#475569; /* slate-600 */ --link:#2563eb; --linkh:#1d4ed8; --border:#e5e7eb; --chip:#f1f5f9; --brand:#2b74ff; } html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',Arial,'Apple Color Emoji','Segoe UI Emoji';} body{margin:0;padding:32px;background:var(--bg);color:var(--fg);line-height:1.5;max-width:860px} @media (min-width:880px){ body{margin:40px auto} } h1{font-size:clamp(28px,4vw,36px);margin:0 0 10px 0} h2{font-size:clamp(20px,3vw,24px);margin:24px 0 10px} p{margin:10px 0;color:var(--fg)} small,.small{color:var(--muted)} a{color:var(--link);text-decoration:none} a:hover{color:var(--linkh);text-decoration:underline} hr{border:none;border-top:1px solid var(--border);margin:20px 0} /* nav chips */ .nav{margin:0 0 14px 0} .nav a{display:inline-block;padding:6px 10px;margin-right:8px;background:var(--chip);border:1px solid var(--border);border-radius:999px} /* toolbar */ .toolbar{display:flex;gap:10px;align-items:center;margin:12px 0 18px 0;flex-wrap:wrap} .input{padding:8px 10px;border:1px solid var(--border);border-radius:8px;min-width:220px;outline:none} .input:focus{border-color:var(--link)} .btn{display:inline-block;padding:8px 12px;border:1px solid var(--border);border-radius:10px;text-decoration:none} .btn:hover{border-color:var(--link)} .small{font-size:12px;color:var(--muted)} /* tables / lists */ table{border-collapse:collapse;width:100%;margin:8px 0;border:1px solid var(--border)} th,td{padding:10px 12px;border-top:1px solid var(--border);text-align:left;vertical-align:top} th{background:#f8fafc;color:#0f172a} ul,ol{padding-left:20px} /* footer */ .footer{margin-top:28px;font-size:12px;color:var(--muted)} .footer a{color:var(--muted)} .footer a:hover{color:var(--link)} /* dark-mode:start */ @media (prefers-color-scheme: dark){ :root{ --bg:#0b0f14; --fg:#e6e9ee; --muted:#9aa4b2; --link:#5ea0ff; --linkh:#8ab8ff; --border:#1e2632; --chip:#131a24; --brand:#2b74ff; } html,body{background:var(--bg); color:var(--fg)} th{background:#0f141b;color:var(--fg)} .btn{background:var(--chip)} .input{background:#0f141b;color:var(--fg)} } /* dark-mode:end */:root { --accent: #1464f6; } a, .btn { border-color: var(--accent); color: var(--accent); } .btn { border:1px solid var(--accent); padding:.4rem .7rem; border-radius:.6rem; text-decoration:none; } .badge .small { font-size: .9rem; font-weight: 600; } .icon svg { display:inline-block; vertical-align:middle; } @media (prefers-color-scheme: dark){ body { background:#0B0F19; color:#E5E7EB; } a { color:#93C5FD; } .btn { color: #93C5FD; border-color:#374151; } table { color:#E5E7EB; } } /* === AtlasAeon tokens + responsive base === */ :root{--font-size-base:clamp(16px,1.6vw,18px);--font-size-sm:clamp(14px,1.3vw,16px);--font-size-lg:clamp(18px,2vw,22px);--font-size-xl:clamp(22px,3vw,28px);--line-height:1.5;--radius:12px;--shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);--space-1:.4rem;--space-2:.8rem;--space-3:1.2rem;--space-4:2rem;--bg:#fff;--bg-alt:#f6f7fb;--text:#0f172a;--muted:#475569;--border:#e5e7eb;--link:#1464F6;--accent:#F59E0B} @media(prefers-color-scheme:dark){:root{--bg:#0b1220;--bg-alt:#10182a;--text:#e6eaf2;--muted:#a8b3c7;--border:#2a3446;--link:#81A7FF;--accent:#FFC86B}} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--font-size-base);line-height:var(--line-height);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline} .container{max-width:1120px;margin:0 auto;padding:var(--space-4) var(--space-3)} .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-3)} @media(max-width:600px){.grid{grid-template-columns:1fr}} .card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-3)} .toolbar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin:var(--space-3) 0} .input{min-width:220px;flex:1 1 240px;padding:.6rem .8rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-alt);color:var(--text)} .btn{display:inline-flex;align-items:center;justify-content:center;padding:.6rem .9rem;border-radius:10px;border:1px solid var(--border);background:var(--bg)} .small{font-size:var(--font-size-sm);color:var(--muted)} .badge{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .55rem;border-radius:999px;font-weight:600;border:1px solid var(--border);background:var(--bg-alt)} .badge .dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block} @media(max-width:420px){h1{font-size:clamp(24px,6.5vw,30px)}h2{font-size:clamp(20px,5.8vw,26px)}p,li,table{font-size:clamp(16px,4.3vw,18px)}.btn,.input{font-size:clamp(16px,4.3vw,18px)}} button,.btn,a{min-height:40px} /* === AtlasAeon tokens + responsive base === */ :root{--font-size-base:clamp(16px,1.6vw,18px);--font-size-sm:clamp(14px,1.3vw,16px);--font-size-lg:clamp(18px,2vw,22px);--font-size-xl:clamp(22px,3vw,28px);--line-height:1.5;--radius:12px;--shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);--space-1:.4rem;--space-2:.8rem;--space-3:1.2rem;--space-4:2rem;--bg:#fff;--bg-alt:#f6f7fb;--text:#0f172a;--muted:#475569;--border:#e5e7eb;--link:#1464F6;--accent:#F59E0B} @media(prefers-color-scheme:dark){:root{--bg:#0b1220;--bg-alt:#10182a;--text:#e6eaf2;--muted:#a8b3c7;--border:#2a3446;--link:#81A7FF;--accent:#FFC86B}} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;font-size:var(--font-size-base);line-height:var(--line-height);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline} .container{max-width:1120px;margin:0 auto;padding:var(--space-4) var(--space-3)} .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-3)} @media(max-width:600px){.grid{grid-template-columns:1fr}} .card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-3)} .toolbar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin:var(--space-3) 0} .input{min-width:220px;flex:1 1 240px;padding:.6rem .8rem;border:1px solid var(--border);border-radius:10px;background:var(--bg-alt);color:var(--text)} .btn{display:inline-flex;align-items:center;justify-content:center;padding:.6rem .9rem;border-radius:10px;border:1px solid var(--border);background:var(--bg)} .small{font-size:var(--font-size-sm);color:var(--muted)} .badge{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .55rem;border-radius:999px;font-weight:600;border:1px solid var(--border);background:var(--bg-alt)} .badge .dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block} @media(max-width:420px){h1{font-size:clamp(24px,6.5vw,30px)}h2{font-size:clamp(20px,5.8vw,26px)}p,li,table{font-size:clamp(16px,4.3vw,18px)}.btn,.input{font-size:clamp(16px,4.3vw,18px)}} button,.btn,a{min-height:40px}