:root { color-scheme: dark; --tint:#2B2F7E; --bg:color-mix(in srgb, var(--tint) 40%, #0A0C12); --surface:color-mix(in srgb, var(--tint) 28%, #151821); --line:rgba(255,255,255,.09); --text:#F3F5F8; --muted:rgba(243,245,248,.68); --accent:#5B8CFF; --sky:linear-gradient(180deg,#3A2FA0,#3F6FE0,#86C2F0); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
.wrap { max-width:1160px; margin:0 auto; padding:0 24px; }
nav { position:sticky; top:0; z-index:10; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); background:color-mix(in srgb, var(--bg) 78%, transparent); border-bottom:1px solid var(--line); }
nav .wrap { display:flex; align-items:center; gap:24px; height:60px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; text-decoration:none; color:var(--text); }
.brand img { width:30px; height:30px; border-radius:7px; }
.brand small { font-weight:500; color:var(--muted); font-size:14px; }
nav .links { margin-left:auto; display:flex; gap:22px; font-size:14px; } nav .links a { color:var(--muted); text-decoration:none; }
.head { background:var(--sky); padding:64px 0 96px; position:relative; }
.head::after { content:""; position:absolute; inset:auto 0 0; height:120px; background:linear-gradient(transparent,var(--bg)); }
.head .wrap { position:relative; z-index:1; }
.eyebrow { font:600 12px/1 ui-monospace,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:14px; }
h1 { font-size:clamp(36px,5vw,56px); letter-spacing:-.02em; margin:0; text-shadow:0 2px 24px rgba(0,0,0,.25); }
.updated { color:rgba(255,255,255,.8); font-size:14px; margin:12px 0 0; }
main { max-width:780px; margin:-40px auto 0; padding:0 24px 80px; position:relative; z-index:2; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:8px 32px 28px; }
.panel h2 { font-size:20px; margin:28px 0 6px; } .panel p, .panel li { color:var(--muted); }
.panel code { font:14px ui-monospace,Menlo,monospace; color:var(--text); }
footer { border-top:1px solid var(--line); padding:32px 0; color:var(--muted); font-size:14px; }
footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; } footer nav { position:static; background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; display:flex; gap:18px; flex-wrap:wrap; } footer nav a { color:var(--text); opacity:.8; text-decoration:none; }
@media (max-width:640px) { nav .links { display:none; } .panel { padding:4px 20px 22px; } .wrap, main { padding-left:16px; padding-right:16px; } }
/* Theme button: one small round button, each click moves to the next landscape — as on the other byquan.app pages. */
.theme-btn { position: fixed; z-index: 20; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(16,18,28,.72); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .15s; }
.theme-btn:hover { transform: scale(1.08); }
.theme-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.theme-btn i { width: 22px; height: 22px; border-radius: 50%; background: var(--c, #5B8CFF); box-shadow: 0 0 0 2px rgba(255,255,255,.75); transition: background .3s; }
@media (max-width: 560px) { .theme-btn { right: 14px; bottom: 14px; } }