@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root { color-scheme: light; --ink: #202b27; --muted: #65716b; --paper: #edf1ec; --line: #d4ddd6; --pink: #df5582; --green: #1b614b; --gold: #c68e3f; --mono: 'DM Mono', 'Courier New', monospace; --sans: 'DM Sans', 'Segoe UI', sans-serif; --display: 'Playfair Display', Georgia, serif; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: var(--ink); font-family: var(--sans); background-color: var(--paper); background-image: radial-gradient(#cbd5ce 0.7px, transparent 0.7px), linear-gradient(135deg, #edf1ec, #f4f4ec 65%, #e8eee8); background-size: 20px 20px, auto; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #b27a31; outline-offset: 4px; }
.selector-shell { max-width: 1320px; min-height: 100vh; display: flex; flex-direction: column; margin: 0 auto; padding: 0 6%; }
.selector-header { min-height: 74px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(34, 54, 44, .18); }
.selector-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-family: var(--mono); font-size: 9px; letter-spacing: 1px; }
.selector-brand > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.selector-brand b { color: #77847c; font-size: 8px; font-weight: 400; }
.selector-brand-mark { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 3px; background: #1e4234; color: #f3f5ed; font-family: var(--display); font-size: 20px; font-weight: 700; }
.selector-brand-mark span { color: #a8c166; }
.header-meta, .selector-kicker, .mode-label, .mode-index, .selector-footer { font-family: var(--mono); font-size: 9px; letter-spacing: .9px; }
.header-meta { display: flex; align-items: center; gap: 9px; color: #67756c; }
.status-indicator { width: 7px; height: 7px; border-radius: 50%; background: #4c9773; box-shadow: 0 0 0 3px #d6e8d8; }
.selector-main { flex: 1; padding: 58px 0 38px; }
.selector-intro { max-width: 710px; margin: 0 auto 37px; text-align: center; }
.selector-kicker { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 13px; color: #64756a; }
.selector-kicker span:first-child { color: #3b765d; }
.kicker-divider { width: 20px; height: 1px; background: #99a99d; }
h1 { margin: 0; font-family: var(--display); font-size: clamp(39px, 5vw, 59px); font-weight: 500; line-height: 1.08; }
h1 em { color: var(--green); font-weight: 500; }
.selector-intro > p:last-child { max-width: 620px; margin: 15px auto 0; color: #64716a; font-size: 13px; line-height: 1.5; }
.intro-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 27px; margin-top: 23px; color: #78857c; font-family: var(--mono); font-size: 7px; letter-spacing: .6px; }
.intro-stats span { display: inline-flex; align-items: center; gap: 6px; }
.intro-stats strong { color: var(--green); font-size: 12px; font-weight: 500; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mode-card { min-width: 0; display: flex; flex-direction: column; padding: 20px; border: 1px solid #d7ded7; border-radius: 5px; background: rgba(255, 255, 255, .76); text-decoration: none; box-shadow: 0 7px 22px rgba(34, 49, 40, .035); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; animation: rise-in .45s ease both; }
.mode-card:nth-child(2) { animation-delay: .1s; }
.mode-card:hover { transform: translateY(-4px); border-color: #8aa595; box-shadow: 0 14px 28px rgba(34, 49, 40, .10); }
.beginner-card { --accent: var(--pink); --accent-soft: #fff1f4; }
.advanced-card { --accent: #2b7055; --accent-soft: #edf5eb; animation-delay: .1s; }
.mode-card-top { display: flex; align-items: center; justify-content: space-between; }
.mode-label { display: flex; align-items: center; gap: 8px; color: #6d7971; font-size: 8px; }
.mode-index { color: var(--accent); font-size: 9px; }
.mode-arrow { color: var(--accent); font-size: 16px; transition: transform .2s ease; }
.mode-card:hover .mode-arrow { transform: translate(2px, -2px); }
.mode-visual { height: 147px; display: grid; place-items: center; overflow: hidden; margin: 16px 0 17px; border: 1px solid #e3e7e0; border-radius: 3px; background: var(--accent-soft); }
.mode-visual svg { width: min(100%, 350px); height: 100%; }
.mode-card h2 { margin: 0 0 7px; font-family: var(--display); font-size: 24px; font-weight: 600; }
.mode-card > p { min-height: 42px; margin: 0; color: #68746c; font-size: 11px; line-height: 1.65; }
.outcome { min-height: 43px; display: flex; align-items: center; gap: 9px; margin-top: 13px; padding: 8px 10px; border-left: 2px solid var(--accent); background: rgba(255, 255, 255, .62); color: #66736a; font-size: 9px; line-height: 1.35; }
.outcome-mark { color: var(--accent); font-family: var(--mono); font-size: 9px; }
.outcome b { color: #697a6e; font-family: var(--mono); font-size: 7px; letter-spacing: .6px; }
.mode-details { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 14px 0 17px; padding: 12px 0; border-top: 1px solid #e5e9e3; border-bottom: 1px solid #e5e9e3; color: #65736a; font-family: var(--mono); font-size: 8px; }
.mode-details span::before { content: '•'; margin-right: 6px; color: var(--accent); }
.mode-cta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; color: var(--accent); font-size: 11px; font-weight: 700; }
.mode-cta span { font-size: 15px; }
.selector-note { display: flex; align-items: center; gap: 11px; margin-top: 13px; padding: 9px 13px; border: 1px solid #d6e0d7; border-radius: 3px; background: rgba(249, 251, 246, .73); color: #68776d; font-size: 8px; line-height: 1.4; }
.note-icon { width: 20px; height: 20px; display: grid; flex: 0 0 20px; place-items: center; border: 1px solid #94aa99; border-radius: 50%; color: #4e7b5e; font-family: var(--mono); font-size: 13px; }
.selector-note b { margin-right: 5px; color: #4e6d59; font-family: var(--mono); font-size: 7px; letter-spacing: .7px; }
.note-aside { margin-left: auto; color: #8a968c; font-family: var(--mono); font-size: 7px; white-space: nowrap; }
.note-aside i { width: 5px; height: 5px; display: inline-block; margin-left: 5px; border-radius: 50%; background: #78a388; }
.selector-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 0; border-top: 1px solid rgba(34, 54, 44, .16); color: #7c8980; font-size: 8px; }
.selector-footer i { width: 5px; height: 5px; display: inline-block; margin: 0 4px; border-radius: 50%; background: #78a388; vertical-align: 1px; }
.selector-footer span:last-child { color: #557361; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) { .selector-shell { padding: 0 18px; } .selector-header { min-height: 64px; } .header-meta { max-width: 145px; font-size: 7px; line-height: 1.5; } .selector-main { padding: 39px 0 25px; } .selector-intro { margin-bottom: 22px; } .selector-intro > p:last-child { font-size: 12px; } .intro-stats { justify-content: flex-start; gap: 8px 14px; margin-top: 15px; } .intro-stats span:last-child { width: 100%; } .mode-grid { grid-template-columns: 1fr; gap: 12px; } .mode-card { padding: 15px; } .mode-visual { height: 125px; margin: 12px 0 13px; } .mode-card h2 { font-size: 22px; } .mode-card > p { min-height: 0; } .outcome { margin-top: 10px; } .mode-details { margin: 10px 0 13px; } .selector-note { align-items: flex-start; flex-wrap: wrap; } .note-aside { width: 100%; margin-left: 31px; } .selector-footer { align-items: flex-start; flex-direction: column; font-size: 7px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }