/* 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 {
    padding: 25px 5%;
    background: var(--site-bg-elevated);
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.85rem;
}


/* ==================================================
   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:#78a94e;--beep-rgb:120,169,78;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:#78a94e;--beep-rgb:120,169,78}.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 */
/* Legacy kitchen display rules removed.
   The scoped Kitchen Timer V3 rules below are the only kitchen display system. */

/* =========================================================
   Kitchen Timer V2 — premium display rebuild
========================================================= */
.kitchen-page .kitchen-digital > span,
.kitchen-page .kitchen-flip > span{width:auto;height:auto;font-size:inherit;background:none;border:0;box-shadow:none}
.kitchen-page .kitchen-digital-caption span,
.kitchen-page .kitchen-flip .flip-labels span{display:inline;width:auto;height:auto;background:none;border:0;box-shadow:none;font:inherit;color:inherit;text-shadow:none}

.kitchen-page{--kitchen-cream:#f4eedf}.kitchen-page::before{content:"";position:fixed;inset:0 0 auto;height:440px;pointer-events:none;background:radial-gradient(ellipse at 50% 0,rgba(var(--accent-rgb),.13),transparent 64%);z-index:-1}
.kitchen-stage{min-height:470px;margin-top:18px;border:3px solid rgba(var(--accent-rgb),.36);border-radius:22px;background:radial-gradient(circle at 50% 12%,rgba(var(--accent-rgb),.09),transparent 38%),linear-gradient(#11171c,#030405);display:grid;place-items:center;overflow:hidden;position:relative;box-shadow:inset 0 0 58px #000,0 0 28px rgba(var(--accent-rgb),.13)}
.kitchen-stage>[aria-hidden="true"]{display:none!important}.kitchen-stage[data-display="digital"] .kitchen-digital,.kitchen-stage[data-display="analogue"] .kitchen-analogue,.kitchen-stage[data-display="flip"] .kitchen-flip{display:flex}
.kitchen-digital{width:100%;height:100%;min-height:460px;align-items:center;justify-content:center;flex-direction:column;position:relative;background:linear-gradient(180deg,#10171d,#020304)}.kitchen-digital:before{content:"";position:absolute;inset:8%;border-radius:24px;background:radial-gradient(ellipse at 50% 35%,rgba(var(--accent-rgb),.11),transparent 58%);border:1px solid rgba(255,255,255,.055)}.kitchen-digital .digital-glass{position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 28%,transparent 70%,rgba(255,255,255,.025));pointer-events:none}.kitchen-digital-time{position:relative;font-family:"TCT Display",sans-serif;font-size:clamp(8rem,21vw,14rem);line-height:.85;letter-spacing:.035em;color:var(--accent);text-shadow:0 0 12px rgba(var(--accent-rgb),.5),0 0 38px rgba(var(--accent-rgb),.28),0 5px #000}.kitchen-digital-caption{position:relative;width:min(470px,65%);display:flex;justify-content:space-between;margin-top:26px;color:#9aa4ac;font-size:.68rem;font-weight:800;letter-spacing:.3em}
.kitchen-flip{min-height:460px;width:100%;align-items:center;justify-content:center;flex-direction:column}.kitchen-flip-machine{transform:scale(1.04);transform-origin:center}.kitchen-flip .flip-labels{width:min(650px,85%);margin-top:28px}.kitchen-flip .flip-card{background:linear-gradient(180deg,#1a2a34 0%,#0d151a 49.4%,#030405 50.5%,#091015 100%);border-color:#010203;box-shadow:inset 0 1px rgba(255,255,255,.13),inset 0 -18px 28px #0008,0 14px 28px #000}.kitchen-flip .flip-value{color:#eef8fb;text-shadow:0 3px #000,0 0 15px rgba(var(--accent-rgb),.14)}.kitchen-flip .flip-separator span{background:var(--accent);box-shadow:0 0 16px rgba(var(--accent-rgb),.75)}
.kitchen-analogue{min-height:460px;width:100%;align-items:center;justify-content:center;padding:24px}.cook-clock-shell{width:min(410px,88vw);aspect-ratio:1;border-radius:50%;padding:13px;background:repeating-conic-gradient(#4e5559 0 1deg,#20262a 1deg 4deg,#70777a 4deg 5deg,#252b2f 5deg 8deg);box-shadow:0 28px 45px #000d,0 0 0 4px #080a0b,0 0 28px rgba(var(--accent-rgb),.16)}.cook-clock-rim{height:100%;border-radius:50%;padding:14px;background:linear-gradient(145deg,#ded8ca,#77776f 38%,#e8e2d7 65%,#777871);box-shadow:inset 0 0 0 2px #fff9,inset 0 0 13px #0009}.cook-clock-face{height:100%;border-radius:50%;position:relative;overflow:hidden;background:radial-gradient(circle at 43% 36%,#fffdf5 0,#f0eadb 56%,#cfc6b3 100%);box-shadow:inset 0 0 0 3px #716d62,inset 0 0 28px #6f66554a;color:#282821}.cook-clock-face:before{content:"";position:absolute;inset:7%;border-radius:50%;border:1px solid #6d695b55}.cook-clock-ticks{position:absolute;inset:5.5%;border-radius:50%}.cook-clock-ticks i{position:absolute;left:50%;top:0;width:1px;height:100%;transform-origin:50% 50%}.cook-clock-ticks i:before{content:"";display:block;width:2px;height:8px;background:#37362f;margin-left:-1px}.cook-clock-ticks i.major:before{width:4px;height:15px;margin-left:-2px;background:#1e1f1b}.cook-clock-numbers span{position:absolute;font-family:Georgia,serif;font-weight:700;font-size:1.35rem;transform:translate(-50%,-50%)}.cook-clock-numbers .n12{left:50%;top:12%}.cook-clock-numbers .n1{left:69%;top:17%}.cook-clock-numbers .n2{left:83%;top:31%}.cook-clock-numbers .n3{left:88%;top:50%}.cook-clock-numbers .n4{left:83%;top:69%}.cook-clock-numbers .n5{left:69%;top:83%}.cook-clock-numbers .n6{left:50%;top:88%}.cook-clock-numbers .n7{left:31%;top:83%}.cook-clock-numbers .n8{left:17%;top:69%}.cook-clock-numbers .n9{left:12%;top:50%}.cook-clock-numbers .n10{left:17%;top:31%}.cook-clock-numbers .n11{left:31%;top:17%}.cook-brand{position:absolute;top:28%;left:0;width:100%;text-align:center;font-size:.72rem;font-weight:800;letter-spacing:.18em}.cook-brand small{display:block;margin-top:5px;font-size:.48rem;letter-spacing:.28em;color:#766f60}.clock-hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:999px;z-index:5}.hour-hand{width:8px;height:23%;background:linear-gradient(90deg,#171817,#55584f,#171817);box-shadow:0 2px 3px #0008}.minute-hand{width:6px;height:34%;background:linear-gradient(90deg,#171817,#666a60,#171817);box-shadow:0 2px 3px #0008}.second-hand{width:2px;height:39%;background:var(--accent);box-shadow:0 0 6px rgba(var(--accent-rgb),.7);z-index:7}.second-hand:after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);width:6px;height:44px;background:var(--accent);border-radius:5px}.clock-centre-pin{position:absolute;left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);border-radius:50%;z-index:10;background:radial-gradient(circle at 35% 28%,#fff,var(--accent) 37%,#333 72%);box-shadow:0 2px 5px #0009}.cook-timer-window{position:absolute;left:50%;bottom:19%;transform:translateX(-50%);min-width:126px;padding:8px 15px 6px;text-align:center;border-radius:7px;background:#2e312e;border:2px solid #8b8779;box-shadow:inset 0 0 10px #000,0 2px 5px #0005;color:#fff}.cook-timer-window span{display:block;font-family:"TCT Display",sans-serif;font-size:2rem;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.05em}.cook-timer-window small{display:block;margin-top:3px;color:var(--accent);font-size:.45rem;letter-spacing:.2em;font-weight:800}.cook-glass{position:absolute;inset:0;border-radius:50%;z-index:20;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.24),transparent 27%,transparent 67%,rgba(255,255,255,.05));box-shadow:inset -10px -8px 20px #0002}
.timer-card:fullscreen .kitchen-stage{height:calc(100vh - 290px);min-height:430px}.timer-card:fullscreen .time-settings,.timer-card:fullscreen .preset-section{display:none}.kitchen-seo{grid-template-columns:repeat(2,minmax(0,1fr))}.kitchen-seo article:last-child{grid-column:1/-1}.kitchen-seo h3{margin:18px 0 5px;font-size:1rem}.kitchen-seo strong{color:var(--text)}
@media(max-width:700px){.kitchen-stage{min-height:360px}.kitchen-digital,.kitchen-flip,.kitchen-analogue{min-height:350px}.kitchen-flip-machine{transform:scale(.78)}.cook-clock-shell{width:min(320px,83vw)}.cook-clock-numbers span{font-size:1rem}.cook-timer-window{min-width:100px}.cook-timer-window span{font-size:1.55rem}.kitchen-seo{grid-template-columns:1fr}.kitchen-seo article:last-child{grid-column:auto}}
@media(max-width:460px){.kitchen-flip-machine{transform:scale(.61)}.kitchen-digital-time{font-size:7.2rem}.kitchen-digital-caption{width:74%}.kitchen-analogue{padding:12px}.cook-clock-shell{width:min(290px,84vw)}}

/* ==================================================
   INTERVAL TIMER
================================================== */
.interval-card{--phase:#ff4545;overflow:hidden}.interval-card[data-phase="rest"]{--phase:#4db8ff}.interval-card[data-phase="countdown"]{--phase:#ffb432}.interval-card[data-phase="complete"]{--phase:#72df88}.interval-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 16px}.interval-preset-tabs{display:flex;flex-wrap:wrap;gap:7px}.interval-preset{min-height:40px;padding:0 14px;border:1px solid var(--site-line);border-radius:10px;background:var(--site-control-bg);color:var(--text);font:800 .72rem system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,sans-serif;cursor:pointer}.interval-preset.active{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.12);color:var(--accent)}
.interval-display{position:relative;isolation:isolate;min-height:430px;margin-top:18px;padding:30px 38px;border:1px solid rgba(var(--accent-rgb),.28);border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.10),transparent 45%),linear-gradient(180deg,#080b0f,#030405);box-shadow:inset 0 0 0 5px #0007,inset 0 1px #ffffff12,0 18px 50px #0008}.interval-led-grid{position:absolute;inset:0;z-index:-1;opacity:.2;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:8px 8px;mask-image:linear-gradient(to bottom,#000,transparent 90%)}.interval-display:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff0a,transparent 25%,transparent 75%,#ffffff05)}.interval-display-head,.interval-next-row{display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;z-index:1}.interval-display-head{font-size:.77rem;font-weight:800;letter-spacing:.18em;color:var(--muted)}#phaseLabel{color:var(--phase);text-shadow:0 0 15px color-mix(in srgb,var(--phase),transparent 45%)}.interval-main-time{position:relative;z-index:1;margin:28px 0 10px;text-align:center;font-family:"TCT Display",sans-serif;font-size:clamp(8rem,25vw,15rem);font-weight:400;line-height:.82;letter-spacing:.035em;color:var(--phase);font-variant-numeric:tabular-nums;text-shadow:0 4px 0 #000,0 0 25px color-mix(in srgb,var(--phase),transparent 60%)}.interval-warning{text-align:center;min-height:22px;color:var(--phase);font-size:.7rem;font-weight:800;letter-spacing:.2em;opacity:0}.interval-warning.is-visible{opacity:1;animation:intervalWarning .65s infinite alternate}.interval-phase-track{height:8px;margin:25px 0 20px;border-radius:999px;background:#ffffff10;overflow:hidden}.interval-phase-track span{display:block;width:100%;height:100%;border-radius:inherit;background:var(--phase);box-shadow:0 0 14px color-mix(in srgb,var(--phase),transparent 40%);transition:width .12s linear}.interval-next-row small{display:block;color:var(--muted);font-size:.57rem;font-weight:800;letter-spacing:.18em}.interval-next-row strong{display:block;margin-top:5px;color:var(--text);font-size:.86rem;letter-spacing:.06em}.interval-next-row>div:last-child{text-align:right}@keyframes intervalWarning{to{opacity:.25}}
.interval-controls{grid-template-columns:1fr 1.45fr 1fr 1fr}.interval-settings{margin-top:26px;padding-top:25px;border-top:1px solid var(--site-line)}.interval-settings h2{font-size:1rem;margin:0 0 15px}.interval-settings-grid{display:grid;grid-template-columns:.65fr 1.2fr 1.2fr .8fr;gap:10px}.interval-settings-grid>label{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.7rem;font-weight:700}.interval-settings-grid label>div{display:flex;align-items:center;gap:6px}.interval-settings-grid input{width:100%;min-width:0;height:48px;border:1px solid var(--site-line);border-radius:9px;background:var(--site-control-bg);color:var(--text);padding:0 11px;font:800 .92rem system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,sans-serif}.interval-settings-grid label>div input{text-align:center}.interval-duration-fields{display:grid!important;grid-template-columns:minmax(66px,1fr) auto minmax(58px,.78fr) auto;align-items:center;gap:7px!important}.interval-duration-fields .interval-seconds-input{min-width:58px}.interval-unit{white-space:nowrap;font-size:.68rem;font-weight:800}.interval-settings-grid b,.interval-settings-grid em{color:var(--muted);font-style:normal}.interval-options{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin-top:16px;color:var(--muted);font-size:.72rem}.interval-options label{display:flex;align-items:center;gap:7px}.interval-options input[type=checkbox]{accent-color:var(--accent)}.interval-options .set-button{margin-left:auto;min-height:43px;padding:0 18px}.seo-table-wrap{overflow-x:auto}.seo-table{width:100%;border-collapse:collapse;font-size:.85rem}.seo-table th,.seo-table td{padding:12px;border-bottom:1px solid var(--site-line);text-align:left}.seo-table th{color:var(--text)}.faq-block{grid-column:1/-1}.faq-block details{border-bottom:1px solid var(--site-line);padding:12px 0}.faq-block summary{color:var(--text);font-weight:800;cursor:pointer}.faq-block details p{margin-bottom:0}.interval-card:fullscreen{overflow:auto;width:100%;max-width:none;border-radius:0;padding:clamp(18px,4vw,50px)}
html[data-site-theme=light] .interval-display{background:radial-gradient(circle at 50% 45%,rgba(var(--accent-rgb),.12),transparent 45%),linear-gradient(180deg,#1c232b,#0a0e12)}
@media(max-width:760px){.interval-topbar{align-items:stretch;flex-direction:column}.interval-topbar .sound-toggle{align-self:flex-end}.interval-display{min-height:350px;padding:24px 18px}.interval-main-time{font-size:clamp(7rem,30vw,11rem)}.interval-settings-grid{grid-template-columns:repeat(2,1fr)}.interval-controls{grid-template-columns:repeat(3,1fr)}.interval-controls .primary-button{grid-column:1/-1;grid-row:1}.interval-controls #previousBtn{grid-column:1}.interval-options .set-button{width:100%;margin-left:0}}
@media(max-width:480px){.interval-duration-fields{grid-template-columns:minmax(72px,1fr) auto minmax(64px,.8fr) auto}.interval-preset-tabs{display:grid;grid-template-columns:repeat(3,1fr)}.interval-preset{padding:0 8px}.interval-display{min-height:315px;padding:20px 14px}.interval-display-head{font-size:.61rem}.interval-main-time{margin-top:34px;font-size:31vw}.interval-settings-grid{grid-template-columns:1fr}.interval-controls{gap:7px}.interval-controls .control-button{font-size:.72rem;padding-inline:5px}.interval-next-row strong{font-size:.72rem}}

/* Beep test protocol selector — added in v1.5 because protocol controls are part of the beep-test page UI. */
.beep-protocol{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:10px;margin:0 0 10px}.beep-field{display:grid;gap:7px}.beep-field>span{color:var(--site-muted);font-size:.6rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.beep-field select{width:100%;min-height:44px;padding:0 35px 0 12px;border:1px solid var(--site-line-strong);border-radius:11px;background:var(--site-control);color:var(--site-text);font:700 .78rem system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,sans-serif;cursor:pointer}.beep-field select:focus{outline:2px solid rgba(var(--beep-rgb),.35);outline-offset:1px}.beep-field select:disabled{cursor:not-allowed;opacity:.58}.beep-protocol-note{margin:0 0 18px;color:var(--site-muted);font-size:.76rem;line-height:1.5}
@media(max-width:760px){.beep-protocol{grid-template-columns:1fr 1fr}.beep-field:first-child{grid-column:1/-1}}
@media(max-width:430px){.beep-protocol{grid-template-columns:1fr}.beep-field:first-child{grid-column:auto}.beep-field select{font-size:.74rem}}

/* Chess Timer */
.chess-page{--chess:#b688ff;--chess-rgb:182,136,255}.chess-main{width:min(1160px,calc(100% - 28px));margin:auto;padding:48px 0 70px}.chess-heading{text-align:center;margin-bottom:25px}.chess-heading h1{font-family:"TCT Display",sans-serif;font-size:clamp(4rem,9vw,7rem);line-height:.9;margin:8px 0 14px;text-transform:uppercase}.chess-heading>p:last-child{color:var(--site-muted)}.chess-card{padding:22px;border:1px solid var(--site-line);border-radius:28px;background:var(--site-panel);box-shadow:var(--site-shadow),0 0 70px rgba(var(--chess-rgb),.07)}.chess-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;color:var(--chess);font-weight:800;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.chess-toolbar>div{display:flex;gap:8px}.chess-toolbar button,.chess-centre button,.chess-custom button{border:1px solid var(--site-line-strong);border-radius:11px;background:var(--site-control);color:var(--site-text);min-height:42px;padding:0 14px;font-weight:800;cursor:pointer}.chess-toolbar button.active{border-color:rgba(var(--chess-rgb),.55);color:var(--chess);background:rgba(var(--chess-rgb),.08)}.chess-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}.chess-presets button{padding:10px;border:1px solid var(--site-line);border-radius:12px;background:var(--site-control);color:var(--site-text);font-weight:800;cursor:pointer}.chess-presets small{color:var(--site-muted)}.chess-presets button.active{border-color:var(--chess);box-shadow:0 0 18px rgba(var(--chess-rgb),.14);color:var(--chess)}.chess-custom{display:flex;justify-content:center;align-items:end;gap:10px;margin:12px 0 18px}.chess-custom label{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--site-muted)}.chess-custom input{display:block;width:92px;margin-top:5px;padding:10px;border:1px solid var(--site-line-strong);border-radius:10px;background:var(--site-control);color:var(--site-text);font:800 1rem system-ui}.chess-custom label:nth-child(2){position:relative}.chess-custom label:nth-child(2) span{position:absolute;right:8px;bottom:11px;font-size:.65rem}.chess-board{display:grid;grid-template-columns:1fr 118px 1fr;min-height:390px;border-radius:22px;overflow:hidden;background:#080a0d;border:1px solid var(--site-line)}.player-clock{position:relative;border:0;padding:28px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#151b23,#0c1015);color:#eaf0f7;cursor:pointer;touch-action:manipulation;transition:filter .15s,transform .15s,box-shadow .15s}.player-clock:hover{filter:brightness(1.08)}.player-clock.active{background:radial-gradient(circle at 50% 45%,rgba(var(--chess-rgb),.19),transparent 58%),linear-gradient(145deg,#191522,#0d0b11);box-shadow:inset 0 0 0 3px var(--chess),inset 0 0 45px rgba(var(--chess-rgb),.16)}.player-clock.flagged{background:#2a0b0f;box-shadow:inset 0 0 0 3px #ff4150}.player-label,.tap-label{font-size:.7rem;font-weight:900;letter-spacing:.2em}.player-label{color:var(--chess)}.player-clock strong{font-family:"TCT Display",sans-serif;font-size:clamp(5rem,12vw,10rem);font-weight:400;line-height:1;margin:12px 0;text-shadow:0 0 28px rgba(var(--chess-rgb),.18)}.move-count{color:#9aa5b3;font-size:.8rem;font-weight:700}.tap-label{position:absolute;bottom:20px;color:#788391}.chess-centre{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:9px;padding:10px;background:#090c10;border-left:1px solid var(--site-line);border-right:1px solid var(--site-line)}.chess-centre>span{text-align:center;color:var(--chess);font-size:.69rem;font-weight:900;letter-spacing:.15em}.chess-centre button{padding:0 8px}.chess-help{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin:18px 0 0;color:var(--site-muted);font-size:.76rem}.chess-help kbd{color:var(--site-text)}.voice-status{text-align:center;color:var(--site-muted);font-size:.78rem}.chess-info{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:35px}.chess-info article{padding:22px;border:1px solid var(--site-line);border-radius:18px;background:var(--site-panel)}.chess-info h2{font-size:1rem}.chess-info p{color:var(--site-muted);line-height:1.65;font-size:.86rem}
@media(max-width:760px){.chess-main{width:min(100% - 18px,1160px);padding-top:30px}.chess-card{padding:12px;border-radius:20px}.chess-toolbar{align-items:flex-start;flex-direction:column}.chess-toolbar>div{width:100%}.chess-toolbar button{flex:1}.chess-presets{grid-template-columns:repeat(3,1fr)}.chess-custom{flex-wrap:wrap}.chess-board{grid-template-columns:1fr;min-height:620px}.player-clock{min-height:260px}.player-two{order:1}.chess-centre{order:2;display:grid;grid-template-columns:1fr 1fr 1fr;border:0;border-top:1px solid var(--site-line);border-bottom:1px solid var(--site-line)}.player-one{order:3}.player-clock strong{font-size:clamp(5.8rem,25vw,9rem)}.player-one{transform:rotate(180deg)}.player-one.active{transform:rotate(180deg)}.chess-info{grid-template-columns:1fr}.chess-help{display:none}}

/* ==================================================
   INTERVAL TIMER — FULLSCREEN + ACCENT APPLY BUTTON
   V8 focused patch
================================================== */

/* Keep the custom settings action visible in the selected timer finish. */
.interval-card .interval-options .set-button {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.18);
}

.interval-card .interval-options .set-button:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
}

/* The white finish needs dark lettering for contrast. */
.interval-card.theme-white .interval-options .set-button {
    color: #080b0f;
}

/* Fullscreen is a clean display-only mode for every interval preset. */
.interval-card:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: clamp(18px, 3vw, 42px);
    border: 0;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    background: var(--site-bg);
}

.interval-card:fullscreen > .timer-status,
.interval-card:fullscreen > .interval-topbar,
.interval-card:fullscreen > .theme-toolbar,
.interval-card:fullscreen > .interval-controls,
.interval-card:fullscreen > .interval-settings {
    display: none !important;
}

.interval-card:fullscreen .interval-display {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 4vw, 64px);
    border-radius: clamp(18px, 2vw, 30px);
}

.interval-card:fullscreen .interval-main-time {
    margin: auto 0;
    font-size: clamp(11rem, 34vw, 28rem);
}

@media (max-width: 760px) {
    .interval-card:fullscreen {
        padding: 10px;
    }

    .interval-card:fullscreen .interval-display {
        padding: 22px 16px;
        border-radius: 16px;
    }

    .interval-card:fullscreen .interval-main-time {
        font-size: clamp(8rem, 38vw, 16rem);
    }
}

/* ==================================================
   UNIFORM DISPLAY-ONLY FULLSCREEN MODE
   Keeps setup, finish, sound and transport controls outside fullscreen.
================================================== */

.display-stage:fullscreen,
.chrono-shell:fullscreen,
.pomodoro-stage:fullscreen,
.beep-display-stage:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: clamp(18px, 4vw, 64px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #080b0f;
    overflow: hidden;
}

.display-stage:fullscreen > .digital-display,
.display-stage:fullscreen > .analogue-display,
.display-stage:fullscreen > .flip-display {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: none;
    align-items: center;
    justify-content: center;
}

.display-stage[data-display="digital"]:fullscreen > .digital-display,
.display-stage[data-display="analogue"]:fullscreen > .analogue-display,
.display-stage[data-display="flip"]:fullscreen > .flip-display {
    display: flex;
}

.display-stage:fullscreen .digital-time {
    font-size: clamp(8rem, 27vw, 24rem);
}

.display-stage:fullscreen .analogue-shell {
    width: min(82vh, 82vw);
    height: min(82vh, 82vw);
}

.display-stage:fullscreen .flip-machine {
}

.chrono-shell:fullscreen {
    padding: clamp(20px, 5vw, 72px);
}

.chrono-shell:fullscreen .chrono-bezel {
    width: min(86vh, 86vw);
    height: min(86vh, 86vw);
    max-width: none;
}

.pomodoro-stage:fullscreen {
    flex-direction: column;
    gap: clamp(18px, 3vh, 36px);
}

.pomodoro-stage:fullscreen .pomodoro-instrument {
    width: min(82vh, 82vw);
    height: min(82vh, 82vw);
}

.pomodoro-stage:fullscreen .session-area {
    margin: 0;
}

.beep-display-stage {
    display: contents;
}

.beep-display-stage:fullscreen {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3vh, 38px);
    color: var(--text);
}

.beep-display-stage:fullscreen .beep-metrics,
.beep-display-stage:fullscreen .beep-track,
.beep-display-stage:fullscreen .beep-next,
.beep-display-stage:fullscreen .beep-progress,
.beep-display-stage:fullscreen .beep-message {
    width: min(1500px, 96vw);
    margin-left: auto;
    margin-right: auto;
}

.beep-display-stage:fullscreen .beep-metrics {
    flex: 0 0 auto;
}

.beep-display-stage:fullscreen .beep-metric strong {
    font-size: clamp(4rem, 11vh, 9rem);
}

/* Chess requires both live player clocks, but no setup toolbars in fullscreen. */
.chess-card:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: clamp(16px, 3vw, 48px);
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #080b0f;
    overflow: hidden;
}

.chess-card:fullscreen > .chess-toolbar,
.chess-card:fullscreen > .theme-toolbar,
.chess-card:fullscreen > .chess-presets,
.chess-card:fullscreen > .chess-custom,
.chess-card:fullscreen > .chess-help {
    display: none !important;
}

.chess-card:fullscreen .chess-board {
    width: 100%;
    height: 100%;
    margin: 0;
    grid-template-columns: minmax(0, 1fr) clamp(80px, 9vw, 150px) minmax(0, 1fr);
}

.chess-card:fullscreen .player-clock strong {
    font-size: clamp(6rem, 17vw, 17rem);
}

.chess-card:fullscreen .chess-centre button {
    display: none;
}

@media (max-width: 700px) and (orientation: portrait) {
    .chess-card:fullscreen .chess-board {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .chess-card:fullscreen .player-clock strong {
        font-size: clamp(4.5rem, 24vw, 9rem);
    }
}

/* Kitchen display-only fullscreen uses its own stage classes. */
.kitchen-stage:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: clamp(18px, 4vw, 64px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #080b0f;
    overflow: hidden;
}

.kitchen-stage:fullscreen > .kitchen-digital,
.kitchen-stage:fullscreen > .kitchen-analogue,
.kitchen-stage:fullscreen > .kitchen-flip {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: none;
    align-items: center;
    justify-content: center;
}

.kitchen-stage[data-display="digital"]:fullscreen > .kitchen-digital,
.kitchen-stage[data-display="analogue"]:fullscreen > .kitchen-analogue,
.kitchen-stage[data-display="flip"]:fullscreen > .kitchen-flip {
    display: flex;
}

.kitchen-stage:fullscreen .kitchen-digital-time {
    font-size: clamp(8rem, 27vw, 24rem);
}

.kitchen-stage:fullscreen .kitchen-clock {
    width: min(84vh, 84vw);
    height: min(84vh, 84vw);
}


/* ==================================================
   FULLSCREEN REFINEMENT v1.5.3
   Larger clock faces plus essential live controls.
================================================== */

/* Countdown: scale the active flip mechanism to use the available screen. */
.display-stage[data-display="flip"]:fullscreen .flip-machine {
    width: min(1180px, 92vw, calc(88vh * 1.45));
    transform: none;
}

.display-stage[data-display="flip"]:fullscreen .flip-labels {
    width: min(1050px, 82vw);
    margin-top: clamp(24px, 4vh, 48px);
}

/* Stopwatch: fullscreen the complete working instrument, not the bare shell. */
.stopwatch-card:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: clamp(18px, 3vh, 38px) clamp(18px, 4vw, 72px);
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-items: center;
    background: #080b0f;
    overflow: hidden;
}

.stopwatch-card:fullscreen::before,
.stopwatch-card:fullscreen > .stopwatch-toolbar,
.stopwatch-card:fullscreen > .stopwatch-finish {
    display: none !important;
}

.stopwatch-card:fullscreen .chrono-shell {
    width: min(72vh, 72vw);
    height: min(72vh, 72vw);
    aspect-ratio: 1;
    margin: 0 auto;
    padding: clamp(11px, 1.6vh, 19px);
}

.stopwatch-card:fullscreen .chrono-bezel {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.stopwatch-card:fullscreen .stopwatch-progress {
    width: min(1180px, 92vw);
    margin: 8px auto 14px;
}

.stopwatch-card:fullscreen .stopwatch-controls {
    width: min(1180px, 92vw);
    margin: 0 auto;
}

.stopwatch-card:fullscreen .stopwatch-controls button {
    min-height: clamp(52px, 7vh, 72px);
    font-size: clamp(.95rem, 1.5vw, 1.25rem);
}

/* Kitchen: enlarge all three selected display styles. */
.kitchen-stage[data-display="digital"]:fullscreen .kitchen-digital-time {
    font-size: clamp(10rem, 31vw, 28rem);
}

.kitchen-stage[data-display="analogue"]:fullscreen .cook-clock-shell {
    width: min(82vh, 82vw);
    height: min(82vh, 82vw);
    max-width: none;
}

.kitchen-stage[data-display="flip"]:fullscreen .kitchen-flip-machine {
    width: min(1180px, 92vw, calc(88vh * 1.45));
    transform: none;
}

.kitchen-stage[data-display="flip"]:fullscreen .flip-labels {
    width: min(1050px, 82vw);
    margin-top: clamp(24px, 4vh, 48px);
}

/* Beep test: keep the live dashboard and its three transport controls. */
.beep-card:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: clamp(18px, 3vh, 44px) clamp(18px, 4vw, 72px);
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    background: #080b0f;
    overflow: hidden;
}

.beep-card:fullscreen > .beep-card-top,
.beep-card:fullscreen > .beep-finish,
.beep-card:fullscreen > .beep-protocol,
.beep-card:fullscreen > .beep-protocol-note {
    display: none !important;
}

.beep-card:fullscreen .beep-display-stage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(14px, 2.4vh, 30px);
    width: min(1500px, 96vw);
    margin: 0 auto;
    min-height: 0;
}

.beep-card:fullscreen .beep-metrics,
.beep-card:fullscreen .beep-track,
.beep-card:fullscreen .beep-next,
.beep-card:fullscreen .beep-progress,
.beep-card:fullscreen .beep-message {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.beep-card:fullscreen .beep-metric {
    min-height: clamp(125px, 19vh, 210px);
}

.beep-card:fullscreen .beep-metric strong {
    font-size: clamp(4rem, 10vh, 8rem);
}

.beep-card:fullscreen .beep-controls {
    width: min(1500px, 96vw);
    margin: clamp(12px, 2vh, 22px) auto 0;
}

.beep-card:fullscreen .beep-controls button {
    min-height: clamp(54px, 7vh, 72px);
    font-size: clamp(.9rem, 1.4vw, 1.2rem);
}

@media (max-height: 720px) {
    .stopwatch-card:fullscreen .chrono-shell {
        width: min(62vh, 62vw);
        height: min(62vh, 62vw);
    }
    .beep-card:fullscreen {
        padding-top: 14px;
        padding-bottom: 14px;
    }
    .beep-card:fullscreen .beep-display-stage {
        gap: 10px;
    }
    .beep-card:fullscreen .beep-metric {
        min-height: 105px;
    }
}


/* ==================================================
   FULLSCREEN FINAL POLISH v1.5.4
   Countdown keeps transport controls; flip displays scale by card size.
================================================== */

/* Countdown fullscreen: hide setup, retain display, progress and transport. */
#timerCard:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: clamp(14px, 2.5vh, 30px) clamp(14px, 3vw, 52px);
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: clamp(10px, 1.8vh, 20px);
    background: #080b0f;
    overflow: hidden;
}

#timerCard:fullscreen > .timer-status,
#timerCard:fullscreen > .display-toolbar,
#timerCard:fullscreen > .voice-status-panel,
#timerCard:fullscreen > .theme-toolbar,
#timerCard:fullscreen > .time-settings,
#timerCard:fullscreen > .preset-section,
#timerCard:fullscreen > .voice-command-help {
    display: none !important;
}

#timerCard:fullscreen .display-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: clamp(10px, 2vh, 24px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#timerCard:fullscreen .display-stage > .digital-display,
#timerCard:fullscreen .display-stage > .analogue-display,
#timerCard:fullscreen .display-stage > .flip-display {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: none;
    align-items: center;
    justify-content: center;
}

#timerCard:fullscreen .display-stage[data-display="digital"] > .digital-display,
#timerCard:fullscreen .display-stage[data-display="analogue"] > .analogue-display,
#timerCard:fullscreen .display-stage[data-display="flip"] > .flip-display {
    display: flex;
}

#timerCard:fullscreen .digital-time {
    font-size: clamp(9rem, 26vw, 23rem);
}

#timerCard:fullscreen .analogue-shell {
    width: min(66vh, 72vw, calc(100vh - 190px));
    height: min(66vh, 72vw, calc(100vh - 190px));
    max-width: 760px;
    max-height: 760px;
    flex: 0 0 auto;
}

#timerCard:fullscreen .display-stage[data-display="flip"] .flip-display {
    flex-direction: column;
}

#timerCard:fullscreen .display-stage[data-display="flip"] .flip-machine,
.kitchen-stage[data-display="flip"]:fullscreen .kitchen-flip-machine {
    width: min(1320px, 94vw);
    max-width: none;
    gap: clamp(10px, 1.6vw, 24px);
}

#timerCard:fullscreen .display-stage[data-display="flip"] .flip-card,
.kitchen-stage[data-display="flip"]:fullscreen .flip-card {
    width: 100%;
    aspect-ratio: .76;
    border-width: clamp(3px, .35vw, 6px);
    border-radius: clamp(12px, 1.2vw, 22px);
}

#timerCard:fullscreen .display-stage[data-display="flip"] .flip-value,
.kitchen-stage[data-display="flip"]:fullscreen .flip-value {
    font-size: clamp(9rem, 18vw, 17rem);
}

#timerCard:fullscreen .display-stage[data-display="flip"] .flip-separator,
.kitchen-stage[data-display="flip"]:fullscreen .flip-separator {
    gap: clamp(28px, 5vh, 60px);
}

#timerCard:fullscreen .display-stage[data-display="flip"] .flip-separator span,
.kitchen-stage[data-display="flip"]:fullscreen .flip-separator span {
    width: clamp(14px, 1.5vw, 25px);
    height: clamp(14px, 1.5vw, 25px);
}

#timerCard:fullscreen .display-stage[data-display="flip"] .flip-labels,
.kitchen-stage[data-display="flip"]:fullscreen .flip-labels {
    width: min(1180px, 84vw);
    margin-top: clamp(18px, 2.5vh, 32px);
    font-size: clamp(.72rem, 1vw, 1rem);
}

#timerCard:fullscreen > .progress-track {
    width: min(1320px, 94vw);
    margin: 0 auto;
}

#timerCard:fullscreen > .timer-controls {
    width: min(1180px, 92vw);
    margin: 0 auto;
}

