*{margin:0;padding:0;box-sizing:border-box}body{height:100vh;width:100vw;background:linear-gradient(135deg,#0a0a0a,#1a1a1a);display:flex;justify-content:center;align-items:center;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#f5f5f5}.App{height:70vh;background-color:#222;padding:2rem;border-radius:20px;box-shadow:0 0 20px #000000b3;text-align:center;width:380px}.App h1{font-size:2rem;margin-bottom:1.5rem;color:#00bfff}.length-controls{display:flex;justify-content:space-between;margin-bottom:1.5rem}.length-controls h2{font-size:1rem;margin-bottom:.5rem;color:#ccc}button{background-color:#00bfff;color:#111;border:none;border-radius:8px;padding:.4rem .8rem;margin:.2rem;font-size:1rem;cursor:pointer;transition:background-color .2s ease,transform .2s ease}button:hover{background-color:#0094cc;transform:scale(1.05)}#break-length,#session-length{display:inline-block;min-width:30px;font-size:1.2rem;color:#fff}.timer{background:#111;border:2px solid #00bfff;border-radius:15px;padding:1rem;margin:1rem 0}#timer-label{font-size:1.2rem;color:#00bfff;margin-bottom:.5rem}#time-left{font-size:2.5rem;font-weight:700;color:#fff}.controls button{background-color:#00bfff;color:#111;font-size:1.1rem;margin:.5rem;padding:.5rem 1.2rem;border-radius:10px}.controls button:hover{background-color:#0094cc}@media(max-width:400px){.App{width:90%;padding:1rem}#time-left{font-size:2rem}}.footer{margin-top:1.5rem;font-size:.9rem;color:#aaa;opacity:0;animation:fadeIn 2s ease-in forwards;animation-delay:2s}.footer em{display:block;color:#00bfff;font-style:normal;font-weight:700;margin-top:4px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}