.atlas-page, .reference-page {
    padding: var(--page-top-space) 0 var(--page-bottom-space);
}.atlas-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--breadcrumb-space);
    color: var(--text-soft);
    font-size: var(--breadcrumb-size);
}.atlas-breadcrumb a {
    color: var(--text-soft);
}.atlas-breadcrumb a:hover {
    color: var(--primary);
}.atlas-country-flag {
    display: inline-flex;
    width: 32px;
    height: 24px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    vertical-align: middle;
}.atlas-country-flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}.atlas-country-flag.is-small {
    width: 24px;
    height: 18px;
    flex-basis: 24px;
    border-radius: var(--radius-micro);
}.atlas-hero, .reference-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 28px;
    align-items: stretch;
    margin-bottom: 20px;
}.atlas-hero-copy, .reference-hero-copy {
    align-self: center;
    min-width: 0;
    padding: 16px 0;
}.atlas-hero-copy h1, .reference-hero-copy h1 {
    max-width: var(--measure-lede);
    margin: 0 0 10px;
    color: var(--text);
    font-size: var(--page-title-size);
    font-weight: 700;
    line-height: var(--page-title-line-height);
    letter-spacing: var(--page-title-tracking);
}.atlas-hero-copy > p:not(.eyebrow), .reference-hero-copy > p:not(.eyebrow) {
    max-width: var(--measure-copy);
    margin: 0;
    color: var(--text-soft);
    font-size: var(--page-lede-size);
    line-height: 1.72;
}.atlas-card-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 600;
}.atlas-hero-meta, .reference-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}.atlas-hero-meta span, .reference-tags span {
    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-soft);
    font-size: 12px;
}.atlas-hero-meta strong {
    margin-right: 4px;
    color: var(--text);
}.atlas-hero-difference {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 16px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    font-size: 12px;
}.atlas-hero-difference span {
    color: var(--text-soft);
}.atlas-hero-difference strong {
    color: var(--text);
    font-weight: 700;
}.atlas-hero-difference strong.difference-ahead {
    color: var(--success);
}.atlas-hero-difference strong.difference-behind {
    color: var(--warning);
}.atlas-section, .reference-upcoming-section, .reference-holiday-directory {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
    margin-top: var(--section-gap);
}.atlas-section-heading, .reference-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}.atlas-section-heading > div, .reference-section-heading > div {
    min-width: 0;
}.atlas-section-heading-action {
    align-items: flex-start;
}.atlas-section-heading h2, .reference-section-heading h2 {
    margin: 0;
    color: var(--accent-ink);
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -.02em;
}.atlas-section-heading h2::after,
.reference-section-heading h2::after {
    display: block;
    width: 28px;
    height: 2px;
    margin-top: var(--space-2);
    border-radius: var(--radius-micro);
    background: var(--primary);
    content: "";
}.atlas-section-heading p:not(.eyebrow), .reference-section-heading p:not(.eyebrow) {
    max-width: var(--measure-copy);
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.6;
}.atlas-section-heading > a, .atlas-section-heading-action > a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--shadow-card);
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}.atlas-section-heading > a:hover, .atlas-section-heading-action > a:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
}.atlas-empty-card {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.atlas-search-card, .atlas-live-clock, .reference-clock-card, .reference-hero-aside {
    position: relative;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.atlas-search-card h2 {
    margin: 0 0 4px;
    font-size: 19px;
    letter-spacing: -.02em;
}.atlas-search-card > p {
    margin: 0 0 14px;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.55;
}.atlas-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}.atlas-search-form input {
    min-width: 0;
}.atlas-search-result {
    margin-top: 10px;
}.atlas-world-page .atlas-search-result .time-card {
    margin: 0;
    box-shadow: none;
}.atlas-search-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}.atlas-search-shortcuts a {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.atlas-search-shortcuts a:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    color: var(--primary);
}.atlas-clock-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}.atlas-clock-card {
    position: relative;
    min-width: 0;
    min-height: 132px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform var(--motion-fast) ease;
}.atlas-clock-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    transform: translateY(-1px);
}.atlas-clock-card.has-card-link {
    cursor: pointer;
}.atlas-clock-card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}.atlas-clock-card-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}.atlas-clock-card.has-card-link > .atlas-clock-place,
.atlas-clock-card.has-card-link > time,
.atlas-clock-card.has-card-link > small,
.atlas-clock-card.has-card-link > .world-clock-meta {
    position: relative;
    z-index: 2;
    pointer-events: none;
}.atlas-clock-place {
    padding-right: 24px;
}.atlas-clock-place h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.35;
}.atlas-clock-place h3 a {
    color: var(--text);
}.atlas-clock-place h3 a:hover {
    color: var(--primary);
}.atlas-clock-place p {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-clock-card time {
    display: block;
    margin-top: 10px;
    color: var(--accent-value);
    font-size: clamp(25px, 2.8vw, 31px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}.atlas-clock-card > small {
    display: block;
    margin-top: 4px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-favorite-toggle {
    position: absolute;
    z-index: 3;
    top: 3px;
    right: 3px;
    width: var(--touch-target);
    height: var(--touch-target);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-soft);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}.atlas-favorite-toggle:hover {
    background: var(--surface-soft);
    color: var(--primary);
}.atlas-favorite-toggle.is-favorite {
    color: var(--primary);
}.atlas-country-clock-grid.atlas-count-1 {
    grid-template-columns: minmax(240px, 340px);
}.atlas-country-clock-grid.atlas-count-2 {
    grid-template-columns: repeat(2, minmax(220px, 300px));
}.atlas-country-clock-grid.atlas-count-3 {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
}.atlas-region-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}.atlas-region-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.atlas-region-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
}.atlas-region-heading h3 {
    margin: 0;
    font-size: 16px;
}.atlas-region-heading span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-region-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    border-top: 1px solid var(--border);
}.atlas-region-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}.atlas-region-links a:hover strong {
    color: var(--primary);
}.atlas-region-links a > span, .atlas-region-links strong, .atlas-region-links small {
    display: block;
    min-width: 0;
}.atlas-region-links strong {
    font-size: 12.5px;
}.atlas-region-links small {
    margin-top: 0px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-region-links b {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-place-hero,
.reference-utc-page .reference-hero,
.reference-gmt-page .reference-hero {
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
}.atlas-live-clock {
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 18px;
}.atlas-live-clock time {
    display: block;
    margin: 4px 0 6px;
    color: var(--accent-value);
    font-size: clamp(42px, 4.3vw, 54px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}.atlas-live-clock p, .atlas-live-clock small {
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
}.atlas-live-clock p strong {
    color: var(--text);
}.atlas-live-clock small {
    margin-top: 2px;
}.atlas-tech-label {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 10px;
    padding: 4px 6px;
    border-radius: var(--radius-xs);
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-country-hero-v2,
.atlas-city-hero-v2 {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 16px;
}.atlas-country-hero-v2 .atlas-hero-copy,
.atlas-city-hero-v2 .atlas-hero-copy {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    padding: 28px 28px;
    border: 1px solid color-mix(in srgb, var(--primary-border) 26%, var(--border));
    border-radius: calc(var(--radius-card) + var(--radius-micro));
    background: var(--surface);
    box-shadow: inset 3px 0 0 var(--primary);
}.atlas-country-hero-v2 .atlas-hero-copy > p:not(.eyebrow),
.atlas-city-hero-v2 .atlas-hero-copy > p:not(.eyebrow) {
    max-width: var(--measure-copy);
}.atlas-country-hero-v2 .atlas-hero-copy .eyebrow,
.atlas-city-hero-v2 .atlas-hero-copy .eyebrow {
    margin-bottom: 10px;
}.atlas-country-hero-v2 .atlas-hero-difference,
.atlas-city-hero-v2 .atlas-hero-difference {
    align-self: flex-start;
    margin-top: 18px;
    padding: 10px 12px;
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--primary-soft) 30%, var(--surface));
}.atlas-live-clock-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    justify-content: stretch;
    align-content: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    padding: 24px 24px 20px;
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--primary-border) 34%, var(--border));
    border-radius: calc(var(--radius-card) + var(--radius-micro));
    background: color-mix(in srgb, var(--primary-soft) 24%, var(--surface));
    box-shadow: var(--shadow-card);
}.atlas-live-clock-feature > * {
    justify-self: center;
    max-width: 100%;
}.atlas-live-clock-feature .atlas-card-kicker {
    justify-self: center;
    margin-bottom: 2px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}.atlas-live-clock-visual {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    min-width: 0;
}.atlas-live-clock-visual > * {
    justify-self: center;
}.atlas-live-clock-feature time {
    margin: 0;
    color: var(--accent-value);
    font-size: clamp(52px, 5vw, 68px);
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.055em;
    text-align: center;
}.atlas-live-clock-meta {
    margin: 0;
    color: var(--text-soft);
    font-size: 13px;
}.atlas-live-clock-meta strong {
    color: var(--text);
}.atlas-live-clock-feature small {
    margin-top: -1px;
    font-size: var(--font-xs);
}.atlas-live-clock-feature .atlas-tech-label {
    align-self: auto;
    justify-self: center;
    margin-top: 2px;
}.atlas-mini-analog {
    --atlas-analog-size: 184px;
    width: var(--atlas-analog-size);
    max-width: 100%;
    aspect-ratio: 1;
    margin-inline: auto;
}.atlas-mini-analog-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}.atlas-mini-analog-dial {
    fill: var(--surface);
    stroke: var(--border-strong);
    stroke-width: 2;
}.atlas-mini-analog-tick {
    stroke: var(--text-soft);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: .85;
}.atlas-mini-analog-tick.is-hour {
    stroke: var(--accent-ink);
    stroke-width: 4;
    opacity: 1;
}.atlas-mini-analog-numbers text {
    fill: var(--text);
    font-family: var(--font-sans);
    font-size: 23px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
    font-variant-numeric: tabular-nums;
    paint-order: stroke fill;
    stroke: var(--surface);
    stroke-width: 1.2px;
    stroke-linejoin: round;
}.atlas-mini-analog-hand-visible {
    stroke: currentColor;
    stroke-linecap: round;
}.atlas-mini-analog-hour,
.atlas-mini-analog-minute {
    color: var(--accent-ink);
}.atlas-mini-analog-hour .atlas-mini-analog-hand-visible {
    stroke-width: 10;
}.atlas-mini-analog-minute .atlas-mini-analog-hand-visible {
    stroke-width: 7;
}.atlas-mini-analog-second {
    color: var(--primary);
}.atlas-mini-analog-second .atlas-mini-analog-hand-visible {
    stroke-width: 3;
}.atlas-mini-analog-pin {
    fill: var(--accent-ink);
    stroke: var(--surface);
    stroke-width: 4;
}.atlas-inline-note {
    max-width: 720px;
    margin-top: 14px;
    padding: 10px 12px;
    border-left: 3px solid var(--primary);
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}.atlas-inline-note strong {
    color: var(--text);
}.atlas-fact-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}.atlas-fact-strip > div {
    min-width: 0;
    padding: 16px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.atlas-fact-strip > div + div {
    border-left: 1px solid var(--border);
}.atlas-fact-strip span,
.atlas-fact-strip small {
    display: block;
    color: var(--text-soft);
}.atlas-fact-strip span {
    font-size: var(--font-xs);
}.atlas-fact-strip strong {
    display: block;
    margin-top: 4px;
    font-size: 18px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}.atlas-fact-strip small {
    margin-top: 6px;
    font-size: var(--font-xs);
    overflow-wrap: anywhere;
}.atlas-country-intent-links, .atlas-city-intent-links {
    display: grid;
    gap: 6px;
    margin-top: 10px;
}.atlas-country-intent-links a, .atlas-city-intent-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 10px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}.atlas-country-intent-links a:hover, .atlas-city-intent-links a:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    color: var(--text);
}.atlas-country-intent-links span, .atlas-country-intent-links strong, .atlas-country-intent-links small, .atlas-city-intent-links span, .atlas-city-intent-links strong, .atlas-city-intent-links small {
    display: block;
    min-width: 0;
}.atlas-country-intent-links strong, .atlas-city-intent-links strong {
    font-size: 12.5px;
    line-height: 1.35;
}.atlas-country-intent-links small, .atlas-city-intent-links small {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.35;
}.atlas-country-intent-links b, .atlas-city-intent-links b {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: 13px;
}.atlas-popular-time-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}.atlas-popular-time-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.atlas-popular-time-card > span {
    min-width: 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.3;
}.atlas-popular-time-card > span:last-child {
    text-align: right;
}.atlas-popular-time-card strong {
    display: block;
    margin-top: 2px;
    color: var(--accent-value);
    font-size: 15px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}.atlas-popular-time-card small {
    display: block;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-popular-time-card > b {
    color: var(--text-soft);
    font-size: 12px;
}.atlas-dual-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: var(--section-gap);
}.atlas-data-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.atlas-data-card-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}.atlas-data-card-heading h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}.atlas-data-card-heading > span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-compare-list {
    display: grid;
}.atlas-compare-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}.atlas-compare-row:last-child {
    border-bottom: 0;
}.atlas-compare-row > span, .atlas-compare-row strong, .atlas-compare-row small {
    display: block;
}.atlas-compare-row strong {
    font-size: 12.5px;
}.atlas-compare-row small {
    margin-top: 0px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-compare-row b {
    flex: 0 0 auto;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}.atlas-call-window {
    padding: 18px 0 12px;
}.atlas-call-window span {
    display: block;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-call-window strong {
    display: block;
    margin-top: 2px;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.1;
    letter-spacing: -.025em;
}.atlas-call-window p, .atlas-card-copy, .atlas-card-note {
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.58;
}.atlas-call-window p {
    margin: 8px 0 0;
}.atlas-card-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}.atlas-conversion-section {
    max-width: none;
    margin-inline: 0;
}.atlas-table-wrap {
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.atlas-table-toggle {
    display: none;
    width: 100%;
    min-height: 40px;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}.atlas-time-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}.atlas-time-table th, .atlas-time-table td {
    width: 50%;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 12.5px;
}.atlas-time-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.atlas-time-table tr:last-child td {
    border-bottom: 0;
}.atlas-time-table td:first-child {
    font-weight: 600;
}.atlas-time-table small {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-clock-compare {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 220px) minmax(0, 1fr);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    overflow: hidden;
}.atlas-compare-clock, .atlas-difference-answer {
    min-width: 0;
    padding: 18px;
}.atlas-compare-clock > span, .atlas-difference-answer > span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-compare-clock time {
    display: block;
    color: var(--accent-value);
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}.atlas-compare-clock small {
    display: block;
    margin-top: 6px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-difference-answer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-inline: 1px solid var(--border);
    background: var(--surface-soft);
    text-align: center;
}.atlas-difference-answer strong {
    font-size: 14px;
    line-height: 1.45;
}.atlas-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 14px;
}.atlas-metric-grid > div {
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}.atlas-metric-grid span, .atlas-metric-grid strong {
    display: block;
}.atlas-metric-grid span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-metric-grid strong {
    margin-top: 2px;
    font-size: 16px;
}.atlas-card-note {
    margin: 10px 0 6px;
}.atlas-text-link {
    font-size: 12px;
    font-weight: 600;
}.atlas-status-block {
    margin-top: 14px;
    padding: 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}.atlas-status-block span, .atlas-status-block strong {
    display: block;
}.atlas-status-block span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-status-block strong {
    margin-top: 2px;
    font-size: 15px;
}.atlas-status-active strong {
    color: var(--primary);
}.atlas-card-copy {
    margin: 12px 0 8px;
}.atlas-card-copy strong {
    color: var(--text);
}.atlas-conversion-section,
.atlas-note-card,
.atlas-editorial,
.atlas-faq {
    max-width: none;
    margin-inline: 0;
}.atlas-note-card, .reference-tip-card, .reference-legal-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
    padding: 20px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
}.atlas-note-card > div, .reference-legal-note > div {
    min-width: 0;
}.atlas-note-card strong, .reference-tip-card strong {
    display: block;
    font-size: 17px;
    line-height: 1.35;
}.atlas-note-card p, .reference-tip-card p, .reference-legal-note p {
    max-width: 820px;
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.65;
}.atlas-note-card .button, .reference-side-card .button {
    flex: 0 0 auto;
    justify-self: end;
}.atlas-editorial, .reference-editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: none;
    margin-top: 32px;
    padding-top: 0;
    border-top: 0;
}.atlas-editorial section, .reference-editorial-grid section {
    min-width: 0;
    padding: 18px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.atlas-editorial h2, .reference-editorial-grid h2 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.35;
}.atlas-editorial p:not(.eyebrow), .reference-editorial-grid p:not(.eyebrow) {
    max-width: none;
    margin: 0 0 12px;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.75;
}.reference-editorial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}.atlas-faq {
    max-width: none;
}.atlas-faq .atlas-section-heading {
    margin-bottom: 16px;
}.atlas-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}.atlas-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}.atlas-related-grid a {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    min-height: 92px;
    padding: 14px 40px 14px 14px;
    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, transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}.atlas-related-grid a:hover {
    border-color: var(--border-strong);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}.atlas-related-grid a > span, .atlas-related-grid strong, .atlas-related-grid small {
    display: block;
    min-width: 0;
}.atlas-related-grid strong {
    font-size: 13px;
    line-height: 1.4;
}.atlas-related-grid small {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.45;
}.atlas-related-grid b {
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 500;
}.atlas-related-grid a:hover b {
    color: var(--primary);
}.atlas-country-jump{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 12px;
}.atlas-country-jump a{
    font-weight: 600;
}.reference-hero-compact {
    margin-bottom: 18px;
}.reference-hero-aside {
    display: flex;
    flex-direction: column;
    justify-content: center;
}.reference-hero-aside strong {
    display: block;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.02em;
}.reference-hero-aside p {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.55;
}.reference-clock-card {
    align-self: start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 18px;
}.reference-clock-card time {
    display: block;
    margin: 4px 0 6px;
    color: var(--accent-value);
    font-size: clamp(42px, 4.5vw, 54px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}.reference-clock-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
}.reference-clock-card > strong {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 10px;
    padding: 4px 6px;
    border-radius: var(--radius-xs);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--font-xs);
}.reference-cluster-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 32px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.reference-cluster-nav > span {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.reference-cluster-nav > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}.reference-cluster-nav a {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.reference-cluster-nav a:hover {
    background: var(--surface-soft);
    color: var(--text);
}.reference-cluster-nav a[aria-current="page"] {
    background: var(--primary-soft);
    color: var(--primary);
}.reference-two-column{
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    gap: 12px;
    align-items: stretch;
}.reference-info-card, .reference-side-card, .reference-tool-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.reference-info-card h2, .reference-side-card h2, .reference-tool-card h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.35;
}.reference-info-card > p:not(.eyebrow), .reference-side-card > p:not(.eyebrow) {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.65;
}.reference-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}.reference-stat-grid > div {
    min-width: 0;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}.reference-stat-grid span, .reference-stat-grid strong {
    display: block;
}.reference-stat-grid span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.reference-stat-grid strong {
    margin-top: 2px;
    font-size: 14px;
    overflow-wrap: anywhere;
}.reference-check-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 16px;
    padding: 0;
    list-style: none;
}.reference-check-list li {
    position: relative;
    padding-left: 16px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.5;
}.reference-check-list li::before {
    content: "•";
    position: absolute;
    left: 2px;
    color: var(--primary);
    font-weight: 700;
}.reference-tool-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}.reference-tool-heading > span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.reference-converter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}.reference-converter-pane {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.reference-pane-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}.reference-pane-heading > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
}.reference-pane-heading h3 {
    margin: 0;
    font-size: 15px;
}.reference-pane-heading p {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.45;
}.reference-form-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}.reference-form-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}.reference-field, .reference-form-grid label, .reference-preset-row label, .reference-filter-bar label {
    display: block;
    min-width: 0;
    color: var(--text);
    font-size: var(--font-xs);
    font-weight: 600;
}.reference-field select, .reference-form-grid input, .reference-form-grid select, .reference-preset-row select, .reference-filter-bar select {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--font-control);
    font-weight: 500;
    outline: 0;
}.reference-field select:focus, .reference-form-grid input:focus, .reference-form-grid select:focus, .reference-preset-row select:focus, .reference-filter-bar select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}.reference-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}.reference-note {
    margin: 12px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.55;
}.reference-preset-row {
    max-width: 440px;
    margin-bottom: 12px;
}.reference-solar-results {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}.reference-solar-results > div {
    min-width: 0;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--surface-soft);
}.reference-solar-results span, .reference-solar-results strong, .reference-solar-results small {
    display: block;
}.reference-solar-results span, .reference-solar-results small {
    color: var(--text-soft);
}.reference-solar-results span {
    font-size: var(--font-xs);
}.reference-solar-results strong {
    margin: 4px 0 2px;
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}.reference-solar-results small {
    font-size: var(--font-xs);
}.reference-explain-grid {
    margin-top: 12px;
}.reference-holiday-hero {
    margin-bottom: 18px;
}.reference-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}.reference-upcoming-card {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}.reference-upcoming-card:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    color: var(--text);
}.reference-upcoming-date, .reference-upcoming-card strong, .reference-upcoming-card b {
    display: block;
}.reference-upcoming-date {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.reference-upcoming-card strong {
    margin-top: 4px;
    font-size: 13px;
}.reference-upcoming-card b {
    margin-top: 6px;
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 600;
}.reference-legal-note {
    align-items: flex-start;
}.reference-legal-note h2 {
    margin: 0;
    font-size: 18px;
}.reference-legal-note > p {
    flex: 0 0 300px;
    margin: 0;
    padding-left: 18px;
    border-left: 1px solid var(--border);
}.reference-filter-bar {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(180px, 240px) auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.reference-holiday-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    overflow: hidden;
}.reference-holiday-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}.reference-holiday-row:last-child {
    border-bottom: 0;
}.reference-holiday-row[hidden] {
    display: none;
}.reference-holiday-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}.reference-holiday-date strong {
    font-size: 23px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}.reference-holiday-date span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.reference-holiday-copy {
    min-width: 0;
}.reference-holiday-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}.reference-holiday-heading h3 {
    margin: 0;
    font-size: 14px;
}.reference-holiday-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.reference-holiday-copy > p {
    margin: 4px 0 6px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.5;
}.reference-holiday-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.reference-holiday-meta strong {
    color: var(--text);
    font-weight: 600;
}.reference-holiday-meta strong.is-upcoming {
    color: var(--primary);
}.reference-holiday-meta strong.is-today {
    color: var(--success);
}.reference-holiday-meta strong.is-past {
    color: var(--text-soft);
}.reference-holiday-action {
    text-align: right;
}.reference-holiday-action a {
    font-size: var(--font-xs);
    font-weight: 600;
    white-space: nowrap;
}.reference-empty-state {
    margin: 10px 0 0;
    padding: 16px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-soft);
    text-align: center;
    font-size: 12px;
}.unix-output-card {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--surface);
}.unix-output-heading {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft, var(--surface));
}.unix-output-heading span {
    font-weight: 700;
}.unix-output-heading small {
    color: var(--text-soft);
}.unix-output-list > div {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 48px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
}.unix-output-list > div:last-child {
    border-bottom: 0;
}.unix-output-list span {
    color: var(--text-soft);
    font-size: .82rem;
    font-weight: 600;
}.unix-output-list code {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font: inherit;
    font-size: .88rem;
}.unix-output-list .text-button {
    white-space: nowrap;
}.dst-popular-section {
    margin-top: var(--section-gap-compact);
}.dst-popular-section .reference-section-heading > a {
    flex: 0 0 auto;
    color: var(--primary);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}.dst-popular-section .reference-section-heading > a:hover {
    text-decoration: underline;
}.dst-popular-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}.dst-popular-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--motion-normal) ease, transform var(--motion-normal) ease;
}.dst-popular-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}.dst-popular-topline {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: start;
}.dst-popular-topline b {
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--surface-soft, var(--bg));
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.dst-popular-offset {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.02em;
}.dst-popular-card small {
    color: var(--text-soft);
    line-height: 1.45;
}.solar-city-search {
    position: relative;
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}.solar-city-search > label {
    font-size: .84rem;
    font-weight: 700;
}.solar-city-search-control {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}.solar-city-search-control:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}.solar-city-search-control input {
    width: 100%;
    padding: 8px 0;
    border: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
}.solar-city-search > small {
    color: var(--text-soft);
    font-size: .8rem;
}.solar-city-results {
    position: absolute;
    z-index: 8;
    top: 72px;
    left: 0;
    right: 0;
    max-height: 310px;
    overflow: auto;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-floating);
}.solar-city-results button {
    display: grid;
    width: 100%;
    gap: 2px;
    padding: 10px 10px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    text-align: left;
    cursor: pointer;
}.solar-city-results button:hover, .solar-city-results button:focus-visible {
    background: var(--surface-soft, var(--bg));
    outline: none;
}.solar-city-results strong {
    color: var(--text);
}.solar-city-results span {
    color: var(--text-soft);
    font-size: .78rem;
}.solar-tool-card-v2 {
    display: grid;
    gap: 0;
}.solar-date-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}.solar-answer-card {
    display: grid;
    gap: 4px;
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
}.solar-answer-card > span {
    color: var(--text-soft);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}.solar-answer-card > strong {
    font-size: 1.08rem;
    line-height: 1.45;
}.solar-answer-card > p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.55;
}.solar-day-change-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}.solar-day-change-grid > div {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.solar-day-change-grid span,
.solar-day-change-grid strong,
.solar-day-change-grid small {
    display: block;
}.solar-day-change-grid span,
.solar-day-change-grid small {
    color: var(--text-soft);
}.solar-day-change-grid span {
    font-size: .76rem;
}.solar-day-change-grid strong {
    margin: 4px 0 2px;
    font-size: .96rem;
    font-variant-numeric: tabular-nums;
}.solar-day-change-grid small {
    overflow-wrap: anywhere;
    font-size: var(--font-xs);
}.solar-light-section,
.solar-period-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}.solar-section-heading {
    margin-bottom: 14px;
}.solar-section-heading h3 {
    margin: 2px 0 0;
    font-size: clamp(1.08rem, 1.8vw, 1.3rem);
}.solar-twilight-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}.solar-phase-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}.solar-phase-card-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}.solar-phase-card-heading span {
    color: var(--text-soft);
    font-size: .76rem;
}.solar-phase-card-heading strong {
    font-size: .9rem;
}.solar-phase-card dl {
    margin: 0;
}.solar-phase-card dl > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}.solar-phase-card dl > div:last-child {
    border-bottom: 0;
}.solar-phase-card dt {
    color: var(--text-soft);
    font-size: .82rem;
    line-height: 1.4;
}.solar-phase-card dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}.solar-phase-card dl > div.is-highlight {
    background: color-mix(in srgb, var(--warning) 9%, var(--surface));
}.solar-phase-card dl > div.is-highlight dt,
.solar-phase-card dl > div.is-highlight dd {
    color: var(--text);
}.solar-definition-note {
    margin-top: 12px;
}.solar-range-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}.solar-range-switch .is-active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary);
}.solar-forecast-list {
    display: grid;
    gap: 6px;
}.solar-forecast-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.2fr) repeat(3, minmax(120px, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.solar-forecast-row > div {
    min-width: 0;
    padding: 10px 12px;
    border-left: 1px solid var(--border);
}.solar-forecast-row > div:first-child {
    border-left: 0;
}.solar-forecast-row span,
.solar-forecast-row strong {
    display: block;
}.solar-forecast-row span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.solar-forecast-row strong {
    margin-top: 2px;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
}.solar-forecast-date strong {
    margin-top: 0;
}.solar-forecast-row.is-selected {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}@media (max-width: 768px) {
    .atlas-section-heading > a,
    .atlas-section-heading-action > a {
        min-height: var(--touch-target);
    }
}@media (max-width: 760px) {
    .solar-day-change-grid {
        grid-template-columns: 1fr;
    }

    .solar-twilight-grid {
        grid-template-columns: 1fr;
    }

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

    .solar-forecast-row > div,
    .solar-forecast-row > div:first-child {
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .solar-forecast-row > div:nth-child(-n/**/+2) {
        border-top: 0;
    }

    .solar-forecast-row > div:nth-child(even) {
        border-left: 1px solid var(--border);
    }
}@media (max-width: 480px) {
    .solar-date-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .solar-date-actions .button {
        width: 100%;
    }

    .solar-phase-card-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .solar-phase-card dl > div {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        padding-inline: 12px;
    }

    .solar-phase-card dt {
        font-size: .78rem;
    }

    .solar-phase-card dd {
        font-size: .82rem;
    }

    .solar-forecast-row > div {
        padding: 8px 10px;
    }
}.time-format-smart-card,
.time-format-landmarks {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.time-format-smart-card {
    margin-bottom: 18px;
}.time-format-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}.time-format-section-heading > div {
    min-width: 0;
}.time-format-section-heading h2 {
    margin: 2px 0 0;
    font-size: clamp(1.15rem, 2vw, 1.42rem);
    line-height: 1.28;
}.time-format-section-heading > p {
    max-width: 520px;
    margin: 2px 0 0;
    color: var(--text-soft);
    line-height: 1.65;
}.time-format-section-heading-inline {
    align-items: flex-end;
}.time-format-kicker {
    display: block;
    color: var(--text-soft);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
}.time-format-natural-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}.time-format-natural-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-size: .9rem;
    font-weight: 700;
}.time-format-natural-field input {
    width: 100%;
    min-height: 50px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}.time-format-natural-field input:focus {
    outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
    outline-offset: 1px;
    border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
}.time-format-quick-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}.time-format-quick-list > span {
    margin-right: 2px;
    color: var(--text-soft);
    font-size: .8rem;
    font-weight: 600;
}.time-format-quick-list button {
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}.time-format-quick-list button:hover,
.time-format-quick-list button:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
}.time-format-smart-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-top: 18px;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}.time-format-smart-value {
    min-width: 0;
}.time-format-smart-value span,
.time-format-smart-value small {
    display: block;
    color: var(--text-soft);
}.time-format-smart-value span {
    margin-bottom: 4px;
    font-size: .78rem;
    font-weight: 700;
}.time-format-smart-value strong {
    display: block;
    font-size: clamp(1.8rem, 4vw, 2.65rem);
    line-height: 1.08;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
}.time-format-smart-value small {
    margin-top: 4px;
    font-size: var(--font-xs);
}.time-format-smart-equals {
    color: var(--text-soft);
    font-size: 1.5rem;
    font-weight: 800;
}.time-format-answer {
    margin: 14px 0 0;
    line-height: 1.65;
}.time-format-result-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 12px;
}.time-format-status {
    color: var(--text-soft);
    font-size: .8rem;
}.time-format-workspace {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}.time-format-pane {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.time-format-pane-heading {
    margin-bottom: 18px;
}.time-format-pane-heading h2 {
    margin: 2px 0 6px;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
}.time-format-pane-heading p {
    margin: 0;
    color: var(--text-soft);
}.time-format-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(88px, .45fr) minmax(88px, .4fr);
    gap: 10px;
    align-items: end;
}.time-format-form-single {
    grid-template-columns: 1fr;
}.time-format-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-weight: 600;
    font-size: .9rem;
}.time-format-form input,
.time-format-form select {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    font: inherit;
}.time-format-result {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}.time-format-result span {
    display: block;
    margin-bottom: 4px;
    color: var(--text-soft);
    font-size: .84rem;
}.time-format-result strong {
    display: block;
    font-size: clamp(1.55rem, 4vw, 2.2rem);
    letter-spacing: -.03em;
}.time-format-result small {
    display: block;
    margin-top: 6px;
    color: var(--text-soft);
    font-size: .78rem;
    line-height: 1.45;
}.time-format-copy-link {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}.time-format-copy-link:hover,
.time-format-copy-link:focus-visible {
    text-decoration: underline;
}.time-format-landmarks {
    margin-bottom: 18px;
}.time-format-landmark-grid,
.time-format-rule-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}.time-format-landmark {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}.time-format-landmark span,
.time-format-landmark small {
    display: block;
    color: var(--text-soft);
}.time-format-landmark span {
    font-size: .8rem;
    font-weight: 700;
}.time-format-landmark strong {
    display: block;
    margin-top: 4px;
    font-size: 1.4rem;
    letter-spacing: -.025em;
}.time-format-landmark small {
    margin-top: 4px;
    line-height: 1.4;
}.time-format-reference-card,
.time-format-rules-card {
    margin-bottom: 18px;
}.time-format-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}.time-format-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}.time-format-table th,
.time-format-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}.time-format-table tbody tr:last-child td {
    border-bottom: 0;
}.time-format-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--surface-soft) 58%, transparent);
}.time-format-table th {
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: .82rem;
}.time-format-table td:first-child,
.time-format-table td:nth-child(2) {
    white-space: nowrap;
}.time-format-rule-grid > div {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
}.time-format-rule-grid strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
}.time-format-rule-grid p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.58;
}@media (max-width: 980px) {

    .atlas-hero, .reference-hero {
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 20px;
}

    .atlas-place-hero {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 20px;
}

    .atlas-country-hero-v2,
    .atlas-city-hero-v2 {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
}

    .atlas-country-hero-v2 .atlas-hero-copy,
    .atlas-city-hero-v2 .atlas-hero-copy {
    padding: 24px 24px;
}

    .atlas-live-clock-feature {
    padding: 20px 18px 20px;
}

    .atlas-mini-analog {
    --atlas-analog-size: 170px;
}

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

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

    .reference-form-grid-4, .reference-solar-results, .reference-upcoming-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

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

    .atlas-page, .reference-page {
    padding-top: 20px;
}

    .atlas-breadcrumb {
    margin-bottom: var(--breadcrumb-space);
    font-size: var(--breadcrumb-size);
}

    .atlas-hero, .reference-hero, .atlas-place-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

    .reference-utc-page .reference-hero,
    .reference-gmt-page .reference-hero {
    grid-template-columns: minmax(0, 1fr);
}

    .atlas-hero-copy, .reference-hero-copy {
    padding: 8px 0;
}

    .atlas-hero-copy h1, .reference-hero-copy h1 {
    font-size: clamp(29px, 8.5vw, 36px);
    line-height: 1.12;
}

    .atlas-search-card, .reference-hero-aside {
    padding: 18px;
}

    .atlas-live-clock, .reference-clock-card {
    width: 100%;
    padding: 16px;
}

    .atlas-live-clock time, .reference-clock-card time {
    font-size: clamp(40px, 11.5vw, 50px);
}

    .atlas-country-hero-v2,
    .atlas-city-hero-v2 {
    gap: 14px;
}

    .atlas-country-hero-v2 .atlas-hero-copy,
    .atlas-city-hero-v2 .atlas-hero-copy {
    padding: 20px 18px;
}

    .atlas-live-clock-feature {
    padding: 18px 16px 16px;
    gap: 8px;
}

    .atlas-live-clock-feature time {
    font-size: clamp(44px, 14vw, 56px);
}

    .atlas-mini-analog {
    --atlas-analog-size: 150px;
}

    .atlas-clock-grid, .atlas-country-clock-grid.atlas-count-1, .atlas-country-clock-grid.atlas-count-2, .atlas-country-clock-grid.atlas-count-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    .atlas-region-grid,  .atlas-dual-grid,  .reference-two-column,  .reference-converter-grid,  .atlas-editorial,  .reference-editorial-grid {
    grid-template-columns: 1fr;
}

    .atlas-region-links {
    grid-template-columns: 1fr;
}

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

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

    .atlas-fact-strip > div + div {
    border-left: 1px solid var(--border);
}

    .atlas-fact-strip > div:nth-child(even) {
    border-left: 1px solid var(--border);
}

    .atlas-fact-strip > div:nth-child(n + 3) {
    border-top: 1px solid var(--border);
}

    .atlas-clock-compare {
    grid-template-columns: 1fr 1fr;
}

    .atlas-difference-answer {
    grid-column: 1 / -1;
    grid-row: 2;
    border: 0;
    border-top: 1px solid var(--border);
    text-align: left;
}

    .atlas-compare-clock + .atlas-compare-clock {
    border-left: 1px solid var(--border);
}

    .atlas-compact-table.is-compact-ready .atlas-table-toggle {
    display: block;
}

    .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr {
    display: none;
}

    .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(1), .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(7), .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(10), .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(13), .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(16), .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(19), .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(22), .atlas-compact-table.is-compact-ready:not(.is-expanded) .atlas-time-table tbody tr:nth-child(24) {
    display: table-row;
}

    .atlas-note-card, .reference-tip-card, .reference-legal-note {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 14px;
}

    .atlas-note-card .button, .reference-side-card .button {
    justify-self: start;
}

    .reference-legal-note > p {
    flex: auto;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border);
}

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

    .reference-cluster-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}

     .reference-form-grid,  .reference-stat-grid {
    grid-template-columns: minmax(0, 1fr);
}

    .reference-form-grid-4, .reference-solar-results, .reference-upcoming-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

    .reference-filter-bar .button {
    grid-column: 1 / -1;
}

    .reference-holiday-row {
    grid-template-columns: 64px minmax(0, 1fr);
}

    .reference-holiday-action {
    grid-column: 2;
    text-align: left;
}

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

    .atlas-search-form {
    grid-template-columns: 1fr;
}

    .atlas-search-form .button {
    width: 100%;
}

    .atlas-clock-grid,  .atlas-country-clock-grid.atlas-count-1,  .atlas-country-clock-grid.atlas-count-2,  .atlas-country-clock-grid.atlas-count-3,  .atlas-related-grid,  .reference-form-grid-4,  .reference-solar-results,  .reference-upcoming-grid,  .reference-filter-bar {
    grid-template-columns: 1fr;
}

    .atlas-section-heading, .reference-section-heading, .reference-tool-heading {
    align-items: flex-start;
    flex-direction: column;
}

    .atlas-section-heading > a, .reference-tool-heading .button {
    align-self: flex-start;
}

    .atlas-section-heading-action > a {
    min-height: 36px;
    padding-inline: 13px;
}

     .atlas-popular-time-grid {
    grid-template-columns: 1fr;
}

    .atlas-fact-strip {
    grid-template-columns: 1fr;
}

    .atlas-fact-strip > div:nth-child(even) {
    border-left: 1px solid var(--border);
}

    .atlas-fact-strip > div + div, .atlas-fact-strip > div:nth-child(n + 3) {
    border-top: 1px solid var(--border);
}

    .atlas-clock-compare {
    grid-template-columns: 1fr;
}

    .atlas-difference-answer {
    grid-column: auto;
    grid-row: auto;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

    .atlas-compare-clock + .atlas-compare-clock {
    border-left: 0;
}

    .atlas-metric-grid {
    grid-template-columns: 1fr;
}

    .atlas-card-actions,  .reference-actions {
    flex-direction: column;
}

    .atlas-card-actions .button,  .reference-actions .button,  .reference-side-card .button {
    width: 100%;
}

    .reference-holiday-row {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    padding: 10px;
}

    .reference-holiday-date {
    min-height: 56px;
}

    .reference-holiday-date strong {
    font-size: 20px;
}

    .reference-holiday-heading {
    align-items: flex-start;
    flex-direction: column;
}

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

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

    .unix-output-list > div {
    grid-template-columns: 1fr auto;
}

    .unix-output-list > div > span {
    grid-column: 1 / -1;
}

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

    .dst-popular-grid {
    grid-template-columns: 1fr;
}

    .unix-output-heading {
    display: grid;
}

}.reference-data-stamp {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.55;
}.reference-data-stamp strong {
    color: var(--text);
    font-weight: 600;
}.reference-data-stamp a {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}@media (max-width: 720px) {
.reference-data-stamp {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
}
.reference-data-stamp a {
    margin-left: 0;
}
}@media (max-width: 720px) {

    .time-format-section-heading {
    display: block;
}

    .time-format-section-heading > p {
    max-width: none;
    margin-top: 8px;
}

    .time-format-workspace {
    grid-template-columns: 1fr;
}

    .time-format-form {
    grid-template-columns: 1fr 1fr;
}

    .time-format-form label:first-child {
    grid-column: 1 / -1;
}

    .time-format-landmark-grid,
    .time-format-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

    .time-format-smart-card,
    .time-format-landmarks,
    .time-format-pane {
    padding: 16px;
}

    .time-format-natural-form {
    grid-template-columns: 1fr;
}

    .time-format-natural-form .button {
    width: 100%;
}

    .time-format-smart-result {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
}

    .time-format-smart-equals {
    display: none;
}

    .time-format-smart-value + .time-format-smart-value {
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

    .time-format-form {
    grid-template-columns: 1fr;
}

    .time-format-form label:first-child {
    grid-column: auto;
}

    .time-format-landmark-grid,
    .time-format-rule-grid {
    grid-template-columns: 1fr;
}

    .time-format-result-actions .button {
    width: 100%;
}

    .atlas-live-clock, .reference-clock-card {
    padding: 14px 14px;
}

    .atlas-live-clock time, .reference-clock-card time {
    font-size: clamp(38px, 11vw, 46px);
}

}.atlas-vietnam-hero .atlas-live-clock {
    min-height: 0;
}.vietnam-live-clock .atlas-tech-label {
    margin-top: 12px;
}.vietnam-clock-actions {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 6px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}.vietnam-hour-format {
    display: flex;
    gap: 4px;
}.vietnam-clock-actions .segmented, .vietnam-clock-actions .button {
    min-height: 38px;
    padding: 8px 10px;
    font-size: var(--font-xs);
}.vietnam-copy-status {
    min-height: 18px;
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.vietnam-city-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}.vietnam-city-item {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.vietnam-city-item strong, .vietnam-city-item span {
    display: block;
}.vietnam-city-item strong {
    font-size: 13.5px;
}.vietnam-city-item span {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.vietnam-world-card {
    min-height: 158px;
}.vietnam-world-difference {
    display: block;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.4;
}.vietnam-definition-list {
    display: grid;
    margin-top: 2px;
}.vietnam-definition-list > div {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}.vietnam-definition-list > div:last-child {
    border-bottom: 0;
}.vietnam-definition-list strong {
    display: block;
    font-size: 12.5px;
}.vietnam-definition-list p {
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.55;
}.vietnam-formula {
    margin: 16px 0 10px;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--surface-soft);
}.vietnam-formula span, .vietnam-formula strong {
    display: block;
}.vietnam-formula span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.vietnam-formula strong {
    margin-top: 4px;
    font-size: clamp(19px, 3vw, 25px);
    line-height: 1.25;
}.vietnam-precision-wrap {
    display: grid;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}.vietnam-precision-wrap > span {
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 700;
}.vietnam-precision-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
}.vietnam-precision-control .segmented {
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    font-size: var(--font-xs);
}.vietnam-precision-wrap small {
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.45;
}.vietnam-live-clock[data-time-precision="milliseconds"] time {
    font-size: clamp(28px, 3vw, 34px);
    letter-spacing: -.035em;
}.vietnam-precision-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}.vietnam-precision-grid article {
    padding: 14px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}.vietnam-precision-grid strong, .vietnam-precision-grid span {
    display: block;
}.vietnam-precision-grid strong {
    font-size: 13px;
}.vietnam-precision-grid span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.5;
}.vietnam-city-clock time {
    display: block;
    margin: 8px 0 6px;
    color: var(--accent-value);
    font-size: clamp(24px, 3.2vw, 32px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}.vietnam-city-note {
    margin: 10px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.6;
}.world-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-1) 0 var(--space-2);
}.world-reference-card {
    min-width: 0;
    padding: var(--space-5);
    border: var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.world-reference-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}.world-reference-head strong {
    color: var(--accent-ink);
    font-size: var(--font-base);
}.world-reference-head span, .world-reference-card small {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.world-reference-card time {
    display: block;
    margin: var(--space-2) 0 var(--space-1);
    color: var(--accent-value);
    font-size: clamp(30px, 4vw, 40px);
    font-weight: var(--focal-number-weight);
    line-height: 1;
    letter-spacing: var(--focal-number-tracking);
    font-variant-numeric: tabular-nums;
}.world-reference-card p {
    margin: var(--space-2) 0 0;
    color: var(--text-soft);
    font-size: var(--font-sm);
    line-height: 1.55;
}.world-use-list {
    display: grid;
}.world-use-list > div {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}.world-use-list > div:last-child {
    border-bottom: 0;
}.world-use-list strong {
    display: block;
    font-size: 12.5px;
}.world-use-list p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.55;
}.world-use-list a {
    display: inline-block;
    margin-top: 4px;
    font-size: var(--font-xs);
    font-weight: 600;
}@media (max-width: 720px) {

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

    .vietnam-city-live-grid, .vietnam-precision-grid {
    grid-template-columns: 1fr;
}

    .vietnam-clock-actions {
    grid-template-columns: 1fr 1fr;
}

    .vietnam-hour-format {
    grid-column: 1 / -1;
}

    .vietnam-hour-format .segmented {
    flex: 1 1 0;
}

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

    .vietnam-city-grid, .world-reference-grid {
    grid-template-columns: 1fr;
}

    .vietnam-precision-control {
    grid-template-columns: 1fr 1fr;
}

    .vietnam-precision-control [data-vietnam-precision="milliseconds"] {
    grid-column: 1 / -1;
}

    .vietnam-live-clock[data-time-precision="milliseconds"] time {
    font-size: clamp(27px, 8.4vw, 31px);
}

    .vietnam-clock-actions {
    grid-template-columns: 1fr;
}

    .vietnam-hour-format {
    grid-column: auto;
}

    .vietnam-clock-actions .button {
    width: 100%;
}

}.vietnam-sync-status {
    justify-content: flex-start;
    margin: 8px 0 0;
    font-size: var(--font-xs);
}.world-hub-nav {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 2px 0 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.world-hub-nav a {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}.world-hub-nav a:last-child {
    border-right: 0;
}.world-hub-nav a:hover,
.world-hub-nav a:focus-visible {
    background: var(--surface-soft);
    color: var(--primary);
}.world-hub-nav a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}.world-hub-nav strong,
.world-hub-nav small {
    display: block;
    min-width: 0;
}.world-hub-nav strong {
    font-size: 12.5px;
    line-height: 1.35;
}.world-hub-nav small {
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.35;
}.world-region-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}.world-region-hub-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.world-region-hub-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}.world-region-hub-head h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
}.world-region-hub-head span {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.world-region-hub-links {
    display: grid;
    margin-top: 4px;
}.world-region-hub-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 39px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
}.world-region-hub-links a:hover span {
    color: var(--primary);
}.world-region-hub-links span {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
}.world-region-hub-links small {
    flex: 0 0 auto;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.world-region-hub-action {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 38px;
    margin-top: auto;
    padding-top: 10px;
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
}.world-offset-jump-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}.world-offset-jump-grid button {
    display: grid;
    gap: 4px;
    min-width: 0;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
}.world-offset-jump-grid button:hover,
.world-offset-jump-grid button:focus-visible {
    border-color: var(--primary);
    background: var(--surface-soft);
}.world-offset-jump-grid button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}.world-offset-jump-grid strong {
    color: var(--primary);
    font-size: 14px;
    line-height: 1.2;
}.world-offset-jump-grid small {
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.35;
}@media (max-width: 980px) {
    .world-hub-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: hidden;
    }

    .world-hub-nav a:nth-child(3n) {
        border-right: 0;
    }

    .world-hub-nav a:nth-child(-n + 3) {
        border-bottom: 1px solid var(--border);
    }

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

    .world-offset-jump-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}@media (max-width: 720px) {
    .world-hub-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .world-hub-nav a {
        min-height: 58px;
        padding: 10px 12px;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    .world-hub-nav a:nth-child(2n) {
        border-right: 0;
    }

    .world-hub-nav a:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .world-offset-jump-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}@media (max-width: 560px) {
    .world-region-hub-grid {
        grid-template-columns: 1fr;
    }

    .world-region-hub-card {
        padding: 14px;
    }
}.atlas-directory-total {
    flex: 0 0 auto;
    padding: 6px 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: 700;
}.atlas-region-grid-directory {
    grid-template-columns: 1fr;
}.atlas-region-grid-directory .atlas-region-card {
    padding: 14px 16px 8px;
}.atlas-region-grid-directory .atlas-region-links-wide {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}[data-directory-item][hidden], [data-directory-region][hidden] {
    display: none !important;
}@media (max-width: 980px) {

    .atlas-region-grid-directory .atlas-region-links-wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

    .atlas-region-grid-directory .atlas-region-links-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

    .atlas-region-grid-directory .atlas-region-links-wide {
    grid-template-columns: 1fr;
}

}.world-directory-browser {
    scroll-margin-top: 18px;
}.world-directory-controls {
    display: grid;
    gap: 12px;
    margin: 18px 0 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.world-directory-filter-block {
    display: grid;
    gap: 6px;
    min-width: 0;
}.world-directory-filter-label {
    color: var(--text);
    font-size: var(--font-xs);
    font-weight: 700;
}.world-offset-filter {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}.world-offset-filter button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-soft, var(--surface));
    color: var(--text-soft);
    font: inherit;
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}.world-offset-filter button:hover,
.world-offset-filter button.is-active {
    border-color: var(--primary);
    color: var(--primary);
}.world-offset-filter button.is-active {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}.world-directory-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
}.world-directory-status-row .text-button {
    flex: 0 0 auto;
    min-height: 32px;
    padding-inline: 4px;
    font-size: var(--font-xs);
}.world-directory-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 14px;
    align-items: center;
}.world-directory-search label {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}.world-directory-search input {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 16px;
}.world-directory-search input:focus {
    border-color: var(--primary);
    outline: 3px solid color-mix(in srgb, var(--primary) 14%, transparent);
    outline-offset: 1px;
}.world-region-filter {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}.world-region-filter button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-soft, var(--surface));
    color: var(--text-soft);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
}.world-region-filter button span {
    min-width: 22px;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-size: var(--font-xs);
    text-align: center;
}.world-region-filter button:hover, .world-region-filter button.is-active {
    border-color: var(--primary);
    color: var(--primary);
}.world-region-filter button.is-active {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}.world-directory-status {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
}.world-alpha-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 20px;
}.world-alpha-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    min-height: 35px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}.world-alpha-nav a:hover, .world-alpha-nav a:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}.world-alpha-group {
    margin-top: 24px;
    scroll-margin-top: 18px;
}.world-alpha-group[hidden], .world-country-card[hidden] {
    display: none !important;
}.world-alpha-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}.world-alpha-heading h3 {
    margin: 0;
    color: var(--text);
    font-size: 20px;
    line-height: 1;
}.world-alpha-heading span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.world-country-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}.world-country-card {
    min-width: 0;
    overflow: clip;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}.world-country-card[open] {
    grid-column: 1 / -1;
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
    box-shadow: var(--shadow-hover);
}.world-country-card summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 18px;
    gap: 10px;
    align-items: center;
    min-height: 66px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    touch-action: manipulation;
}.world-country-card summary::-webkit-details-marker {
    display: none;
}.world-country-card summary:hover {
    background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}.world-country-card summary:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary) 18%, transparent);
    outline-offset: -3px;
}.world-country-title {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 0;
}.world-country-title > span:last-child {
    min-width: 0;
}.world-country-title strong, .world-country-title small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}.world-country-title strong {
    color: var(--text);
    font-size: 13px;
    line-height: 1.3;
}.world-country-title small {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.35;
}.world-country-flag {
    width: 30px;
    height: 22px;
    flex-basis: 30px;
}.world-country-now {
    text-align: right;
    white-space: nowrap;
}.world-country-now time {
    display: block;
    color: var(--accent-value);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
}.world-country-now small {
    display: block;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.world-country-chevron {
    display: inline-block;
    justify-self: center;
    width: 8px;
    height: 8px;
    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;
}.world-country-card:hover .world-country-chevron,
.world-country-card summary:focus-visible .world-country-chevron {
    color: var(--primary);
}.world-country-card[open] .world-country-chevron {
    color: var(--primary);
    transform: rotate(225deg);
}.world-country-body {
    padding: 0 12px 12px;
    border-top: 1px solid var(--border);
}.world-country-body-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding: 12px 0;
}.world-country-body-head strong {
    color: var(--text);
    font-size: 12.5px;
}.world-country-body-head p {
    max-width: 600px;
    margin: 2px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.55;
}.world-country-detail-link {
    flex: 0 0 auto;
    font-size: var(--font-xs);
    font-weight: 700;
    white-space: nowrap;
}.world-directory-empty, .world-directory-seo-note {
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.world-directory-empty strong, .world-directory-seo-note strong {
    color: var(--text);
    font-size: 12.5px;
}.world-directory-empty p, .world-directory-seo-note p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.6;
}@media (max-width: 980px) {

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

    .world-country-card[open] {
    grid-column: 1 / -1;
}

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

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

    .world-region-filter button, .world-offset-filter button {
    min-height: 44px;
}

    .world-alpha-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
}

    .world-alpha-nav a {
    flex: 0 0 40px;
    min-height: 40px;
}

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

    .world-country-card[open] {
    grid-column: auto;
}

    .world-country-body-head {
    display: grid;
}

    .world-country-detail-link {
    justify-self: start;
    white-space: normal;
}

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

    .world-directory-controls {
    margin-inline: -2px;
    padding: 12px;
}

    .world-directory-status-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
}

    .world-country-card summary {
    grid-template-columns: minmax(0, 1fr) auto 14px;
    gap: 6px;
    min-height: 68px;
    padding: 10px;
}

    .world-country-flag {
    flex-basis: 28px;
    width: 28px;
    height: 20px;
}

    .world-country-title {
    gap: 6px;
}

    .world-country-title strong {
    font-size: 12.5px;
}

    .world-country-now time {
    font-size: 12px;
}

    .world-country-now small {
    font-size: var(--font-xs);
}

}.world-utility-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr);
    margin-top: var(--section-gap);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.world-utility-compare, .world-utility-tools {
    min-width: 0;
    padding: 20px 20px;
}.world-utility-tools {
    border-left: 1px solid var(--border);
    background: var(--surface-soft);
}.world-utility-heading {
    align-items: center;
    padding-bottom: 12px;
}.world-dst-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    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;
    white-space: nowrap;
}.world-utility-tools-heading h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}.world-utility-tools-heading > p:last-child {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.5;
}.world-utility-tools .world-use-list {
    gap: 8px;
    margin-top: 14px;
}.world-utility-tools .world-use-list .world-use-option {
    display: grid;
    margin-top: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}.world-utility-tools .world-use-list .world-use-option:hover {
    border-color: var(--border-strong);
    background: var(--surface-blue);
    color: var(--text);
}.world-use-copy {
    min-width: 0;
}.world-use-copy strong, .world-use-copy small {
    display: block;
}.world-use-copy strong {
    font-size: 12.5px;
    line-height: 1.35;
}.world-use-copy small {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.45;
}.world-use-cta {
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    white-space: nowrap;
}@media (max-width: 920px) {

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

    .world-utility-tools {
    border-top: 1px solid var(--border);
    border-left: 0;
}

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

    .world-utility-compare, .world-utility-tools {
    padding: 16px;
}

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

    .world-utility-heading {
    align-items: flex-start;
}

    .world-dst-badge {
    margin-top: 2px;
}

}.world-utility-panel.world-utility-panel-strip {
    display: block;
    overflow: hidden;
}.world-utility-panel-strip .world-utility-compare {
    padding: 20px 20px 16px;
}.world-strip-note {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.45;
}.world-compare-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(154px, 1fr);
    grid-template-columns: none;
    gap: 8px;
    margin-top: 2px;
    padding: 2px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}.world-compare-chip {
    display: flex;
    min-width: 0;
    min-height: 86px;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    scroll-snap-align: start;
}.world-compare-place {
    min-width: 0;
}.world-compare-place strong, .world-compare-place small {
    display: block;
}.world-compare-place strong {
    font-size: 12px;
    line-height: 1.35;
}.world-compare-place strong a {
    color: var(--primary);
    text-decoration: none;
}.world-compare-place small {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.35;
}.world-compare-place small a {
    color: inherit;
    text-decoration: none;
}.world-compare-chip > b {
    color: var(--text);
    font-size: var(--font-xs);
    line-height: 1.35;
}.world-utility-tools.world-utility-tools-inline {
    display: grid;
    grid-template-columns: minmax(190px, .72fr) minmax(0, 2.28fr);
    align-items: center;
    gap: 18px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--border);
    border-left: 0;
    background: var(--surface-soft);
}.world-utility-tools-inline .world-utility-tools-heading h2 {
    font-size: 15px;
}.world-use-list.world-use-list-inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 0;
}.world-utility-tools-inline .world-use-list .world-use-option {
    min-height: 60px;
    padding: 8px 10px;
}@media (min-width: 1180px) {

    .world-compare-strip {
    grid-auto-columns: minmax(150px, 1fr);
}

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

    .world-utility-panel-strip .world-utility-compare {
    padding: 16px 16px 14px;
}

    .world-compare-strip {
    grid-auto-columns: 158px;
    margin-right: -16px;
    padding-right: 16px;
}

    .world-utility-tools.world-utility-tools-inline {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px 16px 16px;
}

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

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

    .world-strip-note {
    max-width: 230px;
}

    .world-compare-strip {
    grid-auto-columns: 150px;
}

}.country-difference-hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    align-items: stretch;
}.country-difference-hero .atlas-hero-copy h1 {
    max-width: var(--measure-copy);
    font-size: var(--page-title-size);
}.country-difference-summary {
    display: grid;
    grid-template-columns: 1fr;
    align-self: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    overflow: hidden;
}.country-difference-summary > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 14px;
    min-width: 0;
    padding: 14px 16px;
    border-top: 1px solid var(--border);
}.country-difference-summary > div:first-child {
    border-top: 0;
}.country-difference-summary span, .country-difference-summary small {
    grid-column: 1;
    color: var(--text-soft);
}.country-difference-summary span {
    font-size: var(--font-xs);
    font-weight: 700;
}.country-difference-summary strong {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: clamp(28px, 3vw, 34px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}.country-difference-summary small {
    font-size: var(--font-xs);
    line-height: 1.4;
}.country-difference-caveat {
    margin: 0 0 18px;
}.country-difference-browser {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.country-difference-browser-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 24px;
    align-items: end;
    padding: 20px 24px 18px;
}.country-difference-browser-head h2 {
    margin: 2px 0 6px;
}.country-difference-browser-head p {
    margin: 0;
    color: var(--text-soft);
}.country-difference-search-wrap, .country-difference-sort-wrap {
    display: grid;
    gap: 6px;
}.country-difference-search-wrap label, .country-difference-sort-wrap label {
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 700;
}.country-difference-search-wrap input, .country-difference-sort-wrap select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background-color: var(--surface);
    color: var(--text);
}.country-difference-search-wrap input {
    padding: 8px 12px;
}.country-difference-sort-wrap select {
    padding: 8px 32px 8px 10px;
}.country-difference-controls {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 24px;
    border-top: 1px solid var(--border);
    background: var(--surface-soft);
}.country-difference-region-filters {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
}.country-difference-region-filters button, .country-difference-alpha button {
    min-height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 700;
    cursor: pointer;
}.country-difference-region-filters button {
    padding: 6px 10px;
}.country-difference-region-filters button span, .country-difference-alpha button span {
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.country-difference-region-filters button.is-active, .country-difference-alpha button.is-active {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    color: var(--primary);
}.country-difference-sort-wrap {
    flex: 0 0 245px;
}.country-difference-alpha {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 12px 24px;
    border-top: 1px solid var(--border);
    scrollbar-width: thin;
}.country-difference-alpha button {
    flex: 0 0 auto;
    min-width: 38px;
    padding: 6px 8px;
}.country-difference-alpha button:first-child {
    min-width: auto;
}.country-difference-alpha button span {
    margin-left: 4px;
}.country-difference-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 24px;
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    font-size: var(--font-xs);
}.country-difference-result-bar strong {
    color: var(--text);
}.country-difference-table-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--border);
}.country-difference-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}.country-difference-table th, .country-difference-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}.country-difference-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 700;
    white-space: nowrap;
}.country-difference-table tbody tr:last-child td {
    border-bottom: 0;
}.country-difference-table tbody tr:hover td {
    background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}.country-difference-table td strong {
    display: block;
    font-size: 12.5px;
}.country-difference-table td small {
    display: block;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.country-difference-country {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    min-width: 0;
}.country-difference-country-flag {
    width: 28px;
    height: 21px;
    flex-basis: 28px;
}.country-difference-country-copy {
    display: block;
    min-width: 0;
}.country-difference-country strong a {
    color: var(--primary);
}.country-difference-table time, .country-difference-offset, .country-difference-value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}.country-difference-table time {
    color: var(--accent-value);
    font-size: 14px;
    font-weight: 700;
}.country-difference-offset {
    display: inline-flex;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    font-size: var(--font-xs);
    font-weight: 700;
}.country-difference-value {
    font-size: var(--font-xs) !important;
}.country-difference-detail-cell {
    width: 1%;
    white-space: nowrap;
}.country-difference-detail {
    font-size: var(--font-xs);
    font-weight: 700;
}.country-difference-empty {
    padding: 28px 24px;
    text-align: center;
}.country-difference-empty p {
    margin: 6px 0 0;
    color: var(--text-soft);
}.world-strip-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}.world-strip-all-link {
    font-size: var(--font-xs);
    font-weight: 700;
    white-space: nowrap;
}@media (max-width: 920px) {

    .country-difference-hero {
    grid-template-columns: 1fr;
}

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

    .country-difference-summary > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    border-top: 0;
    border-left: 1px solid var(--border);
}

    .country-difference-summary > div:first-child {
    border-left: 0;
}

    .country-difference-summary strong {
    grid-column: auto;
    grid-row: auto;
}

    .country-difference-browser-head {
    grid-template-columns: 1fr;
    gap: 14px;
}

    .country-difference-controls {
    align-items: stretch;
    flex-direction: column;
}

    .country-difference-sort-wrap {
    width: 100%;
    flex-basis: auto;
}

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

    .country-difference-summary {
    grid-template-columns: 1fr;
}

    .country-difference-summary > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: 12px 14px;
}

    .country-difference-summary > div:first-child {
    border-top: 0;
}

    .country-difference-summary span,
    .country-difference-summary small {
    grid-column: 1;
}

    .country-difference-summary strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-size: 26px;
}

    .country-difference-browser-head, .country-difference-controls, .country-difference-alpha, .country-difference-result-bar {
    padding-left: 14px;
    padding-right: 14px;
}

    .country-difference-result-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
}

    .country-difference-region-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -14px;
    padding: 0 14px 2px;
}

    .country-difference-region-filters button {
    flex: 0 0 auto;
    min-height: 44px;
}

    .country-difference-alpha button {
    min-height: 44px;
}

    .country-difference-table-wrap {
    overflow: visible;
}

    .country-difference-table {
    min-width: 0;
}

    .country-difference-table thead {
    display: none;
}

    .country-difference-table, .country-difference-table tbody, .country-difference-table tr, .country-difference-table td {
    display: block;
    width: 100%;
}

    .country-difference-table tbody {
    display: grid;
}

    .country-difference-table tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

    .country-difference-table tbody tr:last-child {
    border-bottom: 0;
}

    .country-difference-table td {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 4px 0;
    border: 0;
}

    .country-difference-table td::before {
    content: attr(data-label);
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}

    .country-difference-table td:first-child {
    display: block;
    padding: 0 0 8px;
}

    .country-difference-table td:first-child::before {
    display: none;
}

    .country-difference-country {
    align-items: center;
    gap: var(--space-2-5);
}

    .country-difference-country strong {
    font-size: 15px;
}

    .country-difference-detail-cell {
    display: block !important;
    padding-top: 8px !important;
}

    .country-difference-detail-cell::before {
    display: none;
}

    .country-difference-detail {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
}

    .world-strip-actions {
    justify-content: flex-start;
}

}[data-country-diff-row][hidden] {
    display: none !important;
}.atlas-country-fact-strip {
    margin-top: 6px;
}.atlas-country-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 12px;
    margin-top: 14px;
}.atlas-country-summary-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.atlas-country-summary-card h2 {
    margin: 4px 0 10px;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -.02em;
}.atlas-country-summary-card > p:not(.eyebrow) {
    margin: 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.72;
}.atlas-country-summary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}.atlas-country-summary-stats > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}.atlas-country-summary-stats span, .atlas-country-summary-stats strong {
    display: block;
}.atlas-country-summary-stats span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-country-summary-stats strong {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}.atlas-country-summary-actions .atlas-country-intent-links {
    margin-top: 8px;
}.atlas-country-core-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
    gap: 12px;
    align-items: start;
    margin-top: 28px;
}.atlas-country-main, .atlas-country-sidebar {
    min-width: 0;
}.atlas-country-sidebar {
    display: grid;
    gap: 12px;
}.atlas-country-main .atlas-popular-conversion, .atlas-country-main .atlas-conversion-section {
    margin-top: 0;
}.atlas-country-main .atlas-conversion-section {
    max-width: none;
}.atlas-country-main .atlas-popular-conversion + .atlas-conversion-section {
    margin-top: 12px;
}.atlas-country-conversion-card .atlas-table-wrap {
    box-shadow: var(--shadow-card);
}.atlas-country-essential-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding-top: 14px;
}.atlas-country-essential-list > div {
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface-soft);
}.atlas-country-essential-list span, .atlas-country-essential-list strong {
    display: block;
}.atlas-country-essential-list span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-country-essential-list strong {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}.atlas-country-city-section {
    margin-top: var(--section-gap);
}.atlas-country-editorial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 12px;
    margin-top: var(--section-gap);
    padding-top: 0;
    border-top: 0;
}.atlas-country-editorial-grid section {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.atlas-country-editorial-grid h2 {
    font-size: 19px;
}@media (max-width: 1100px) {

    .atlas-country-summary-grid, .atlas-country-core-grid {
    grid-template-columns: 1fr;
}

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

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

    .atlas-country-sidebar .atlas-data-card:last-child {
    grid-column: 1 / -1;
}

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

    .atlas-country-editorial-grid {
    grid-template-columns: 1fr;
}

    .atlas-country-summary-card, .atlas-country-editorial-grid section {
    padding: 16px;
}

    .atlas-country-summary-stats, .atlas-country-essential-list, .atlas-country-sidebar {
    grid-template-columns: 1fr;
}

    .atlas-country-core-grid {
    margin-top: 24px;
}

    .atlas-country-city-section, .atlas-country-editorial-grid {
    margin-top: var(--section-gap-compact);
}

}.country-difference-actions {
    margin-top: 32px;
}.country-difference-actions-panel {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.country-difference-actions-heading {
    margin-bottom: 14px;
}.country-difference-actions-heading p:not(.eyebrow) {
    max-width: var(--measure-copy);
}.country-difference-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
}.country-difference-actions-grid .world-use-option {
    display: flex;
    min-width: 0;
    min-height: 144px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
}.country-difference-actions-grid .world-use-option:hover {
    border-color: var(--border-strong);
    color: var(--text);
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}.country-difference-actions-grid .world-use-copy {
    display: block;
    min-width: 0;
}.country-difference-actions-grid .world-use-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-bottom: 10px;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: var(--surface-blue);
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1;
}.country-difference-actions-grid .world-use-copy strong {
    display: block;
    font-size: 16px;
    line-height: 1.35;
}.country-difference-actions-grid .world-use-copy small {
    display: block;
    margin-top: 6px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.6;
}.country-difference-actions-grid .world-use-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1;
}@media (max-width: 920px) {

    .country-difference-actions-grid {
    grid-template-columns: 1fr;
}

    .country-difference-actions-grid .world-use-option {
    min-height: 0;
}

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

    .country-difference-actions-panel {
    padding: 16px;
}

    .country-difference-actions-heading {
    margin-bottom: 12px;
}

    .country-difference-actions-grid .world-use-option {
    padding: 14px;
}

}.atlas-city-fact-strip {
    margin-top: 6px;
}.atlas-city-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 12px;
    margin-top: 14px;
}.atlas-city-summary-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.atlas-city-summary-card h2 {
    margin: 4px 0 10px;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -.02em;
}.atlas-city-summary-card > p:not(.eyebrow) {
    margin: 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.72;
}.atlas-city-summary-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}.atlas-city-summary-stats > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}.atlas-city-summary-stats span, .atlas-city-summary-stats strong {
    display: block;
}.atlas-city-summary-stats span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-city-summary-stats strong {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}.atlas-city-summary-actions .atlas-city-intent-links {
    margin-top: 8px;
}.atlas-city-clock-section {
    margin-top: var(--section-gap-compact);
}.atlas-city-core-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr);
    gap: 12px;
    align-items: start;
    margin-top: var(--section-gap-compact);
}.atlas-city-main, .atlas-city-sidebar {
    min-width: 0;
}.atlas-city-sidebar {
    display: grid;
    gap: 12px;
}.atlas-city-main .atlas-popular-conversion, .atlas-city-main .atlas-conversion-section {
    margin-top: 0;
}.atlas-city-main .atlas-conversion-section {
    max-width: none;
}.atlas-city-main .atlas-popular-conversion + .atlas-conversion-section {
    margin-top: 12px;
}.atlas-city-conversion-card .atlas-table-wrap {
    box-shadow: var(--shadow-card);
}.atlas-city-essential-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    padding-top: 14px;
}.atlas-city-essential-list > div {
    min-width: 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--surface-soft);
}.atlas-city-essential-list span, .atlas-city-essential-list strong {
    display: block;
}.atlas-city-essential-list span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.atlas-city-essential-list strong {
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}.atlas-city-editorial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
    gap: 12px;
    margin-top: var(--section-gap);
    padding-top: 0;
    border-top: 0;
}.atlas-city-editorial-grid section {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.atlas-city-editorial-grid h2 {
    font-size: 19px;
}.atlas-city-country-cta {
    margin-top: 32px;
}.atlas-city-directory-jump {
    justify-content: flex-start;
}@media (max-width: 1100px) {

    .atlas-city-summary-grid, .atlas-city-core-grid {
    grid-template-columns: 1fr;
}

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

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

    .atlas-city-sidebar .atlas-data-card:first-child, .atlas-city-sidebar .atlas-data-card:nth-child(2) {
    grid-column: auto;
}

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

    .atlas-city-editorial-grid {
    grid-template-columns: 1fr;
}

    .atlas-city-summary-card, .atlas-city-editorial-grid section {
    padding: 16px;
}

    .atlas-city-summary-stats, .atlas-city-essential-list, .atlas-city-sidebar {
    grid-template-columns: 1fr;
}

    .atlas-city-clock-section, .atlas-city-core-grid, .atlas-city-editorial-grid {
    margin-top: 28px;
}

}.reference-page .unix-dst-choice {
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
}.reference-page .unix-dst-choice label {
    display: grid;
    gap: 8px;
    font-weight: 700;
}.reference-page .unix-dst-choice small {
    display: block;
    margin-top: 8px;
    color: var(--text-soft);
    line-height: 1.55;
}.reference-page .unix-detected-unit { margin-top: 10px; }.world-city-row[hidden] {
    display: none !important;
}.world-city-name strong, .world-city-name small, .world-city-name a {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}.world-city-time {
    text-align: right;
    white-space: nowrap;
}.world-city-time time {
    display: block;
    color: var(--accent-value);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 700;
}.world-city-time small {
    display: block;
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.world-city-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}.world-city-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 94%, var(--text) 6%);
}.world-city-name {
    min-width: 0;
}.world-city-name a, .world-city-name strong {
    color: var(--text);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1.3;
}.world-city-name a:hover {
    color: var(--primary);
}.world-city-name small {
    margin-top: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.3;
}@media (max-width: 480px) {
.world-city-list {
    grid-template-columns: 1fr;
}

.world-city-row {
    min-height: 48px;
}
}.world-city-list-placeholder {
    grid-column: 1 / -1;
    margin: 0;
    padding: 10px 12px;
    color: var(--text-soft);
    font-size: 0.875rem;
    line-height: 1.5;
}.world-country-card[open] .world-country-body {
    padding: 0 14px 14px;
}.world-country-card[open] .world-country-body-head {
    padding: 14px 0;
}.world-country-card[open] .world-city-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}@media (max-width: 980px) {
    .world-country-card[open] .world-city-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}@media (max-width: 620px) {
    .world-country-card[open] .world-city-list {
        grid-template-columns: 1fr;
    }

    .world-country-card[open] .world-country-body-head {
        flex-direction: column;
    }

    .world-country-detail-link {
        white-space: normal;
    }
}.fixed-offset-page .reference-cluster-nav + .reference-cluster-nav {
    margin-top: 8px;
}.offset-converter-card {
    margin-top: 18px;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.offset-converter-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}.offset-converter-heading > div {
    min-width: 0;
}.offset-converter-heading h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.35;
}.offset-converter-heading > p {
    width: min(100%, 470px);
    margin: 0;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.65;
}.offset-converter-heading-inline {
    margin-bottom: 14px;
}.offset-converter-form {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(130px, .65fr) minmax(190px, 1fr) minmax(190px, 1fr);
    gap: 10px;
    align-items: end;
}.offset-converter-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.offset-converter-form input,
.offset-converter-form select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}.offset-converter-form input:focus,
.offset-converter-form select:focus {
    outline: 2px solid color-mix(in srgb, var(--primary) 22%, transparent);
    outline-offset: 1px;
    border-color: var(--primary);
}.offset-converter-form input.is-invalid,
.offset-converter-form input[aria-invalid="true"] {
    border-color: var(--danger);
}.offset-converter-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}.offset-converter-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}.offset-converter-quick > span {
    margin-right: 2px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.offset-converter-quick button {
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-soft);
    color: var(--text);
    font: inherit;
    font-size: var(--font-xs);
    font-weight: 600;
    cursor: pointer;
}.offset-converter-quick button:hover,
.offset-converter-quick button:focus-visible {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: var(--primary-soft);
    color: var(--primary);
}.offset-converter-result {
    display: grid;
    grid-template-columns: minmax(230px, .8fr) minmax(0, 1.8fr);
    gap: 12px;
    margin-top: 18px;
}.offset-result-primary {
    padding: 18px;
    border-radius: var(--radius);
    background: var(--primary-soft);
}.offset-result-primary > span,
.offset-result-stats span {
    display: block;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 600;
}.offset-result-primary > strong {
    display: block;
    margin-top: 4px;
    color: var(--accent-value);
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.05;
    letter-spacing: -.03em;
}.offset-result-primary > p {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.55;
}.offset-result-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}.offset-result-stats > div {
    min-width: 0;
    padding: 14px;
    border-radius: var(--radius);
    background: var(--surface-soft);
}.offset-result-stats strong {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}.offset-converter-answer {
    margin: 14px 0 0;
    padding: 12px 14px;
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 13px;
    line-height: 1.65;
}.offset-converter-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}.offset-converter-footer > span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.offset-converter-warning {
    margin: 14px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.65;
}.offset-table-card {
    margin-top: 12px;
}.offset-common-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 16px;
}.offset-common-grid > div {
    min-width: 0;
    padding: 12px;
    border-radius: var(--radius);
    background: var(--surface-soft);
}.offset-common-grid strong,
.offset-common-grid span {
    display: block;
}.offset-common-grid strong {
    font-size: 12.5px;
    line-height: 1.45;
}.offset-common-grid span {
    margin-top: 4px;
    color: var(--text-soft);
    font-size: var(--font-xs);
}@media (max-width: 900px) {
    .offset-converter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .offset-converter-result {
        grid-template-columns: minmax(0, 1fr);
    }
}@media (max-width: 680px) {
    .offset-converter-card {
        padding: 18px;
    }

    .offset-converter-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .offset-converter-heading > p {
        width: 100%;
    }

    .offset-result-stats,
    .offset-common-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}@media (max-width: 520px) {
    .offset-converter-form,
    .offset-result-stats,
    .offset-common-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .offset-converter-actions .button {
        flex: 1 1 100%;
        width: 100%;
    }

    .offset-converter-quick {
        align-items: stretch;
    }

    .offset-converter-quick > span {
        flex: 0 0 100%;
    }

    .offset-converter-quick button {
        flex: 1 1 calc(50% - 4px);
        border-radius: var(--radius-sm);
    }

    .offset-converter-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .offset-converter-footer .button {
        width: 100%;
    }
}.reference-dst-page .dst-tool-shell {
    margin-top: 18px;
}.reference-dst-page .dst-control-grid {
    display: grid;
    grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr) minmax(180px, .65fr);
    gap: 12px;
    align-items: start;
}.reference-dst-page .reference-field input[type="search"],
.reference-dst-page .reference-field input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    outline: 0;
}.reference-dst-page .reference-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}.reference-dst-page .dst-field-help {
    display: block;
    min-height: 18px;
    margin-top: 4px;
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 500;
    line-height: 1.4;
}.reference-dst-page .dst-quick-zones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}.reference-dst-page .dst-quick-zones .text-button {
    min-height: 34px;
    padding: 0 10px;
    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;
    cursor: pointer;
}.reference-dst-page .dst-quick-zones .text-button:hover {
    border-color: var(--primary);
    color: var(--primary);
}.reference-dst-page .dst-answer {
    margin-top: 14px;
    padding: 16px 16px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    background: var(--surface-soft);
}.reference-dst-page .dst-answer > span,
.reference-dst-page .dst-answer > strong,
.reference-dst-page .dst-answer > p {
    display: block;
}.reference-dst-page .dst-answer > span {
    color: var(--text-soft);
    font-size: var(--font-xs);
}.reference-dst-page .dst-answer > strong {
    margin-top: 2px;
    font-size: 18px;
    line-height: 1.35;
}.reference-dst-page .dst-answer > p {
    margin: 4px 0 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.6;
}.reference-dst-page .dst-answer.is-active { border-left-color: var(--success); }.reference-dst-page .dst-answer.is-standard { border-left-color: var(--primary); }.reference-dst-page .dst-answer.is-stable { border-left-color: var(--text-soft); }.reference-dst-page .dst-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}.reference-dst-page .dst-summary-grid > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.reference-dst-page .dst-summary-grid span,
.reference-dst-page .dst-summary-grid strong,
.reference-dst-page .dst-summary-grid small {
    display: block;
}.reference-dst-page .dst-summary-grid span,
.reference-dst-page .dst-summary-grid small {
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.4;
}.reference-dst-page .dst-summary-grid strong {
    margin: 4px 0;
    font-size: 16px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}.reference-dst-page .dst-transition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}.reference-dst-page .dst-transition-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.reference-dst-page .dst-transition-card > span {
    display: block;
    color: var(--text-soft);
    font-size: var(--font-xs);
}.reference-dst-page .dst-transition-card > strong {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.4;
}.reference-dst-page .dst-transition-card > p {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: var(--font-xs);
    line-height: 1.55;
}.reference-dst-page .dst-transition-card.is-empty {
    background: var(--surface-soft);
}.reference-dst-page .dst-day-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px 14px;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--primary-soft);
    color: var(--text);
    font-size: var(--font-xs);
    line-height: 1.5;
}.reference-dst-page .dst-day-notice[hidden] { display: none; }.reference-dst-page .dst-day-notice span { color: var(--text-soft); }.reference-dst-page .dst-year-section {
    margin-top: var(--section-gap-compact);
}.reference-dst-page .dst-year-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}.reference-dst-page .dst-year-nav .button {
    min-height: 38px;
    padding-inline: 12px;
}.reference-dst-page .dst-year-timeline {
    display: grid;
    gap: 8px;
}.reference-dst-page .dst-year-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.reference-dst-page .dst-year-item.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-soft);
}.reference-dst-page .dst-year-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
}.reference-dst-page .dst-year-item strong { font-size: 14px; line-height: 1.4; }.reference-dst-page .dst-year-item p { margin: 4px 0 0; font-size: var(--font-xs); line-height: 1.5; }.reference-dst-page .dst-year-item small { display: block; margin-top: 2px; color: var(--text-soft); font-size: var(--font-xs); line-height: 1.45; }.reference-dst-page .dst-year-empty {
    padding: 20px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface-soft);
}.reference-dst-page .dst-year-empty strong { display: block; font-size: 15px; }.reference-dst-page .dst-year-empty p { margin: 4px 0 0; color: var(--text-soft); font-size: 12px; line-height: 1.55; }.reference-dst-page .dst-explainer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: var(--section-gap-compact);
}@media (max-width: 900px) {
    .reference-dst-page .dst-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reference-dst-page .dst-control-grid > :last-child { grid-column: 1 / -1; }
    .reference-dst-page .dst-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reference-dst-page .dst-explainer-grid { grid-template-columns: 1fr; }
}@media (max-width: 620px) {
    .reference-dst-page .dst-control-grid,
    .reference-dst-page .dst-summary-grid,
    .reference-dst-page .dst-transition-grid { grid-template-columns: 1fr; }
    .reference-dst-page .dst-control-grid > :last-child { grid-column: auto; }
    .reference-dst-page .dst-year-nav { width: 100%; }
    .reference-dst-page .dst-year-nav .button { flex: 1 1 140px; }
    .reference-dst-page .dst-day-notice { flex-direction: column; gap: 2px; }
}@media (max-width: 480px) {
    .reference-dst-page .dst-quick-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reference-dst-page .dst-quick-zones .text-button { width: 100%; }
    .reference-dst-page .dst-primary-actions .button { width: 100%; }
    .reference-dst-page .dst-year-item { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 12px; }
    .reference-dst-page .dst-year-index { width: 28px; height: 28px; }
}.reference-unix-page .unix-live-grid {
    display: grid;
    grid-template-columns: .9fr 1fr 1.35fr 1.35fr;
    gap: 10px;
    margin-bottom: 18px;
}.reference-unix-page .unix-live-item {
    position: relative;
    min-width: 0;
    min-height: 118px;
    padding: 14px 14px 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-soft);
}.reference-unix-page .unix-live-item::before {
    content: "";
    position: absolute;
    top: 0;
    right: 14px;
    left: 14px;
    height: 3px;
    border-radius: 0 0 var(--radius-micro) var(--radius-micro);
    background: var(--primary);
    opacity: .9;
}.reference-unix-page .unix-live-item > span,
.reference-unix-page .unix-live-item > strong {
    display: block;
}.reference-unix-page .unix-live-item > span {
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 700;
}.reference-unix-page .unix-live-item > strong {
    margin-top: 8px;
    color: var(--accent-value);
    font-size: clamp(16px, 1.7vw, 22px);
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    overflow-wrap: anywhere;
}.reference-unix-page .unix-live-item .text-button {
    position: absolute;
    bottom: 12px;
    left: 15px;
}.reference-unix-page .unix-form-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(130px, .65fr) minmax(0, 1fr);
}.reference-unix-page .unix-form-grid-date {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}.reference-unix-page .unix-preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}.reference-unix-page .unix-output-card {
    border-radius: var(--radius);
}.reference-unix-page .unix-output-list > div {
    grid-template-columns: 165px minmax(0, 1fr) auto;
}.reference-unix-page .unix-output-list code {
    font-variant-numeric: tabular-nums;
}.reference-unix-page .unix-batch-card {
    margin-top: 18px;
}.reference-unix-page .reference-section-intro {
    margin: -3px 0 16px;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.65;
}.reference-unix-page .unix-batch-layout {
    display: grid;
    grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr);
    gap: 14px;
    align-items: start;
}.reference-unix-page .unix-batch-controls > label {
    display: block;
    color: var(--text);
    font-size: var(--font-xs);
    font-weight: 700;
}.reference-unix-page .unix-batch-controls textarea {
    display: block;
    width: 100%;
    min-height: 190px;
    margin-top: 6px;
    padding: 12px;
    resize: vertical;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    line-height: 1.55;
    outline: 0;
}.reference-unix-page .unix-batch-controls textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}.reference-unix-page .unix-batch-settings {
    margin-top: 10px;
}.reference-unix-page .unix-batch-actions {
    align-items: center;
}.reference-unix-page .unix-batch-actions .text-button {
    margin-left: auto;
}.reference-unix-page .unix-batch-table-wrap {
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}.reference-unix-page .unix-batch-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 12px;
}.reference-unix-page .unix-batch-table th,
.reference-unix-page .unix-batch-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}.reference-unix-page .unix-batch-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-soft);
    color: var(--text-soft);
    font-size: var(--font-xs);
    font-weight: 700;
    white-space: nowrap;
}.reference-unix-page .unix-batch-table tbody tr:last-child td {
    border-bottom: 0;
}.reference-unix-page .unix-batch-table tbody tr.is-error td {
    color: var(--text-soft);
    background: var(--surface-soft);
}.reference-unix-page .unix-batch-table code {
    font: inherit;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}.reference-unix-page .unix-explain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}.reference-unix-page .unix-explain-grid .reference-tip-card {
    display: block;
    min-width: 0;
    margin: 0;
}.reference-unix-page .unix-explain-grid .reference-tip-card strong,
.reference-unix-page .unix-explain-grid .reference-tip-card p {
    display: block;
}.reference-unix-page .unix-explain-grid .reference-tip-card strong {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
}.reference-unix-page .unix-explain-grid .reference-tip-card p {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.6;
}@media (max-width: 1040px) {
    .reference-unix-page .unix-live-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-unix-page .unix-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reference-unix-page .unix-form-grid > label:first-child {
        grid-column: 1 / -1;
    }

    .reference-unix-page .unix-form-grid-date > label:first-child {
        grid-column: auto;
    }

    .reference-unix-page .unix-batch-layout {
        grid-template-columns: 1fr;
    }
}@media (max-width: 760px) {
    .reference-unix-page .unix-converter-grid,
    .reference-unix-page .unix-explain-grid {
        grid-template-columns: 1fr;
    }

    .reference-unix-page .unix-output-list > div {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .reference-unix-page .unix-output-list > div > span {
        grid-column: 1 / -1;
    }
}@media (max-width: 560px) {
    .reference-unix-page .unix-live-grid,
    .reference-unix-page .unix-form-grid,
    .reference-unix-page .unix-form-grid-date,
    .reference-unix-page .unix-batch-settings {
        grid-template-columns: 1fr;
    }

    .reference-unix-page .unix-form-grid > label:first-child,
    .reference-unix-page .unix-form-grid-date > label:first-child {
        grid-column: auto;
    }

    .reference-unix-page .unix-live-item {
        min-height: 104px;
    }

    .reference-unix-page .unix-batch-actions .button,
    .reference-unix-page .unix-batch-actions .text-button {
        width: 100%;
        margin-left: 0;
        justify-content: center;
        text-align: center;
    }
}.world-personal-board {
  border: 1px solid var(--primary-border);
  background: color-mix(in srgb, var(--primary-soft) 56%, var(--surface));
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.2vw, 28px);
}.world-personal-empty {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 20px;
  border: 1px dashed var(--primary-border);
  border-radius: var(--radius-card);
  background: var(--surface);
}.world-personal-empty[hidden], .atlas-clock-grid-favorites[hidden] { display: none !important; }.world-personal-empty strong { color: var(--brand); font-size: 1.02rem; }.world-personal-empty p { margin: 0 0 4px; color: var(--text-soft); }.world-clock-meta {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-soft);
}.world-clock-meta span { position: relative; padding-left: 14px; line-height: 1.35; }.world-clock-meta span::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-border);
}.atlas-clock-card.is-world-day,
.atlas-clock-card.is-world-evening,
.atlas-clock-card.is-world-night { background: var(--surface); }.atlas-clock-card.is-world-day .world-clock-meta span:first-child::before { background: var(--warning); }.atlas-clock-card.is-world-evening .world-clock-meta span:first-child::before,
.atlas-clock-card.is-world-night .world-clock-meta span:first-child::before { background: var(--primary); }.world-now-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0 24px;
}.world-now-guide article {
  padding: 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}.world-now-guide strong { display: block; color: var(--brand); margin-bottom: 4px; }.world-now-guide p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.55; }.search-world-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; color: var(--text-soft); font-size: 12px; }.search-world-meta span { position: relative; }.search-world-meta span + span::before { content: "•"; margin-right: 12px; color: var(--primary-border); }@media (max-width: 760px) {
  .world-now-guide { grid-template-columns: 1fr; }
  .world-personal-board { padding: 16px; }
  .world-clock-meta { font-size: 12px; }
}.atlas-location-profile {
  margin-top: 20px;
}.atlas-location-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}.atlas-location-insight-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}.atlas-location-insight-card > span {
  display: block;
  margin-bottom: 6px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}.atlas-location-insight-card h3 {
  margin: 0 0 8px;
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  line-height: 1.35;
}.atlas-location-insight-card p {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.65;
}.atlas-same-zone-section .atlas-related-grid small {
  overflow-wrap: anywhere;
}@media (max-width: 860px) {
  .atlas-location-insight-grid { grid-template-columns: 1fr; }
  .atlas-location-insight-card { padding: 16px; }
}.tool-guide {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
    display: grid;
    gap: var(--space-6);
    margin-top: var(--section-gap-compact);
}.tool-guide-intro {
    display: grid;
    grid-template-columns: minmax(210px, .72fr) minmax(0, 1.28fr);
    gap: 20px 28px;
    align-items: start;
    padding: 18px 20px 20px;
    border: var(--panel-border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.tool-guide-intro-head,
.tool-guide-section-head {
    display: grid;
    gap: 4px;
    align-content: start;
}.tool-guide-label {
    display: block;
    margin: 0;
    padding: 0;
    background: none;
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}.tool-guide-intro h2,
.tool-guide-section h2 {
    margin: 0;
    color: var(--accent-ink);
    font-size: var(--font-section);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.018em;
}.tool-guide-copy {
    display: grid;
    gap: 8px;
}.tool-guide-intro-copy {
    max-width: var(--content-wide);
    margin-top: 0;
}.tool-guide-copy p,
.tool-guide-section-head > p,
.tool-guide-note {
    margin: 0;
    color: var(--text-soft);
    font-size: 13.5px;
    line-height: 1.7;
}.tool-guide-section {
    min-width: 0;
}.tool-guide-section-head {
    margin-bottom: 12px;
}.tool-guide-step-grid,
.tool-guide-use-grid,
.tool-guide-shortcuts-grid,
.tool-guide-tip-list {
    margin: 0;
    padding: 0;
    list-style: none;
}.tool-guide-step-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}.tool-guide-step-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}.tool-guide-step-index {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-top: 0px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1;
}.tool-guide-step-body {
    display: grid;
    align-content: start;
    gap: 4px;
}.tool-guide-step-body strong {
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
}.tool-guide-step-body p {
    margin: 0;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.6;
}.tool-guide-use-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}.tool-guide-use-card {
    position: relative;
    min-width: 0;
    min-height: 58px;
    padding: 12px 12px 12px 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.55;
}.tool-guide-use-card::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}.tool-guide-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
}.tool-guide-shortcut-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-soft);
}.tool-guide-shortcut-card kbd {
    flex: 0 0 auto;
    min-width: 42px;
    padding: 4px 6px;
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--text);
    text-align: center;
    font-family: var(--font-sans);
    font-size: var(--font-xs);
    font-weight: 700;
    line-height: 1.2;
}.tool-guide-shortcut-card span {
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.5;
}.tool-guide-note {
    margin-top: 8px;
    font-size: 12px;
}.tool-guide-section-tips {
    padding: 18px 20px;
    border: 1px solid var(--primary-border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-card);
    background: var(--primary-soft);
}.tool-guide-section-tips .tool-guide-section-head {
    margin-bottom: 10px;
}.tool-guide-tip-list {
    display: grid;
    gap: 6px;
}.tool-guide-tip-card {
    position: relative;
    margin: 0;
    padding: 0 0 0 16px;
    border: 0;
    background: transparent;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.65;
}.tool-guide-tip-card::before {
    content: "";
    position: absolute;
    top: .66em;
    left: 1px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
}.tool-guide-section-faq {
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}.tool-guide-section-faq .faq-list {
    margin-top: 0;
}@media (max-width: 820px) {
    .tool-guide {
        gap: 20px;
        margin-top: 24px;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .tool-guide-section-faq {
        padding-top: 2px;
    }
}.country-timezone-hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, .8fr);
    align-items: start;
}.country-timezone-region {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}.country-timezone-hero-flag {
    width: 30px;
    height: 22px;
    flex-basis: 30px;
}.country-timezone-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2-5);
    margin-top: var(--space-4-5);
}.country-timezone-now {
    padding: var(--space-5);
}.country-timezone-now > .eyebrow {
    margin-bottom: var(--space-2);
}.country-timezone-clock {
    display: block;
    color: var(--accent-value);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.045em;
    font-variant-numeric: tabular-nums;
}.country-timezone-date {
    margin: var(--space-2) 0 var(--space-4-5);
    color: var(--text-soft);
}.country-timezone-facts {
    display: grid;
    margin: 0;
}.country-timezone-facts div {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2-5) 0;
    border-top: 1px solid var(--border);
}.country-timezone-facts dt {
    color: var(--text-soft);
    font-size: 13px;
}.country-timezone-facts dd {
    min-width: 0;
    margin: 0;
    color: var(--accent-ink);
    font-size: 13px;
    font-weight: 700;
    overflow-wrap: anywhere;
}.country-timezone-jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4-5) 0 var(--space-1-5);
}.country-timezone-jump a {
    padding: var(--space-2) var(--space-2-5);
    border: var(--panel-border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 13px;
    font-weight: 600;
}.country-timezone-table-wrap,
.country-timezone-mini-table-wrap {
    max-width: 100%;
    overflow: auto;
    border: var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--surface);
}.country-timezone-table,
.country-timezone-mini-table {
    width: 100%;
    border-collapse: collapse;
}.country-timezone-table th,
.country-timezone-table td,
.country-timezone-mini-table th,
.country-timezone-mini-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
    font-size: 13px;
}.country-timezone-table th,
.country-timezone-mini-table th {
    background: var(--surface-soft);
    font-weight: 700;
    white-space: nowrap;
}.country-timezone-table td:nth-child(3),
.country-timezone-table td:nth-child(4) {
    white-space: nowrap;
}.country-timezone-table code {
    font-size: 12px;
    overflow-wrap: anywhere;
}.country-timezone-table tbody tr:last-child td,
.country-timezone-mini-table tbody tr:last-child td {
    border-bottom: 0;
}.country-timezone-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}.country-timezone-copy,
.country-timezone-conversion {
    padding: var(--space-5);
}.country-timezone-copy h2,
.country-timezone-conversion h2 {
    margin: var(--space-0-5) 0 var(--space-2-5);
    color: var(--accent-ink);
    font-size: 21px;
}.country-timezone-copy p,
.country-timezone-conversion p {
    line-height: 1.68;
}.country-timezone-copy code {
    overflow-wrap: anywhere;
}.country-timezone-note {
    margin-bottom: 0;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.5;
}.country-timezone-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2-5);
}.country-timezone-related-grid a {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas: "flag title" "flag meta";
    column-gap: var(--space-2-5);
    row-gap: var(--space-0-5);
    align-items: center;
    min-width: 0;
    min-height: 70px;
    padding: var(--space-3);
    border: var(--panel-border);
    border-radius: var(--radius-card);
    background: var(--surface);
    color: var(--text);
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, transform var(--motion-fast) ease;
}.country-timezone-related-grid a:hover {
    border-color: var(--border-strong);
    background: var(--surface-soft);
    box-shadow: var(--shadow-card);
    color: var(--text);
    transform: translateY(-1px);
}.country-timezone-related-flag {
    grid-area: flag;
    align-self: center;
}.country-timezone-related-grid strong {
    grid-area: title;
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}.country-timezone-related-grid small {
    grid-area: meta;
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.35;
}.country-timezone-faq .atlas-faq-grid {
    align-items: start;
}.country-timezone-back {
    margin: var(--space-6) 0 var(--space-1-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}.country-timezone-back a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    font-size: 13px;
    font-weight: 700;
}@media (max-width: 900px) {
    .country-timezone-hero,
    .country-timezone-two-col {
        grid-template-columns: 1fr;
    }

    .country-timezone-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}@media (max-width: 640px) {
    .country-timezone-now,
    .country-timezone-copy,
    .country-timezone-conversion {
        padding: var(--space-4);
    }

    .country-timezone-clock {
        font-size: 36px;
    }

    .country-timezone-actions {
        display: grid;
    }

    .country-timezone-actions .button {
        width: 100%;
    }

    .country-timezone-jump {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .country-timezone-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .country-timezone-table,
    .country-timezone-table tbody,
    .country-timezone-table tr,
    .country-timezone-table td {
        display: block;
        width: 100%;
    }

    .country-timezone-table thead {
        display: none;
    }

    .country-timezone-table tr {
        margin-bottom: var(--space-3);
        overflow: hidden;
        border: var(--panel-border);
        border-radius: var(--radius-card);
        background: var(--surface);
    }

    .country-timezone-table tr:last-child {
        margin-bottom: 0;
    }

    .country-timezone-table td {
        display: grid;
        grid-template-columns: 116px minmax(0, 1fr);
        gap: var(--space-3);
        padding: var(--space-2-5) var(--space-3);
        white-space: normal !important;
    }

    .country-timezone-table td::before {
        content:attr(data-label);
        color: var(--text-soft);
        font-size: 13px;
        font-weight: 600;
    }

    .country-timezone-table td:last-child {
        border-bottom: 0;
    }

    .country-timezone-two-col {
        gap: var(--space-3);
    }

    .country-timezone-related-grid {
        grid-template-columns: 1fr;
    }

    .country-timezone-facts div {
        grid-template-columns: 105px minmax(0, 1fr);
    }
}@media (max-width: 390px) {
    .country-timezone-table td {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }

    .country-timezone-jump {
        grid-template-columns: 1fr;
    }

    .country-timezone-clock {
        font-size: 32px;
    }

    .country-timezone-facts div {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}@media (max-width: 900px) {
    main.site-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    main.site-main select:not([multiple]),
    main.site-main textarea:not([readonly]) {
        min-width: 0;
        max-width: 100%;
        min-height: 44px;
        font-size: 16px !important;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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