#timerCard:fullscreen > .timer-controls .control-button {
    min-height: clamp(52px, 7vh, 72px);
    font-size: clamp(.95rem, 1.35vw, 1.2rem);
}

/* Kitchen flip clock: use more of the available fullscreen area. */
.kitchen-stage[data-display="flip"]:fullscreen .kitchen-flip {
    flex-direction: column;
}

@media (max-width: 760px), (max-height: 650px) {
    #timerCard:fullscreen {
        padding: 10px 12px;
        gap: 8px;
    }

    #timerCard:fullscreen .display-stage[data-display="flip"] .flip-machine,
    .kitchen-stage[data-display="flip"]:fullscreen .kitchen-flip-machine {
        width: min(1120px, 96vw, calc(76vh * 1.8));
    }

    #timerCard:fullscreen .display-stage[data-display="flip"] .flip-value,
    .kitchen-stage[data-display="flip"]:fullscreen .flip-value {
        font-size: clamp(6rem, 17vw, 12rem);
    }
}

/* ==================================================
   COUNTDOWN ANALOGUE FULLSCREEN — PROPORTIONAL MARKER RING
   Keep all 60 dial markers locked to the enlarged clock face.
================================================== */
#timerCard:fullscreen .display-stage[data-display="analogue"] .clock-marker {
    top: 2.7%;
    left: 49.55%;
    width: 0.9%;
    height: 5.2%;
    transform-origin: 50% 910%;
    min-width: 4px;
    min-height: 22px;
}

