*{box-sizing:border-box;margin:0;padding:0}body{font-family:Georgia,serif;background:#fdf4e7;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}h1{color:#7a4f2e;font-size:2rem;margin-bottom:6px;letter-spacing:1px}.subtitle{color:#b0825a;font-size:.9rem;margin-bottom:24px;font-style:italic}.card{background:#fffaf4;border-radius:24px;box-shadow:0 4px 24px #b4825021;padding:32px 36px;max-width:380px;width:100%;display:flex;flex-direction:column;align-items:center;gap:20px}.mode-tabs{display:flex;gap:8px;background:#f3e8d5;border-radius:14px;padding:5px;width:100%}.mode-tab{flex:1;padding:7px 0;border:none;background:transparent;border-radius:10px;cursor:pointer;font-size:.82rem;color:#a07048;font-family:inherit;transition:all .2s}.mode-tab.active{background:#c8864e;color:#fff;font-weight:700;box-shadow:0 2px 8px #b464322e}.dog-container{position:relative;display:flex;flex-direction:column;align-items:center}.animal-wrapper{position:relative;display:inline-block}.animal-img{width:170px;height:186px;object-fit:contain;border-radius:12px;display:block}.hat-overlay{display:none;position:absolute;transform:translate(-50%);pointer-events:none;z-index:10}#hat-overlay-tophat{top:-10px;left:43%}#hat-overlay-tophat.dog{top:-25px;left:53%}#hat-overlay-crown{top:5px;left:43%}#hat-overlay-crown.dog{top:-10px;left:53%}#hat-overlay-cowboyhat{top:5px;left:43%}#hat-overlay-cowboyhat.dog{top:-15px;left:53%}.hat-wardrobe{display:flex;flex-direction:row;align-items:center;gap:8px;margin-top:8px}.hat-wardrobe-label{font-size:.75rem;color:#b0825a;font-style:italic}.hat-btn{font-size:1.5rem;background:none;border:2px solid #ddc8a8;border-radius:10px;padding:4px 8px;cursor:pointer;transition:border-color .2s,transform .15s,background .2s}.hat-btn:hover{border-color:#c8864e;transform:scale(1.1)}.hat-btn.worn{border-color:#c8864e;background:#fdf0e0;box-shadow:0 0 0 2px #c8864e4d}.animal-picker{display:flex;gap:10px;margin-top:10px}.animal-btn{width:42px;height:42px;border-radius:50%;border:2.5px solid #ddc8a8;overflow:hidden;cursor:pointer;padding:0;background:none;transition:border-color .2s,box-shadow .2s}.animal-btn.active{border-color:#c8864e;box-shadow:0 0 0 2px #c8864e4d}.animal-btn:hover{border-color:#b5733d}.animal-btn img{width:100%;height:100%;object-fit:cover}.speech-bubble{background:#e8f5e1;border:2px solid #a8d48a;border-radius:16px;padding:10px 16px;font-size:.85rem;color:#4a7a2e;text-align:center;max-width:280px;margin-bottom:10px;position:relative;line-height:1.4;min-height:48px;display:flex;align-items:center;justify-content:center;font-style:italic}.speech-bubble:after{content:"";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#a8d48a}.speech-bubble:before{content:"";position:absolute;bottom:-9px;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#e8f5e1;z-index:1}.timer-display{font-size:4rem;font-weight:700;color:#7a4f2e;letter-spacing:3px;line-height:1}.timer-display.break-mode{color:#4a7a5e}.session-label{font-size:.8rem;color:#b0825a;text-transform:uppercase;letter-spacing:2px;margin-top:6px}.progress-ring-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.progress-ring{transform:rotate(-90deg)}.progress-ring-bg{fill:none;stroke:#f0e0cc;stroke-width:6}.progress-ring-fill{fill:none;stroke:#c8864e;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear}.progress-ring-fill.break-mode{stroke:#6ab08a}.timer-inner{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center}.controls{display:flex;gap:10px;align-items:center}.auto-flow-toggle{display:flex;align-items:center;gap:5px;font-size:.8rem;color:#b0825a;cursor:pointer;-webkit-user-select:none;user-select:none}.btn{padding:11px 26px;border:none;border-radius:12px;cursor:pointer;font-size:.95rem;font-family:inherit;font-weight:700;transition:all .15s}.btn-primary{background:#c8864e;color:#fff;box-shadow:0 3px 10px #b4643240}.btn-primary:hover{background:#b5733d;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:#f0e0cc;color:#8a5a30}.btn-secondary:hover{background:#e4cdb0}.card .btn-primary{min-width:120px}.settings{width:100%;background:#f8f0e4;border-radius:14px;padding:14px 16px}.settings summary{cursor:pointer;font-size:.83rem;color:#a07048;font-weight:700;letter-spacing:.5px;list-style:none;display:flex;align-items:center;gap:6px}.settings summary:before{content:"⚙ "}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.setting-item label{display:block;font-size:.75rem;color:#a07048;margin-bottom:4px}.setting-item input{width:100%;padding:6px 10px;border:1.5px solid #ddc8a8;border-radius:8px;font-size:1rem;color:#7a4f2e;background:#fffaf4;font-family:inherit;text-align:center}.setting-item input:focus{outline:none;border-color:#c8864e}.stats{display:flex;flex-direction:column;align-items:center;gap:4px}.sessions-counter{font-size:.78rem;color:#b0825a;display:flex;align-items:center;gap:4px}.paw-icon{font-size:1rem}