:root {
    --font-sans: "Segoe UI", Arial, sans-serif;
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-soft: #f3f6f9;
    --surface-blue: #eef3fb;
    --text: #172033;
    --text-soft: #667085;
    --border: #e3e8ef;
    --border-strong: #cfd7e3;
    
    --brand: #1e9bfe;
    --primary: var(--brand);
    --primary-hover: #0f86dc;
    --primary-soft: #eaf6ff;
    --primary-border: #a8d8fb;
    
    --accent-ink: var(--button-secondary-text);
    --accent-value: var(--primary-hover);
    --accent-soft: var(--primary-soft);
    --accent-border: var(--primary-border);
    --on-primary: #ffffff;
    --button-secondary-bg: #f4f8fc;
    --button-secondary-bg-hover: #ffffff;
    --button-secondary-border: #d7e1ec;
    --button-secondary-border-hover: #bcd1e7;
    --button-secondary-text: #2e4767;
    --success: #16803c;
    --danger: #c2410c;
    --warning: #b54708;
    --footer: #011c4b;
    --footer-text: #dbe2ec;
    --shadow: 0 1px 2px rgba(16, 24, 40, .035);
    --shadow-raised: 0 10px 30px rgba(16, 24, 40, .08);

    

    
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-3-5: 14px;
    --space-4: 16px;
    --space-4-5: 18px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;

    
    --radius-micro: 4px;
    --radius-xs: 6px;
    --radius-sm: 7px;
    --radius: 8px;
    --radius-lg: 10px;
    --radius-card: 10px;
    --radius-pill: 999px;

    
    --border-width: 1px;
    --panel-border: var(--border-width) solid var(--border);
    --panel-border-strong: var(--border-width) solid var(--border-strong);
    --shadow-flat: none;
    --shadow-card: var(--shadow);
    --shadow-hover: 0 6px 18px rgba(16, 24, 40, .06);
    --shadow-floating: 0 14px 38px rgba(15, 23, 42, .13);
    --shadow-sticky: 0 -14px 42px rgba(15, 23, 42, .18);
    --shadow-action: 0 1px 2px color-mix(in srgb, var(--primary) 18%, transparent);
    --shadow-action-hover: 0 6px 16px color-mix(in srgb, var(--primary) 18%, transparent);
    --focus-ring-shadow: 0 0 0 3px var(--primary-soft);
    --error-ring-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 14%, transparent);

    
    --control-height: 44px;
    --touch-target: 44px;
    --control-radius: var(--radius-sm);
    --motion-fast: 140ms;
    --motion-normal: 180ms;
    --motion-slow: 250ms;
    --motion-progress: 350ms;
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --control-border-hover: #aeb9c8;

    
    --font-xs: 12px;
    --font-sm: 13px;
    --font-control: 14px;
    --font-base: 15px;
    --font-section: 20px;

    
    --page-title-size: clamp(30px, 4vw, 44px);
    --page-title-line-height: 1.08;
    --page-title-tracking: -.035em;
    --page-lede-size: 15px;
    --focal-number-weight: 700;
    --focal-number-tracking: -.035em;

    
    --panel-padding: var(--space-6);
    --panel-padding-compact: var(--space-4);
    --panel-gap: var(--space-4);
    --section-gap-compact: var(--space-8);
    --section-gap: var(--space-10);
    --section-gap-loose: var(--space-12);
    --section-heading-gap: var(--space-4);
    --page-top-space: var(--space-8);
    --page-bottom-space: var(--space-14);

    
    --container: 1200px;
    --measure-copy: 760px;
    --measure-lede: 820px;
    --content-wide: 900px;
    --measure-tool: 960px;
    --page-gutter: 40px;
    --header-h: 64px;
    --meeting-table-min: 620px;
    --breadcrumb-space: var(--space-4-5);
    --breadcrumb-size: var(--font-xs);
}html[data-theme="dark"] {
    --bg: #0c111b;
    --surface: #121925;
    --surface-soft: #182130;
    --surface-blue: #162a47;
    --text: #edf1f7;
    --text-soft: #9ca9bb;
    --border: #273244;
    --border-strong: #354257;
    --brand: #1e9bfe;
    
    --primary: #1e9bfe;
    --primary-hover: #52b5ff;
    --primary-soft: #103451;
    --primary-border: #2c79a9;
    --on-primary: #ffffff;
    --button-secondary-bg: #182536;
    --button-secondary-bg-hover: #1c2c40;
    --button-secondary-border: #33445b;
    --button-secondary-border-hover: #46607f;
    --button-secondary-text: #dce8f8;
    --success: #5bd184;
    --danger: #fb923c;
    --warning: #f59e0b;
    --footer: #071426;
    --footer-text: #dbe2ec;
    --shadow: 0 1px 2px rgba(0, 0, 0, .18);
    --shadow-raised: 0 12px 34px rgba(0, 0, 0, .24);
    --shadow-hover: 0 6px 18px rgba(0, 0, 0, .22);
    --shadow-floating: 0 14px 38px rgba(0, 0, 0, .32);
    --shadow-sticky: 0 -14px 42px rgba(0, 0, 0, .34);
    --shadow-action: 0 1px 2px rgba(0, 0, 0, .28);
    --shadow-action-hover: 0 6px 16px rgba(0, 0, 0, .24);
    color-scheme: dark;
}*, *::before, *::after { box-sizing: border-box; }html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
    color-scheme: light;
}body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--font-base);
    line-height: 1.55;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: auto;
}::selection { background: var(--primary-soft); color: var(--text); }button, input, select, textarea, optgroup, option, output, summary, kbd, code, pre {
    font: inherit;
    font-family: var(--font-sans);
}input::-webkit-datetime-edit,
input::-webkit-datetime-edit-fields-wrapper,
input::-webkit-datetime-edit-text,
input::-webkit-datetime-edit-month-field,
input::-webkit-datetime-edit-day-field,
input::-webkit-datetime-edit-year-field,
input::-webkit-datetime-edit-hour-field,
input::-webkit-datetime-edit-minute-field,
input::-webkit-datetime-edit-ampm-field {
    font-family: var(--font-sans);
}a { color: var(--primary); text-decoration: none; }a:hover { color: var(--primary-hover); }img { max-width: 100%; height: auto; }[hidden] { display: none !important; }h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -.015em;
}.container,
.narrow-container,
.wide-tool-container,
.atlas-container,
.reference-container,
.comparison-container,
.countdown-container,
.online-clock-container,
.analog-clock-container,
.world-cities-container,
.country-difference-container,
.blog-container,
.article-container,
.trust-container {
    width: min(calc(100% - var(--page-gutter)), var(--container));
    max-width: var(--container);
    margin-inline: auto;
}.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}.text-link {
    color: var(--primary);
    font-size: var(--font-sm);
    font-weight: 600;
}.text-link:hover { color: var(--primary-hover); }.screen-reader-text:focus,
.skip-link:focus {
    clip: auto !important;
    width: auto;
    height: auto;
    margin: 10px;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text);
    z-index: 9999;
    border: 1px solid var(--border);
}a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--primary);
    outline-offset: var(--focus-ring-offset);
}.section-block { scroll-margin-top: 80px; }.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--section-heading-gap);
    margin-bottom: var(--space-3-5);
}.section-heading h2 {
    margin: 0;
    font-size: var(--font-section);
    line-height: 1.3;
    color: var(--accent-ink);
    font-weight: 700;
    letter-spacing: -.018em;
}.section-heading:not(.compact-heading) h2::after {
    display: block;
    width: 28px;
    height: 2px;
    margin-top: var(--space-2);
    border-radius: var(--radius-micro);
    background: var(--primary);
    content: "";
}.section-heading > a,
.section-heading .text-button { font-size: var(--font-sm); font-weight: 600; }.compact-heading { margin-bottom: 8px; }.eyebrow {
    margin: 0 0 4px;
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}.section-intro { max-width: 900px; margin: 0 0 14px; color: var(--text-soft); line-height: 1.7; }.surface-open,
[data-surface="open"] {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: var(--shadow-flat);
}.surface-subtle,
[data-surface="subtle"] {
    background: var(--surface-soft);
    border: var(--panel-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-flat);
}.surface-panel,
[data-surface="panel"] {
    background: var(--surface);
    border: var(--panel-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}.surface-raised,
[data-surface="raised"] {
    background: var(--surface);
    border: var(--panel-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-floating);
}.section-stack {
    display: grid;
    gap: var(--section-gap);
}.panel-stack {
    display: grid;
    gap: var(--panel-gap);
}:where(
    .tool-page > .container,
    .atlas-page > .container,
    .reference-page > .container,
    .event-countdown-page > .container,
    .online-clock-page > .container,
    .analog-clock-page > .container,
    .trust-page > .container
) > :where(section, aside, div):not([hidden]) + :where(section, aside, div):not([hidden]) {
    margin-block-start: var(--panel-gap);
}.reading-measure { max-width: var(--measure-copy); }.lede-measure { max-width: var(--measure-lede); }.tool-measure { max-width: var(--measure-tool); }.interactive-card,
[data-interactive-card="true"] {
    cursor: pointer;
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
}@media (hover: hover) {
    .interactive-card:hover,
    [data-interactive-card="true"]:hover {
        border-color: var(--accent-border);
        box-shadow: var(--shadow-hover);
    }
}.interactive-card:focus-visible,
[data-interactive-card="true"]:focus-visible {
    outline: var(--focus-ring-width) solid var(--primary);
    outline-offset: var(--focus-ring-offset);
}.content-card,
.tool-panel,
.clock-panel,
.today-card,
.stopwatch-card,
.timer-card,
.alarm-card,
.difference-tool,
.date-tool,
.meeting-planner,
.year-progress-card,
.pomodoro-card,
.solar-tool {
    background: var(--surface);
    border: var(--panel-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}.content-card,
.tool-panel { padding: var(--panel-padding); }.button-small {
    min-height: 38px;
    padding: 6px 12px;
    font-size: 12.5px;
}.chip-button {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}.chip-button:hover {
    color: var(--primary);
    border-color: var(--accent-border);
    background: var(--accent-soft);
}.chip-button:focus-visible {
    outline: var(--focus-ring-width) solid var(--primary);
    outline-offset: var(--focus-ring-offset);
}.tool-step-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1;
}.button,
.segmented {
    min-height: var(--control-height);
    padding: 8px 14px;
    border-radius: var(--control-radius);
    font-size: var(--font-control);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease, transform var(--motion-fast) ease;
}.button {
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}.button:active,
.segmented:active { transform: translateY(1px); }.button-primary {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
    box-shadow: none;
}.button-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); box-shadow: var(--shadow-action-hover); }.button-secondary { background: var(--button-secondary-bg); color: var(--button-secondary-text); border-color: var(--button-secondary-border); }.button-secondary:hover { background: var(--button-secondary-bg-hover); border-color: var(--button-secondary-border-hover); color: var(--primary); }.button:disabled,
.segmented:disabled {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
}.button[aria-disabled="true"],
a.button.is-disabled {
    cursor: not-allowed;
    opacity: .58;
    pointer-events: none;
    transform: none;
}.segmented {
    min-width: 72px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}.segmented.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }:where(.tool-page, .reference-page, .atlas-page, .online-clock-page, .analog-clock-page, .event-countdown-page)
