:root { color-scheme: dark; font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif; background: #10141d; color: #eef3fb; }
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.7; }
a { color: #8cd7ff; } .container { width: min(100% - 40px, 980px); margin: auto; }
header { border-bottom: 1px solid #293342; background: #151b27; } nav { display: flex; justify-content: space-between; align-items: center; min-height: 64px; gap: 20px; }
.brand { color: #fff; font-weight: 750; text-decoration: none; font-size: 1.2rem; } nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; } nav a { text-decoration: none; }
.hero { padding: 82px 0 54px; background: radial-gradient(circle at top right, #184664, transparent 42%), #10141d; } h1 { font-size: clamp(2.2rem, 7vw, 4.8rem); line-height: 1.1; letter-spacing: -.04em; margin: 0; } h2 { line-height: 1.25; margin-top: 0; }
.lead { font-size: 1.2rem; max-width: 650px; color: #c4d2e2; }.badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }.badge { background: #203043; border: 1px solid #3a526b; color: #d7eaff; border-radius: 999px; padding: 5px 12px; font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }.button { display: inline-block; padding: 11px 18px; border-radius: 8px; text-decoration: none; font-weight: 700; background: #50c5ff; color: #08121b; }.button.secondary { color: #e8f4fc; background: #243345; }.button.disabled { background: #3d4651; color: #bac2cc; cursor: not-allowed; }
main { padding: 54px 0; } section { margin: 0 0 54px; }.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }.card { padding: 22px; border: 1px solid #2a3545; border-radius: 12px; background: #171e2a; }.card h3 { margin-top: 0; } ol, ul { padding-left: 1.4rem; }.notice { padding: 18px; border-left: 4px solid #ffbf69; background: #29251f; border-radius: 4px; } code { background: #202b3a; padding: 2px 5px; border-radius: 4px; word-break: break-all; } footer { padding: 28px 0; border-top: 1px solid #293342; color: #aebdce; font-size: .9rem; } .small { color: #aebdce; font-size: .9rem; }
@media (max-width: 560px) { nav { align-items: flex-start; padding: 16px 0; flex-direction: column; } nav ul { gap: 14px; }.hero { padding-top: 56px; } }