:root { --purple:#5c4bd8; --dark:#24214a; --soft:#f5f3ff; --mint:#dff7ec; --pink:#fff0f2; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100dvh; color:var(--dark); background:linear-gradient(150deg,#f6f2ff 0%,#fffaf6 100%); font-family:ui-rounded,"Nunito",system-ui,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.app-shell { width:min(100%,570px); min-height:100vh; min-height:100dvh; margin:auto; padding:clamp(24px,5vw,44px) 22px max(34px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:20px; }
header { display:flex; align-items:center; gap:12px; }
.brand-mark { width:43px; height:43px; display:grid; place-items:center; border-radius:14px; color:#fff; background:var(--purple); font-size:29px; font-weight:bold; transform:rotate(-25deg); }
h1,.eyebrow,p { margin:0; } h1 { font-size:clamp(27px,7vw,36px); line-height:1; letter-spacing:-1.5px; } .eyebrow { margin-bottom:4px; color:#777292; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.timer-card,.settings,.handover-card { border-radius:28px; background:var(--white); box-shadow:0 15px 35px rgba(68,55,134,.10); }
.timer-card { position:relative; overflow:hidden; padding:39px 20px 28px; text-align:center; transition:padding .25s, min-height .25s; }
.timer-card.running { background:#fbfaff; } .timer-card.alert { animation:pulse .75s ease-in-out infinite alternate; background:var(--pink); }
.turn-label { min-height:22px; color:var(--purple); font-weight:800; font-size:16px; }.time-display { margin:8px 0 5px; font-variant-numeric:tabular-nums; font-size:clamp(74px,20vw,118px); line-height:1; font-weight:900; letter-spacing:-.08em; }.helper-text { color:#777292; font-weight:600; }
.progress-track { height:12px; margin:27px 6px 0; overflow:hidden; border-radius:99px; background:#ece9ff; }.progress-fill { height:100%; width:0%; border-radius:inherit; background:linear-gradient(90deg,#6d5ce7,#a197ff); transition:width .2s linear; }
.controls { display:grid; grid-template-columns:2fr 1fr; gap:12px; }.controls button,.timer-stop { min-height:62px; border:0; border-radius:18px; font-weight:900; font-size:18px; }.primary-button { color:#fff; background:var(--purple); box-shadow:0 7px 0 #4433bc; }.primary-button:active { transform:translateY(4px); box-shadow:0 3px 0 #4433bc; }.secondary-button { color:#686382; background:#eae8f4; }.secondary-button:disabled { opacity:.55; cursor:default; }
.settings { padding:7px 20px; }.setting-row,.sound-option { min-height:73px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #eeeef5; gap:10px; }.setting-row>label,.sound-copy { font-weight:800; }.stepper { display:flex; align-items:center; gap:9px; color:#777292; font-weight:800; }.stepper input { width:42px; padding:5px 0; color:var(--dark); border:0; background:transparent; text-align:center; font-size:18px; font-weight:900; outline-color:var(--purple); }.stepper input::-webkit-inner-spin-button { -webkit-appearance:none; }.stepper-button { width:32px; height:32px; border:0; border-radius:10px; color:var(--purple); background:#efedff; font-size:23px; font-weight:800; line-height:1; }.sound-option { border-bottom:0; cursor:pointer; }.sound-icon { display:inline-grid; width:27px; height:27px; place-items:center; margin-right:7px; border-radius:8px; color:var(--purple); background:#efedff; }.sound-copy { display:flex; align-items:center; } #soundToggle { position:absolute; opacity:0; }.toggle { position:relative; width:48px; height:28px; border-radius:99px; background:#cbc8dc; transition:.2s; }.toggle::after { position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; background:#fff; content:""; transition:.2s; } #soundToggle:checked + .toggle { background:var(--purple); } #soundToggle:checked + .toggle::after { transform:translateX(20px); }
.presets { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:13px 0; border-bottom:1px solid #eeeef5; }.presets span { width:100%; color:#777292; font-size:13px; font-weight:800; }.preset-button { flex:1 1 58px; min-height:36px; border:0; border-radius:10px; color:var(--purple); background:#efedff; font-size:13px; font-weight:900; }
.tip { padding:0 11px; color:#777292; text-align:center; font-size:14px; line-height:1.45; }.handover-card { padding:24px; text-align:center; background:var(--mint); color:#19694c; }.handover-card p { font-size:22px; font-weight:900; }.handover-card strong { display:block; margin:3px 0 -4px; font-size:64px; line-height:1; }.handover-card span { font-weight:700; }.celebration { font-size:35px; } [hidden] { display:none!important; }
.test-sound { width:100%; min-height:46px; margin:0 0 13px; border:0; border-radius:13px; color:var(--purple); background:#efedff; font-weight:900; }
body.timer-active .app-shell { justify-content:center; } body.timer-active header,body.timer-active .settings,body.timer-active .controls,body.timer-active .tip { display:none; } body.timer-active .timer-card { min-height:min(72dvh,650px); display:flex; flex-direction:column; justify-content:center; padding:35px 25px; } body.timer-active .time-display { font-size:clamp(92px,27vw,160px); } body.timer-active .helper-text { max-width:330px; margin:8px auto 0; } body.timer-active .progress-track { margin-top:30px; }.active-actions { display:flex; justify-content:center; gap:10px; } .timer-stop,.timer-pause { width:auto; min-height:45px; margin-top:24px; padding:0 22px; color:#686382; background:#ebe9f4; font-size:15px!important; }.timer-pause { color:#fff; background:var(--purple); }
@keyframes pulse { to { transform:scale(1.015); box-shadow:0 15px 42px rgba(230,84,110,.28); } }
@media (max-width:360px) { .app-shell { padding-inline:14px; }.settings { padding-inline:15px; }.stepper { gap:5px; } }
@media (orientation:landscape) and (max-height:600px) { .app-shell { width:min(100%,900px); padding:14px 24px; gap:10px; }.app-shell header { display:none; }.timer-card { padding:19px 20px; }.time-display { font-size:clamp(64px,14vh,98px); }.progress-track { margin-top:15px; }.settings { display:grid; grid-template-columns:1fr 1fr; column-gap:20px; }.presets { grid-row:span 3; align-content:start; }.setting-row,.sound-option { min-height:48px; }.test-sound { margin:4px 0 8px; }.tip { display:none; } body.timer-active .app-shell { width:min(100%,900px); } body.timer-active .timer-card { min-height:calc(100dvh - 28px); padding:18px 25px; } body.timer-active .time-display { font-size:clamp(86px,27vh,155px); } .timer-stop,.timer-pause { margin-top:16px; } }