:root{--color-bg-canvas:#faf6ee;--color-bg-surface:#fff;--color-bg-surface-alt:#f3ecdc;--color-wood-light:#d9b888;--color-wood-mid:#b8875a;--color-wood-dark:#7a5738;--color-sage:#9cae93;--color-sage-deep:#6e8265;--color-ink:#3b342a;--color-ink-soft:#6b6255;--color-accent:#e3a857;--color-accent-strong:#c9832e;--color-accent-hover:#d39040;--color-success:#7fa98c;--color-border:#e7dcc6;--color-focus-ring:#3b342a;--color-cat-cream:#f1e4cc;--color-cat-point:#4e4038;--color-cat-eyes:#4e86c6;--font-family:"Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs:.8125rem;--font-size-sm:.9375rem;--font-size-md:1.0625rem;--font-size-lg:1.375rem;--font-size-xl:1.875rem;--font-size-2xl:2.5rem;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--radius-sm:10px;--radius-md:18px;--radius-lg:28px;--radius-pill:999px;--shadow-soft:0 4px 16px #3b342a14;--shadow-raised:0 8px 28px #3b342a24;--ease-standard:cubic-bezier(.4, 0, .2, 1);--touch-target:48px;--pixel-cream:#f6ead3;--pixel-cream-soft:#fdf7ea;--pixel-frame:#c08a52;--pixel-frame-dark:#6b4526;--pixel-ink:#3f291a;--pixel-ink-soft:#7c5c3f;--pixel-capsule:#3b2a20;--pixel-capsule-deep:#241811;--pixel-orange:#f5a634;--pixel-orange-deep:#d97f18;--pixel-notch:polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));--pixel-notch-sm:polygon(0 3px, 3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px))}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-family);font-size:var(--font-size-md);color:var(--color-ink);background:var(--color-bg-canvas);-webkit-font-smoothing:antialiased;overscroll-behavior:none;margin:0;line-height:1.5}button,input{font-family:inherit}button{cursor:pointer;color:inherit;min-height:var(--touch-target);min-width:var(--touch-target);background:0 0;border:none}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}h1,h2,h3,p{margin:0}h1,h2,h3,.active-focus-time,.minute-stepper-value,.levelup-badge{line-height:1.15}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:0 var(--space-5);height:var(--touch-target);border-radius:var(--radius-pill);font-weight:700;font-size:var(--font-size-md);transition:transform .18s var(--ease-standard), background .18s var(--ease-standard);display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-accent);color:var(--color-ink);box-shadow:var(--shadow-soft)}.btn-primary:hover{background:var(--color-accent-hover)}.btn-secondary{background:var(--color-bg-surface);color:var(--color-ink);border:1px solid var(--color-border)}.btn-ghost{color:var(--color-ink-soft);background:0 0}.btn-success{background:var(--color-success);color:var(--color-ink)}.card{background:var(--color-bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:var(--space-5)}.safe-area{padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}.app-splash{min-height:100dvh;color:var(--color-ink-soft);justify-content:center;align-items:center;font-weight:600;display:flex}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.panel{background:var(--color-bg-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-raised);padding:var(--space-5);gap:var(--space-4);flex-direction:column;display:flex}.panel-title{font-size:var(--font-size-lg);font-weight:800}.panel-actions{gap:var(--space-3);margin-top:var(--space-2);display:flex}.panel-actions .btn{flex:1}.status-panel-total{color:var(--color-ink-soft)}.icon-btn{color:var(--color-ink-soft);padding:0}.pixel-frame{background:var(--pixel-frame-dark);clip-path:var(--pixel-notch);padding:4px;box-shadow:0 6px 18px #3b2a1a47}.pixel-frame-inner{background:var(--pixel-cream);clip-path:var(--pixel-notch);border-top:2px solid var(--pixel-cream-soft)}.xp-capsule{background:var(--pixel-frame-dark);clip-path:var(--pixel-notch);padding:3px}.xp-capsule-inner{align-items:center;gap:var(--space-3);padding:6px var(--space-4);background:var(--pixel-capsule);clip-path:var(--pixel-notch);color:var(--pixel-cream-soft);min-height:38px;display:flex}.xp-capsule-paw{color:var(--pixel-cream-soft);flex:none}.xp-capsule-identity{white-space:nowrap;font-weight:800;font-size:var(--font-size-sm);letter-spacing:.01em;align-items:baseline;gap:6px;display:flex}.xp-capsule-dot{color:#f6ead38c}.xp-capsule-level{font-weight:700}.xp-capsule-track{border:2px solid var(--pixel-cream-soft);min-width:90px;height:14px;clip-path:var(--pixel-notch-sm);background:#4c372a;flex:120px;overflow:hidden}.xp-capsule-fill{background:linear-gradient(180deg, #ffc45f 0%, var(--pixel-orange) 55%, var(--pixel-orange-deep) 100%);height:100%;transition:width .4s var(--ease-standard)}.main-screen[data-reduced-motion=true] .xp-capsule-fill{transition:none}.xp-capsule-value{font-weight:800;font-size:var(--font-size-sm);font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}.focus-bar-inner{justify-content:center;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);color:var(--pixel-ink);display:flex}.focus-bar-divider{background:#6b452638;align-self:stretch;width:2px;margin:6px 0}.time-field{align-items:center;gap:var(--space-4);display:flex}.time-field-icon{flex:none;display:flex}.focus-bar-inner svg,.xp-capsule-inner svg{flex:none}.time-field-body{flex-direction:column;gap:3px;display:flex}.time-field-label{font-size:var(--font-size-sm);color:var(--pixel-ink-soft);font-weight:700;line-height:1}.time-field-display{font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--pixel-ink);font-size:34px;font-weight:800;line-height:1.05}.time-field-extra{align-items:center;min-height:44px;display:flex}.time-field-topic{font-size:var(--font-size-xs);color:var(--pixel-ink-soft);text-overflow:ellipsis;white-space:nowrap;max-width:180px;overflow:hidden}.time-field-controls{align-items:center;gap:6px;display:flex}.pixel-step-btn{background:0 0;border:none;flex:none;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:flex}.pixel-step-btn:disabled{opacity:.4}.pixel-step-btn-face{width:30px;height:30px;font-size:var(--font-size-md);color:var(--pixel-ink-soft);background:var(--pixel-cream-soft);clip-path:var(--pixel-notch-sm);border:1.5px solid #6b452659;justify-content:center;align-items:center;font-weight:700;line-height:1;display:flex}.pixel-step-btn:active:not(:disabled) .pixel-step-btn-face{background:var(--pixel-cream);border-color:var(--pixel-frame)}.pixel-minute-input{text-align:center;width:52px;height:44px;font-size:var(--font-size-md);font-variant-numeric:tabular-nums;color:var(--pixel-ink);background:var(--pixel-orange);border:2px solid var(--pixel-frame);clip-path:var(--pixel-notch-sm);font-weight:800}.pixel-cta,.pixel-ghost-btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:54px;padding:0 var(--space-4);font-size:var(--font-size-md);white-space:nowrap;flex:none;font-weight:800;line-height:1;display:flex}.pixel-cta{color:var(--pixel-ink);background:linear-gradient(180deg, #ffc45f 0%, var(--pixel-orange) 60%, var(--pixel-orange-deep) 100%);border:2px solid var(--pixel-frame-dark);clip-path:var(--pixel-notch)}.pixel-cta--calm{background:linear-gradient(180deg, var(--pixel-cream-soft) 0%, var(--pixel-cream) 100%)}.pixel-ghost-btn{color:var(--pixel-ink-soft);clip-path:var(--pixel-notch-sm);background:0 0;border:2px solid #6b45264d}.pixel-ghost-btn:disabled{opacity:.4}.pixel-btn--fertig{color:var(--pixel-ink);background:linear-gradient(#f6d9a0 0%,#eab766 55%,#d1993f 100%);border:2px solid #a9762f}.pixel-btn--fertig:hover:not(:disabled){background:linear-gradient(#f2cf8c 0%,#e2a950 55%,#c1872f 100%)}.pixel-btn--fertig:active:not(:disabled){background:linear-gradient(#e2a950 0%,#d1993f 55%,#b17a29 100%)}.pixel-btn--fertig:disabled{opacity:1;color:#7c5c3f8c;background:var(--pixel-cream-soft);border-color:#6b452640}.focus-bar-topic{align-items:center;gap:var(--space-4);cursor:text;display:flex}.focus-bar-topic-body{flex-direction:column;gap:3px;display:flex}.focus-bar-topic-label{font-size:var(--font-size-sm);color:var(--pixel-ink-soft);font-weight:700;line-height:1}.focus-bar-topic-input{width:144px;height:44px;padding:0 var(--space-3);font-size:var(--font-size-md);color:var(--pixel-ink);background:var(--pixel-cream-soft);border:2px solid var(--pixel-frame);clip-path:var(--pixel-notch-sm);font-weight:700}.focus-bar--active[data-state=break] .time-field[aria-label=Pause] .time-field-display{color:var(--pixel-orange-deep)}.focus-bar--active[data-state=breakDone] .time-field[aria-label=Pause]{padding:4px var(--space-3) 4px var(--space-2);border:2px solid var(--pixel-orange-deep);clip-path:var(--pixel-notch-sm);background:#f5a63438}.focus-bar--active[data-state=breakDone] .time-field[aria-label=Pause] .time-field-label,.focus-bar--active[data-state=breakDone] .time-field[aria-label=Pause] .time-field-display{color:var(--pixel-orange-deep);font-weight:800}.onboarding{min-height:100dvh;padding:var(--space-5);background:radial-gradient(80% 60% at 20% 10%, #fffaebe6, transparent), var(--color-bg-canvas);justify-content:center;align-items:center;display:flex}.onboarding-card{width:min(480px,100%)}.onboarding-title{font-size:var(--font-size-xl);margin-bottom:var(--space-3);font-weight:800}.onboarding-text{color:var(--color-ink-soft);margin-bottom:var(--space-5);line-height:1.5}.onboarding-label{margin-bottom:var(--space-2);font-weight:600;display:block}.onboarding-input{width:100%;height:var(--touch-target);padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg-canvas);font-size:var(--font-size-md);margin-bottom:var(--space-5)}.onboarding-submit{width:100%}.recovery-code{font-size:var(--font-size-lg);letter-spacing:.06em;text-align:center;padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-bg-surface-alt);color:var(--color-ink);margin-bottom:var(--space-5);-webkit-user-select:all;user-select:all;font-weight:800}.onboarding-checkbox{align-items:center;gap:var(--space-3);margin-bottom:var(--space-5);font-weight:600;display:flex}.onboarding-checkbox input{width:24px;height:24px}.onboarding-secondary{width:100%;margin-top:var(--space-2)}.recovery-code-input{font-family:var(--font-mono,ui-monospace, monospace);letter-spacing:.08em;text-transform:uppercase}.onboarding-error{margin:var(--space-2) 0 0;font-size:var(--font-size-sm);color:var(--color-ink);font-weight:600}.cat-actor{transform-origin:0 0;pointer-events:none;will-change:transform;width:512px;height:512px;position:absolute;top:0;left:0}.cat-breath,.cat-facing{width:100%;height:100%}.cat-facing{transform-origin:bottom}.cat-frame{width:512px;height:512px;image-rendering:pixelated;display:block}.room-scene{background:var(--color-bg-canvas);width:100%;height:100%;position:relative;overflow:hidden}.pixel-stage{position:absolute;inset:0;overflow:hidden}.pixel-canvas{transform-origin:0 0;position:absolute;top:0;left:0}.pixel-layer{image-rendering:pixelated;pointer-events:none;-webkit-user-select:none;user-select:none;display:block;position:absolute}.pixel-backplate{width:100%;height:100%;top:0;left:0}.pixel-unlock,.pixel-table{height:auto}.pixel-unlock{animation:unlock-fade-in .7s var(--ease-standard)}.room-scene[data-reduced-motion=true] .pixel-unlock{animation:none}@keyframes unlock-fade-in{0%{opacity:0;transform:translateY(4%)scale(.94)}to{opacity:1;transform:translateY(0)scale(1)}}.main-screen{width:100%;height:100dvh;position:relative;overflow:hidden}.main-screen-room{position:absolute;inset:0}.main-screen-panel-area{padding-top:calc(var(--space-4) + env(safe-area-inset-top));padding-right:calc(var(--space-4) + env(safe-area-inset-right));padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom));padding-left:calc(var(--space-4) + env(safe-area-inset-left));grid-template-rows:auto 1fr auto;grid-template-columns:1fr;display:grid;position:absolute;inset:0;overflow-y:auto}.status-strip{place-self:start;gap:var(--space-2);flex-direction:column;grid-row:1;width:min(430px,62vw);display:flex}.status-strip .status-panel-total{padding:4px var(--space-3);clip-path:var(--pixel-notch-sm);color:var(--pixel-cream-soft);font-size:var(--font-size-xs);background:#3b2a20b8;align-self:start}.settings-btn{width:var(--touch-target);height:var(--touch-target);min-width:var(--touch-target);min-height:var(--touch-target);background:var(--color-ink);color:#fff;box-shadow:var(--shadow-raised);border-radius:50%;grid-row:1;justify-content:center;place-self:start end;align-items:center;padding:0;display:flex}.settings-gear-icon{flex:none;width:auto;height:22px;display:block}.focus-bar{width:min(1000px,100%);max-height:100%;margin-bottom:var(--space-4);grid-row:3;place-self:end center}@media (orientation:portrait),(width<=900px){.status-strip{width:min(430px,78vw)}.focus-bar-inner{row-gap:var(--space-3);flex-wrap:wrap}.focus-bar-inner>.focus-bar-divider:nth-of-type(2),.focus-bar-inner>.focus-bar-divider:last-of-type{display:none}.focus-bar .pixel-cta{flex:200px}.focus-bar-topic-input{width:100%;min-width:120px}.focus-bar-topic{flex:180px}}@media (height<=700px){.focus-bar-inner{gap:var(--space-3);padding:4px var(--space-3)}.time-field-display{font-size:24px}}.modal-overlay{padding:var(--space-5);z-index:50;background:#3b342a59;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-card{text-align:center;width:min(420px,100%)}.modal-card--levelup{background:linear-gradient(180deg, var(--color-bg-surface), var(--color-bg-surface-alt))}.levelup-badge{padding:var(--space-1) var(--space-4);border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-ink);margin-bottom:var(--space-3);animation:levelup-pop .9s var(--ease-standard);font-weight:800;display:inline-block}@keyframes levelup-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}to{transform:scale(1)}}.main-screen[data-reduced-motion=true] .levelup-badge{animation:none}.modal-title{font-size:var(--font-size-xl);margin:var(--space-2) 0 var(--space-4);font-weight:800}.modal-text{color:var(--color-ink-soft);margin-bottom:var(--space-5)}.modal-actions{gap:var(--space-3);display:flex}.modal-btn{flex:1}.modal-btn-wide{width:100%}.settings-screen{min-height:100dvh;padding:var(--space-5);gap:var(--space-4);flex-direction:column;max-width:640px;margin:0 auto;display:flex}.settings-header{align-items:center;gap:var(--space-4);margin-bottom:var(--space-2);display:flex}.settings-title{font-size:var(--font-size-lg);font-weight:800}.settings-section{gap:var(--space-3);flex-direction:column;display:flex}.settings-row{gap:var(--space-3);display:flex}.settings-row .onboarding-input{margin-bottom:0}.settings-toggle-row{justify-content:space-between;align-items:center;font-weight:600;display:flex}.settings-toggle-row input{width:24px;height:24px}.settings-field{justify-content:space-between;align-items:center;gap:var(--space-3);font-weight:600;display:flex}.settings-select{height:var(--touch-target);border-radius:var(--radius-md);border:1px solid var(--color-border);padding:0 var(--space-3);background:var(--color-bg-canvas);font-size:var(--font-size-sm)}.settings-hint{margin-bottom:var(--space-3)}.settings-status{margin:0 0 var(--space-2);font-size:var(--font-size-sm);color:var(--color-ink-soft)}.settings-status-warn{color:var(--color-ink);font-weight:600}