:root { --accent:#333; --bg:#f5f5f5; }
        * { box-sizing: border-box; }
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
            margin: 0;
            background: #fbe7e4;
            align-items: center;
        }
        /* top */
        #top {
            height: 10vh;
            display: flex;
            flex-direction: column;
        }
        #title {
            font-size: 12pt;
            cursor: pointer;
						width: 100%;
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
        }
        #digital {
/*
            font-size: 12pt;
						width: 100%;
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
*/
            position: absolute;
            top: 50%;
            right: 20%;
            transform: translateY(-50%);
            z-index: 3;
            font-size: clamp(1rem, 2.5vw, 0.75rem);
            line-height: 1;
            text-align: right;
						border: 4px solid #469c0d;
						border-radius: 8px;
						background: #f8a0c9;
						padding: 4px;
						font-weight: bold;
						color: #b6c309;
        }
				/* title */
        #stopwatch-menu-container {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1000;
        }
        
        #stopwatch-menu-button {
            background: #f8a0c9;
            border: 3px solid #469c0d;
            border-radius: 4px;
            padding: 4px 8px;
            cursor: pointer;
            font-size: 18px;
            line-height: 1;
            font-weight: bold;
        }
        #stopwatch-menu-button:hover {
            background-color: #cd84fb;
        }
        
        #stopwatch-menu {
            display: none;
            position: absolute;
            right: 0;
            margin-top: 4px;
            list-style: none;
            background: #f8a0c9;
            border: 3px solid #469c0d;
            border-radius: 4px;
						padding-inline-start: 0px;
        }
        
        #stopwatch-menu li {
            cursor: pointer;
            white-space: nowrap;
            font-weight: bold;
        }

				.stopwatch-menu-item {
            padding: 4px 8px;
				}
        .stopwatch-menu-item:hover {
            background-color: #cd84fb;
        }
				/* /title */
        /* middle */
        #middle {
            height: 80vh;
						max-height: 100vw;
						max-width: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        #analogFace {
            aspect-ratio: 1 / 1;
            width: min(90vw, calc(100vh - 35vh));
            height: auto;
						margin: 0 auto;
            max-width: calc(100vh - 35vh);
            max-height: calc(100vh - 35vh);
            border: 5px solid #469c0d;
            border-radius: 50%;
            position: relative;
            background: #cd84fb;
        }
        .hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform-origin: bottom center;
            transform: translateX(-50%) rotate(0deg);
						z-index: 2;
        }
        #centerCap {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 25px;                 /* match #hourHand width */
            height: 25px;                /* same as width for a circle */
            border-radius: 50%;
            background: #469c0d;  /* match hour hand color */
            transform: translate(-50%, -50%);
            z-index: 3;                  /* above hands */
            pointer-events: none;
        }
        #hourHand {
            width: 16px;
            height: 25%;
            border-radius: 8px;
            background: #cd7a0e;
        }
        #minuteHand {
            width: 8px;
            height: 35%;
            border-radius: 4px;
            background: #ef0606;
        }
        #secondHand {
            width: 4px;
            height: 45%;
            border-radius: 2px;
            background: #2ad574;
        }
        /* bottom */
        #bottom {
            height: 10vh;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        #bottom div {
					padding: 5px;
				}
				#bottom div button {
            flex: 1 1 30%;
            padding: 1em 1.25em;
            font-size: clamp(1rem, 2.5vw, 1.2rem);
            border: none;
            border-radius: 8px;
            background: var(--accent);
            color: #fff;
            cursor: pointer;
        }
        #bottom button:hover { background: #555; }
        /* Tick rings */
        #tickLayer { position:absolute; inset:0; pointer-events:none; z-index:1; }
        
        .tick {
          position: absolute;
          top: 50%; left: 50%;
          transform-origin: center;
          background: #444;
        }
        .tick.dot { border-radius: 50%; }
        .tick.sec { background: #2ad574; }   /* outer ring */
        .tick.min { background: #ef0606; }   /* middle ring */
        .tick.hour { background: #cd7a0e; }  /* inner ring */