:where(
    input[type="text"], input[type="search"], input[type="number"],
    input[type="date"], input[type="time"], input[type="datetime-local"],
    input[type="month"], input[type="week"], input[type="email"],
    input[type="url"], input[type="tel"], input[type="password"],
    select:not([multiple]), textarea
) {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--control-radius);
    background-color: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--font-control);
    font-weight: 500;
    line-height: 1.35;
    outline: 0;
    box-shadow: none;
}:where(.tool-page, .reference-page, .atlas-page, .online-clock-page, .analog-clock-page, .event-countdown-page)
:where(input, select, textarea)::placeholder {
    color: color-mix(in srgb, var(--text-soft) 82%, transparent);
    opacity: 1;
}:where(.tool-page, .reference-page, .atlas-page, .online-clock-page, .analog-clock-page, .event-countdown-page)
:where(
    input[type="text"], input[type="search"], input[type="number"],
    input[type="date"], input[type="time"], input[type="datetime-local"],
    input[type="month"], input[type="week"], input[type="email"],
    input[type="url"], input[type="tel"], input[type="password"],
    select:not([multiple]), textarea
):hover:not(:disabled) {
    border-color: var(--control-border-hover);
}:where(.tool-page, .reference-page, .atlas-page, .online-clock-page, .analog-clock-page, .event-countdown-page)
:where(
    input[type="text"], input[type="search"], input[type="number"],
    input[type="date"], input[type="time"], input[type="datetime-local"],
    input[type="month"], input[type="week"], input[type="email"],
    input[type="url"], input[type="tel"], input[type="password"],
    select:not([multiple]), textarea
):focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring-shadow);
}:where(.tool-page, .reference-page, .atlas-page, .online-clock-page, .analog-clock-page, .event-countdown-page)
select:not([multiple]) {
    padding-right: 40px;
    -webkit-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
        linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 13px) calc(50% - 3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}:where(.tool-page, .reference-page, .atlas-page, .online-clock-page, .analog-clock-page, .event-countdown-page)
textarea {
    min-height: 96px;
    resize: vertical;
}:where(.tool-page, .reference-page, .atlas-page, .online-clock-page, .analog-clock-page, .event-countdown-page)
:where(input, select, textarea):disabled {
    border-color: var(--border);
    background-color: var(--surface-soft);
    color: var(--text-soft);
    cursor: not-allowed;
    opacity: .78;
}:where(.tool-page, .reference-page, .atlas-page, .online-clock-page, .analog-clock-page, .event-countdown-page)
:where(input[type="checkbox"], input[type="radio"]) {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}:where(.tool-page, .reference-page, .atlas-page, .online-clock-page, .analog-clock-page, .event-countdown-page) label {
    color: var(--text);
    font-size: var(--font-sm);
    font-weight: 600;
    line-height: 1.4;
}.world-search input {
    width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--control-radius);
    background: var(--surface);
    color: var(--text);
    outline: 0;
    box-shadow: none;
}.world-search input:hover { border-color: var(--control-border-hover); }.world-search input:focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring-shadow);
}input[type="range"] {
    accent-color: var(--primary);
}input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--danger) !important;
    box-shadow: var(--error-ring-shadow) !important;
}@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}body.tool-pseudo-fullscreen-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}.is-pseudo-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain;
    background: var(--bg, #fff);
    -webkit-overflow-scrolling: touch;
}@media (max-width: 960px) {
    :root { --header-h: 58px; }
}@media (max-width: 680px) {
    .section-heading {
        align-items: center;
        gap: var(--space-2-5);
    }
    .section-heading h2 { font-size: 18px; }
}@media (max-width: 768px) {
    
    .button-small,
    .chip-button {
        min-height: var(--touch-target);
    }
}@media (max-width: 720px) {
    :root {
        --page-gutter: 28px;
        --breadcrumb-space: var(--space-3-5);
        --breadcrumb-size: 12px;
        --panel-padding: var(--space-4);
        --panel-padding-compact: var(--space-3-5);
        --panel-gap: var(--space-3);
        --section-gap-compact: var(--space-6);
        --section-gap: var(--space-8);
        --section-gap-loose: var(--space-10);
        --section-heading-gap: var(--space-3);
        --page-top-space: var(--space-6);
        --page-bottom-space: var(--space-10);
    }
}@media (max-width: 480px) {
    :root { --page-gutter: 24px; }
}:where(.tool-breadcrumb, .atlas-breadcrumb, .breadcrumb-inline, .blog-breadcrumb, .online-clock-breadcrumb, .analog-clock-breadcrumb, .trust-breadcrumb) {
    min-width: 0;
    line-height: 1.45;
}:where(.tool-breadcrumb, .atlas-breadcrumb, .breadcrumb-inline, .blog-breadcrumb, .online-clock-breadcrumb, .analog-clock-breadcrumb, .trust-breadcrumb) > span[aria-hidden="true"] {
    color: var(--border-strong);
    user-select: none;
}:where(.tool-breadcrumb, .atlas-breadcrumb, .breadcrumb-inline, .blog-breadcrumb, .online-clock-breadcrumb, .analog-clock-breadcrumb, .trust-breadcrumb) > span[aria-current="page"] {
    min-width: 0;
    color: var(--text-soft);
    font-weight: 500;
    overflow-wrap: anywhere;
}.clock-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 14px;
    gap: 6px;
}.copy-status {
    min-height: 22px;
    margin: 4px 0 0;
    color: var(--success);
    font-size: 13px;
}.world-search {
    display: grid;
    max-width: 780px;
    grid-template-columns: 1fr auto;
    gap: 8px;
}.search-result {
    border: 1px solid var(--border);
    max-width: 780px;
    margin-top: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.search-result-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
}.search-result h3 {
    margin: 0 0 2px;
    font-size: 17px;
}.search-result p {
    margin: 0;
    color: var(--text-soft);
}.search-result time {
    font-variant-numeric: tabular-nums;
    color: var(--accent-value);
    font-size: 26px;
    font-weight: 700;
}.search-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}.search-suggestions button {
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    background: var(--surface);
    font-weight: 600;
}.world-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}.time-card {
    border: 1px solid var(--border);
    background: var(--surface);
    min-width: 0;
    position: relative;
    padding: 14px 16px;
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}.time-card h3 {
    margin: 0;
    line-height: 1.3;
    font-size: 14px;
    font-weight: 700;
}.time-card p {
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0 6px;
    font-size: var(--font-xs);
}.time-card time {
    display: block;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--accent-value);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.025em;
}.time-card small {
    display: block;
    color: var(--text-soft);
    margin-top: 4px;
    font-size: var(--font-xs);
}.compare-table-wrap {
    border: 1px solid var(--border);
    overflow: hidden;
    border-radius: var(--radius);
}.compare-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}.compare-table th, .compare-table td {
    text-align: left;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    font-size: 13px;
}.compare-table tr:last-child td {
    border-bottom: 0;
}.difference-ahead {
    color: var(--success);
}.difference-behind {
    color: var(--danger);
}.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}.tool-card {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 116px;
    padding: 16px;
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}.tool-card span {
    color: var(--text-soft);
    margin: 4px 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
}.tool-card b {
    margin-top: auto;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
}.error-card {
    text-align: center;
    padding: 48px 24px;
}.error-card h1 {
    font-size: 38px;
}.content-layout {
    max-width: none;
}.content-layout .article-card > :where(h1, h2, h3, h4, p, ul, ol, blockquote) {
    max-width: 900px;
}.article-card h1 {
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.15;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -.018em;
}.article-card p, .article-card li {
    color: var(--text-soft);
}.article-card a {
    text-decoration: underline;
}.site-footer {
    margin-top: 0;
    padding: 32px 0 32px;
    background: var(--footer);
    color: var(--footer-text);
}.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr .85fr 1fr .85fr;
    gap: 28px;
    align-items: start;
}.site-brand-footer-logo {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 10px;
    padding: 6px 8px;
    border-radius: var(--radius);
    background: #fff;
    line-height: 0;
}.site-brand-footer-logo:hover {
    opacity: .94;
}.footer-brand p {
    max-width: 310px;
    margin: 6px 0 14px;
    color: var(--footer-text);
    opacity: .72;
    font-size: 13.5px;
    line-height: 1.65;
}.footer-brand small {
    color: var(--footer-text);
    opacity: .56;
    font-size: var(--font-xs);
}.footer-column h2 {
    margin: 0 0 10px;
    color: var(--on-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}.footer-link-list li + li {
    margin-top: 4px;
}.site-footer .footer-link-list a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding-block: 2px;
    color: var(--footer-text);
    opacity: .74;
    font-size: 13.5px;
    line-height: 1.5;
}.site-footer .footer-link-list a:focus-visible,
.site-brand-footer-logo:focus-visible {
    outline: 2px solid var(--on-primary);
    outline-offset: 3px;
}.site-footer .footer-link-list a:hover {
    color: var(--on-primary);
    opacity: 1;
}.site-footer .footer-link-list .current-menu-item > a,
.site-footer .footer-link-list .current_page_item > a {
    color: var(--primary);
    opacity: 1;
}@media (max-width: 860px) {

.footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 20px;
}

