/* Local fonts: consistent across browsers and devices; no external font requests. */
@font-face{font-family:"TCT UI";src:url("../fonts/TCT-UI-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"TCT UI";src:url("../fonts/TCT-UI-Semibold.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"TCT UI";src:url("../fonts/TCT-UI-Bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"TCT UI";src:url("../fonts/TCT-UI-Black.ttf") format("truetype");font-style:normal;font-weight:800 900;font-display:swap}
@font-face{font-family:"TCT Display";src:url("../fonts/TCT-Display.ttf") format("truetype");font-style:normal;font-weight:700;font-stretch:extra-condensed;font-display:swap}

/* The Clock Timer — shared interface polish */
:root{
  --site-bg:#05070a;
  --site-bg-elevated:#0c1016;
  --site-panel:#10151c;
  --site-panel-raised:#171e27;
  --site-control:#151c25;
  --site-control-hover:#202a36;
  --site-text:#f5f7fa;
  --site-muted:#929cab;
  --site-line:rgba(255,255,255,.11);
  --site-line-strong:rgba(255,255,255,.18);
  --site-accent:#e9283b;
  --site-accent-hover:#ca2032;
  --site-accent-soft:rgba(233,40,59,.13);
  --site-disabled-bg:#11161d;
  --site-disabled-text:#68717d;
  --site-shadow:0 24px 65px rgba(0,0,0,.34);
}
html[data-site-theme="light"]{
  --site-bg:#eef1f5;
  --site-bg-elevated:#f8fafc;
  --site-panel:#ffffff;
  --site-panel-raised:#f4f6f9;
  --site-control:#ffffff;
  --site-control-hover:#edf1f5;
  --site-text:#171b21;
  --site-muted:#68727f;
  --site-line:rgba(20,29,40,.13);
  --site-line-strong:rgba(20,29,40,.22);
  --site-accent:#e32636;
  --site-accent-hover:#c91f2d;
  --site-accent-soft:#fff0f1;
  --site-disabled-bg:#edf0f3;
  --site-disabled-text:#a1a8b1;
  --site-shadow:0 22px 55px rgba(24,34,48,.12);
}
button,a,input{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{
  outline:3px solid color-mix(in srgb,var(--site-accent) 34%,transparent);
  outline-offset:2px;
}
.site-header{transition:background .2s ease,border-color .2s ease,color .2s ease}
.site-header .all-tools-link,.site-header .all-tools,.site-header .icon-button,.site-header .icon-btn,.site-header .theme-toggle{
  transition:background .18s ease,border-color .18s ease,transform .18s ease,color .18s ease;
}
.site-header .all-tools-link:hover,.site-header .all-tools:hover,.site-header .icon-button:hover,.site-header .icon-btn:hover,.site-header .theme-toggle:hover{
  transform:translateY(-1px);
}
button:disabled{cursor:not-allowed!important}
kbd,.keycap{
  display:inline-grid;place-items:center;min-width:30px;min-height:29px;padding:4px 8px;
  border:1px solid var(--site-line-strong);border-bottom-width:3px;border-radius:7px;
  background:linear-gradient(180deg,var(--site-panel-raised),var(--site-control));
  color:var(--site-text);box-shadow:0 5px 12px rgba(0,0,0,.13);
  font-size:.72rem;font-weight:800;line-height:1;
}
@media(max-width:520px){
  .site-header .all-tools-link,.site-header .all-tools{padding-inline:10px}
}

/* ==================================================
   RESPONSIVE ADVERTISING POSITIONS
   Replace the placeholder inside each .ad-slot with
   the responsive AdSense unit supplied by Google.
================================================== */
.ad-slot {
  width: min(970px, 100%);
  min-height: 120px;
  margin: clamp(42px, 7vw, 72px) auto;
  padding: 14px;
  display: grid;
  place-items: center;
  position: relative;
  clear: both;
  border: 1px solid var(--site-border, rgba(255,255,255,.10));
  border-radius: 18px;
  background: color-mix(in srgb, var(--site-panel, #10151c) 72%, transparent);
  overflow: hidden;
}
.ad-slot::before {
  content: "Advertisement";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--site-muted, #8f98a5);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}
.ad-slot__placeholder {
  width: 100%;
  min-height: 90px;
  display: grid;
  place-items: center;
  color: var(--site-muted, #8f98a5);
  font-size: .72rem;
  text-align: center;
  opacity: .55;
}
.ad-slot ins.adsbygoogle { width:100%; }
:fullscreen .ad-slot,
:-webkit-full-screen .ad-slot,
body.is-fullscreen .ad-slot { display:none !important; }
@media (max-width: 680px) {
  .ad-slot {
    width: 100%;
    min-height: 118px;
    margin: 38px auto;
    padding: 12px 8px;
    border-radius: 14px;
  }
  .ad-slot__placeholder { min-height: 92px; }
}
@media (max-width: 360px) {
  .ad-slot { margin-left:0; margin-right:0; }
}
/* ==================================================
   BASIC RESET
================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --page-background: #f4f5f7;
    --card-background: #ffffff;
    --display-background: #050505;

    --text-primary: #15171a;
    --text-secondary: #62676f;
    --border-color: #dfe2e6;

    --accent: #e32636;
    --accent-hover: #c91f2d;
    --accent-soft: #fff0f1;

    --display-number: #ffffff;
    --display-glow: rgba(255, 255, 255, 0.12);

    --button-background: #ffffff;
    --button-hover: #f1f2f4;

    --shadow:
        0 18px 50px rgba(20, 24, 32, 0.10);

    --radius-large: 24px;
    --radius-medium: 14px;
    --radius-small: 9px;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background: var(--page-background);
    color: var(--text-primary);
    font-family:"TCT UI",sans-serif;
    line-height: 1.5;
}


/* ==================================================
   HEADER
================================================== */

.site-header {
    width: 100%;
    min-height: 72px;
    padding: 0 5%;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;

    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--display-background);
    color: #ffffff;
    border-radius: 50%;
    font-size: 1.5rem;
}

.icon-button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-color);
    border-radius: 50%;

    background: #ffffff;
    color: var(--text-primary);
    font-size: 1.35rem;
    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.icon-button:hover {
    background: var(--button-hover);
    transform: translateY(-1px);
}


/* ==================================================
   PAGE LAYOUT
================================================== */

.page-content {
    width: min(1100px, 92%);
    margin: 0 auto;
    padding: 60px 0 80px;
}

.timer-section {
    width: 100%;
}

.heading-area {
    margin-bottom: 30px;
    text-align: center;
}

.eyebrow {
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.heading-area h1 {
    font-size: clamp(2rem, 5vw, 3.4rem);
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.intro {
    margin-top: 12px;
    color: var(--text-secondary);
    font-size: 1.05rem;
}


/* ==================================================
   TIMER CARD
================================================== */

.timer-card {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: clamp(20px, 4vw, 38px);

    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}

.timer-status {
    margin-bottom: 12px;
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.timer-display {
    min-height: 220px;
    padding: 30px 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #171717 0%,
            var(--display-background) 70%
        );

    color: var(--display-number);
    border: 7px solid #252525;
    border-radius: 20px;

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: clamp(4.4rem, 16vw, 9.5rem);
    font-weight: 700;
    letter-spacing: -0.08em;
    line-height: 1;
    text-shadow:
        0 0 16px var(--display-glow),
        0 0 32px var(--display-glow);

    font-variant-numeric: tabular-nums;
}

.timer-colon {
    display: inline-block;
    margin: 0 0.07em;
    transform: translateY(-0.05em);
}

.timer-card.is-running .timer-colon {
    animation: colonPulse 1s infinite;
}

@keyframes colonPulse {
    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0.35;
    }
}


/* ==================================================
   PROGRESS BAR
================================================== */

.progress-track {
    width: 100%;
    height: 8px;
    margin-top: 20px;
    overflow: hidden;

    background: #e7e9ec;
    border-radius: 100px;
}

.progress-bar {
    width: 100%;
    height: 100%;
    background: var(--accent);
    border-radius: inherit;

    transition: width 0.25s linear;
}


/* ==================================================
   MAIN CONTROLS
================================================== */

.timer-controls {
    margin-top: 26px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.control-button,
.set-button,
.preset-button {
    border: 1px solid var(--border-color);
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.control-button {
    min-height: 54px;
    padding: 13px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    background: var(--button-background);
    color: var(--text-primary);
    border-radius: var(--radius-medium);
    font-size: 1rem;
}

.control-button:hover:not(:disabled) {
    background: var(--button-hover);
    transform: translateY(-1px);
}

.control-button:active:not(:disabled),
.set-button:active,
.preset-button:active {
    transform: translateY(1px);
}

.control-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.primary-button {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.primary-button:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}


/* ==================================================
   TIME SETTINGS
================================================== */

.time-settings,
.preset-section {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--border-color);
}

.time-settings h2,
.preset-section h2 {
    margin-bottom: 15px;
    font-size: 1rem;
}

.time-inputs {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.time-input-group {
    flex: 1;

    display: flex;
    flex-direction: column;
    gap: 7px;

    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

.time-input-group input {
    width: 100%;
    min-height: 52px;
    padding: 10px 13px;

    background: #ffffff;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-small);

    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
}

.time-input-group input:focus {
    border-color: var(--accent);
    outline: 3px solid var(--accent-soft);
}

.input-separator {
    padding-bottom: 12px;
    font-size: 1.5rem;
    font-weight: 800;
}

.set-button {
    min-height: 52px;
    padding: 10px 25px;

    background: var(--display-background);
    color: #ffffff;
    border-color: var(--display-background);
    border-radius: var(--radius-small);
    font-size: 0.95rem;
}

.set-button:hover {
    background: #282828;
}


/* ==================================================
   PRESET BUTTONS
================================================== */

.preset-buttons {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 9px;
}

.preset-button {
    min-height: 44px;
    padding: 9px;

    background: #ffffff;
    color: var(--text-primary);
    border-radius: var(--radius-small);
    font-size: 0.86rem;
}

.preset-button:hover {
    background: var(--button-hover);
}

.preset-button.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}


/* ==================================================
   KEYBOARD HELP
================================================== */

.keyboard-help {
    width: min(760px, 100%);
    margin: 22px auto 0;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 24px;

    color: var(--text-secondary);
    font-size: 0.82rem;
}

kbd {
    min-width: 25px;
    padding: 4px 7px;

    display: inline-block;

    background: #ffffff;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-bottom-width: 3px;
    border-radius: 5px;

    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}


/* ==================================================
   INFORMATION
================================================== */

.information-section {
    width: min(760px, 100%);
    margin: 70px auto 0;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 45px;
}

.information-section h2 {
    margin-bottom: 12px;
    font-size: 1.25rem;
}

.information-section p {
    color: var(--text-secondary);
}


/* ==================================================
   FOOTER
================================================== */

.site-footer {
    width: 100%;
    margin-top: 70px;
    padding: 32px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    background: #0b0d12;
    color: #9aa3af;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: left;
    font-size: 0.85rem;
}

.site-footer .site-logo {
    margin-bottom: 10px;
    color: #ffffff;
}

.site-footer .logo-icon {
    background: #111827;
    color: #ffffff;
}

.site-footer p {
    margin: 0;
    color: #8e97a3;
    line-height: 1.6;
}

.site-footer a {
    color: #ffffff;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--site-accent);
}

@media (max-width: 768px) {
    .site-footer {
        justify-content: center;
        padding: 28px 20px;
        text-align: center;
    }
}


/* ==================================================
   FULLSCREEN TIMER MODE
================================================== */

.timer-card:fullscreen {
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 5vw;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: #080808;
    border: 0;
    border-radius: 0;
}

.timer-card:fullscreen .timer-status {
    color: #b9b9b9;
}

.timer-card:fullscreen .timer-display {
    min-height: 55vh;
    font-size: clamp(7rem, 25vw, 20rem);
}

.timer-card:fullscreen .time-settings,
.timer-card:fullscreen .preset-section {
    display: none;
}

.timer-card:fullscreen .timer-controls {
    width: min(720px, 90%);
    margin: 28px auto 0;
}


/* ==================================================
   COMPLETED STATE
================================================== */

.timer-card.is-complete .timer-display {
    background: var(--accent);
    border-color: var(--accent-hover);
    animation: completedFlash 0.8s ease-in-out infinite alternate;
}

@keyframes completedFlash {
    from {
        filter: brightness(1);
    }

    to {
        filter: brightness(1.25);
    }
}


/* ==================================================
   RESPONSIVE LAYOUT
================================================== */

@media (max-width: 700px) {

    .site-header {
        min-height: 64px;
    }

    .page-content {
        width: min(94%, 1100px);
        padding-top: 38px;
    }

    .timer-card {
        padding: 16px;
        border-radius: 18px;
    }

    .timer-display {
        min-height: 170px;
        border-width: 5px;
        border-radius: 15px;
        font-size: clamp(3.8rem, 22vw, 7rem);
    }

    .timer-controls {
        grid-template-columns: 1fr;
    }

    .time-inputs {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .time-input-group {
        min-width: calc(50% - 20px);
    }

    .input-separator {
        align-self: flex-end;
    }

    .set-button {
        width: 100%;
    }

    .preset-buttons {
        grid-template-columns: repeat(3, 1fr);
    }

    .information-section {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .keyboard-help {
        display: none;
    }
}

@media (max-width: 390px) {

    .timer-display {
        font-size: 3.7rem;
    }

    .site-logo {
        font-size: 0.95rem;
    }
}


/* ==================================================
   REDUCED MOTION ACCESSIBILITY
================================================== */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==================================================
   DISPLAY MODE TOOLBAR
================================================== */

.display-toolbar {
    margin-bottom: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.display-toolbar-label {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.display-switcher {
    padding: 4px;
    display: inline-flex;
    gap: 4px;

    background: #eceef1;
    border: 1px solid #d9dde2;
    border-radius: 13px;
}

.display-mode-button {
    min-height: 38px;
    padding: 7px 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    background: transparent;
    color: #62676f;
    border: 0;
    border-radius: 9px;

    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.15s ease;
}

.display-mode-button:hover {
    color: #17191c;
}

.display-mode-button.active {
    background: #ffffff;
    color: #111315;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.06),
        0 5px 14px rgba(25, 29, 36, 0.10);
}

.display-mode-button:active {
    transform: translateY(1px);
}

.mode-icon {
    min-width: 29px;
    color: var(--accent);
    font-family: "Courier New", monospace;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: -0.08em;
}

.analogue-mode-icon {
    font-family:"TCT UI",sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0;
}

.flip-mode-icon {
    min-width: 31px;
    font-size: 0.72rem;
    letter-spacing: -0.16em;
}


/* ==================================================
   DISPLAY STAGE
================================================== */

.display-stage {
    position: relative;
    width: 100%;
}

.digital-display,
.analogue-display,
.flip-display {
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        filter 0.35s ease;
}

.display-stage[data-display="digital"] .digital-display {
    position: relative;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.display-stage[data-display="digital"] .analogue-display {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    filter: blur(5px);
    pointer-events: none;
}

.display-stage[data-display="digital"] .flip-display {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    filter: blur(5px);
    pointer-events: none;
}

.display-stage[data-display="analogue"] .digital-display {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
    filter: blur(5px);
    pointer-events: none;
}

.display-stage[data-display="analogue"] .analogue-display {
    position: relative;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.display-stage[data-display="analogue"] .flip-display {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    filter: blur(5px);
    pointer-events: none;
}

.display-stage[data-display="flip"] .digital-display,
.display-stage[data-display="flip"] .analogue-display {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(-12px) scale(0.97);
    filter: blur(5px);
    pointer-events: none;
}

.display-stage[data-display="flip"] .flip-display {
    position: relative;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}


/* ==================================================
   PREMIUM DIGITAL DISPLAY
================================================== */

.digital-display {
    position: relative;
    isolation: isolate;
    min-height: 250px;
    padding: 38px 32px 28px;

    flex-direction: column;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.06),
            transparent 26%
        ),
        radial-gradient(
            ellipse at 50% 44%,
            #242424 0%,
            #0d0d0d 48%,
            #020202 100%
        );

    border: 1px solid #343434;
    box-shadow:
        inset 0 0 0 6px #171717,
        inset 0 0 0 7px #353535,
        inset 0 -25px 65px rgba(0, 0, 0, 0.82),
        0 18px 35px rgba(0, 0, 0, 0.24);
}

.digital-display::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 12px;
    pointer-events: none;
}

.digital-display::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.018) 0,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px,
            transparent 4px
        );

    border-radius: inherit;
    opacity: 0.55;
    pointer-events: none;
}

.digital-glass {
    position: absolute;
    inset: 7px;
    overflow: hidden;
    border-radius: 13px;
    pointer-events: none;
}

.digital-glass::before {
    content: "";
    position: absolute;
    width: 65%;
    height: 180%;
    top: -82%;
    left: -13%;
    transform: rotate(22deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.055),
            transparent
        );
}

.digital-time {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #f7fbff;
    font-family:
        "Courier New",
        Courier,
        monospace;
    font-size: clamp(4.6rem, 16vw, 9.5rem);
    font-weight: 700;
    letter-spacing: -0.095em;
    line-height: 1;

    text-shadow:
        0 0 2px #ffffff,
        0 0 10px rgba(255, 255, 255, 0.42),
        0 0 28px rgba(255, 255, 255, 0.16);

    font-variant-numeric: tabular-nums;
}

.digital-caption {
    width: min(430px, 77%);
    margin-top: 18px;

    display: flex;
    justify-content: space-between;

    color: rgba(255, 255, 255, 0.42);
    font-family:"TCT UI",sans-serif;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.35em;
}

.timer-card.is-running .digital-time {
    text-shadow:
        0 0 2px #ffffff,
        0 0 12px rgba(255, 255, 255, 0.54),
        0 0 34px rgba(255, 255, 255, 0.20);
}


/* ==================================================
   PREMIUM ANALOGUE COUNTDOWN
================================================== */

.analogue-display {
    min-height: 430px;
    padding: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 34%,
            #30343a 0%,
            #171a1f 44%,
            #090a0c 100%
        );

    border: 1px solid #30343a;
    border-radius: 20px;
    box-shadow:
        inset 0 0 0 6px #15171b,
        inset 0 0 0 7px #3a3e45,
        inset 0 -45px 85px rgba(0, 0, 0, 0.48),
        0 18px 35px rgba(0, 0, 0, 0.24);
}

.analogue-shell {
    position: relative;
    width: min(370px, 92%);
    aspect-ratio: 1;
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #e2e4e8 0%,
            #777c84 24%,
            #262a30 53%,
            #92979f 78%,
            #30343a 100%
        );

    padding: 10px;

    box-shadow:
        0 30px 55px rgba(0, 0, 0, 0.48),
        inset 0 1px 1px rgba(255, 255, 255, 0.85),
        inset 0 -3px 7px rgba(0, 0, 0, 0.65);
}

.analogue-bezel {
    width: 100%;
    height: 100%;
    padding: 12px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 36% 29%,
            #50555d,
            #15181c 58%,
            #050607 100%
        );

    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.09),
        inset 0 0 18px rgba(0, 0, 0, 0.85);
}

.analogue-face {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 42%,
            #f9fafb 0%,
            #eceef0 54%,
            #cfd2d5 100%
        );

    box-shadow:
        inset 0 9px 20px rgba(255, 255, 255, 0.82),
        inset 0 -13px 28px rgba(0, 0, 0, 0.17),
        0 0 0 1px rgba(0, 0, 0, 0.7);
}

.analogue-face::before {
    content: "";
    position: absolute;
    inset: 15%;
    z-index: 0;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.83),
            rgba(255, 255, 255, 0.08) 64%,
            transparent 65%
        );
}

.analogue-progress {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.analogue-progress-track,
.analogue-progress-value {
    fill: none;
    stroke-width: 7;
}

.analogue-progress-track {
    stroke: rgba(24, 27, 31, 0.09);
}

.analogue-progress-value {
    stroke: var(--accent);
    stroke-linecap: round;
    filter: drop-shadow(0 0 4px rgba(227, 38, 54, 0.35));
    transition: stroke-dashoffset 0.25s linear;
}

.clock-markers {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.clock-marker {
    position: absolute;
    top: 5.2%;
    left: 49.5%;
    width: 1%;
    height: 3.6%;
    transform-origin: 50% 1245%;
    border-radius: 999px;
    background: #777c82;
}

.clock-marker.major {
    top: 4.3%;
    height: 5.1%;
    background: #1d2024;
}

.clock-marker.quarter {
    width: 1.45%;
    background: var(--accent);
}

.clock-number {
    position: absolute;
    z-index: 3;
    color: #373b40;
    font-size: clamp(0.72rem, 2.7vw, 0.92rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.number-12 {
    top: 10.5%;
    left: 50%;
    transform: translateX(-50%);
}

.number-3 {
    top: 50%;
    right: 10.5%;
    transform: translateY(-50%);
}

.number-6 {
    bottom: 10.5%;
    left: 50%;
    transform: translateX(-50%);
}

.number-9 {
    top: 50%;
    left: 10.5%;
    transform: translateY(-50%);
}

.countdown-hand {
    position: absolute;
    z-index: 5;
    left: calc(50% - 2px);
    top: 13.5%;
    width: 4px;
    height: 36.5%;
    border-radius: 999px;
    transform-origin: 50% 100%;
    transform: rotate(0deg);

    background:
        linear-gradient(
            to bottom,
            #ff6874 0%,
            var(--accent) 42%,
            #8e0f1b 100%
        );

    box-shadow:
        0 0 3px rgba(227, 38, 54, 0.48),
        1px 1px 2px rgba(0, 0, 0, 0.24);

    transition: transform 0.25s linear;
}

.hand-tip {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: #ff5361;
    border-radius: 2px;
}

.clock-pin {
    position: absolute;
    z-index: 7;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff 0%,
            #bbc0c6 18%,
            #373b40 48%,
            #101215 100%
        );

    border: 2px solid #111316;
    box-shadow:
        0 3px 5px rgba(0, 0, 0, 0.34),
        0 0 0 3px rgba(255, 255, 255, 0.42);
}

.analogue-centre-readout {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 25%;
    transform: translateX(-50%);

    min-width: 105px;
    padding: 7px 12px 6px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background:
        linear-gradient(
            180deg,
            #202328,
            #08090b
        );

    border: 1px solid #3f444b;
    border-radius: 7px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 4px 8px rgba(0, 0, 0, 0.27);
}

.analogue-time {
    color: #f8fbff;
    font-family: "Courier New", monospace;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.03em;
    text-shadow: 0 0 7px rgba(255, 255, 255, 0.25);
}

.analogue-label {
    margin-top: 3px;
    color: #9da3aa;
    font-size: 0.45rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.analogue-reflection {
    position: absolute;
    top: 9%;
    left: 18%;
    z-index: 8;
    width: 45%;
    height: 24%;
    transform: rotate(-18deg);
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse,
            rgba(255, 255, 255, 0.24),
            transparent 69%
        );
    filter: blur(3px);
    pointer-events: none;
}

.timer-card.is-running .countdown-hand {
    transition: transform 0.2s linear;
}

.timer-card.is-complete .analogue-face {
    animation: analogueComplete 0.8s ease-in-out infinite alternate;
}

@keyframes analogueComplete {
    from {
        box-shadow:
            inset 0 9px 20px rgba(255, 255, 255, 0.82),
            inset 0 -13px 28px rgba(0, 0, 0, 0.17),
            0 0 0 1px rgba(0, 0, 0, 0.7);
    }

    to {
        box-shadow:
            inset 0 0 45px rgba(227, 38, 54, 0.28),
            inset 0 -13px 28px rgba(0, 0, 0, 0.17),
            0 0 0 4px rgba(227, 38, 54, 0.72);
    }
}


/* ==================================================
   DISPLAY FULLSCREEN OVERRIDES
================================================== */

.timer-card:fullscreen .display-toolbar {
    width: min(900px, 90%);
    margin: 0 auto 20px;
    color: #ffffff;
}

.timer-card:fullscreen .display-toolbar-label {
    color: #c0c3c7;
}

.timer-card:fullscreen .display-stage {
    width: min(1200px, 96%);
    margin: 0 auto;
}

.timer-card:fullscreen .digital-display {
    min-height: 58vh;
}

.timer-card:fullscreen .digital-time {
    font-size: clamp(8rem, 24vw, 20rem);
}

.timer-card:fullscreen .analogue-display {
    min-height: 64vh;
}

.timer-card:fullscreen .analogue-shell {
    width: min(56vh, 600px);
}


/* ==================================================
   DISPLAY RESPONSIVE OVERRIDES
================================================== */

@media (max-width: 700px) {

    .display-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .display-switcher {
        width: 100%;
    }

    .display-mode-button {
        flex: 1;
    }

    .digital-display {
        min-height: 190px;
        padding: 28px 16px 22px;
    }

    .digital-time {
        font-size: clamp(3.8rem, 21vw, 7rem);
    }

    .digital-caption {
        width: 76%;
        margin-top: 13px;
    }

    .analogue-display {
        min-height: 350px;
        padding: 14px;
    }

    .analogue-shell {
        width: min(310px, 94%);
    }
}

@media (max-width: 390px) {

    .analogue-display {
        min-height: 315px;
    }

    .analogue-shell {
        width: min(276px, 96%);
    }

    .analogue-centre-readout {
        min-width: 88px;
        padding: 6px 9px 5px;
    }

    .analogue-time {
        font-size: 0.88rem;
    }
}


/* ==================================================
   RETRO FLIP CLOCK
================================================== */

.flip-display {
    min-height: 350px;
    padding: 48px 24px 34px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            ellipse at 50% 12%,
            rgba(255, 255, 255, 0.09),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #24272b 0%,
            #0b0c0e 56%,
            #030303 100%
        );

    border: 1px solid #34373b;
    border-radius: 20px;

    box-shadow:
        inset 0 0 0 6px #151719,
        inset 0 0 0 7px #3a3d42,
        inset 0 -45px 85px rgba(0, 0, 0, 0.72),
        0 18px 35px rgba(0, 0, 0, 0.24);
}

.flip-machine {
    width: min(650px, 100%);

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        minmax(0, 1fr);
    align-items: center;
    gap: clamp(7px, 1.7vw, 15px);
}

.flip-unit {
    min-width: 0;
    perspective: 900px;
}

.flip-card {
    position: relative;
    isolation: isolate;

    width: 100%;
    aspect-ratio: 0.72;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #282a2d 0%,
            #111214 49.4%,
            #050506 50%,
            #18191b 100%
        );

    border:
        clamp(2px, 0.45vw, 4px)
        solid
        #050506;
    border-radius: clamp(8px, 1.7vw, 15px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 20px rgba(0, 0, 0, 0.72),
        0 4px 0 #000000,
        0 11px 20px rgba(0, 0, 0, 0.48);
}

.flip-card::before,
.flip-card::after {
    content: "";
    position: absolute;
    z-index: 4;
    top: calc(50% - 5px);
    width: 8px;
    height: 10px;
    background: #050506;
    border-radius: 2px;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.75);
}

.flip-card::before {
    left: -2px;
}

.flip-card::after {
    right: -2px;
}

.flip-value {
    position: relative;
    z-index: 2;

    color: #f1f1ed;
    font-family:
        Impact, "Arial Narrow",
        sans-serif;
    font-size: clamp(4.5rem, 13vw, 8.5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.005em;

    text-shadow:
        0 -1px 0 #ffffff,
        0 2px 0 #000000,
        0 0 8px rgba(255, 255, 255, 0.12);

    font-variant-numeric: tabular-nums;
}

.flip-hinge {
    position: absolute;
    z-index: 5;
    top: calc(50% - 1px);
    left: 0;
    right: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #050506,
            #34363a 12%,
            #080809 50%,
            #34363a 88%,
            #050506
        );

    box-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.05),
        0 1px 0 rgba(0, 0, 0, 0.9);
}

.flip-shine {
    position: absolute;
    z-index: 3;
    inset: 3px;
    border-radius: calc(clamp(8px, 1.7vw, 15px) - 3px);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.13),
            transparent 25%,
            transparent 72%,
            rgba(255, 255, 255, 0.025)
        );

    pointer-events: none;
}

