:root { --ink:#10233b; --muted:#607086; --paper:#f4f5f2; --card:#fff; --navy:#0a1b31; --teal:#0f766e; --teal-soft:#d9f1ed; --gold:#d1a23b; --border:#dce3e5; --shadow:0 18px 48px rgba(15,35,59,.09); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 8% 3%,rgba(15,118,110,.1),transparent 27rem),var(--paper); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang TC",sans-serif; line-height:1.65; }
a { color:inherit; } .app-shell { min-height:100vh; } .topbar, main, footer { width:min(1200px,calc(100% - 40px)); margin-inline:auto; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 0; }.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }.brand-mark { width:48px; height:48px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--navy),var(--teal)); border-radius:14px; font-size:1.35rem; font-weight:900; }.brand small { display:block; color:var(--muted); font-size:.74rem; letter-spacing:.08em; }.brand strong { font-size:1rem; }.home-link { padding:10px 15px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.78); text-decoration:none; font-weight:750; }
main { display:grid; gap:22px; padding-bottom:30px; }.hero { min-height:400px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); align-items:center; gap:56px; padding:clamp(32px,6vw,76px); color:#fff; border-radius:28px; background:radial-gradient(circle at 78% 28%,rgba(32,181,166,.34),transparent 24rem),linear-gradient(135deg,#071528,var(--navy)); box-shadow:var(--shadow); }.eyebrow { margin:0 0 8px; color:var(--teal); font-size:.74rem; font-weight:900; letter-spacing:.13em; }.hero .eyebrow { color:#72d8cb; }.hero h1 { margin:0 0 18px; font-size:clamp(2.6rem,6vw,5.4rem); line-height:1.03; letter-spacing:-.055em; }.hero-intro { max-width:690px; margin:0; color:#dbe5ef; font-size:1.08rem; }.hero-note { padding:24px; border:1px solid rgba(255,255,255,.18); border-radius:18px; background:rgba(255,255,255,.09); }.hero-note span { color:#a7e8df; font-size:.78rem; font-weight:800; letter-spacing:.09em; }.hero-note strong { display:block; margin:8px 0; font-size:1.3rem; line-height:1.3; }.hero-note p { margin:0; color:#dbe5ef; }
.answer-grid,.oversight-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.answer-grid article,.oversight-grid article,.section-block,.sources,.takeaway { padding:24px; border:1px solid var(--border); border-radius:18px; background:var(--card); box-shadow:var(--shadow); }.answer-grid span { color:var(--teal); font-weight:900; }.answer-grid h2,.oversight-grid strong { display:block; margin:8px 0; font-size:1.2rem; }.answer-grid p,.oversight-grid p { margin:0; color:var(--muted); }.section-heading { margin-bottom:18px; }.section-heading h2,.takeaway h2,.case-block h2 { margin:0; font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.25; letter-spacing:-.03em; }.flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:12px; }.flow article { padding:20px; border-radius:14px; background:#f1f7f6; }.flow b { color:var(--teal); }.flow p { margin:8px 0 0; color:var(--muted); }.flow i { align-self:center; color:var(--gold); font-size:1.7rem; font-style:normal; }.source-caption { margin:18px 0 0; color:var(--muted); font-size:.9rem; }.case-block { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:30px; color:#fff; border-radius:18px; background:linear-gradient(135deg,#102d4d,#0f766e); box-shadow:var(--shadow); }.case-block .eyebrow { color:#a7e8df; }.case-block p:not(.eyebrow) { max-width:790px; margin:12px 0 0; color:#def0ed; }.case-block a { flex:none; padding:11px 16px; border-radius:10px; color:var(--ink); background:#fff; text-decoration:none; font-weight:800; }.takeaway { border-color:#bddfd9; background:linear-gradient(135deg,#e8f5f1,#fff); }.takeaway p { margin:12px 0 0; color:var(--muted); }.sources ol { margin:0; padding:0; list-style:none; }.sources li { display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--border); }.sources li:first-child { border-top:0; }.sources a { color:#075c56; font-weight:800; }.sources span { flex:none; color:var(--muted); } footer { display:flex; justify-content:space-between; padding:20px 0 34px; color:var(--muted); font-size:.9rem; } footer a { color:var(--ink); font-weight:800; }
@media (max-width:780px) { .topbar,.hero,.case-block { align-items:flex-start; }.topbar,.case-block { flex-direction:column; }.hero,.answer-grid,.oversight-grid { grid-template-columns:1fr; }.hero { min-height:0; gap:28px; padding:32px 24px; }.flow { grid-template-columns:1fr; }.flow i { transform:rotate(90deg); justify-self:center; }.sources li { flex-direction:column; gap:4px; }.home-link { align-self:stretch; text-align:center; } }