#timerCard:fullscreen .display-stage[data-display="analogue"] .clock-marker.major {
    top: 2.1%;
    width: 1.2%;
    height: 7.2%;
    transform-origin: 50% 650%;
    min-width: 6px;
    min-height: 32px;
}

#timerCard:fullscreen .display-stage[data-display="analogue"] .clock-marker.quarter {
    top: 1.5%;
    width: 1.65%;
    height: 8.8%;
    transform-origin: 50% 530%;
    min-width: 8px;
    min-height: 40px;
}

/* ==================================================
   v1.6.2 ANALOGUE DIAL SCALING FIX
   Scale dial typography and world-clock marker geometry from the clock face.
================================================== */
.analogue-shell {
    container-type: inline-size;
}

.analogue-shell .clock-number {
    font-size: clamp(11px, 3.35cqw, 24px);
    line-height: 1;
}

.analogue-shell .dial-brand-name {
    font-size: clamp(10px, 3.1cqw, 21px);
}

.analogue-shell .dial-brand-subtitle,
.analogue-shell .analogue-label {
    font-size: clamp(7px, 1.45cqw, 11px);
}

/* World clock markers use the original rotate/transform-origin layout.
   Container units make both their length and their radius grow with the dial. */
.world-analogue .clock-marker {
    top: 5.2%;
    left: 49.5%;
    width: 1cqw;
    height: 3.6cqw;
    min-width: 0;
    min-height: 0;
    transform-origin: 50% 1245%;
}

