:root{--color-canvas: #faf7f2;--color-paper: #faf7f2;--color-surface: #ffffff;--color-surface-muted: #f5f0e8;--color-ink: #1a1a1a;--color-ink-secondary: #3d3d3d;--color-ink-muted: #6b6b6b;--color-ink-subtle: #9a9a9a;--color-accent: #9a4f42;--color-accent-hover: #8a4539;--color-on-accent: #ffffff;--color-border: #e5ddd2;--color-border-subtle: #ece4da;--radius-sm: 2px;--radius-md: 4px;--glass: rgba(250, 247, 242, .62);--glass-strong: rgba(250, 247, 242, .82);--glass-border: rgba(26, 26, 26, .08);--tint-control: rgba(255, 255, 255, .5);--tint-card: rgba(255, 255, 255, .6);--shimmer-lo: rgba(26, 26, 26, .07);--shimmer-hi: rgba(26, 26, 26, .13);--overlay: rgba(26, 26, 26, .35);--font-serif: "Newsreader", Georgia, "Times New Roman", serif;--font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif}:root[data-theme=dark]{--color-canvas: #171411;--color-paper: #221e19;--color-surface: #211d19;--color-surface-muted: #292420;--color-ink: #ece7df;--color-ink-secondary: #cfc8bd;--color-ink-muted: #a39a8d;--color-ink-subtle: #7a7268;--color-accent: #c97260;--color-accent-hover: #d6836f;--color-on-accent: #211511;--color-border: #3a352e;--color-border-subtle: #322d27;--glass: rgba(23, 20, 17, .6);--glass-strong: rgba(23, 20, 17, .85);--glass-border: rgba(236, 231, 223, .1);--tint-control: rgba(255, 255, 255, .07);--tint-card: rgba(255, 255, 255, .06);--shimmer-lo: rgba(236, 231, 223, .08);--shimmer-hi: rgba(236, 231, 223, .15);--overlay: rgba(0, 0, 0, .55)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--color-canvas);color:var(--color-ink);font-family:var(--font-sans);overflow:hidden;transition:background-color .25s ease,color .25s ease}.app{position:relative;height:100vh;width:100%;overflow:hidden}.painting{position:fixed;top:0;right:0;bottom:0;left:0;margin:0;display:flex;align-items:center;justify-content:center;z-index:1}.painting__canvas{display:block}.painting__placeholder{padding:56px 32px;color:var(--color-ink-muted);font-size:15px;text-align:center}.painting__placeholder--error{color:var(--color-accent)}.painting__loading{display:flex;flex-direction:column;align-items:center;gap:14px;font-family:var(--font-serif);font-style:italic;font-size:16px}.painting__loading-dots{display:flex;gap:8px}.painting__loading-dots i{width:10px;height:10px;border-radius:50%;background:var(--color-accent);opacity:.25;animation:paint-pulse 1.2s ease-in-out infinite}.painting__loading-dots i:nth-child(2){animation-delay:.15s}.painting__loading-dots i:nth-child(3){animation-delay:.3s}@keyframes paint-pulse{0%,to{opacity:.25;transform:scale(.85)}40%{opacity:1;transform:scale(1.15)}}@media (prefers-reduced-motion: reduce){.painting__loading-dots i{animation:none;opacity:.7}}.hud{position:fixed;left:50%;bottom:22px;transform:translate(-50%);z-index:3;width:min(560px,calc(100vw - 32px));display:flex;justify-content:center;pointer-events:none}.hud__panel{position:relative;pointer-events:auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 22px 20px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:0 16px 40px -24px #1a1a1a80}.hud__panel--min{width:auto;gap:0;padding:10px 44px 12px}.hud__panel--min .time-display{font-size:30px}.hud__toggle{position:absolute;top:6px;right:6px;border:none;background:none;color:var(--color-ink-subtle);font-size:14px;line-height:1;padding:6px;border-radius:var(--radius-sm);cursor:pointer;transition:color .15s ease}.hud__toggle:hover{color:var(--color-accent)}.hud__panel--min .hud__toggle{top:50%;transform:translateY(-50%);right:10px}.hud__caption{text-align:center;display:flex;flex-direction:column;gap:2px}.hud__title{font-family:var(--font-serif);font-size:16px;font-style:italic;font-weight:500;color:var(--color-ink)}.hud__artist{font-size:12px;color:var(--color-ink-muted);letter-spacing:.06em;text-transform:uppercase}.hud__skeleton{display:block;border-radius:3px;background:linear-gradient(90deg,var(--shimmer-lo) 25%,var(--shimmer-hi) 50%,var(--shimmer-lo) 75%);background-size:200% 100%;animation:hud-shimmer 1.6s ease-in-out infinite}.hud__skeleton--title{width:170px;height:12px;margin:4px auto 3px}.hud__skeleton--artist{width:104px;height:8px;margin:3px auto}@keyframes hud-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion: reduce){.hud__skeleton{animation:none}}.time-display{font-family:var(--font-serif);font-size:44px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1;color:var(--color-ink)}.app__completed{color:var(--color-accent);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}.controls{display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}.controls__durations{display:flex;gap:6px}.chip{border:1px solid var(--glass-border);background:var(--tint-control);color:var(--color-ink-secondary);padding:6px 14px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.chip:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent)}.chip--active{background:var(--color-accent);color:var(--color-on-accent);border-color:var(--color-accent)}.chip:disabled{opacity:.5;cursor:not-allowed}.controls__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.btn{border:1px solid var(--glass-border);background:var(--tint-control);color:var(--color-ink);padding:10px 20px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}.btn:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:var(--color-accent);color:var(--color-on-accent);border-color:var(--color-accent)}.btn--primary:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:var(--color-on-accent)}.search-dock__panel{width:min(400px,calc(100vw - 40px));max-height:min(70vh,640px);overflow-y:auto;padding:16px 18px;background:var(--glass-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:0 16px 40px -24px #1a1a1a80}.search{width:100%}.search__form{display:flex;gap:8px}.search__input{flex:1;min-width:0;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);padding:9px 12px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:14px}.search__input:focus{outline:none;border-color:var(--color-accent)}.search__submit{padding:9px 16px}.search__hint{margin:8px 0 0;color:var(--color-ink-subtle);font-size:11px}.search__message{margin:14px 0 0;color:var(--color-ink-muted);font-size:14px}.search__message--error{color:var(--color-accent)}.search__grid{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.search__result{display:flex;flex-direction:column;gap:4px;width:100%;padding:0 0 8px;border:1px solid var(--color-border-subtle);background:var(--tint-card);border-radius:var(--radius-sm);font-family:var(--font-sans);text-align:left;cursor:pointer;overflow:hidden;transition:border-color .15s ease}.search__result:hover{border-color:var(--color-accent)}.search__thumb{display:block;width:100%;aspect-ratio:1 / 1;object-fit:cover;background:var(--color-surface-muted)}.search__result-title{font-family:var(--font-serif);font-style:italic;font-size:12px;color:var(--color-ink);padding:2px 8px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.search__result-artist{font-size:10px;color:var(--color-ink-muted);letter-spacing:.05em;text-transform:uppercase;padding:0 8px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.search__more{margin-top:12px;width:100%}.coffee-link{display:flex;align-items:center;gap:6px;border:1px solid var(--glass-border);background:var(--glass-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--color-ink);padding:9px 14px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.03em;line-height:1;text-decoration:none;cursor:pointer;transition:color .15s ease,border-color .15s ease}.coffee-link:hover{border-color:var(--color-accent);color:var(--color-accent)}.settings-toggle{border:1px solid var(--glass-border);background:var(--glass-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--color-ink);padding:9px 18px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:color .15s ease,border-color .15s ease}.settings-toggle:hover,.settings-toggle--open{border-color:var(--color-accent);color:var(--color-accent)}.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:var(--overlay);display:flex;align-items:center;justify-content:center}.settings{width:min(360px,calc(100vw - 40px));padding:20px 22px 24px;background:var(--glass-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:0 16px 40px -24px #1a1a1a80}.settings__header{display:flex;align-items:center;justify-content:space-between}.settings__title{margin:0;font-family:var(--font-serif);font-size:19px;font-weight:500;color:var(--color-ink)}.settings__close{border:none;background:none;color:var(--color-ink-subtle);font-size:20px;line-height:1;padding:4px 6px;border-radius:var(--radius-sm);cursor:pointer;transition:color .15s ease}.settings__close:hover{color:var(--color-accent)}.settings__section{margin-top:18px}.settings__label{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-ink-muted)}.settings__options{display:flex;flex-wrap:wrap;gap:6px}.settings__support{margin-top:20px;padding-top:14px;border-top:1px solid var(--glass-border)}.settings__support-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.settings__support-link{font-size:13px;color:var(--color-accent);text-decoration:none}.settings__support-link:hover{text-decoration:underline}.todos-dock{position:fixed;top:20px;right:20px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.todos-dock__buttons{display:flex;align-items:stretch;gap:10px}.todos-dock__toggle{border:1px solid var(--glass-border);background:var(--glass-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--color-ink);padding:9px 18px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:color .15s ease,border-color .15s ease}.todos-dock__toggle:hover,.todos-dock__toggle--active{border-color:var(--color-accent);color:var(--color-accent)}.todos-dock__panel{width:min(340px,calc(100vw - 40px));max-height:min(60vh,520px);overflow-y:auto;padding:16px 18px;background:var(--glass-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:0 16px 40px -24px #1a1a1a80}.todos{width:100%}.todos__form{display:flex;gap:8px}.todos__input{flex:1;min-width:0;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);padding:9px 12px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:14px}.todos__input:focus{outline:none;border-color:var(--color-accent)}.todos__add{padding:9px 16px}.todos__empty{margin:14px 0 0;color:var(--color-ink-subtle);font-size:14px}.todos__list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.todos__item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;background:var(--tint-card);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm)}.todos__label{display:flex;align-items:center;gap:10px;cursor:pointer;flex:1}.todos__label input{accent-color:var(--color-accent);width:16px;height:16px}.todos__text{font-size:14px;color:var(--color-ink)}.todos__item--done .todos__text{text-decoration:line-through;color:var(--color-ink-subtle)}.todos__remove{border:none;background:none;color:var(--color-ink-subtle);font-size:20px;line-height:1;cursor:pointer;padding:0 4px;transition:color .15s ease}.todos__remove:hover{color:var(--color-accent)}