.flip-card.is-flipping {
    animation:
        flipCardPulse 0.42s
        cubic-bezier(0.22, 0.72, 0.24, 1);
}

.flip-card.is-flipping .flip-value {
    animation:
        flipNumberPulse 0.42s
        cubic-bezier(0.22, 0.72, 0.24, 1);
}

@keyframes flipCardPulse {
    0% {
        transform: rotateX(0deg);
        filter: brightness(1);
    }

    48% {
        transform: rotateX(-7deg);
        filter: brightness(0.72);
    }

    100% {
        transform: rotateX(0deg);
        filter: brightness(1);
    }
}

@keyframes flipNumberPulse {
    0% {
        transform: translateY(0);
    }

    48% {
        transform: translateY(3px) scaleY(0.97);
    }

    100% {
        transform: translateY(0);
    }
}

.flip-separator {
    padding:
        0
        clamp(2px, 0.7vw, 8px);

    display: flex;
    flex-direction: column;
    gap: clamp(18px, 4vw, 32px);
}

.flip-separator span {
    width: clamp(9px, 1.7vw, 15px);
    height: clamp(9px, 1.7vw, 15px);

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff,
            #d8d8d4 24%,
            #777873 58%,
            #171817 100%
        );

    border-radius: 50%;

    box-shadow:
        0 2px 0 #000000,
        0 0 10px rgba(255, 255, 255, 0.12);
}