.world-analogue .clock-marker.major {
    top: 4.3%;
    width: 1cqw;
    height: 5.1cqw;
    transform-origin: 50% 880%;
}

.world-analogue .clock-marker:nth-child(15n + 1) {
    top: 3.7%;
    width: 1.45cqw;
    height: 5.8cqw;
    transform-origin: 50% 775%;
    background: var(--theme-bright, var(--clock-accent));
}

.world-analogue .world-date-window {
    min-width: 8.8cqw;
    padding: 1.25cqw 1.7cqw;
    font-size: clamp(12px, 3.25cqw, 23px);
}

.world-analogue .clock-pin {
    width: clamp(18px, 4.8cqw, 34px);
    height: clamp(18px, 4.8cqw, 34px);
    border-width: clamp(3px, .9cqw, 6px);
}

/* ==================================================
   v1.6.3 ANALOGUE FULLSCREEN SCALE CORRECTION
   Dial details scale from the actual clock face, not fixed desktop pixels.
================================================== */

/* Countdown: the twelve luminous dots previously used a fixed 150px radius.
   Rebuild their orbit from container units so it expands with fullscreen. */
.analogue-shell .dial-lume-dots .lume {
    top: 50%;
    left: 50%;
    width: clamp(5px, 1.45cqw, 11px);
    height: clamp(5px, 1.45cqw, 11px);
    transform-origin: 0 0;
    margin: 0;
}
.analogue-shell .dial-lume-dots .lume-1  { --lume-angle: 0deg; }
.analogue-shell .dial-lume-dots .lume-2  { --lume-angle: 30deg; }
.analogue-shell .dial-lume-dots .lume-3  { --lume-angle: 60deg; }
.analogue-shell .dial-lume-dots .lume-4  { --lume-angle: 90deg; }
.analogue-shell .dial-lume-dots .lume-5  { --lume-angle: 120deg; }
.analogue-shell .dial-lume-dots .lume-6  { --lume-angle: 150deg; }
.analogue-shell .dial-lume-dots .lume-7  { --lume-angle: 180deg; }
.analogue-shell .dial-lume-dots .lume-8  { --lume-angle: 210deg; }
.analogue-shell .dial-lume-dots .lume-9  { --lume-angle: 240deg; }
.analogue-shell .dial-lume-dots .lume-10 { --lume-angle: 270deg; }
.analogue-shell .dial-lume-dots .lume-11 { --lume-angle: 300deg; }
.analogue-shell .dial-lume-dots .lume-12 { --lume-angle: 330deg; }
.analogue-shell .dial-lume-dots .lume {
    transform: translate(-50%, -50%) rotate(var(--lume-angle)) translateY(-35.5cqw);
}

