.guide-page { --bg: #fff; --panel: #f7fafb; --muted: #53616b; --line: #dbe3e6; background: #fff; letter-spacing: 0; }
.guide-page .site-header { background: #ffffffed; gap: 20px; }
.guide-page .brand img { flex: 0 0 34px; }
.guide-page .nav a[aria-current] { color: #075c72; font-weight: 750; }
.guide-page .nav-cta { background: #dff5fa; color: #123d48; border-radius: 8px; }
.guide-layout { max-width: 1280px; margin: auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding: 38px 28px 72px; }
.guide-index { align-self: start; position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 16px; }
.guide-page .eyebrow { letter-spacing: 0; font-size: 12px; color: #08718a; margin-bottom: 8px; }
.guide-index nav { display: flex; flex-direction: column; font-size: 13px; gap: 3px; }
.guide-index nav span { margin: 18px 0 6px; color: #53616b; font-weight: 750; }
.guide-index nav a { padding: 6px 8px; border-left: 2px solid transparent; }
.guide-index nav a:hover, .guide-index nav a:focus-visible { background: #eaf8fb; border-color: #08718a; }
.guide-index nav a.is-current { background: #eaf8fb; border-color: #08718a; color: #075e76; font-weight: 750; }
.guide-content { min-width: 0; }
.guide-page section[id] { scroll-margin-top: 95px; }
.guide-page h1 { font-size: 34px; letter-spacing: 0; line-height: 1.25; margin: 12px 0 20px; overflow-wrap: anywhere; }
.guide-page h1 span { font-size: 26px; font-weight: 500; color: #53616b; }
.guide-page h2 { font-size: 24px; line-height: 1.3; letter-spacing: 0; margin-bottom: 0; overflow-wrap: anywhere; }
.guide-page p, .guide-page dd { line-height: 1.65; }
.guide-page .lead { font-size: 17px; max-width: 720px; }
.release-note, .source-note { color: var(--muted); font-size: 13px; }
.source-note a, .reference-section a { color: #075e76; text-decoration: underline; text-underline-offset: 3px; }
.quick-start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: decimal-leading-zero; padding: 18px 0 18px 24px; gap: 26px; margin: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quick-start li { padding-left: 2px; }
.quick-start strong { display: block; margin-bottom: 8px; font-size: 14px; }
.quick-start span { display: block; color: var(--muted); font-size: 13px; line-height: 1.6; }
.guide-notice { padding: 16px 20px; background: #eef9fc; border-left: 3px solid #137e96; margin-bottom: 20px; font-size: 14px; }
.guide-notice p { margin: 6px 0 0; }
.action-section, .reference-section { padding: 32px 0; border-top: 1px solid var(--line); }
.action-heading { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }
.section-number { color: #527381; font-size: 16px; width: 32px; flex: 0 0 32px; font-variant-numeric: tabular-nums; }
.practice-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.instructions { font-size: 14px; min-width: 0; }
.instructions dl { margin: 16px 0; }
.instructions dt { font-weight: 750; margin-bottom: 4px; }
.instructions dd { margin: 0 0 14px; color: #394c56; }
.boundary { border-left: 2px solid #c5b773; padding-left: 12px; font-size: 13px; color: var(--muted); }
.practice-surface { min-width: 0; border: 1px solid var(--line); border-radius: 8px; background: #f7fafb; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.surface-label, .practice-surface label, .practice-surface legend { font-size: 13px; font-weight: 650; color: #445761; }
.guide-page button, .guide-page input, .guide-page textarea, .guide-page select { font: inherit; font-size: 14px; min-width: 0; max-width: 100%; }
.guide-page button { cursor: pointer; }
.guide-page :focus-visible { outline: 3px solid #137e96; outline-offset: 3px; }
.target-button { background: #dff5fa; color: #113c48; border: 1px solid #a7d7e3; border-radius: 6px; min-height: 52px; padding: 12px; font-weight: 750 !important; width: 100%; white-space: normal; overflow-wrap: anywhere; }
.target-button:hover { background: #cfedf5; }
.target-button.violet { background: #eeeaf8; color: #483569; border-color: #d4c9e7; }
.target-button.green { background: #e1f4e9; color: #205437; border-color: #bcdeca; }
.counter-output { display: block; font-size: 24px; font-weight: 750; font-variant-numeric: tabular-nums; min-height: 38px; }
.result-line { font-size: 13px; color: #31596a; min-height: 22px; line-height: 1.6; overflow-wrap: anywhere; }
.reset-control { align-self: start; border: 0; border-bottom: 1px solid #93a4ad; border-radius: 0; padding: 3px 0; background: transparent; color: #445761; font-size: 12px !important; }
.practice-surface input:not([type="checkbox"]), .practice-surface textarea, .practice-surface select, #editable-target { width: 100%; border: 1px solid #aebfc6; border-radius: 5px; min-height: 42px; background: #fff; padding: 10px; color: #182e39; }
.practice-surface textarea { resize: vertical; }
.practice-surface input[readonly] { background: #eef2f4; }
.check-target { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.check-target input { width: 18px; height: 18px; }
#context-menu { display: flex; gap: 8px; flex-wrap: wrap; }
#context-menu[hidden] { display: none; }
#context-menu button { border: 1px solid #c9bedb; padding: 8px 12px; background: #fff; border-radius: 4px; }
#editable-target { min-height: 64px; overflow-wrap: anywhere; }
.motion-target { position: relative; height: 220px; overflow: hidden; border: 1px solid #c5d8da; border-radius: 6px; background-color: #eef7f5; background-image: linear-gradient(#d8e9e6 1px, transparent 1px), linear-gradient(90deg, #d8e9e6 1px, transparent 1px); background-size: 24px 24px; display: grid; place-items: center; }
.motion-target > span { pointer-events: none; color: #42675f; font-size: 13px; }
#motion-marker { position: absolute; width: 16px; height: 16px; transform: translate(-50%, -50%); border: 2px solid #13795a; border-radius: 50%; background: #fff; }
.date-range { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.date-range legend { margin-bottom: 8px; }
.date-range input { display: block; margin-top: 6px; }
#widget-status:empty { display: none; }
.reference-section h2 { margin-bottom: 24px; }
.reference-list dt { font-size: 14px; font-weight: 750; }
.reference-list dd { margin: 6px 0 22px; color: var(--muted); font-size: 14px; }
.reference-section details { border-bottom: 1px solid var(--line); padding: 16px 0; font-size: 14px; }
.reference-section summary { font-weight: 650; cursor: pointer; }
.reference-section details p { color: var(--muted); margin: 12px 0 0; }
.reference-section .source-note { margin-top: 24px; }
.guide-page .footer { background: #f5f9fa; }
/* 日期演示只需要 Datepicker 的样式，不加载整个 jQuery UI 主题。 */
.ui-datepicker { display: none; width: 280px; max-width: calc(100vw - 24px); padding: 12px; border: 1px solid #afc2cc; border-radius: 8px; background: #fff; color: #223944; box-shadow: 0 8px 24px #20384725; font: 14px system-ui; z-index: 30 !important; }
.ui-datepicker-header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; min-height: 40px; }
.ui-datepicker-title { grid-column: 2; grid-row: 1; text-align: center; font-weight: 700; }
.ui-datepicker-prev, .ui-datepicker-next { grid-row: 1; cursor: pointer; padding: 8px 0; text-align: center; color: #075e76; font-size: 12px; }
.ui-datepicker-prev { grid-column: 1; }.ui-datepicker-next { grid-column: 3; }
.ui-datepicker-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ui-datepicker-calendar th { padding: 7px 0; font-weight: 600; font-size: 12px; }
.ui-datepicker-calendar td a, .ui-datepicker-calendar td span { display: block; text-align: center; padding: 7px 0; border-radius: 3px; }
.ui-datepicker-calendar a:hover, .ui-datepicker-calendar .ui-state-active { background: #dff5fa; }
.ui-datepicker .ui-state-disabled { opacity: 0.4; cursor: default; }
@media (max-width: 1100px) { .guide-page .site-header { flex-wrap: wrap; padding: 14px 24px; gap: 14px; }.guide-page .nav { gap: 14px; }.guide-layout { gap: 28px; grid-template-columns: 180px minmax(0, 1fr); }.practice-grid { grid-template-columns: 1fr; gap: 12px; }.guide-page section[id] { scroll-margin-top: 145px; } }
@media (max-width: 700px) { .guide-page .site-header { position: static; padding: 16px; }.guide-page .brand { font-size: 16px; }.guide-page .nav { display: flex; flex-wrap: wrap; margin-left: 0; width: 100%; order: 3; }.guide-page .nav-cta { display: inline-flex; font-size: 13px; }.guide-layout { display: block; padding: 24px 16px 48px; }.guide-index { position: static; max-height: none; padding: 0 0 24px; }.guide-index nav { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; }.guide-index nav span { display: none; }.guide-index nav a { padding: 6px 0; border: 0; text-decoration: underline; text-underline-offset: 4px; }.guide-page h1 { font-size: 26px; }.guide-page h1 span { font-size: 22px; }.quick-start { grid-template-columns: 1fr; gap: 18px; padding-left: 24px; }.guide-page section[id] { scroll-margin-top: 16px; }.guide-page h2 { font-size: 22px; }.practice-surface { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.guide-page section[id] { scroll-margin-top: var(--guide-scroll-offset, 95px); }
.guide-index { top: var(--guide-scroll-offset, 100px); max-height: calc(100vh - var(--guide-scroll-offset, 100px) - 20px); }
@media (max-width: 700px) { .guide-index { max-height: none; } }