/* whenn.cc visual system */

:root{
    color-scheme:dark;
    --bg:#0d1117;
    --surface:#151b24;
    --surface-2:#1a2230;
    --field:#0f151e;
    --line:#293241;
    --line-soft:rgba(255,255,255,.07);
    --text:#f4f7fb;
    --muted:#aab4c3;
    --soft:#778397;
    --accent:#42d2b3;
    --accent-dark:#071d18;
    --blue:#83baff;
    --danger:#ff9b9b;
    --radius:14px;
    --shadow:0 20px 60px rgba(0,0,0,.28);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

html.is-modal-locked,
body.is-modal-locked{
    overflow:hidden;
    overscroll-behavior:none;
}

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 15% 0, rgba(66,210,179,.1), transparent 28rem),
        var(--bg);
    color:var(--text);
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
textarea,
select{ font:inherit; }

button,
summary,
a{ -webkit-tap-highlight-color:transparent; }

button{ cursor:pointer; }

[hidden]{ display:none !important; }

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    border:0;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    overflow:hidden;
    white-space:nowrap;
}

.topbar{
    width:min(1080px, 100%);
    min-height:64px;
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 auto;
    padding:12px 20px;
}

.brand{
    display:inline-flex;
    align-items:center;
    min-height:40px;
    padding:0 14px;
    border:1px solid rgba(66,210,179,.2);
    border-radius:999px;
    background:rgba(20,27,36,.76);
    color:var(--text);
    font-size:16px;
    font-weight:900;
    text-decoration:none;
}

.brand::after{
    content:"home";
    margin-left:9px;
    padding:4px 7px;
    border-radius:999px;
    background:rgba(66,210,179,.12);
    color:var(--accent);
    font-size:9px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.topbar-links{
    display:flex;
    margin-left:auto;
}

.topbar-links a{
    display:inline-flex;
    align-items:center;
    min-height:36px;
    padding:0 10px;
    border-radius:999px;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.topbar-links a:hover{
    background:rgba(255,255,255,.05);
    color:var(--text);
}

.page{
    width:min(1180px, 100%);
    display:grid;
    grid-template-columns:minmax(360px, .9fr) minmax(480px, 1.1fr);
    gap:14px;
    margin:0 auto;
    padding:28px 20px 48px;
}

.hero{ display:contents; }

.hero-copy{
    grid-column:1 / -1;
    grid-row:1;
    max-width:780px;
    margin:0 auto;
    padding:8px 12px 16px;
    text-align:center;
}

.eyebrow{
    margin:0;
    color:var(--accent);
    font-size:10px;
    font-weight:900;
    letter-spacing:.14em;
    text-transform:uppercase;
}

h1,
h2,
p{ margin-top:0; }

h1{
    margin-bottom:0;
    font-size:clamp(30px, 3vw, 36px);
    line-height:1.08;
    letter-spacing:-.025em;
}

.hero-copy .eyebrow{ margin-bottom:8px; }

.intro{
    max-width:680px;
    margin:13px auto 0;
    color:var(--muted);
    font-size:16px;
    line-height:1.55;
}

.creator,
.clock-card,
.examples-card{
    border:1px solid var(--line-soft);
    border-radius:var(--radius);
    background:rgba(21,27,36,.96);
    box-shadow:var(--shadow);
}

.creator{
    grid-column:1;
    grid-row:2;
    display:flex;
    flex-direction:column;
    margin:0;
    padding:20px;
}

.section-heading{
    margin-bottom:16px;
}

.section-heading .eyebrow{ margin-bottom:5px; }

.section-heading h2{
    margin:0;
    font-size:21px;
    letter-spacing:-.02em;
}

.section-description{
    margin:5px 0 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
}

.creator-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
    align-items:end;
}

.creator-form label,
.timezone-control label,
.calendar-form label{
    display:grid;
    gap:6px;
    min-width:0;
}

.creator-form label > span,
.timezone-control label > span,
.calendar-form label > span{
    color:#c1cad7;
    font-size:11px;
    font-weight:850;
}

.country-native-select{ display:none; }

.country-select-button,
.date-picker-button,
.time-picker-button,
.calendar-form input,
.calendar-form textarea,
.country-search input{
    width:100%;
    min-width:0;
    min-height:48px;
    border:1px solid var(--line);
    border-radius:10px;
    outline:none;
    background:var(--field);
    color:var(--text);
}

.country-select-button,
.date-picker-button,
.time-picker-button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 13px;
    text-align:left;
}

.country-select-button::after{
    content:"";
    width:8px;
    height:8px;
    flex:0 0 8px;
    margin-left:10px;
    border-right:2px solid #b9c2cf;
    border-bottom:2px solid #b9c2cf;
    transform:rotate(45deg) translateY(-2px);
}

