*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #e74c3c;--color-primary-dark: #c0392b;--color-primary-light: #ff6b5a;--color-secondary: #3498db;--color-secondary-dark: #2980b9;--color-success: #2ecc71;--color-warning: #f39c12;--color-bg: #1a1a1a;--color-bg-light: #2a2a2a;--color-bg-lighter: #3a3a3a;--color-text: #ffffff;--color-text-muted: #b0b0b0;--color-border: #4a4a4a;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--spacing-xxl: 4rem;--font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-xxl: 2rem;--font-size-display: 4rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: 1rem;--radius-full: 50%;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 6px rgba(0, 0, 0, .2);--shadow-lg: 0 10px 25px rgba(0, 0, 0, .3);--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}body{font-family:var(--font-family);background:radial-gradient(circle at top left,rgba(231,76,60,.18),transparent 24rem),radial-gradient(circle at top right,rgba(52,152,219,.14),transparent 22rem),linear-gradient(150deg,#111,#181818 38%,#232323);color:var(--color-text);min-height:100vh;display:flex;flex-direction:column;line-height:1.6;position:relative;overflow-x:hidden}body:before,body:after{content:"";position:fixed;width:20rem;height:20rem;border-radius:50%;filter:blur(110px);opacity:.22;pointer-events:none;z-index:0}body:before{top:-4rem;right:-5rem;background:#e74c3c80}body:after{bottom:-6rem;left:-5rem;background:#3498db59}a{color:var(--color-primary);transition:color var(--transition-fast)}a:visited{color:var(--color-primary)}a:hover,a:focus{color:var(--color-primary-light)}.header{position:sticky;top:0;z-index:10;padding:.35rem 0 .4rem;background:linear-gradient(180deg,#0b0b0bd6,#0b0b0b5c);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.header-container{max-width:1240px;margin:0 auto;padding:.85rem var(--spacing-md) 1rem;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--spacing-md);position:relative;z-index:1}.header-container:before{content:"";position:absolute;inset:0;border-radius:1.6rem;background:linear-gradient(140deg,#ffffff14,#ffffff05),#141414c7;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px #00000047;z-index:-1}.logo-container{display:flex;align-items:center;gap:var(--spacing-sm);min-width:fit-content;justify-self:start}.logo{font-size:1.65rem;font-weight:700;color:#fff4ef;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 8px 24px rgba(0,0,0,.28)}.logo-link{display:flex;align-items:center;text-decoration:none;padding:.35rem;border-radius:1rem;background:linear-gradient(145deg,#e74c3c2e,#ffffff0a);box-shadow:inset 0 0 0 1px #ffffff12}.logo-img{height:34px;width:auto;transition:transform var(--transition-fast)}.logo-img:hover{transform:scale(1.1)}.nav{display:flex;gap:var(--spacing-sm);align-items:center;align-self:center;padding:.35rem;border-radius:999px;background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff0d;justify-self:center}.nav-btn,.nav-btn:link,.nav-btn:visited{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--color-primary);border:1px solid transparent;padding:.58rem 1rem;border-radius:999px;font-size:.95rem;cursor:pointer;transition:color var(--transition-normal),background-color var(--transition-normal),border-color var(--transition-normal),transform var(--transition-normal);font-weight:600;line-height:1;letter-spacing:.02em;text-decoration:none}.nav-btn--accent{color:var(--color-primary)}.nav-btn:hover{color:var(--color-text);background-color:#ffffff0f;border-color:#ffffff0f;transform:translateY(-1px)}.nav-btn--active{color:var(--color-primary);border-color:#ff6b5a8f;background:linear-gradient(145deg,#e74c3c66,#e74c3c2e);box-shadow:inset 0 0 0 1px #ffd6d01f,0 4px 10px #e74c3c14}.header-side{justify-self:end;display:flex;align-items:center;gap:var(--spacing-md);flex-wrap:nowrap;justify-content:flex-end;min-height:1px}.mini-timer{min-width:190px;padding:.8rem 1rem;border:1px solid rgba(255,255,255,.09);border-radius:var(--radius-lg);background:linear-gradient(145deg,#282828eb,#101010f5);box-shadow:0 10px 22px #0000003d;display:flex;flex-direction:column;gap:.25rem;text-decoration:none;color:var(--color-text);transition:border-color var(--transition-normal),transform var(--transition-normal),box-shadow var(--transition-normal)}.mini-timer:hover,.mini-timer:focus{color:var(--color-text);border-color:#ffffff2e;transform:translateY(-2px);box-shadow:0 14px 28px #0000004d}.mini-timer__mode{font-size:var(--font-size-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:1.4px}.mini-timer__time{font-size:1.65rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}.mini-timer__meta{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-sm);color:var(--color-text-muted)}.mini-timer__dot{width:.55rem;height:.55rem;border-radius:50%;background-color:var(--color-primary);opacity:.75}.mini-timer--pomodoro .mini-timer__time{color:var(--color-primary-light)}.mini-timer--pomodoro .mini-timer__dot{background-color:var(--color-primary)}.mini-timer--short-break .mini-timer__time{color:var(--color-secondary)}.mini-timer--short-break .mini-timer__dot{background-color:var(--color-secondary)}.mini-timer--long-break .mini-timer__time{color:var(--color-success)}.mini-timer--long-break .mini-timer__dot{background-color:var(--color-success)}.mini-timer[data-running=true] .mini-timer__dot{animation:pulse 1.6s ease-in-out infinite}.main-content{flex:1;display:flex;align-items:center;justify-content:center;padding:2.25rem var(--spacing-md) 3.25rem;position:relative;z-index:1}.container{max-width:960px;width:100%;background:linear-gradient(165deg,#ffffff12,#ffffff05),#151515d6;padding:clamp(1.5rem,2vw,2.25rem);border-radius:1.75rem;border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 48px #00000052;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.main-content .container h2{margin-bottom:var(--spacing-md);font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.05}.main-content .container h3{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm);color:#fff1ea}.main-content .container p+p{margin-top:.8rem}.main-content .container ol,.main-content .container ul{margin-left:0;padding-left:1.2rem;list-style-position:outside}.main-content .container img{border-radius:var(--radius-lg)}.container--timer{max-width:1080px}.page-intro{margin-bottom:1.75rem;display:flex;flex-direction:column;gap:.7rem}.page-intro--center{text-align:center;align-items:center}.eyebrow{font-size:.78rem;text-transform:uppercase;letter-spacing:.22em;color:var(--color-primary-light)}.page-title{font-size:clamp(2.4rem,5vw,4rem);line-height:.98;letter-spacing:-.04em;max-width:11ch}.page-lead{max-width:44rem;color:#ffffffb8;font-size:1.05rem}.demo-card{margin-top:var(--spacing-lg);padding:1.2rem 1.3rem;border-radius:1.2rem;background:linear-gradient(165deg,#ffffff0f,#ffffff05),#0e0e0eb8;border:1px solid rgba(255,255,255,.08)}.demo-card__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.timer-surface,.settings-surface{width:100%;max-width:760px;margin:0 auto;padding:clamp(1.3rem,2vw,2rem);border-radius:1.55rem;background:linear-gradient(165deg,#ffffff0d,#ffffff04),#0c0c0c94;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px #ffffff0a}.timer-modes{display:flex;gap:var(--spacing-sm);justify-content:center;margin-bottom:var(--spacing-xl);background:#ffffff0d;padding:.45rem;border-radius:1.1rem;box-shadow:inset 0 0 0 1px #ffffff0a}.mode-label{flex:1;text-align:center;color:var(--color-text-muted);padding:var(--spacing-sm) var(--spacing-md);border-radius:.9rem;font-size:var(--font-size-base);font-weight:600;transition:all var(--transition-normal);cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.mode-label--active{background-color:var(--color-primary);color:var(--color-text);box-shadow:var(--shadow-sm)}.mode-label[data-mode=short-break].mode-label--active{background-color:var(--color-secondary)}.mode-label[data-mode=long-break].mode-label--active{background-color:var(--color-success)}.timer-display{display:flex;justify-content:center;margin-bottom:var(--spacing-xl)}.timer-circle{position:relative;width:370px;height:370px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at center,#ffffff0f,#fff0 58%),linear-gradient(180deg,#ffffff08,#fff0)}.timer-progress{position:absolute;width:100%;height:100%;transform:rotate(-90deg)}.timer-progress-bg{fill:none;stroke:#ffffff14;stroke-width:8}.timer-progress-bar{fill:none;stroke:var(--color-primary);stroke-width:8;stroke-linecap:round;stroke-dasharray:565.48;stroke-dashoffset:0;transition:stroke-dashoffset var(--transition-slow) linear}.timer-text{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);z-index:1}.time-display{font-size:var(--font-size-display);font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums;text-shadow:0 10px 24px rgba(0,0,0,.34);letter-spacing:-.05em}.timer-label{font-size:.92rem;color:#ffffff94;font-weight:500;text-transform:uppercase;letter-spacing:.24em}.controls{display:flex;gap:var(--spacing-md);justify-content:center;margin-bottom:1.2rem}.btn{padding:.95rem 1.4rem;border:none;border-radius:1rem;font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);text-align:center}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn:active{transform:translateY(0)}.btn:disabled,.btn[aria-disabled=true]{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}.btn--primary{background:linear-gradient(145deg,var(--color-primary),var(--color-primary-dark));color:var(--color-text);min-width:150px}.btn--primary:hover{background:linear-gradient(145deg,var(--color-primary-light),var(--color-primary))}.btn--secondary{background:linear-gradient(145deg,#3c3c3cf5,#242424f5);color:var(--color-text)}.btn--secondary:hover{background:linear-gradient(145deg,#4a4a4af5,#2a2a2af5)}.btn--danger{background:linear-gradient(145deg,#8f2418,#5c1610);color:var(--color-text)}.btn--danger:hover{background:linear-gradient(145deg,#a42d1f,#742118)}.btn--small{padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-base)}.btn--settings{background-color:transparent;border:1px solid rgba(255,255,255,.1);color:var(--color-text-muted);padding:.85rem 1rem;font-size:var(--font-size-base)}.btn--settings:hover{border-color:#e74c3c73;color:var(--color-text)}.icon-settings{font-size:var(--font-size-lg)}.section-view{display:flex;flex-direction:column;animation:fadeIn var(--transition-normal) ease-in}.settings-button-wrapper{display:flex;justify-content:center;margin-top:var(--spacing-md);margin-bottom:var(--spacing-lg)}.settings-content{display:flex;flex-direction:column;gap:var(--spacing-md);max-width:34rem;margin:0 auto}.settings-title{font-size:clamp(1.75rem,3vw,2.3rem);color:var(--color-text);margin-bottom:0;text-align:center}.settings-copy{text-align:center;color:#ffffffad;margin-bottom:.4rem}.settings-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.settings-label{font-size:var(--font-size-base);color:var(--color-text-muted);font-weight:500}.checkbox-label{flex-direction:row;align-items:center;gap:var(--spacing-sm);cursor:pointer}.checkbox-label span{color:var(--color-text)}.settings-input{background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:.9rem;padding:var(--spacing-sm);font-size:var(--font-size-base);color:var(--color-text);transition:border-color var(--transition-fast),background-color var(--transition-fast),transform var(--transition-fast)}.settings-input:focus{outline:none;border-color:#e74c3c85;background-color:#ffffff12;transform:translateY(-1px)}.settings-input--invalid,.settings-input[aria-invalid=true]{border-color:var(--color-primary);box-shadow:0 0 0 3px #e74c3c2e}.settings-error{color:var(--color-primary-light);font-size:var(--font-size-sm);line-height:1.4;margin-top:calc(var(--spacing-xs) * -1)}.settings-checkbox{width:20px;height:20px;cursor:pointer;accent-color:var(--color-primary)}.settings-actions{display:flex;gap:var(--spacing-sm);justify-content:center;margin-top:var(--spacing-sm)}.session-info{text-align:center;margin-top:var(--spacing-lg);display:flex;flex-direction:column;gap:.45rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}.session-text{font-size:1.15rem;color:#ffffffc7;font-weight:500}.session-subtext{font-size:var(--font-size-sm);color:#ffffff94;letter-spacing:.02em}.productivity-shell{max-width:1080px}.productivity-title{max-width:none}.productivity-lead{max-width:40rem}.productivity-surface{display:flex;flex-direction:column;gap:var(--spacing-lg);width:100%;max-width:860px;margin:0 auto;padding:clamp(1.35rem,2vw,2rem);border-radius:1.55rem;background:linear-gradient(165deg,#ffffff0d,#ffffff04),#0c0c0c94;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px #ffffff0a}.productivity-tabs{display:flex;align-items:flex-end;justify-content:center;gap:1.5rem;padding-bottom:.95rem;border-bottom:1px solid rgba(255,255,255,.12)}.productivity-tab{position:relative;padding:0;border:none;background:transparent;color:var(--color-text-muted);font:inherit;font-size:1rem;font-weight:600;cursor:pointer;transition:color var(--transition-fast),transform var(--transition-fast)}.productivity-tab:after{content:"";position:absolute;left:0;right:0;bottom:-.95rem;height:2px;border-radius:999px;background:transparent;transition:background var(--transition-fast),transform var(--transition-fast)}.productivity-tab:hover,.productivity-tab:focus-visible{color:var(--color-text);transform:translateY(-1px);outline:none}.productivity-tab--active{color:#fff1ea}.productivity-tab--active:after{background:linear-gradient(90deg,var(--color-primary-light),rgba(255,255,255,.25))}.productivity-panels{display:flex;flex-direction:column}.productivity-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-radius:1.1rem;background:#ffffff09;border:1px solid rgba(255,255,255,.08)}.productivity-toolbar__hint{margin:0;color:#ffffff8c;font-size:var(--font-size-sm);text-wrap:balance}.productivity-panel{display:flex;flex-direction:column;gap:var(--spacing-md);animation:fadeIn var(--transition-normal) ease-in}.productivity-entry-form{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:1.35rem;border-radius:1.35rem;background:linear-gradient(170deg,#ffffff0f,#ffffff04),#10101099;border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 30px #00000038}.productivity-field{display:flex;flex-direction:column;gap:.45rem}.productivity-input{width:100%}.productivity-textarea{resize:vertical;min-height:8.5rem;line-height:1.5}.productivity-form-actions{display:flex;justify-content:flex-start}.productivity-toggle{display:inline-flex;align-items:center;gap:.65rem;color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:600}.productivity-toggle__input{margin:0}.productivity-submit{min-width:140px}.productivity-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}.productivity-item{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);padding:1rem 1.1rem;border-radius:1.2rem;background:linear-gradient(160deg,#ffffff0b,#ffffff04),#121212b8;border:1px solid rgba(255,255,255,.08)}.productivity-item--note,.productivity-item--editing{align-items:flex-start}.productivity-item--editing{border-color:#e74c3c3d;box-shadow:inset 0 0 0 1px #ff6b5a14}.productivity-check{display:flex;align-items:flex-start;gap:.85rem;flex:1;min-width:0;cursor:pointer}.productivity-check__input{flex-shrink:0;margin-top:.1rem}.productivity-item__content{color:var(--color-text);word-break:break-word}.productivity-item__body{display:flex;align-items:center;gap:.7rem;min-width:0}.productivity-item__content--completed{color:#ffffff75;text-decoration:line-through}.productivity-item__badge{display:inline-flex;align-items:center;justify-content:center;padding:.22rem .55rem;border-radius:999px;background:#e74c3c2e;border:1px solid rgba(255,107,90,.24);color:#ffd6cf;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.productivity-item__editor{flex:1;width:100%}.productivity-item__actions{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;flex-shrink:0}.productivity-action{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:var(--color-text-muted);padding:.55rem .85rem;font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background-color var(--transition-fast),transform var(--transition-fast)}.productivity-action:hover,.productivity-action:focus-visible{color:var(--color-text);border-color:#ffffff2e;background:#ffffff14;transform:translateY(-1px);outline:none}.productivity-action--primary{color:#fff1ea;border-color:#e74c3c3d;background:#e74c3c29}.productivity-action--primary:hover,.productivity-action--primary:focus-visible{border-color:#ff6b5a66;background:#e74c3c3d}.productivity-action--danger{color:#ff7d6d}.productivity-note{display:flex;flex-direction:column;gap:.65rem;flex:1;min-width:0}.productivity-note__content{color:var(--color-text);word-break:break-word}.productivity-note__meta{color:#ffffff7a;font-size:var(--font-size-sm)}.productivity-empty-state{padding:1rem 1.1rem;border-radius:1.2rem;border:1px dashed rgba(255,255,255,.14);background:#ffffff05;color:#fff9}.form-message{border-radius:var(--radius-md);padding:.8rem 1rem;font-size:var(--font-size-sm);background:#ffffff0d;color:var(--color-text-muted)}.form-message--success{background:#2ecc711f;color:#8ff0b3}.form-message--error{background:#e74c3c24;color:#ff9588}.footer{padding:0 0 1.1rem;margin-top:auto;position:relative;z-index:1}.footer-container{max-width:1240px;margin:0 auto;padding:1rem var(--spacing-md) 0;text-align:center;border-top:1px solid rgba(255,255,255,.08)}.footer-text{font-size:var(--font-size-base);color:var(--color-text-muted);margin-bottom:var(--spacing-xs)}.footer-link{color:var(--color-primary-light);text-decoration:none;transition:color var(--transition-fast)}.footer-link:hover{color:var(--color-primary);text-decoration:underline}.footer-note{font-size:var(--font-size-sm);color:var(--color-text-muted);font-style:italic}@media(max-width:768px){.header-container{grid-template-columns:1fr;align-items:stretch}.logo-container,.header-side{justify-content:center}.header-side,.nav{justify-self:stretch;width:100%}.mini-timer{width:min(100%,320px);align-items:center}.nav{justify-content:center;flex-wrap:wrap}.nav-btn{flex:1 1 0;text-align:center}.timer-circle{width:280px;height:280px}.page-title{max-width:100%}.time-display{font-size:3rem}.timer-label{font-size:var(--font-size-base)}.controls{flex-direction:column}.btn{width:100%;justify-content:center}.timer-modes{flex-direction:column}.productivity-tabs{gap:var(--spacing-md)}.productivity-item,.productivity-item--note{flex-direction:column;align-items:stretch}.productivity-form-actions,.productivity-item__actions{width:100%}.productivity-action{flex:1 1 0}}@media(max-width:480px){:root{--font-size-display: 3rem;--spacing-xl: 2rem}.timer-circle{width:240px;height:240px}.container{padding:1.2rem;border-radius:1.25rem}.logo{font-size:var(--font-size-lg)}.header-container{padding:.65rem .9rem .9rem}.header-side{gap:.85rem}.nav-btn{font-size:var(--font-size-sm);padding:var(--spacing-xs) var(--spacing-sm)}.mini-timer{width:100%}.productivity-entry-form,.productivity-surface{padding:1.15rem}.productivity-tabs{gap:var(--spacing-sm)}.productivity-tab{font-size:var(--font-size-sm)}.productivity-item{padding:.9rem}.about-photo{float:none;display:block;margin:0 auto var(--spacing-md);width:min(100%,220px)}}@media(max-width:700px){.productivity-item{flex-direction:column;align-items:stretch}.productivity-item__actions{width:100%}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.btn-text{display:inline-block}.hidden{display:none!important}.fade-in{animation:fadeIn var(--transition-normal) ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.about-photo{float:right;width:200px;height:auto;margin:0 0 var(--spacing-md) var(--spacing-md);border-radius:var(--radius-lg)}.qr-code-container{display:flex;justify-content:center;margin:var(--spacing-md) 0}.qr-code{width:min(100%,400px);height:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}#sessionCount,#sessionTotal{color:var(--color-primary-light);font-weight:700}