.footer-brand {
    grid-column: 1 / -1;
}

.footer-brand p {
    max-width: 520px;
}

}@media (max-width: 680px) {

.site-footer {
    padding: 28px 0 28px;
}

.footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 14px;
}

.footer-brand {
    grid-column: 1 / -1;
}

.site-footer .footer-link-list a {
    min-height: 44px;
    padding-block: 4px;
}

}@media (max-width: 430px) {

.footer-grid {
    gap: 20px 12px;
}

.footer-column h2 {
    font-size: 12.5px;
}

.site-footer .footer-link-list a {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
}

}@media (max-width: 390px) {

.footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
}

.footer-column:last-child {
    grid-column: 1 / -1;
}

}@media (max-width: 340px) {

.footer-grid {
    grid-template-columns: 1fr;
}

.footer-brand, .footer-column:last-child {
    grid-column: auto;
}

}.navigation.pagination {
    margin-top: 24px;
}.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}.page-numbers:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    color: var(--text);
}.page-numbers.current {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}button:disabled {
    opacity: .52;
    cursor: not-allowed;
}.admin-bar .site-header {
    top: 32px;
}.sync-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 22px;
    margin: 8px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.sync-status::before {
    content: "";
    border-radius: 50%;
    background: var(--text-soft);
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
}.sync-status[data-state="synced"] {
    color: var(--success);
}.sync-status[data-state="synced"]::before {
    background: var(--success);
}.sync-status[data-state="loading"]::before {
    background: var(--primary);
}.sync-status[data-state="device"]::before {
    background: var(--danger);
}.world-directory {
    margin-top: var(--section-gap-compact);
}.search-result small {
    color: var(--text-soft);
}@media (max-width: 782px) {

.admin-bar .site-header {
    top: 46px;
}

}@media (max-width: 430px) {

.search-result-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

.search-result time {
    font-size: 26px;
}

.time-card h2 {
    grid-column: 1;
}

}.listing-header {
    margin-bottom: 20px;
}.listing-header h1 {
    margin: 0;
    font-size: clamp(32px, 5vw, 46px);
    line-height: 1.15;
    letter-spacing: -.035em;
    font-weight: 700;
}.post-list {
    display: grid;
    gap: 10px;
}.favorite-toggle {
    position: absolute;
    padding: 0;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-soft);
    display: grid;
    place-items: center;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
    top: 9px;
    right: 9px;
    width: 29px;
    height: 29px;
    border-radius: var(--radius-sm);
    font-size: 17px;
    touch-action: manipulation;
}.favorite-toggle::before {
    content: "";
    position: absolute;
    inset: -5px;
}.time-card .favorite-toggle + h3 {
    padding-right: 32px;
}.text-button {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}.favorites-grid .time-card time {
    font-size: 25px;
}.fullscreen-clock {
    position: fixed;
    inset: 0;
    z-index: 99999;
    color: var(--text);
    display: grid;
    place-items: center;
    padding: 28px;
    background: var(--bg);
}.fullscreen-clock[hidden] {
    display: none;
}.fullscreen-clock-inner {
    text-align: center;
}.fullscreen-clock-inner time {
    display: block;
    font-size: clamp(80px, 18vw, 230px);
    line-height: 1;
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    color: var(--accent-value);
    font-weight: 700;
}.fullscreen-clock-inner p {
    margin: 18px 0 4px;
    font-size: clamp(22px, 3vw, 38px);
    font-weight: 600;
}.fullscreen-clock-inner span {
    color: var(--text-soft);
    font-size: 16px;
}.fullscreen-close {
    position: absolute;
    top: 24px;
    right: 24px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    padding: 8px 14px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-weight: 600;
}body.fullscreen-clock-open {
    overflow: hidden;
}@media (max-width: 680px) {

.fullscreen-clock-inner time {
    font-size: clamp(60px, 20vw, 110px);
}

}@media (max-width: 430px) {

.clock-actions .button {
    grid-column: auto;
}

}.search-result-main {
    position: relative;
    min-width: 0;
}.search-result-main .search-favorite {
    top: -4px;
    right: 0;
}.search-result-main .search-favorite + h3 {
    padding-right: 40px;
}.search-result-main h3 a,
.time-card h3 a {
    color: inherit;
    text-decoration: none;
}.search-result-main h3 a:hover,
.time-card h3 a:hover {
    color: var(--primary);
}.hero-date {
    margin: 2px 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}.world-search .button {
    min-width: 88px;
}.time-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
}.favorite-toggle:hover, .favorite-toggle.is-favorite {
    color: var(--primary);
    border-color: var(--primary-border);
    background: var(--primary-soft);
}@media (max-width: 860px) {


.favorite-toggle {
    width: 34px;
    height: 34px;
    font-size: 15px;
}

.time-card .favorite-toggle + h3 {
    padding-right: 40px;
}

.search-result-main .search-favorite + h3 {
    padding-right: 44px;
}

}.compare-table th {
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}.compare-table td:last-child {
    font-weight: 600;
}.tool-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    box-shadow: none;
}.tool-card strong {
    color: var(--accent-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
}.tool-card-featured {
    border-color: var(--primary-border);
    background: var(--surface);
    box-shadow: inset 3px 0 0 var(--primary);
}html[data-theme="dark"] .tool-card-featured {
    border-color: var(--border-strong);
}.page-shell {
    padding: 32px 0 56px;
}@media (max-width: 980px) {

.world-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

}@media (max-width: 768px) {

.text-button {
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
}

.section-heading > a {
    min-height: var(--touch-target);
    display: inline-flex;
    align-items: center;
}

.search-suggestions button {
    min-height: var(--touch-target);
}

}@media (max-width: 680px) {

.article-card {
    padding: 18px;
}

.article-card h1 {
    font-size: clamp(28px, 8vw, 36px);
}

.hero-date {
    font-size: 15px;
}

.clock-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 430px;
    margin-inline: auto;
}

.clock-actions > * {
    width: 100%;
}

.copy-status {
    min-height: 14px;
}

.section-heading > a {
    white-space: nowrap;
    font-size: 12px;
}

.world-search {
    grid-template-columns: 1fr;
    gap: 6px;
}

.world-search .button {
    width: 100%;
}

.world-grid{
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.time-card {
    padding: 12px;
}

.time-card time {
    font-size: 22px;
}

.time-card p {
    max-width: calc(100% - 20px);
}

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

.tool-card{
    min-height: 0;
    padding: 14px;
}

.tool-card span {
    margin-bottom: 8px;
}

.page-shell {
    padding: 28px 0 48px;
}

.compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.compare-table {
    min-width: 480px;
}

}@media (max-width: 430px) {

.clock-actions {
    gap: 6px;
}

.button, .segmented {
    min-height: 44px;
    padding-inline: 11px;
}

.world-grid{
    grid-template-columns: 1fr;
}

.time-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 34px;
    grid-template-areas: "title clock favorite" "meta clock favorite" "date date favorite";
    column-gap: 12px;
    align-items: center;
}

.time-card h3 {
    grid-area: title;
    padding-right: 32px;
}

.time-card p {
    grid-area: meta;
    margin: 0px 0;
}

.time-card time {
    grid-area: clock;
    font-size: 23px;
}

.time-card small {
    grid-area: date;
    margin-top: 6px;
}

.time-card .favorite-toggle + h3 {
    padding-right: 32px;
}

.favorite-toggle {
    top: 8px;
    right: 8px;
}

.time-card .favorite-toggle {
    position: relative;
    grid-area: favorite;
    align-self: start;
    justify-self: end;
}

.time-card h3, .time-card .favorite-toggle + h3 {
    padding-right: 0;
}

}.world-grid .time-card h3 a {
    color: inherit;
}.world-grid .time-card h3 a:hover {
    color: var(--primary);
}.context-links-section .section-heading {
    align-items: flex-end;
    margin-bottom: 16px;
}.context-links-section .section-heading p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.55;
}.context-links-section {
    max-width: 100%;
    margin-top: var(--section-gap);
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
}.context-links-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}.context-links-list > a {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    min-height: 112px;
    padding: 16px 40px 16px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-card);
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}.context-links-list > a:hover {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}.context-link-copy, .context-link-copy small, .context-link-copy strong, .context-link-copy > span {
    display: block;
    min-width: 0;
}.context-link-copy small {
    width: max-content;
    max-width: 100%;
    margin-bottom: 6px;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1.35;
    text-transform: uppercase;
}.context-link-copy strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
    transition: color var(--motion-fast) ease;
}.context-links-list > a:hover .context-link-copy strong {
    color: var(--primary);
}.context-link-copy > span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}.context-link-arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1;
    transition: color var(--motion-fast) ease, transform var(--motion-fast) ease;
}.context-links-list > a:hover .context-link-arrow {
    color: var(--primary);
    transform: translateX(2px);
}@media (max-width: 760px) {

    .context-links-section {
    margin-top: var(--section-gap-compact);
    padding: 16px;
    border-radius: var(--radius-card);
}

    .context-links-list {
    grid-template-columns: 1fr;
}

    .context-links-list > a {
    min-height: 0;
    padding: 14px 40px 14px 14px;
}

}@media (prefers-reduced-motion: reduce) {

    .context-links-list > a, .context-link-arrow {
    transition: none;
}

    .context-links-list > a:hover {
    transform: none;
}

}.tool-share-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 18px;
    align-items: center;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
}.tool-share-copy {
    min-width: 0;
}.tool-share-copy strong, .tool-share-copy span {
    display: block;
}.tool-share-copy strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.35;
}.tool-share-copy span {
    max-width: 620px;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.5;
}.tool-share-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}.tool-share-actions .button {
    white-space: nowrap;
}.tool-share-status {
    grid-column: 1 / -1;
    min-height: 0;
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
}.tool-share-status:empty {
    display: none;
}@media (max-width: 760px) {

.tool-share-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
}

.tool-share-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
}

