@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600&family=Manrope:wght@400;500;600&display=swap');

:root { color-scheme: dark; --app-brightness: 1; }
* { box-sizing: border-box; }
html, body { min-height: 100%; overscroll-behavior: none; }
body { margin: 0; min-width: 320px; overflow: hidden; background: #050505; color: #f4f3ef; font-family: Manrope, system-ui, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.app { min-height: 100svh; display: flex; flex-direction: column; align-items: center; padding: clamp(2rem, 7vh, 5.5rem) 1.5rem 2.5rem; touch-action: none; filter: brightness(var(--app-brightness)); transition: padding .45s ease, filter .08s linear; }
.controls { text-align: center; min-height: 120px; }
.mode-switch { display: inline-flex; padding: 4px; border: 1px solid #2a2a2c; border-radius: 13px; background: #171719; }
.mode { border: 0; border-radius: 9px; padding: .65rem 1.15rem; background: transparent; color: #aaa9ab; transition: .2s; }
.mode:hover { color: #fff; }
.mode.active { background: #434347; color: #fff; box-shadow: 0 1px 1px #0007; }
.hint { margin: 1.25rem 0 0; color: #8d8c8f; font-size: .87rem; letter-spacing: .03em; }
.clock-wrap { flex: 1; display: grid; place-items: center; width: 100%; }
.clock { width: min(1120px, 100%); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(.45rem, 2.2vw, 2.2rem); }
.unit { min-width: 0; position: relative; text-align: center; }
.flip-card { height: min(35vw, 360px); min-height: 145px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3px, .55vw, 8px); outline: none; }
.flip-card.editable { cursor: ns-resize; }
.flip-card.editable:focus-visible { outline: 2px solid #d6c27c; outline-offset: 4px; }
.digit-card { position: relative; overflow: hidden; border-radius: clamp(12px, 2vw, 22px); background: #141414; box-shadow: inset 0 1px #ffffff08, 0 18px 36px #0004; perspective: 900px; perspective-origin: center; }
.half { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: #151515; color: #eeece7; font: 600 clamp(7rem, 11vw, 13.5rem)/1 'Barlow Condensed', Impact, sans-serif; text-align: center; user-select: none; }
.half span { position: absolute; width: 100%; left: 0; height: 200%; display: grid; place-items: center; padding-bottom: .02em; }
.top { top: 0; border-radius: clamp(12px, 2vw, 22px) clamp(12px, 2vw, 22px) 0 0; border-bottom: 2px solid #060606; }
.top span { top: 0; }
.bottom { bottom: 0; border-radius: 0 0 clamp(12px, 2vw, 22px) clamp(12px, 2vw, 22px); border-top: 2px solid #090909; }
.bottom span { bottom: 0; }
.flip-top, .flip-bottom { z-index: 3; backface-visibility: hidden; transform-style: preserve-3d; }
.flip-top { top: 0; transform-origin: bottom; border-bottom: 2px solid #060606; animation: fold-top .27s ease-in forwards; }
.flip-bottom { bottom: 0; transform-origin: top; border-top: 2px solid #060606; transform: rotateX(90deg); animation: fold-bottom .27s ease-out .27s forwards; }
.flip-top span { top: 0; }
.flip-bottom span { bottom: 0; }
@keyframes fold-top { to { transform: rotateX(-90deg); filter: brightness(.7); } }
@keyframes fold-bottom { to { transform: rotateX(0); } }
.colon { margin-top: -1.7rem; font: 600 clamp(3.5rem, 8vw, 8rem)/1 'Barlow Condensed', sans-serif; color: #777; }
.unit-label { display: block; margin-top: 1rem; text-transform: uppercase; color: #a7a6a4; font-size: clamp(.65rem, 1.4vw, .88rem); letter-spacing: .14em; font-weight: 600; }
.dial { position: absolute; z-index: 5; top: 50%; right: clamp(-1.65rem, -1.7vw, -.8rem); width: 13px; height: clamp(82px, 12vw, 128px); transform: translate(50%, -50%); border-radius: 99px; cursor: ns-resize; opacity: .88; touch-action: none; background: repeating-linear-gradient(to bottom, #444 0 2px, #1b1b1b 2px 7px); box-shadow: inset 0 0 0 1px #ffffff0b, 0 2px 8px #0008; }
.dial:focus-visible { outline: 2px solid #d6c27c; outline-offset: 4px; border-radius: 99px; }
.dial[hidden] { display: none; }
.timer-panel { text-align: center; min-height: 103px; }
.timer-panel p { margin: 0 0 1rem; color: #888; font-size: .83rem; }
.start { border: 1px solid #c9c7bd; border-radius: 10px; background: #e6e4dc; color: #111; padding: .62rem 1.6rem; font-weight: 600; transition: transform .15s, background .2s; }
.start:hover { background: #fff; transform: translateY(-1px); }
.exit { position: fixed; right: 1.3rem; bottom: 1.1rem; display: none; width: 38px; height: 38px; border: 1px solid #444; border-radius: 50%; background: #171717; color: #bbb; font-size: 1.7rem; line-height: 1; }
.focus .controls, .focus .timer-panel, .focus .unit-label { opacity: 0; pointer-events: none; }
.focus .controls, .focus .timer-panel, .focus .dial { display: none; }
.focus { padding: 1rem; }
.focus .clock-wrap { min-height: calc(100svh - 2rem); }
.focus .clock { width: min(1600px, 100%); }
.focus .exit { display: block; }
.finished .face { color: #e7b3ae; }
@media (max-width: 600px) { .app { padding-inline: .75rem; } .controls { min-height: 98px; } .mode { padding: .55rem .82rem; font-size: .82rem; } .clock { gap: .25rem; } .flip-card { min-height: 115px; border-radius: 10px; } .dial { right: -9px; height: 74px; } .colon { font-size: 2.2rem; } .unit-label { margin-top: .65rem; letter-spacing: .08em; } }