.timezone-main{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}.timezone-comparison{display:grid;grid-row:2;grid-template-columns:minmax(0,1fr) 2.75rem;gap:1rem .75rem;min-width:0}.timezone-city{grid-column:1;min-width:0}.timezone-city:first-child{grid-row:1}.timezone-city:last-child{grid-row:2}.timezone-city-select{position:relative;display:flex;align-items:center;gap:.75rem;min-height:2.75rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface-muted);font-size:1rem;line-height:1.5}.timezone-city-select>span{flex:1;min-width:0;overflow-wrap:anywhere}.timezone-city-select select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:1rem}.timezone-city-select:hover{border-color:var(--primary);background:var(--surface-hover)}.timezone-city-select:active{background:var(--primary-soft)}.timezone-city-select:has(select:focus-visible){outline:2px solid var(--focus);outline-offset:4px}.time-zones-tool svg{width:1.25rem;height:1.25rem;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.timezone-city-select svg{color:var(--text-muted);pointer-events:none}.timezone-clock{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 .5rem;margin-top:.5rem}.timezone-offset{color:var(--text-muted);font-size:.75rem;line-height:1.25rem}.timezone-digits{font-size:1.75rem;font-weight:700;line-height:1.2;letter-spacing:-.035em}.timezone-date{grid-column:1 / -1;color:var(--text-muted);font-size:.75rem;line-height:1rem;text-align:right}.timezone-swap{grid-column:2;grid-row:1 / 3;align-self:center;justify-self:end}.timezone-swap svg{transform:rotate(90deg)}.timezone-difference{grid-row:1;min-width:0;border-bottom:1px solid var(--border);padding-bottom:1rem}.timezone-result-heading{color:var(--text-muted);font-size:.875rem;line-height:1.25rem}.timezone-result-value{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem;margin-top:.5rem;color:var(--primary);font-size:3rem;line-height:1.1;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.timezone-result-unit{font-size:1.75rem;letter-spacing:-.025em}.timezone-result{margin-top:.5rem;font-size:1rem;line-height:1.5rem;font-weight:700;overflow-wrap:anywhere}.timezone-result-note{margin-top:.25rem;color:var(--text-muted);font-size:.75rem;line-height:1.25rem}.timezone-copy{width:100%;margin-top:.75rem;background:var(--surface-muted)}.timezone-footer{display:grid;gap:1rem;margin-top:1.5rem;border-top:1px solid var(--border);padding-top:1.25rem}.timezone-presets{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:.5rem}.timezone-preset-buttons{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.timezone-preset-buttons .btn-chip{min-height:2.75rem;padding-inline:.75rem;font-size:.75rem}.timezone-preset-buttons [aria-pressed=true]{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}.timezone-device-note{font-size:.75rem;line-height:1.25rem;color:var(--text-muted)}.timezone-table-wrap{margin-top:1.5rem;border:1px solid var(--border);border-radius:.75rem;background:var(--surface)}.timezone-table{width:100%;border-collapse:collapse;font-size:.875rem;line-height:1.5rem}.timezone-table th,.timezone-table td{padding:1rem;text-align:left;vertical-align:top}.timezone-table thead{font-size:.75rem;line-height:1.25rem;color:var(--text-muted)}.timezone-table tbody tr{border-top:1px solid var(--border)}.timezone-table .timezone-msk-row{background:var(--primary-soft)}.timezone-table .timezone-msk-row th{color:var(--primary)}.timezone-table tbody th,.timezone-table-msk{white-space:nowrap;font-variant-numeric:tabular-nums}.timezone-table-cities{font-weight:600}.timezone-table-regions{color:var(--text-muted)}@media(min-width:40rem){.timezone-city{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:center}.timezone-city-select{min-height:3.25rem;padding-block:.75rem}.timezone-clock{display:block;margin-top:0;text-align:center}.timezone-digits{margin-top:.25rem;font-size:2rem}.timezone-date{margin-top:.5rem;font-size:.875rem;line-height:1.5rem;text-align:center}.timezone-comparison{row-gap:2rem}.timezone-preset-buttons{flex-direction:row;flex-wrap:wrap}}@media(min-width:48rem){.timezone-result-value{font-size:4.5rem}.timezone-result-unit{font-size:2.25rem}.timezone-result{font-size:1.25rem;line-height:1.75rem}.timezone-result-note{font-size:.875rem;line-height:1.5rem}}@media(min-width:64rem){.timezone-table tbody th{width:7rem}.timezone-table-msk{width:8rem}.timezone-table-cities{width:30%}.timezone-main{grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:2rem}.timezone-comparison{grid-row:1;grid-column:1;column-gap:1rem}.timezone-city{display:block}.timezone-clock{margin-top:1rem}.timezone-digits{font-size:3rem}.timezone-swap svg{transform:none}.timezone-difference{display:flex;flex-direction:column;justify-content:center;grid-row:1;grid-column:2;padding-block:.5rem;padding-left:2rem;border-bottom:0;border-left:1px solid var(--border)}.timezone-result-heading{color:var(--primary);font-size:1rem;line-height:1.5rem;font-weight:600}.timezone-result-value{margin-top:1.5rem;font-size:6rem;gap:.5rem 1rem}.timezone-result-unit{font-size:3rem}.timezone-result{margin-top:1.5rem}.timezone-result-note{margin-top:.5rem}.timezone-copy{min-height:3.25rem;margin-top:2rem}.timezone-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem}.timezone-presets{flex-direction:row;align-items:center;gap:.75rem}.timezone-presets>span{flex-shrink:0}}@media(min-width:80rem){.timezone-main{gap:3rem}.timezone-difference{padding-left:3rem}.timezone-result-value{font-size:8rem}.timezone-result-unit{font-size:3.5rem}.timezone-result{font-size:1.5rem;line-height:2rem}}@media(max-width:47.999rem){.timezone-presets{align-items:stretch}.timezone-preset-buttons{width:100%;flex-direction:column;align-items:stretch}.timezone-preset-buttons .btn-chip{width:100%}}@media(max-width:63.999rem){.timezone-table,.timezone-table tbody{display:block}.timezone-table thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.timezone-table tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem;padding:1rem}.timezone-table tbody tr:first-child{border-top:0;border-radius:.75rem .75rem 0 0}.timezone-table tbody tr:last-child{border-radius:0 0 .75rem .75rem}.timezone-table th,.timezone-table td{display:block;padding:0}.timezone-table-msk{text-align:right!important;color:var(--text-muted)}.timezone-table-cities,.timezone-table-regions{grid-column:1 / -1}.timezone-table-cities{padding-top:.25rem!important}}