.tool-share-actions .button {
    width: 100%;
}

}@media (max-width: 520px) {

.tool-share-actions {
    grid-template-columns: 1fr;
}

}.home-main {
    padding-bottom: 56px;
}.home-main .home-stack {
    display: block;
}.home-clock-hero {
    padding: 44px 0 28px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}.home-clock-hero .hero-inner {
    max-width: none;
    text-align: center;
}.home-clock-hero .hero-inner h1 {
    max-width: 820px;
    margin: 0 auto;
    color: var(--text);
    font-size: var(--page-title-size);
    line-height: var(--page-title-line-height);
    font-weight: 700;
    letter-spacing: var(--page-title-tracking);
}.home-hero-kicker {
    margin: 0 0 4px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}.home-clock-hero .hero-lede {
    max-width: 620px;
    margin: 6px auto 10px;
    color: var(--text-soft);
    font-size: 14.5px;
    line-height: 1.58;
}.home-clock-hero .hero-clock {
    display: block;
    margin: 4px auto 0;
    color: var(--accent-value);
    font-size: clamp(70px, 10vw, 108px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.055em;
    font-variant-numeric: tabular-nums;
}.home-clock-hero .hero-date {
    margin: 8px 0 0;
    color: var(--accent-ink);
    font-size: 17px;
    font-weight: 600;
}.home-clock-context {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 8px;
    margin-top: 6px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.45;
}.home-clock-context a {
    color: var(--text-soft);
    text-decoration: none;
}.home-clock-context a:hover {
    color: var(--primary);
}.home-clock-context strong {
    color: var(--accent-ink);
    font-weight: 600;
}.home-clock-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: min(100%, 760px);
    margin: 10px auto 0;
    color: var(--text-soft);
}.home-clock-proof::before {
    content: none;
}.home-clock-proof > span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    padding: 2px 12px;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}.home-clock-proof > span:first-child {
    border-left: 0;
}.home-clock-proof small {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: 10.5px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}.home-clock-proof strong {
    max-width: none;
    overflow-wrap: normal;
    color: var(--accent-ink);
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 650;
    letter-spacing: 0;
}.home-clock-proof-code strong {
    font-size: 12px;
}.home-clock-proof-sync strong {
    color: var(--success);
}.home-clock-hero .clock-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}.home-format-switch {
    display: inline-flex;
    gap: 6px;
}.home-clock-hero .segmented, .home-clock-hero .button {
    min-height: 44px;
    padding: 6px 10px;
    font-size: 12.5px;
}.home-clock-hero .segmented {
    min-width: 62px;
}.home-clock-hero .copy-status {
    min-height: 18px;
    margin: 4px 0 0;
    font-size: 12px;
}.home-clock-hero .hero-clock,
.fullscreen-clock-inner time {
    white-space: nowrap;
}.home-clock-hero[data-clock-size="compact"] .hero-clock {
    font-size: clamp(56px, 8vw, 84px);
}.home-clock-hero[data-clock-size="normal"] .hero-clock {
    font-size: clamp(70px, 10vw, 108px);
}.home-clock-hero[data-clock-size="large"] .hero-clock {
    font-size: clamp(84px, 11.4vw, 124px);
}.home-clock-hero[data-hour-format-current="12"][data-clock-size="compact"] .hero-clock {
    font-size: clamp(52px, 7.4vw, 78px);
}.home-clock-hero[data-hour-format-current="12"][data-clock-size="normal"] .hero-clock {
    font-size: clamp(64px, 8.9vw, 98px);
}.home-clock-hero[data-hour-format-current="12"][data-clock-size="large"] .hero-clock {
    font-size: clamp(72px, 9.8vw, 108px);
}.home-clock-hero[data-clock-font="system"] .hero-clock,
.home-clock-hero[data-clock-font="mono"] .hero-clock,
.home-clock-hero[data-clock-font="clean"] .hero-clock,
.fullscreen-clock[data-clock-font="system"] .fullscreen-clock-inner time,
.fullscreen-clock[data-clock-font="mono"] .fullscreen-clock-inner time,
.fullscreen-clock[data-clock-font="clean"] .fullscreen-clock-inner time {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -.045em;
}.home-customize-toggle.is-active {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}.home-clock-customizer[hidden],
.home-clock-context[hidden],
.home-clock-proof[hidden],
.home-clock-hero .hero-date[hidden] {
    display: none !important;
}.home-clock-customizer {
    width: min(100%, 700px);
    margin: 10px auto 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-hover);
    text-align: left;
}.home-clock-customizer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}.home-clock-customizer-head > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}.home-clock-customizer-head strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.3;
}.home-clock-customizer-head small {
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.45;
}.home-clock-reset {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--text-soft);
    font: inherit;
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
}.home-clock-reset:hover,
.home-clock-reset:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}.home-clock-customizer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}.home-clock-setting {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}.home-clock-setting legend {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.3;
    font-weight: 700;
}.home-clock-choice-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}.home-clock-choice-options button {
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
    font-size: var(--font-xs);
    line-height: 1.2;
    font-weight: 600;
    cursor: pointer;
}.home-clock-choice-options button:hover,
.home-clock-choice-options button:focus-visible {
    border-color: var(--primary);
}.home-clock-choice-options button.is-active {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--on-primary);
}.home-clock-display-setting {
    grid-column: 1 / -1;
}.home-clock-checks {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}.home-clock-checks label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 58px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--text);
    cursor: pointer;
}.home-clock-checks label:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary) 36%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 72%, var(--surface));
}.home-clock-checks input {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0px 0 0;
    accent-color: var(--primary);
}.home-clock-checks label > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}.home-clock-checks strong {
    font-size: var(--font-xs);
    line-height: 1.25;
    font-weight: 700;
}.home-clock-checks small {
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.3;
}.fullscreen-clock[data-clock-size="compact"] .fullscreen-clock-inner time {
    font-size: clamp(72px, 14vw, 160px);
}.fullscreen-clock[data-clock-size="normal"] .fullscreen-clock-inner time {
    font-size: clamp(88px, 17vw, 210px);
}.fullscreen-clock[data-clock-size="large"] .fullscreen-clock-inner time {
    font-size: clamp(102px, 20vw, 250px);
}.fullscreen-clock[data-hour-format-current="12"] .fullscreen-clock-inner time {
    font-size: clamp(72px, 14vw, 180px);
}.home-discovery {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 18px 32px;
    align-items: center;
    margin-top: 24px;
    padding: 20px 24px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.home-discovery-copy h2 {
    margin: 0px 0 4px;
    color: var(--accent-ink);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.015em;
}.home-discovery-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.55;
}.home-section-label {
    display: block;
    margin-bottom: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: .015em;
}.home-discovery-search {
    min-width: 0;
}.home-discovery .world-search {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}.home-discovery .world-search input, .home-discovery .world-search .button {
    min-height: 46px;
}.home-discovery .world-search .button {
    min-width: 92px;
}.home-discovery .search-result {
    width: 100%;
    max-width: none;
    margin: 10px 0 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    box-shadow: none;
}.home-popular-links {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 -24px;
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}.home-popular-links > span {
    margin-right: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.home-popular-links a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text);
    font-size: var(--font-xs);
    font-weight: 600;
}.home-popular-links a:hover {
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--primary);
}.home-main .home-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
    margin: 0;
    padding: 32px 0;
    border-bottom: 1px solid var(--border);
}.home-main .home-section:last-child {
    border-bottom: 0;
}.home-main .section-heading {
    min-height: 0;
    margin: 0 0 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}.home-main .section-heading h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.018em;
}.home-main .section-heading > a, .home-main .section-heading .text-button {
    margin-top: 2px;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
}.home-section-note {
    max-width: 680px;
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.5;
}.home-main .favorites-section {
    padding-top: 28px;
}.home-main .favorites-grid {
    margin-top: 2px;
}.home-world-section .world-grid, .home-main .favorites-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}.home-world-section .time-card, .home-main .favorites-grid .time-card {
    min-height: 124px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
}.home-world-section .time-card:hover, .home-main .favorites-grid .time-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
}.home-world-section .time-card h3, .home-main .favorites-grid .time-card h3 {
    font-size: 14px;
    font-weight: 700;
}.home-world-section .time-card p, .home-main .favorites-grid .time-card p {
    margin: 2px 0 8px;
    font-size: var(--font-xs);
}.home-world-section .time-card time, .home-main .favorites-grid .time-card time {
    color: var(--accent-value);
    font-size: 29px;
    font-weight: 700;
    letter-spacing: -.025em;
}.home-world-section .time-card small, .home-main .favorites-grid .time-card small {
    margin-top: 4px;
    font-size: var(--font-xs);
}.home-world-country-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}.home-world-country-links > span {
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.home-world-country-links a {
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 600;
}.home-world-country-links a:hover {
    color: var(--primary);
}.home-world-country-links .home-country-more {
    margin-left: auto;
    color: var(--primary);
}.home-tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}.home-tools-section .tool-card {
    position: relative;
    min-height: 128px;
    padding: 16px 16px;
    border-radius: var(--radius);
    box-shadow: none;
}.home-tools-section .tool-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    box-shadow: none;
}.home-tools-section .tool-card-featured {
    background: var(--surface);
    box-shadow: inset 3px 0 0 var(--primary);
}.home-tools-section .home-tool-index {
    margin: 0 0 10px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}.home-tools-section .tool-card strong {
    font-size: 15px;
    font-weight: 700;
}.home-tools-section .tool-card > span:not(.home-tool-index) {
    margin: 4px 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
}.home-tools-section .tool-card b {
    font-size: var(--font-xs);
    font-weight: 600;
}.home-timezone-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .78fr);
    gap: 14px;
    align-items: stretch;
}.home-pane-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.home-pane-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}.home-pane-header h2 {
    margin: 0;
    color: var(--accent-ink);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.018em;
}.home-pane-header .home-section-note {
    margin-top: 4px;
}.home-pane-link {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: var(--font-xs);
    font-weight: 600;
    white-space: nowrap;
}.home-compare-pane {
    display: flex;
    flex-direction: column;
}.home-compare-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0 0 10px;
}.home-compare-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 27px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.home-compare-pane .compare-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    display: inline-block;
}.home-compare-pane .compare-dot-ahead {
    background: var(--success);
}.home-compare-pane .compare-dot-behind {
    background: var(--danger);
}.home-compare-pane .compare-table-wrap {
    margin-top: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: none;
}.home-compare-pane .compare-table {
    width: 100%;
}.home-compare-pane .compare-table thead {
    background: var(--surface-soft);
}.home-compare-pane .compare-table th {
    padding: 8px 12px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}.home-compare-pane .compare-table td {
    position: relative;
    padding: 10px 12px;
    background: var(--surface);
    font-size: 12.5px;
    vertical-align: middle;
}.home-compare-pane .compare-table tbody tr:hover td {
    background: var(--surface-soft);
}.home-compare-pane .compare-table td:first-child a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-weight: 600;
}.home-compare-pane .compare-table td:first-child a:hover {
    color: var(--primary);
}.home-compare-pane .compare-table td:first-child small {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.home-compare-pane .compare-table [data-difference] {
    padding-left: 28px;
    color: var(--text);
    font-weight: 600;
}.home-compare-pane .compare-table [data-difference]::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: var(--radius-pill);
    background: var(--border-strong);
    transform: translateY(-50%);
}.home-compare-pane .compare-table .difference-ahead {
    color: var(--success);
}.home-compare-pane .compare-table .difference-behind {
    color: var(--danger);
}.home-compare-pane .compare-table .difference-ahead::before {
    background: var(--success);
}.home-compare-pane .compare-table .difference-behind::before {
    background: var(--danger);
}.home-vietnam-pane {
    display: flex;
    flex-direction: column;
}.home-vn-header {
    margin-bottom: 12px;
}.home-vn-offset-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 10px;
    align-items: center;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--primary-soft);
}.home-vn-offset-label {
    grid-column: 1;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.home-vn-offset-hero strong {
    grid-column: 1;
    color: var(--text);
    font-size: 36px;
    line-height: 1.05;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}.home-vn-zone {
    grid-column: 1;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.home-vn-dst {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    max-width: 92px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--success);
    font-size: var(--font-xs);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}.home-vietnam-pane .section-intro {
    margin: 0 0 12px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.62;
}.home-vietnam-pane .section-intro strong {
    color: var(--text);
    font-weight: 600;
}.home-vn-facts {
    display: grid;
    gap: 6px;
    margin: auto 0 0;
    border: 0;
}.home-vn-fact {
    display: grid;
    grid-template-columns: minmax(86px, .72fr) minmax(0, 1fr);
    gap: 8px 12px;
    align-items: center;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}.home-vn-fact:last-child {
    padding-bottom: 8px;
}.home-vn-fact dt {
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.home-vn-fact dd {
    margin: 0;
    display: grid;
    gap: 0px;
    text-align: right;
}.home-vn-fact dd strong {
    color: var(--text);
    font-size: var(--font-xs);
    font-weight: 600;
}.home-vn-fact dd small {
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 400;
}.home-primary-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.92fr);
    gap: 24px;
    align-items: stretch;
}.home-primary-copy {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 100%;
    max-width: none;
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-card) + 2px);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.home-primary-copy .home-section-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 10px;
    padding: 0 10px;
    min-height: 24px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
}.home-primary-copy h2 {
    margin: 0 0 14px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.02em;
}.home-primary-copy p {
    margin: 0 0 12px;
    color: var(--text-soft);
    font-size: 15px;
    line-height: 1.72;
}.home-primary-copy p:last-child {
    margin-bottom: 0;
}.home-primary-copy p + p {
    margin-top: 2px;
}.home-primary-copy strong {
    color: var(--text);
    font-weight: 600;
}.home-primary-copy a {
    font-weight: 600;
}.home-primary-facts {
    align-self: stretch;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius-card) + 2px);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.home-primary-facts-head {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}.home-primary-facts-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}.home-primary-facts h3 {
    margin: 10px 0 6px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}.home-primary-facts-head p {
    margin: 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.65;
}.home-primary-facts dl {
    margin: 0;
    padding: 6px 18px 4px;
}.home-primary-fact-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
    align-items: start;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}.home-primary-fact-row:last-child {
    border-bottom: 0;
}.home-primary-facts dt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}.home-primary-fact-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}.home-primary-facts dd {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    margin: 0;
    min-width: 0;
    text-align: right;
}.home-primary-facts dd strong {
    color: var(--text);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    overflow-wrap: anywhere;
}.home-primary-facts dd small {
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}.home-primary-facts-footer {
    padding: 14px 18px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}.home-primary-facts-footer a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}.home-primary-facts-footer a:hover {
    text-decoration: underline;
}.home-events-shell {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.home-event-list {
    border: 0;
}.home-event-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto 20px;
    gap: 12px;
    align-items: center;
    min-height: 62px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}.home-event-row:hover {
    color: var(--text);
    background: var(--surface-soft);
}.home-event-row time {
    display: inline-grid;
    place-items: center;
    min-height: 38px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--text);
    font-size: var(--font-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}.home-event-row strong {
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}.home-event-row span {
    min-height: 27px;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 600;
    white-space: nowrap;
}.home-event-row b {
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 500;
    text-align: right;
}.home-event-footer {
    margin: 0;
    padding: 10px 14px;
    background: var(--surface-soft);
}.home-event-footer a {
    font-size: var(--font-xs);
    font-weight: 600;
}@media (max-width: 900px) {

.home-primary-content-layout {
    grid-template-columns: 1fr;
    gap: 18px;
}

.home-primary-copy {
    padding: var(--space-6) var(--space-5);
}

.home-primary-facts {
    max-width: 760px;
}

.home-clock-proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 620px);
    row-gap: 0;
}

