:root {
    --ink: #1b2b31;
    --muted: #5b6970;
    --line: #d7dfe0;
    --paper: #fff;
    --surface: #f2f6f5;
    --deep: #183137;
    --teal: #176d68;
    --teal-dark: #125550;
}

html { scroll-padding-top: 28px; }
body { font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
::selection { background: #b9dcd9; color: #183137; }

.hero {
    background: #183137 url("ocean-hero.jpg") center 48% / cover no-repeat;
    height: min(79svh, 700px);
    min-height: 570px;
}
.hero::before { background: rgba(5, 34, 42, .56); }
.nav { height: 76px; }
.brand { font-size: 16px; font-weight: 700; }
.brand img { box-shadow: 0 2px 9px rgba(0,0,0,.15); }
.nav-links { gap: 27px; font-size: 13px; }
.nav-links a { color: rgba(255,255,255,.84); }
.nav-links a:hover { color: #fff; }
.nav-download { border: 1px solid rgba(255,255,255,.52); border-radius: 5px; padding: 8px 16px; }
.hero-content { height: calc(100% - 76px); justify-content: center; max-width: 750px; padding-bottom: 25px; }
.hero .eyebrow { color: #b9e8df; font-family: inherit; font-size: 13px; font-weight: 650; margin-bottom: 20px; text-transform: none; }
.hero h1 { font-size: 76px; font-weight: 700; line-height: 1.05; text-shadow: 0 2px 30px rgba(0,0,0,.24); }
.hero-copy { color: #eef5f3; font-size: 20px; line-height: 1.68; margin-top: 25px; max-width: 630px; text-shadow: 0 1px 14px rgba(0,0,0,.2); }
.hero-actions { margin-top: 34px; gap: 14px; }
.hero-actions .button { min-width: 180px; }
.button { border-radius: 5px; font-size: 14px; height: 48px; }
.button-primary { background: #f5fbfa; color: #173d3e; }
.button-primary:hover { background: #fff; }
.button-secondary { background: rgba(15,39,44,.24); border-color: rgba(255,255,255,.66); color: #fff; }
.button-secondary:hover { background: rgba(255,255,255,.13); border-color: #fff; }
.hero-download-note { color: #e5eeee; font-size: 12px; line-height: 1.6; margin-top: 13px; }
.hero-download-note a { color: #fff; margin-left: 8px; text-decoration: underline; text-underline-offset: 3px; }
.hero-actions .button:focus-visible, .hero-download-note a:focus-visible, .nav-download:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hero-meta { color: #e5eeee; font-size: 12px; gap: 8px 22px; margin-top: 23px; }
.hero-meta span::before { background: #91d5cc; }

.signal-band { background: #fff; }
.signal-grid { min-height: 103px; }
.signal { border-color: #e1e7e7; padding: 20px 22px; }
.signal:first-child { border-color: #e1e7e7; }
.signal strong { font-size: 14px; }
.signal span { color: #66767b; font-size: 12px; }

.appearance-section { background: #edf3f2; border-top: 0; padding: 94px 0 104px; }
.appearance-heading { align-items: end; display: flex; gap: 52px; justify-content: space-between; margin-bottom: 34px; max-width: none; }
.appearance-heading > p { margin: 0 0 4px; max-width: 370px; }
.appearance-heading .eyebrow { color: #176d68; font-family: inherit; font-size: 13px; font-weight: 700; margin: 0 0 12px; text-transform: none; }
.appearance-heading h2 { max-width: 660px; }
.theme-showcase { display: grid; grid-template-columns: minmax(0, 1fr); }
.theme-stage { align-items: center; background: #d4e1df; display: flex; min-width: 0; overflow: hidden; padding: 22px; }
.theme-stage a { border: 1px solid rgba(15,48,51,.15); box-shadow: 0 18px 42px rgba(20,48,51,.18); display: block; margin: auto; overflow: hidden; width: 100%; }
.theme-stage img { aspect-ratio: 16 / 10; height: auto; object-fit: contain; width: 100%; }
.theme-controls { background: #fff; border: 1px solid #d8e2e0; display: grid; gap: 24px 34px; grid-template-columns: minmax(210px, .3fr) minmax(0, .7fr); min-width: 0; padding: 28px 31px 22px; }
.theme-detail { min-width: 0; }
.theme-counter { color: #176d68; font-family: Consolas, monospace; font-size: 12px; }
.theme-detail h3 { font-size: 25px; font-weight: 680; line-height: 1.2; margin-top: 13px; }
.theme-detail p { color: var(--muted); font-size: 13px; line-height: 1.75; margin-top: 9px; }
.theme-options { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.theme-group-label { color: #67787c; font-size: 12px; font-weight: 650; grid-column: 1 / -1; margin: 10px 0 1px; }
.theme-option { align-items: center; background: #fff; border: 1px solid #dce4e4; border-radius: 5px; color: #35484d; cursor: pointer; display: flex; font: inherit; font-size: 12px; font-weight: 600; gap: 9px; height: 37px; min-width: 0; padding: 4px 8px; text-align: left; transition: background .16s ease, border-color .16s ease; white-space: nowrap; }
.theme-option:hover { background: #f3f8f7; border-color: #87aaa7; }
.theme-option.is-active { background: #e3f1ee; border-color: #367a74; color: #164b48; }
.theme-option:focus-visible { outline: 2px solid #176d68; outline-offset: 2px; }
.theme-swatch { border: 1px solid rgba(0,0,0,.08); border-radius: 3px; flex: 0 0 24px; height: 24px; }
.theme-swatch.ocean { background: url("theme-ocean-20260929.png") left center/cover; }
.theme-swatch.landscape { background: url("theme-landscape-20260929.png") left center/cover; }
.theme-swatch.forest { background: url("theme-forest-20260929.png") left center/cover; }
.theme-swatch.snow { background: url("theme-snow-20260929.png") left center/cover; }
.theme-swatch.clear { background: #f2f4f5; }
.theme-swatch.coral { background: #e4b8b5; }
.theme-swatch.silver { background: #d8e4ef; }
.theme-swatch.graphite { background: #303137; }
.theme-swatch.vermilion { background: #8c5869; }
.theme-swatch.seaglass { background: #b9dbd1; }
.theme-disclaimer { border-top: 1px solid #e3e9e9; color: #6c797d; font-size: 11px; grid-column: 1 / -1; line-height: 1.6; padding-top: 15px; }

.problem-section { background: #fff; padding: 90px 0 84px; }
.section-heading { max-width: 780px; }
.section-heading .eyebrow { color: #176d68; font-family: inherit; font-size: 13px; font-weight: 700; margin-bottom: 12px; text-transform: none; }
.section-heading h2 { font-size: 37px; font-weight: 680; }
.section-heading p { color: #5b6970; font-size: 15px; line-height: 1.8; }
.problem-section .section-heading { margin-bottom: 36px; }
.problem-grid { gap: 28px; }
.problem-card { background: transparent; border: 0; border-radius: 0; border-top: 2px solid #cad8d7; min-height: 0; padding: 22px 0 0; }
.problem-index { display: none; }
.problem-card h3 { font-size: 18px; font-weight: 660; margin: 0; }
.problem-card p { font-size: 13px; line-height: 1.8; margin-top: 8px; }
.problem-answer { border-top-color: #e1e7e7; margin-top: 32px; }

.section { padding: 98px 0; }
.tool-feature { gap: 60px; }
.tool-feature + .tool-feature { margin-top: 82px; padding-top: 82px; }
.product-shot { background: #e9f0ef; border-color: #d6e1df; border-radius: 6px; box-shadow: 0 17px 40px rgba(23,52,57,.1); }
.tool-copy h3 { font-size: 27px; }
.tool-copy > p { line-height: 1.8; }
.tool-gallery a { border-color: #d6e1df; border-radius: 6px; }
.tool-gallery figcaption { font-size: 14px; }
.capture-note { font-size: 12px !important; }

.principles { background: #1d3439; padding: 88px 0; }
.principles .eyebrow { color: #aedbd1; }
.principles .section-heading p { color: #c4d4d4; }
.principle-index { display: none; }
.principle h3 { margin-top: 0; }
.principle p { color: #c2d0d0; }
.membership-section { background: #f3f6f5; }
.download-section { background: #e9f1ef; }
.download-card { border-radius: 6px; }
.download-card + .download-card { margin-top: 12px; }
.download-recommended { background: #e6f2ed; border-radius: 3px; color: var(--teal-dark); display: inline-block; font-size: 10px; font-weight: 600; margin-left: 5px; padding: 2px 5px; vertical-align: middle; }
:is(.download-card-exe, .download-card-mac) .windows-mark { background: #e9f1ef; color: var(--teal-dark); }
:is(.download-card-exe, .download-card-mac) .button { background: transparent; border-color: #a6bdb7; color: var(--teal-dark); }
:is(.download-card-exe, .download-card-mac) .button:hover { background: #eaf3f0; }
.download-card .button:focus-visible, .exe-fallback:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.exe-fallback { color: #536d71; display: inline-block; font-size: 13px; margin-top: 15px; text-decoration: underline; text-underline-offset: 3px; }
.exe-fallback:hover { color: #176d68; }
.footer { border-top: 1px solid #e0e7e6; }

@media (max-width: 900px) {
    .hero { height: min(78svh, 660px); min-height: 540px; }
    .hero h1 { font-size: 64px; }
    .appearance-heading { align-items: start; flex-direction: column; gap: 0; }
    .appearance-heading > p { margin-top: 15px; max-width: 660px; }
    .theme-stage { padding: 20px; }
    .theme-controls { gap: 10px; grid-template-columns: 1fr; padding: 25px; }
    .theme-detail { min-height: 0; margin-bottom: 17px; }
    .theme-group-label { margin-top: 12px; }
    .theme-disclaimer { margin-top: 8px; }
}

@media (max-width: 620px) {
    .hero { background-position: 36% top; height: min(79svh, 620px); min-height: 500px; }
    .hero::before { background: rgba(5,34,42,.64); }
    .nav { height: 62px; }
    .hero-content { height: calc(100% - 62px); justify-content: center; padding-bottom: 12px; }
    .hero h1 { font-size: 44px; }
    .hero .eyebrow { font-size: 12px; margin-bottom: 14px; }
    .hero-copy { font-size: 16px; line-height: 1.65; margin-top: 19px; }
    .hero-actions { margin-top: 25px; }
    .hero-actions .button { min-width: 0; }
    .button { height: 44px; }
    .hero-meta { font-size: 11px; gap: 3px 10px; margin-top: 17px; }
    .hero-meta span::before { height: 4px; width: 4px; }
    .signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .signal { min-height: 92px; padding: 13px 10px; }
    .signal strong { font-size: 12px; }
    .signal span { font-size: 11px; line-height: 1.45; }
    .appearance-section { padding: 68px 0 74px; }
    .appearance-heading h2 { font-size: 28px; }
    .appearance-heading > p { font-size: 14px; }
    .theme-stage { padding: 9px; }
    .theme-stage a { box-shadow: 0 8px 22px rgba(20,48,51,.15); }
    .theme-controls { padding: 20px 16px; }
    .theme-detail h3 { font-size: 22px; }
    .theme-options { gap: 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .theme-option { font-size: 12px; }
    .problem-section { padding: 68px 0; }
    .problem-grid { gap: 22px; }
    .problem-card { padding-top: 16px; }
    .section { padding: 74px 0; }
    .section-heading h2 { font-size: 28px; }
    .tool-feature + .tool-feature { margin-top: 65px; padding-top: 65px; }
    .tool-copy h3 { font-size: 23px; }
}

@media (max-width: 360px) {
    .hero { min-height: 500px; }
    .hero h1 { font-size: 39px; }
    .hero-copy { font-size: 15px; }
    .theme-option { font-size: 11px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .button, .theme-option { transition: none; }
}