.country-select-button span,
.date-picker-button strong,
.time-picker-button strong{
    min-width:0;
    overflow:hidden;
    color:var(--text);
    font-size:13px;
    font-weight:850;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.country-select-button:hover,
.date-picker-button:hover,
.time-picker-button:hover,
.country-select-button:focus-visible,
.date-picker-button:focus-visible,
.time-picker-button:focus-visible{
    border-color:rgba(66,210,179,.55);
}

.link-note{
    grid-column:1 / -1;
    display:none;
    min-width:0;
    align-items:center;
    gap:8px;
    padding:2px 1px;
}

.link-note.is-visible{ display:flex; }

.link-note span{
    flex:0 0 auto;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
}

.link-note a{
    min-width:0;
    overflow:hidden;
    color:var(--accent);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.link-note a:hover{ text-decoration:underline; }

.creator-actions{
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-end;
    gap:9px;
}

.creator-actions button,
.calendar-download-button,
.picker-actions button{
    min-height:44px;
    border:1px solid transparent;
    border-radius:10px;
    padding:0 16px;
    font-size:13px;
    font-weight:900;
}

#createCopyButton,
.calendar-download-button,
.picker-actions button:last-child{
    background:var(--accent);
    color:var(--accent-dark);
}

#createCopyButton{
    position:relative;
    min-width:140px;
    overflow:hidden;
}

#createCopyButton:hover,
.calendar-download-button:hover,
.picker-actions button:last-child:hover{ background:#59ddc1; }

#createCopyButton::after{
    content:"";
    position:absolute;
    inset:-20% auto -20% -35%;
    width:30%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
    opacity:0;
    transform:skewX(-18deg);
}

#createCopyButton.is-flashing::after{ animation:copy-flash .55s ease; }

@keyframes copy-flash{
    20%{ opacity:1; }
    100%{ opacity:0; transform:skewX(-18deg) translateX(430%); }
}

.calendar-button{
    min-width:120px;
    border-color:rgba(66,210,179,.3) !important;
    background:rgba(66,210,179,.08);
    color:var(--accent);
}

.calendar-button:hover{ background:rgba(66,210,179,.14); }

.calendar-button span{
    margin-right:5px;
    font-size:16px;
}

.creator-guide{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
    margin-top:auto;
    padding-top:18px;
}

.creator-guide div{
    min-width:0;
    padding:11px;
    border:1px solid var(--line-soft);
    border-radius:9px;
    background:rgba(255,255,255,.025);
}

.creator-guide strong{
    display:block;
    margin-bottom:4px;
    color:var(--text);
    font-size:11px;
}

.creator-guide span{
    display:block;
    color:var(--muted);
    font-size:10px;
    line-height:1.4;
}

.clock-card{
    grid-column:2;
    grid-row:3;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 44px minmax(0, 1fr);
    gap:14px 10px;
    align-items:start;
    padding:20px;
}

.clock-card-heading{
    grid-column:1 / -1;
    padding-bottom:13px;
    border-bottom:1px solid var(--line-soft);
}

.clock-card-heading .eyebrow{ margin-bottom:4px; }

.clock-card-heading h2{
    margin:0;
    font-size:21px;
}

.clock-column{
    min-width:0;
    padding:2px 0;
    text-align:center;
}

.date-label{
    display:block;
    margin-bottom:8px;
    color:var(--soft);
    font-size:10px;
    font-weight:900;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.time{
    min-height:46px;
    color:var(--text);
    font-size:clamp(32px, 5vw, 44px);
    font-weight:950;
    font-variant-numeric:tabular-nums;
    letter-spacing:-.035em;
    line-height:1;
    white-space:nowrap;
}

.time-period{
    display:inline-block;
    margin-left:.2em;
    font-size:.42em;
    font-weight:850;
    letter-spacing:.02em;
    vertical-align:.45em;
}

.date{
    margin-top:5px;
    color:var(--muted);
    font-size:13px;
}

.location{
    margin-top:3px;
    color:var(--blue);
    font-size:14px;
    overflow-wrap:anywhere;
}

.utc-offset{
    display:inline-flex;
    align-items:center;
    min-height:16px;
    margin-left:5px;
    padding:1px 4px;
    border:1px solid rgba(131,186,255,.2);
    border-radius:999px;
    background:rgba(131,186,255,.08);
    color:#b2d2ff;
    font-size:8px;
    font-weight:850;
    vertical-align:2px;
    white-space:nowrap;
}

.time-difference-column{
    display:flex;
    align-self:center;
    justify-content:center;
}

.time-difference{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    min-height:23px;
    padding:2px 6px;
    border:1px solid rgba(66,210,179,.22);
    border-radius:999px;
    background:rgba(66,210,179,.08);
    color:var(--accent);
    font-size:9px;
    font-weight:900;
    white-space:nowrap;
}

.home-page .clock-column.route-only{ display:block; }
.home-page .time-difference-column.route-only{ display:flex; }

.timezone-control{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    align-items:end;
    padding-top:13px;
    border-top:1px solid var(--line-soft);
    text-align:left;
}

.timezone-control-heading{
    grid-column:1 / -1;
    align-self:center;
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
}

.timezone-control-heading strong{
    display:block;
    color:#d8dee7;
}

.timezone-control .country-select-button{ min-height:44px; }

.current-time-link{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-width:0;
    padding:7px 9px;
    border-radius:9px;
    background:rgba(255,255,255,.035);
    color:var(--muted);
    font-size:11px;
}

.home-page .current-time-link{
    justify-content:flex-start;
    border:1px solid rgba(66,210,179,.13);
    background:rgba(66,210,179,.055);
}

.has-error .timezone-control,
.has-error .current-time-link,
.has-error .countdown-inline{ display:none; }

.has-error .clock-card{ grid-template-columns:1fr; }
.has-error .route-only{ display:none; }

.current-time-link a{
    min-width:0;
    overflow:hidden;
    color:var(--accent);
    font-weight:850;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.current-time-link button{
    min-height:25px;
    border:1px solid rgba(66,210,179,.28);
    border-radius:999px;
    background:rgba(66,210,179,.08);
    color:var(--accent);
    font-size:10px;
    font-weight:900;
}

.countdown-inline{
    grid-column:1 / -1;
    display:grid;
    gap:9px;
    padding:12px;
    border:1px solid rgba(66,210,179,.16);
    border-radius:11px;
    background:rgba(5,25,24,.44);
}

.countdown-inline[hidden]{ display:none; }

.countdown-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.countdown-heading-row{ order:-1; }

.countdown-title{
    font-size:14px;
    font-weight:900;
}

.countdown-kicker{
    color:var(--accent);
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.countdown-grid-compact{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:7px;
}

.countdown-grid-compact div{
    display:grid;
    min-height:50px;
    place-items:center;
    border:1px solid var(--line-soft);
    border-radius:9px;
    background:var(--surface-2);
    padding:6px;
}

.countdown-grid-compact strong{
    font-size:18px;
    font-weight:950;
    font-variant-numeric:tabular-nums;
    line-height:1;
}

.countdown-grid-compact span{
    color:var(--soft);
    font-size:8px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.examples-card{
    grid-column:1 / -1;
    grid-row:4;
    display:grid;
    grid-template-columns:230px minmax(0, 1fr);
    gap:14px;
    align-items:center;
    padding:13px 15px;
    box-shadow:none;
}

.examples-card .section-heading{ margin:0; }
.examples-card .section-heading h2{ font-size:18px; }

.examples-mobile-accordion{
    display:block;
    min-width:0;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--field);
    overflow:hidden;
}

.examples-mobile-accordion summary{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 12px;
    color:var(--text);
    cursor:pointer;
    font-size:12px;
    font-weight:850;
    list-style:none;
}

.examples-mobile-accordion summary::-webkit-details-marker{ display:none; }

.examples-mobile-arrow{
    color:var(--accent);
    font-size:18px;
    transform:rotate(90deg);
    transition:transform .25s ease;
}

.examples-mobile-accordion[open] .examples-mobile-arrow{ transform:rotate(270deg); }

.examples-mobile-list{
    height:0;
    overflow:hidden;
    border-top:0 solid var(--line-soft);
    transition:height .28s ease, border-top-width .2s ease;
}

.examples-mobile-accordion[open] .examples-mobile-list{ border-top-width:1px; }

.examples-mobile-list-inner{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:7px;
    padding:0 10px;
    opacity:0;
    transition:padding .28s ease, opacity .2s ease;
}

.examples-mobile-accordion[open] .examples-mobile-list-inner{
    padding:10px;
    opacity:1;
}

.examples-mobile-list a{
    min-width:0;
    display:grid;
    gap:2px;
    padding:8px;
    border:1px solid var(--line-soft);
    border-radius:8px;
    background:var(--surface);
    color:var(--text);
    text-decoration:none;
}

.examples-mobile-list a:hover{ border-color:rgba(66,210,179,.4); }

.examples-mobile-list .ex-label{
    font-size:12px;
    font-weight:900;
}

.examples-mobile-list .ex-url{
    overflow:hidden;
    color:var(--soft);
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.clock-card{ grid-row:2; }
.creator{ grid-row:2; }
.examples-card{ grid-row:3; }

/* Dialog foundation */
.date-popover,
.time-popover,
.calendar-popover,
.country-picker{
    position:fixed;
    inset:0;
    z-index:50;
    display:none;
    place-items:center;
    padding:18px;
    background:rgba(4,7,11,.72);
    backdrop-filter:blur(8px);
    overscroll-behavior:contain;
}

.date-popover.is-open,
.time-popover.is-open,
.calendar-popover.is-open,
.country-picker.is-open{ display:grid; }

.date-popover-panel,
.time-popover-panel,
.calendar-popover-panel,
.country-picker-panel{
    position:relative;
    width:min(520px, 100%);
    max-height:calc(100dvh - 36px);
    overflow:auto;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface);
    padding:20px;
    box-shadow:0 30px 100px rgba(0,0,0,.55);
}

.time-popover-panel{ width:min(430px, 100%); }
.calendar-popover-panel{ width:min(620px, 100%); }
.country-picker-panel{ display:flex; flex-direction:column; width:min(500px, 100%); }

.popover-close{
    position:absolute;
    z-index:3;
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--field);
    color:var(--muted);
    font-size:21px;
    line-height:1;
}

.popover-close:hover{ color:var(--text); }

.picker-header,
.country-picker-header,
.calendar-popover-header{
    margin:0 42px 17px 0;
}

.picker-header span,
.country-picker-header span,
.calendar-popover-header .eyebrow{
    display:block;
    margin-bottom:4px;
    color:var(--accent);
    font-size:10px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.picker-header strong,
.country-picker-header strong{
    font-size:20px;
}

.calendar-popover-header h2{
    margin:0;
    font-size:23px;
}

.calendar-popover-header p{
    margin:7px 0 0;
    color:var(--muted);
    font-size:13px;
}

/* Country and city picker */
.country-search{ display:block; margin-bottom:12px; }

.country-search input{
    padding:0 14px;
    font-size:16px;
}

.country-results{
    display:grid;
    gap:6px;
    min-height:0;
    overflow:auto;
}

.country-option{
    width:100%;
    min-height:43px;
    border:1px solid transparent;
    border-radius:9px;
    background:var(--field);
    color:var(--text);
    padding:0 12px;
    text-align:left;
    font-size:13px;
    font-weight:750;
}

.country-option:hover,
.country-option.is-active{
    border-color:rgba(66,210,179,.35);
    background:rgba(66,210,179,.08);
}

.country-option.is-selected{
    border-color:rgba(66,210,179,.5);
    color:var(--accent);
}

.country-empty{
    color:var(--muted);
    text-align:center;
}

/* Date picker */
.date-panel{
    display:grid;
    gap:10px;
}

.date-year-bar,
.date-month-bar{
    display:grid;
    grid-template-columns:40px 1fr 40px;
    align-items:center;
    gap:8px;
}

.date-year-bar strong,
.date-month-bar strong{ text-align:center; }

.date-year-bar button,
.date-month-bar button{
    width:40px;
    height:38px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--field);
    color:var(--text);
    font-size:20px;
}

.calendar-weekdays,
.calendar-grid{
    display:grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:5px;
}

.calendar-weekdays span{
    padding:7px 0;
    color:var(--soft);
    font-size:9px;
    font-weight:900;
    text-align:center;
    text-transform:uppercase;
}

.calendar-grid button{
    aspect-ratio:1;
    border:1px solid transparent;
    border-radius:9px;
    background:var(--field);
    color:var(--text);
    font-size:12px;
}

.calendar-grid button:hover{ border-color:rgba(66,210,179,.4); }
.calendar-grid button.is-muted{ color:#566173; }
.calendar-grid button.is-today{ border-color:var(--line); color:var(--accent); }
.calendar-grid button.is-selected{ background:var(--accent); color:var(--accent-dark); font-weight:900; }

.picker-actions{
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--line-soft);
}

.picker-actions button:first-child{
    border-color:var(--line);
    background:var(--field);
    color:var(--muted);
}

/* Time picker: one wheel interface for every device */
.picker-face{ display:none; }

.mobile-wheel-picker{
    display:grid;
    gap:12px;
}

.wheel-stage{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 22px minmax(0, 1fr);
    align-items:center;
    min-height:230px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--field);
    overflow:hidden;
}

.wheel-stage::before{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    top:50%;
    height:42px;
    border:1px solid rgba(66,210,179,.22);
    border-radius:9px;
    background:rgba(66,210,179,.09);
    transform:translateY(-50%);
}

.wheel-stage::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, var(--field), transparent 30%, transparent 70%, var(--field));
    pointer-events:none;
}

.time-wheel{
    position:relative;
    z-index:1;
    height:230px;
    overflow:hidden;
    touch-action:none;
}

.time-wheel button{
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    min-height:42px;
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:19px;
    font-weight:750;
    will-change:transform, opacity;
}

.time-wheel button.is-selected{
    color:var(--text);
    font-weight:950;
}

.time-wheel-divider{
    position:relative;
    z-index:2;
    color:var(--accent);
    font-size:26px;
    font-weight:900;
    text-align:center;
}

.mobile-minute-chips{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:7px;
}

.mobile-minute-chips button,
.mobile-format-toggle button,
.mobile-ampm-toggle button{
    min-height:40px;
    border:1px solid var(--line);
    border-radius:9px;
    background:var(--field);
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}

.mobile-time-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.mobile-format-toggle,
.mobile-ampm-toggle{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
}

.mobile-format-toggle button.is-active,
.mobile-ampm-toggle button.is-active{
    border-color:rgba(66,210,179,.35);
    background:rgba(66,210,179,.12);
    color:var(--accent);
}

.mobile-ampm-toggle.is-hidden{ visibility:hidden; }
.mobile-time-options.is-24-hour{ grid-template-columns:1fr; }

/* Calendar dialog */
.calendar-event-preview{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:8px;
    margin-bottom:16px;
}

.calendar-event-preview > div{
    min-width:0;
    padding:10px;
    border:1px solid var(--line-soft);
    border-radius:9px;
    background:var(--field);
}

.calendar-event-preview span,
.calendar-event-preview small{
    display:block;
    color:var(--soft);
    font-size:9px;
    font-weight:850;
    text-transform:uppercase;
}

.calendar-event-preview strong{
    display:block;
    margin-top:4px;
    overflow:hidden;
    font-size:12px;
    text-overflow:ellipsis;
}

.calendar-event-preview small{
    margin-top:4px;
    overflow-wrap:anywhere;
    text-transform:none;
}

.calendar-form{
    display:grid;
    gap:13px;
}

.calendar-form input,
.calendar-form textarea{
    padding:11px 13px;
}

.calendar-form textarea{
    min-height:90px;
    resize:vertical;
}

.calendar-form input:focus,
.calendar-form textarea:focus,
.country-search input:focus{ border-color:rgba(66,210,179,.55); }

.calendar-form label small{
    color:var(--soft);
    font-weight:700;
}

.calendar-duration{
    display:grid;
    gap:8px;
}

.calendar-duration-heading{
    display:flex;
    justify-content:space-between;
    color:#c1cad7;
    font-size:11px;
    font-weight:850;
}

#calendarDuration{
    width:100%;
    accent-color:var(--accent);
}

.calendar-duration-scale{
    display:flex;
    justify-content:space-between;
    color:var(--soft);
    font-size:9px;
}

.calendar-provider{ display:grid; }
.calendar-download-button{ width:100%; }

/* Install prompt */
.install-prompt{
    position:fixed;
    z-index:70;
    right:18px;
    bottom:18px;
    max-width:380px;
    display:grid;
    grid-template-columns:1fr auto auto;
    align-items:center;
    gap:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#18212c;
    padding:11px 12px;
    box-shadow:var(--shadow);
}

body.is-modal-locked .install-prompt{ display:none; }

.install-prompt div{ display:grid; gap:2px; }
.install-prompt strong{ font-size:12px; }
.install-prompt span{ color:var(--muted); font-size:10px; }

#installButton{
    min-height:34px;
    border:0;
    border-radius:9px;
    background:var(--accent);
    color:var(--accent-dark);
    padding:0 12px;
    font-weight:900;
}

#installDismiss{
    width:30px;
    height:30px;
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:20px;
}

