@font-face {
    font-family: Material Symbols Outlined;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(material-symbols-outlined.woff2) format("woff2");
}

:root {
    --size: 1rem;
    --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Noto Sans", Arial, sans-serif;
    --font-icon: "Material Symbols Outlined";
    --speed1: .1s;
    --speed2: .2s;
    --speed3: .3s;
    --speed4: .4s;
    --active: rgb(128 128 128 / .192);
    --overlay: rgb(0 0 0 / .5);
    --elevate1: 0 .125rem .125rem 0 rgb(0 0 0 / .32);
    --elevate2: 0 .25rem .5rem 0 rgb(0 0 0 / .4);
    --elevate3: 0 .375rem .75rem 0 rgb(0 0 0 / .48);
    --top: env(safe-area-inset-top);
    --bottom: env(safe-area-inset-bottom);
    --left: env(safe-area-inset-left);
    --right: env(safe-area-inset-right);

    --primary: light-dark(#006e1c, #78dc77);
    --on-primary: light-dark(#ffffff, #00390a);
    --primary-container: light-dark(#94f990, #005313);
    --on-primary-container: light-dark(#002204, #94f990);
    --secondary: light-dark(#52634f, #baccb3);
    --on-secondary: light-dark(#ffffff, #253423);
    --secondary-container: light-dark(#d5e8cf, #3b4b38);
    --on-secondary-container: light-dark(#111f0f, #d5e8cf);
    --tertiary: light-dark(#38656a, #a0cfd4);
    --on-tertiary: light-dark(#ffffff, #00363b);
    --tertiary-container: light-dark(#bcebf0, #1f4d52);
    --on-tertiary-container: light-dark(#002023, #bcebf0);
    --error: light-dark(#ba1a1a, #ffb4ab);
    --on-error: light-dark(#ffffff, #690005);
    --error-container: light-dark(#ffdad6, #93000a);
    --on-error-container: light-dark(#410002, #ffb4ab);
    --background: light-dark(#fcfdf6, #1a1c19);
    --on-background: light-dark(#1a1c19, #e2e3dd);
    --surface: light-dark(#f9faf4, #121411);
    --on-surface: light-dark(#1a1c19, #e2e3dd);
    --surface-variant: light-dark(#dee5d8, #424940);
    --on-surface-variant: light-dark(#424940, #c2c9bd);
    --outline: light-dark(#72796f, #8c9388);
    --outline-variant: light-dark(#c2c9bd, #424940);
    --shadow: light-dark(#000000, #000000);
    --scrim: light-dark(#000000, #000000);
    --inverse-surface: light-dark(#2f312d, #e2e3dd);
    --inverse-on-surface: light-dark(#f0f1eb, #2f312d);
    --inverse-primary: light-dark(#78dc77, #006e1c);
    --surface-dim: light-dark(#dadad4, #121411);
    --surface-bright: light-dark(#f9faf4, #383a36);
    --surface-container-lowest: light-dark(#ffffff, #0c0f0c);
    --surface-container-low: light-dark(#f3f4ee, #1a1c19);
    --surface-container: light-dark(#eeeee8, #1e201d);
    --surface-container-high: light-dark(#e8e9e2, #282b27);
    --surface-container-highest: light-dark(#e2e3dd, #333531);

    color-scheme: light dark;
}

html {
    font-size: var(--size)
}

body {
    color: var(--on-surface);
    background-color: var(--surface);
    overflow-x: hidden;
    font-family: var(--font);
    font-size: .875rem;
    line-height: 1.5rem;
    letter-spacing: .0313rem;
    place-items: center;
}

* {
    -webkit-tap-highlight-color: transparent;
    position: relative;
    vertical-align: middle;
    color: inherit;
    margin: 0;
    padding: 0;
    border-radius: inherit;
    box-sizing: border-box;
}

*:after,
*:before {
    all: unset
}

label {
    font-size: .75rem;
    vertical-align: baseline
}

a,
b,
i,
span,
strong,
em,
code {
    vertical-align: baseline
}

a,
button,
.button {
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    border: none;
    font-family: inherit;
    outline: inherit;
    justify-content: center
}

:is(nav, .tabs, .field)>a,
button,
.button,
.chip,
i,
label {
    -webkit-user-select: none;
    user-select: none
}

:not(.grid, nav, .row)>:not(progress.max)+:is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul):not([class*=margin], .right, .left, .top, .bottom) {
    margin-block-start: 1rem
}

:is(a, button, .button, .chip, summary):focus-visible {
    outline: .125rem solid var(--primary);
    outline-offset: .25rem
}

:is(nav, .row, li).group>:focus-visible {
    z-index: 1
}

:is(button, .button, .chip)>:is(span, i, img, svg) {
    pointer-events: none
}

.secondary {
    background-color: var(--secondary) !important;
    color: var(--on-secondary) !important
}

.secondary-container {
    background-color: var(--secondary-container) !important;
    color: var(--on-secondary-container) !important
}

.medium-space:not(nav, .row, .grid, table, .tooltip, .list, menu, .shape) {
    block-size: 2rem
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 400;
    display: block;
    align-items: center;
    line-height: normal
}

h2,
.h2 {
    font-size: 2.8125rem
}

h5,
.h5 {
    font-size: 1.75rem
}

:is(.wave, .chip, .button, button, nav.tabbed>a, .tabs>a, nav.toolbar>a):not(.slow-ripple, .ripple, .fast-ripple):after,
nav:is(.left, .right, .bottom, .top).max>a:after,
nav:is(.left, .right, .bottom, .top).max>:is(ol, ul)>li>a:after,
nav:is(.left, .right, .bottom, .top):not(.max)>a>i:after,
nav:is(.left, .right, .bottom, .top):not(.max)>:is(ol, ul)>li>a>i:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-radius: inherit;
    inline-size: 100%;
    block-size: 100%;
    background-position: center;
    background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
    opacity: 0;
    transition: none;
    pointer-events: none
}

:is(.wave, .chip, .button, button, nav.tabbed>a, .tabs>a, nav.toolbar>a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover):after,
nav:is(.left, .right, .bottom, .top).max>a:not(.button, .chip):is(:focus-visible, :hover):after,
nav:is(.left, .right, .bottom, .top).max>:is(ol, ul)>li>a:not(.button, .chip):is(:focus-visible, :hover):after,
nav:is(.left, .right, .bottom, .top):not(.max)>a:not(.button, .chip):is(:focus-visible, :hover)>i:after,
nav:is(.left, .right, .bottom, .top):not(.max)>:is(ol, ul)>li>a:not(.button, .chip):is(:focus-visible, :hover)>i:after {
    background-size: 22500%;
    opacity: .1;
    transition: background-size var(--speed2) linear
}

:is(.wave, .chip, .button, button, nav.tabbed>a, .tabs>a, nav.toolbar>a, nav.max>a):not(.slow-ripple, .ripple, .fast-ripple):active:after,
nav:is(.left, .right, .bottom, .top).max>a:active:after,
nav:is(.left, .right, .bottom, .top).max>:is(ol, ul)>li>a:active:after,
nav:is(.left, .right, .bottom, .top):not(.max)>a:active>i:after,
nav:is(.left, .right, .bottom, .top):not(.max)>:is(ol, ul)>li>a:active>i:after {
    background-size: 0%;
    opacity: 0;
    transition: none
}

.button,
button {
    --_padding: 1rem;
    --_size: 2.5rem;
    box-sizing: content-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    block-size: var(--_size);
    font-size: .875rem;
    font-weight: 500;
    color: var(--on-primary);
    padding: 0 var(--_padding);
    background-color: var(--primary);
    border-radius: var(--_size);
    transition: transform var(--speed3), border-radius var(--speed2), padding var(--speed3);
    -webkit-user-select: none;
    user-select: none;
    gap: .5rem;
    line-height: normal
}

:is(button, .button).large {
    --_size: 3rem;
    --_padding: 1.25rem
}

:is(.button, button)[disabled] {
    opacity: .5;
    cursor: not-allowed
}

:is(.button, button)[disabled]:before,
:is(.button, button)[disabled]:after {
    display: none
}

:is(.button, button):not(.chip, .extend).active {
    background-color: var(--primary-container);
    color: var(--on-primary-container)
}

:is(.button, button):not(.chip):active,
:is(.button, button):not(.chip).active {
    border-radius: .5rem !important
}

hr,
[class*=divider] {
    all: unset;
    inline-size: -webkit-fill-available;
    min-block-size: auto;
    block-size: .0625rem;
    background-color: var(--outline-variant);
    display: block
}

hr+*,
[class*=divider]+* {
    margin: 0 !important
}

hr.medium,
.medium-divider {
    margin: 1rem 0 !important
}

hr.large,
.large-divider {
    margin: 1.5rem 0 !important
}

.field {
    --_input: 3rem;
    --_start: 1.2rem;
    --_middle: calc(var(--_input, 0) / 2);
    border-radius: .25rem .25rem 0 0;
    min-block-size: var(--_input);
    display: flex;
    flex-direction: column
}

.field.border {
    border-radius: .25rem
}

.field>:is(i, img, svg, progress.circle, a) {
    position: absolute;
    inset: calc((var(--_input, 0) / 2) - .75rem) auto auto auto;
    cursor: pointer;
    z-index: 10;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin: auto 0;
    pointer-events: none
}

.field>:is(i, img, svg, progress.circle, a),
[dir=rtl] .field>:is(i, img, svg, progress.circle, a):first-child {
    inset: calc(var(--_middle, 0) - .75rem) 1rem auto auto
}

.field>:is(input, textarea, select) {
    all: unset;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border-radius: inherit;
    border: .0625rem solid transparent;
    padding: 0 .9375rem;
    font-family: inherit;
    font-size: 1rem;
    min-block-size: var(--_input);
    outline: none;
    z-index: 1;
    background: none;
    resize: none;
    text-align: start;
    cursor: text
}

.field>:is(input, textarea, select):focus {
    border: .125rem solid transparent;
    padding-inline: .875rem
}

.field.border>:is(input, textarea, select) {
    border-color: var(--outline)
}

.field.border>:is(input, textarea, select):focus {
    border-color: var(--primary)
}

.field.suffix>:is(input, textarea, select) {
    padding-inline-end: 2.9375rem
}

.field.suffix>:is(input, textarea, select):focus {
    padding-inline-end: 2.875rem
}

.field:has(>:disabled) {
    opacity: .5;
    cursor: not-allowed
}

.field>:disabled {
    cursor: not-allowed
}

.field>select {
    -webkit-user-select: none;
    user-select: none
}

.field>select>option {
    background-color: var(--surface)
}

.field>:is(input, select) {
    padding-block-start: 1rem
}

.field:not(.label)>:is(input, select),
.field.border:not(.fill)>:is(input, select) {
    padding-block-start: 0
}

.field.label>label {
    --_start: 1rem;
    position: absolute;
    inset: -.5rem 1rem 0 var(--_start);
    display: flex;
    block-size: calc(var(--_input, 0) + 1rem);
    line-height: calc(var(--_input, 0) + 1rem);
    font-size: 1rem;
    transition: all .2s;
    gap: .25rem;
    white-space: nowrap;
    pointer-events: none
}

.field.label>:is(label.active, :focus+label, [placeholder]:not(:placeholder-shown)+label, select+label) {
    block-size: 2.5rem;
    line-height: 2.5rem;
    font-size: .75rem
}

.field.label.border:not(.fill)>:is(label.active, :focus+label, [placeholder]:not(:placeholder-shown)+label, select+label) {
    block-size: 1rem;
    line-height: 1rem
}

.field.label.border:not(.fill)>label:after {
    content: "";
    display: block;
    margin: .5rem 0 0;
    border-block-start: .0625rem solid var(--outline);
    block-size: 1rem;
    transition: none;
    flex: auto
}

.field.label.border:not(.fill)>:focus+label:after {
    border-block-start: .125rem solid var(--primary)
}

.field.label.border:not(.fill)>:is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
.field.label.border:not(.fill)>select {
    clip-path: polygon(-2% -2%, .75rem -2%, .75rem .5rem, calc(100% - 1rem) .5rem, calc(100% - 1rem) -2%, 102% -2%, 102% 102%, -2% 102%)
}

.field.label>:focus+label {
    color: var(--primary)
}

i,
:is(.checkbox, .radio, .switch)>span:before,
:is(.checkbox, .radio, .switch)>span>i {
    --_size: 1.5rem;
    font-family: var(--font-icon);
    font-weight: 400;
    font-style: normal;
    font-size: var(--_size);
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    inline-size: var(--_size);
    min-inline-size: var(--_size);
    block-size: var(--_size);
    min-block-size: var(--_size);
    box-sizing: content-box;
    line-height: normal;
    border-radius: 0
}

:has(>main) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "left top right" "left header right" "left main right" "left footer right" "left bottom right";
    min-block-size: 100dvh;
    box-sizing: border-box;
    background-color: var(--surface)
}

main {
    --_padding: .5rem;
    grid-area: main;
    padding: var(--_padding);
    overflow: hidden
}

nav,
.row,
a.row {
    display: flex;
    align-items: center;
    align-self: normal;
    text-align: start;
    justify-content: flex-start;
    white-space: nowrap;
    gap: 0.5rem;
    border-radius: 0
}

:is(nav, .row)>:not(ul, ol, header, footer) {
    margin: 0;
    white-space: normal;
}

nav.group {
    background: none !important
}

nav.group:not(.split)>:is(.button, button):not(.border) {
    background-color: var(--surface-container);
    color: var(--on-surface-container)
}

nav.group:not(.split)>:is(.button, button).active {
    background-color: var(--primary);
    color: var(--on-primary)
}

nav.group.secondary-container>button,
nav:is(.max, .toolbar, .tabbed, .group).secondary>:is(button, a).active,
nav:not(.max, .toolbar, .tabbed, .group).secondary>a.active:not(.button, .chip)>i {
    background-color: var(--secondary-container) !important;
    color: var(--on-secondary-container) !important
}

nav.group.secondary>button,
nav:is(.max, .toolbar, .tabbed, .group).secondary-container>:is(button, a).active,
nav:not(.max, .toolbar, .tabbed, .group).secondary-container>a.active:not(.button, .chip)>i {
    background-color: var(--secondary) !important;
    color: var(--on-secondary) !important
}


/** Custom styles for the timer application */

.timer {
    width: min(90vw, 26rem);
    display: grid;
    gap: 1.5rem;
    background: var(--surface-container-low);
    border-radius: 1rem;
    padding: 1rem;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
}

.core {
    display: grid;
    place-items: center;
    gap: 1rem;
}

.display-container {
    position: absolute;
    display: grid;
    place-items: center;
}

#display {
    font-size: 5rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

#timer-display {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    cursor: pointer;
}

#timer-display:has(.flash) {
    opacity: 0.5;
}

#progress-ring {
    width: 100%;
    aspect-ratio: 1 / 1;
    line-height: 0;
    opacity: 0;
    transition: opacity var(--speed3);
}

#progress-ring:defined {
    opacity: 1;
}

#status {
    font-size: 1.5rem;
    color: var(--primary);
    position: absolute;
    bottom: calc(100% + 1.5rem);
    width: max-content;
}

#status.rounds {
    font-size: 2rem;
}

.controls {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.flash {
    animation: flash-animation 1s steps(1, end) infinite;
}


@media (min-aspect-ratio: 16/9) {
    .timer {
        width: min(90vw, 60rem);
        grid-auto-flow: column;
    }
}

@keyframes flash-animation {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}