.home-clock-proof > span {
    justify-content: space-between;
    gap: 10px;
    padding: var(--space-1-5) var(--space-3);
}

.home-clock-proof > span:nth-child(odd) {
    border-left: 0;
}

.home-clock-proof > span:nth-child(n + 3) {
    border-top: 1px solid var(--border);
}

.home-discovery {
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
    gap: 16px 20px;
}

.home-timezone-layout {
    grid-template-columns: 1fr;
    gap: 12px;
}

.home-pane-card {
    padding: 18px;
}

}@media (max-width: 760px) {

.home-clock-hero {
    padding: var(--space-6) 0 var(--space-5);
}

.home-clock-hero .hero-inner h1 {
    font-size: clamp(28px, 8vw, 34px);
}

.home-primary-copy {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.home-primary-copy .home-section-label {
    min-height: 0;
    margin-bottom: 6px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.home-discovery {
    grid-template-columns: 1fr;
    align-items: start;
    padding-top: 18px;
}

.home-popular-links {
    grid-column: 1;
}

.home-world-section .world-grid, .home-main .favorites-grid, .home-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

}@media (max-width: 560px) {

.home-clock-hero .segmented,
.home-clock-hero .button,
.home-clock-choice-options button,
.home-clock-color-options button,
.home-clock-reset,
.home-clock-custom-color {
    min-height: 44px;
}

.home-clock-context > span[aria-hidden="true"] {
    display: none;
}

.home-main {
    padding-bottom: 40px;
}

.home-primary-copy {
    padding: 0;
}

.home-primary-copy h2 {
    margin-bottom: 10px;
    font-size: 20.5px;
}

.home-primary-copy p {
    font-size: 14px;
    line-height: 1.65;
}

.home-primary-facts-head {
    padding: var(--space-3-5) var(--space-4) var(--space-3);
}

.home-primary-facts-head p {
    display: none;
}

.home-primary-facts h3 {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 17px;
}

.home-primary-facts dl {
    padding: 4px 16px 2px;
}

.home-primary-fact-row {
    grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
    align-items: center;
    gap: 10px;
    padding: var(--space-2-5) 0;
}

.home-primary-facts dt {
    gap: 8px;
    font-size: 12.5px;
}

.home-primary-fact-tag {
    min-width: 36px;
    min-height: 22px;
    padding-inline: 6px;
    font-size: 9px;
}

.home-primary-facts dd {
    align-items: flex-end;
    text-align: right;
}

.home-primary-facts dd strong {
    font-size: 13px;
}

.home-primary-facts dd small {
    display: none;
}

.home-primary-facts-footer {
    padding: var(--space-3) var(--space-4);
}

.home-clock-hero .clock-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 430px);
    margin-inline: auto;
    gap: 6px;
}

.home-clock-hero .clock-actions > .button,
.home-clock-hero .home-format-switch {
    width: 100%;
}

.home-clock-hero .home-format-switch {
    grid-column: 1 / -1;
    display: flex;
    justify-content: stretch;
}

.home-clock-hero .home-format-switch .segmented {
    flex: 1 1 0;
    min-width: 0;
}

.home-clock-customizer {
    margin-top: 8px;
    padding: 12px;
    border-radius: var(--radius);
}

.home-clock-customizer-head {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.home-clock-customizer-head small {
    max-width: 280px;
}

.home-clock-customizer-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

.home-clock-display-setting {
    grid-column: auto;
}

.home-clock-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-clock-checks label {
    min-height: 58px;
}

.home-clock-hero[data-clock-size="compact"] .hero-clock {
    font-size: clamp(48px, 15vw, 58px);
}

.home-clock-hero[data-clock-size="normal"] .hero-clock {
    font-size: clamp(56px, 17.2vw, 70px);
}

.home-clock-hero[data-clock-size="large"] .hero-clock {
    font-size: clamp(64px, 19.5vw, 80px);
}

.home-clock-hero[data-hour-format-current="12"][data-clock-size="compact"] .hero-clock {
    font-size: clamp(42px, 12.9vw, 52px);
}

.home-clock-hero[data-hour-format-current="12"][data-clock-size="normal"] .hero-clock {
    font-size: clamp(47px, 14.3vw, 58px);
}

.home-clock-hero[data-hour-format-current="12"][data-clock-size="large"] .hero-clock {
    font-size: clamp(51px, 15.8vw, 64px);
}

.home-clock-proof {
    width: min(100%, 430px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px;
    border-radius: 0;
}

.home-clock-proof > span {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 46px;
    padding: 6px 8px;
    border-left: 1px solid var(--border);
    border-top: 0;
    text-align: center;
}

.home-clock-proof > span:nth-child(odd) {
    border-left: 0;
}

.home-clock-proof > span:nth-child(n + 3) {
    border-top: 1px solid var(--border);
}

.home-clock-proof small {
    font-size: 9.5px;
}

.home-clock-proof strong,
.home-clock-proof-code strong {
    max-width: 100%;
    font-size: 11.5px;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}

.home-clock-proof-code strong {
    font-size: 10.75px;
    white-space: nowrap;
}

.home-clock-hero {
    padding: 24px 0 18px;
}

.home-hero-kicker {
    margin-bottom: var(--space-1);
    font-size: 11px;
}

.home-clock-hero .hero-lede {
    max-width: 34em;
    margin-top: var(--space-1);
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.52;
}

.home-clock-hero .hero-clock {
    font-size: clamp(56px, 18.5vw, 72px);
}

.home-clock-hero .hero-date {
    margin-top: 6px;
    font-size: 13.5px;
}

.home-clock-context {
    gap: var(--space-1) var(--space-2-5);
    margin-top: var(--space-1);
    font-size: 11.5px;
}

.home-clock-context a:nth-of-type(3) {
    display: none;
}

.home-discovery {
    margin-top: 16px;
    padding: 16px 16px 0;
    border-radius: var(--radius);
}

.home-discovery .world-search {
    grid-template-columns: 1fr;
}

.home-discovery .world-search .button {
    width: 100%;
}

.home-popular-links {
    margin-inline: -16px;
    padding-inline: 16px;
    border-radius: 0 0 var(--radius) var(--radius);
}

.home-world-country-links .home-country-more {
    margin-left: 0;
}

.home-main .home-section {
    padding: 24px 0;
}

.home-main .section-heading {
    gap: 10px;
}

.home-main .section-heading h2 {
    font-size: 18px;
}

.home-main .section-heading > a, .home-main .section-heading .text-button {
    font-size: var(--font-xs);
}

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

.home-world-section .time-card, .home-main .favorites-grid .time-card {
    min-height: 108px;
}

.home-tools-section .tool-card {
    min-height: 116px;
}

.home-pane-card {
    padding: 16px;
}

.home-pane-header {
    gap: 10px;
}

.home-pane-header h2 {
    font-size: 17px;
}

.home-vn-offset-hero strong {
    font-size: 32px;
}

.home-event-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 10px;
}

.home-event-row b {
    display: none;
}

.home-event-row span {
    font-size: var(--font-xs);
}

}@media (max-width: 390px) {

.home-clock-hero .button {
    padding-inline: 8px;
    font-size: var(--font-xs);
}

.home-clock-hero .segmented {
    padding-inline: 7px;
    font-size: var(--font-xs);
}

.home-clock-customizer-head {
    gap: 8px;
}

.home-clock-reset {
    padding-inline: 8px;
}

.home-clock-choice-options button {
    padding-inline: 5px;
    font-size: var(--font-xs);
}

.home-popular-links {
    gap: 6px;
}

.home-popular-links a {
    padding-inline: 8px;
}

.home-world-section .world-grid, .home-main .favorites-grid {
    grid-template-columns: 1fr;
}

.home-pane-header {
    display: grid;
    grid-template-columns: 1fr;
}

.home-pane-link {
    justify-self: start;
}

.home-vn-offset-hero {
    grid-template-columns: 1fr;
}

.home-vn-dst {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    max-width: none;
    margin-top: 6px;
}

.home-event-row {
    grid-template-columns: 48px minmax(0, 1fr);
}

.home-event-row span {
    grid-column: 2;
    justify-self: start;
}

}.meeting-best-card {
    appearance: none;
    position: relative;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease;
}.meeting-best-card:hover,
.meeting-best-card:focus-visible {
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 0 0 3px var(--primary-soft);
}.meeting-best-card > span {
    display: block;
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}.meeting-best-card > strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}.meeting-best-card > small {
    display: block;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.55;
}.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}@media (max-width: 640px) {

    .faq-grid {
    grid-template-columns: 1fr;
}

}.time-tool-cluster-nav {
    margin: 20px 0 28px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.time-tool-cluster-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}.time-tool-cluster-heading strong {
    font-size: .92rem;
}.time-tool-cluster-heading span {
    color: var(--text-soft);
    font-size: .82rem;
}.time-tool-cluster-links {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}.time-tool-cluster-links a {
    min-width: 0;
    padding: 10px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    color: var(--text);
    text-decoration: none;
    background: var(--surface-soft, var(--bg));
}.time-tool-cluster-links a strong, .time-tool-cluster-links a span {
    display: block;
}.time-tool-cluster-links a strong {
    font-size: .86rem;
    line-height: 1.25;
}.time-tool-cluster-links a span {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.3;
}.time-tool-cluster-links a:hover {
    border-color: var(--primary);
}.time-tool-cluster-links a[aria-current="page"] {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}.tool-intent-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}.tool-intent-strip a, .tool-intent-strip > div {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    color: var(--text);
    text-decoration: none;
    background: var(--surface);
}.tool-intent-strip strong, .tool-intent-strip span {
    display: block;
}.tool-intent-strip strong {
    font-size: .92rem;
}.tool-intent-strip span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: .8rem;
    line-height: 1.45;
}.tool-intent-strip a:hover {
    border-color: var(--primary);
}@media (max-width: 900px) {

  .time-tool-cluster-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

  .tool-intent-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

}@media (max-width: 600px) {

  .time-tool-cluster-heading {
    display: block;
}

  .time-tool-cluster-heading span {
    display: block;
    margin-top: 2px;
}

  
  .time-tool-cluster-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
}

  .time-tool-cluster-links a {
    min-width: 0;
    padding: 10px;
}

}@media (max-width: 430px) {

  .tool-intent-strip {
    grid-template-columns: 1fr;
}

}.pillar-supporting-posts {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
    margin: 28px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--border);
}.pillar-supporting-posts-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 12px;
}.pillar-supporting-posts-head > div > span {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}.pillar-supporting-posts-head h2 {
    margin: 0;
    font-size: clamp(1.08rem, 2vw, 1.3rem);
    line-height: 1.3;
}.pillar-supporting-posts-head > a {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 700;
}.pillar-supporting-posts-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}.pillar-supporting-posts-list > a {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
}.pillar-supporting-posts-list > a:hover {
    border-color: var(--primary);
}.pillar-supporting-posts-list span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.pillar-supporting-posts-list strong {
    font-size: .86rem;
    line-height: 1.4;
}.pillar-supporting-posts-list small {
    color: var(--text-soft);
    font-size: .75rem;
    line-height: 1.5;
}@media (max-width: 900px) {

  .pillar-supporting-posts-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .pillar-supporting-posts-list > a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

}@media (max-width: 600px) {

  .pillar-supporting-posts-head {
    display: block;
}

  .pillar-supporting-posts-head > a {
    display: inline-block;
    margin-top: 8px;
}

  .pillar-supporting-posts-list {
    grid-template-columns: 1fr;
}

  .pillar-supporting-posts-list > a:last-child:nth-child(odd) {
    grid-column: auto;
}

}.home-quick-tools {
    padding-top: 28px;
    padding-bottom: 28px;
}.home-quick-tools-heading {
    margin-bottom: 12px !important;
}.home-quick-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}.home-quick-tool-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 92px;
    padding: 14px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--motion-normal) ease, background-color var(--motion-normal) ease;
}.home-quick-tool-card:hover {
    border-color: var(--primary-border);
    background: var(--primary-soft);
    color: var(--text);
}.home-quick-tool-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}.home-quick-tool-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}.home-quick-tool-body strong {
    color: var(--accent-ink);
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
}.home-quick-tool-body small {
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.45;
}.home-quick-tool-card > b {
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
}@media (max-width: 680px) {

  .home-quick-tools-grid {
    grid-template-columns: 1fr;
}

  .home-quick-tool-card {
    min-height: 78px;
    padding: 12px 12px;
}

}@media (max-width: 430px) {

  .home-quick-tool-card {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
}

  .home-quick-tool-no {
    width: 28px;
    height: 28px;
}

  .home-quick-tool-body small {
    font-size: var(--font-xs);
}

}.home-faq-section .home-section-note {
    max-width: 760px;
}@media (max-width: 340px) {

.home-clock-checks {
    grid-template-columns: 1fr;
}

.home-clock-customizer-head {
    display: grid;
    grid-template-columns: 1fr;
}

.home-clock-reset {
    justify-self: start;
}

}.home-clock-hero,
.fullscreen-clock {
    --home-clock-custom-color: #172033;
}.home-clock-hero[data-clock-color="default"] .hero-clock,
.fullscreen-clock[data-clock-color="default"] .fullscreen-clock-inner time {
    color: var(--accent-value);
}.home-clock-hero[data-clock-color="blue"] .hero-clock,
.fullscreen-clock[data-clock-color="blue"] .fullscreen-clock-inner time {
    color: #155eef;
}.home-clock-hero[data-clock-color="green"] .hero-clock,
.fullscreen-clock[data-clock-color="green"] .fullscreen-clock-inner time {
    color: #16803a;
}.home-clock-hero[data-clock-color="red"] .hero-clock,
.fullscreen-clock[data-clock-color="red"] .fullscreen-clock-inner time {
    color: #c9362b;
}.home-clock-hero[data-clock-color="purple"] .hero-clock,
.fullscreen-clock[data-clock-color="purple"] .fullscreen-clock-inner time {
    color: #7c3aed;
}.home-clock-hero[data-clock-color="custom"] .hero-clock,
.fullscreen-clock[data-clock-color="custom"] .fullscreen-clock-inner time {
    color: var(--home-clock-custom-color);
}.home-clock-color-setting {
    grid-column: 1 / -1;
}.home-clock-color-controls {
    display: flex;
    align-items: stretch;
    gap: 8px;
}.home-clock-color-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}.home-clock-color-options button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
    font-size: var(--font-xs);
    line-height: 1.2;
    font-weight: 600;
    cursor: pointer;
}.home-clock-color-options button:hover,
.home-clock-color-options button:focus-visible {
    border-color: var(--primary);
}.home-clock-color-options button.is-active {
    border-color: var(--text);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--text);
}.home-clock-color-swatch {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 1px solid rgba(15, 23, 42, .14);
    border-radius: 50%;
    background: var(--text);
}.home-clock-color-swatch.color-default { background: var(--text); }.home-clock-color-swatch.color-blue { background: #155eef; }.home-clock-color-swatch.color-green { background: #16803a; }.home-clock-color-swatch.color-red { background: #c9362b; }.home-clock-color-swatch.color-purple { background: #7c3aed; }.home-clock-custom-color {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 108px;
    min-height: 38px;
    padding: 4px 6px 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    color: var(--text);
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
}.home-clock-custom-color:focus-within {
    border-color: var(--primary);
}.home-clock-custom-color.is-active {
    border-color: var(--text);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--text);
}.home-clock-custom-color input[type="color"] {
    width: 30px;
    height: 28px;
    padding: 2px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    cursor: pointer;
}@media (max-width: 560px) {
    .home-clock-color-controls {
        display: grid;
        grid-template-columns: 1fr;
    }

    .home-clock-color-options {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .home-clock-color-options button {
        display: grid;
        justify-items: center;
        gap: 4px;
        padding-inline: 3px;
        font-size: var(--font-xs);
    }

    .home-clock-custom-color {
        width: 100%;
        min-height: 40px;
    }
}@media (max-width: 340px) {
    .home-clock-color-options button > span:last-child {
        display: none;
    }

    .home-clock-color-options button {
        min-height: 44px;
    }

    .home-clock-color-swatch {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }
}@media (max-width: 680px) {
    .page-numbers { min-width: 44px; min-height: 44px; }
}@media (max-width: 340px) {
  .time-tool-cluster-links { grid-template-columns: 1fr; }
}@media (max-width: 420px) {

.home-clock-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
}

.home-clock-proof > span,
.home-clock-proof > span:nth-child(odd),
.home-clock-proof > span:nth-child(n + 3) {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 46px;
    padding: 6px;
    border-top: 0;
    border-left: 1px solid var(--border);
}

.home-clock-proof > span:nth-child(odd) {
    border-left: 0;
}

.home-clock-proof > span:nth-child(n + 3) {
    border-top: 1px solid var(--border);
}

.home-clock-proof small {
    font-size: 9.25px;
}

.home-clock-proof strong,
.home-clock-proof-code strong {
    max-width: 100%;
    font-size: 11px;
    text-align: center;
}

.home-clock-proof-code strong {
    font-size: 10.25px;
    white-space: nowrap;
}

.home-primary-facts-head,
.home-primary-facts dl,
.home-primary-facts-footer {
    padding-left: 16px;
    padding-right: 16px;
}

.home-primary-facts h3 {
    font-size: 17px;
}

}@media (max-width: 340px) {
    .home-clock-proof strong,
    .home-clock-proof-code strong { font-size: 10.25px; }
    .home-clock-proof-code strong { font-size: 9.6px; }
    .home-clock-hero .clock-actions { grid-template-columns: 1fr 1fr; }
    .home-clock-hero .home-format-switch { grid-column: 1 / -1; }
    .home-clock-hero .clock-actions > .button:last-child { grid-column: 1 / -1; }
}.tool-options-details > summary,
.countdown-options-compact details > summary,
.faq-grid summary,
.faq-list .faq-item > summary,
.atlas-faq-grid summary,
.reference-page .faq-item > summary {
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}.tool-options-details > summary::-webkit-details-marker,
.countdown-options-compact details > summary::-webkit-details-marker,
.faq-grid summary::-webkit-details-marker,
.faq-list .faq-item > summary::-webkit-details-marker,
.atlas-faq-grid summary::-webkit-details-marker,
.reference-page .faq-item > summary::-webkit-details-marker {
    display: none;
}.tool-options-details > summary::after,
.countdown-options-compact details > summary::after,
.faq-grid summary::after,
.faq-list .faq-item > summary::after,
.atlas-faq-grid summary::after,
.reference-page .faq-item > summary::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--text-soft);
    transform: rotate(45deg);
    transform-origin: 55% 55%;
    transition: transform var(--motion-fast) ease, color var(--motion-fast) ease;
}.tool-options-details[open] > summary::after,
.countdown-options-compact details[open] > summary::after,
.faq-grid details[open] > summary::after,
.faq-list .faq-item[open] > summary::after,
.atlas-faq-grid details[open] > summary::after,
.reference-page .faq-item[open] > summary::after {
    color: var(--primary);
    transform: rotate(225deg);
}.tool-options-details {
    margin-top: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    text-align: left;
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}.tool-options-details:hover,
.tool-options-details[open] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-hover);
}.tool-options-details > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 12px 16px 12px 16px;
    background: var(--surface);
    transition: background-color var(--motion-fast) ease;
}.tool-options-details > summary:hover,
.tool-options-details[open] > summary {
    background: var(--surface-soft);
}.tool-options-details[open] > summary {
    border-bottom: 1px solid var(--border);
}.tool-options-details > summary::after {
    justify-self: center;
}.tool-options-details summary > span,
.tool-options-details summary strong,
.tool-options-details summary small {
    display: block;
    min-width: 0;
}.tool-options-details summary strong {
    color: var(--text);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
}.tool-options-details summary small {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.5;
}.tool-options-details > .tool-options-grid {
    padding: 14px;
}.tool-options-details > .pomodoro-settings {
    padding: 14px 14px 0;
}.tool-options-details > .pomodoro-settings + .tool-options-grid {
    padding-top: 10px;
}.countdown-options-compact details {
    margin: 0;
    border: 0;
    background: transparent;
}.countdown-options-compact details > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content) 16px;
    align-items: center;
    column-gap: 14px;
    min-height: 64px;
    padding: 12px 16px 12px 16px;
    transition: background-color var(--motion-fast) ease;
}.countdown-options-compact details > summary:hover,
.countdown-options-compact details[open] > summary {
    background: var(--surface-soft);
}.countdown-options-compact details[open] > summary {
    border-bottom: 1px solid var(--border);
}.countdown-options-compact details > summary::after {
    justify-self: center;
}.countdown-options-compact summary > span:first-child {
    min-width: 0;
}.countdown-options-summary {
    min-width: 0;
    max-width: 360px;
    overflow: hidden;
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    justify-self: end;
}.countdown-options-compact summary > span:first-child strong,
.countdown-options-compact summary > span:first-child small {
    display: block;
}.countdown-options-compact summary > span:first-child strong {
    color: var(--text);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
}.countdown-options-compact summary > span:first-child small {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.5;
}.faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}.faq-grid details,
.faq-list .faq-item,
.atlas-faq-grid details,
.reference-page .faq-item {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}.faq-grid details:hover,
.faq-list .faq-item:hover,
.atlas-faq-grid details:hover,
.reference-page .faq-item:hover,
.faq-grid details[open],
.faq-list .faq-item[open],
.atlas-faq-grid details[open],
.reference-page .faq-item[open] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-hover);
}.faq-grid summary,
.faq-list .faq-item > summary,
.atlas-faq-grid summary,
.reference-page .faq-item > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 14px 16px 14px 16px;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    transition: background-color var(--motion-fast) ease;
}.faq-grid summary:hover,
.faq-list .faq-item > summary:hover,
.atlas-faq-grid summary:hover,
.reference-page .faq-item > summary:hover,
.faq-grid details[open] > summary,
.faq-list .faq-item[open] > summary,
.atlas-faq-grid details[open] > summary,
.reference-page .faq-item[open] > summary {
    background: var(--surface-soft);
}.faq-grid summary::after,
.faq-list .faq-item > summary::after,
.atlas-faq-grid summary::after,
.reference-page .faq-item > summary::after {
    justify-self: center;
}.faq-grid details > p,
.faq-list .faq-item > p,
.atlas-faq-grid details > p,
.reference-page .faq-item > p {
    margin: 0;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.65;
}@media (max-width: 760px) {
    .countdown-options-compact details > summary {
        grid-template-columns: minmax(0, 1fr) 16px;
        column-gap: 12px;
    }

    .countdown-options-summary {
        display: none;
    }
}@media (max-width: 640px) {
    .faq-list { grid-template-columns: 1fr; }

    .tool-options-details > summary,
    .countdown-options-compact details > summary {
        min-height: 60px;
        padding: 12px 14px;
    }

    .tool-options-details > .tool-options-grid {
        padding: 12px;
    }

    .tool-options-details > .pomodoro-settings {
        padding: 12px 12px 0;
    }

    .faq-grid summary,
    .faq-list .faq-item > summary,
    .atlas-faq-grid summary,
    .reference-page .faq-item > summary {
        min-height: 52px;
        padding: 12px 14px;
    }

    .faq-grid details > p,
    .atlas-faq-grid details > p,
    .reference-page .faq-item > p {
        padding: 12px 14px 14px;
    }
}@media (prefers-reduced-motion: reduce) {
    .tool-options-details,
    .tool-options-details > summary,
    .tool-options-details > summary::after,
    .countdown-options-compact details > summary,
    .countdown-options-compact details > summary::after,
    .faq-grid details,
    .faq-list .faq-item,
    .atlas-faq-grid details,
    .reference-page .faq-item,
    .faq-grid summary,
    .faq-list .faq-item > summary,
    .atlas-faq-grid summary,
    .reference-page .faq-item > summary,
    .faq-grid summary::after,
    .faq-list .faq-item > summary::after,
    .atlas-faq-grid summary::after,
    .reference-page .faq-item > summary::after {
        transition: none;
    }
}.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}.header-inner {
    position: relative;
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: var(--space-4);
}.site-brand {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    min-width: 0;
    color: var(--text);
    white-space: nowrap;
}.site-brand-logo {
    line-height: 0;
}.site-logo {
    display: block;
    width: auto;
    height: 34px;
    max-width: 210px;
    object-fit: contain;
}.site-brand-logo:hover {
    opacity: .92;
}.site-nav {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: auto;
}.site-nav-list,
.site-nav-list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}.site-nav-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
}.site-nav-list li {
    position: relative;
}.site-nav-list a {
    display: flex;
    align-items: center;
    color: var(--text-soft);
    text-decoration: none;
}.site-nav-list > li > a {
    position: relative;
    min-height: 44px;
    padding: var(--space-2-5) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}.site-nav-list > .menu-item-has-children {
    display: block;
}.site-nav-list > .menu-item-has-children > a {
    gap: var(--space-2);
}.site-nav-list > .menu-item-has-children > a::after {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: calc(var(--space-0-5) * -1);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--motion-fast) ease;
}.site-nav-list > .menu-item-has-children:hover > a::after,
.site-nav-list > .menu-item-has-children:focus-within > a::after,
.site-nav-list > .menu-item-has-children.is-submenu-open > a::after {
    margin-top: var(--space-0-5);
    transform: rotate(225deg);
}.site-nav-list > li > a:hover,
.site-nav-list > .current-menu-item > a,
.site-nav-list > .current_page_item > a,
.site-nav-list > .current-menu-ancestor > a,
.site-nav-list > .current_page_ancestor > a {
    background: var(--surface-soft);
    color: var(--primary);
}.site-nav-list > .current-menu-item > a,
.site-nav-list > .current_page_item > a,
.site-nav-list > .current-menu-ancestor > a,
.site-nav-list > .current_page_ancestor > a {
    box-shadow: inset 0 -2px 0 var(--primary);
}.site-nav-list .sub-menu {
    position: absolute;
    z-index: 120;
    top: calc(100% + var(--space-2));
    left: 0;
    display: grid;
    grid-template-columns: 1fr;
    width: min(288px, calc(100vw - (var(--page-gutter) * 2)));
    min-width: 0;
    max-width: calc(100vw - (var(--page-gutter) * 2));
    gap: var(--space-1);
    padding: var(--space-2);
    border: var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-raised);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease, visibility var(--motion-fast) ease;
}.site-nav-list .sub-menu.submenu-cols-2 {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
    width: min(440px, calc(100vw - (var(--page-gutter) * 2)));
}.site-nav-list .sub-menu.submenu-align-end {
    right: 0;
    left: auto;
}.site-nav-list .sub-menu::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    top: -9px;
    height: 9px;
}.site-nav-list .sub-menu li {
    min-width: 0;
}.site-nav-list .sub-menu a {
    min-height: 44px;
    padding: var(--space-2-5) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
}.site-nav-list .sub-menu a:hover,
.site-nav-list .sub-menu .current-menu-item > a,
.site-nav-list .sub-menu .current_page_item > a,
.site-nav-list .sub-menu .is-section-current > a {
    background: var(--surface-soft);
    color: var(--primary);
    box-shadow: none;
}.site-nav-list a:focus-visible,
.theme-toggle:focus-visible,
.nav-toggle:focus-visible,
.submenu-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}.site-nav-list li:hover > .sub-menu,
.site-nav-list li:focus-within > .sub-menu,
.site-nav-list li.is-submenu-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}.header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-2);
}.theme-toggle,
.nav-toggle,
.submenu-toggle {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}.theme-toggle,
.nav-toggle {
    min-height: 40px;
}.theme-toggle {
    width: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    font-weight: 600;
}.nav-toggle {
    display: none;
    margin-left: auto;
    padding: var(--space-1-5) var(--space-2-5);
    align-items: center;
    justify-content: center;
    gap: var(--space-1-5);
    font-size: 13px;
    font-weight: 600;
}.nav-toggle-icon {
    position: relative;
    width: 17px;
    height: 12px;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}.nav-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    border-top: 2px solid currentColor;
}.theme-toggle:hover,
.nav-toggle:hover,
.submenu-toggle:hover {
    background: var(--primary-soft);
    border-color: var(--primary-border);
    color: var(--primary);
}.submenu-toggle {
    display: none;
    width: 34px;
    height: 36px;
    padding: 0;
    place-items: center;
    border-color: transparent;
    background: transparent;
}.submenu-toggle span {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--motion-fast) ease;
}.is-submenu-open > .submenu-toggle span {
    transform: translateY(2px) rotate(225deg);
}@media (max-width: 1100px) and (min-width: 961px) {
    .header-inner {
        gap: var(--space-2);
    }

    .site-logo {
        max-width: 180px;
    }

    .site-nav-list {
        gap: 0;
    }

    .site-nav-list > li > a {
        padding-inline: var(--space-2);
        font-size: 13px;
    }

    .site-nav-list .sub-menu.submenu-cols-2 {
        width: min(408px, calc(100vw - (var(--page-gutter) * 2)));
    }
}@media (max-width: 960px) {
    .nav-toggle,
    .theme-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    body.nav-open {
        overflow: hidden;
    }

    .header-inner {
        gap: var(--space-2);
    }

    .site-brand {
        max-width: calc(100vw - 164px);
    }

    .nav-toggle {
        display: inline-flex;
        min-width: 72px;
        padding: 0 var(--space-3);
    }

    .site-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 1px);
        max-height: calc(100vh - var(--header-h) - var(--space-5));
        max-height: calc(100dvh - var(--header-h) - var(--space-5));
        overflow-y: auto;
        overscroll-behavior: contain;
        margin-left: 0;
        padding: var(--space-2) var(--space-3) var(--space-3);
        border: var(--panel-border);
        border-top: 0;
        border-radius: 0 0 var(--radius-card) var(--radius-card);
        background: var(--surface);
        box-shadow: var(--shadow-floating);
    }

    .site-nav.is-open {
        display: block;
    }

    .site-nav-list {
        display: block;
    }

    .site-nav-list > li,
    .site-nav-list > .menu-item-has-children {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: center;
    }

    .site-nav-list > li:not(.menu-item-has-children) {
        grid-template-columns: 1fr;
    }

    .site-nav-list > li + li {
        border-top: 1px solid var(--border);
    }

    .site-nav-list > li > a {
        min-height: 48px;
        padding: var(--space-3);
        border-radius: var(--radius-sm);
        font-size: 15px;
        white-space: normal;
    }

    .site-nav-list > .menu-item-has-children > a {
        gap: 0;
        padding-right: var(--space-2);
    }

    .site-nav-list > .menu-item-has-children > a::after {
        display: none;
    }

    .site-nav-list > .current-menu-item > a,
    .site-nav-list > .current_page_item > a,
    .site-nav-list > .current-menu-ancestor > a,
    .site-nav-list > .current_page_ancestor > a {
        box-shadow: none;
    }

    .site-nav-list .sub-menu,
    .site-nav-list .sub-menu.submenu-cols-2 {
        position: static;
        grid-column: 1 / -1;
        display: none;
        grid-template-columns: 1fr;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0 0 var(--space-2) var(--space-3);
        padding: 0 0 0 var(--space-3);
        border: 0;
        border-left: 1px solid var(--border);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    .site-nav-list .sub-menu::before {
        display: none;
    }

    .site-nav-list .is-submenu-open > .sub-menu {
        display: grid;
    }

    .site-nav-list .sub-menu a {
        min-height: 44px;
        padding: var(--space-2-5) var(--space-3);
        border-radius: var(--radius-sm);
        color: var(--text);
        font-size: 14px;
    }

    .submenu-toggle {
        display: grid;
        width: 44px;
        height: 44px;
        border-color: transparent;
        background: transparent;
    }

    .submenu-toggle:hover {
        border-color: transparent;
        background: var(--surface-soft);
    }
}@media (max-width: 430px) {
    .site-brand {
        max-width: calc(100vw - 124px);
    }

    .nav-toggle {
        width: 44px;
        min-width: 44px;
        padding-inline: 0;
    }

    .nav-toggle-label {
        display: none;
    }

    .theme-toggle {
        width: 44px;
        height: 44px;
    }
}.atlas-quick-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-1);
    margin: var(--space-2) 0 var(--space-4);
    padding: var(--space-2);
    border: var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
    box-shadow: none;
}.atlas-quick-nav > a {
    display: flex;
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-0-5);
    padding: var(--space-2) var(--space-2-5);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--button-secondary-text);
    text-decoration: none;
    transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}.atlas-quick-nav > a:hover,
