.time-timer-page{--tt-purple:#B968FF;--tt-cyan:#25D7FF}
.tt{color:#f6f7ff;max-width:1100px}
.tt p{line-height:1.6}
.tt-links{display:flex;gap:10px;overflow-x:auto;white-space:nowrap;margin-bottom:20px}
.tt a,.tt button{font:inherit;color:#f6f7ff;background:#111526;border:1px solid #566178;border-radius:8px;padding:12px 16px;text-decoration:none;cursor:pointer}
.tt a[aria-current],#ttStart{background:var(--tt-purple);color:#080b16;border-color:var(--tt-purple);font-weight:800}
.tt-layout{display:grid;grid-template-columns:minmax(240px,1fr) minmax(240px,1fr);gap:32px;align-items:center}
.tt svg{display:block;width:100%;max-width:500px;margin:auto;cursor:grab;user-select:none}
.tt svg:active{cursor:grabbing}
.tt :focus-visible{outline:3px solid #ffe66d;outline-offset:4px}
.tt-controls{display:grid;gap:18px}.tt output{font-size:clamp(42px,7vw,72px);font-weight:800;font-variant-numeric:tabular-nums}.tt input{width:85px;padding:8px;font:inherit;color:#f6f7ff;background:#111526;border:1px solid #566178;border-radius:6px}
.tt-presets,.tt-actions{display:flex;flex-wrap:wrap;gap:8px}
.tt button:hover,
.tt a:hover{border-color:var(--tt-purple)}
.tt button:disabled{opacity:.5;cursor:default}.tt-help{color:#bfc9df;font-size:15px}.tt #ttStatus{min-height:3.2em}
.time-timer-page.game-mode-active .ninabella-game-content{overflow:auto;padding-top:52px}
.time-timer-page.game-mode-active .game-close-button{display:grid}@media(max-width:650px){.tt-layout{grid-template-columns:1fr;gap:12px}.tt svg{max-width:340px}.tt-controls{gap:12px}}

.tt #ttField,.tt #ttMarks{fill:var(--tt-purple)}
.tt #ttHand{stroke:var(--tt-cyan)}
.tt #ttHandHub{fill:var(--tt-cyan)}

/* Keep the sound control clear of navigation on small screens. */
.time-timer-page:not(.game-mode-active) .ninabella-game-content{padding-top:64px}

/* Alarm volume, with a preview of the complete four-beep signal. */
.tt-volume{display:grid;gap:2px}
.tt-volume>label{display:flex;justify-content:space-between;align-items:center;font-size:14px}
.tt-volume-row{display:flex;align-items:center;gap:12px}
.tt .tt-volume input[type="range"]{flex:1;min-width:0;width:100%;min-height:44px;padding:0;border:0;accent-color:var(--tt-purple)}
.tt .tt-volume button{flex:0 0 auto;min-height:44px;padding:7px 12px}