@media (max-width:760px){
    .page{
        grid-template-columns:1fr;
        padding:18px 14px 34px;
    }

    .hero-copy,
    .creator,
    .clock-card,
    .examples-card{ grid-column:1; }

    .home-page .creator{ grid-row:2; }
    .home-page .clock-card{ grid-row:3; }
    .has-event .clock-card{ grid-row:2; }
    .has-event .creator{ grid-row:3; }
    .examples-card{ grid-row:4; }

    .hero-copy{
        padding:8px 4px 12px;
        text-align:left;
    }

    h1{ font-size:34px; }

    .intro{
        margin-left:0;
        font-size:14px;
    }

    .creator-form{ grid-template-columns:1fr 1fr; }
    .link-note{ grid-column:1 / -1; }
    .creator-actions{ grid-column:1 / -1; }

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

    .timezone-control-heading{ grid-column:1 / -1; }

    .examples-card{ grid-template-columns:1fr; }
    .examples-mobile-list-inner{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

    .calendar-event-preview{ grid-template-columns:1fr 1fr; }

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

@media (max-width:520px){
    .topbar{ min-height:58px; padding:9px 14px; }

    .page{
        gap:10px;
        padding:14px 10px 28px;
    }

    .hero-copy{ padding-top:4px; }
    .hero-copy .eyebrow{ display:none; }
    h1{ font-size:29px; }
    .intro{ margin-top:9px; line-height:1.48; }

    .creator,
    .clock-card,
    .examples-card{ border-radius:11px; }

    .creator{ padding:15px; }
    .section-heading{ margin-bottom:13px; }
    .section-heading h2{ font-size:18px; }

    .creator-form{
        grid-template-columns:1fr;
        gap:10px;
    }

    .link-note,
    .creator-actions{ grid-column:1; }

    .link-note{
        display:none;
        gap:3px;
        padding:5px 0;
    }

    .link-note.is-visible{ display:grid; }

    .creator-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    #createCopyButton{
        grid-row:1;
        min-width:0;
    }

    .creator-guide{ display:none; }

    .clock-card{
        grid-template-columns:minmax(0, 1fr) 30px minmax(0, 1fr);
        gap:11px 2px;
        padding:15px 9px;
    }

    .clock-card-heading{ padding:0 6px 11px; }
    .clock-card-heading h2{ font-size:16px; }
    .date-label{ font-size:9px; }

    .time{
        min-height:37px;
        font-size:clamp(23px, 8vw, 31px);
    }

    .date{ font-size:11px; }
    .location{ font-size:12px; }

    .utc-offset{
        display:flex;
        width:max-content;
        margin:3px auto 0;
    }

    .time-difference{
        min-width:28px;
        padding-inline:3px;
        font-size:8px;
    }

    .timezone-control{
        grid-template-columns:1fr;
        padding:11px 6px 0;
    }

    .timezone-control-heading{ grid-column:1; }

    .current-time-link{
        flex-wrap:wrap;
        margin-inline:6px;
    }

    .countdown-inline{
        margin-inline:6px;
        padding:10px 8px;
    }

    .countdown-grid-compact{ gap:5px; }

    .countdown-grid-compact div{
        min-height:49px;
        padding-inline:2px;
    }

    .examples-card{ padding:13px; }
    .examples-mobile-list-inner{ grid-template-columns:1fr; }

    .date-popover,
    .time-popover,
    .calendar-popover,
    .country-picker{
        align-items:end;
        padding:8px;
    }

    .date-popover-panel,
    .time-popover-panel,
    .calendar-popover-panel,
    .country-picker-panel{
        width:100%;
        max-height:calc(100dvh - 8px);
        border-radius:16px 16px 8px 8px;
        padding:17px 14px max(14px, env(safe-area-inset-bottom));
    }

    .country-picker{
        inset:var(--country-picker-top, 0px) 0 auto;
        height:var(--country-picker-height, 100dvh);
    }

    .country-picker-panel{
        min-height:min(72dvh, 580px);
    }

    .country-results{ flex:1 1 auto; }
    .calendar-event-preview{ grid-template-columns:1fr 1fr; }

    .install-prompt{
        right:8px;
        bottom:8px;
        left:8px;
        max-width:none;
    }
}

/* 2026 interface refresh
   Keep the product focused on one short path: choose, check, share. */
:root{
    --bg:#0b0d10;
    --surface:#12151a;
    --surface-2:#171b21;
    --field:#0d1014;
    --line:#2a3038;
    --line-soft:rgba(255,255,255,.075);
    --text:#f7f8fa;
    --muted:#9ca5b2;
    --soft:#6f7885;
    --accent:#78e6c7;
    --accent-dark:#09251d;
    --blue:#a9c7ff;
    --radius:18px;
    --shadow:none;
}

body{
    background:var(--bg);
    line-height:1.5;
}

.topbar{
    width:min(1120px, 100%);
    min-height:72px;
    padding:16px 24px;
}

.brand{
    min-height:auto;
    padding:0;
    border:0;
    background:transparent;
    font-size:19px;
    letter-spacing:-.03em;
}

.brand::after{ display:none; }

.topbar-links a{
    min-height:34px;
    padding:0;
    color:var(--soft);
    font-size:13px;
}

.topbar-links a:hover{
    background:transparent;
    color:var(--text);
}

.page{
    width:min(1120px, 100%);
    grid-template-columns:minmax(0, 1fr) minmax(380px, .82fr);
    gap:20px;
    padding:54px 24px 72px;
}

.hero-copy,
.creator,
.clock-card,
.examples-card,
.creator-form,
.creator-form label,
.timezone-control,
.timezone-control label{
    min-width:0;
}

.hero-copy{
    max-width:760px;
    margin:0;
    padding:0 0 32px;
    text-align:left;
}

.hero-copy .eyebrow{ margin-bottom:12px; }

.eyebrow{
    font-size:11px;
    letter-spacing:.16em;
}

h1{
    max-width:720px;
    margin:0;
    font-size:clamp(42px, 5vw, 64px);
    font-weight:760;
    line-height:1.02;
    letter-spacing:-.055em;
    overflow-wrap:break-word;
}

.intro{
    max-width:620px;
    margin:18px 0 0;
    color:var(--muted);
    font-size:17px;
    line-height:1.65;
}

.creator,
.clock-card,
.examples-card{
    border:1px solid var(--line);
    background:var(--surface);
    box-shadow:none;
}

.creator{
    padding:28px;
}

.clock-card{
    gap:22px 8px;
    padding:28px;
}

.section-heading,
.clock-card-heading{
    margin-bottom:24px;
    padding:0;
    border:0;
}

.section-heading .eyebrow,
.clock-card-heading .eyebrow{
    margin-bottom:8px;
    color:var(--soft);
}

.section-heading h2,
.clock-card-heading h2{
    font-size:24px;
    font-weight:720;
    line-height:1.2;
    letter-spacing:-.035em;
}

.section-description{
    margin-top:8px;
    font-size:14px;
}

.creator-form{ gap:16px 12px; }

.creator-form label > span,
.timezone-control label > span,
.calendar-form label > span{
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.country-select-button,
.date-picker-button,
.time-picker-button,
.calendar-form input,
.calendar-form textarea,
.country-search input{
    min-height:52px;
    border-color:var(--line);
    border-radius:12px;
    background:var(--field);
}

.country-select-button,
.date-picker-button,
.time-picker-button{
    padding-inline:15px;
}

.country-select-button span,
.date-picker-button strong,
.time-picker-button strong{
    font-size:14px;
    font-weight:700;
}

.country-select-button:hover,
.date-picker-button:hover,
.time-picker-button:hover,
.country-select-button:focus-visible,
.date-picker-button:focus-visible,
.time-picker-button:focus-visible{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(120,230,199,.1);
}

.link-note{
    padding:4px 0 0;
}

.link-note span{ color:var(--soft); }

.creator-actions{
    display:grid;
    grid-template-columns:auto minmax(150px, 1fr);
    margin-top:2px;
}

.creator-actions button,
.calendar-download-button,
.picker-actions button{
    min-height:50px;
    border-radius:12px;
}

#createCopyButton{
    min-width:0;
    background:var(--accent);
    font-size:14px;
}

.calendar-button{
    min-width:126px;
    border-color:var(--line) !important;
    background:transparent;
    color:var(--text);
}

.calendar-button:hover{
    border-color:#47515e !important;
    background:rgba(255,255,255,.04);
}

.creator-guide{
    grid-template-columns:repeat(3, 1fr);
    gap:18px;
    margin-top:30px;
    padding:24px 0 0;
    border-top:1px solid var(--line-soft);
}

.creator-guide div{
    position:relative;
    padding:0 0 0 27px;
    border:0;
    background:transparent;
}

.creator-guide div::before{
    position:absolute;
    top:0;
    left:0;
    width:19px;
    height:19px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(120,230,199,.12);
    color:var(--accent);
    font-size:10px;
    font-weight:900;
}

.creator-guide div:nth-child(1)::before{ content:"1"; }
.creator-guide div:nth-child(2)::before{ content:"2"; }
.creator-guide div:nth-child(3)::before{ content:"3"; }

.creator-guide strong{
    margin-bottom:3px;
    font-size:11px;
}

.creator-guide span{
    color:var(--soft);
    font-size:10px;
}

.clock-column{ padding:0; }

.date-label{
    margin-bottom:10px;
    color:var(--soft);
}

.time{
    min-height:54px;
    font-size:clamp(38px, 4vw, 52px);
    font-weight:730;
    letter-spacing:-.055em;
}

.date{
    margin-top:9px;
    font-size:13px;
}

.location{
    margin-top:2px;
    color:var(--blue);
    font-size:13px;
}

.time-difference{
    border:0;
    background:rgba(120,230,199,.1);
    color:var(--accent);
}

.timezone-control{
    gap:12px;
    padding-top:22px;
}

.timezone-control-heading{
    margin-bottom:-2px;
    font-size:12px;
}

.timezone-control-heading strong{
    color:var(--text);
    font-size:13px;
}

.timezone-control .country-select-button{ min-height:48px; }

.current-time-link{
    justify-content:flex-start;
    padding:10px 12px;
    border:0 !important;
    background:var(--field) !important;
}

.current-time-link button{
    margin-left:auto;
    padding-inline:10px;
}

.countdown-inline{
    padding:0;
    border:0;
    background:transparent;
}

.countdown-heading{ margin-bottom:-1px; }
.countdown-kicker{ color:var(--soft); }

.countdown-grid-compact{ gap:8px; }

.countdown-grid-compact div{
    min-height:58px;
    border:1px solid var(--line-soft);
    background:var(--field);
}

.countdown-grid-compact strong{
    font-size:20px;
    font-weight:720;
}

.examples-card{
    grid-template-columns:220px minmax(0, 1fr);
    margin-top:4px;
    padding:18px 20px;
    border-color:var(--line-soft);
    background:transparent;
}

.examples-card .section-heading h2{
    font-size:16px;
    font-weight:680;
}

.examples-mobile-accordion{
    border-color:var(--line);
    background:var(--field);
}

.examples-mobile-accordion summary{ min-height:48px; }

.examples-mobile-list a{
    border-color:var(--line-soft);
    background:var(--surface);
}

@media (max-width:900px){
    .page{
        grid-template-columns:minmax(0, 1fr);
        max-width:720px;
    }

    .hero-copy,
    .creator,
    .clock-card,
    .examples-card{ grid-column:1; }

    .home-page .creator{ grid-row:2; }
    .home-page .clock-card{ grid-row:3; }
    .has-event .clock-card{ grid-row:2; }
    .has-event .creator{ grid-row:3; }
    .examples-card{ grid-row:4; }
}

@media (max-width:600px){
    .topbar{ padding-inline:18px; }

    .page{
        gap:14px;
        padding:30px 14px 48px;
    }

    .hero-copy{ padding-bottom:18px; }

    h1{ font-size:clamp(36px, 11vw, 48px); }

    .intro{
        margin-top:14px;
        font-size:15px;
    }

    .creator,
    .clock-card{ padding:20px; }

    .section-heading,
    .clock-card-heading{ margin-bottom:20px; }

    .creator-form,
    .timezone-control{ grid-template-columns:minmax(0, 1fr); }

    .timezone-control-heading,
    .link-note,
    .creator-actions{ grid-column:1; }

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

    #createCopyButton{ grid-row:1; }

    .creator-guide{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .clock-card{
        grid-template-columns:minmax(0, 1fr) 32px minmax(0, 1fr);
        gap:18px 2px;
    }

    .time{ font-size:clamp(28px, 10vw, 42px); }

    .examples-card{
        grid-template-columns:1fr;
        padding:18px;
    }
}

/* Separate intro card above the creator, aligned to the main panel. */
.hero-copy{
    border:1px solid #303744;
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:0 14px 40px rgba(0,0,0,.12);
}

.hero-copy .eyebrow{
    display:none;
}

.hero-copy h1{
    color:var(--text);
    background:none;
}

@media (min-width:901px){
    .page{
        grid-template-columns:minmax(360px, .82fr) minmax(500px, 1.18fr);
        grid-template-rows:auto 1fr auto;
        gap:12px 18px;
        align-items:stretch;
    }

    .hero-copy{
        grid-column:1;
        grid-row:1;
        align-self:stretch;
        max-width:none;
        margin:0;
        padding:20px 22px;
    }

    .hero-copy h1{
        max-width:430px;
        margin:0;
        font-size:24px;
        font-weight:720;
        line-height:1.12;
        letter-spacing:-.035em;
    }

    .hero-copy .intro{
        max-width:440px;
        margin:7px 0 0;
        font-size:12px;
        line-height:1.45;
    }

    .creator,
    .home-page .creator,
    .has-event .creator{
        grid-column:1;
        grid-row:2;
        min-height:0;
        margin:0;
        align-self:stretch;
    }

    .clock-card,
    .home-page .clock-card,
    .has-event .clock-card{
        grid-column:2;
        grid-row:1 / 3;
        min-height:100%;
        align-self:stretch;
    }

    .examples-card{
        grid-column:1 / -1;
        grid-row:3;
    }
}

/* Home title lockup. */
.home-page .hero-copy .eyebrow{
    display:flex;
    align-items:center;
    gap:7px;
    width:max-content;
    margin:0 0 9px;
    color:#9ca8b8;
    font-size:9px;
    letter-spacing:.15em;
}

.home-page .hero-copy .eyebrow::before{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px rgba(99,230,190,.1);
    content:"";
}

.home-page .hero-copy h1{
    display:flex;
    flex-wrap:wrap;
    gap:0 .24em;
    max-width:520px;
    font-size:clamp(28px, 2.45vw, 35px);
    font-weight:780;
    line-height:1.04;
    letter-spacing:-.045em;
    text-wrap:balance;
}

.home-page .hero-title-accent{
    color:var(--accent);
    background:linear-gradient(100deg, var(--accent) 10%, #a7c8ff 95%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.home-page .hero-copy .intro{
    max-width:460px;
    margin-top:9px;
    font-size:13px;
    line-height:1.5;
}

@media (max-width:900px){
    .home-page .hero-copy{
        width:calc(100vw - 24px);
        max-width:calc(100vw - 24px);
        justify-self:start;
    }

    .home-page .hero-copy .eyebrow{
        margin-inline:auto;
    }

    .home-page .hero-copy h1{
        justify-content:center;
        margin-inline:auto;
        font-size:clamp(30px, 8vw, 40px);
    }

    .home-page .hero-copy .intro{
        margin-inline:auto;
    }
}

@media (max-width:520px){
    .home-page .hero-copy .eyebrow{
        margin-inline:0;
    }

    .home-page .hero-copy h1{
        display:block;
        font-size:clamp(30px, 9vw, 36px);
    }

    .home-page .hero-copy h1 span{
        display:block;
    }
}

/* Quiet headings: plain page intro, emphasis stays on the clocks and controls. */
.hero-copy{
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.clock-card-heading h2{
    color:#c8ced7;
    font-size:18px;
    font-weight:650;
    letter-spacing:-.02em;
}

@media (min-width:901px){
    .hero-copy{
        padding:10px 4px 12px;
    }

    .hero-copy h1{
        font-size:22px;
    }

    .clock-card-heading{
        margin-bottom:12px;
    }
}

@media (max-width:900px){
    .hero-copy{
        padding:8px 2px 10px;
    }
}

/* Align the desktop card bottoms and strengthen the standalone intro. */
@media (min-width:901px){
    .page{
        grid-template-rows:auto minmax(0, 1fr) auto;
    }

    .hero-copy h1{
        font-size:34px;
        line-height:1.08;
        letter-spacing:-.04em;
    }

    .hero-copy .intro{
        max-width:470px;
        margin-top:8px;
        color:#aeb6c3;
        font-size:13px;
        line-height:1.5;
    }

    .creator,
    .home-page .creator,
    .has-event .creator{
        height:auto !important;
        align-self:stretch !important;
    }
}

@media (max-width:900px){
    .hero-copy{
        max-width:none;
        margin:0;
        padding:18px;
    }

    .hero-copy h1{
        font-size:23px;
    }

    .home-page .hero-copy,
    .has-event .hero-copy{
        grid-column:1;
        grid-row:1;
    }

    .home-page .creator{
        grid-row:2;
    }

    .home-page .clock-card{
        grid-row:3;
    }

    .has-event .clock-card{
        grid-row:2;
    }

    .has-event .creator{
        grid-row:3;
    }
}

/* Final desktop composition: title lives inside the creator panel. */
.creator .hero-copy{
    display:block;
    max-width:none;
    margin:0 0 18px;
    padding:0;
    text-align:left;
}

.creator .hero-copy .eyebrow{
    display:none;
}

.creator .hero-copy h1{
    max-width:420px;
    margin:0;
    color:var(--text);
    font-size:24px;
    font-weight:720;
    line-height:1.12;
    letter-spacing:-.035em;
}

.creator .hero-copy .intro{
    max-width:440px;
    margin:7px 0 0;
    font-size:12px;
    line-height:1.45;
}

@media (min-width:901px){
    .page{
        grid-template-columns:minmax(360px, .82fr) minmax(500px, 1.18fr);
        grid-template-rows:auto auto;
        align-items:stretch;
    }

    .creator,
    .home-page .creator,
    .has-event .creator{
        grid-column:1;
        grid-row:1;
        min-height:100%;
        margin-top:0;
        display:flex;
        flex-direction:column;
    }

    .clock-card,
    .home-page .clock-card,
    .has-event .clock-card{
        grid-column:2;
        grid-row:1;
        min-height:100%;
        align-self:stretch;
    }

    .creator .hero-copy{
        margin-bottom:auto;
        padding-bottom:22px;
    }

    .creator > .section-heading{
        margin-top:0;
    }

    .examples-card{
        grid-column:1 / -1;
        grid-row:2;
    }
}

@media (max-width:900px){
    .creator .hero-copy{
        margin-bottom:16px;
        padding-bottom:0;
    }

    .creator .hero-copy h1{
        font-size:23px;
    }
}

/* Desktop hierarchy: compact intro/creator column, dominant time panel. */
@media (min-width:901px){
    .page{
        grid-template-columns:minmax(360px, .82fr) minmax(500px, 1.18fr);
        grid-template-rows:auto auto auto;
        column-gap:18px;
        row-gap:14px;
        align-items:start;
    }

    .hero-copy{
        grid-column:1;
        grid-row:1;
        max-width:500px;
        padding:8px 14px 10px;
        align-self:end;
    }

    .hero-copy h1{
        max-width:460px;
        font-size:clamp(34px, 3.6vw, 48px);
        line-height:1.02;
        letter-spacing:-.045em;
    }

    .hero-copy .intro{
        max-width:450px;
        margin-top:10px;
        font-size:14px;
        line-height:1.5;
    }

    .creator,
    .home-page .creator,
    .has-event .creator{
        grid-column:1;
        grid-row:2;
        margin-top:8px;
        padding:20px 22px;
    }

    .clock-card,
    .home-page .clock-card,
    .has-event .clock-card{
        grid-column:2;
        grid-row:1 / 3;
        align-self:end;
    }

    .examples-card{
        grid-column:1 / -1;
        grid-row:3;
    }
}

.creator > .section-heading .eyebrow,
.clock-card-heading .eyebrow{
    display:none;
}

.creator > .section-heading,
.clock-card-heading{
    margin-bottom:14px;
}

.creator > .section-heading h2{
    font-size:21px;
}

.creator > .section-heading .section-description{
    font-size:12px;
}

@media (max-width:390px){
    .creator-guide{ display:none; }

    .clock-card{ padding-inline:14px; }
    .clock-card-heading{ padding-inline:4px; }
    .date{ font-size:10px; }
    .location{ font-size:11px; }
}

/* Compact product layout */
:root{
    --bg:#0e1013;
    --surface:#15181d;
    --surface-2:#191d23;
    --field:#101318;
    --line:#292f38;
    --text:#f3f4f6;
    --muted:#9ba3af;
    --soft:#69727f;
    --accent:#67dfbf;
    --accent-dark:#08231b;
    --blue:#a7c8ff;
    --radius:16px;
}

.topbar{
    width:min(1040px, 100%);
    min-height:52px;
    padding:14px 20px;
}

.page{
    width:min(1040px, 100%);
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    align-items:start;
    gap:16px;
    padding:22px 20px 44px;
}

.hero-copy{
    max-width:680px;
    padding-bottom:18px;
}

.hero-copy .eyebrow{ display:none; }

h1{
    max-width:650px;
    font-size:clamp(34px, 3.8vw, 46px);
    font-weight:750;
    line-height:1;
    letter-spacing:-.05em;
}

.intro{
    max-width:610px;
    margin-top:10px;
    font-size:15px;
    line-height:1.45;
}

.creator,
.clock-card{
    align-self:start;
    border-color:var(--line);
    border-radius:var(--radius);
    padding:24px;
}

.creator{
    display:block;
}

.section-heading,
.clock-card-heading{
    margin-bottom:20px;
}

.section-heading .eyebrow,
.clock-card-heading .eyebrow{
    margin-bottom:5px;
    font-size:9px;
}

.section-heading h2,
.clock-card-heading h2{
    font-size:21px;
    letter-spacing:-.025em;
}

.section-description{
    margin-top:5px;
    font-size:13px;
}

.creator-form{
    gap:13px 10px;
}

.country-select-button,
.date-picker-button,
.time-picker-button{
    min-height:48px;
    border-radius:10px;
}

.creator-actions{
    grid-template-columns:120px minmax(0, 1fr);
    gap:8px;
}

.creator-actions button{
    min-height:48px;
    border-radius:10px;
}

.creator-guide{
    display:none;
}

.clock-card{
    grid-template-columns:minmax(0, 1fr) 36px minmax(0, 1fr);
    gap:18px 4px;
}

.clock-card-heading{ padding-bottom:0; }

.time{
    min-height:auto;
    font-size:clamp(34px, 3.7vw, 46px);
    font-weight:700;
}

.time-period{
    font-size:.38em;
}

.date{
    margin-top:7px;
    font-size:12px;
}

.location{
    font-size:12px;
}

.timezone-control{
    gap:10px;
    padding-top:17px;
}

.timezone-control-heading{
    display:flex;
    align-items:baseline;
    gap:6px;
}

.timezone-control-heading strong{
    font-size:12px;
}

.timezone-control-heading span{
    color:var(--soft);
    font-size:11px;
}

.timezone-control .country-select-button{
    min-height:44px;
}

.current-time-link{
    min-height:42px;
    padding:8px 10px;
    font-size:10px;
}

.countdown-inline{
    gap:7px;
}

.countdown-title{
    font-size:12px;
}

.countdown-grid-compact div{
    min-height:52px;
}

.countdown-grid-compact strong{
    font-size:18px;
}

.examples-card{
    grid-template-columns:auto minmax(280px, 1fr);
    gap:24px;
    margin-top:0;
    padding:14px 16px;
    border-radius:14px;
}

.examples-card .section-heading{
    display:flex;
    align-items:center;
    gap:8px;
}

.examples-card .section-heading .eyebrow{
    margin:0;
}

.examples-card .section-heading h2{
    font-size:13px;
    white-space:nowrap;
}

.examples-mobile-accordion summary{
    min-height:42px;
    font-size:11px;
}

@media (min-width:901px){
    .home-page .creator,
    .home-page .clock-card,
    .has-event .creator,
    .has-event .clock-card{
        grid-row:2;
    }
}

@media (max-width:900px){
    .page{
        grid-template-columns:minmax(0, 1fr);
        max-width:680px;
        padding-top:18px;
    }

    .hero-copy{
        padding-bottom:12px;
    }
}

@media (max-width:600px){
    .topbar{
        min-height:50px;
        padding:12px 16px;
    }

    .page{
        padding:16px 12px 36px;
    }

    h1{
        font-size:clamp(32px, 9vw, 40px);
    }

    .intro{
        margin-top:8px;
        font-size:13px;
        line-height:1.45;
    }

    .creator,
    .clock-card{
        padding:18px;
    }

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

    #createCopyButton{
        grid-row:1;
    }

    .clock-card{
        grid-template-columns:minmax(0, 1fr) 28px minmax(0, 1fr);
        gap:16px 2px;
    }

    .time{
        font-size:clamp(26px, 9vw, 38px);
    }

    .timezone-control-heading{
        display:block;
    }

    .examples-card{
        grid-template-columns:1fr;
        gap:10px;
    }

    .examples-card .section-heading{
        margin:0;
    }
}

/* Make the two converted times read as distinct answers. */
.clock-card{
    gap:14px 6px;
}

.clock-card .clock-column{
    min-height:142px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:15px 10px;
    border:1px solid rgba(103,223,191,.2);
    border-radius:12px;
    background:rgba(103,223,191,.045);
}

.clock-card .clock-column.route-only{
    border-color:rgba(135,174,255,.2);
    background:rgba(91,130,210,.06);
}

.clock-card .date-label{
    margin-bottom:12px;
    color:var(--muted);
    font-size:9px;
    letter-spacing:.09em;
}

.clock-card .time-difference-column{
    position:relative;
    z-index:2;
}

@media (max-width:600px){
    .clock-card .clock-column{
        min-height:126px;
        padding:12px 5px;
    }

    .clock-card .date-label{
        max-width:90px;
        min-height:26px;
        display:flex;
        align-items:center;
        justify-content:center;
        line-height:1.3;
    }
}

/* Color pass */
:root{
    --bg:#0c1019;
    --surface:#151a25;
    --surface-2:#1b2130;
    --field:#101521;
    --line:#30394b;
    --text:#f7f8fc;
    --muted:#a9b2c3;
    --soft:#748096;
    --accent:#63e6be;
    --accent-dark:#06251b;
    --blue:#8ab4ff;
    --purple:#b69cff;
    --pink:#ff91bd;
    --yellow:#ffd479;
}

body{
    background:
        radial-gradient(circle at 12% 8%, rgba(99,230,190,.12), transparent 26rem),
        radial-gradient(circle at 88% 12%, rgba(138,180,255,.13), transparent 30rem),
        radial-gradient(circle at 55% 92%, rgba(182,156,255,.08), transparent 28rem),
        var(--bg);
}

.brand{
    background:linear-gradient(90deg, var(--text), #bfffee);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

.topbar-links a:hover{ color:var(--accent); }

h1{
    background:linear-gradient(105deg, #fff 5%, #c9fff0 46%, #bdccff 100%);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

.creator,
.clock-card{
    background:
        linear-gradient(145deg, rgba(99,230,190,.035), transparent 42%),
        var(--surface);
}

.creator{
    border-color:rgba(99,230,190,.22);
}

.clock-card{
    border-color:rgba(138,180,255,.24);
    background:
        linear-gradient(145deg, rgba(138,180,255,.05), transparent 45%),
        var(--surface);
}

.creator .eyebrow{ color:var(--accent); }
.clock-card .eyebrow{ color:var(--blue); }

.country-select-button,
.date-picker-button,
.time-picker-button{
    background:linear-gradient(180deg, #121927, #0f141e);
}

.country-select-button:hover,
.date-picker-button:hover,
.time-picker-button:hover,
.country-select-button:focus-visible,
.date-picker-button:focus-visible,
.time-picker-button:focus-visible{
    border-color:var(--accent);
    background:rgba(99,230,190,.055);
}

#createCopyButton,
.calendar-download-button,
.picker-actions button:last-child{
    background:linear-gradient(105deg, #61e4bc, #73dfd7);
    box-shadow:0 8px 24px rgba(99,230,190,.14);
}

#createCopyButton:hover,
.calendar-download-button:hover,
.picker-actions button:last-child:hover{
    background:linear-gradient(105deg, #7aebca, #8ae8e1);
}

.calendar-button{
    border-color:rgba(182,156,255,.28) !important;
    background:rgba(182,156,255,.055);
    color:#d5c8ff;
}

.calendar-button:hover{
    border-color:rgba(182,156,255,.55) !important;
    background:rgba(182,156,255,.11);
}

.link-note a,
.current-time-link a{
    color:var(--accent);
}

.clock-card .clock-column{
    border-color:rgba(99,230,190,.35);
    background:
        radial-gradient(circle at 50% 0, rgba(99,230,190,.13), transparent 80%),
        rgba(99,230,190,.045);
}

.clock-card .clock-column.route-only{
    border-color:rgba(138,180,255,.38);
    background:
        radial-gradient(circle at 50% 0, rgba(138,180,255,.14), transparent 80%),
        rgba(91,130,210,.065);
}

.clock-card .clock-column:first-of-type .date-label{
    color:var(--accent);
}

.clock-card .clock-column.route-only .date-label{
    color:var(--blue);
}

.time-difference{
    border:1px solid rgba(182,156,255,.25);
    background:rgba(182,156,255,.12);
    color:#d3c5ff;
}

.location{ color:#a9c8ff; }

.utc-offset{
    border-color:rgba(138,180,255,.3);
    background:rgba(138,180,255,.1);
}

.timezone-control{
    border-top-color:rgba(138,180,255,.14);
}

.current-time-link{
    border:1px solid rgba(99,230,190,.1) !important;
    background:rgba(8,17,23,.58) !important;
}

.current-time-link button{
    border-color:rgba(99,230,190,.4);
    background:rgba(99,230,190,.1);
}

.countdown-grid-compact div:nth-child(1){
    border-color:rgba(182,156,255,.16);
}

.countdown-grid-compact div:nth-child(2){
    border-color:rgba(138,180,255,.16);
}

.countdown-grid-compact div:nth-child(3){
    border-color:rgba(99,230,190,.16);
}

.countdown-grid-compact div:nth-child(4){
    border-color:rgba(255,145,189,.16);
}

.countdown-grid-compact div:nth-child(1) strong{ color:#d4c8ff; }
.countdown-grid-compact div:nth-child(2) strong{ color:#b6d0ff; }
.countdown-grid-compact div:nth-child(3) strong{ color:#9af0d7; }
.countdown-grid-compact div:nth-child(4) strong{ color:#ffb2d0; }

.examples-card{
    border-color:rgba(182,156,255,.16);
    background:rgba(18,22,32,.55);
}

.examples-card .eyebrow{ color:var(--purple); }

.examples-mobile-arrow{ color:var(--purple); }

.install-prompt{
    border-color:rgba(138,180,255,.3);
    background:linear-gradient(135deg, #192335, #18202c);
}

/* Keep the canvas quiet; reserve color for content and actions. */
body{
    background:#0d1118;
}

h1{
    background:none;
    color:var(--text);
}

.brand{
    background:none;
    color:var(--text);
}

.creator,
.clock-card{
    background:var(--surface);
}

.creator{
    border-color:rgba(99,230,190,.4);
    box-shadow:inset 3px 0 0 rgba(99,230,190,.75);
}

.clock-card{
    border-color:rgba(138,180,255,.42);
    box-shadow:inset 3px 0 0 rgba(138,180,255,.78);
}

.section-heading,
.clock-card-heading{
    position:relative;
    padding-left:13px;
}

.section-heading::before,
.clock-card-heading::before{
    content:"";
    position:absolute;
    top:2px;
    bottom:2px;
    left:0;
    width:3px;
    border-radius:99px;
    background:var(--accent);
}

.clock-card-heading::before{
    background:var(--blue);
}

.country-select-button,
.date-picker-button,
.time-picker-button{
    border-color:#354156;
    background:#111722;
}

#createCopyButton,
.calendar-download-button,
.picker-actions button:last-child{
    border:1px solid rgba(160,255,231,.55);
    background:#63e6be;
    box-shadow:0 7px 18px rgba(99,230,190,.18);
}

#createCopyButton:hover,
.calendar-download-button:hover,
.picker-actions button:last-child:hover{
    background:#83efd1;
    box-shadow:0 9px 24px rgba(99,230,190,.26);
    transform:translateY(-1px);
}

.calendar-button{
    border-color:rgba(182,156,255,.55) !important;
    background:#211d31;
    color:#d8ccff;
}

.calendar-button:hover{
    border-color:#b69cff !important;
    background:#2a2340;
    transform:translateY(-1px);
}

.current-time-link button{
    border-color:rgba(99,230,190,.58);
    background:#17342f;
    color:#8ff0d4;
}

.examples-card{
    background:var(--surface);
}

button{
    transition:
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        color .18s ease,
        transform .18s ease;
}

/* Final hierarchy: neutral structure, color only where it guides action. */
:root{
    --bg:#0d0f13;
    --surface:#16191f;
    --field:#101318;
    --line:#2b3039;
    --text:#f4f5f7;
    --muted:#a4acb8;
    --soft:#707987;
    --accent:#63dfbd;
    --accent-dark:#08251d;
    --blue:#8eb8ff;
}

body{
    background:
        radial-gradient(circle at 50% -18rem, rgba(105,126,158,.11), transparent 34rem),
        var(--bg);
}

.creator,
.clock-card,
.examples-card{
    border-color:var(--line);
    background:var(--surface);
    box-shadow:0 14px 40px rgba(0,0,0,.12);
}

.creator,
.clock-card{
    box-shadow:0 14px 40px rgba(0,0,0,.12);
}

.section-heading,
.clock-card-heading{
    padding-left:0;
}

.section-heading::before,
.clock-card-heading::before{
    display:none;
}

.creator .eyebrow{
    color:var(--accent);
}

.clock-card .eyebrow{
    color:var(--blue);
}

.country-select-button,
.date-picker-button,
.time-picker-button{
    border-color:#303641;
    background:var(--field);
}

.country-select-button:hover,
.date-picker-button:hover,
.time-picker-button:hover,
.country-select-button:focus-visible,
.date-picker-button:focus-visible,
.time-picker-button:focus-visible{
    border-color:#526174;
    background:#131820;
    box-shadow:0 0 0 3px rgba(142,184,255,.08);
}

#createCopyButton,
.calendar-download-button,
.picker-actions button:last-child{
    border-color:transparent;
    background:var(--accent);
    color:var(--accent-dark);
    box-shadow:0 8px 22px rgba(99,223,189,.16);
}

#createCopyButton:hover,
.calendar-download-button:hover,
.picker-actions button:last-child:hover{
    background:#7ae7c8;
    box-shadow:0 10px 26px rgba(99,223,189,.22);
}

.calendar-button{
    border-color:#343a45 !important;
    background:transparent;
    color:#c7cdd6;
}

.calendar-button:hover{
    border-color:#596273 !important;
    background:rgba(255,255,255,.035);
    color:var(--text);
}

.clock-card .clock-column{
    border-color:rgba(99,223,189,.22);
    background:rgba(99,223,189,.035);
}

.clock-card .clock-column.route-only{
    border-color:rgba(142,184,255,.25);
    background:rgba(142,184,255,.045);
}

.clock-card .clock-column:first-of-type .date-label{
    color:#8ce8cf;
}

.clock-card .clock-column.route-only .date-label{
    color:#a9c8ff;
}

.time-difference{
    border-color:#343b46;
    background:#20252d;
    color:#c3cad4;
}

.link-note a,
.current-time-link a{
    color:var(--accent);
}

.current-time-link{
    border-color:var(--line) !important;
    background:var(--field) !important;
}

.current-time-link button{
    border-color:rgba(99,223,189,.34);
    background:rgba(99,223,189,.08);
    color:var(--accent);
}

.countdown-grid-compact div,
.countdown-grid-compact div:nth-child(1),
.countdown-grid-compact div:nth-child(2),
.countdown-grid-compact div:nth-child(3),
.countdown-grid-compact div:nth-child(4){
    border-color:var(--line-soft);
    background:var(--field);
}

.countdown-grid-compact div strong,
.countdown-grid-compact div:nth-child(1) strong,
.countdown-grid-compact div:nth-child(2) strong,
.countdown-grid-compact div:nth-child(3) strong,
.countdown-grid-compact div:nth-child(4) strong{
    color:var(--text);
}

.countdown-grid-compact div:nth-child(3) strong{
    color:var(--accent);
}

/* Final share layout: one compact horizontal row. */
.current-time-link{
    grid-template-columns:32px auto minmax(0, 1fr) auto;
    min-height:48px;
    padding:6px 9px;
    gap:9px;
    align-items:center;
}

.current-time-icon{
    width:32px;
    height:32px;
}

.current-time-copy{
    display:block;
    white-space:nowrap;
}

.current-time-copy strong{
    font-size:11px;
}

.current-time-copy small{
    display:none;
}

.current-time-link a{
    grid-column:3;
    grid-row:1;
    min-width:0;
    padding:0;
    border:0;
    background:transparent;
    font-size:9px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.current-time-link button{
    grid-column:4;
    grid-row:1;
    min-width:74px;
    min-height:32px;
    padding-inline:10px;
}

@media (max-width:600px){
    .current-time-link{
        grid-template-columns:30px auto minmax(36px, 1fr) auto;
        min-height:46px;
        padding:6px 8px;
        gap:7px;
    }

    .current-time-icon{
        width:30px;
        height:30px;
    }

    .current-time-link button{
        min-width:66px;
        padding-inline:8px;
    }
}

/* Final two-card left stack: natural heights, even spacing, matched right panel. */
@media (min-width:901px){
    .page{
        grid-template-columns:minmax(360px, .82fr) minmax(500px, 1.18fr);
        grid-template-rows:auto auto auto;
        gap:12px 18px;
        align-items:start;
    }

    .hero-copy{
        grid-column:1;
        grid-row:1;
        width:100%;
        max-width:none;
        min-height:0;
        margin:0;
        padding:17px 20px;
        align-self:start;
    }

    .hero-copy h1{
        max-width:430px;
        margin:0;
        font-size:22px;
        font-weight:720;
        line-height:1.15;
        letter-spacing:-.03em;
    }

    .hero-copy .intro{
        max-width:440px;
        margin:6px 0 0;
        font-size:11px;
        line-height:1.4;
    }

    .creator,
    .home-page .creator,
    .has-event .creator{
        grid-column:1;
        grid-row:2;
        min-height:0;
        height:auto;
        margin:0;
        align-self:start;
    }

    .clock-card,
    .home-page .clock-card,
    .has-event .clock-card{
        grid-column:2;
        grid-row:1 / 3;
        min-height:100%;
        height:100%;
        align-self:stretch;
    }

    .examples-card{
        grid-column:1 / -1;
        grid-row:3;
    }
}

/* Refined meeting controls: larger recognizable icons and cleaner affordances. */
.creator-form{
    gap:18px 12px;
}

.creator-form label{
    gap:8px;
}

.creator-form label > span{
    gap:10px;
    min-height:32px;
    font-size:12px;
    font-weight:750;
}

.creator-form label > span::before{
    width:32px;
    height:32px;
    flex-basis:32px;
    border-color:#3b4554;
    border-radius:10px;
    background-color:#232a34 !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:17px 17px !important;
    color:transparent !important;
    font-size:0;
}

.creator-form label:nth-of-type(1) > span::before{
    content:"";
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b9c7da' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E") !important;
}

.creator-form label:nth-of-type(2) > span::before{
    content:"";
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b9c7da' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") !important;
}

.creator-form label:nth-of-type(3) > span::before{
    content:"";
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b9c7da' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") !important;
}

.creator-form label:nth-of-type(4) > span::before{
    content:"";
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b9c7da' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") !important;
}

.creator-form .country-select-button,
.creator-form .date-picker-button,
.creator-form .time-picker-button{
    min-height:62px;
    padding:0 52px 0 17px;
    border-color:#3c4655;
    border-radius:13px;
}

.creator-form .country-select-button span,
.creator-form .date-picker-button strong,
.creator-form .time-picker-button strong{
    font-size:15px;
    font-weight:720;
}

.creator-form .country-select-button::before,
.creator-form .date-picker-button::before,
.creator-form .time-picker-button::before,
.creator-form label:nth-of-type(1) .country-select-button::before,
.creator-form label:nth-of-type(2) .country-select-button::before{
    content:none !important;
}

.creator-form .country-select-button::after,
.creator-form .date-picker-button::after,
.creator-form .time-picker-button::after{
    content:"" !important;
    position:absolute;
    top:50%;
    right:18px;
    width:9px;
    height:9px;
    display:block !important;
    flex:0 0 auto;
    margin:0;
    padding:0;
    border:0;
    border-right:2px solid #9dabbd;
    border-bottom:2px solid #9dabbd;
    border-radius:0;
    background:transparent;
    transform:translateY(-70%) rotate(45deg);
}

.creator-form .country-select-button:hover::after,
.creator-form .date-picker-button:hover::after,
.creator-form .time-picker-button:hover::after,
.creator-form .country-select-button:focus-visible::after,
.creator-form .date-picker-button:focus-visible::after,
.creator-form .time-picker-button:focus-visible::after{
    border-color:#d9e5f5;
}

.creator-form .country-select-button:hover,
.creator-form .date-picker-button:hover,
.creator-form .time-picker-button:hover{
    transform:translateY(-1px);
}

.timezone-control-heading{
    gap:12px;
}

.timezone-control-icon{
    width:40px;
    height:40px;
    flex-basis:40px;
    border-radius:12px;
    color:transparent;
    font-size:0;
    background:
        #222832
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b9c7da' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18'/%3E%3C/svg%3E")
        center / 21px 21px no-repeat;
}

.timezone-control-heading .timezone-control-copy strong{
    font-size:14px;
}

.timezone-control-heading .timezone-control-copy > span{
    font-size:11px;
}

@media (max-width:600px){
    .creator-form{
        gap:16px;
    }

    .creator-form .country-select-button,
    .creator-form .date-picker-button,
    .creator-form .time-picker-button{
        min-height:58px;
        padding-right:48px;
    }
}

/* Keep paired preview boxes symmetrical and preserve the complete meeting date. */
.clock-card{
    grid-template-columns:minmax(0, 1fr) 36px minmax(0, 1fr);
}

.clock-card .clock-column{
    width:100%;
    min-height:150px;
    align-self:stretch;
}

.clock-card .clock-column.route-only{
    width:100%;
}

.creator-form .date-picker-button{
    padding-right:42px;
}

.creator-form .date-picker-button strong{
    overflow:visible;
    font-size:14px;
    text-overflow:clip;
}

.creator-form .date-picker-button::after{
    right:16px;
}

@media (max-width:600px){
    .clock-card{
        grid-template-columns:minmax(0, 1fr) 28px minmax(0, 1fr);
    }

    .clock-card .clock-column{
        min-height:142px;
    }

    .creator-form .date-picker-button{
        padding-right:46px;
    }

    .creator-form .date-picker-button strong{
        font-size:15px;
    }
}

/* Current-time sharing stays available on home, location, and event pages. */
.current-time-link{
    grid-template-columns:38px minmax(0, 1fr) auto;
    min-height:78px;
    padding:11px 12px;
    gap:7px 11px;
    border-color:#34413e !important;
    background:#141918 !important;
}

.current-time-icon{
    width:38px;
    height:38px;
    border:1px solid #35534b;
    border-radius:10px;
    background:#193029;
    font-size:17px;
}

.current-time-copy strong{
    font-size:13px;
    line-height:1.2;
}

.current-time-copy small{
    margin-top:2px;
    color:#82908c;
    font-size:10px;
}

.current-time-link a{
    grid-column:2 / 3;
    grid-row:2;
    display:inline-flex;
    align-items:center;
    min-width:0;
    min-height:auto;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:#8edfc8;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.current-time-link a:hover,
.current-time-link a:focus-visible{
    background:transparent;
    color:#b7f2e1;
    text-decoration:underline;
}

.current-time-link button{
    grid-column:3;
    grid-row:1 / 3;
    align-self:center;
    min-height:38px;
    min-width:84px;
    padding:0 14px;
    border:1px solid transparent;
    border-radius:9px;
    font-size:11px;
}

@media (max-width:600px){
    .current-time-link{
        grid-template-columns:38px minmax(0, 1fr) auto;
        gap:9px 10px;
        padding:11px;
    }

    .current-time-link a{
        grid-column:2 / 4;
        grid-row:2;
    }

    .current-time-link button{
        grid-column:3;
        grid-row:1;
        width:auto;
    }
}

/* Compact layout pass: preserve hierarchy while reducing vertical footprint. */
.page{
    gap:16px;
    padding-top:34px;
    padding-bottom:46px;
}

.hero-copy{
    padding-bottom:20px;
}

.intro{
    margin-top:12px;
}

.creator,
.clock-card{
    padding:22px 24px;
}

.section-heading,
.clock-card-heading{
    margin-bottom:18px;
}

.section-description{
    margin-top:5px;
}

.creator-form{
    gap:13px 12px;
}

.creator-form label{
    gap:6px;
}

.creator-form label > span{
    min-height:28px;
}

.creator-form label > span::before{
    width:28px;
    height:28px;
    flex-basis:28px;
    border-radius:9px;
    background-size:15px 15px !important;
}

.creator-form .country-select-button,
.creator-form .date-picker-button,
.creator-form .time-picker-button{
    min-height:54px;
}

.creator-actions button{
    min-height:46px;
}

.clock-card{
    gap:12px 6px;
}

.clock-card .clock-column{
    min-height:132px;
    padding-block:12px;
}

.clock-card .date-label{
    margin-bottom:8px;
}

.timezone-control{
    gap:9px 10px;
    padding:12px 14px;
}

.timezone-control-heading{
    margin-bottom:0;
}

.timezone-control-icon{
    width:36px;
    height:36px;
    flex-basis:36px;
    background-size:18px 18px;
}

.timezone-control .country-select-button{
    min-height:42px;
}

.current-time-link{
    min-height:68px;
    padding:9px 11px;
}

.countdown-inline{
    gap:7px;
}

.countdown-grid-compact div{
    min-height:48px;
}

.examples-card{
    margin-top:0;
    padding-block:12px;
}

@media (max-width:900px){
    .page{
        gap:13px;
        padding-top:14px;
    }
}

@media (max-width:600px){
    .page{
        gap:12px;
        padding-top:12px;
        padding-bottom:28px;
    }

    .hero-copy{
        padding-bottom:8px;
    }

    .creator,
    .clock-card{
        padding:16px 18px;
    }

    .section-heading,
    .clock-card-heading{
        margin-bottom:16px;
    }

    .creator-form{
        gap:13px;
    }

    .creator-form .country-select-button,
    .creator-form .date-picker-button,
    .creator-form .time-picker-button{
        min-height:52px;
    }

    .clock-card .clock-column{
        min-height:124px;
        padding-block:10px;
    }

    .timezone-control{
        padding:11px 12px;
    }
}

/* Unified icon system and a slimmer current-time utility. */
.creator-form label > span::before,
.timezone-control-icon,
.current-time-icon{
    border:1px solid #3b4655;
    background-color:#202731 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.creator-form label > span::before{
    width:27px;
    height:27px;
    flex-basis:27px;
    border-radius:8px;
    background-size:15px 15px !important;
}

.timezone-control-icon{
    width:34px;
    height:34px;
    flex-basis:34px;
    border-radius:10px;
    background:
        #202731
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b9c7da' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2M3 12h2M19 12h2'/%3E%3C/svg%3E")
        center / 18px 18px no-repeat !important;
}

.current-time-icon{
    width:34px;
    height:34px;
    border-radius:10px;
    color:transparent;
    font-size:0;
    background:
        #193029
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238de4cd' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E")
        center / 17px 17px no-repeat !important;
}

.calendar-button span{
    width:20px;
    height:20px;
    display:inline-grid;
    margin-right:7px;
    place-items:center;
    border:1px solid #3b4655;
    border-radius:6px;
    background:#202731;
    color:transparent;
    font-size:0;
    vertical-align:middle;
}

.calendar-button span::before{
    content:"";
    width:12px;
    height:12px;
    display:block;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23c7d1df' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

.current-time-link{
    grid-template-columns:34px minmax(0, 1fr) auto;
    min-height:58px;
    padding:7px 10px;
    gap:3px 10px;
}

.current-time-copy{
    gap:0;
}

.current-time-copy strong{
    font-size:12px;
}

.current-time-copy small{
    margin-top:0;
    font-size:9px;
    line-height:1.25;
}

.current-time-link a{
    font-size:10px;
    line-height:1.2;
}

.current-time-link button{
    min-width:80px;
    min-height:34px;
    padding-inline:12px;
}

@media (max-width:600px){
    .current-time-link{
        grid-template-columns:34px minmax(0, 1fr) auto;
        min-height:62px;
        padding:8px 10px;
        gap:4px 9px;
    }
}

/* Lucide icon set: one stroke language across every primary control. */
.creator-form label > span::before{
    content:none !important;
    display:none !important;
}

.field-icon,
.timezone-control-icon svg,
.current-time-icon svg,
.calendar-button svg{
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.field-icon{
    width:27px;
    height:27px;
    flex:0 0 27px;
    padding:5px;
    border:1px solid #3b4655;
    border-radius:8px;
    background:#202731;
    color:#b9c7da;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.timezone-control-icon,
.current-time-icon{
    display:grid;
    place-items:center;
    background:#202731 !important;
}

.timezone-control-icon svg,
.current-time-icon svg{
    width:18px;
    height:18px;
    color:#b9c7da;
}

.current-time-icon{
    background:#193029 !important;
}

.current-time-icon svg{
    color:#8de4cd;
}

.calendar-button span{
    color:#c7d1df;
}

.calendar-button span::before{
    content:none;
    display:none;
}

.calendar-button svg{
    width:13px;
    height:13px;
}

.current-time-link{
    min-height:54px;
    padding:6px 10px;
    gap:2px 9px;
}

.current-time-copy small{
    display:none;
}

.current-time-link a{
    font-size:9px;
}

.current-time-link button{
    min-height:32px;
}

@media (max-width:600px){
    .current-time-link{
        min-height:58px;
        padding:7px 9px;
    }
}

.examples-card .eyebrow,
.examples-mobile-arrow{
    color:var(--soft);
}

.install-prompt{
    border-color:var(--line);
    background:#191e27;
}

/* Brighter interaction pass: color marks choices, actions, and helpful callouts. */
:root{
    --cyan:#62dff0;
    --purple:#b99cff;
    --pink:#ff91bd;
    --yellow:#ffd479;
}

body{
    background:
        radial-gradient(circle at 8% 4%, rgba(99,223,189,.12), transparent 25rem),
        radial-gradient(circle at 92% 7%, rgba(142,184,255,.12), transparent 28rem),
        radial-gradient(circle at 50% 100%, rgba(185,156,255,.07), transparent 30rem),
        var(--bg);
}

.brand{
    background:linear-gradient(100deg, #ffffff 15%, #9ff4dc 62%, #a9c8ff);
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

.creator{
    border-color:rgba(99,223,189,.24);
    background:
        linear-gradient(145deg, rgba(99,223,189,.055), transparent 38%),
        var(--surface);
}

.clock-card{
    border-color:rgba(142,184,255,.24);
    background:
        linear-gradient(145deg, rgba(142,184,255,.055), transparent 38%),
        var(--surface);
}

.section-heading h2{
    text-shadow:0 0 28px rgba(99,223,189,.11);
}

.clock-card-heading h2{
    text-shadow:0 0 28px rgba(142,184,255,.12);
}

.creator-form label > span{
    display:flex;
    align-items:center;
    gap:7px;
    color:#d9deea;
    font-size:12px;
}

.creator-form label > span::before{
    width:22px;
    height:22px;
    display:inline-grid;
    flex:0 0 22px;
    place-items:center;
    border-radius:7px;
    font-size:11px;
    font-weight:950;
}

.creator-form label:nth-of-type(1) > span::before{
    content:"●";
    background:rgba(99,223,189,.14);
    color:var(--accent);
}

.creator-form label:nth-of-type(2) > span::before{
    content:"⌁";
    background:rgba(98,223,240,.14);
    color:var(--cyan);
}

.creator-form label:nth-of-type(3) > span::before{
    content:"▦";
    background:rgba(185,156,255,.15);
    color:var(--purple);
}

.creator-form label:nth-of-type(4) > span::before{
    content:"◷";
    background:rgba(255,145,189,.14);
    color:var(--pink);
}

.creator-form .country-select-button,
.creator-form .date-picker-button,
.creator-form .time-picker-button{
    position:relative;
    min-height:58px;
    padding:0 82px 0 16px;
    border-width:1px;
    border-radius:14px;
    overflow:hidden;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.creator-form .country-select-button::before,
.creator-form .date-picker-button::before,
.creator-form .time-picker-button::before{
    content:"Choose";
    position:absolute;
    right:14px;
    top:50%;
    padding:4px 7px;
    border-radius:999px;
    font-size:8px;
    font-weight:950;
    letter-spacing:.09em;
    text-transform:uppercase;
    transform:translateY(-50%);
}

.creator-form .country-select-button::after{
    display:none;
}

.creator-form label:nth-of-type(1) .country-select-button{
    border-color:rgba(99,223,189,.38);
    background:linear-gradient(100deg, rgba(99,223,189,.095), rgba(16,19,24,.95) 56%);
}

.creator-form label:nth-of-type(1) .country-select-button::before{
    background:rgba(99,223,189,.14);
    color:#92efd5;
}

.creator-form label:nth-of-type(2) .country-select-button{
    border-color:rgba(98,223,240,.36);
    background:linear-gradient(100deg, rgba(98,223,240,.09), rgba(16,19,24,.95) 56%);
}

.creator-form label:nth-of-type(2) .country-select-button::before{
    background:rgba(98,223,240,.13);
    color:#9cebf5;
}

.creator-form .date-picker-button{
    border-color:rgba(185,156,255,.38);
    background:linear-gradient(100deg, rgba(185,156,255,.1), rgba(16,19,24,.95) 56%);
}

.creator-form .date-picker-button::before{
    background:rgba(185,156,255,.14);
    color:#d4c5ff;
}

.creator-form .time-picker-button{
    border-color:rgba(255,145,189,.36);
    background:linear-gradient(100deg, rgba(255,145,189,.095), rgba(16,19,24,.95) 56%);
}

.creator-form .time-picker-button::before{
    background:rgba(255,145,189,.13);
    color:#ffb6d2;
}

.creator-form label:nth-of-type(1) .country-select-button:hover,
.creator-form label:nth-of-type(1) .country-select-button:focus-visible{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(99,223,189,.11), 0 12px 24px rgba(0,0,0,.18);
}

.creator-form label:nth-of-type(2) .country-select-button:hover,
.creator-form label:nth-of-type(2) .country-select-button:focus-visible{
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(98,223,240,.1), 0 12px 24px rgba(0,0,0,.18);
}

.creator-form .date-picker-button:hover,
.creator-form .date-picker-button:focus-visible{
    border-color:var(--purple);
    box-shadow:0 0 0 3px rgba(185,156,255,.1), 0 12px 24px rgba(0,0,0,.18);
}

.creator-form .time-picker-button:hover,
.creator-form .time-picker-button:focus-visible{
    border-color:var(--pink);
    box-shadow:0 0 0 3px rgba(255,145,189,.1), 0 12px 24px rgba(0,0,0,.18);
}

.creator-form .country-select-button:hover,
.creator-form .date-picker-button:hover,
.creator-form .time-picker-button:hover{
    background-position:15% 50%;
    transform:translateY(-2px);
}

.timezone-control{
    margin-top:2px;
    padding:15px;
    border:1px solid rgba(185,156,255,.24);
    border-radius:14px;
    background:
        linear-gradient(120deg, rgba(185,156,255,.095), rgba(16,19,24,.76) 60%);
}

.timezone-control-heading{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 2px;
}

.timezone-control-icon{
    width:34px;
    height:34px;
    display:grid;
    flex:0 0 34px;
    place-items:center;
    border:1px solid rgba(185,156,255,.3);
    border-radius:11px;
    background:rgba(185,156,255,.13);
    color:#d5c9ff;
    font-size:18px;
    line-height:1;
}

.timezone-control-copy{
    display:grid;
    gap:1px;
}

.timezone-control-heading .timezone-control-copy strong{
    color:#f0ecff;
    font-size:13px;
}

.timezone-control-heading .timezone-control-copy > span{
    color:#a9a1be;
    font-size:11px;
}

.timezone-control label > span{
    color:#c9c1de;
}

.timezone-control .country-select-button{
    border-color:rgba(185,156,255,.25);
    background:rgba(14,15,21,.72);
}

.timezone-control .country-select-button:hover,
.timezone-control .country-select-button:focus-visible{
    border-color:var(--purple);
    box-shadow:0 0 0 3px rgba(185,156,255,.1);
}

.current-time-link{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(125px, auto) minmax(0, 1fr) auto;
    gap:11px;
    min-height:66px;
    padding:11px 12px;
    border:1px solid rgba(99,223,189,.28) !important;
    border-radius:14px;
    background:
        linear-gradient(105deg, rgba(99,223,189,.12), rgba(16,19,24,.82) 60%) !important;
}

.current-time-icon{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:rgba(99,223,189,.14);
    color:#9cf1d9;
    font-size:18px;
    font-weight:900;
}

.current-time-copy{
    display:grid;
    align-content:center;
    gap:1px;
}

.current-time-copy strong{
    color:#e9fff9;
    font-size:12px;
}

.current-time-copy small{
    color:#8ea59f;
    font-size:9px;
    line-height:1.35;
}

.current-time-link a{
    align-self:center;
    padding:7px 9px;
    border-radius:8px;
    background:rgba(0,0,0,.19);
    color:#a5f2dd;
    font-size:11px;
}

.current-time-link button{
    min-height:36px;
    align-self:center;
    padding:0 13px;
    border-radius:9px;
    background:var(--accent);
    color:var(--accent-dark);
}

.current-time-link button:hover{
    background:#7ae7c8;
    transform:translateY(-1px);
}

.countdown-grid-compact div:nth-child(1){
    border-color:rgba(185,156,255,.18);
    background:rgba(185,156,255,.045);
}

.countdown-grid-compact div:nth-child(2){
    border-color:rgba(142,184,255,.18);
    background:rgba(142,184,255,.045);
}

.countdown-grid-compact div:nth-child(3){
    border-color:rgba(99,223,189,.18);
    background:rgba(99,223,189,.045);
}

.countdown-grid-compact div:nth-child(4){
    border-color:rgba(255,145,189,.18);
    background:rgba(255,145,189,.045);
}

.countdown-grid-compact div:nth-child(1) strong{ color:#d7cbff; }
.countdown-grid-compact div:nth-child(2) strong{ color:#bad2ff; }
.countdown-grid-compact div:nth-child(3) strong{ color:#9beed6; }
.countdown-grid-compact div:nth-child(4) strong{ color:#ffb4d1; }

@media (max-width:600px){
    .creator-form{
        grid-template-columns:minmax(0, 1fr);
    }

    .creator-form > label,
    .creator-form .link-note,
    .creator-form .creator-actions{
        grid-column:1;
    }

    .creator-form .country-select-button,
    .creator-form .date-picker-button,
    .creator-form .time-picker-button{
        min-height:54px;
        padding-right:70px;
    }

    .creator-form .country-select-button::before,
    .creator-form .date-picker-button::before,
    .creator-form .time-picker-button::before{
        right:10px;
        padding-inline:6px;
    }

    .timezone-control{
        padding:13px;
    }

    .timezone-control-heading{
        display:flex;
    }

    .current-time-link{
        grid-template-columns:auto minmax(0, 1fr) auto;
    }

    .current-time-link a{
        grid-column:1 / -1;
        grid-row:2;
    }

    .current-time-link button{
        grid-column:3;
        grid-row:1;
    }
}

/* Professional palette: restrained color, clear controls, quiet supporting UI. */
:root{
    --accent:#67dcbc;
    --accent-dark:#09251e;
    --blue:#8db8ff;
    --control-accent:#789fe0;
}

body{
    background:
        radial-gradient(circle at 10% 0, rgba(70,110,150,.08), transparent 28rem),
        radial-gradient(circle at 92% 6%, rgba(79,103,145,.07), transparent 30rem),
        var(--bg);
}

.brand{
    background:none;
    color:var(--text);
}

.creator,
.clock-card{
    border-color:#303744;
    background:var(--surface);
}

.section-heading h2,
.clock-card-heading h2{
    text-shadow:none;
}

.creator .eyebrow{ color:#8adfc8; }
.clock-card .eyebrow{ color:#9bbcf1; }

.creator-form label > span{
    color:#c9d0db;
}

.creator-form label > span::before{
    border:1px solid #343c49;
    background:#222833 !important;
    color:#aeb9c8 !important;
}

.creator-form .country-select-button,
.creator-form .date-picker-button,
.creator-form .time-picker-button,
.creator-form label:nth-of-type(1) .country-select-button,
.creator-form label:nth-of-type(2) .country-select-button{
    border-color:#3a4454;
    background:linear-gradient(180deg, #151a22, #11151b);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.creator-form .country-select-button::before,
.creator-form .date-picker-button::before,
.creator-form .time-picker-button::before,
.creator-form label:nth-of-type(1) .country-select-button::before,
.creator-form label:nth-of-type(2) .country-select-button::before{
    border:1px solid #3b4656;
    background:#242b35;
    color:#b8c4d3;
}

.creator-form label:nth-of-type(1) .country-select-button:hover,
.creator-form label:nth-of-type(1) .country-select-button:focus-visible,
.creator-form label:nth-of-type(2) .country-select-button:hover,
.creator-form label:nth-of-type(2) .country-select-button:focus-visible,
.creator-form .date-picker-button:hover,
.creator-form .date-picker-button:focus-visible,
.creator-form .time-picker-button:hover,
.creator-form .time-picker-button:focus-visible{
    border-color:var(--control-accent);
    background:#171d26;
    box-shadow:0 0 0 3px rgba(120,159,224,.1), 0 10px 22px rgba(0,0,0,.16);
}

.timezone-control{
    border-color:#363d4a;
    background:#13171e;
}

.timezone-control-icon{
    border-color:#3d4655;
    background:#222832;
    color:#aebbd0;
}

.timezone-control-heading .timezone-control-copy strong{
    color:#e4e8ee;
}

.timezone-control-heading .timezone-control-copy > span{
    color:#8e98a7;
}

.timezone-control label > span{
    color:#b5becb;
}

.timezone-control .country-select-button{
    border-color:#3a4350;
    background:#0f1319;
}

.timezone-control .country-select-button:hover,
.timezone-control .country-select-button:focus-visible{
    border-color:var(--control-accent);
    box-shadow:0 0 0 3px rgba(120,159,224,.09);
}

.current-time-link{
    border-color:rgba(103,220,188,.24) !important;
    background:#141d1d !important;
}

.current-time-icon{
    background:rgba(103,220,188,.1);
    color:#8de4cd;
}

.current-time-copy strong{ color:#e7f6f2; }
.current-time-copy small{ color:#879b96; }

.current-time-link a{
    background:#101716;
    color:#93dfcc;
}

.countdown-grid-compact div,
.countdown-grid-compact div:nth-child(1),
.countdown-grid-compact div:nth-child(2),
.countdown-grid-compact div:nth-child(3),
.countdown-grid-compact div:nth-child(4){
    border-color:var(--line-soft);
    background:var(--field);
}

.countdown-grid-compact div strong,
.countdown-grid-compact div:nth-child(1) strong,
.countdown-grid-compact div:nth-child(2) strong,
.countdown-grid-compact div:nth-child(3) strong,
.countdown-grid-compact div:nth-child(4) strong{
    color:var(--text);
}

.countdown-grid-compact div:nth-child(3) strong{
    color:var(--accent);
}

/* Final share override: one compact horizontal row. */
.current-time-link{
    grid-template-columns:32px auto minmax(0, 1fr) auto;
    min-height:48px;
    padding:6px 9px;
    gap:9px;
    align-items:center;
}

.current-time-icon{
    width:32px;
    height:32px;
}

.current-time-copy{
    display:block;
    white-space:nowrap;
}

.current-time-copy strong{
    font-size:11px;
}

.current-time-copy small{
    display:none;
}

.current-time-link a{
    grid-column:3;
    grid-row:1;
    min-width:0;
    padding:0;
    border:0;
    background:transparent;
    font-size:9px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.current-time-link button{
    grid-column:4;
    grid-row:1;
    min-width:74px;
    min-height:32px;
    padding-inline:10px;
}

@media (max-width:600px){
    .current-time-link{
        grid-template-columns:30px auto minmax(36px, 1fr) auto;
        min-height:46px;
        padding:6px 8px;
        gap:7px;
    }

    .current-time-icon{
        width:30px;
        height:30px;
    }

    .current-time-link button{
        min-width:66px;
        padding-inline:8px;
    }
}

/* Final desktop stack override. */
@media (min-width:901px){
    .page{
        grid-template-columns:minmax(360px, .82fr) minmax(500px, 1.18fr);
        grid-template-rows:auto auto auto;
        gap:12px 18px;
        align-items:start;
    }

    .hero-copy{
        grid-column:1;
        grid-row:1;
        width:100%;
        max-width:none;
        min-height:0;
        margin:0;
        padding:17px 20px;
        align-self:start;
    }

    .hero-copy h1{
        max-width:430px;
        margin:0;
        font-size:22px;
        font-weight:720;
        line-height:1.15;
        letter-spacing:-.03em;
    }

    .hero-copy .intro{
        max-width:440px;
        margin:6px 0 0;
        font-size:11px;
        line-height:1.4;
    }

    .creator,
    .home-page .creator,
    .has-event .creator{
        grid-column:1;
        grid-row:2;
        min-height:0;
        height:auto;
        margin:0;
        align-self:start;
    }

    .clock-card,
    .home-page .clock-card,
    .has-event .clock-card{
        grid-column:2;
        grid-row:1 / 3;
        min-height:100%;
        height:100%;
        align-self:stretch;
    }

    .examples-card{
        grid-column:1 / -1;
        grid-row:3;
    }
}