:root{ --bg:#ffffff; --fg:#111827; --muted:#6b7280; --brand:#111827; --ring:#93c5fd; --card:#f8fafc; --border:#e5e7eb; --link:#2563eb; --link-visited:#7c3aed; } @media (prefers-color-scheme: dark){ :root{ --bg:#0b0f16; --fg:#e5e7eb; --muted:#98a2b3; --card:#0f1520; --border:#1f2937; --link:#60a5fa; --link-visited:#c084fc; } } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6} .container{max-width:1000px;margin:0 auto;padding:24px} header.site{position:sticky;top:0;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--border)} @media (prefers-color-scheme: dark){ header.site{background:rgba(11,15,22,.7)} } .nav{display:flex;align-items:center;gap:16px;padding:12px 24px} .nav a{color:var(--fg);text-decoration:none;padding:8px 10px;border-radius:10px} .nav a:hover{background:var(--card)} .brand{font-weight:800;letter-spacing:.3px} .btn{display:inline-block;background:var(--brand);color:#fff;padding:10px 14px;border-radius:12px;text-decoration:none;box-shadow:0 6px 18px rgba(17,24,39,.25)} .btn:hover{filter:brightness(1.05)} .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px} footer.site{border-top:1px solid var(--border);margin-top:48px} footer.site .grid{display:grid;grid-template-columns:1fr auto;gap:16px;padding:24px} small.muted{color:var(--muted)} .toggle{cursor:pointer;border:1px solid var(--border);padding:6px 10px;border-radius:10px} /* === PMTC Upgrade: Rounded Nav + Hover + CTA + Theme Button === */ :root{ --brand:#111827; --nav-bg: rgba(255,255,255,.85); --nav-border: #e5e7eb; } @media (prefers-color-scheme: dark){ :root{ --nav-bg: rgba(11,15,22,.70); --nav-border:#1f2937; } } header.site{ position:sticky; top:0; z-index:50; background:var(--nav-bg); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--nav-border); } .nav { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 18px; } .nav .brand { font-weight:800; letter-spacing:.3px; text-decoration:none; color:inherit; } .nav .center { display:flex; gap:10px; align-items:center; } .nav .center a { text-decoration:none; color:inherit; padding:8px 12px; border:1px solid var(--nav-border); background:transparent; border-radius:999px; transition:all .15s ease; } .nav .center a:hover { background:var(--card, #f6f7f9); transform:translateY(-1px); } .nav .cta { text-decoration:none; padding:8px 14px; border-radius:999px; background:var(--brand); color:#fff !important; border:0; box-shadow:0 6px 16px rgba(17,24,39,.25); } .nav .cta:hover{ filter:brightness(1.05); transform:translateY(-1px); } footer.site { border-top:1px solid var(--nav-border); margin-top:48px; } footer.site .links { display:flex; flex-wrap:wrap; gap:12px; } footer.site a { color:inherit; text-decoration:none; border:1px solid var(--nav-border); padding:6px 10px; border-radius:999px; } footer.site a:hover { background:var(--card, #f6f7f9); } .hero { margin:28px auto 8px; padding:22px; border:1px solid var(--nav-border); border-radius:18px; background:var(--card, #f8fafc); } .hero h1 { margin:.2em 0 .4em; } .hero p.lead { color:var(--muted, #6b7280); margin:0; } .hero .actions { margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; } .theme-fab { position:fixed; right:16px; bottom:16px; width:44px; height:44px; border-radius:50%; border:1px solid var(--nav-border); background:var(--card, #f8fafc); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.15); } .theme-fab:hover { transform: translateY(-1px); } /* === End Upgrade === */