:root { --paper:#f5f3e9; --ink:#183a30; --muted:#68756b; --accent:#163e32; --line:#d7d9cb; --faint:#e8ede1; --lime:#dcf86b; }
body { font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif; }
::selection { background:var(--lime); color:var(--accent); }
.site-header { max-width:1268px; width:88%; padding:22px 0; align-items:center; border-bottom:1px solid var(--line); }
.brand { font-family:Arial,"Microsoft YaHei",sans-serif; font-weight:800; letter-spacing:-.7px; font-size:20px; }
.brand-mark { display:grid; place-items:center; background:var(--accent); color:var(--lime); height:34px; width:34px; border-radius:50%; font-size:22px; line-height:1; }
.language-switch { border:1px solid var(--line); border-radius:30px; padding:3px; gap:3px; }
.language-switch button { padding:5px 11px; border:0; border-radius:20px; min-height:30px; }
.language-switch button[aria-pressed="true"] { color:var(--paper); background:var(--accent); }
.language-switch > span { display:none; }
.hero { max-width:1268px; width:88%; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(290px,1fr); gap:7%; align-items:center; padding:70px 0 72px; }
.hero-copy { min-width:0; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 24px; color:var(--muted); font-size:11px; letter-spacing:.06em; }
.eyebrow::before { content:""; width:7px; height:7px; background:#6f8a3f; border-radius:50%; flex:none; }
.hero-title { margin:0 0 25px; font-size:clamp(47px,5.8vw,84px); line-height:1.03; font-family:Arial,"Microsoft YaHei",sans-serif; font-weight:800; letter-spacing:-.07em; overflow-wrap:normal; }
.hero-subtitle { margin:25px 0 10px; font-size:19px; font-weight:700; line-height:1.5; }
.hero-description { max-width:530px; color:var(--muted); font-size:15px; line-height:1.85; margin-bottom:27px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero-actions a { display:inline-flex; align-items:center; gap:14px; min-height:48px; padding:12px 21px; border:1px solid var(--accent); border-radius:3px; font-size:13px; font-weight:700; line-height:1.5; text-decoration:none; }
.hero-actions a:first-child { background:var(--accent); color:var(--paper); }
.hero-actions a+ a { border-color:var(--line); }
.hero-actions a:hover { text-decoration:underline; }
.hero-meta { margin-top:22px; color:var(--muted); font-family:Consolas,monospace; font-size:10px; }
.hero-visual { position:relative; padding:22px 2px 18px; isolation:isolate; }
.hero-visual::before { content:""; position:absolute; z-index:-1; width:80%; height:88%; left:14%; top:2%; background:#e2e6d6; border-radius:3px; transform:rotate(7deg); }
.guide-card { position:relative; padding:29px; color:var(--paper); background:var(--accent); border:1px solid var(--accent); border-radius:4px; transform:rotate(-3deg); box-shadow:0 21px 40px #173e321a; }
.guide-card-top { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ffffff32; padding-bottom:18px; font-family:Consolas,monospace; font-size:10px; letter-spacing:.12em; line-height:1.6; }
.card-number { opacity:.65; }
.card-target { color:#bdcebd; font-size:11px; margin-top:24px; }
.hour-display { display:flex; align-items:center; padding:20px 0 30px; color:var(--lime); font-size:clamp(84px,9vw,140px); font-weight:800; line-height:1; letter-spacing:-.08em; }
.hour-unit { color:#d1ddce; font-size:17px; line-height:1.6; letter-spacing:0; margin-left:17px; }
.hour-unit small { display:block; font-size:10px; }
.mini-flow { display:flex; justify-content:space-between; gap:10px; list-style:none; padding:17px 0; margin:0; border-top:1px solid #ffffff32; border-bottom:1px solid #ffffff32; font-size:11px; line-height:1.7; }
.mini-flow li { min-width:0; }
.mini-flow li > span { display:block; color:#a9bd9f; font-family:Consolas,monospace; font-size:9px; margin-bottom:5px; }
.card-note { font-family:Consolas,monospace; font-size:10px; color:#bdcebd; margin:20px 0 24px; line-height:1.8; }
.card-bottom { display:flex; justify-content:space-between; font-size:8px; letter-spacing:.06em; color:#8ea584; }
.sticker { position:absolute; top:1px; right:-26px; width:90px; height:90px; display:grid; place-items:center; align-content:center; text-align:center; background:var(--lime); color:var(--accent); border:1px solid var(--accent); border-radius:50%; box-shadow:0 0 0 5px var(--paper); transform:rotate(12deg); font-family:Consolas,monospace; font-size:10px; font-weight:700; line-height:1.5; }
.visual-caption { display:block; font-size:8px; letter-spacing:.16em; color:#87917c; text-align:center; margin-top:28px; }
.topic-picker { position:relative; z-index:2; display:inline-block; max-width:100%; }
.topic-button { display:inline; z-index:0; position:relative; border:0; background:transparent; padding:0 2px 0 0; margin:0; color:var(--accent); font:inherit; font-weight:inherit; letter-spacing:inherit; line-height:inherit; text-align:left; }
.topic-button::before { content:""; position:absolute; z-index:-1; left:-4px; right:0; bottom:3px; height:70%; background:var(--lime); transform:rotate(-2deg); }
.topic-chevron { display:inline-block; font-size:.35em; vertical-align:middle; letter-spacing:0; margin-left:5px; }
.topic-button[aria-expanded="true"] .topic-chevron { transform:rotate(180deg); }
.topic-menu { position:absolute; left:auto; right:0; top:calc(100% + 12px); z-index:20; width:300px; max-width:calc(100vw - 50px); display:flex; flex-direction:column; padding:7px; border:1px solid var(--line); border-radius:4px; background:#fcfbf5; box-shadow:0 14px 40px #173e3222; font-family:Arial,"Microsoft YaHei",sans-serif; font-weight:400; font-size:15px; letter-spacing:0; line-height:1.5; }
.topic-menu[hidden] { display:none; }
.topic-menu a { padding:12px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:4px; border-radius:2px; }
.topic-menu a small { font-size:11px; color:var(--muted); }
.topic-menu a[aria-current="page"], .topic-menu a:hover { background:var(--faint); }
.hero-driving .hero-title { font-size:clamp(45px,5.15vw,74px); }
.hero-driving .topic-menu { left:auto; right:0; }
.hero-driving .hour-display { font-size:110px; }
.page-shell { max-width:1160px; width:88%; margin:0 auto; padding-top:30px; border-top:1px solid var(--line); }
.page-index { padding-top:31px; }
.chapter { padding-top:31px; }
.article > .chapter:first-of-type { border-top:0; }
.article h2,.article h3,.article h4 { font-family:Arial,"Microsoft YaHei",sans-serif; }
.article h2 { letter-spacing:-.035em; }
.series-entry h3 { font-family:Arial,"Microsoft YaHei",sans-serif; font-size:21px; font-weight:700; letter-spacing:-.04em; }
.series-entry a { color:var(--accent); }
.series-entry a[aria-current="page"] { text-decoration:none; }
.drive-table-wrap { overflow-x:auto; }
.drive-hours-table { min-width:460px; }
.drive-rule-list { margin:20px 0; }
.drive-rule-list dt { font-weight:700; margin-top:20px; }
.drive-rule-list dd { margin:5px 0 0; color:#514c49; }
.drive-last-notes li { margin-bottom:12px; }
.drive-source-list { padding-left:20px; }
.drive-source-list li { margin:14px 0; }
.drive-source-list p { margin:5px 0 0; font-size:12px; color:var(--muted); }
@media(min-width:1500px){ .hero { gap:100px; } }
@media(max-width:1050px){ .site-header,.hero,.page-shell{width:90%;} .hero{gap:5%;grid-template-columns:1.3fr 1fr;padding:60px 0;} .hero-title{font-size:clamp(45px,6.2vw,66px);} .guide-card{padding:24px;} .sticker{right:-10px;width:75px;height:75px;font-size:9px;} .hour-display{font-size:105px;} .hero-driving .hero-title{font-size:54px;} }
@media(max-width:760px){ .site-header{width:88%;margin:0 auto;min-width:0;} .brand{gap:10px;font-size:18px;} .hero{width:88%;grid-template-columns:1fr;padding:42px 0;gap:32px;} .hero-title,.hero-driving .hero-title{font-size:clamp(43px,8vw,64px);} .hero-subtitle{font-size:18px;} .hero-description{font-size:14px;} .hero-visual{max-width:400px;width:93%;margin:0 auto;padding-top:12px;} .guide-card{padding:25px;} .hour-display{font-size:118px;} .sticker{right:-8px;top:-2px;} .hero-meta{margin-top:20px;} .visual-caption{margin-top:21px;} .page-shell{display:block;width:88%;margin:0 auto;padding-top:0;} .contents-mobile{margin-top:0;padding:22px 0;} .topic-menu{font-size:15px;} .hero-driving .topic-menu{left:0;right:auto;} .hero-driving .hour-display{font-size:105px;} }
@media(max-width:400px){ .hero-title,.hero-driving .hero-title{font-size:43px;} .hero-actions{gap:10px;} .hero-actions a{padding:11px 14px;font-size:12px;} .topic-menu{width:270px;} .guide-card{padding:21px;} .sticker{width:65px;height:65px;font-size:9px;} .hour-display{font-size:106px;} .language-switch{gap:0;} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
@media print{ .hero{display:block;width:100%;padding:20px 0;} .hero-title,.hero-driving .hero-title{font-size:32pt;} .hero-visual,.hero-actions,.topic-chevron,.topic-menu{display:none!important;} .page-shell{display:block;width:100%;border:0;} .topic-button::before{display:none;} }