:root {
  --bg: #080a16;
  --ink: #f7f6ff;
  --muted: #8f93b3;
  --line: rgba(255,255,255,.14);
  --violet: #8f7aff;
  --cyan: #5ce1e6;
  --pink: #e385ff;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: "Manrope", sans-serif; overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }

.scene { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%, #171735 0%, #0b0d21 38%, #080a16 78%); z-index: -1; transition: background 2s ease; }
.stars { position: absolute; inset: 0; opacity: .65; background-image: radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px), radial-gradient(circle, rgba(160,154,255,.5) 0 1px, transparent 1.5px); background-size: 89px 97px, 137px 149px; background-position: 13px 21px, 43px 72px; animation: drift 28s linear infinite; transition: opacity .5s ease, background-size 1s ease; }
.orb { position: absolute; border-radius: 50%; filter: blur(3px); mix-blend-mode: screen; opacity: .45; animation: float 14s ease-in-out infinite; }
.orb-one { width: 48vw; height: 48vw; min-width: 420px; min-height: 420px; top: -23%; right: -10%; background: radial-gradient(circle, rgba(110,79,255,.35), transparent 65%); }
.orb-two { width: 55vw; height: 55vw; left: -20%; bottom: -35%; background: radial-gradient(circle, rgba(21,192,212,.27), transparent 65%); animation-delay: -5s; }
.orb-three { width: 30vw; height: 30vw; left: 40%; top: 31%; background: radial-gradient(circle, rgba(231,106,255,.15), transparent 65%); animation-delay: -9s; }
.aurora { position: absolute; inset: 10% -20%; opacity: .3; transform: rotate(-12deg); background: linear-gradient(100deg, transparent 20%, rgba(80,235,226,.16) 39%, rgba(157,100,255,.2) 51%, transparent 72%); filter: blur(55px); animation: sway 12s ease-in-out infinite alternate; }
.color-wash { position: absolute; inset: -30%; opacity: 0; background: radial-gradient(ellipse at var(--wash-x, 50%) var(--wash-y, 50%), hsla(var(--hue, 190), 90%, 65%, .18), transparent 35%); filter: blur(30px); transition: opacity 2s ease, background 2s ease; }
.particle-field { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.particle { position: absolute; width: var(--size); height: var(--size); left: var(--x); top: var(--y); border-radius: 50%; background: hsl(var(--particle-hue), 90%, 75%); box-shadow: 0 0 12px hsl(var(--particle-hue), 90%, 65%); animation: particle-float var(--duration) ease-in-out var(--delay) infinite alternate; }
.grid-floor { position: absolute; left: -15%; right: -15%; bottom: -24%; height: 55%; opacity: 0; transform: perspective(240px) rotateX(62deg); transform-origin: bottom; background-image: linear-gradient(rgba(97,225,232,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(97,225,232,.22) 1px, transparent 1px); background-size: 65px 65px; mask-image: linear-gradient(to top, black, transparent 82%); transition: opacity 1s ease; animation: grid-scroll 3s linear infinite; }
.celestial-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: .34; transition: opacity 1.5s ease; }
.shooting-star { position: absolute; width: 120px; height: 1px; opacity: 0; transform: rotate(-28deg); background: linear-gradient(90deg, transparent, hsla(var(--celestial-hue, 190), 95%, 88%, .9)); box-shadow: 0 0 8px hsla(var(--celestial-hue, 190), 95%, 80%, .7); }
.shooting-star::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: white; box-shadow: 0 0 10px 2px hsl(var(--celestial-hue, 190), 95%, 80%); }
.shooting-star-one { left: -15%; top: 23%; animation: shoot 13s 1s linear infinite; }
.shooting-star-two { left: -15%; top: 48%; width: 80px; animation: shoot 17s 6s linear infinite; }
.shooting-star-three { left: -15%; top: 70%; width: 150px; animation: shoot 21s 11s linear infinite; }
.planet, .moon { position: absolute; border-radius: 50%; opacity: .8; }
.planet-a { width: 58px; height: 58px; right: 9%; top: 20%; background: radial-gradient(circle at 30% 28%, #fff0bd 0 3%, #e99768 22%, #8d48a4 66%, #3c275e 100%); box-shadow: inset -12px -10px 18px rgba(15,12,50,.5), 0 0 28px rgba(217,135,255,.18); animation: planet-drift 12s ease-in-out infinite; }
.planet-ring { position: absolute; inset: 19px -17px; border: 1px solid rgba(245,195,255,.6); border-radius: 50%; transform: rotate(-22deg); }
.planet-b { width: 25px; height: 25px; left: 10%; top: 31%; background: radial-gradient(circle at 32% 27%, #b6faff, #48a7cc 42%, #172967 100%); box-shadow: 0 0 18px rgba(75,221,255,.35); animation: planet-drift 9s -4s ease-in-out infinite reverse; }
.moon { width: 42px; height: 42px; left: 17%; bottom: 17%; background: radial-gradient(circle at 36% 30%, #fffef1, #b9c4dc 60%, #596484); box-shadow: inset -9px -7px 13px rgba(24,29,66,.35), 0 0 20px rgba(175,201,255,.2); animation: moon-drift 15s ease-in-out infinite; }
.moon::before, .moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(80,94,132,.25); }
.moon::before { width: 8px; height: 6px; left: 10px; top: 12px; } .moon::after { width: 5px; height: 5px; right: 8px; bottom: 10px; }
.rocket { position: absolute; width: 26px; height: 62px; right: 19%; bottom: 13%; border-radius: 50% 50% 42% 42%; background: linear-gradient(90deg, #b9c9e8, #ffffff 48%, #7180bd); transform: rotate(36deg); opacity: .86; box-shadow: 0 0 19px rgba(117,211,255,.25); animation: rocket-float 10s ease-in-out infinite; }
.rocket::before { content: ""; position: absolute; left: 3px; right: 3px; top: 27px; height: 4px; background: #f17cae; box-shadow: 0 0 9px #ff82be; }
.rocket-window { position: absolute; width: 9px; height: 9px; top: 13px; left: 8px; border: 2px solid #d7ffff; border-radius: 50%; background: #398da9; box-shadow: 0 0 7px #8fffff; }
.rocket-fin { position: absolute; bottom: 5px; width: 12px; height: 17px; background: #e0759f; }
.fin-left { left: -7px; border-radius: 80% 0 0 0; transform: skewY(28deg); } .fin-right { right: -7px; border-radius: 0 80% 0 0; transform: skewY(-28deg); }
.rocket-flame { position: absolute; left: 8px; bottom: -19px; width: 10px; height: 25px; border-radius: 50% 50% 60% 60%; background: linear-gradient(#fff3a3, #ff9c3f 42%, transparent); filter: blur(1px); opacity: .8; }

.app-shell { min-height: 100vh; width: min(1180px, 100%); margin: 0 auto; padding: 30px 42px 24px; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: .23em; }
.brand-mark { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; transform: rotate(45deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; width: 14px; height: 1px; background: var(--cyan); }
.brand-mark::after { transform: rotate(90deg); background: var(--violet); }
.brand-mark span { width: 4px; height: 4px; border-radius: 50%; background: white; box-shadow: 0 0 10px var(--cyan); }
.mode-pill { display: flex; gap: 8px; align-items: center; color: #b1b3d3; font: 10px var(--mono); letter-spacing: .18em; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.icon-button { color: #a7a9c9; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 9px; width: 38px; height: 34px; font-size: 20px; line-height: 1; transition: .2s; }
.icon-button:hover { color: white; background: rgba(255,255,255,.1); }

.timer-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 460px; padding: 30px 0 10px; }
.eyebrow { display: flex; align-items: center; gap: 15px; color: var(--muted); font: 10px var(--mono); letter-spacing: .3em; }
.eyebrow-line { width: 32px; height: 1px; background: linear-gradient(90deg, transparent, var(--violet)); }
.eyebrow-line:last-child { background: linear-gradient(90deg, var(--violet), transparent); }
.timer-wrap { position: relative; display: grid; place-items: center; width: min(85vw, 638px); aspect-ratio: 1; margin: 12px 0 0; }
.timer-halo { position: absolute; border-radius: 50%; border: 1px solid rgba(142,126,255,.2); }
.progress-ring { position: absolute; inset: 11%; border-radius: 50%; background: conic-gradient(from -25deg, hsl(var(--hue, 190), 90%, 72%) var(--progress, 0%), rgba(255,255,255,.035) var(--progress, 0%) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); opacity: 0; transition: opacity 1s ease, background 1.5s ease; filter: drop-shadow(0 0 7px hsl(var(--hue, 190), 90%, 65%)); transform: rotate(0deg); }
.orbit-ring { position: absolute; border: 1px solid hsla(var(--hue, 190), 90%, 70%, .18); border-radius: 50%; opacity: 0; transform: rotate(var(--angle, 0deg)) scaleX(.46); transition: opacity 1s ease; }
.orbit-ring-one { inset: 4%; --angle: 18deg; }
.orbit-ring-two { inset: 1%; --angle: -52deg; border-color: hsla(300, 90%, 75%, .2); }
.orbit-ring-three { inset: 22%; --angle: 71deg; border-color: hsla(185, 90%, 75%, .25); }
.orbit-ring i { position: absolute; width: 9px; height: 9px; right: 8%; top: 4%; border-radius: 50%; background: hsl(var(--hue, 190), 90%, 80%); box-shadow: 0 0 20px 4px hsl(var(--hue, 190), 90%, 65%); }
.halo-back { inset: 8%; box-shadow: 0 0 110px rgba(100,81,255,.16), inset 0 0 70px rgba(119,93,255,.08); animation: pulse 5s ease-in-out infinite; }
.halo-back::before, .halo-back::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(92,225,230,.2); inset: 7%; transform: rotate(35deg) scaleX(1.1); }
.halo-back::after { inset: 17%; transform: rotate(-50deg) scaleX(1.2); border-color: rgba(227,133,255,.15); }
.halo-front { inset: 16%; border-color: rgba(255,255,255,.08); border-left-color: var(--cyan); border-top-color: var(--violet); animation: spin 22s linear infinite; }
.timer-readout { position: relative; z-index: 1; display: flex; align-items: baseline; gap: clamp(2px, .8vw, 9px); white-space: nowrap; font: 500 clamp(48px, 8.5vw, 94px) var(--mono); letter-spacing: -.11em; text-shadow: 0 0 28px rgba(183,170,255,.28); }
.time-number { min-width: 1.85ch; text-align: center; }
.time-colon { color: #8d88bb; font-size: .75em; opacity: .75; }
.timer-caption { position: absolute; bottom: 25%; color: #8e91b4; font: 9px var(--mono); letter-spacing: .25em; }
.message { color: #b4b5cf; margin: -3px 0 0; font-size: 13px; letter-spacing: .03em; }

.control-panel { width: min(600px, 100%); margin: 0 auto; padding: 20px 22px 16px; background: rgba(20,22,49,.65); border: 1px solid rgba(255,255,255,.13); border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(18px); }
.duration-editor { display: flex; align-items: end; justify-content: center; gap: 14px; }
.field-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.field-group label { color: #8589ad; font: 9px var(--mono); letter-spacing: .16em; }
.field-group input { width: 110px; border: 0; border-bottom: 1px solid rgba(255,255,255,.22); outline: 0; background: transparent; color: white; text-align: center; font: 500 30px var(--mono); padding: 2px 5px 7px; transition: .2s; }
.field-group input:focus { border-color: var(--cyan); box-shadow: 0 4px 16px -8px var(--cyan); }
.field-divider { color: #676c96; font: 26px var(--mono); padding-bottom: 6px; }
.duration-hint { margin: 14px 0 16px; text-align: center; color: #8589ad; font-size: 11px; }
.actions { display: flex; justify-content: center; gap: 10px; }
.secondary-button, .primary-button { border-radius: 9px; height: 44px; padding: 0 19px; font: 500 10px var(--mono); letter-spacing: .12em; transition: transform .2s, box-shadow .2s, background .2s; }
.secondary-button { color: #a9acd0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.primary-button { min-width: 168px; color: #080a16; background: linear-gradient(100deg, #a997ff, #6be2e5); border: 0; box-shadow: 0 7px 20px rgba(93,190,222,.18); }
.primary-button:hover, .secondary-button:hover { transform: translateY(-2px); }
.primary-button:hover { box-shadow: 0 10px 28px rgba(93,190,222,.3); }
.play-icon { font-size: 9px; margin-right: 8px; }
.footer-note { text-align: center; color: #626685; font: 10px var(--mono); letter-spacing: .08em; padding-top: 19px; }
.footer-star { color: var(--violet); margin: 0 9px; }

body.running .mode-pill { color: var(--cyan); } body.running .live-dot { background: hsl(var(--celestial-hue, 190), 90%, 72%); box-shadow: 0 0 9px hsla(var(--celestial-hue, 190), 90%, 72%, .45); }
body.running .control-panel { border-color: rgba(92,225,230,.23); }
body.running .particle-field, body.running .progress-ring, body.running .orbit-ring, body.running .grid-floor { opacity: 1; }
body.running .celestial-scene { opacity: .9; }
body.running .scene { background: radial-gradient(circle at var(--wash-x, 50%) var(--wash-y, 45%), hsl(var(--hue, 190), 43%, 20%) 0%, #0b0d21 42%, #080a16 82%); }
body.running .stars { opacity: var(--star-opacity, .9); background-size: var(--star-size, 89px) var(--star-size, 97px), 137px 149px; }
body.running .color-wash { opacity: 1; }
body.running .aurora { animation: sway 7s ease-in-out infinite alternate, hue-shift 4s linear infinite; opacity: .56; }
body.running .orb { animation-duration: 8s; }
body.running .halo-back { animation: pulse 2.8s ease-in-out infinite, halo-breathe 3s ease-in-out infinite; }
body.running .halo-front { animation: spin 11s linear infinite; border-color: hsl(var(--hue, 190), 80%, 70%); border-right-color: transparent; }
body.running .timer-readout { text-shadow: 0 0 28px hsla(var(--hue, 190), 90%, 70%, .4); font-size: clamp(60px, 10.6vw, 118px); }
body.running .orbit-ring-one { animation: spin 8s linear infinite; }
body.running .orbit-ring-two { animation: reverse-spin 13s linear infinite; }
body.running .orbit-ring-three { animation: spin 5s linear infinite; }
body.complete .scene { animation: alarm-bg .7s steps(2, end) infinite; }
body.complete .timer-wrap { filter: drop-shadow(0 0 32px rgba(255,94,176,.6)); }
body.complete .halo-front { border-color: #ff76bd; animation: alarm-spin .5s linear infinite; }
body.complete .message { color: #ffb3dd; }
.complete .primary-button { background: linear-gradient(100deg, #ff9bd1, #ffd27c); }

@keyframes drift { to { background-position: 73px 111px, 3px 22px; } }
@keyframes float { 50% { transform: translate(3%, 5%) scale(1.08); } }
@keyframes sway { to { transform: rotate(-2deg) translateY(4%); } }
@keyframes pulse { 50% { transform: scale(1.03); opacity: .8; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes reverse-spin { to { transform: rotate(-360deg) scaleX(.46); } }
@keyframes halo-breathe { 50% { box-shadow: 0 0 150px hsla(var(--hue, 190), 90%, 60%, .27), inset 0 0 90px hsla(var(--hue, 190), 90%, 60%, .12); } }
@keyframes hue-shift { to { filter: blur(55px) hue-rotate(70deg); } }
@keyframes particle-float { 0% { transform: translate3d(0, 0, 0) scale(.65); opacity: .1; } 45% { opacity: .8; } 100% { transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1.35); opacity: .15; } }
@keyframes grid-scroll { to { background-position: 0 65px, 65px 0; } }
@keyframes shoot { 0% { opacity: 0; transform: translate(-5vw, -5vh) rotate(-28deg); } 9% { opacity: .9; } 22% { opacity: .9; } 37%, 100% { opacity: 0; transform: translate(125vw, 48vh) rotate(-28deg); } }
@keyframes planet-drift { 50% { transform: translate(-18px, 14px) rotate(18deg); } }
@keyframes moon-drift { 50% { transform: translate(20px, -10px); } }
@keyframes rocket-float { 0%, 100% { transform: translate(0, 0) rotate(36deg); } 50% { transform: translate(-34px, -28px) rotate(42deg); } }
@keyframes alarm-spin { to { transform: rotate(360deg) scale(1.08); } }
@keyframes alarm-bg { 50% { filter: brightness(1.9) saturate(1.4); } }

@media (max-width: 620px) { .app-shell { padding: 24px 18px 18px; } .timer-stage { min-height: 420px; } .timer-wrap { width: min(94vw, 450px); } .control-panel { padding: 18px 10px 14px; } .duration-editor { gap: 5px; } .field-group input { width: 82px; font-size: 23px; } .field-divider { font-size: 20px; } .field-group label { font-size: 8px; letter-spacing: .1em; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .particle-field { display: none; } }

:root { color-scheme: dark; }
.brand h1 { font: inherit; margin: 0; }
.footer-note { color: #a7a9c9; font-size: 12px; }
:focus-visible { outline: 2px solid #6be2e5; outline-offset: 5px; }
.icon-button { width: 44px; height: 44px; }
.motion-button { min-height: 44px; padding: 8px 12px; color: #d9dafa; background: #141631; border: 1px solid #666987; border-radius: 9px; }
.motion-button:hover { background: #292c4c; }
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; }
.motion-off .particle-field { display: none; }
.embedded .app-shell { min-height: 520px; padding: 20px; }
.embedded .topbar { gap: 12px; }
.embedded .brand { font-size: 10px; }
.embedded .mode-pill, .embedded .icon-button, .embedded .footer-note { display: none; }
.embedded .timer-stage { min-height: 0; padding: 15px 0; }
.embedded .timer-wrap { width: min(65vw, 250px); margin: 0; }
.embedded .timer-readout, .embedded.running .timer-readout { font-size: clamp(30px, 8vw, 45px); }
.embedded .message { font-size: 11px; margin-top: 5px; }
.embedded .control-panel { max-width: 440px; padding: 12px; }
.embedded .field-group input { width: clamp(55px, 12vw, 82px); font-size: 20px; }
.embedded .field-group label { color: #b4b5cf; }
.embedded .duration-editor { gap: 7px; }
.embedded .duration-hint { margin-block: 10px; color: #b4b5cf; }
.embedded .primary-button { min-width: 142px; }
.embedded .motion-button { font-size: 11px; }
@media (max-width: 620px) { .topbar { flex-wrap: wrap; gap: 12px; } .mode-pill { order: 4; width: 100%; justify-content: center; } }