.flip-labels {
    width: min(650px, 100%);
    margin-top: 25px;
    padding:
        0
        clamp(4px, 1vw, 12px);

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16%;

    color: rgba(255, 255, 255, 0.46);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-align: center;
}

.timer-card.is-running .flip-separator span {
    animation: flipColonPulse 1s steps(1, end) infinite;
}

@keyframes flipColonPulse {
    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0.24;
    }
}

.timer-card.is-complete .flip-display {
    animation:
        flipCompletePulse 0.8s
        ease-in-out
        infinite alternate;
}

@keyframes flipCompletePulse {
    from {
        box-shadow:
            inset 0 0 0 6px #151719,
            inset 0 0 0 7px #3a3d42,
            inset 0 -45px 85px rgba(0, 0, 0, 0.72),
            0 18px 35px rgba(0, 0, 0, 0.24);
    }

    to {
        box-shadow:
            inset 0 0 0 6px #3d0a0f,
            inset 0 0 0 7px var(--accent),
            inset 0 -45px 85px rgba(0, 0, 0, 0.72),
            0 0 36px rgba(227, 38, 54, 0.42);
    }
}


/* Flip display fullscreen */

.timer-card:fullscreen .flip-display {
    min-height: 58vh;
    padding: 4vh 4vw;
}

.timer-card:fullscreen .flip-machine,
.timer-card:fullscreen .flip-labels {
    width: min(1150px, 94vw);
}

.timer-card:fullscreen .flip-value {
    font-size: clamp(7rem, 18vw, 17rem);
}


/* Flip display responsive */

@media (max-width: 700px) {

    .display-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .display-switcher {
        width: 100%;
    }

    .display-mode-button {
        flex: 1;
        padding-inline: 7px;
    }

    .mode-icon {
        display: none;
    }

    .flip-display {
        min-height: 245px;
        padding: 32px 12px 24px;
    }

    .flip-machine {
        gap: 5px;
    }

    .flip-card {
        border-width: 2px;
        border-radius: 8px;
    }

    .flip-value {
        font-size: clamp(3.4rem, 18vw, 5.6rem);
    }

    .flip-separator {
        padding-inline: 1px;
        gap: 17px;
    }

    .flip-separator span {
        width: 8px;
        height: 8px;
    }

    .flip-labels {
        margin-top: 18px;
        font-size: 0.56rem;
        letter-spacing: 0.15em;
    }
}

@media (max-width: 390px) {

    .display-mode-button {
        font-size: 0.74rem;
    }

    .flip-display {
        min-height: 215px;
    }

    .flip-value {
        font-size: clamp(2.8rem, 17vw, 4.4rem);
    }
}


/* ==================================================
   UNIFIED PREMIUM FINISH
================================================== */

:root {
    --metal-edge: #4a4d52;
    --metal-dark: #141619;
    --panel-black: #050607;
    --soft-highlight: rgba(255, 255, 255, 0.11);
}

/* Unified toolbar controls */

.display-toolbar {
    gap: 14px;
}

.sound-toggle {
    min-height: 42px;
    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: rgba(255, 255, 255, 0.84);
    background:
        linear-gradient(
            180deg,
            #25282c,
            #111316
        );

    border: 1px solid #3d4146;
    border-radius: 12px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 6px 14px rgba(0, 0, 0, 0.22);

    font: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    cursor: pointer;

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background 160ms ease,
        opacity 160ms ease;
}

.sound-toggle:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.sound-toggle:active {
    transform: translateY(1px);
}

.sound-toggle[aria-pressed="true"] {
    border-color: rgba(227, 38, 54, 0.68);
}

.sound-toggle.is-muted {
    opacity: 0.58;
}

.sound-toggle-icon {
    color: var(--accent);
    font-size: 1rem;
}


/* Shared premium display chassis */

.digital-display,
.analogue-display,
.flip-display {
    border: 1px solid var(--metal-edge);
    border-radius: 20px;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(255, 255, 255, 0.085),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #202327 0%,
            #0a0b0d 54%,
            #020303 100%
        );

    box-shadow:
        inset 0 0 0 5px var(--metal-dark),
        inset 0 0 0 6px rgba(255, 255, 255, 0.08),
        inset 0 -48px 88px rgba(0, 0, 0, 0.68),
        0 18px 34px rgba(0, 0, 0, 0.25);
}


/* Premium digital display */

.digital-display {
    position: relative;
    overflow: hidden;
}

.digital-display::before {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: 0;

    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.045),
            transparent 34%
        );

    pointer-events: none;
}

.digital-display > * {
    position: relative;
    z-index: 1;
}

.digital-time {
    font-family:
        Impact, "Arial Narrow",
        sans-serif;

    font-weight: 400;
    letter-spacing: 0.025em;

    text-shadow:
        0 0 4px currentColor,
        0 0 16px rgba(227, 38, 54, 0.28),
        0 3px 0 rgba(0, 0, 0, 0.82);
}


/* Premium analogue display */

.analogue-display {
    position: relative;
    overflow: hidden;
}

.analogue-clock {
    border:
        clamp(7px, 1.2vw, 12px)
        solid
        #15171a;

    background:
        radial-gradient(
            circle at 42% 32%,
            #24272a 0%,
            #0b0c0e 47%,
            #030303 75%,
            #111316 100%
        );

    box-shadow:
        inset 0 0 0 2px #55595f,
        inset 0 0 0 8px #090a0b,
        inset 0 0 28px rgba(0, 0, 0, 0.9),
        0 10px 24px rgba(0, 0, 0, 0.5);
}

.analogue-clock::before {
    content: "";
    position: absolute;
    inset: 7%;
    z-index: 1;

    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.055);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.075),
            transparent 32%,
            transparent 68%,
            rgba(255, 255, 255, 0.018)
        );

    pointer-events: none;
}

.analogue-time {
    font-family:
        Impact, "Arial Narrow",
        sans-serif;
    font-weight: 400;
    letter-spacing: 0.06em;
}


/* Premium flip display refinement */

.flip-display {
    border-color: var(--metal-edge);
}

.flip-value {
    transform: scaleX(0.89);
    transform-origin: center;
}

.flip-card.is-flipping .flip-value {
    animation:
        premiumFlipNumber 0.42s
        cubic-bezier(0.22, 0.72, 0.24, 1);
}

@keyframes premiumFlipNumber {
    0% {
        transform: scaleX(0.89) translateY(0);
    }

    48% {
        transform:
            scaleX(0.89)
            translateY(3px)
            scaleY(0.965);
    }

    100% {
        transform: scaleX(0.89) translateY(0);
    }
}


/* Matching hover and active response */

.display-mode-button,
.control-button,
.preset-button,
.set-timer-button,
.fullscreen-button {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 5px 12px rgba(0, 0, 0, 0.16);
}

.display-mode-button:active,
.control-button:active,
.preset-button:active,
.set-timer-button:active,
.fullscreen-button:active {
    transform: translateY(1px);
}


/* Fullscreen premium chassis */

.timer-card:fullscreen .digital-display,
.timer-card:fullscreen .analogue-display,
.timer-card:fullscreen .flip-display {
    border-radius: 28px;

    box-shadow:
        inset 0 0 0 8px var(--metal-dark),
        inset 0 0 0 9px rgba(255, 255, 255, 0.09),
        inset 0 -70px 120px rgba(0, 0, 0, 0.72),
        0 24px 60px rgba(0, 0, 0, 0.4);
}


/* Reduced motion accessibility */

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

    .flip-card.is-flipping,
    .flip-card.is-flipping .flip-value,
    .timer-card.is-running .flip-separator span,
    .timer-card.is-complete .flip-display {
        animation: none !important;
    }
}


/* Mobile toolbar */

@media (max-width: 700px) {

    .sound-toggle {
        width: 100%;
    }
}


/* ==================================================
   VERSION 5 — PREMIUM COLOUR FINISHES
================================================== */

.timer-card {
    --theme-accent: #e32636;
    --theme-accent-rgb: 227, 38, 54;
    --theme-bright: #ff5a67;
    --theme-soft: #a81e2a;
    --theme-lume: #ffd9d9;
    --theme-dial: #08090a;
    --theme-dial-mid: #16181b;
    --theme-metal-a: #646970;
    --theme-metal-b: #202327;
    --theme-card-top: #292b2f;
    --theme-card-bottom: #111214;
    --theme-text: #f3f3ef;
    --theme-page-glow: rgba(227, 38, 54, 0.13);

    transition:
        background-color 360ms ease,
        border-color 360ms ease,
        box-shadow 360ms ease,
        color 360ms ease;
}

.timer-card.theme-blue {
    --theme-accent: #45b9ff;
    --theme-accent-rgb: 69, 185, 255;
    --theme-bright: #9cddff;
    --theme-soft: #176896;
    --theme-lume: #d8f4ff;
    --theme-dial: #061019;
    --theme-dial-mid: #102b3b;
    --theme-metal-a: #8ba5b4;
    --theme-metal-b: #233743;
    --theme-card-top: #183240;
    --theme-card-bottom: #07131a;
    --theme-text: #eaf8ff;
    --theme-page-glow: rgba(69, 185, 255, 0.14);
}

.timer-card.theme-green {
    --theme-accent: #78a94e;
    --theme-accent-rgb: 120, 169, 78;
    --theme-bright: #c7e599;
    --theme-soft: #465f2d;
    --theme-lume: #dff5bb;
    --theme-dial: #090d08;
    --theme-dial-mid: #1d2919;
    --theme-metal-a: #6f7862;
    --theme-metal-b: #252b20;
    --theme-card-top: #252c20;
    --theme-card-bottom: #0d110b;
    --theme-text: #edf4e4;
    --theme-page-glow: rgba(120, 169, 78, 0.13);
}

.timer-card.theme-amber {
    --theme-accent: #f3a52a;
    --theme-accent-rgb: 243, 165, 42;
    --theme-bright: #ffd17a;
    --theme-soft: #9b5c11;
    --theme-lume: #ffe6a8;
    --theme-dial: #120b04;
    --theme-dial-mid: #33200d;
    --theme-metal-a: #866b4c;
    --theme-metal-b: #352819;
    --theme-card-top: #382817;
    --theme-card-bottom: #160d05;
    --theme-text: #fff1d6;
    --theme-page-glow: rgba(243, 165, 42, 0.14);
}

.timer-card.theme-white {
    --theme-accent: #ecece7;
    --theme-accent-rgb: 236, 236, 231;
    --theme-bright: #ffffff;
    --theme-soft: #9ca0a4;
    --theme-lume: #ffffff;
    --theme-dial: #e8e8e2;
    --theme-dial-mid: #fafaf7;
    --theme-metal-a: #f5f5f1;
    --theme-metal-b: #9da1a5;
    --theme-card-top: #f4f4ef;
    --theme-card-bottom: #bfc1be;
    --theme-text: #151719;
    --theme-page-glow: rgba(255, 255, 255, 0.13);
}

/* Theme selector */

.theme-toolbar {
    margin: 14px 0 18px;
    padding: 12px 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 9px 20px rgba(0, 0, 0, 0.18);
}

.theme-toolbar-heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
}

