:root {
  --canvas: #f6f7fc; --surface: #fff; --ink: #172033; --muted: #526075;
  --line: #ccd4e2; --soft-line: #e5e9f1; --blue: #2454c6; --blue-dark: #173c98;
  --blue-soft: #edf2ff; --cyan-soft: #e9fbff; --violet-soft: #f4efff; --success: #166534; --error: #b42318;
  --radius: 12px; --radius-lg: 24px; --focus: #2454c6;
  --shadow-sm: 0 8px 24px rgba(35, 53, 89, .08); --shadow-md: 0 22px 56px rgba(35, 53, 89, .14);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--canvas); font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.5; background: linear-gradient(180deg, #fbfcff 0, var(--canvas) 520px, var(--canvas) 100%); }
button, input, select, textarea { font: inherit; }
button, summary, select { cursor: pointer; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
a { color: var(--blue); text-underline-offset: 4px; }
a:hover { color: var(--blue-dark); }
button { border: 0; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h2 { font-size: 24px; line-height: 1.33; letter-spacing: -.65px; font-weight: 650; }
h3 { font-size: 17px; line-height: 24px; letter-spacing: -.2px; font-weight: 650; }
svg { flex-shrink: 0; }
code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 14px; }
.container { max-width: 1144px; margin-inline: auto; padding-inline: var(--s6); }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 10; background: white; padding: 12px 16px; border: 2px solid var(--blue); }
.skip-link:focus { top: 8px; }
.preview-bar { font-size: 13px; color: var(--muted); border-bottom: 1px solid #dce4f5; padding-block: var(--s2); background: #eef3ff; }
.preview-bar .container { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.preview-dot { width: 7px; height: 7px; background: var(--blue); border-radius: 50%; box-shadow: 0 0 0 4px #dbe6ff; }
.site-header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.brand { display: inline-flex; align-items: center; gap: var(--s3); color: var(--ink); text-decoration: none; letter-spacing: -.5px; font-size: 20px; font-weight: 500; white-space: nowrap; }
.brand strong { font-weight: 650; }
.brand-mark { color: var(--blue); filter: drop-shadow(0 6px 10px rgba(36, 84, 198, .2)); }
.site-header nav { display: flex; gap: var(--s6); align-items: center; }
.site-header nav a { color: var(--muted); font-size: 14px; text-decoration: none; padding: 10px 11px; border-radius: 10px; }
.site-header nav a:hover { color: var(--blue); background: var(--blue-soft); text-decoration: none; }
.site-header nav a[aria-current="page"], .site-header nav a.nav-section-active { position: relative; color: var(--ink); font-weight: 650; text-decoration: none; }
.site-header nav a[aria-current="page"]::after, .site-header nav a.nav-section-active::after { content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 2px; border-radius: 999px; background: var(--blue); }
.nav-item { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 10px 11px; border-radius: 10px; background: none; color: var(--muted); font-size: 14px; }
.nav-trigger:hover { color: var(--blue); background: var(--blue-soft); text-decoration: none; }
.nav-caret { width: 6px; height: 6px; margin-top: -3px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.nav-item.is-open > .nav-trigger .nav-caret, .nav-item:hover > .nav-trigger .nav-caret { margin-top: 3px; transform: rotate(225deg); }
.nav-trigger[aria-expanded="true"], .nav-item:hover > .nav-trigger { color: var(--ink); }
.nav-trigger.nav-section-active { position: relative; color: var(--ink); font-weight: 650; text-decoration: none; }
.nav-trigger.nav-section-active::after { content: ""; position: absolute; right: 0; bottom: 4px; left: 0; height: 2px; border-radius: 999px; background: var(--blue); }
.nav-panel { position: absolute; top: 100%; left: -12px; z-index: 30; display: none; width: 276px; max-width: calc(100vw - 40px); padding-top: var(--s2); }
.nav-item-end > .nav-panel { left: auto; right: -12px; }
.nav-item.is-open > .nav-panel { display: block; }
.nav-panel-inner { padding: var(--s2); border: 1px solid #dbe2ee; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); }
.nav-panel a { display: block; padding: 11px 12px; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.nav-panel a strong { display: block; font-size: 14px; line-height: 20px; font-weight: 650; }
.nav-panel code { color: var(--blue); font-size: 12px; }
.nav-panel a:hover, .nav-panel a[aria-current="page"] { background: var(--blue-soft); }
@media (hover: hover) and (pointer: fine) { .nav-item:hover > .nav-panel { display: block; } }
.intro { position: relative; isolation: isolate; margin-top: var(--s2); padding: 40px 40px 92px; overflow: hidden; border: 1px solid #e0e5f4; border-radius: 28px; background: linear-gradient(125deg, #eef7ff 0%, #f1f1ff 52%, #f8efff 100%); }
.intro::after { content: "[     ]"; position: absolute; right: 34px; bottom: -28px; z-index: -1; color: rgba(36, 84, 198, .08); font: 700 116px/1 ui-monospace, monospace; letter-spacing: -16px; white-space: nowrap; }
.eyebrow, .section-label { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 1px; color: var(--muted); }
.eyebrow { display: flex; align-items: center; gap: var(--s2); color: var(--blue); margin-bottom: var(--s3); }
.tiny-brackets { font-family: ui-monospace, monospace; font-size: 17px; letter-spacing: 2px; }
h1 { font-size: 48px; line-height: 56px; font-weight: 650; letter-spacing: -1.9px; }
h1 span { color: var(--blue); }
.intro > p { color: var(--muted); font-size: 18px; margin-top: var(--s3); }
.intro-facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); padding: 0; margin: var(--s4) 0 0; list-style: none; color: var(--muted); font-size: 14px; }
.intro-facts li { display: flex; align-items: center; gap: var(--s2); }
.intro-facts li::before { content: "✓"; color: var(--success); font-weight: 700; }
.workbench { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.05fr); margin-top: -52px; overflow: hidden; background: var(--surface); border: 1px solid #d7deeb; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); scroll-margin-top: 24px; }
.workbench:focus { outline: none; }
.workbench:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.copy-panel, .check-panel { padding: var(--s6); min-width: 0; }
.check-panel { background: linear-gradient(155deg, #f3f6ff 0%, #eef8fb 100%); border-left: 1px solid #dce3ef; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.panel-heading { display: flex; gap: var(--s3); justify-content: space-between; align-items: center; margin-bottom: var(--s5); }
.panel-heading h2 { display: flex; align-items: center; gap: var(--s3); font-size: 18px; line-height: 24px; letter-spacing: -.2px; }
.step-number { font-family: ui-monospace, monospace; color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.section-label .step-number { margin-right: var(--s2); }
.subtle-tag, .optional-label { color: var(--muted); font-size: 14px; white-space: nowrap; }
.task-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-bottom: var(--s3); }
.task-preset { min-width: 0; min-height: 62px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: white; color: var(--ink); text-align: left; transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }
.task-preset strong, .task-preset span { display: block; overflow: hidden; text-overflow: ellipsis; }
.task-preset strong { font-size: 14px; line-height: 20px; font-weight: 650; }
.task-preset span { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 18px; }
.task-preset:hover:not(:disabled) { border-color: #9db4eb; background: var(--blue-soft); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.task-preset[aria-pressed="true"] { border-color: var(--blue); background: linear-gradient(135deg, var(--blue-soft), var(--cyan-soft)); box-shadow: inset 3px 0 0 var(--blue); }
.task-preset[aria-pressed="true"] strong { color: var(--blue); }
.task-preset-custom { grid-column: 1 / -1; min-height: 54px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s3); }
.task-preset-custom span { margin: 0; }
.task-guidance { min-height: 42px; color: var(--muted); font-size: 14px; line-height: 21px; margin-bottom: var(--s3); }
.output-preview { border: 1px solid #dbe4f3; border-radius: 16px; padding: var(--s4) var(--s5); background: linear-gradient(145deg, #f9fbff, #f2f8ff); text-align: center; }
.preview-topline { display: flex; justify-content: space-between; gap: var(--s2); align-items: center; color: var(--muted); font-size: 14px; text-align: left; }
.preview-topline code { color: var(--blue); font-size: 14px; }
.blank-stage { display: flex; justify-content: center; align-items: center; min-height: 64px; gap: var(--s3); color: var(--blue); }
#blank-glyph { white-space: pre; min-width: 1px; max-width: 120px; overflow: hidden; font-size: 28px; }
.boundary { width: 10px; height: 28px; border-block: 2px solid var(--blue); opacity: .6; }
.boundary-left { border-left: 2px solid var(--blue); border-radius: 3px 0 0 3px; }
.boundary-right { border-right: 2px solid var(--blue); border-radius: 0 3px 3px 0; }
#preview-caption { color: var(--muted); font-size: 14px; }
#preview-caption span { margin-inline: var(--s1); }
.button { min-height: 48px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); padding: var(--s3) var(--s4); font-weight: 600; font-size: 16px; line-height: 24px; text-decoration: none; transition: transform .15s ease, background-color .15s, border-color .15s, box-shadow .15s; }
.button-primary { background: var(--blue); color: white; border: 1px solid var(--blue); box-shadow: 0 8px 18px rgba(36, 84, 198, .22); }
.button-primary:hover:not(:disabled) { background: var(--blue-dark); color: white; border-color: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 11px 24px rgba(36, 84, 198, .26); }
.button-primary:active:not(:disabled) { box-shadow: inset 0 0 0 2px #ffffff45; }
.copy-button { margin-top: var(--s4); width: 100%; min-height: 56px; }
.button-arrow { margin-left: auto; font-size: 20px; font-weight: 400; }
.copy-button #copy-label { margin-right: auto; }
.copy-button[data-copied="true"] { background: var(--success); border-color: var(--success); }
.copy-status { font-size: 14px; color: var(--muted); min-height: 44px; padding-top: var(--s2); }
.copy-status[data-state="success"] { color: var(--success); }
.copy-status[data-state="error"] { color: var(--error); }
.advanced-options { margin-top: var(--s4); border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); }
.advanced-options > summary { min-height: 48px; color: var(--muted); font-size: 14px; font-weight: 600; }
.advanced-content { padding-bottom: var(--s4); }
.settings { display: grid; grid-template-columns: minmax(0, 1fr) 152px; gap: var(--s4); margin-top: var(--s2); }
label, .input-label { font-size: 14px; font-weight: 600; display: block; margin-bottom: var(--s2); }
select, input, textarea { border: 1px solid var(--line); background: white; color: var(--ink); border-radius: var(--radius); }
select { width: 100%; min-height: 48px; padding: 10px 32px 10px 12px; font-size: 14px; text-overflow: ellipsis; }
input { min-width: 0; }
textarea { resize: vertical; width: 100%; display: block; padding: var(--s3); line-height: 24px; min-height: 64px; }
textarea::placeholder { color: #657180; opacity: 1; }
.quantity-control { display: flex; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.quantity-control button { flex: 0 0 44px; height: 46px; background: transparent; color: var(--muted); font-size: 20px; border-radius: var(--radius); }
.quantity-control button:hover:not(:disabled) { color: var(--blue); background: var(--blue-soft); }
.quantity-control input { text-align: center; width: 100%; border: none; padding: 0; border-radius: 0; font-size: 16px; font-variant-numeric: tabular-nums; }
.quantity-control:has([aria-invalid="true"]) { border-color: var(--error); }
.field-note { display: block; font-size: 14px; color: var(--muted); margin-top: var(--s2); }
.field-error { color: var(--error); font-size: 14px; margin-top: var(--s2); }
.type-explanation { margin-top: var(--s3); }
.type-explanation p { font-size: 14px; line-height: 21px; color: var(--muted); max-width: 60ch; }
.text-link { font-size: 14px; display: inline-flex; gap: var(--s2); align-items: center; margin-top: var(--s2); padding-block: var(--s1); }
.manual-copy { margin-top: var(--s5); border-top: 1px solid var(--soft-line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); list-style: none; }
summary::-webkit-details-marker { display: none; }
.manual-copy summary { font-size: 14px; padding-top: var(--s4); min-height: 44px; color: var(--muted); }
summary:hover { color: var(--blue); }
.disclosure-sign { flex: 0 0 20px; font-size: 20px; font-weight: 400; text-align: center; }
details[open] > summary .disclosure-sign { transform: rotate(45deg); }
.manual-content { padding-top: var(--s4); }
.manual-content textarea { font-family: ui-monospace, monospace; white-space: pre; overflow-wrap: anywhere; margin-bottom: var(--s3); }
.manual-content p, .manual-content a { font-size: 14px; color: var(--muted); }
.manual-content p { margin: var(--s3) 0 var(--s2); }
.manual-content a { color: var(--blue); }
.button-secondary { border: 1px solid #aab7ca; background: white; color: var(--ink); }
.button-secondary:hover:not(:disabled) { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.check-panel > h2 { margin-top: var(--s6); }
.check-description { margin-top: var(--s3); color: var(--muted); font-size: 16px; }
.check-panel .input-label { margin-top: var(--s5); }
#check-text { min-height: 116px; font-size: 16px; }
.check-actions { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s3); }
.check-actions .button { flex: 1; }
.text-button { color: var(--muted); background: transparent; min-height: 44px; padding: var(--s2); font-size: 14px; border-radius: var(--radius); }
.text-button:hover:not(:disabled) { background: white; color: var(--blue); }
.check-result { display: flex; gap: var(--s3); margin-top: var(--s5); padding-block: var(--s4); border-top: 1px solid var(--line); font-size: 14px; }
.check-result strong { font-weight: 600; }
.check-result p { color: var(--muted); margin-top: var(--s1); line-height: 21px; }
.result-symbol { font-size: 18px; width: 20px; flex-shrink: 0; }
.check-result[data-state="match"] { color: var(--success); }
.check-result[data-state="mismatch"], .check-result[data-state="error"] { color: var(--error); }
.check-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0 0 var(--s4); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.check-metrics div { min-width: 0; padding: 10px 12px; background: white; }
.check-metrics dt { color: var(--muted); font-size: 12px; line-height: 18px; }
.check-metrics dd { margin: 2px 0 0; color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.check-next { margin-bottom: var(--s4); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); background: white; font-size: 14px; }
.check-next strong { display: block; color: var(--ink); }
.check-next p { color: var(--muted); margin-top: var(--s1); line-height: 21px; }
.check-next a { display: inline-flex; margin-top: var(--s2); font-weight: 600; }
.privacy-note { display: flex; gap: var(--s2); align-items: flex-start; font-size: 14px; line-height: 21px; color: var(--muted); margin-top: var(--s4); }
.privacy-note svg { margin-top: 2px; }
.compatibility-note { display: flex; align-items: flex-start; gap: var(--s2); color: var(--muted); font-size: 14px; margin-top: var(--s4); }
.compatibility-note svg { margin-top: 2px; }
.journey-strip { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-block: var(--s5) var(--s8); padding: var(--s4); border: 1px solid #dae4f5; border-radius: 999px; background: #f2f6ff; color: var(--muted); font-size: 14px; text-align: center; }
.journey-strip strong { color: var(--ink); }
.content-section { border-top: 1px solid var(--soft-line); padding-block: var(--s8); }
.section-intro h2 { margin-top: var(--s2); }
.section-intro > p { color: var(--muted); margin-top: var(--s3); max-width: 58ch; }
.character-section { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.65fr); gap: var(--s8); }
.character-intro { align-self: start; position: sticky; top: var(--s5); }
.character-list { border-top: 1px solid var(--line); }
.character-row { display: grid; grid-template-columns: minmax(160px, .9fr) 84px minmax(190px, 1.4fr) 82px; gap: var(--s4); align-items: center; padding-block: var(--s5); border-bottom: 1px solid var(--line); }
.character-row[data-selected="true"] { background: linear-gradient(90deg, transparent 0, var(--blue-soft) 12%, var(--blue-soft) 88%, transparent 100%); }
.character-identity p, .character-use { color: var(--muted); font-size: 14px; line-height: 21px; }
.character-identity p { margin-top: 2px; }
.character-row code { color: var(--blue); white-space: nowrap; }
.recommendation { display: inline-block; margin-bottom: var(--s1); color: var(--success); font-size: 12px; line-height: 18px; font-weight: 650; }
.use-character { min-height: 40px; padding: var(--s2); border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--blue); font-size: 14px; font-weight: 600; white-space: nowrap; }
.use-character:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-soft); }
.use-character[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: white; }
.use-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-top: var(--s6); }
.use-grid article { min-width: 0; display: flex; flex-direction: column; padding: var(--s5); border: 1px solid #dce3ee; border-radius: 18px; background: var(--surface); box-shadow: 0 5px 16px rgba(35, 53, 89, .045); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.use-grid article:hover { border-color: #b7c7e8; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.use-symbol { display: inline-flex; align-items: center; align-self: flex-start; min-height: 34px; margin-bottom: var(--s4); padding: var(--s1) var(--s2); border: 1px solid #d8e2f4; border-radius: 9px; color: var(--blue); background: var(--blue-soft); font-family: ui-monospace, monospace; }
.use-grid p { color: var(--muted); font-size: 15px; line-height: 23px; margin-top: var(--s2); }
.use-grid a { display: inline-flex; align-items: center; gap: var(--s2); margin-top: auto; padding-top: var(--s4); font-size: 14px; font-weight: 600; }
.tool-cluster { display: grid; grid-template-columns: minmax(230px, .65fr) minmax(0, 1.55fr); gap: var(--s7); margin-top: var(--s5); padding-inline: var(--s6); border: 1px solid #dfe5f1; border-radius: 28px; background: linear-gradient(135deg, #f1f7ff, #f6f1ff); }
.tool-cluster-intro { align-self: start; }
.tool-cluster-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.tool-cluster-card { position: relative; display: flex; min-width: 0; flex-direction: column; padding: var(--s5); overflow: hidden; border: 1px solid #dce3ee; border-radius: 18px; background: white; box-shadow: 0 5px 16px rgba(35, 53, 89, .05); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.tool-cluster-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: #61cce5; }
.tool-cluster-card:nth-child(2)::before { background: #7b8ff0; }
.tool-cluster-card:nth-child(3)::before { background: #b184e8; }
.tool-cluster-card:nth-child(4)::before { background: #52b8a1; }
.tool-cluster-card:hover { border-color: #b7c7e8; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tool-cluster-card-current { border-color: #9eb8ee; box-shadow: inset 0 3px 0 var(--blue), 0 5px 16px rgba(35, 53, 89, .05); }
.tool-cluster-card > span { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .8px; }
.tool-cluster-card h3 { margin-top: var(--s3); }
.tool-cluster-card p { margin-top: var(--s2); color: var(--muted); font-size: 14px; line-height: 22px; }
.tool-cluster-card a { margin-top: auto; padding-top: var(--s4); font-size: 14px; font-weight: 650; }
.advantage-section { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.65fr); gap: var(--s8); padding-block: var(--s8); border-top: 1px solid var(--soft-line); }
.advantage-intro { align-self: start; }
.advantage-intro h2 { margin-top: var(--s2); }
.advantage-intro p { max-width: 34ch; margin-top: var(--s3); color: var(--muted); line-height: 24px; }
.advantage-grid { border-top: 1px solid var(--line); }
.advantage-grid article { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--s1) var(--s4); align-items: start; padding-block: var(--s5); border-bottom: 1px solid var(--line); }
.advantage-number { display: grid; grid-row: 1 / 3; place-items: center; width: 40px; height: 40px; border: 1px solid #d5e0f5; border-radius: 12px; background: linear-gradient(135deg, var(--blue-soft), var(--cyan-soft)); color: var(--blue); font: 700 12px/1 ui-monospace, monospace; }
.advantage-grid h3 { grid-column: 2; font-size: 18px; }
.advantage-grid p { grid-column: 2; color: var(--muted); font-size: 14px; line-height: 22px; }
.advantage-grid a { display: inline-flex; grid-column: 3; grid-row: 1 / 3; align-self: center; gap: var(--s2); padding: var(--s2); white-space: nowrap; font-size: 14px; font-weight: 650; }
.terms-section { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.65fr); gap: var(--s8); }
.terms-intro { align-self: start; }
.term-list { border-top: 1px solid var(--line); }
.term-list article { padding-block: var(--s5); border-bottom: 1px solid var(--line); }
.term-list p { color: var(--muted); font-size: 15px; line-height: 24px; margin-top: var(--s2); max-width: 68ch; }
.support-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); padding-block: var(--s8); }
.advantage-section + .support-section { padding-top: var(--s5); }
.support-section h2 { margin-top: var(--s2); }
.help-column > p { color: var(--muted); margin-top: var(--s3); margin-bottom: var(--s4); }
.help-link { display: flex; gap: var(--s4); align-items: center; justify-content: space-between; padding-block: var(--s4); border-bottom: 1px solid var(--soft-line); text-decoration: none; color: var(--ink); }
.help-link strong { display: block; font-weight: 500; }
.help-link span span { display: block; font-size: 14px; color: var(--muted); margin-top: var(--s1); }
.help-link > span:last-child { color: var(--blue); font-size: 20px; }
.help-link:hover strong { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.questions-column h2 { margin-bottom: var(--s5); }
.faq { border-bottom: 1px solid var(--soft-line); }
.faq summary { padding-block: var(--s4); font-size: 16px; line-height: 24px; min-height: 56px; }
.faq p { padding-bottom: var(--s5); color: var(--muted); font-size: 15px; line-height: 24px; }
.method-note { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(280px, 1.5fr) auto; gap: var(--s6); align-items: center; margin-bottom: var(--s8); padding: var(--s6); border: 1px solid #d9e2f3; border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--blue-soft), var(--cyan-soft)); }
.method-note h2 { margin-top: var(--s1); font-size: 20px; }
.method-note > p { color: var(--muted); font-size: 15px; line-height: 23px; }
.method-note > a { white-space: nowrap; font-size: 14px; font-weight: 600; }
.site-footer { position: relative; border-top: 1px solid #d9e0ec; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr); gap: var(--s7) var(--s8); padding-block: var(--s7) var(--s6); }
.site-footer::before { content: ""; position: absolute; top: -1px; left: var(--s6); width: 96px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--blue), #65cbe2); }
.footer-brand { font-size: 18px; color: var(--ink); font-weight: 600; letter-spacing: -.5px; text-decoration: none; }
.footer-intro p, .copyright, .footer-note { color: var(--muted); font-size: 14px; }
.footer-intro p { max-width: 26ch; margin-top: var(--s2); line-height: 21px; }
.footer-groups { display: grid; grid-template-columns: 1.35fr .8fr 1fr; gap: var(--s6); }
.site-footer nav { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.site-footer nav strong { margin-bottom: var(--s1); color: var(--ink); font-size: 13px; line-height: 20px; }
.site-footer nav a { color: var(--muted); font-size: 14px; line-height: 20px; padding-block: 3px; }
.site-footer nav a:hover, .site-footer nav a[aria-current="page"] { color: var(--ink); }
.footer-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5); padding-top: var(--s4); border-top: 1px solid var(--soft-line); }
.notice { padding: var(--s4); background: var(--blue-soft); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: var(--s5); }
@media (max-width: 900px) {
  .workbench { grid-template-columns: 1fr; }
  .check-panel { border-left: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .check-panel > h2 { margin-top: 0; }
  .support-section { gap: var(--s6); }
  .character-section, .terms-section, .tool-cluster, .advantage-section { grid-template-columns: 1fr; gap: var(--s6); }
  .use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .character-intro { position: static; }
  .method-note { grid-template-columns: 1fr; gap: var(--s3); }
  .method-note > a { margin-top: var(--s2); }
  .site-header { position: relative; }
  .nav-item { position: static; }
  .nav-panel, .nav-item-end > .nav-panel { left: 0; right: 0; width: auto; max-width: none; }
  .site-footer { grid-template-columns: 1fr; gap: var(--s5); }
  .footer-groups { width: 100%; }
  .footer-bottom { grid-column: 1; }
}
@media (max-width: 640px) {
  .container { padding-inline: 20px; }
  .preview-bar-detail { display: none; }
  .site-header { min-height: 0; flex-wrap: wrap; padding-block: var(--s4); gap: var(--s2); }
  .site-header .brand { font-size: 19px; }
  .site-header nav { width: 100%; justify-content: space-between; gap: var(--s3); }
  .site-header nav a, .site-header nav .nav-trigger { padding-block: var(--s2); min-height: 40px; font-size: 14px; }
  .nav-panel-inner { border-radius: var(--radius); }
  .nav-panel a { padding-inline: var(--s2); }
  .intro { margin-top: 0; padding: 26px 22px 68px; border-radius: 22px; }
  .intro::after { right: 14px; bottom: -14px; font-size: 76px; letter-spacing: -12px; }
  .workbench { margin-top: -40px; border-radius: 20px; }
  .eyebrow { font-size: 12px; letter-spacing: .8px; margin-bottom: var(--s2); }
  h1 { font-size: 34px; line-height: 40px; letter-spacing: -1.3px; }
  .intro > p { font-size: 16px; line-height: 24px; margin-top: var(--s2); }
  .intro-facts { gap: var(--s1) var(--s4); margin-top: var(--s3); }
  .copy-panel, .check-panel { padding: 20px; }
  .task-presets { grid-template-columns: 1fr; }
  .task-preset-custom { grid-column: auto; }
  .panel-heading { margin-bottom: var(--s4); gap: var(--s2); flex-wrap: wrap; }
  .panel-heading h2 { font-size: 17px; }
  .subtle-tag { display: none; }
  .output-preview { padding: var(--s3); }
  .settings { grid-template-columns: 1fr; gap: var(--s4); }
  select { font-size: 16px; }
  .quantity-field { display: grid; grid-template-columns: 1fr 152px; align-items: center; gap: var(--s1) var(--s3); }
  .quantity-field label { margin: 0; }
  .quantity-field .field-note { grid-column: 2; margin: 0; }
  .type-explanation { margin-top: var(--s4); }
  .content-section { padding-block: var(--s7); }
  .journey-strip { align-items: flex-start; margin-bottom: var(--s7); padding: var(--s4); gap: var(--s2); border-radius: 18px; }
  .journey-strip > span:nth-child(even) { display: none; }
  .journey-strip > span { flex: 1; }
  .character-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); }
  .character-row .character-use { grid-column: 1 / -1; }
  .character-row .use-character { grid-column: 1 / -1; width: 100%; }
  .use-grid, .tool-cluster-grid { grid-template-columns: 1fr; }
  .tool-cluster { margin-inline: 0; padding-inline: 20px; border-radius: 22px; }
  .advantage-section { padding-block: var(--s7); }
  .advantage-intro h2 { font-size: 24px; }
  .advantage-grid article { grid-template-columns: 44px minmax(0, 1fr); }
  .advantage-grid a { grid-column: 2; grid-row: 3; align-self: start; padding-inline: 0; }
  .support-section { grid-template-columns: 1fr; gap: var(--s7); padding-block: var(--s7); }
  .method-note { margin-bottom: var(--s7); padding: var(--s5); }
  .footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
  .footer-groups nav:last-child { grid-column: 1 / -1; }
  .site-footer::before { left: 20px; }
}
@media (max-width: 360px) {
  .site-header nav { gap: 0; }
  .site-header nav a, .site-header nav .nav-trigger { padding: var(--s2) var(--s1); font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }