.analog-clock-page { padding: var(--page-top-space) 0 var(--page-bottom-space); }.analog-clock-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--breadcrumb-space);
    color: var(--text-soft);
    font-size: var(--breadcrumb-size);
}.analog-clock-breadcrumb a { color: inherit; }.analog-clock-breadcrumb a:hover { color: var(--primary); }.analog-clock-header { position: relative; max-width: var(--measure-lede); margin-bottom: 20px; padding-bottom: var(--space-4-5); border-bottom: 1px solid var(--border); }.analog-clock-header::after { position:absolute; left:0; bottom:-1px; width:48px; height:2px; background:var(--primary); content:""; }.analog-clock-header .eyebrow { margin: 0 0 6px; }.analog-clock-header h1 {
    margin: 0;
    font-size: var(--page-title-size);
    line-height: var(--page-title-line-height);
    letter-spacing: var(--page-title-tracking);
}.analog-clock-header > p:not(.eyebrow) {
    max-width: var(--measure-copy);
    margin: 10px 0 0;
    color: var(--text-soft);
    font-size: var(--page-lede-size);
    line-height: 1.68;
}.analog-clock-stage {
    --analog-face-max: 400px;
    --analog-fullscreen-max: 700px;
    --analog-practice-fullscreen-max: 580px;
    --analog-dial-bg: #f8fafc;
    --analog-dial-text: #172033;
    --analog-dial-muted: #77849a;
    --analog-dial-border: #c7d3e2;
    --analog-hand-color: #172033;
    --analog-second-color: var(--primary);
    position: relative;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}html[data-theme="dark"] .analog-clock-stage {
    --analog-dial-bg: #121925;
    --analog-dial-text: #edf1f7;
    --analog-dial-muted: #9ca9bb;
    --analog-dial-border: #354257;
    --analog-hand-color: #edf1f7;
}.analog-clock-stage[data-clock-size="compact"] {
    --analog-face-max: 330px;
    --analog-fullscreen-max: 560px;
    --analog-practice-fullscreen-max: 470px;
}.analog-clock-stage[data-clock-size="large"] {
    --analog-face-max: 470px;
    --analog-fullscreen-max: 790px;
    --analog-practice-fullscreen-max: 640px;
}.analog-clock-stage[data-face-theme="light"] {
    --analog-dial-bg: #ffffff;
    --analog-dial-text: #172033;
    --analog-dial-muted: #77849a;
    --analog-dial-border: #c7d3e2;
    --analog-second-color: var(--primary);
}.analog-clock-stage[data-face-theme="dark"] {
    --analog-dial-bg: #101827;
    --analog-dial-text: #f8fafc;
    --analog-dial-muted: #a6b2c3;
    --analog-dial-border: #334155;
    --analog-second-color: #9cc2f2;
}.analog-clock-stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}.analog-clock-stage-copy { display: grid; gap: 2px; min-width: 0; }.analog-clock-stage-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}.analog-clock-location { color: var(--text); font-size: 14px; font-weight: 700; }.analog-clock-zone { color: var(--text-soft); font-size: var(--font-xs); overflow-wrap: anywhere; }.analog-clock-sync {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    white-space: nowrap;
}.analog-clock-sync::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--text-soft);
}.analog-clock-sync[data-state="synced"] { color: var(--success); }.analog-clock-sync[data-state="synced"]::before { background: var(--success); }.analog-clock-sync[data-state="loading"]::before { background: var(--primary); }.analog-clock-fullscreen-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    width: auto;
    padding: 6px 12px;
    white-space: nowrap;
    font-size: 12px;
}.analog-clock-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 430px);
    gap: 4px;
    margin: 16px auto 0;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
}.analog-clock-mode {
    min-height: var(--touch-target);
    min-width: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
}.analog-clock-mode:hover { color: var(--text); background: color-mix(in srgb, var(--primary-soft) 65%, transparent); }.analog-clock-mode.is-active,
.analog-clock-mode[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }.analog-clock-layout {
    display: grid;
    grid-template-columns: minmax(390px, 1.04fr) minmax(360px, .96fr);
    grid-template-areas:
        "face toolbar"
        "face controls";
    gap: 14px 20px;
    align-items: start;
    margin-top: 18px;
}.analog-clock-face-panel {
    grid-area: face;
    width: 100%;
    min-width: 0;
    display: grid;
    justify-items: center;
    align-content: start;
    padding: 8px 4px 4px;
}.analog-clock-face-wrap {
    width: min(100%, var(--analog-face-max));
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    transition: width var(--motion-normal) ease;
}.analog-clock-face {
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    filter: drop-shadow(0 8px 18px rgb(15 23 42 / 5%));
}.analog-clock-stage[data-mode="practice"] .analog-clock-face { touch-action: none; }.analog-clock-dial {
    fill: var(--analog-dial-bg);
    stroke: var(--analog-dial-border);
    stroke-width: 2;
}.analog-clock-tick {
    stroke: var(--analog-dial-muted);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .64;
}.analog-clock-tick.is-hour {
    stroke: var(--analog-dial-text);
    stroke-width: 4;
    opacity: .9;
}.analog-clock-stage[data-show-ticks="false"] .analog-clock-ticks { display: none; }.analog-clock-numbers text {
    fill: var(--analog-dial-text);
    font-family: var(--font-sans);
    font-size: 23px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    font-variant-numeric: tabular-nums;
    paint-order: stroke fill;
    stroke: var(--analog-dial-bg);
    stroke-width: 1.3px;
    stroke-linejoin: round;
}.analog-clock-stage[data-number-style="roman"] .analog-clock-numbers text { font-size: 19px; font-weight: 700; }.analog-clock-stage[data-show-numbers="false"] .analog-clock-numbers { display: none; }.analog-clock-hand-visible { stroke: currentColor; stroke-linecap: round; pointer-events: none; }.analog-clock-hour,
.analog-clock-minute { color: var(--analog-hand-color); }.analog-clock-hour .analog-clock-hand-visible { stroke-width: 10; }.analog-clock-minute .analog-clock-hand-visible { stroke-width: 7; }.analog-clock-second { color: var(--analog-second-color); }.analog-clock-second .analog-clock-hand-visible { stroke-width: 3; }.analog-clock-pin {
    fill: var(--analog-hand-color);
    pointer-events: none;
    stroke: var(--analog-dial-bg);
    stroke-width: 3;
}.analog-clock-hand-hit {
    stroke: transparent;
    stroke-width: 34;
    stroke-linecap: round;
    pointer-events: none;
}.analog-clock-stage[data-mode="practice"] .analog-clock-hand-hit { pointer-events: stroke; cursor: grab; }.analog-clock-stage[data-mode="practice"] .analog-clock-hand-hit:active { cursor: grabbing; }.analog-clock-stage[data-show-seconds="false"] .analog-clock-second,
.analog-clock-stage[data-mode="practice"] .analog-clock-second { display: none; }.analog-clock-readout {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-height: 72px;
    margin-top: 4px;
    text-align: center;
}.analog-clock-readout time {
    color: var(--accent-value);
    font-family: var(--font-sans);
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}.analog-clock-readout > span { color: var(--text-soft); font-size: var(--font-xs); }.analog-clock-date { color: var(--text-soft); font-size: var(--font-xs); line-height: 1.4; }.analog-clock-readout-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}.analog-clock-readout-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 8px;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}.analog-clock-stage[data-mode="practice"] .analog-clock-readout-meta { display: none; }.analog-clock-readout.is-answer-hidden time { visibility: hidden; }.analog-clock-stage[data-show-digital="false"] .analog-clock-readout { display: none; }.analog-clock-learn-legend {
    display: none;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 700;
}.analog-clock-learn-legend span { display: inline-flex; align-items: center; gap: 4px; }.analog-clock-learn-legend i { width: 15px; height: var(--radius-micro); border-radius: var(--radius-pill); }.analog-clock-learn-legend i.is-hour { background: var(--primary); }.analog-clock-learn-legend i.is-minute { background: #16803c; }.analog-clock-stage[data-learn-mode="true"] .analog-clock-learn-legend { display: grid; }.analog-clock-stage[data-learn-mode="true"] .analog-clock-hour { color: var(--primary); }.analog-clock-stage[data-learn-mode="true"] .analog-clock-minute { color: #16803c; }.analog-clock-stage[data-learn-mode="true"] .analog-clock-pin { fill: var(--text); }.analog-clock-toolbar {
    grid-area: toolbar;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.analog-clock-settings-heading {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-width: 0;
}.analog-clock-settings-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}.analog-clock-settings-heading strong,
.analog-clock-settings-heading small { display: block; }.analog-clock-settings-heading strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
}.analog-clock-settings-heading small {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.45;
}.analog-clock-toolbar > .analog-clock-settings-heading {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}.analog-clock-toolbar-control,
.analog-clock-preset-control { display: grid; gap: 6px; min-width: 0; margin: 0; }.analog-clock-toolbar-label {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}.analog-clock-toolbar-control select {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 8px 40px 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    box-shadow: var(--shadow-card);
    cursor: pointer;
}.analog-clock-control-detail {
    display: block;
    min-width: 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.45;
    overflow-wrap: anywhere;
}.analog-clock-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}.analog-clock-preset {
    display: grid;
    gap: 2px;
    min-width: 0;
    min-height: 54px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}.analog-clock-preset:hover { border-color: var(--primary-border); background: var(--primary-soft); }.analog-clock-preset strong { font-size: 12px; line-height: 1.25; }.analog-clock-preset span { color: var(--text-soft); font-size: var(--font-xs); line-height: 1.3; }.analog-clock-preset.is-active,
.analog-clock-preset[aria-pressed="true"] {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
}.analog-clock-preset.is-active strong,
.analog-clock-preset[aria-pressed="true"] strong { color: var(--primary); }.analog-clock-quick-actions { display: none; }.analog-clock-controls-panel {
    grid-area: controls;
    align-self: start;
    width: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.analog-clock-display-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}.analog-clock-customizer-head,
.analog-clock-display-controls > .analog-clock-control-note,
.analog-clock-display-controls > .analog-clock-settings-section { grid-column: 1 / -1; }.analog-clock-customizer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}.analog-clock-display-controls > .analog-clock-settings-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}.analog-clock-display-controls > .analog-clock-settings-section > .analog-clock-settings-heading {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}.analog-clock-display-controls > .analog-clock-settings-section .analog-clock-option-group {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}.analog-clock-settings-footer {
    padding: 12px 16px 14px;
    background: var(--surface-soft);
}.analog-clock-customizer-head > div:first-child { min-width: 0; }.analog-clock-control-title { margin: 0; color: var(--text); font-size: 14px; font-weight: 700; }.analog-clock-customizer-subtitle {
    display: block;
    max-width: 52ch;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.45;
}.analog-clock-customizer-head-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }.analog-clock-reset {
    min-height: 34px;
    padding: 4px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: var(--font-xs);
    font-weight: 700;
    cursor: pointer;
}.analog-clock-reset:hover { background: var(--primary-soft); }.analog-clock-customizer-close {
    display: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}.analog-clock-option-group {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}.analog-clock-option-group.is-wide { grid-column: 1 / -1; }.analog-clock-option-label { color: var(--text); font-size: var(--font-xs); font-weight: 700; }.analog-clock-option-hint {
    display: block;
    margin-top: 0px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.4;
}.analog-clock-segment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}.analog-clock-segment-grid.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }.analog-clock-toggle-grid,
.analog-clock-step-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}.analog-clock-toggle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.analog-clock-segment,
.analog-clock-chip,
.analog-clock-step {
    min-height: var(--touch-target);
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: var(--font-xs);
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
}.analog-clock-segment:hover,
.analog-clock-chip:hover,
.analog-clock-step:hover { border-color: var(--primary-border); background: var(--primary-soft); }.analog-clock-segment.is-active,
.analog-clock-segment[aria-pressed="true"],
.analog-clock-chip.is-active,
.analog-clock-chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }.analog-clock-segment:disabled { cursor: not-allowed; opacity: .56; }.analog-clock-motion-group.is-disabled .analog-clock-segment-grid { opacity: .56; }.analog-clock-scale-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.analog-clock-scale-control input[type="range"] { width: 100%; min-width: 0; accent-color: var(--primary); cursor: pointer; }.analog-clock-scale-control output { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }.analog-clock-color-row {
    display: grid;
    grid-template-columns: repeat(6, 38px);
    gap: 8px;
    align-items: center;
}.analog-clock-color {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}.analog-clock-color:hover { border-color: var(--primary-border); }.analog-clock-color.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 14%, transparent); }.analog-clock-color-swatch { --swatch: var(--text); width: 23px; height: 23px; border-radius: 50%; background: var(--swatch); }.analog-clock-color-swatch.is-default {
    border: 1px solid var(--border-strong);
    background: linear-gradient(135deg, var(--text) 0 48%, var(--surface) 48% 100%);
}.analog-clock-color-custom { overflow: hidden; }.analog-clock-color-custom input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}.analog-clock-color-custom > span { color: var(--text-soft); font-size: 21px; font-weight: 500; line-height: 1; pointer-events: none; }.analog-clock-control-note { margin: 0; color: var(--text-soft); font-size: var(--font-xs); line-height: 1.5; }.analog-clock-practice-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin: 0 0 12px;
    padding: 14px;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius);
    background: var(--primary-soft);
}.analog-clock-practice-controls > .analog-clock-control-title,
.analog-clock-practice-controls > .analog-clock-control-note,
.analog-clock-practice-controls > .analog-clock-practice-status { grid-column: 1 / -1; }.analog-clock-practice-controls > .analog-clock-control-note { margin-top: -4px; }.analog-clock-practice-controls[hidden] { display: none; }.analog-clock-time-setter { margin-top: 0; }.analog-clock-time-setter > label,
.analog-clock-random-row > label {
    display: block;
    margin-bottom: 4px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.analog-clock-time-setter > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }.analog-clock-time-setter input,