.theme-toolbar-label {
    color: rgba(255, 255, 255, 0.47);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.theme-name {
    color: var(--theme-bright);
    font-size: 0.8rem;
    font-weight: 750;
    transition: color 300ms ease;
}

.theme-selector {
    display: flex;
    align-items: center;
    gap: 9px;
}

.theme-button {
    width: 34px;
    height: 34px;
    padding: 0;
    display: grid;
    place-items: center;

    background:
        linear-gradient(145deg, #34373c, #111315);
    border: 1px solid #4b4f54;
    border-radius: 50%;
    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 4px 8px rgba(0,0,0,.34);

    transition:
        transform 170ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.theme-button:hover {
    transform: translateY(-2px);
}

.theme-button:active {
    transform: translateY(1px);
}

.theme-button.active {
    border-color: var(--theme-bright);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 0 0 2px rgba(var(--theme-accent-rgb), .22),
        0 0 15px rgba(var(--theme-accent-rgb), .32);
}

.theme-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    box-shadow:
        inset 3px 3px 5px rgba(255,255,255,.22),
        inset -3px -3px 5px rgba(0,0,0,.36);
}

.theme-swatch-red { background: #d92537; }
.theme-swatch-blue { background: #3aaee8; }
.theme-swatch-green { background: #718f4b; }
.theme-swatch-amber { background: #df9120; }
.theme-swatch-white { background: #e8e8e2; }

/* Make the selected colour flow through the interface */

.timer-card .timer-status,
.timer-card .theme-name,
.timer-card .sound-toggle-icon {
    color: var(--theme-bright);
}

.timer-card .display-mode-button.active,
.timer-card .sound-toggle[aria-pressed="true"] {
    border-color: rgba(var(--theme-accent-rgb), .72);
}

.timer-card .progress-fill,
.timer-card .analogue-progress-value {
    background: var(--theme-accent);
    stroke: var(--theme-accent);
}

.timer-card .control-button.primary,
.timer-card .set-timer-button {
    background:
        linear-gradient(
            180deg,
            var(--theme-bright),
            var(--theme-accent)
        );
    border-color: var(--theme-bright);
    color: #090a0b;
}

.timer-card .digital-time {
    color: var(--theme-bright);
    text-shadow:
        0 0 5px currentColor,
        0 0 22px rgba(var(--theme-accent-rgb), .38),
        0 3px 0 rgba(0,0,0,.82);
}

.timer-card .timer-colon {
    color: var(--theme-accent);
}

.timer-card .digital-display,
.timer-card .analogue-display,
.timer-card .flip-display {
    border-color: var(--theme-metal-a);
    box-shadow:
        inset 0 0 0 5px var(--theme-metal-b),
        inset 0 0 0 6px rgba(255,255,255,.08),
        inset 0 -48px 88px rgba(0,0,0,.68),
        0 18px 34px rgba(0,0,0,.25),
        0 0 34px var(--theme-page-glow);
}

.timer-card .flip-card {
    background:
        linear-gradient(
            180deg,
            var(--theme-card-top) 0%,
            #101113 49.4%,
            #030304 50%,
            var(--theme-card-bottom) 100%
        );
}

.timer-card.theme-white .flip-card {
    border-color: #767a7d;
    background:
        linear-gradient(
            180deg,
            #f8f8f4 0%,
            #d7d8d4 49.4%,
            #8e9294 50%,
            #c5c7c4 100%
        );
}

.timer-card .flip-value {
    color: var(--theme-text);
}

.timer-card .flip-separator span {
    background:
        radial-gradient(
            circle at 35% 30%,
            var(--theme-bright),
            var(--theme-accent) 42%,
            var(--theme-soft) 72%,
            #101112 100%
        );
}

/* ==================================================
   LUXURY PRECISION ANALOGUE FACE
================================================== */

.analogue-shell {
    position: relative;
    filter: drop-shadow(0 24px 28px rgba(0,0,0,.42));
}

.analogue-bezel {
    position: relative;
    padding: clamp(12px, 2vw, 19px);
    border-radius: 50%;

    background:
        conic-gradient(
            from 15deg,
            #222529,
            var(--theme-metal-a),
            #202327,
            #9da1a7,
            #25282c,
            var(--theme-metal-a),
            #1c1f22
        );

    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.23),
        inset 0 0 0 5px rgba(0,0,0,.48),
        inset 0 0 18px rgba(255,255,255,.14),
        0 0 0 2px #050607,
        0 14px 26px rgba(0,0,0,.55);
}

.analogue-bezel::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255,255,255,.07) 0deg .35deg,
            transparent .35deg 1.2deg
        );
    opacity: .48;
    pointer-events: none;
}

.analogue-face {
    overflow: hidden;
    background:
        radial-gradient(
            circle at 42% 32%,
            var(--theme-dial-mid) 0%,
            var(--theme-dial) 53%,
            #020303 79%,
            #111316 100%
        ) !important;

    border: 1px solid rgba(255,255,255,.12);
    box-shadow:
        inset 0 0 0 3px rgba(0,0,0,.8),
        inset 0 0 0 5px rgba(255,255,255,.04),
        inset 0 0 48px rgba(0,0,0,.94);
}

.theme-white .analogue-face {
    background:
        radial-gradient(
            circle at 42% 31%,
            #ffffff 0%,
            var(--theme-dial-mid) 42%,
            var(--theme-dial) 78%,
            #b5b8b8 100%
        ) !important;
    box-shadow:
        inset 0 0 0 3px rgba(0,0,0,.28),
        inset 0 0 0 5px rgba(255,255,255,.68),
        inset 0 0 40px rgba(90,94,96,.28);
}

.dial-inner-ring {
    position: absolute;
    z-index: 2;
    inset: 17%;
    border: 1px solid rgba(var(--theme-accent-rgb), .18);
    border-radius: 50%;
    box-shadow:
        0 0 10px rgba(var(--theme-accent-rgb), .08),
        inset 0 0 10px rgba(var(--theme-accent-rgb), .05);
}

.clock-marker {
    background: rgba(230,232,229,.55);
    box-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.clock-marker.major {
    width: 2px;
    height: 14px;
    background:
        linear-gradient(
            180deg,
            var(--theme-bright),
            rgba(220,222,218,.68)
        );
    box-shadow:
        0 0 5px rgba(var(--theme-accent-rgb), .22),
        0 2px 2px rgba(0,0,0,.76);
}

.clock-marker.quarter {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--theme-bright);
}

.theme-white .clock-marker {
    background: #52575a;
}
.theme-white .clock-marker.major,
.theme-white .clock-marker.quarter {
    background: #17191b;
}

.clock-number {
    z-index: 4;
    color: var(--theme-text);
    font-family:
        Impact, "Arial Narrow",
        sans-serif;
    font-weight: 400;
    letter-spacing: .04em;
    text-shadow:
        0 1px 0 rgba(255,255,255,.2),
        0 2px 3px rgba(0,0,0,.9);
}

.dial-brand {
    position: absolute;
    z-index: 5;
    top: 25.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 52%;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none;
}

.dial-brand-mark {
    width: 26px;
    height: 26px;
    margin-bottom: 5px;
    display: grid;
    place-items: center;

    color: #090a0b;
    background:
        linear-gradient(
            145deg,
            var(--theme-bright),
            var(--theme-soft)
        );
    border: 1px solid rgba(255,255,255,.48);
    border-radius: 50%;

    font-family: Georgia, serif;
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: -.05em;

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.55),
        0 2px 5px rgba(0,0,0,.7);
}

.dial-brand-name {
    color: var(--theme-text);
    font-size: clamp(.48rem, 1.35vw, .72rem);
    font-weight: 800;
    letter-spacing: .18em;
    white-space: nowrap;
    text-shadow: 0 2px 3px rgba(0,0,0,.8);
}

.dial-brand-line {
    margin-top: 3px;
    color: rgba(var(--theme-accent-rgb), .85);
    font-size: clamp(.35rem, .9vw, .48rem);
    font-weight: 700;
    letter-spacing: .2em;
    white-space: nowrap;
}

.theme-white .dial-brand-name,
.theme-white .clock-number,
.theme-white .analogue-time,
.theme-white .analogue-label {
    color: #17191b;
    text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.dial-lume-dots {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.lume {
    position: absolute;
    top: 8.5%;
    left: calc(50% - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform-origin: 3px calc(150px - 13.5%);
    background: var(--theme-lume);
    box-shadow:
        0 0 4px var(--theme-lume),
        0 0 9px rgba(var(--theme-accent-rgb), .44);
}

.lume-1 { transform: rotate(0deg); }
.lume-2 { transform: rotate(30deg); }
.lume-3 { transform: rotate(60deg); }
.lume-4 { transform: rotate(90deg); }
.lume-5 { transform: rotate(120deg); }
.lume-6 { transform: rotate(150deg); }
.lume-7 { transform: rotate(180deg); }
.lume-8 { transform: rotate(210deg); }
.lume-9 { transform: rotate(240deg); }
.lume-10 { transform: rotate(270deg); }
.lume-11 { transform: rotate(300deg); }
.lume-12 { transform: rotate(330deg); }

.countdown-hand {
    z-index: 7;
    filter:
        drop-shadow(2px 3px 2px rgba(0,0,0,.75))
        drop-shadow(0 0 4px rgba(var(--theme-accent-rgb), .22));
}

.countdown-hand::before {
    background:
        linear-gradient(
            90deg,
            var(--theme-soft),
            var(--theme-bright) 48%,
            #ffffff 51%,
            var(--theme-accent) 56%,
            var(--theme-soft)
        ) !important;
    border-radius: 4px 4px 1px 1px;
}

.hand-tip {
    background: var(--theme-bright) !important;
    box-shadow:
        0 0 6px rgba(var(--theme-accent-rgb), .62);
}

.clock-pin {
    z-index: 10;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255,255,255,.28);
    background:
        radial-gradient(
            circle at 35% 28%,
            #ffffff 0%,
            var(--theme-bright) 16%,
            var(--theme-accent) 45%,
            var(--theme-soft) 72%,
            #090a0b 100%
        );
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.52),
        0 3px 6px rgba(0,0,0,.75),
        0 0 10px rgba(var(--theme-accent-rgb), .28);
}

.analogue-centre-readout {
    z-index: 6;
    bottom: 23%;
    padding: 7px 14px 6px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.055),
            rgba(0,0,0,.25)
        );
    border: 1px solid rgba(var(--theme-accent-rgb), .22);
    border-radius: 8px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 4px 9px rgba(0,0,0,.32);
}

.analogue-time {
    color: var(--theme-text);
    font-size: clamp(1.15rem, 4.5vw, 1.8rem);
}

.analogue-label {
    color: rgba(var(--theme-accent-rgb), .9);
    font-size: .42rem;
    font-weight: 800;
    letter-spacing: .25em;
}

.analogue-reflection {
    z-index: 12;
    inset: 7.5%;
    border-radius: 50%;
    background:
        linear-gradient(
            132deg,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.065) 16%,
            transparent 31%,
            transparent 69%,
            rgba(255,255,255,.022) 100%
        );
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Theme transitions */

.digital-display,
.analogue-display,
.flip-display,
.flip-card,
.analogue-face,
.analogue-bezel,
.digital-time,
.flip-value,
.countdown-hand::before,
.clock-pin,
.progress-fill {
    transition:
        color 360ms ease,
        background 360ms ease,
        border-color 360ms ease,
        box-shadow 360ms ease,
        stroke 360ms ease;
}

@media (max-width: 700px) {
    .theme-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }

    .theme-selector {
        width: 100%;
        justify-content: space-between;
    }

    .theme-button {
        width: 38px;
        height: 38px;
    }

    .dial-brand {
        top: 24%;
    }

    .dial-brand-mark {
        width: 22px;
        height: 22px;
    }
}


/* ==================================================
   VOICE CONTROL
================================================== */

.voice-toggle {
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 10px;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );
    color: rgba(255,255,255,.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    letter-spacing: .025em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 5px 14px rgba(0,0,0,.18);
    transition:
        transform 160ms ease,
        border-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.voice-toggle:hover:not(:disabled) {
    transform: translateY(-1px);
    color: #fff;
    border-color:
        rgba(var(--theme-accent-rgb), .45);
}

.voice-toggle:active:not(:disabled) {
    transform: translateY(1px);
}

.voice-toggle.is-active {
    color: var(--theme-accent);
    border-color:
        rgba(var(--theme-accent-rgb), .48);
    background:
        linear-gradient(
            180deg,
            rgba(var(--theme-accent-rgb), .16),
            rgba(var(--theme-accent-rgb), .055)
        );
}

.voice-toggle:disabled {
    opacity: .42;
    cursor: not-allowed;
}

.voice-toggle-icon {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow:
        0 0 0 3px rgba(255,255,255,.055);
}

.voice-toggle.is-listening
.voice-toggle-icon {
    animation:
        voice-toggle-pulse
        1.25s ease-in-out infinite;
}

.voice-status-panel {
    width: min(100%, 640px);
    margin: 13px auto 0;
    padding: 10px 14px;
    border: 1px solid
        rgba(var(--theme-accent-rgb), .18);
    border-radius: 10px;
    background:
        rgba(0,0,0,.24);
    color: rgba(255,255,255,.68);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: .77rem;
    line-height: 1.4;
    text-align: center;
}

.voice-status-panel[hidden] {
    display: none;
}

.voice-listening-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background:
        rgba(255,255,255,.38);
}

.voice-status-panel[data-state="listening"]
.voice-listening-dot {
    background: var(--theme-accent);
    animation:
        voice-status-pulse
        1.2s ease-in-out infinite;
}

.voice-status-panel[data-state="success"] {
    border-color:
        rgba(102, 220, 153, .28);
}