/* Readable dial numerals at every clock size. */
.analogue-shell .clock-number {
    font-size: clamp(14px, 4.1cqw, 32px);
}
#timerCard:fullscreen .display-stage[data-display="analogue"] .clock-number {
    font-size: clamp(24px, 4.5cqw, 38px);
}
.world-clock-card:fullscreen .world-analogue .clock-number {
    font-size: clamp(24px, 4.35cqw, 38px);
}

/* Kitchen clock has a separate dial component, so give it its own container. */
.cook-clock-shell {
    container-type: inline-size;
}
.cook-clock-shell .cook-clock-numbers span {
    font-size: clamp(16px, 3.7cqw, 31px);
    line-height: 1;
}
.kitchen-stage[data-display="analogue"]:fullscreen .cook-clock-numbers span {
    font-size: clamp(25px, 4.15cqw, 40px);
}
.kitchen-stage[data-display="analogue"]:fullscreen .cook-brand {
    font-size: clamp(12px, 1.75cqw, 18px);
}
.kitchen-stage[data-display="analogue"]:fullscreen .cook-brand small {
    font-size: clamp(8px, 1.05cqw, 12px);
}
.kitchen-stage[data-display="analogue"]:fullscreen .cook-timer-window span {
    font-size: clamp(32px, 5.2cqw, 52px);
}

.site-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin-top:9px}.site-footer-links a{color:inherit;text-decoration:none;font-size:.75rem;font-weight:700;opacity:.82}.site-footer-links a:hover{opacity:1;text-decoration:underline}