:root { color-scheme: light dark; --bg: #f5f7f6; --surface: #fff; --text: #1b3431; --muted: #526660; --accent: #176953; --border: #cbd8d2; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 "Segoe UI", system-ui, sans-serif; }
main { max-width: 1080px; margin: auto; padding: 64px 28px 24px; }
.eyebrow, .step { color: var(--accent); font-size: .8rem; font-weight: 650; letter-spacing: .05em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.15; letter-spacing: -.035em; margin: 24px 0; }
.intro { max-width: 760px; color: var(--muted); font-size: 1.15rem; }
.guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 40px 0; }
.card { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.card:hover { border-color: var(--accent); }
.card h2 { font-size: 1.4rem; margin: 18px 0 6px; }
.card h2 span { float: right; color: var(--accent); }
.card p { color: var(--muted); margin-bottom: 24px; }
.action { color: var(--accent); font-weight: 650; margin-top: auto; }
a { color: var(--accent); text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.shortcuts { border-top: 1px solid var(--border); padding-top: 16px; }
.shortcuts h2 { font-size: 1.1rem; }
.shortcuts ul { padding-left: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px; }
footer { margin-top: 48px; color: var(--muted); font-size: .85rem; }
@media (max-width: 650px) { main { padding: 32px 20px 24px; } .guides, .shortcuts ul { grid-template-columns: 1fr; } .card { padding: 24px; } }
@media (prefers-color-scheme: dark) { :root { --bg: #14201e; --surface: #1d2c28; --text: #e8efeb; --muted: #b4c5bc; --accent: #8ed5b8; --border: #40574e; } }