.voice-status-panel[data-state="success"]
.voice-listening-dot {
    background: rgb(102, 220, 153);
}

.voice-status-panel[data-state="warning"] {
    border-color:
        rgba(255, 190, 72, .3);
}

.voice-status-panel[data-state="warning"]
.voice-listening-dot {
    background: rgb(255, 190, 72);
}

.voice-status-panel[data-state="error"],
.voice-status-panel[data-state="unsupported"] {
    border-color:
        rgba(255, 100, 100, .3);
}

.voice-status-panel[data-state="error"]
.voice-listening-dot,
.voice-status-panel[data-state="unsupported"]
.voice-listening-dot {
    background: rgb(255, 100, 100);
}

.voice-command-help {
    width: min(100%, 640px);
    margin: 15px auto 0;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 10px;
    background: rgba(0,0,0,.15);
    overflow: hidden;
}

.voice-command-help summary {
    padding: 11px 14px;
    color: rgba(255,255,255,.68);
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .045em;
    cursor: pointer;
    user-select: none;
}

.voice-command-help[open] summary {
    border-bottom:
        1px solid rgba(255,255,255,.065);
}

.voice-command-grid {
    padding: 13px 14px 7px;
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.voice-command-grid span {
    padding: 7px 8px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.7);
    font-size: .69rem;
    text-align: center;
}

.voice-command-help p {
    margin: 5px 14px 13px;
    color: rgba(255,255,255,.43);
    font-size: .67rem;
    line-height: 1.5;
    text-align: center;
}

@keyframes voice-toggle-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 3px
            rgba(var(--theme-accent-rgb), .08);
    }

    50% {
        box-shadow:
            0 0 0 7px
            rgba(var(--theme-accent-rgb), .18);
    }
}