.atlas-quick-nav > a:focus-visible {
    background: var(--primary-soft);
    color: var(--primary-hover);
}.atlas-quick-nav > a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}.atlas-quick-nav > a[aria-current="location"] {
    background: var(--primary-soft);
    color: var(--primary-hover);
    box-shadow: inset 0 0 0 1px var(--primary-border);
}.atlas-quick-nav strong,
.atlas-quick-nav small {
    display: block;
    min-width: 0;
}.atlas-quick-nav strong {
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}.atlas-quick-nav small {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}.atlas-quick-nav--compact {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--surface);
}.atlas-quick-nav--compact > a {
    min-height: 46px;
    padding-inline: var(--space-3);
    color: var(--button-secondary-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}.atlas-quick-nav--compact > a:hover,
.atlas-quick-nav--compact > a:focus-visible,
.atlas-quick-nav--compact > a[aria-current="location"] {
    color: var(--primary-hover);
}.world-hub-nav.atlas-quick-nav > a,
.world-hub-nav.atlas-quick-nav > a:nth-child(2n),
.world-hub-nav.atlas-quick-nav > a:nth-child(3n),
.world-hub-nav.atlas-quick-nav > a:nth-child(-n + 3),
.world-hub-nav.atlas-quick-nav > a:nth-last-child(-n + 2) {
    border: 0;
}@media (max-width: 1000px) {
    .atlas-quick-nav:not(.atlas-quick-nav--compact) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .atlas-quick-nav:not(.atlas-quick-nav--compact) > a:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}@media (max-width: 520px) {
    .atlas-quick-nav--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}@media (max-width: 360px) {
    .atlas-quick-nav:not(.atlas-quick-nav--compact) {
        grid-template-columns: 1fr;
    }

    .atlas-quick-nav:not(.atlas-quick-nav--compact) > a:last-child:nth-child(odd) {
        grid-column: auto;
    }
}