/* DN Viewer dictation page, extending the existing dark guide theme. */
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 20; padding: 12px; background: var(--navy); }
.skip-link:focus { top: 12px; }
a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
section[id], main[id] { scroll-margin-top: 100px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: .8rem; margin-bottom: 28px; }
.dictation-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 38px; align-items: center; }
.dictation-hero h1 { font-size: clamp(2.3rem, 4vw, 3.6rem); }
.dictation-hero h1 span { color: var(--green); }
.hero-screen { padding: 10px; }
.hero-screen img { height: auto; }
.ai-credit { margin: 20px 0 0; font-size: .8rem; color: var(--muted); }
.tool-grid, .platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tool-card { padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.tool-card p { color: var(--muted); margin-bottom: 0; }
.tool-card h3 { font-size: 1.25rem; margin-top: 12px; }
.tool-label { color: var(--green); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.platform-grid .outline-button { margin-top: 20px; }
.dictation-steps { padding: 0; list-style: none; }
.requirements { padding: 18px 20px; border-left: 3px solid var(--blue); background: var(--panel); border-radius: 8px; font-size: .9rem; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; margin: 24px 0; }
.dictation-table { width: 100%; border-collapse: collapse; background: var(--panel); text-align: left; }
.dictation-table caption { padding: 18px; text-align: left; font-weight: 800; }
.dictation-table th, .dictation-table td { padding: 16px 20px; border-top: 1px solid var(--line); vertical-align: top; }
.dictation-table thead { background: rgba(121,168,255,.13); }
.dictation-table tbody th { width: 28%; font-size: .9rem; }
.dictation-table td { color: var(--muted); }
@media (max-width: 820px) { .dictation-hero { grid-template-columns: 1fr; } .hero-screen { max-width: 660px; } }
@media (max-width: 680px) { .tool-grid, .platform-grid { grid-template-columns: 1fr; } .dictation-table th, .dictation-table td { padding: 12px; font-size: .85rem; } section[id], main[id] { scroll-margin-top: 20px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }