@layer components{.ft-timer-section{width:100%;min-width:0}.ft-app{--ft-accent:var(--brand);--ft-accent-soft:var(--brand-soft);--ft-accent-ink:var(--brand-deep);--ft-shadow:color-mix(in srgb, var(--brand-deep) 14%, transparent);--ft-pad:clamp(14px, 2.4vw, 24px);--ft-top:150px;box-sizing:border-box;width:100%;min-width:0;max-width:100%;height:clamp(500px, calc(100dvh - var(--ft-top) - 20px), 640px);background:var(--surface-subtle);color:var(--text);border:1px solid var(--border);box-shadow:0 8px 28px var(--ft-shadow);border-radius:16px;flex-direction:column;display:flex;position:relative;overflow:hidden}.ft-app:fullscreen{width:100%;max-width:none;box-shadow:none;border:0;border-radius:0;height:100dvh;min-height:0;margin:0}.ft-app:-webkit-full-screen{width:100%;max-width:none;box-shadow:none;border:0;border-radius:0;height:100vh;min-height:0;margin:0}.ft-app.ft-phase-short_break{--ft-accent:var(--complete-solid);--ft-accent-soft:var(--complete-bg);--ft-accent-ink:var(--complete-text)}.ft-app.ft-phase-long_break{--ft-accent:var(--rest-border);--ft-accent-soft:var(--rest-bg);--ft-accent-ink:var(--text)}.ft-sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ft-app button:focus-visible,.ft-app input:focus-visible,.ft-app a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.ft-header{padding:10px var(--ft-pad);background:var(--surface);border-bottom:1px solid var(--border);flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:10px 24px;display:flex}.ft-header-left{flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0;display:flex}.ft-sysid{letter-spacing:.16em;text-transform:uppercase;color:var(--text);font-size:.76rem;font-weight:700}.ft-sep{color:var(--brand);margin:0 3px}.ft-protocol{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-size:.72rem;font-weight:600}.ft-toplinks{flex-wrap:wrap;align-items:center;gap:4px 20px;display:flex}.ft-text-btn{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;padding:6px 0;font-size:.72rem;font-weight:600;transition:color .15s}.ft-text-btn strong{color:var(--text);font-weight:700}.ft-text-btn:hover{color:var(--brand)}.ft-body{flex:1;grid-template-columns:minmax(0,1fr) minmax(260px,320px);min-width:0;min-height:0;display:grid}.ft-stage{min-height:0;padding:var(--ft-pad);background:linear-gradient(180deg, var(--ft-accent-soft) 0%, var(--surface-subtle) 75%);flex-direction:column;justify-content:center;align-items:center;gap:clamp(10px,2vh,18px);transition:background .25s;display:flex;overflow-y:auto}.ft-side{background:var(--surface);border-left:1px solid var(--border);flex-direction:column;gap:14px;min-height:0;padding:16px 16px 20px;display:flex;overflow-y:auto}.ft-phases{background:var(--surface);border:1px solid var(--border);border-radius:12px;align-items:center;gap:4px;max-width:100%;padding:4px;display:flex}.ft-phase-btn{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;border-radius:8px;padding:10px 18px;font-size:.74rem;font-weight:700;transition:all .18s}.ft-phase-btn:hover{color:var(--brand)}.ft-phase-btn.is-active{background:var(--ft-accent-soft);color:var(--ft-accent-ink);border-color:var(--ft-accent)}.ft-objective{width:100%;max-width:520px}.ft-objective input{border:0;border-bottom:1.5px solid var(--border);width:100%;color:var(--text);letter-spacing:.06em;text-align:center;background:0 0;border-radius:0;padding:6px 4px 8px;font-size:.82rem;font-weight:600;transition:border-color .15s}.ft-objective input::placeholder{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:500}.ft-objective input:focus{border-bottom-color:var(--brand);outline:none}.ft-readout{text-align:center;flex-direction:column;align-items:center;max-width:100%;display:flex}.ft-badge{background:var(--ft-accent);color:var(--surface);letter-spacing:.1em;text-transform:uppercase;border-radius:999px;align-items:center;padding:6px 16px;font-size:.74rem;font-weight:700;display:inline-flex}.ft-clock{max-width:100%;font-family:var(--display-font,Georgia, serif);letter-spacing:-.04em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;-webkit-user-select:none;user-select:none;margin:clamp(2px,1vh,8px) 0;font-size:clamp(3.5rem,min(13vw,17vh),7.5rem);font-weight:400;line-height:1}.ft-status-line{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;font-size:.72rem;font-weight:600;display:flex}.ft-status-line strong{color:var(--text);font-variant-numeric:tabular-nums;font-weight:700}.ft-segments{grid-template-columns:repeat(60,minmax(0,1fr));gap:2px;width:100%;max-width:520px;height:10px;display:grid}.ft-tick{background:var(--border);border-radius:1px;height:100%;transition:background .3s}.ft-tick.is-filled{background:var(--ft-accent)}.ft-tick.is-current{background:var(--ft-accent);animation:1.6s ease-in-out infinite ft-pulse}@keyframes ft-pulse{0%,to{opacity:.25}50%{opacity:.8}}.ft-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;display:flex}.ft-btn{letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:12px;justify-content:center;align-items:center;font-size:.76rem;font-weight:700;transition:all .18s;display:inline-flex}.ft-btn-primary{background:var(--brand);min-width:190px;color:var(--surface);border:1.5px solid var(--brand);box-shadow:0 6px 18px var(--ft-shadow);padding:16px 36px}.ft-btn-primary:hover{background:var(--brand-deep);border-color:var(--brand-deep)}.ft-btn-ghost{background:var(--surface);color:var(--muted);border:1.5px solid var(--border);padding:15px 20px}.ft-btn-ghost:hover{border-color:var(--control-border);color:var(--text)}.ft-section-label{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-size:.66rem;font-weight:700}.ft-presets{gap:8px;display:grid}.ft-preset{text-align:left;background:var(--surface);border:1.5px solid var(--border);cursor:pointer;border-radius:12px;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;transition:border-color .16s,background .16s;display:flex}.ft-preset:hover{border-color:var(--control-border)}.ft-preset.is-selected{border-color:var(--brand);background:var(--brand-soft)}.ft-preset-top{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.ft-preset-name{letter-spacing:.1em;text-transform:uppercase;color:var(--text);font-size:.72rem;font-weight:700}.ft-preset.is-selected .ft-preset-name{color:var(--brand-deep)}.ft-preset-ratio{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.72rem;font-weight:600}.ft-preset-tagline{color:var(--muted);font-size:.76rem;line-height:1.45}.ft-config{background:var(--surface-subtle);border:1.5px solid var(--border);border-radius:14px;padding:16px}.ft-config-hint{color:var(--muted);margin:0 0 14px;font-size:.8rem;line-height:1.5}.ft-config-hint strong{color:var(--text)}.ft-config-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px;display:grid}.ft-field{flex-direction:column;gap:6px;min-width:0;display:flex}.ft-field label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.62rem;font-weight:700}.ft-field input{border:1.5px solid var(--control-border);background:var(--surface);width:100%;color:var(--text);font-variant-numeric:tabular-nums;text-align:center;appearance:textfield;border-radius:10px;padding:9px 10px;font-size:1rem;font-weight:700}.ft-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ft-field input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ft-field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.ft-config-switches{gap:8px;display:grid}.ft-switch{background:var(--surface);border:1.5px solid var(--border);letter-spacing:.08em;text-transform:uppercase;color:var(--text);cursor:pointer;border-radius:10px;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;font-size:.7rem;font-weight:700;display:flex}.ft-switch input{width:18px;height:18px;accent-color:var(--brand);cursor:pointer;flex-shrink:0}.ft-card{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;flex-direction:column;gap:14px;min-width:0;padding:18px;display:flex}.ft-card-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.ft-card-title{letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin:0;font-size:.7rem;font-weight:700}.ft-card-desc{color:var(--muted);margin:5px 0 0;font-size:.78rem;line-height:1.55}.ft-index{text-align:right;flex-shrink:0}.ft-index-val{font-family:var(--display-font,Georgia, serif);font-variant-numeric:tabular-nums;color:var(--brand);font-size:1.9rem;line-height:1;display:block}.ft-index-val.is-mid{color:var(--complete-text)}.ft-index-val.is-low{color:var(--muted)}.ft-index-label{letter-spacing:.1em;color:var(--muted);margin-top:4px;font-size:.6rem;font-weight:700;display:block}.ft-meter{background:var(--border);border-radius:999px;height:8px;overflow:hidden}.ft-meter-fill{background:var(--brand);border-radius:999px;height:100%;transition:width .5s,background .3s}.ft-meter-fill.is-mid{background:var(--complete-solid)}.ft-meter-fill.is-low{background:var(--rest-border)}.ft-metrics{border-top:1px solid var(--border);grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding-top:14px;display:grid}.ft-metrics dt{letter-spacing:.08em;color:var(--muted);font-size:.58rem;font-weight:700}.ft-metrics dd{color:var(--text);font-variant-numeric:tabular-nums;margin:4px 0 0;font-size:1.15rem;font-weight:700}.ft-clear-btn{color:var(--muted);letter-spacing:.1em;cursor:pointer;background:0 0;border:0;padding:2px 0;font-size:.62rem;font-weight:700;transition:color .15s}.ft-clear-btn:hover{color:var(--brand)}.ft-ledger-empty{text-align:center;letter-spacing:.08em;color:var(--muted);margin:0;padding:14px 0;font-size:.66rem;font-weight:600}.ft-ledger{max-height:220px;margin:0;padding:0 4px 0 0;list-style:none;overflow-y:auto}.ft-ledger-item{border-bottom:1px solid var(--border);grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:8px 0;font-size:.78rem;display:grid}.ft-ledger-item:last-child{border-bottom:0}.ft-ledger-time{color:var(--muted);font-variant-numeric:tabular-nums}.ft-ledger-label{color:var(--text);overflow-wrap:anywhere;min-width:0;font-weight:600}.ft-ledger-label em{color:var(--muted);font-style:normal;font-weight:500}.ft-ledger-min{color:var(--brand-deep);font-variant-numeric:tabular-nums;font-weight:700}.ft-footer{padding:8px var(--ft-pad);background:var(--surface);border-top:1px solid var(--border);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-wrap:wrap;flex:none;justify-content:space-between;align-items:center;gap:6px 20px;font-size:.66rem;display:flex}.ft-footer p{margin:0}.ft-shortcuts strong{color:var(--text);font-weight:700}.ft-footer-right{flex-wrap:wrap;align-items:center;gap:6px 18px;display:flex}.ft-footer-status{color:var(--brand);font-weight:700}.ft-more{letter-spacing:.08em;color:var(--muted);font-weight:700;text-decoration:none;transition:color .15s}.ft-more:hover{color:var(--brand)}@media (max-width:1000px){.ft-app{height:auto;overflow:hidden}.ft-app:fullscreen{height:100dvh;overflow-y:auto}.ft-app:-webkit-full-screen{height:100vh;overflow-y:auto}.ft-body{flex-direction:column;flex:1 0 auto;display:flex}.ft-stage{flex:1 0 auto;min-height:420px;overflow:visible}.ft-side{border-left:0;border-top:1px solid var(--border);flex:none;overflow:visible}.ft-presets{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.ft-phases{flex-direction:column;width:100%}.ft-phase-btn,.ft-actions{width:100%}.ft-btn-primary{flex:100%}.ft-btn-ghost{flex:auto;padding-left:12px;padding-right:12px}.ft-segments{gap:1px}.ft-presets{grid-template-columns:1fr}.ft-protocol{display:none}}@media (max-height:760px) and (min-width:1001px){.ft-clock{font-size:clamp(3.25rem,15vh,6rem)}.ft-stage{gap:12px}}.ft-app:fullscreen .ft-clock{font-size:clamp(5rem,min(22vw,32vh),18rem)}.ft-app:fullscreen .ft-clock{font-size:clamp(5rem,min(22vw,32vh),18rem)}@media (hover:none){.ft-shortcuts{display:none}}@media (prefers-reduced-motion:reduce){.ft-stage,.ft-preset,.ft-tick,.ft-meter-fill,.ft-btn,.ft-phase-btn{transition:none!important}.ft-tick.is-current{animation:none!important}}}
