html { background: #edf4fa; color: #203449; }
body { margin: 0; padding: 18px; font-family: "Microsoft JhengHei", "Microsoft YaHei", Arial, sans-serif; font-size: 17px; line-height: 1.8; }
.page { max-width: 1040px; margin: 0 auto; background: #ffffff; border: 1px solid #d5e1eb; padding: 26px; }
.masthead { border-bottom: 4px solid #12648f; padding-bottom: 16px; margin-bottom: 20px; }
.masthead h1 { font-size: 32px; margin: 0; color: #203449; }
.brand { font-size: 15px; font-weight: bold; letter-spacing: 1px; color: #12648f; margin: 0; }
h1 { font-size: 28px; line-height: 1.5; color: #203449; margin: 0 0 10px; }
h2 { font-size: 23px; line-height: 1.6; color: #203449; margin: 0 0 12px; }
h3 { font-size: 20px; line-height: 1.6; margin: 16px 0 8px; color: #203449; }
h4 { font-size: 18px; line-height: 1.6; margin: 12px 0 6px; color: #203449; }
p { margin: 8px 0 14px; }
a { color: #12648f; text-decoration: underline; }
a:visited { color: #0b4b70; }
a:hover, a:focus { color: #0b4b70; background: #d5eafa; }
.toc { background: #e6f3fc; border: 1px solid #d5e1eb; padding: 18px 22px; }
.toc ul { margin: 0; padding-left: 26px; }
.toc li { margin: 8px 0; font-size: 20px; font-weight: bold; }
.reading-note, .category-description, .step-description, .diagram-caption, .mini-note { color: #50667b; }
.category { margin-top: 44px; border-top: 3px solid #12648f; padding-top: 22px; }
.subcategory { margin-top: 38px; border-top: 3px solid #12648f; padding-top: 22px; }
.subcategory > h2 { font-size: 27px; }
.upgrade-routes { margin: 18px 0; padding: 16px 20px; background: #e6f3fc; border: 2px solid #527a95; }
.upgrade-routes p { margin: 8px 0; }
.upgrade-routes a { display: block; padding: 10px 14px; background: #ffffff; border: 1px solid #91bdd9; font-size: 19px; font-weight: bold; }
.step-toc { background: #f4f8fc; padding: 12px 20px 12px 46px; border: 1px solid #d5e1eb; }
.step-toc li { margin: 6px 0; }
.guide-step { margin: 30px 0; padding: 22px 0 26px; border-bottom: 1px solid #d5e1eb; }
.step-number, .visual-number { display: inline-block; min-width: 24px; padding: 2px 8px; margin-right: 8px; background: #12648f; color: #ffffff; font-weight: bold; text-align: center; }
.instructions { margin: 18px 0; padding-left: 28px; }
.instructions li { margin-bottom: 13px; padding-left: 5px; }
.notice, .situation, .step-tip, .rule-strip, .approval-card { background: #e6f3fc; border: 1px solid #91bdd9; padding: 14px 18px; margin: 18px 0; color: #203449; }
.situation > span { font-weight: bold; }
.situation p, .notice p { margin-bottom: 0; }
.rule-strip strong, .rule-strip span { display: block; }
.download-panel, .post-composer, .next-shot { border: 1px solid #d5e1eb; background: #f4f8fc; padding: 18px; margin: 18px 0; }
.download-panel h3 { margin-top: 0; }
.download-note, .source-note { color: #50667b; font-size: 16px; margin-top: 12px; }
.button, a.button:visited { display: inline-block; background: #12648f; color: #ffffff; border: 2px solid #12648f; padding: 10px 18px; font-weight: bold; text-decoration: underline; margin: 8px 0; }
a.button:hover, a.button:focus { background: #0b4b70; color: #ffffff; }
.route-table { border-collapse: collapse; width: 100%; margin: 18px 0; background: #e6f3fc; }
.route-table th { width: 40px; text-align: center; color: #ffffff; background: #12648f; padding: 8px; border: 1px solid #527a95; }
.route-table td { padding: 9px 14px; border: 1px solid #91bdd9; font-weight: bold; }
.legacy-figure { margin: 18px 0 24px; padding: 12px; border: 1px solid #d5e1eb; background: #f4f8fc; }
.image-frame { text-align: center; overflow: auto; }
img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; }
.legacy-figcaption { font-size: 16px; line-height: 1.7; margin-top: 10px; color: #50667b; }
.visual-step { margin: 26px 0; }
.visual-step-heading { margin-bottom: 12px; }
.visual-step-heading h3 { margin: 4px 0; }
.legacy-details { margin: 20px 0; padding: 14px 18px; background: #f4f8fc; border: 1px solid #d5e1eb; }
.legacy-details h4 { margin-top: 0; }
.variant-title { padding: 10px 16px; background: #d5eafa; border-left: 5px solid #12648f; margin-top: 26px; }
.post-text { margin: 14px 0; padding: 14px; border: 1px solid #91bdd9; color: #203449; background: #ffffff; font-family: "Microsoft JhengHei", "Microsoft YaHei", monospace; font-size: 18px; line-height: 1.9; white-space: pre-wrap; word-wrap: break-word; }
.path-block { padding: 12px 16px; background: #e6f3fc; border: 1px solid #d5e1eb; margin: 16px 0; word-wrap: break-word; }
.path-block span, .path-block code { display: block; }
code, kbd { color: #203449; background: #d5eafa; font-family: Consolas, "Courier New", monospace; font-size: 16px; }
kbd { border: 1px solid #91bdd9; padding: 1px 5px; }
.approved-badge { display: inline-block; font-weight: bold; color: #145d3b; background: #e3f5e8; border: 1px solid #77a487; padding: 6px 14px; margin-bottom: 8px; }
.reward-summary small { display: block; font-size: 16px; color: #50667b; }
.tool-feature-grid { margin: 20px 0; }
.tool-feature-grid > a { display: block; padding: 14px 18px; margin: 10px 0; border: 1px solid #91bdd9; background: #e6f3fc; color: #203449; text-decoration: none; }
.tool-feature-grid > a:hover, .tool-feature-grid > a:focus { background: #d5eafa; }
.tool-feature-grid strong, .tool-feature-grid b { display: block; font-size: 19px; color: #12648f; text-decoration: underline; }
.tool-feature-grid small, .tool-feature-grid span { display: block; color: #50667b; }
.tool-heading { margin: 20px 0 12px; padding: 12px 16px; border-left: 5px solid #12648f; background: #e6f3fc; }
.tool-heading h3, .tool-heading p { margin: 4px 0; }
.tool-benefits, .salon-tour { margin: 18px 0; }
.tool-benefits > div, .tool-benefits > li, .tool-benefits > .legacy-article, .salon-tour > div, .salon-tour > li { display: block; padding: 14px 18px; margin: 10px 0; border: 1px solid #d5e1eb; background: #f4f8fc; }
.tool-benefits strong, .salon-tour strong { color: #203449; }
.tool-benefits h3, .salon-tour h3 { margin-top: 0; }
.tool-benefits p, .salon-tour p { margin-bottom: 0; }
.tool-sequence { margin: 18px 0; padding-left: 32px; }
.tool-sequence > li { padding: 8px 6px; margin-bottom: 8px; border-bottom: 1px solid #d5e1eb; }
.tool-sequence > li > strong { display: block; color: #203449; }
.folder-comparison { margin: 18px 0; }
.folder-comparison > div { padding: 16px 18px; margin: 10px 0; border: 1px solid #91bdd9; background: #e6f3fc; word-wrap: break-word; }
.folder-comparison strong, .folder-comparison code, .folder-comparison span { display: block; }
.folder-comparison code { padding: 8px 10px; margin: 8px 0; white-space: pre-wrap; word-wrap: break-word; }
.license-text { padding: 14px; border: 1px solid #d5e1eb; background: #ffffff; font-family: Consolas, "Courier New", monospace; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; color: #203449; }
.back-top { margin-top: 20px; font-size: 16px; }
.footer { border-top: 3px solid #12648f; padding-top: 20px; margin-top: 30px; color: #50667b; font-size: 16px; }
@media print { body { background: #ffffff; padding: 0; } .page { border: 0; padding: 0; } .back-top { display: none; } .guide-step { page-break-inside: auto; } a { color: #222222; } }
/* A calm reading layout with fallbacks understood by older Windows browsers. */
html { background: #f4f8fc; color: #203449; }
body { padding: 28px 20px; line-height: 1.85; }
.page { max-width: 1040px; padding: 34px; border: 1px solid #d5e1eb; background: #f4f8fc; border-radius: 20px; }
.masthead { padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid #d5e1eb; }
.masthead h1 { font-size: 36px; margin: 8px 0; }
.masthead p { color: #50667b; margin: 4px 0 12px; }
.masthead .brand { color: #12648f; font-size: 13px; letter-spacing: 2px; }
.theme-control { display: none; margin: 8px 0 0; padding: 10px 17px; border: 1px solid #91bdd9; border-radius: 22px; background: #ffffff; color: #12648f; font-family: inherit; font-size: 15px; font-weight: bold; line-height: 1.5; cursor: pointer; }
.theme-control:hover, .theme-control:focus { background: #d5eafa; border-color: #12648f; }
a:focus, .theme-control:focus { outline: 2px solid #12648f; outline-offset: 3px; }
.toc { padding: 22px 24px; background: #ffffff; border: 1px solid #d5e1eb; border-radius: 14px; }
.toc h2 { margin-bottom: 12px; font-size: 20px; }
.toc ul { padding: 0; list-style: none; }
.toc li { display: inline-block; width: 46%; margin: 5px 2% 5px 0; vertical-align: top; font-size: 18px; }
.toc a { display: block; padding: 12px 16px; border: 1px solid #d5e1eb; border-radius: 8px; background: #e6f3fc; text-decoration: none; }
.toc a:hover, .toc a:focus { background: #d5eafa; border-color: #91bdd9; }
.reading-note { padding: 0 6px; margin: 18px 0 26px; font-size: 15px; }
.category { border-top: 2px solid #91bdd9; margin-top: 46px; padding-top: 28px; }
.category > h1 { font-size: 30px; margin-bottom: 8px; }
.category-description { margin-bottom: 22px; }
.subcategory { padding-top: 28px; margin-top: 36px; border-top: 2px solid #91bdd9; }
.step-toc { padding-top: 16px; padding-bottom: 16px; background: #e6f3fc; border-color: #d5e1eb; border-radius: 12px; }
.step-toc li { margin: 8px 0; }
.step-toc a { text-underline-offset: 3px; }
.tool-toc { list-style: none; padding: 13px 18px; }
.tool-toc li { margin: 0; border-bottom: 1px solid #d5e1eb; }
.tool-toc li:last-child { border-bottom: 0; }
.tool-toc a { display: block; padding: 11px 4px; text-decoration: none; }
.toc-function { display: inline-block; min-width: 55px; margin-right: 13px; padding: 2px 9px; border-radius: 6px; background: #d5eafa; color: #12648f; text-align: center; font-size: 14px; font-weight: bold; }
.guide-step { padding: 26px; margin: 26px 0; border: 1px solid #d5e1eb; border-radius: 15px; background: #ffffff; }
.guide-eyebrow { margin: 0 0 8px; color: #50667b; font-size: 13px; font-weight: bold; letter-spacing: 1px; }
.guide-step h2 { font-size: 25px; line-height: 1.65; margin-bottom: 10px; }
.guide-step .step-description { margin-bottom: 22px; }
.step-number { padding: 3px 9px; border-radius: 7px; font-size: 15px; line-height: 1.7; vertical-align: middle; }
.visual-number { border-radius: 7px; }
.upgrade-routes { background: #e6f3fc; border: 1px solid #91bdd9; border-radius: 13px; padding: 19px 22px; }
.upgrade-routes h2 { font-size: 20px; }
.upgrade-routes a { border-radius: 8px; padding: 14px 16px; font-size: 18px; }
.notice, .situation, .rule-strip, .approval-card, .tool-purpose { border-radius: 10px; border-color: #d5e1eb; background: #e6f3fc; }
.step-tip { padding: 12px 16px; background: #f4f8fc; border: 0; border-left: 3px solid #91bdd9; border-radius: 0 8px 8px 0; font-size: 15px; }
.download-panel, .post-composer, .next-shot { padding: 22px; border-radius: 12px; background: #e6f3fc; }
.button, a.button:visited { border-radius: 8px; padding: 11px 19px; line-height: 1.65; }
.legacy-figure { padding: 10px; border-radius: 12px; border-color: #d5e1eb; background: #f4f8fc; }
.image-frame { padding: 5px; border-radius: 8px; background: #edf4fa; }
.legacy-figcaption { padding: 3px 6px; font-size: 15px; }
.legacy-details { border-radius: 10px; border-color: #d5e1eb; }
.path-block, .post-text, .license-text, .folder-comparison > div { border-radius: 9px; }
.tool-feature-grid > a { padding: 18px 20px; margin: 12px 0; border-radius: 11px; background: #f4f8fc; border-color: #d5e1eb; }
.tool-feature-grid > a.featured { border: 2px solid #527a95; background: #e6f3fc; }
.tool-feature-grid .tool-feature-number { display: inline-block; padding: 2px 10px; margin-bottom: 8px; border-radius: 6px; color: #12648f; background: #d5eafa; font-size: 14px; font-weight: bold; }
.tool-feature-grid strong { margin-bottom: 5px; font-size: 20px; }
.tool-feature-grid .tool-feature-action { margin-top: 9px; color: #12648f; font-size: 14px; font-weight: bold; }
.tool-heading { border-radius: 0 8px 8px 0; }
.tool-purpose { padding: 17px 20px; margin: 20px 0; border: 1px solid #91bdd9; color: #203449; }
.tool-purpose strong { display: block; margin-bottom: 5px; font-size: 18px; }
.tool-purpose p { margin: 5px 0; }
.tool-result { border-left: 4px solid #527a95; background: #e6f3fc; }
.tool-badge { display: inline-block; padding: 3px 11px; border-radius: 6px; background: #d5eafa; color: #12648f; font-size: 14px; font-weight: bold; }
.tool-download-note, .tool-lead { color: #50667b; }
.tool-download, .salon-intro { padding: 22px; margin: 20px 0; background: #e6f3fc; border: 1px solid #91bdd9; border-radius: 12px; }
.tool-download { border-left: 4px solid #527a95; }
.tool-download h3, .salon-intro h3 { margin-top: 10px; font-size: 24px; }
.tool-illustration { max-width: 132px; margin: 0 0 14px; }
.tool-benefits > div, .tool-benefits > li, .tool-benefits > .legacy-article, .salon-tour > div, .salon-tour > li { border-radius: 9px; padding: 17px 20px; }
.tool-sequence { padding-left: 31px; }
.tool-sequence > li { padding: 13px 10px 15px; margin-bottom: 6px; }
.tool-sequence h3 { margin-top: 0; font-size: 19px; }
.folder-comparison > div { padding: 18px 20px; }
.back-top { margin-top: 26px; padding-top: 15px; border-top: 1px solid #d5e1eb; font-size: 14px; }
.footer { padding: 26px 6px 0; border-top: 1px solid #d5e1eb; font-size: 14px; }
.notice, .step-tip { background: #fff7e3; border-color: #dfc487; color: #715012; }
.salon-intro, .tool-feature-grid > a.featured, .tool-benefits > div, .tool-benefits > li, .tool-benefits > .legacy-article { background: #fff7e3; border-color: #dfc487; }
.salon-intro .tool-badge, .tool-benefits > div > span { background: #ffffff; color: #715012; }
.tool-purpose.tool-result, .approval-card { background: #eaf6f0; border-color: #1f654f; color: #203449; }
.tool-result > span, .tool-result h3, .approval-card strong { color: #1f654f; }
.button.quiet, a.button.quiet:visited { background: #ffffff; border-color: #d5e1eb; color: #12648f; }
/* Explicit choice has priority over the operating-system preference. */
html[data-theme="dark"] { background: #101b27; color: #edf4fa; }
html[data-theme="dark"] .page { background: #101b27; border-color: #3b5063; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: #edf4fa; }
html[data-theme="dark"] a, html[data-theme="dark"] a:visited { color: #8ccdf5; }
html[data-theme="dark"] a:hover, html[data-theme="dark"] a:focus { background: #29465c; color: #b2defa; }
html[data-theme="dark"] a:focus, html[data-theme="dark"] .theme-control:focus { outline-color: #8ccdf5; }
html[data-theme="dark"] .masthead, html[data-theme="dark"] .category, html[data-theme="dark"] .subcategory, html[data-theme="dark"] .footer, html[data-theme="dark"] .back-top { border-color: #3b5063; }
html[data-theme="dark"] .masthead p, html[data-theme="dark"] .reading-note, html[data-theme="dark"] .category-description, html[data-theme="dark"] .step-description, html[data-theme="dark"] .diagram-caption, html[data-theme="dark"] .mini-note, html[data-theme="dark"] .download-note, html[data-theme="dark"] .source-note, html[data-theme="dark"] .legacy-figcaption, html[data-theme="dark"] .reward-summary small, html[data-theme="dark"] .tool-feature-grid small, html[data-theme="dark"] .tool-feature-grid span, html[data-theme="dark"] .tool-download-note, html[data-theme="dark"] .tool-lead, html[data-theme="dark"] .footer { color: #b7c9d9; }
html[data-theme="dark"] .brand, html[data-theme="dark"] .guide-eyebrow { color: #8ccdf5; }
html[data-theme="dark"] .tool-download, html[data-theme="dark"] .salon-intro { background: #213e53; border-color: #527a95; color: #edf4fa; }
html[data-theme="dark"] .toc, html[data-theme="dark"] .guide-step, html[data-theme="dark"] .theme-control, html[data-theme="dark"] .upgrade-routes a { background: #182838; border-color: #50667b; color: #edf4fa; }
html[data-theme="dark"] .toc a, html[data-theme="dark"] .step-toc, html[data-theme="dark"] .upgrade-routes, html[data-theme="dark"] .situation, html[data-theme="dark"] .rule-strip, html[data-theme="dark"] .download-panel, html[data-theme="dark"] .post-composer, html[data-theme="dark"] .next-shot, html[data-theme="dark"] .legacy-details, html[data-theme="dark"] .path-block, html[data-theme="dark"] .tool-purpose, html[data-theme="dark"] .tool-feature-grid > a, html[data-theme="dark"] .salon-tour > div, html[data-theme="dark"] .salon-tour > li, html[data-theme="dark"] .folder-comparison > div { background: #203449; border-color: #3b5063; color: #edf4fa; }
html[data-theme="dark"] .tool-toc li, html[data-theme="dark"] .tool-sequence > li { border-color: #3b5063; }
html[data-theme="dark"] .theme-control:hover, html[data-theme="dark"] .theme-control:focus, html[data-theme="dark"] .toc a:hover, html[data-theme="dark"] .toc a:focus, html[data-theme="dark"] .tool-feature-grid > a:hover, html[data-theme="dark"] .tool-feature-grid > a:focus { background: #29465c; border-color: #91bdd9; }
html[data-theme="dark"] .tool-feature-grid > a.featured { background: #352e21; border-color: #527a95; }
html[data-theme="dark"] .toc-function, html[data-theme="dark"] .tool-badge, html[data-theme="dark"] .tool-feature-grid .tool-feature-number, html[data-theme="dark"] .variant-title, html[data-theme="dark"] .tool-heading { background: #213e53; color: #b2defa; border-color: #527a95; }
html[data-theme="dark"] .tool-feature-grid strong, html[data-theme="dark"] .tool-feature-grid b, html[data-theme="dark"] .tool-feature-grid .tool-feature-action, html[data-theme="dark"] .tool-benefits strong, html[data-theme="dark"] .salon-tour strong, html[data-theme="dark"] .tool-sequence > li > strong { color: #8ccdf5; }
html[data-theme="dark"] .button, html[data-theme="dark"] a.button:visited, html[data-theme="dark"] .step-number, html[data-theme="dark"] .visual-number, html[data-theme="dark"] .route-table th { background: #12648f; border-color: #527a95; color: #ffffff; }
html[data-theme="dark"] a.button:hover, html[data-theme="dark"] a.button:focus { background: #12648f; color: #ffffff; }
html[data-theme="dark"] .route-table { background: #203449; }
html[data-theme="dark"] .route-table td { border-color: #3b5063; color: #edf4fa; }
html[data-theme="dark"] .legacy-figure { background: #182838; border-color: #3b5063; }
html[data-theme="dark"] .image-frame { background: #101b27; }
html[data-theme="dark"] code, html[data-theme="dark"] kbd { background: #213e53; color: #b2defa; border-color: #527a95; }
html[data-theme="dark"] .post-text, html[data-theme="dark"] .license-text { background: #101b27; color: #edf4fa; border-color: #3b5063; }
html[data-theme="dark"] .approved-badge { background: #193e30; color: #b6f0ce; border-color: #52896e; }
/* With JavaScript disabled, supporting browsers still follow the system theme. */
@media (prefers-color-scheme: dark) {
html:not([data-theme]) { background: #101b27; color: #edf4fa; }
html:not([data-theme]) .page { background: #101b27; border-color: #3b5063; }
html:not([data-theme]) h1, html:not([data-theme]) h2, html:not([data-theme]) h3, html:not([data-theme]) h4 { color: #edf4fa; }
html:not([data-theme]) a, html:not([data-theme]) a:visited { color: #8ccdf5; }
html:not([data-theme]) a:hover, html:not([data-theme]) a:focus { background: #29465c; color: #b2defa; }
html:not([data-theme]) a:focus { outline-color: #8ccdf5; }
html:not([data-theme]) .masthead, html:not([data-theme]) .category, html:not([data-theme]) .subcategory, html:not([data-theme]) .footer, html:not([data-theme]) .back-top { border-color: #3b5063; }
html:not([data-theme]) .masthead p, html:not([data-theme]) .reading-note, html:not([data-theme]) .category-description, html:not([data-theme]) .step-description, html:not([data-theme]) .diagram-caption, html:not([data-theme]) .mini-note, html:not([data-theme]) .download-note, html:not([data-theme]) .source-note, html:not([data-theme]) .legacy-figcaption, html:not([data-theme]) .reward-summary small, html:not([data-theme]) .tool-feature-grid small, html:not([data-theme]) .tool-feature-grid span, html:not([data-theme]) .tool-download-note, html:not([data-theme]) .tool-lead, html:not([data-theme]) .footer { color: #b7c9d9; }
html:not([data-theme]) .brand, html:not([data-theme]) .guide-eyebrow { color: #8ccdf5; }
html:not([data-theme]) .tool-download, html:not([data-theme]) .salon-intro { background: #213e53; border-color: #527a95; color: #edf4fa; }
html:not([data-theme]) .toc, html:not([data-theme]) .guide-step, html:not([data-theme]) .upgrade-routes a { background: #182838; border-color: #50667b; color: #edf4fa; }
html:not([data-theme]) .toc a, html:not([data-theme]) .step-toc, html:not([data-theme]) .upgrade-routes, html:not([data-theme]) .situation, html:not([data-theme]) .rule-strip, html:not([data-theme]) .download-panel, html:not([data-theme]) .post-composer, html:not([data-theme]) .next-shot, html:not([data-theme]) .legacy-details, html:not([data-theme]) .path-block, html:not([data-theme]) .tool-purpose, html:not([data-theme]) .tool-feature-grid > a, html:not([data-theme]) .salon-tour > div, html:not([data-theme]) .salon-tour > li, html:not([data-theme]) .folder-comparison > div { background: #203449; border-color: #3b5063; color: #edf4fa; }
html:not([data-theme]) .tool-toc li, html:not([data-theme]) .tool-sequence > li { border-color: #3b5063; }
html:not([data-theme]) .toc a:hover, html:not([data-theme]) .toc a:focus, html:not([data-theme]) .tool-feature-grid > a:hover, html:not([data-theme]) .tool-feature-grid > a:focus { background: #29465c; border-color: #91bdd9; }
html:not([data-theme]) .tool-feature-grid > a.featured { background: #352e21; border-color: #527a95; }
html:not([data-theme]) .toc-function, html:not([data-theme]) .tool-badge, html:not([data-theme]) .tool-feature-grid .tool-feature-number, html:not([data-theme]) .variant-title, html:not([data-theme]) .tool-heading { background: #213e53; color: #b2defa; border-color: #527a95; }
html:not([data-theme]) .tool-feature-grid strong, html:not([data-theme]) .tool-feature-grid b, html:not([data-theme]) .tool-feature-grid .tool-feature-action, html:not([data-theme]) .tool-benefits strong, html:not([data-theme]) .salon-tour strong, html:not([data-theme]) .tool-sequence > li > strong { color: #8ccdf5; }
html:not([data-theme]) .button, html:not([data-theme]) a.button:visited, html:not([data-theme]) .step-number, html:not([data-theme]) .visual-number, html:not([data-theme]) .route-table th { background: #12648f; border-color: #527a95; color: #ffffff; }
html:not([data-theme]) a.button:hover, html:not([data-theme]) a.button:focus { background: #12648f; color: #ffffff; }
html:not([data-theme]) .route-table { background: #203449; }
html:not([data-theme]) .route-table td { border-color: #3b5063; color: #edf4fa; }
html:not([data-theme]) .legacy-figure { background: #182838; border-color: #3b5063; }
html:not([data-theme]) .image-frame { background: #101b27; }
html:not([data-theme]) code, html:not([data-theme]) kbd { background: #213e53; color: #b2defa; border-color: #527a95; }
html:not([data-theme]) .post-text, html:not([data-theme]) .license-text { background: #101b27; color: #edf4fa; border-color: #3b5063; }
html:not([data-theme]) .approved-badge { background: #193e30; color: #b6f0ce; border-color: #52896e; }
}
/* Match the main guide's cream notices, green results and sky-blue controls. */
html[data-theme="dark"] .notice, html[data-theme="dark"] .step-tip { background: #352e21; border-color: #756341; color: #f0d38d; }
html[data-theme="dark"] .salon-intro, html[data-theme="dark"] .tool-feature-grid > a.featured, html[data-theme="dark"] .tool-benefits > div, html[data-theme="dark"] .tool-benefits > li, html[data-theme="dark"] .tool-benefits > .legacy-article { background: #352e21; border-color: #756341; }
html[data-theme="dark"] .salon-intro .tool-badge, html[data-theme="dark"] .tool-benefits > div > span { background: #182838; color: #f0d38d; }
html[data-theme="dark"] .tool-purpose.tool-result, html[data-theme="dark"] .approval-card { background: #1d3d34; border-color: #a0e1c3; color: #edf4fa; }
html[data-theme="dark"] .tool-result > span, html[data-theme="dark"] .tool-result h3, html[data-theme="dark"] .approval-card strong { color: #a0e1c3; }
html[data-theme="dark"] .button, html[data-theme="dark"] a.button:visited, html[data-theme="dark"] .step-number, html[data-theme="dark"] .visual-number, html[data-theme="dark"] .route-table th { background: #8ccdf5; border-color: #527a95; color: #182838; }
html[data-theme="dark"] a.button:hover, html[data-theme="dark"] a.button:focus { background: #b2defa; color: #182838; }
html[data-theme="dark"] .button.quiet, html[data-theme="dark"] a.button.quiet:visited { background: #182838; border-color: #3b5063; color: #8ccdf5; }
@media (prefers-color-scheme: dark) {
html:not([data-theme]) .notice, html:not([data-theme]) .step-tip { background: #352e21; border-color: #756341; color: #f0d38d; }
html:not([data-theme]) .salon-intro, html:not([data-theme]) .tool-feature-grid > a.featured, html:not([data-theme]) .tool-benefits > div, html:not([data-theme]) .tool-benefits > li, html:not([data-theme]) .tool-benefits > .legacy-article { background: #352e21; border-color: #756341; }
html:not([data-theme]) .salon-intro .tool-badge, html:not([data-theme]) .tool-benefits > div > span { background: #182838; color: #f0d38d; }
html:not([data-theme]) .tool-purpose.tool-result, html:not([data-theme]) .approval-card { background: #1d3d34; border-color: #a0e1c3; color: #edf4fa; }
html:not([data-theme]) .tool-result > span, html:not([data-theme]) .tool-result h3, html:not([data-theme]) .approval-card strong { color: #a0e1c3; }
html:not([data-theme]) .button, html:not([data-theme]) a.button:visited, html:not([data-theme]) .step-number, html:not([data-theme]) .visual-number, html:not([data-theme]) .route-table th { background: #8ccdf5; border-color: #527a95; color: #182838; }
html:not([data-theme]) a.button:hover, html:not([data-theme]) a.button:focus { background: #b2defa; color: #182838; }
html:not([data-theme]) .button.quiet, html:not([data-theme]) a.button.quiet:visited { background: #182838; border-color: #3b5063; color: #8ccdf5; }
}
@media (max-width: 620px) {
body { padding: 10px; font-size: 16px; }
.page { padding: 18px 13px; border-radius: 12px; }
.masthead h1 { font-size: 30px; }
.toc { padding: 16px; }
.toc li { display: block; width: auto; margin: 8px 0; }
.guide-step { padding: 18px 14px; border-radius: 12px; }
.guide-step h2 { font-size: 22px; }
.tool-guide-page .step-number { display: inline-block; margin: 0 7px 5px 0; }
.tool-toc { padding: 10px 12px; }
.toc-function { min-width: 46px; padding: 2px 6px; margin-right: 8px; }
.download-panel, .post-composer, .next-shot, .tool-download, .salon-intro { padding: 16px; }
.tool-feature-grid > a, .tool-purpose, .tool-benefits > div, .tool-benefits > .legacy-article, .salon-tour > div, .folder-comparison > div { padding: 15px; }
}
@media print {
* { background: #ffffff !important; color: #111111 !important; }
body { padding: 0; }
.page { border: 0; padding: 0; }
.theme-control, .back-top { display: none !important; }
.guide-step { border-color: #aaaaaa; }
}