@keyframes voice-status-pulse {
    0%,
    100% {
        opacity: .65;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

@media (max-width: 700px) {
    .voice-toggle {
        flex: 1 1 auto;
    }

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


/* ==================================================
   SHARED SITE SHELL + DARK DEFAULT
================================================== */
html[data-site-theme="dark"] {
    --page-background: #05070a;
    --card-background: #10151c;
    --text-primary: #f5f7fa;
    --text-secondary: #8f98a5;
    --border-color: rgba(255,255,255,.10);
    --button-background: #141a22;
    --button-hover: #1b232d;
    --shadow: 0 30px 90px rgba(0,0,0,.46);
    color-scheme: dark;
}
html[data-site-theme="light"] { color-scheme: light; }
html[data-site-theme="dark"] body {
    background:
      radial-gradient(circle at 50% -12%, rgba(227,38,54,.11), transparent 34%),
      linear-gradient(180deg,#0c1016,#05070a);
}
html[data-site-theme="dark"] .site-header {
    background: rgba(7,9,13,.86);
    backdrop-filter: blur(18px);
}
html[data-site-theme="dark"] .icon-button,
html[data-site-theme="dark"] .site-header {
    color: var(--text-primary);
}
html[data-site-theme="dark"] .icon-button {
    background: #10151c;
}
html[data-site-theme="dark"] .timer-card {
    background: linear-gradient(150deg,#151b23,#0c1015);
}
.shared-header-actions {
    display:flex;
    align-items:center;
    gap:9px;
}
.all-tools-link {
    min-height:42px;
    padding:0 13px;
    display:inline-flex;
    align-items:center;
    border:1px solid var(--border-color);
    border-radius:999px;
    color:var(--text-primary);
    text-decoration:none;
    font-size:.76rem;
    font-weight:800;
}
.site-theme-toggle { font-size:1.05rem; }
@media(max-width:520px){
    .site-header{padding:0 14px}
    .site-logo{gap:7px}
    .site-logo span:last-child{
        display:inline;
        font-size:.78rem;
        line-height:1;
        white-space:nowrap;
    }
    .all-tools-link{padding:0 9px}
}

/* ==================================================
   VERSION 2 POLISH — COMPLETE THEME-AWARE CONTROLS
================================================== */
html[data-site-theme="dark"]{
    --page-background:var(--site-bg);
    --card-background:var(--site-panel);
    --text-primary:var(--site-text);
    --text-secondary:var(--site-muted);
    --border-color:var(--site-line);
    --button-background:var(--site-control);
    --button-hover:var(--site-control-hover);
    --accent-soft:var(--site-accent-soft);
}
html[data-site-theme="light"]{
    --page-background:var(--site-bg);
    --card-background:var(--site-panel);
    --text-primary:var(--site-text);
    --text-secondary:var(--site-muted);
    --border-color:var(--site-line);
    --button-background:var(--site-control);
    --button-hover:var(--site-control-hover);
    --accent-soft:var(--site-accent-soft);
}
html[data-site-theme="dark"] .site-header,
html[data-site-theme="light"] .site-header{
    background:color-mix(in srgb,var(--site-bg-elevated) 88%,transparent);
    border-color:var(--site-line);
}
html[data-site-theme="dark"] .timer-card,
html[data-site-theme="light"] .timer-card{
    background:linear-gradient(150deg,var(--site-panel-raised),var(--site-panel));
    border-color:var(--site-line);
    box-shadow:var(--site-shadow);
}
.time-input-group input,
.preset-button,
kbd{
    background:var(--site-control);
    color:var(--site-text);
    border-color:var(--site-line-strong);
}
.time-input-group input::placeholder{color:var(--site-disabled-text);opacity:1}
.time-input-group input:hover,.preset-button:hover{background:var(--site-control-hover)}
.time-input-group input:focus{
    background:var(--site-panel-raised);
    color:var(--site-text);
    border-color:var(--accent);
    outline-color:color-mix(in srgb,var(--accent) 28%,transparent);
}
.preset-button.active{
    background:var(--site-accent-soft);
    color:#ff5360;
    border-color:var(--accent);
}
html[data-site-theme="light"] .preset-button.active{color:var(--accent)}
.control-button:not(.primary-button),
.display-mode-button,
.sound-toggle,
.voice-toggle,
.set-button{
    background:var(--site-control);
    color:var(--site-text);
    border-color:var(--site-line-strong);
}
.control-button:not(.primary-button):hover:not(:disabled),
.display-mode-button:hover,
.sound-toggle:hover,
.voice-toggle:hover:not(:disabled){background:var(--site-control-hover)}
.control-button:disabled,
.display-mode-button:disabled,
.sound-toggle:disabled,
.voice-toggle:disabled{
    opacity:1;
    background:var(--site-disabled-bg);
    color:var(--site-disabled-text);
    border-color:var(--site-line);
}
.primary-button{background:var(--accent);color:#fff;border-color:var(--accent)}
.set-button{background:#07090c;color:#fff;border-color:#07090c}
html[data-site-theme="light"] .set-button{background:#11151a;border-color:#11151a;color:#fff}
.keyboard-help{color:var(--site-muted)}
.keyboard-help>span,.keyboard-help>div{display:inline-flex;align-items:center;gap:7px}
kbd{
    min-width:34px;min-height:31px;padding:5px 9px;border-radius:7px;
    border-bottom-width:3px;box-shadow:0 5px 12px rgba(0,0,0,.15);
}
.progress-track{background:color-mix(in srgb,var(--site-text) 9%,transparent)}
.time-settings,.preset-section{border-color:var(--site-line)}

/* ==================================================
   MASTER SITE OVERRIDES — ONE SHARED FRAMEWORK
================================================== */
body[data-accent="red"]{--page-accent:#e32636;--page-accent-rgb:227,38,54}
body[data-accent="blue"]{--page-accent:#45b9ff;--page-accent-rgb:69,185,255}
body[data-accent="green"]{--page-accent:#78a94e;--page-accent-rgb:120,169,78}
body[data-accent="amber"]{--page-accent:#f3a52a;--page-accent-rgb:243,165,42}
body[data-accent="white"]{--page-accent:#ecece7;--page-accent-rgb:236,236,231}
html[data-site-theme="dark"] body.timer-page{
  background:
    radial-gradient(circle at 50% -10%,rgba(var(--page-accent-rgb),.14),transparent 34%),
    linear-gradient(180deg,#0c1016,#05070a);
  transition:background .35s ease;
}
.timer-card{--accent:var(--theme-accent);--accent-hover:var(--theme-bright);}
.timer-card .primary-button,
.timer-card .progress-bar,
.timer-card .progress-fill{background:var(--theme-accent)!important;border-color:var(--theme-accent)!important}
.timer-card .preset-button.active{color:var(--theme-bright)!important;border-color:var(--theme-accent)!important;background:rgba(var(--theme-accent-rgb),.12)!important}
.timer-card .timer-status,.timer-card .theme-name{color:var(--theme-bright)!important}

/* Home page uses unique classes so the countdown remains the master template. */
.home-page{min-height:100vh;background:radial-gradient(circle at 50% -8%,rgba(227,38,54,.12),transparent 30%),linear-gradient(180deg,#0b0e14,#05070a);color:#f5f7fa;font-family:"TCT UI",sans-serif}
.home-shell{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:68px 0 56px}
.home-hero{text-align:center;max-width:820px;margin:0 auto 42px}
.home-eyebrow{margin:0 0 12px;color:#ff3547;font-size:.76rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.home-hero h1{margin:0;font-size:clamp(2.8rem,7vw,5.4rem);line-height:.96;letter-spacing:-.055em}
.home-hero p:last-child{max-width:660px;margin:20px auto 0;color:#98a4b6;font-size:1.05rem;line-height:1.75}
.home-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.home-tool{min-height:340px;padding:18px;display:flex;flex-direction:column;text-decoration:none;color:inherit;background:linear-gradient(150deg,#151b23,#0c1015);border:1px solid rgba(255,255,255,.10);border-radius:24px;box-shadow:0 24px 70px rgba(0,0,0,.25);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
a.home-tool:hover{transform:translateY(-5px);border-color:rgba(227,38,54,.55);box-shadow:0 30px 80px rgba(0,0,0,.38),0 0 28px rgba(227,38,54,.08)}
.home-tool.is-coming{opacity:.72}
.home-visual{height:160px;border-radius:18px;border:1px solid rgba(255,255,255,.09);background:radial-gradient(circle at 50% 28%,rgba(69,185,255,.16),transparent 45%),linear-gradient(180deg,#111923,#05080b);display:grid;place-items:center;position:relative;overflow:hidden}
.home-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.05) 45%,transparent 65%);transform:translateX(-60%)}
.home-digits{font-family:"TCT Display",sans-serif;font-size:4.7rem;letter-spacing:.06em;color:#eaf8ff;text-shadow:0 0 24px rgba(69,185,255,.35)}
.home-mini-label{position:absolute;top:14px;left:16px;color:#7f8b9a;font-size:.6rem;font-weight:800;letter-spacing:.18em}
.home-copy{padding:18px 5px 2px}.home-copy small{color:#ff5360;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.home-copy h2{margin:8px 0 9px;font-size:1.35rem}.home-copy p{margin:0;color:#94a0b0;line-height:1.6;font-size:.9rem}.home-launch{margin-top:auto;padding:18px 5px 3px;color:#fff;font-weight:800}.home-launch span{color:#ff5360}
.home-ad{margin-top:48px}
@media(max-width:900px){.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.home-shell{width:min(100% - 22px,1120px);padding-top:42px}.home-grid{grid-template-columns:1fr}.home-tool{min-height:310px}.home-visual{height:145px}.home-ad{margin-top:30px}}

/* ===== Pomodoro master-template extension ===== */
.pomodoro-card{max-width:780px}.pomodoro-mode-switcher{grid-template-columns:repeat(3,1fr)}.pomodoro-stage{margin-top:18px;padding:8px 0 0;border-radius:20px;background:radial-gradient(circle at 50% 42%,rgba(var(--accent-rgb),.09),transparent 54%)}
.pomodoro-instrument{width:min(470px,100%);aspect-ratio:1;margin:0 auto;position:relative;display:grid;place-items:center}.pomodoro-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.pom-ring-bezel{fill:none;stroke:rgba(255,255,255,.12);stroke-width:18;filter:drop-shadow(0 12px 18px rgba(0,0,0,.7))}.pom-ring-track,.pom-ring-progress{fill:none;stroke-width:9}.pom-ring-track{stroke:rgba(255,255,255,.07)}.pom-ring-progress{stroke:var(--accent);stroke-linecap:round;filter:url(#pomGlow);transition:stroke-dashoffset .2s linear}.pomodoro-dial{width:72%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 42% 32%,rgba(255,255,255,.14),transparent 18%),radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.11),#0b1015 62%,#030506 100%);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 0 8px rgba(0,0,0,.28),inset 0 0 38px rgba(var(--accent-rgb),.13),0 20px 40px rgba(0,0,0,.55)}.pomodoro-brand{text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}.pomodoro-brand strong{font-size:.7rem;letter-spacing:.24em}.pomodoro-brand small{font-size:.48rem;letter-spacing:.22em;color:var(--accent)}.pomodoro-brand .dial-brand-mark{width:25px;height:25px;margin-bottom:4px}.pomodoro-time{font-family:"TCT Display",sans-serif;font-size:clamp(5.2rem,14vw,8rem);line-height:.82;letter-spacing:.025em;text-shadow:0 4px 0 #000,0 0 24px rgba(var(--accent-rgb),.22)}.pomodoro-time .timer-colon{color:var(--accent)}.pomodoro-mode-name{margin-top:12px;color:var(--accent);font-weight:800;font-size:.76rem;letter-spacing:.22em}.pomodoro-message{margin-top:7px;color:var(--muted);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.session-area{display:flex;align-items:center;justify-content:center;gap:16px;margin:2px 0 22px}.session-dots{display:flex;gap:7px}.session-dot{width:12px;height:12px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06)}.session-dot.complete{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.45)}.session-dot.current{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}.session-area strong,.session-area span{display:block}.session-area strong{font-size:.82rem}.session-area span{font-size:.64rem;color:var(--muted);margin-top:4px}.pomodoro-controls{grid-template-columns:1.55fr repeat(3,1fr)}.pomodoro-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}.pomodoro-stats div{padding:14px 10px;text-align:center;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.18)}.pomodoro-stats span,.pomodoro-stats small{display:block;color:var(--muted);font-size:.63rem;text-transform:uppercase;letter-spacing:.11em}.pomodoro-stats strong{display:block;color:var(--accent);font-size:1.55rem;margin:5px 0}.settings-panel{margin-top:18px}.pomodoro-settings{padding:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.pomodoro-settings label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);font-size:.75rem;color:var(--muted)}.pomodoro-settings input[type=number]{width:60px;padding:8px;border-radius:7px;border:1px solid var(--line);background:#080b0f;color:var(--text);text-align:center}.pomodoro-settings .pom-toggle{grid-column:span 2;justify-content:flex-start}.pomodoro-settings input[type=checkbox]{accent-color:var(--accent)}.pomodoro-seo{grid-template-columns:repeat(2,minmax(0,1fr))}.pomodoro-card[data-mode=short] .pomodoro-mode-name,.pomodoro-card[data-mode=long] .pomodoro-mode-name{color:var(--accent)}
html[data-site-theme=light] .pomodoro-dial{background:radial-gradient(circle at 42% 32%,#fff,transparent 20%),radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.08),#e9eef3 64%,#ccd3da 100%);box-shadow:inset 0 0 0 8px rgba(255,255,255,.38),inset 0 0 35px rgba(var(--accent-rgb),.11),0 20px 40px rgba(27,43,58,.2)}html[data-site-theme=light] .pomodoro-time{text-shadow:0 2px 0 #fff,0 0 20px rgba(var(--accent-rgb),.15)}html[data-site-theme=light] .pomodoro-settings input[type=number]{background:#fff}
@media(max-width:700px){.pomodoro-toolbar{grid-template-columns:1fr}.pomodoro-mode-switcher{width:100%}.pomodoro-controls{grid-template-columns:repeat(3,1fr)}.pomodoro-controls .primary-button{grid-column:1/-1}.pomodoro-seo{grid-template-columns:1fr}}@media(max-width:520px){.pomodoro-instrument{width:100%}.pomodoro-time{font-size:5.1rem}.pomodoro-brand strong{font-size:.56rem}.pomodoro-settings{grid-template-columns:1fr}.pomodoro-settings .pom-toggle{grid-column:auto}.session-area{gap:10px}.session-area span{font-size:.56rem}}

/* ==================================================
   BEEP TEST PAGE
================================================== */
.beep-page{--beep-accent:#90ff38;--beep-rgb:144,255,56;background:radial-gradient(circle at 50% 0,rgba(var(--beep-rgb),.09),transparent 34%),var(--site-bg);color:var(--site-text)}
.beep-page.theme-red{--beep-accent:#ef3042;--beep-rgb:239,48,66}.beep-page.theme-blue{--beep-accent:#49b8ff;--beep-rgb:73,184,255}.beep-page.theme-green{--beep-accent:#90ff38;--beep-rgb:144,255,56}.beep-page.theme-amber{--beep-accent:#ffb533;--beep-rgb:255,181,51}.beep-page.theme-white{--beep-accent:#f1f4f7;--beep-rgb:241,244,247}
.beep-page .logo-icon{background:rgba(var(--beep-rgb),.12);color:var(--beep-accent);border:1px solid rgba(var(--beep-rgb),.35)}
.beep-main{width:min(980px,calc(100% - 28px));margin:0 auto;padding-bottom:36px}.beep-heading{text-align:center;padding:54px 18px 30px}.beep-heading .eyebrow{color:var(--beep-accent);font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.beep-heading h1{font-family:"TCT Display",sans-serif;font-size:clamp(4rem,9vw,7rem);font-weight:400;line-height:.88;letter-spacing:.015em;margin:10px 0 17px}.beep-heading p:last-child{color:var(--site-muted);font-size:clamp(.92rem,2vw,1.08rem)}
.beep-card{border:1px solid var(--site-line);border-radius:26px;background:linear-gradient(155deg,color-mix(in srgb,var(--site-panel-raised) 92%,rgba(var(--beep-rgb),.05)),var(--site-panel));box-shadow:var(--site-shadow),0 0 70px rgba(var(--beep-rgb),.06);padding:26px;overflow:hidden}.beep-card-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.beep-status{color:var(--beep-accent);font-size:.72rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.beep-utility{display:flex;gap:8px}.beep-utility button{min-height:42px;padding:0 14px;border:1px solid var(--site-line-strong);border-radius:11px;background:var(--site-control);color:var(--site-text);font-weight:800;cursor:pointer}.beep-utility button.active{color:var(--beep-accent);border-color:rgba(var(--beep-rgb),.48);background:rgba(var(--beep-rgb),.08)}
.beep-finish{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 15px;margin-bottom:18px;border:1px solid var(--site-line);border-radius:14px;background:color-mix(in srgb,var(--site-control) 70%,transparent)}.beep-finish-title{display:flex;align-items:center;gap:10px}.beep-finish-title span:first-child{color:var(--site-muted);font-size:.64rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.beep-finish-name{color:var(--beep-accent);font-size:.8rem;font-weight:800}.beep-swatches{display:flex;gap:9px}.beep-swatch{width:27px;height:27px;border:4px solid var(--site-panel);border-radius:50%;box-shadow:0 0 0 1px var(--site-line-strong);cursor:pointer}.beep-swatch.active{box-shadow:0 0 0 2px var(--beep-accent),0 0 18px rgba(var(--beep-rgb),.42)}.beep-swatch[data-theme=red]{background:#ef3042}.beep-swatch[data-theme=blue]{background:#49b8ff}.beep-swatch[data-theme=green]{background:#90ff38}.beep-swatch[data-theme=amber]{background:#ffb533}.beep-swatch[data-theme=white]{background:#f1f4f7}
.beep-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.beep-metric{min-height:160px;padding:24px 14px;border:1px solid var(--site-line);border-radius:17px;background:rgba(0,0,0,.14);text-align:center;display:grid;align-content:center}.beep-metric-label,.beep-next-label{color:var(--site-muted);font-size:.62rem;font-weight:900;letter-spacing:.19em;text-transform:uppercase}.beep-metric strong{display:block;margin-top:8px;font-family:"TCT Display",sans-serif;font-size:clamp(4.5rem,12vw,7.2rem);font-weight:400;line-height:.84;font-variant-numeric:tabular-nums}.beep-metric strong small{color:var(--site-muted);font-family:"TCT UI",sans-serif;font-size:.22em;font-weight:800}.beep-metric strong .metric-total{color:var(--site-muted);font-family:"TCT UI",sans-serif;font-size:.25em;font-weight:800}
.beep-track{display:grid;grid-template-columns:46px 1fr 46px;align-items:center;margin:30px 0 18px}.beep-line{height:62px;border:2px solid var(--beep-accent);display:grid;place-items:center;color:var(--beep-accent);font-weight:900}.beep-lane{height:62px;position:relative;border-top:1px solid var(--site-line);border-bottom:1px solid var(--site-line);background:repeating-linear-gradient(90deg,transparent 0 9.5%,rgba(255,255,255,.055) 10%);overflow:hidden}.beep-runner{position:absolute;z-index:2;left:8px;top:50%;width:14px;height:14px;border-radius:50%;transform:translateY(-50%);background:var(--beep-accent);box-shadow:0 0 17px var(--beep-accent)}.beep-lane-fill{height:100%;width:0;background:linear-gradient(90deg,rgba(var(--beep-rgb),.02),rgba(var(--beep-rgb),.18))}.beep-card.is-running .beep-runner{transition-property:left;transition-timing-function:linear}
.beep-next{text-align:center;padding-top:2px}.beep-next strong{display:block;min-height:48px;margin-top:3px;font-family:"TCT Display",sans-serif;font-size:3.2rem;font-weight:400;font-variant-numeric:tabular-nums}.beep-progress{height:6px;margin:13px 0 17px;border-radius:99px;background:var(--site-control);overflow:hidden}.beep-progress span{display:block;width:0;height:100%;background:var(--beep-accent);box-shadow:0 0 12px rgba(var(--beep-rgb),.5)}.beep-message{min-height:24px;text-align:center;color:var(--site-muted);font-size:.86rem}
.beep-controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:22px}.beep-controls button{min-height:54px;border:1px solid var(--site-line-strong);border-radius:13px;background:var(--site-control);color:var(--site-text);font-weight:900;cursor:pointer;transition:transform .16s ease,background .18s ease}.beep-controls button:hover:not(:disabled){transform:translateY(-1px);background:var(--site-control-hover)}.beep-controls .primary{background:var(--beep-accent);border-color:var(--beep-accent);color:#071006;box-shadow:0 10px 30px rgba(var(--beep-rgb),.2)}.beep-controls button:disabled{background:var(--site-disabled-bg);color:var(--site-disabled-text);border-color:var(--site-line)}
.beep-result{margin-top:18px;padding:28px;border:1px solid rgba(var(--beep-rgb),.3);border-radius:20px;background:rgba(var(--beep-rgb),.06);text-align:center}.beep-result .eyebrow{color:var(--beep-accent);font-size:.65rem;font-weight:900;letter-spacing:.18em}.beep-result h2{font-size:clamp(2.7rem,8vw,4.5rem);margin:6px 0}.beep-result-details{display:flex;justify-content:center;gap:28px;color:var(--site-muted)}
.beep-keyboard{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:22px 0 0;color:var(--site-muted);font-size:.76rem}.beep-info{margin:65px auto 20px}.beep-info h2{text-align:center;font-size:clamp(1.8rem,4vw,2.5rem);margin-bottom:25px}.beep-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.beep-step{padding:20px;border:1px solid var(--site-line);border-radius:14px;background:color-mix(in srgb,var(--site-panel) 72%,transparent);color:var(--site-muted);line-height:1.65}.beep-step b{color:var(--beep-accent);margin-right:8px}.beep-warning{margin-top:16px;padding:18px;border-left:3px solid #ffc34e;background:rgba(255,195,78,.06);color:var(--site-muted);line-height:1.65;font-size:.84rem}.beep-seo{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;margin:58px auto 15px;padding-top:45px;border-top:1px solid var(--site-line)}.beep-seo article{color:var(--site-muted);line-height:1.75}.beep-seo h2{color:var(--site-text);font-size:1.3rem;margin-bottom:10px}.beep-seo p+p{margin-top:12px}.beep-faq{grid-column:1/-1}.beep-faq details{border-top:1px solid var(--site-line);padding:14px 0}.beep-faq summary{color:var(--site-text);font-weight:800;cursor:pointer}.beep-faq details p{padding-top:9px}
@media(max-width:680px){.beep-heading{padding-top:38px}.beep-card{padding:18px 13px;border-radius:21px}.beep-card-top{align-items:flex-start}.beep-utility{flex-direction:column}.beep-utility button{min-height:38px}.beep-finish{align-items:flex-start}.beep-finish-title{display:block}.beep-finish-name{display:block;margin-top:4px}.beep-metrics{gap:6px}.beep-metric{min-height:125px;padding:16px 4px}.beep-metric strong{font-size:15vw}.beep-track{grid-template-columns:36px 1fr 36px}.beep-line,.beep-lane{height:54px}.beep-controls{gap:7px}.beep-controls button{font-size:.8rem}.beep-steps,.beep-seo{grid-template-columns:1fr}.beep-faq{grid-column:auto}.beep-result-details{gap:14px;font-size:.82rem}}
@media(max-width:410px){.beep-main{width:min(100% - 16px,980px)}.beep-card{padding:14px 9px}.beep-swatches{gap:6px}.beep-swatch{width:24px;height:24px}.beep-controls button{font-size:.72rem}.beep-metric-label{font-size:.52rem}.beep-keyboard{gap:10px}}

/* ==========================================================
   STOPWATCH — premium sports chronograph
========================================================== */
.stopwatch-page{--accent:#ff3b43;--accent-rgb:255,59,67;background:radial-gradient(circle at 50% 0,rgba(var(--accent-rgb),.12),transparent 29%),var(--site-bg);min-height:100vh}
.stopwatch-page.theme-blue{--accent:#42b8ff;--accent-rgb:66,184,255}.stopwatch-page.theme-green{--accent:#79d65b;--accent-rgb:121,214,91}.stopwatch-page.theme-amber{--accent:#ffb638;--accent-rgb:255,182,56}.stopwatch-page.theme-white{--accent:#edf2f5;--accent-rgb:237,242,245}
.stopwatch-main{width:min(930px,calc(100% - 28px));margin:0 auto}.stopwatch-heading{text-align:center;padding:52px 18px 28px}.stopwatch-heading .eyebrow,.stopwatch-status,.stopwatch-finish-name,.lap-kicker{color:var(--accent)}.stopwatch-heading h1{font-size:clamp(3.7rem,9vw,6.5rem);line-height:.95;margin:8px 0 13px}.stopwatch-heading>p:last-child{color:var(--site-muted);margin:0}
.stopwatch-card{padding:25px;border:1px solid var(--site-line);border-radius:28px;background:linear-gradient(155deg,var(--site-panel-2),var(--site-panel));box-shadow:var(--site-shadow);position:relative;overflow:hidden}.stopwatch-card:before{content:"";position:absolute;inset:-180px 20% auto;height:220px;background:radial-gradient(circle,rgba(var(--accent-rgb),.17),transparent 68%);pointer-events:none}.stopwatch-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;position:relative;z-index:1}.stopwatch-status{text-transform:uppercase;letter-spacing:.18em;font-size:.76rem;font-weight:800}.stopwatch-utility{display:flex;gap:8px}.stopwatch-utility button,.stopwatch-controls button,.lap-clear{font:inherit;color:var(--site-text);background:var(--site-control-bg);border:1px solid var(--site-line);border-radius:12px;cursor:pointer;font-weight:800}.stopwatch-utility button{min-height:42px;padding:0 13px}.stopwatch-utility button.active{color:var(--accent);border-color:rgba(var(--accent-rgb),.48);background:rgba(var(--accent-rgb),.09)}
.stopwatch-finish{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:18px 0;padding:13px 15px;border:1px solid var(--site-line);border-radius:14px;background:var(--site-control-bg)}.stopwatch-finish-title{display:flex;gap:10px;align-items:center;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;font-weight:800;color:var(--site-muted)}.stopwatch-swatches{display:flex;gap:9px}.stopwatch-swatch{width:25px;height:25px;border-radius:50%;border:2px solid rgba(255,255,255,.18);cursor:pointer;background:#ff3b43;box-shadow:inset 0 1px 4px #fff5,0 2px 7px #0008}.stopwatch-swatch[data-theme=blue]{background:#42b8ff}.stopwatch-swatch[data-theme=green]{background:#79d65b}.stopwatch-swatch[data-theme=amber]{background:#ffb638}.stopwatch-swatch[data-theme=white]{background:#edf2f5}.stopwatch-swatch.active{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 17px rgba(var(--accent-rgb),.55)}
.chrono-shell{width:min(560px,92vw);aspect-ratio:1;margin:18px auto 15px;border-radius:50%;padding:17px;background:repeating-conic-gradient(from -1deg,#3a414a 0 1deg,#11151a 1deg 5deg);box-shadow:0 28px 65px #000b,inset 0 0 0 2px #ffffff24,inset 0 0 0 7px #080a0d}.chrono-bezel{height:100%;border-radius:50%;padding:17px;background:linear-gradient(145deg,#69717a,#171b20 25%,#07090c 68%,#343a41);box-shadow:inset 0 0 0 2px #ffffff33}.chrono-dial{height:100%;border-radius:50%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 47% 35%,#26303a 0,#10151b 43%,#030506 77%);border:2px solid rgba(var(--accent-rgb),.3);box-shadow:inset 0 0 55px #000,inset 0 0 0 8px #0007}.chrono-dial:before{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid #ffffff13}.chrono-dial:after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#ffffff12,transparent 31%,transparent 67%,#ffffff05);pointer-events:none}.chrono-ticks{position:absolute;inset:4%;border-radius:50%;background:repeating-conic-gradient(#ffffff85 0 .65deg,transparent .65deg 6deg);mask:radial-gradient(transparent 71%,#000 72%)}.chrono-accent-ring{position:absolute;inset:10%;border:4px solid var(--accent);border-radius:50%;filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),.55));opacity:.88}.chrono-brand{position:absolute;top:23%;display:flex;flex-direction:column;align-items:center;gap:4px;z-index:2}.chrono-brand strong{font-size:.78rem;letter-spacing:.2em}.chrono-brand span{font-size:.48rem;letter-spacing:.26em;color:var(--accent)}.chrono-state{position:absolute;top:34%;display:flex;align-items:center;gap:7px;color:var(--site-muted);font-size:.62rem;letter-spacing:.17em;font-weight:800;z-index:2}.chrono-state i{width:8px;height:8px;border-radius:50%;background:#68717d}.is-running .chrono-state i{background:#64db91;box-shadow:0 0 13px #64db91}.is-paused .chrono-state i{background:#ffc35b;box-shadow:0 0 10px #ffc35b}.chrono-time{z-index:2;display:flex;align-items:baseline;font-variant-numeric:tabular-nums;margin-top:4%}.chrono-time strong{font-family:"TCT Display",sans-serif;font-size:clamp(5.8rem,15vw,9.8rem);font-weight:400;line-height:.85;letter-spacing:.025em;color:#f7fbff;text-shadow:0 3px 0 #000,0 0 22px rgba(var(--accent-rgb),.12)}.chrono-time small{font-size:clamp(1.35rem,4vw,2.35rem);color:var(--accent);font-weight:800}.chrono-lap{position:absolute;bottom:21%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px}.chrono-lap span{font-size:.52rem;letter-spacing:.2em;color:var(--site-muted)}.chrono-lap b{font-size:1rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}.chrono-hand{position:absolute;left:50%;top:50%;width:2px;height:31%;transform-origin:50% 0;transform:rotate(180deg);background:linear-gradient(var(--accent),transparent);box-shadow:0 0 8px rgba(var(--accent-rgb),.6);z-index:1;transition:transform .06s linear}.chrono-pin{position:absolute;left:50%;top:50%;width:17px;height:17px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 32%,#111 72%);z-index:3;box-shadow:0 0 12px rgba(var(--accent-rgb),.6)}
.stopwatch-progress{height:6px;border-radius:10px;background:#ffffff0b;overflow:hidden;margin:8px 0 18px}.stopwatch-progress span{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.55)}.stopwatch-controls{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:10px}.stopwatch-controls button{min-height:53px}.stopwatch-controls .primary{background:var(--accent);border-color:var(--accent);color:#080a0d;box-shadow:0 8px 27px rgba(var(--accent-rgb),.22)}.stopwatch-controls button:disabled,.lap-clear:disabled{opacity:1;background:var(--site-disabled-bg);color:var(--site-disabled-text);border-color:var(--site-line);cursor:not-allowed}.stopwatch-controls button:hover:not(:disabled),.lap-clear:hover:not(:disabled),.stopwatch-utility button:hover{transform:translateY(-1px)}
.stopwatch-keyboard{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:19px 0 0;color:var(--site-muted);font-size:.7rem}.stopwatch-keyboard span{display:flex;gap:7px;align-items:center}.lap-panel{margin:22px 0;padding:24px;border:1px solid var(--site-line);border-radius:22px;background:var(--site-panel);box-shadow:var(--site-shadow)}.lap-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.lap-kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.64rem;font-weight:800;margin:0}.lap-heading h2{margin:5px 0 0}.lap-clear{height:40px;padding:0 15px}.lap-empty{text-align:center;padding:34px;color:var(--site-muted)}.lap-list{list-style:none;margin:18px 0 0;padding:0}.lap-list li{display:grid;grid-template-columns:80px 1fr 1fr;gap:12px;border-top:1px solid var(--site-line);padding:14px 10px;font-variant-numeric:tabular-nums}.lap-list li span:nth-child(2){color:var(--site-muted)}.lap-list li b{text-align:right}.lap-list li.best b{color:#68dd93}.lap-list li.slow b{color:#ff9e62}.stopwatch-info{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 42px;padding:55px 15px 70px}.stopwatch-info article{color:var(--site-muted);line-height:1.75}.stopwatch-info h2{color:var(--site-text);font-size:1.25rem}.stopwatch-info .wide{grid-column:1/-1}.stopwatch-info details{border-top:1px solid var(--site-line);padding:12px 0}.stopwatch-info summary{color:var(--site-text);cursor:pointer;font-weight:800}
@media(max-width:650px){.stopwatch-card{padding:16px 11px;border-radius:21px}.stopwatch-toolbar{align-items:flex-start}.stopwatch-utility{flex-direction:column}.stopwatch-finish{align-items:flex-start}.stopwatch-finish-title{flex-direction:column;align-items:flex-start;gap:4px}.chrono-shell{padding:10px}.chrono-bezel{padding:10px}.chrono-time strong{font-size:18vw}.stopwatch-controls{gap:6px}.stopwatch-keyboard{display:none}.lap-panel{padding:18px 12px}.lap-list li{grid-template-columns:58px 1fr 1fr;font-size:.76rem}.stopwatch-info{grid-template-columns:1fr}.stopwatch-info .wide{grid-column:auto}}

/* Kitchen timer */
.kitchen-stage{min-height:430px;margin-top:18px;border:3px solid rgba(var(--accent-rgb),.35);border-radius:22px;background:radial-gradient(circle at 50% 15%,rgba(var(--accent-rgb),.09),transparent 36%),linear-gradient(#11161b,#050607);display:grid;place-items:center;overflow:hidden;position:relative;box-shadow:inset 0 0 45px #000,0 0 26px rgba(var(--accent-rgb),.12)}
.kitchen-stage>[aria-hidden=true]{display:none}.kitchen-digital{text-align:center}.kitchen-digital span{display:block;font-family:"TCT Display",sans-serif;font-size:clamp(7rem,17vw,12rem);line-height:.88;color:var(--accent);letter-spacing:.03em;text-shadow:0 0 24px rgba(var(--accent-rgb),.45),0 5px #000}.kitchen-digital small{display:block;margin-top:22px;letter-spacing:.3em;color:#99a4af;font-size:.68rem;font-weight:800}.kitchen-stage[data-display=analogue] .kitchen-digital,.kitchen-stage[data-display=flip] .kitchen-digital{display:none}.kitchen-stage[data-display=analogue] .kitchen-analogue,.kitchen-stage[data-display=flip] .kitchen-flip{display:flex}
.kitchen-flip{align-items:center;justify-content:center;gap:10px}.kitchen-flip span{width:112px;height:170px;border-radius:14px;background:linear-gradient(#1c2730 49.3%,#050708 50%);border:4px solid #020304;box-shadow:inset 0 0 0 2px #ffffff0e,0 12px 20px #000;display:grid;place-items:center;font-family:"TCT Display",sans-serif;font-size:8.5rem;color:#eef7fa;text-shadow:0 3px #000;position:relative}.kitchen-flip span:after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#000}.kitchen-flip b{font-size:4rem;color:var(--accent);text-shadow:0 0 16px rgba(var(--accent-rgb),.65)}
.kitchen-analogue{align-items:center;justify-content:center;width:100%;height:100%}.kitchen-clock{width:min(370px,82vw);aspect-ratio:1;border-radius:50%;position:relative;background:radial-gradient(circle at 44% 35%,#fffef7 0,#e9e1ce 52%,#c8bda7 100%);border:17px solid #cfc6b3;box-shadow:inset 0 0 0 3px #817867,inset 0 0 28px #6a604d55,0 22px 35px #000c,0 0 0 5px #4b4438}.kitchen-ticks{position:absolute;inset:7%;border-radius:50%;background:repeating-conic-gradient(#292820 0 .8deg,transparent .8deg 6deg);mask:radial-gradient(transparent 72%,#000 73%)}.kitchen-numbers i{position:absolute;font-style:normal;font-weight:800;color:#343128;font-size:1.15rem}.kitchen-numbers i:nth-child(1){top:7%;left:47%}.kitchen-numbers i:nth-child(2){right:8%;top:47%}.kitchen-numbers i:nth-child(3){bottom:7%;left:46%}.kitchen-numbers i:nth-child(4){left:8%;top:47%}.kitchen-brand{position:absolute;top:29%;width:100%;text-align:center;color:#343128;font-weight:800;font-size:.82rem;letter-spacing:.18em}.kitchen-brand small{display:block;font-size:.52rem;margin-top:5px;letter-spacing:.25em;color:#847b68}.kitchen-hand{position:absolute;left:50%;top:50%;width:4px;height:35%;transform-origin:50% 0;background:linear-gradient(var(--accent),#7a0d0d);border-radius:4px;box-shadow:0 0 8px rgba(var(--accent-rgb),.55)}.kitchen-hand:after{content:"";position:absolute;bottom:-10px;left:-4px;border-left:6px solid transparent;border-right:6px solid transparent;border-top:14px solid var(--accent)}.kitchen-pin{position:absolute;left:50%;top:50%;width:25px;height:25px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 42%,#333 75%);box-shadow:0 2px 6px #000}.kitchen-readout{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);background:#39352d;color:#fff8e9;border:2px solid #9c917c;padding:8px 16px;border-radius:7px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 10px #000}
body[data-accent=red]{--page-accent:#ef3340}body[data-accent=blue]{--page-accent:#49b8ff}body[data-accent=green]{--page-accent:#77a84c}body[data-accent=amber]{--page-accent:#f3a62b}body[data-accent=white]{--page-accent:#f3f4ee}body[data-accent] .eyebrow{color:var(--page-accent)}body[data-accent] .heading-area:before{background:radial-gradient(circle,var(--page-accent) 0,transparent 68%)}
@media(max-width:700px){.kitchen-stage{min-height:350px}.kitchen-flip{gap:4px}.kitchen-flip span{width:21vw;height:32vw;font-size:20vw}.kitchen-flip b{font-size:10vw}.kitchen-clock{width:min(310px,82vw)}}

/* ==================================================
   HOMEPAGE V2 — ICON-LED TOOL DIRECTORY
================================================== */
.home-page-v2{--home-accent:#ff3547;--home-accent-rgb:255,53,71;min-height:100vh;background:radial-gradient(circle at 50% -4%,rgba(var(--home-accent-rgb),.12),transparent 28%),linear-gradient(180deg,#090c11 0,#05070a 55%,#07090d 100%);color:#f5f7fa;font-family:"TCT UI",sans-serif}
.home-page-v2 main{overflow:hidden}.home-header{background:rgba(7,10,14,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}.home-header-actions{display:flex;align-items:center;gap:9px}.home-header-link{min-height:42px;padding:0 15px;display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#f5f7fa;text-decoration:none;font-size:.76rem;font-weight:800}.home-page-v2 .icon-button{color:#f5f7fa;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.home-hero-v2{width:min(1160px,calc(100% - 32px));min-height:630px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:82px 20px 70px}.home-hero-glow{position:absolute;width:620px;height:620px;top:-285px;left:50%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--home-accent-rgb),.19),transparent 66%);filter:blur(8px);pointer-events:none}.home-hero-v2>*:not(.home-hero-glow){position:relative;z-index:1}.home-hero-v2 .home-eyebrow{margin-bottom:19px}.home-hero-v2 h1{margin:0;max-width:960px;font-size:clamp(3.9rem,8.4vw,7.4rem);line-height:.88;letter-spacing:-.065em}.home-hero-v2 h1 span{color:var(--home-accent)}.home-hero-lead{max-width:720px;margin:28px auto 0;color:#a0abb9;font-size:clamp(1rem,2vw,1.2rem);line-height:1.75}.home-hero-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:34px}.home-primary-cta,.home-secondary-cta{min-height:54px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:13px;border-radius:14px;text-decoration:none;font-weight:800}.home-primary-cta{background:var(--home-accent);color:#fff;box-shadow:0 14px 38px rgba(var(--home-accent-rgb),.23)}.home-primary-cta span{font-size:1.25rem}.home-secondary-cta{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);color:#fff}.home-trust-row{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 28px;margin-top:31px;color:#7f8b9c;font-size:.78rem;font-weight:700}.home-trust-row span{display:inline-flex;align-items:center;gap:7px}.home-trust-row b{color:var(--home-accent)}
.home-tools-section{width:min(1160px,calc(100% - 32px));margin:0 auto;padding:86px 0 36px}.home-section-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(270px,.75fr);gap:70px;align-items:end;margin-bottom:28px}.home-section-kicker{margin:0 0 10px;color:var(--home-accent);font-size:.7rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase}.home-section-heading h2,.home-use-intro h2,.home-feature-banner h2,.home-faq-heading h2{margin:0;font-size:clamp(2rem,4.5vw,3.8rem);line-height:1.05;letter-spacing:-.045em}.home-section-heading>p{margin:0;color:#929dab;line-height:1.7}.home-icon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.home-icon-card{position:relative;min-height:390px;padding:25px;display:flex;flex-direction:column;color:inherit;text-decoration:none;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:linear-gradient(155deg,#141a22,#0b0f14);box-shadow:0 22px 65px rgba(0,0,0,.24);overflow:hidden;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.home-icon-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 22%,rgba(var(--card-rgb),.11),transparent 42%);opacity:.7;transition:opacity .22s ease}.home-icon-card:hover{transform:translateY(-6px);border-color:rgba(var(--card-rgb),.55);box-shadow:0 30px 80px rgba(0,0,0,.36),0 0 35px rgba(var(--card-rgb),.08)}.home-icon-card:hover:before{opacity:1}.home-icon-card>*{position:relative;z-index:1}.home-card-icon{height:190px;display:grid;place-items:center}.home-card-icon-mask{display:block;width:132px;height:132px;background:rgb(var(--card-rgb));-webkit-mask:var(--icon-url) center/contain no-repeat;mask:var(--icon-url) center/contain no-repeat;filter:drop-shadow(0 0 17px rgba(var(--card-rgb),.22));transition:transform .25s ease,filter .25s ease}.home-icon-card:hover .home-card-icon-mask{transform:translateY(-4px) scale(1.025);filter:drop-shadow(0 0 22px rgba(var(--card-rgb),.32))}.home-card-copy{margin-top:auto}.home-card-tag{display:block;color:rgb(var(--card-rgb));font-size:.65rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.home-card-copy h3{margin:9px 0 8px;font-size:1.46rem}.home-card-copy p{margin:0;max-width:29ch;color:#929eae;font-size:.88rem;line-height:1.62}.home-card-arrow{position:absolute;right:22px;bottom:23px;color:rgb(var(--card-rgb));font-size:1.35rem;font-weight:800;transition:transform .2s ease}.home-icon-card:hover .home-card-arrow{transform:translateX(4px)}.card-countdown{--card-rgb:255,65,80}.card-stopwatch{--card-rgb:69,185,255}.card-pomodoro{--card-rgb:255,177,54}.card-kitchen{--card-rgb:132,189,82}.card-interval{--card-rgb:255,74,74}.card-beep{--card-rgb:151,255,66}.card-chess{--card-rgb:182,136,255}.home-ad-v2{width:min(1160px,calc(100% - 32px));margin:62px auto 0}
.home-use-cases{width:min(1160px,calc(100% - 32px));margin:0 auto;padding:115px 0 65px}.home-use-intro{max-width:760px;margin-bottom:35px}.home-use-intro>p:last-child{max-width:670px;color:#939ead;line-height:1.75}.home-use-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.home-use-grid article{position:relative;padding:28px 28px 30px 77px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.025)}.home-use-grid article>span{position:absolute;left:25px;top:31px;color:var(--home-accent);font-size:.73rem;font-weight:800}.home-use-grid h3{margin:0 0 8px;font-size:1.08rem}.home-use-grid p{margin:0;color:#929dab;line-height:1.7;font-size:.9rem}
.home-feature-banner{width:min(1160px,calc(100% - 32px));margin:45px auto 0;padding:38px;display:grid;grid-template-columns:105px 1fr auto;gap:30px;align-items:center;border:1px solid rgba(var(--home-accent-rgb),.25);border-radius:25px;background:radial-gradient(circle at 7% 50%,rgba(var(--home-accent-rgb),.14),transparent 30%),linear-gradient(145deg,#161b23,#0a0e13);box-shadow:0 25px 75px rgba(0,0,0,.25)}.home-feature-mark{width:96px;height:96px;border:1px solid rgba(var(--home-accent-rgb),.45);border-radius:50%;display:grid;place-items:center;color:var(--home-accent);font-family:"TCT Display",sans-serif;font-size:2.2rem;letter-spacing:.08em;box-shadow:inset 0 0 0 9px rgba(var(--home-accent-rgb),.05),0 0 24px rgba(var(--home-accent-rgb),.12)}.home-feature-banner h2{font-size:clamp(1.65rem,3vw,2.7rem)}.home-feature-banner p:last-child{margin:12px 0 0;color:#919dab;line-height:1.65}.home-feature-banner>a{min-height:48px;padding:0 18px;display:inline-flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.14);border-radius:13px;color:#fff;text-decoration:none;font-weight:800;white-space:nowrap}.home-feature-banner>a span{color:var(--home-accent)}
.home-faq{width:min(960px,calc(100% - 32px));margin:0 auto;padding:115px 0 105px}.home-faq-heading{text-align:center;margin-bottom:32px}.home-faq-list{display:grid;gap:10px}.home-faq-list details{border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.025);overflow:hidden}.home-faq-list summary{padding:20px 22px;cursor:pointer;font-weight:800;list-style:none}.home-faq-list summary::-webkit-details-marker{display:none}.home-faq-list summary:after{content:"+";float:right;color:var(--home-accent);font-size:1.15rem}.home-faq-list details[open] summary:after{content:"–"}.home-faq-list details p{margin:0;padding:0 22px 21px;color:#939ead;line-height:1.7}.home-footer{width:min(1160px,calc(100% - 32px));margin:0 auto;padding:34px 0;display:flex;align-items:flex-end;justify-content:space-between;border-top:1px solid rgba(255,255,255,.08);text-align:left}.home-footer .site-logo{display:inline-flex}.home-footer p{margin:8px 0 0;color:#707b89;font-size:.75rem}
html[data-site-theme=light] .home-page-v2{--home-accent:#e32636;--home-accent-rgb:227,38,54;background:radial-gradient(circle at 50% -4%,rgba(var(--home-accent-rgb),.09),transparent 28%),linear-gradient(180deg,#fff,#f0f3f6);color:#171b21}.home-page-v2[data-unused]{display:block}html[data-site-theme=light] .home-header{background:rgba(250,252,253,.84);border-color:rgba(24,32,43,.12)}html[data-site-theme=light] .home-header-link,html[data-site-theme=light] .home-page-v2 .icon-button{color:#171b21;background:#fff;border-color:rgba(24,32,43,.14)}html[data-site-theme=light] .home-hero-lead,html[data-site-theme=light] .home-section-heading>p,html[data-site-theme=light] .home-card-copy p,html[data-site-theme=light] .home-use-intro>p:last-child,html[data-site-theme=light] .home-use-grid p,html[data-site-theme=light] .home-feature-banner p:last-child,html[data-site-theme=light] .home-faq-list details p{color:#66717e}html[data-site-theme=light] .home-icon-card{background:linear-gradient(155deg,#fff,#f4f6f8);border-color:rgba(24,32,43,.12);box-shadow:0 22px 60px rgba(22,36,50,.1)}html[data-site-theme=light] .home-use-grid article,html[data-site-theme=light] .home-faq-list details{background:#fff;border-color:rgba(24,32,43,.1)}html[data-site-theme=light] .home-feature-banner{background:radial-gradient(circle at 7% 50%,rgba(var(--home-accent-rgb),.08),transparent 30%),linear-gradient(145deg,#fff,#eef1f4);border-color:rgba(var(--home-accent-rgb),.18)}html[data-site-theme=light] .home-feature-banner>a{color:#171b21;background:#fff;border-color:rgba(24,32,43,.14)}html[data-site-theme=light] .home-secondary-cta{color:#171b21;background:#fff;border-color:rgba(24,32,43,.15)}html[data-site-theme=light] .home-footer{border-color:rgba(24,32,43,.1)}
@media(max-width:960px){.home-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-section-heading{grid-template-columns:1fr;gap:15px}.home-feature-banner{grid-template-columns:82px 1fr}.home-feature-mark{width:76px;height:76px}.home-feature-banner>a{grid-column:2;justify-self:start}.home-hero-v2{min-height:560px}}
@media(max-width:640px){.home-header-link{display:none}.home-hero-v2{width:min(100% - 22px,1160px);min-height:520px;padding:62px 4px 52px}.home-hero-v2 h1{font-size:clamp(3.15rem,16vw,4.7rem)}.home-hero-lead{font-size:.97rem}.home-hero-actions{width:100%;flex-direction:column}.home-primary-cta,.home-secondary-cta{width:100%}.home-trust-row{gap:11px 15px;font-size:.7rem}.home-tools-section,.home-use-cases{width:min(100% - 22px,1160px);padding-top:65px}.home-icon-grid{grid-template-columns:1fr}.home-icon-card{min-height:330px;padding:21px}.home-card-icon{height:150px}.home-card-icon-mask{width:112px;height:112px}.home-card-copy p{padding-right:25px}.home-use-grid{grid-template-columns:1fr}.home-use-grid article{padding-left:65px}.home-feature-banner{width:min(100% - 22px,1160px);padding:25px;grid-template-columns:1fr}.home-feature-mark{width:72px;height:72px}.home-feature-banner>a{grid-column:auto}.home-faq{width:min(100% - 22px,960px);padding:80px 0}.home-footer{width:min(100% - 22px,1160px);display:block}.home-footer>p{margin-top:22px}.home-ad-v2{width:min(100% - 22px,1160px);margin-top:38px}}
@media(prefers-reduced-motion:reduce){.home-icon-card,.home-card-icon-mask,.home-card-arrow{transition:none}}

/* Phase 1 information-page footer refinement */
.home-footer{align-items:center;gap:30px;flex-wrap:wrap}
.home-footer .footer-brand{max-width:390px}
.home-footer .footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 17px;line-height:1.5}
.home-footer .footer-links a{font-size:.75rem;font-weight:700;color:#929cab;text-decoration:none}
.home-footer .footer-links a:hover{color:#fff}
.home-footer .footer-copy{margin-left:auto;white-space:nowrap}
html[data-site-theme=light] .home-footer .footer-links a{color:#68727f}
html[data-site-theme=light] .home-footer .footer-links a:hover{color:#171b21}
@media(max-width:860px){.home-footer{display:grid;grid-template-columns:1fr}.home-footer .footer-links{justify-content:flex-start}.home-footer .footer-copy{margin-left:0}}


/* AdSense launch polish: balanced homepage footer */
.home-footer {
    display: grid;
    grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.7fr);
    grid-template-areas:
        "brand links"
        "brand copy";
    align-items: center;
    gap: 12px 42px;
    padding: 30px 0;
}

.home-footer .footer-brand {
    grid-area: brand;
    max-width: 440px;
}

.home-footer .footer-brand p {
    max-width: 420px;
    line-height: 1.55;
}

.home-footer .footer-links {
    grid-area: links;
    justify-content: flex-end;
    align-self: end;
}

.home-footer .footer-copy {
    grid-area: copy;
    justify-self: end;
    align-self: start;
    margin-left: 0;
}

.home-footer .footer-copy p {
    margin-top: 2px;
}

@media (max-width: 900px) {
    .home-footer {
        grid-template-columns: 1fr;
        grid-template-areas:
            "brand"
            "links"
            "copy";
        gap: 20px;
    }

    .home-footer .footer-links {
        justify-content: flex-start;
    }

    .home-footer .footer-copy {
        justify-self: start;
    }
}


/* Homepage footer: match the simple timer-page footer */
.home-footer-simple {
    width: 100%;
    margin-top: 70px;
    padding: 25px 5%;
    display: block;
    background: var(--site-bg-elevated);
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.85rem;
}
.home-footer-simple .site-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 16px;
    margin-top: 9px;
}
.home-footer-simple .site-footer-links a {
    color: inherit;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.82;
}
.home-footer-simple .site-footer-links a:hover {
    color: inherit;
    opacity: 1;
    text-decoration: underline;
}