:root { color-scheme: dark; --bg:#0b100d; --panel:#151b18; --panel-2:#1d2521; --line:#39443f; --text:#f2f0f4; --muted:#adb7b2; --gold:#d1ac45; --green:#61c77c; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:Inter,Arial,"Noto Sans TC",sans-serif; line-height:1.65; overflow-wrap:anywhere; }
a { color:inherit; }
img { display:block; max-width:100%; height:auto; }
.site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px clamp(20px,5vw,72px); border-bottom:1px solid var(--line); background:rgba(11,16,13,.96); }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); font-size:24px; font-weight:900; letter-spacing:2px; text-decoration:none; }
.brand img { width:46px; height:46px; object-fit:contain; }
.brand span span { color:var(--gold); }
.site-header nav { display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.site-header nav a { color:var(--muted); font-weight:700; text-decoration:none; }
.site-header nav a:hover { color:var(--gold); }
.button { display:inline-block; border:1px solid var(--gold); background:var(--gold); color:#101511!important; padding:13px 20px; font-weight:900; text-decoration:none; }
.button.small { padding:9px 14px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:10px; max-width:1280px; margin:0 auto; padding:22px clamp(20px,5vw,56px); color:var(--muted); }
.breadcrumbs a { color:var(--muted); }
main { max-width:1280px; margin:0 auto; padding:0 clamp(20px,5vw,56px) 72px; }
.hero { min-height:390px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line); padding:clamp(34px,7vw,86px); background:linear-gradient(125deg,#102218,#101512 65%); }
.hero.compact { min-height:300px; }
.eyebrow { margin:0 0 12px; color:var(--gold); font-size:14px; font-weight:900; letter-spacing:2px; text-transform:uppercase; }
h1,h2 { margin-top:0; line-height:1.18; }
h1 { margin-bottom:18px; font-size:clamp(42px,7vw,82px); letter-spacing:-2px; }
h2 { font-size:clamp(24px,3vw,36px); }
.hero-copy { max-width:820px; margin:0; color:var(--muted); font-size:clamp(18px,2.2vw,25px); }
.card-grid,.movement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:28px; }
.category-card,.movement-card,.guide-section,.muscles,.safety-note { border:1px solid var(--line); background:var(--panel); }
.category-card { min-height:250px; padding:30px; }
.category-card p { color:var(--muted); }
.category-card h2 a,.movement-card h2 a { text-decoration:none; }
.text-link { color:var(--gold); font-weight:800; }
.movement-card { overflow:hidden; }
.movement-card .movement-image { display:block; aspect-ratio:23/18; overflow:hidden; background:#101512; }
.movement-card img { width:100%; height:100%; object-fit:cover; }
.movement-card>div { padding:22px; }
.movement-card h2 { margin-bottom:8px; font-size:25px; }
.movement-card p:last-child { margin:0; color:var(--muted); }
.movement-grid.compact { grid-template-columns:repeat(4,minmax(0,1fr)); }
.movement-card.is-compact h2 { font-size:20px; }
.exercise-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,.85fr); gap:34px; align-items:center; border:1px solid var(--line); padding:clamp(24px,5vw,56px); background:linear-gradient(135deg,#132017,#111512); }
.exercise-hero>* { min-width:0; }
.exercise-hero figure { margin:0; border:1px solid var(--line); background:#0d120f; }
.exercise-hero figure img { width:100%; }
.exercise-hero figcaption { padding:10px 14px; color:var(--muted); font-size:14px; }
.quick-facts { display:grid; gap:14px; margin-top:28px; }
.quick-facts div { display:grid; grid-template-columns:120px 1fr; gap:14px; padding-top:14px; border-top:1px solid var(--line); }
.quick-facts dt { color:var(--gold); font-weight:900; }
.quick-facts dd { margin:0; }
.muscles { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:22px; padding:30px; }
.muscles h2,.muscles p { margin-bottom:0; }
.muscles p:last-child { color:var(--muted); font-size:19px; }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
.guide-section { padding:28px; }
.guide-section li+li { margin-top:12px; }
.guide-section.warning { border-color:#765a2d; }
.safety-note { margin-top:22px; padding:24px 28px; border-left:5px solid var(--gold); }
.safety-note strong { color:var(--gold); font-size:20px; }
.safety-note p { margin-bottom:0; color:var(--muted); }
.related { margin-top:64px; }
footer { display:flex; justify-content:space-between; gap:24px; padding:28px clamp(20px,5vw,72px); border-top:1px solid var(--line); color:var(--muted); }
footer p { margin:0; color:var(--gold); font-weight:900; letter-spacing:2px; }
footer div { display:flex; gap:18px; }
@media (max-width:900px) { .card-grid,.movement-grid,.movement-grid.compact { grid-template-columns:1fr 1fr; } .exercise-hero { grid-template-columns:minmax(0,1fr); } }
@media (max-width:640px) { .site-header { flex-direction:column; align-items:stretch; gap:14px; padding:14px 20px 18px; } .site-header nav { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; width:100%; } .site-header nav a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:8px; border:1px solid var(--line); text-align:center; } .site-header nav>a:not(.button) { font-size:14px; } .site-header nav .button { grid-column:auto; } .card-grid,.movement-grid,.movement-grid.compact,.guide-grid,.muscles { grid-template-columns:minmax(0,1fr); } h1 { font-size:42px; letter-spacing:-1px; } .hero { min-height:330px; padding:32px 24px; } .exercise-hero { padding:24px 18px; } .quick-facts div { grid-template-columns:minmax(0,1fr); gap:4px; } footer { flex-direction:column; } }