.analog-clock-random-row select {
    min-width: 0;
    min-height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}.analog-clock-time-setter input { width: 100%; padding: 6px 8px; }.analog-clock-time-setter .button { min-height: 40px; padding: 6px 10px; white-space: nowrap; }.analog-clock-step-grid { align-self: end; }.analog-clock-random-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    align-items: end;
    gap: 8px;
}.analog-clock-random-row > label { margin: 0 0 8px; }.analog-clock-random-row select { width: 100%; padding: 6px 8px; }.analog-clock-practice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.analog-clock-practice-actions .button { width: 100%; min-width: 0; min-height: 40px; }.analog-clock-practice-actions .button:disabled { cursor: not-allowed; opacity: .58; }.analog-clock-practice-status { min-height: 34px; margin: 6px 0 0; color: var(--text-soft); font-size: var(--font-xs); line-height: 1.5; }.analog-clock-tool-note {
    margin: 12px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.55;
    text-align: center;
}.analog-clock-reading-guide {
    margin-top: 28px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}.analog-clock-reading-guide-head { max-width: 760px; }.analog-clock-reading-guide-head .eyebrow { margin: 0 0 4px; }.analog-clock-reading-guide-head h2 { margin: 0; color: var(--accent-ink); font-size: clamp(21px, 3vw, 27px); line-height: 1.2; }.analog-clock-reading-guide-head > p:not(.eyebrow) { margin: 8px 0 0; color: var(--text-soft); font-size: 13px; line-height: 1.65; }.analog-clock-reading-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }.analog-clock-reading-guide-grid article {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
}.analog-clock-reading-guide-grid h3 { margin: 8px 0 4px; font-size: 14px; }.analog-clock-reading-guide-grid p { margin: 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }.analog-clock-guide-mark { display: block; width: 42px; border-radius: var(--radius-pill); background: var(--text); }.analog-clock-guide-mark.is-hour { height: 7px; width: 30px; }.analog-clock-guide-mark.is-minute { height: 5px; }.analog-clock-guide-mark.is-second { height: 2px; background: var(--primary); }.analog-clock-customizer-backdrop { display: none; }.analog-clock-mode:focus-visible,
.analog-clock-preset:focus-visible,
.analog-clock-segment:focus-visible,
.analog-clock-chip:focus-visible,
.analog-clock-step:focus-visible,
.analog-clock-color:focus-visible,
.analog-clock-color-custom input:focus-visible,
.analog-clock-reset:focus-visible,
.analog-clock-fullscreen-button:focus-visible,
.analog-clock-toolbar-control select:focus-visible,
.analog-clock-scale-control input:focus-visible,
.analog-clock-customizer-close:focus-visible,
.analog-clock-time-setter input:focus-visible,
.analog-clock-random-row select:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 28%, transparent);
    outline-offset: 2px;
}.analog-clock-stage:fullscreen,
.analog-clock-stage:-webkit-full-screen,
.analog-clock-stage.is-pseudo-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    overflow: auto;
    padding: clamp(16px, 2.5vw, 28px);
    border: 0;
    border-radius: 0;
    background: var(--bg);
}.analog-clock-stage:fullscreen .analog-clock-stage-meta,
.analog-clock-stage:-webkit-full-screen .analog-clock-stage-meta,
.analog-clock-stage.is-pseudo-fullscreen .analog-clock-stage-meta {
    position: fixed;
    z-index: 5;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
}.analog-clock-stage:fullscreen .analog-clock-sync,
.analog-clock-stage:-webkit-full-screen .analog-clock-sync,
.analog-clock-stage.is-pseudo-fullscreen .analog-clock-sync,
.analog-clock-stage:fullscreen[data-mode="current"] .analog-clock-mode-switch,
.analog-clock-stage:-webkit-full-screen[data-mode="current"] .analog-clock-mode-switch,
.analog-clock-stage.is-pseudo-fullscreen[data-mode="current"] .analog-clock-mode-switch,
.analog-clock-stage:fullscreen[data-mode="current"] .analog-clock-toolbar,
.analog-clock-stage:-webkit-full-screen[data-mode="current"] .analog-clock-toolbar,
.analog-clock-stage.is-pseudo-fullscreen[data-mode="current"] .analog-clock-toolbar,
.analog-clock-stage:fullscreen[data-mode="current"] .analog-clock-controls-panel,
.analog-clock-stage:-webkit-full-screen[data-mode="current"] .analog-clock-controls-panel,
.analog-clock-stage.is-pseudo-fullscreen[data-mode="current"] .analog-clock-controls-panel { display: none; }.analog-clock-stage:fullscreen[data-mode="current"] .analog-clock-stage-copy,
.analog-clock-stage:-webkit-full-screen[data-mode="current"] .analog-clock-stage-copy,
.analog-clock-stage.is-pseudo-fullscreen[data-mode="current"] .analog-clock-stage-copy {
    position: fixed;
    z-index: 5;
    top: max(16px, env(safe-area-inset-top));
    left: max(16px, env(safe-area-inset-left));
}.analog-clock-stage:fullscreen[data-mode="current"] .analog-clock-layout,
.analog-clock-stage:-webkit-full-screen[data-mode="current"] .analog-clock-layout,
.analog-clock-stage.is-pseudo-fullscreen[data-mode="current"] .analog-clock-layout {
    min-height: calc(100vh - 56px);
    grid-template-columns: 1fr;
    grid-template-areas: "face";
    place-items: center;
    margin: 0;
}.analog-clock-stage:fullscreen[data-mode="current"] .analog-clock-face-wrap,
.analog-clock-stage:-webkit-full-screen[data-mode="current"] .analog-clock-face-wrap,
.analog-clock-stage.is-pseudo-fullscreen[data-mode="current"] .analog-clock-face-wrap { width: min(76vh, var(--analog-fullscreen-max), 92vw); }.analog-clock-stage:fullscreen[data-mode="practice"] .analog-clock-layout,
.analog-clock-stage:-webkit-full-screen[data-mode="practice"] .analog-clock-layout,
.analog-clock-stage.is-pseudo-fullscreen[data-mode="practice"] .analog-clock-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    grid-template-areas: "face controls";
    max-width: 1060px;
    margin-inline: auto;
}.analog-clock-stage:fullscreen[data-mode="practice"] .analog-clock-toolbar,
.analog-clock-stage:-webkit-full-screen[data-mode="practice"] .analog-clock-toolbar,
.analog-clock-stage.is-pseudo-fullscreen[data-mode="practice"] .analog-clock-toolbar { display: none; }.analog-clock-stage:fullscreen[data-mode="practice"] .analog-clock-face-wrap,
.analog-clock-stage:-webkit-full-screen[data-mode="practice"] .analog-clock-face-wrap,
.analog-clock-stage.is-pseudo-fullscreen[data-mode="practice"] .analog-clock-face-wrap { width: min(64vh, var(--analog-practice-fullscreen-max), 100%); }.analog-clock-stage:fullscreen[data-mode="practice"] .analog-clock-display-controls,
.analog-clock-stage:-webkit-full-screen[data-mode="practice"] .analog-clock-display-controls,
.analog-clock-stage.is-pseudo-fullscreen[data-mode="practice"] .analog-clock-display-controls { grid-template-columns: 1fr; }.analog-clock-stage:fullscreen[data-mode="practice"] .analog-clock-option-group,
.analog-clock-stage:-webkit-full-screen[data-mode="practice"] .analog-clock-option-group,
.analog-clock-stage.is-pseudo-fullscreen[data-mode="practice"] .analog-clock-option-group { grid-column: 1; }@media (min-width: 981px) {
    .analog-clock-face-panel {
        position: sticky;
        z-index: 2;
        top: calc(var(--header-h) + 16px);
        align-self: start;
    }

    
    .analog-clock-face-wrap {
        width: min(
            100%,
            clamp(300px, calc(100dvh - var(--header-h) - 190px), var(--analog-face-max))
        );
    }

    .analog-clock-stage:fullscreen .analog-clock-face-panel,
    .analog-clock-stage:-webkit-full-screen .analog-clock-face-panel,
    .analog-clock-stage.is-pseudo-fullscreen .analog-clock-face-panel {
        position: static;
        top: auto;
    }
}@media (max-width: 980px) {
    .analog-clock-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "face"
            "toolbar"
            "controls";
        justify-items: center;
    }
    .analog-clock-face-panel { width: min(100%, 680px); }
    .analog-clock-toolbar,
    .analog-clock-controls-panel { width: min(100%, 820px); }
    .analog-clock-toolbar { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); }
    .analog-clock-timezone-control { grid-column: 1; }
    .analog-clock-preset-control { grid-column: 2; }
    .analog-clock-display-controls { grid-template-columns: 1fr; }
    .analog-clock-display-controls > .analog-clock-settings-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}@media (max-width: 760px) {
    body.analog-customizer-open { overflow: hidden; }
    .analog-clock-page { padding-top: var(--page-top-space); }
    .analog-clock-header { margin-bottom: 14px; }
    .analog-clock-header h1 { font-size: clamp(27px, 8.5vw, 36px); }
    .analog-clock-stage { padding: 16px; border-radius: var(--radius-card); }
    .analog-clock-stage-head { align-items: flex-start; }
    .analog-clock-stage-meta { gap: 6px; }
    .analog-clock-sync { display: none; }
    .analog-clock-fullscreen-button { min-height: 42px; }
    .analog-clock-layout { gap: 12px; }
    .analog-clock-toolbar { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
    .analog-clock-timezone-control,
    .analog-clock-preset-control { grid-column: 1; }
    .analog-clock-quick-actions { display: block; }
    .analog-clock-quick-actions .button { width: 100%; min-height: 44px; }
    .analog-clock-controls-panel { width: 100%; max-width: 520px; justify-self: center; display: contents; }
    .analog-clock-display-controls { display: none; }
    .analog-clock-stage.is-customizer-open .analog-clock-display-controls {
        position: fixed;
        z-index: 1004;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        grid-template-columns: 1fr;
        max-height: min(78vh, 720px);
        overflow: auto;
        overscroll-behavior: contain;
        gap: 10px;
        padding: 22px max(16px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        border: 1px solid var(--border);
        border-bottom: 0;
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        background: var(--surface);
        box-shadow: var(--shadow-sticky);
    }
    .analog-clock-stage.is-customizer-open .analog-clock-display-controls::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: var(--radius-pill);
        background: var(--border-strong);
        transform: translateX(-50%);
    }
    .analog-clock-stage.is-customizer-open .analog-clock-customizer-head {
        position: sticky;
        z-index: 2;
        top: -22px;
        margin: -8px -2px 0;
        padding: 8px 2px 8px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }
    .analog-clock-display-controls > .analog-clock-settings-section {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 0;
    }
    .analog-clock-display-controls > .analog-clock-settings-section > .analog-clock-settings-heading {
        margin-bottom: 0;
    }
    .analog-clock-settings-footer { padding: 12px 0 0; background: transparent; }
    .analog-clock-option-group.is-wide { grid-column: 1; }
    .analog-clock-customizer-close { display: grid; place-items: center; }
    .analog-clock-customizer-backdrop {
        position: fixed;
        z-index: 1003;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgb(15 23 42 / 45%);
        cursor: default;
    }
    .analog-clock-stage.is-customizer-open .analog-clock-customizer-backdrop { display: block; }
    .analog-clock-practice-controls {
        width: 100%;
        max-width: 520px;
        justify-self: center;
        margin: 0;
        grid-template-columns: 1fr;
    }
    .analog-clock-practice-controls > * { grid-column: 1; }
    .analog-clock-stage:fullscreen[data-mode="practice"] .analog-clock-layout,
    .analog-clock-stage:-webkit-full-screen[data-mode="practice"] .analog-clock-layout,
    .analog-clock-stage.is-pseudo-fullscreen[data-mode="practice"] .analog-clock-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "face" "controls";
    }
    .analog-clock-stage:fullscreen[data-mode="practice"] .analog-clock-face-wrap,
    .analog-clock-stage:-webkit-full-screen[data-mode="practice"] .analog-clock-face-wrap,
    .analog-clock-stage.is-pseudo-fullscreen[data-mode="practice"] .analog-clock-face-wrap { width: min(54vh, var(--analog-practice-fullscreen-max), 100%); }
    .analog-clock-reading-guide-grid { grid-template-columns: 1fr; }
}@media (max-width: 430px) {
    .analog-clock-stage { padding: 12px; }
    .analog-clock-stage-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    .analog-clock-stage-meta { align-self: start; }
    .analog-clock-location { font-size: 13px; }
    .analog-clock-zone { font-size: var(--font-xs); }
    .analog-clock-fullscreen-button { min-height: var(--touch-target); padding: 6px 8px; font-size: var(--font-xs); }
    .analog-clock-mode-switch { width: 100%; margin-top: 12px; }
    .analog-clock-mode { min-height: 44px; padding-inline: 7px; font-size: var(--font-xs); }
    .analog-clock-face-panel { padding-inline: 0; }
    .analog-clock-face-wrap { max-width: calc(100vw - 52px); }
    .analog-clock-numbers text { font-size: 21px; }
    .analog-clock-stage[data-number-style="roman"] .analog-clock-numbers text { font-size: 17px; }
    .analog-clock-readout time { font-size: 24px; }
    .analog-clock-readout > span { font-size: var(--font-xs); }
    .analog-clock-readout-meta { gap: 4px; }
    .analog-clock-readout-meta span { min-height: 26px; padding: 2px 8px; font-size: var(--font-xs); }
    .analog-clock-toolbar-control select { min-height: 46px; font-size: 12px; }
    .analog-clock-settings-heading { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
    .analog-clock-settings-index { width: 30px; height: 26px; }
    .analog-clock-settings-heading strong { font-size: 13px; }
    .analog-clock-preset-grid { gap: 6px; }
    .analog-clock-preset { min-height: 52px; padding: 8px; }
    .analog-clock-preset strong { font-size: var(--font-xs); }
    .analog-clock-preset span { font-size: var(--font-xs); }
    .analog-clock-segment,
    .analog-clock-chip,
    .analog-clock-step { min-height: 44px; }
    .analog-clock-toggle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
    .analog-clock-toggle-grid .analog-clock-chip { padding-inline: 4px; font-size: var(--font-xs); }
    .analog-clock-color-row { grid-template-columns: repeat(6, minmax(40px, 1fr)); gap: 6px; }
    .analog-clock-color { width: 100%; height: 44px; }
    .analog-clock-scale-control { grid-template-columns: 70px minmax(0, 1fr) 40px; gap: 6px; }
    .analog-clock-reset { min-height: 40px; }
    .analog-clock-time-setter > div { grid-template-columns: minmax(0, 1fr) 82px; }
    .analog-clock-time-setter input,
    .analog-clock-time-setter .button,
    .analog-clock-random-row select,
    .analog-clock-practice-actions .button { min-height: 44px; }
    .analog-clock-random-row { grid-template-columns: minmax(0, 1fr) 122px; }
    .analog-clock-practice-actions { grid-template-columns: 1fr; }
    .analog-clock-tool-note { padding-inline: 4px; text-align: left; }
    .analog-clock-reading-guide { margin-top: 20px; padding: 16px; }
}@media (max-width: 350px) {
    .analog-clock-mode { font-size: var(--font-xs); }
    .analog-clock-preset-grid { grid-template-columns: 1fr; }
    .analog-clock-segment-grid.is-three { grid-template-columns: 1fr; }
    .analog-clock-color-row { grid-template-columns: repeat(3, 1fr); }
    .analog-clock-time-setter > div,
    .analog-clock-random-row { grid-template-columns: 1fr; }
    .analog-clock-random-row > label { margin-bottom: 0; }
}@media (prefers-reduced-motion: reduce) {
    .analog-clock-face-wrap { transition: none; }
}.analog-clock-direct-answer {
    display: grid;
    gap: var(--space-1);
    max-width: var(--measure-lede);
    margin: 0 0 var(--space-3);
    padding: var(--space-2-5) var(--space-3);
    border-left: 3px solid var(--primary);
    background: var(--primary-soft);
}.analog-clock-direct-answer strong {
    color: var(--accent-ink);
    font-size: 15px;
    line-height: 1.4;
}.analog-clock-direct-answer p {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.65;
}.analog-clock-direct-answer b { color: var(--primary-hover); }.analog-clock-jump { margin-top: 0; margin-bottom: var(--space-4); }.analog-clock-jump > a { text-align: left; }.analog-clock-learning-section,
.analog-clock-compare-section {
    margin-top: var(--section-gap);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border);
}.analog-clock-learning-head,
.analog-clock-compare-section > div:first-child {
    max-width: var(--measure-copy);
}.analog-clock-learning-head h2,
.analog-clock-compare-section h2 {
    margin: var(--space-1) 0 var(--space-2);
    color: var(--accent-ink);
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.2;
    letter-spacing: -.02em;
}.analog-clock-learning-head > p:last-child,
.analog-clock-compare-section > div:first-child > p:last-child {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}.analog-clock-example-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: var(--space-4);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}.analog-clock-example {
    min-width: 0;
    padding: var(--space-3) var(--space-4);
}.analog-clock-example + .analog-clock-example { border-left: 1px solid var(--border); }.analog-clock-example time {
    display: inline-block;
    margin-bottom: var(--space-1);
    color: var(--primary-hover);
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}.analog-clock-example h3 {
    margin: 0 0 var(--space-1);
    color: var(--accent-ink);
    font-size: 15px;
}.analog-clock-example p {
    margin: 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.6;
}.analog-clock-minute-map {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--surface);
}.analog-clock-minute-map > span {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: var(--space-2);
    text-align: center;
}.analog-clock-minute-map > span:not(:nth-child(6n + 1)) { border-left: 1px solid var(--border); }.analog-clock-minute-map > span:nth-child(n + 7) { border-top: 1px solid var(--border); }.analog-clock-minute-map b { color: var(--accent-ink); font-size: 14px; }.analog-clock-minute-map small { color: var(--text-soft); font-size: 12px; }.analog-clock-learning-note {
    margin: var(--space-3) 0 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.65;
}.analog-clock-compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: var(--space-4);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}.analog-clock-compare-grid > div { min-width: 0; padding: var(--space-3) var(--space-4); }.analog-clock-compare-grid > div + div { border-left: 1px solid var(--border); }.analog-clock-compare-grid h3 { margin: 0 0 var(--space-1); color: var(--accent-ink); font-size: 15px; }.analog-clock-compare-grid p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.65; }.analog-clock-compare-grid a { display: inline-flex; margin-top: var(--space-2); color: var(--primary-hover); font-weight: 700; }@media (max-width: 760px) {
    .analog-clock-direct-answer { padding: var(--space-2-5); }
    .analog-clock-example-list,
    .analog-clock-compare-grid { grid-template-columns: 1fr; }
    .analog-clock-example + .analog-clock-example,
    .analog-clock-compare-grid > div + div { border-left: 0; border-top: 1px solid var(--border); }
    .analog-clock-minute-map { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .analog-clock-minute-map > span:not(:nth-child(6n + 1)) { border-left: 0; }
    .analog-clock-minute-map > span:not(:nth-child(4n + 1)) { border-left: 1px solid var(--border); }
    .analog-clock-minute-map > span:nth-child(n + 5) { border-top: 1px solid var(--border); }
}@media (max-width: 430px) {
    .analog-clock-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analog-clock-jump > a { min-height: 52px; padding-inline: var(--space-2); text-align: left; }
    .analog-clock-jump > a:last-child:nth-child(odd) { grid-column: auto; }
    .analog-clock-minute-map { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .analog-clock-minute-map > span:not(:nth-child(4n + 1)) { border-left: 0; }
    .analog-clock-minute-map > span:not(:nth-child(3n + 1)) { border-left: 1px solid var(--border); }
    .analog-clock-minute-map > span:nth-child(n + 4) { border-top: 1px solid var(--border); }
    .analog-clock-example,
    .analog-clock-compare-grid > div { padding-inline: var(--space-2); }
}.tool-guide {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
    display: grid;
    gap: var(--space-6);
    margin-top: var(--section-gap-compact);
}.tool-guide-intro {
    display: grid;
    grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
    gap: 20px 28px;
    align-items: start;
    padding: 18px 20px 20px;
    border: var(--panel-border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.tool-guide-intro-head,
.tool-guide-section-head {
    display: grid;
    gap: 4px;
    align-content: start;
}.tool-guide-label {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}.tool-guide-intro h2,
.tool-guide-section h2 {
    margin: 0;
    color: var(--accent-ink);
    font-size: var(--font-section);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.018em;
}.tool-guide-copy {
    display: grid;
    gap: 8px;
}.tool-guide-intro-copy {
    max-width: var(--content-wide);
    margin-top: 0;
}.tool-guide-copy p,
.tool-guide-section-head > p,
.tool-guide-note {
    margin: 0;
    color: var(--text-soft);
    font-size: 13.5px;
    line-height: 1.7;
}.tool-guide-section {
    min-width: 0;
}.tool-guide-section-head {
    margin-bottom: 12px;
}.tool-guide-step-grid,
.tool-guide-use-grid,
.tool-guide-shortcuts-grid,
.tool-guide-tip-list {
    margin: 0;
    padding: 0;
    list-style: none;
}.tool-guide-step-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}.tool-guide-step-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.tool-guide-step-index {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-top: 0px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1;
}.tool-guide-step-body {
    display: grid;
    align-content: start;
    gap: 4px;
}.tool-guide-step-body strong {
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}.tool-guide-step-body p {
    margin: 0;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.6;
}.tool-guide-use-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}.tool-guide-use-card {
    position: relative;
    min-width: 0;
    min-height: 58px;
    padding: 12px 12px 12px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.55;
}.tool-guide-use-card::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}.tool-guide-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}.tool-guide-shortcut-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
}.tool-guide-shortcut-card kbd {
    flex: 0 0 auto;
    min-width: 42px;
    padding: 4px 6px;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--text);
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1.2;
}.tool-guide-shortcut-card span {
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.5;
}.tool-guide-note {
    margin-top: 8px;
    font-size: 12px;
}.tool-guide-section-tips {
    padding: 18px 20px;
    border: 1px solid var(--primary-border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-card);
    background: var(--primary-soft);
}.tool-guide-section-tips .tool-guide-section-head {
    margin-bottom: 10px;
}.tool-guide-tip-list {
    display: grid;
    gap: 6px;
}.tool-guide-tip-card {
    position: relative;
    margin: 0;
    padding: 0 0 0 16px;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.65;
}.tool-guide-tip-card::before {
    content: "";
    position: absolute;
    top: .66em;
    left: 1px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
}.tool-guide-section-faq {
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}.tool-guide-section-faq .faq-list {
    margin-top: 0;
}@media (max-width: 820px) {
    .tool-guide {
        gap: 20px;
        margin-top: 24px;
    }

    .tool-guide-step-grid {
        grid-template-columns: 1fr;
    }

    .tool-guide-use-grid,
    .tool-guide-shortcuts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}@media (max-width: 560px) {
    .tool-guide {
        gap: 18px;
        margin-top: 20px;
    }

    .tool-guide-intro {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 14px 16px;
    }

    .tool-guide-section-head {
        margin-bottom: 10px;
    }

    .tool-guide-intro h2,
    .tool-guide-section h2 {
        font-size: 18px;
        line-height: 1.35;
    }

    .tool-guide-copy p,
    .tool-guide-section-head > p {
        font-size: 13px;
        line-height: 1.65;
    }

    .tool-guide-step-grid,
    .tool-guide-use-grid,
    .tool-guide-shortcuts-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .tool-guide-step-card {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .tool-guide-step-index {
        width: 28px;
        height: 28px;
        font-size: var(--font-xs);
    }

    .tool-guide-step-body strong {
        font-size: 13px;
    }

    .tool-guide-step-body p,
    .tool-guide-use-card,
    .tool-guide-shortcut-card span,
    .tool-guide-tip-card {
        font-size: 12.5px;
    }

    .tool-guide-use-card {
        min-height: 0;
        padding: 10px 10px 10px 28px;
    }

    .tool-guide-use-card::before {
        top: 16px;
        left: 12px;
    }

    .tool-guide-shortcut-card {
        min-height: 52px;
        padding: 8px 10px;
    }

    .tool-guide-section-tips {
        padding: 14px;
    }

    .tool-guide-section-faq {
        padding-top: 2px;
    }
}@media (max-width: 900px) {
    main.site-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    main.site-main select:not([multiple]),
    main.site-main textarea:not([readonly]) {
        min-width: 0;
        max-width: 100%;
        min-height: 44px;
        font-size: 16px !important;
    }

    
    main.site-main .form-grid > *,
    main.site-main .date-add-grid > *,
    main.site-main .time-math-grid > *,
    main.site-main .meeting-topbar-controls > *,
    main.site-main .meeting-location-row > *,
    main.site-main .converter-datetime-row > *,
    main.site-main .converter-zone-flow > *,
    main.site-main .timezone-picker-v2,
    main.site-main label {
        min-width: 0;
    }

    main.site-main input,
    main.site-main select,
    main.site-main textarea {
        scroll-margin-block: 96px 30vh;
    }

    main.site-main input[type="checkbox"],
    main.site-main input[type="radio"],
    main.site-main label {
        touch-action: manipulation;
    }
}@media (orientation: landscape) and (max-height: 500px) {
    .is-pseudo-fullscreen {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-right: max(10px, env(safe-area-inset-right));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        padding-left: max(10px, env(safe-area-inset-left));
    }
}input.temporal-input-control,
input.time-input-control[type="time"] {
    display: block;
    width: 100%;
    inline-size: 100%;
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
    max-inline-size: 100%;
    box-sizing: border-box;
}.time-input-field {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}@supports (-webkit-touch-callout: none) {
    @media (max-width: 900px) {
        
        input.temporal-input-control {
            -webkit-appearance: none;
            appearance: none;
        }

        input.temporal-input-control::-webkit-date-and-time-value {
            display: block;
            width: auto;
            min-width: 0;
            max-width: 100%;
            margin: 0;
            text-align: inherit;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        input.temporal-input-control::-webkit-datetime-edit,
        input.temporal-input-control::-webkit-datetime-edit-fields-wrapper {
            min-width: 0;
            max-width: 100%;
            padding: 0;
            overflow: hidden;
        }

        
        .alarm-page-v2 input.temporal-input-control[data-alarm-time],
        .alarm-page-v2 input.temporal-input-control[data-alarm-time]::-webkit-date-and-time-value {
            text-align: center;
        }
    }
}@media (max-width: 640px) {
    
    main.tool-page :where(.content-card, .tool-panel, .converter-share-bar) .tool-share-panel {
        margin-top: 16px;
        padding: 16px 0 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    
    .time-difference-page-v2 .difference-tool-v2 {
        gap: 16px;
        padding: 16px;
    }

    .time-difference-page-v2 .difference-date-row {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .time-difference-page-v2 :where(
        .difference-live-block,
        .difference-date-result,
        .difference-contact-card,
        .difference-timeline-card
    ) {
        margin: 0;
        padding: 16px 0 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .time-difference-page-v2 .difference-fact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .time-difference-page-v2 .difference-contact-list {
        gap: 0;
    }

    .time-difference-page-v2 .difference-contact-item {
        padding: var(--space-3) 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
    }

    .time-difference-page-v2 .difference-contact-item:first-child {
        border-top: 0;
    }

    .time-difference-page-v2 .difference-timeline-card .timeline-wrap {
        margin: 0;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        background: transparent;
    }

    .time-difference-page-v2 .difference-timeline {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    .time-difference-page-v2 .difference-timeline th,
    .time-difference-page-v2 .difference-timeline td {
        min-width: 0;
        padding-inline: 10px;
        overflow-wrap: anywhere;
    }

    
    .meeting-planner-page-v3 .meeting-location-list {
        gap: 0;
    }

    .meeting-planner-page-v3 .meeting-location-row {
        padding: 14px 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
    }

    .meeting-planner-page-v3 .meeting-location-row:first-child {
        border-top: 0;
    }

    .meeting-planner-page-v3 .meeting-best-section {
        padding: 16px 0 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
    }

    .meeting-planner-page-v3 .meeting-table-wrap {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    
    .time-converter-page-v4 .converter-datetime-row {
        padding: 0 0 14px;
        border: 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
    }

    .time-converter-page-v4 .converter-zone-flow {
        gap: 0;
    }

    .time-converter-page-v4 .converter-zone-card-v4 {
        min-height: 0;
        padding: 14px 0;
        border: 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
    }

    .time-converter-page-v4 .converter-zone-card-v4:last-child {
        border-bottom: 0;
    }

    .time-converter-page-v4 .converter-zone-number {
        top: 14px;
        right: 0;
    }

    
    .days-between-page-v2 .days-weekday-breakdown,
    .date-add-page-v2 .date-natural-box,
    .age-page-v2 .age-year-explain,
    .age-page-v2 .age-milestone {
        padding: 14px 0 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .date-add-page-v2 .date-add-result-layout {
        gap: 0;
    }

    .date-add-page-v2 .date-mini-calendar,
    .date-add-page-v2 .date-add-detail {
        padding: 14px 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
    }

    
    main.tool-page :where(.content-card, .tool-panel) > .compare-table-wrap {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}@media (max-width: 390px) {
    .time-difference-page-v2 .difference-fact-grid {
        grid-template-columns: 1fr;
    }
}