:root{--font-heading:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--font-body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", monospace;--bg-color:#eaf2eb;--bg-gradient:none;--surface-color:#fff;--surface-border:#d2e3d6;--surface-hover:#e1ede3;--text-main:#1c2b20;--text-muted:#536959;--text-dim:#7a9180;--accent-color:#2b5e3b;--accent-hover:#20472c;--accent-light:#d8ebd9;--guitar-accent:#b45309;--tabata-accent:#dc2626;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--shadow-main:0 4px 16px #0000000a;--transition-fast:.15s ease-out}[data-theme=dark]{--bg-color:#17221b;--bg-gradient:none;--surface-color:#213026;--surface-border:#2e4436;--surface-hover:#293d30;--text-main:#e8f2ea;--text-muted:#a3bfa9;--text-dim:#718d77;--accent-color:#4ca36a;--accent-hover:#3d8a57;--accent-light:#24422e;--shadow-main:0 4px 16px #0003}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased;min-height:100vh;line-height:1.6}.site-header{z-index:100;background:var(--surface-color);border-bottom:1px solid var(--surface-border);padding:.85rem 1.5rem;position:sticky;top:0}.header-container{flex-direction:column;justify-content:center;align-items:center;gap:.75rem;max-width:950px;margin:0 auto;display:flex}html{overflow-y:scroll}.brand-logo{color:#1e442a;justify-content:center;align-items:center;line-height:1;text-decoration:none;display:inline-flex}.brand-name{font-family:var(--font-heading);letter-spacing:-.01em;color:#1e442a;text-align:center;margin:0;padding:0;font-size:1.8rem;font-weight:800;line-height:1.2;display:block}.app-switcher{background:var(--bg-color);border:1px solid var(--surface-border);box-sizing:border-box;border-radius:999px;justify-content:center;align-items:center;gap:.25rem;padding:.25rem;display:inline-flex}.nav-link{color:#52795d;cursor:pointer;box-sizing:border-box;appearance:none;white-space:nowrap;background:0 0;border:none;border-radius:999px;outline:none;justify-content:center;align-items:center;height:32px;margin:0;padding:0 1rem;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:.85rem;font-weight:500;line-height:1;text-decoration:none;transition:all .15s ease-in-out;display:inline-flex}.nav-link:hover{color:#1e442a;background:#fff6}.nav-link.active{color:#2b5e3b;background:#fff;font-weight:700;box-shadow:0 1px 4px #00000014}.main-content{max-width:900px;margin:2rem auto 4rem;padding:0 1rem}.comic-card{background:var(--surface-color);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-main);flex-direction:column;gap:1.25rem;padding:1.5rem;display:flex}.comic-header{border-bottom:1px solid var(--surface-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.85rem;display:flex}.comic-meta{flex-direction:column;gap:.2rem;display:flex}.comic-title-row{align-items:center;gap:.6rem;display:flex}.comic-id{font-family:var(--font-heading);color:var(--accent-color);font-size:1.5rem;font-weight:700}.comic-title{font-family:var(--font-heading);font-size:1.5rem;font-weight:700}.controls-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;display:flex}.btn{border-radius:var(--radius-sm);font-size:.88rem;font-weight:600;font-family:var(--font-body);border:1px solid var(--surface-border);background:var(--bg-color);color:var(--text-main);cursor:pointer;transition:all var(--transition-fast);justify-content:center;align-items:center;gap:.35rem;padding:.45rem 1rem;display:inline-flex}.btn:hover:not(:disabled){background:var(--accent-color);border-color:var(--accent-color);color:#fff}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-accent{background:var(--accent-color);border-color:var(--accent-color);color:#fff}.btn-accent:hover{background:var(--accent-hover)}.comic-display-area{flex-direction:column;align-items:center;width:100%;display:flex;position:relative}.comic-frame{border-radius:var(--radius-md);border:1px solid var(--surface-border);background:#fff;width:100%;max-width:850px;padding:.75rem;position:relative;overflow:hidden}.comic-image{border-radius:var(--radius-sm);width:100%;height:auto;display:block}.archive-container{flex-direction:column;gap:1.25rem;display:flex}.archive-filters{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.search-input{background:var(--surface-color);border:1px solid var(--surface-border);border-radius:var(--radius-sm);color:var(--text-main);font-family:var(--font-body);width:240px;padding:.5rem .85rem;font-size:.88rem}.search-input:focus{border-color:var(--accent-color);outline:none}.archive-main-heading{font-family:var(--font-heading);color:var(--text-main);margin-bottom:1.25rem;font-size:1.6rem;font-weight:800}.archive-loops-wrapper{flex-direction:column;gap:1.75rem;display:flex}.archive-loop-group{flex-direction:column;gap:.5rem;display:flex}.archive-loop-heading{font-family:var(--font-heading);color:var(--accent-color);border-bottom:2px solid var(--surface-border);margin-bottom:.25rem;padding-bottom:.25rem;font-size:1.15rem;font-weight:700}.archive-list{background:var(--surface-color);border:1px solid var(--surface-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-main);flex-direction:column;gap:.35rem;padding:.5rem;display:flex}.archive-item{border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);color:var(--text-main);border-bottom:1px solid #0000000a;align-items:center;gap:1.25rem;padding:.75rem 1rem;text-decoration:none;display:flex}.archive-item:last-child{border-bottom:none}.archive-item:hover{background:var(--surface-hover)}.archive-item-code{font-family:var(--font-heading);color:var(--accent-color);min-width:3rem;font-size:1.1rem;font-weight:700}.archive-item-title{font-family:var(--font-heading);font-size:1.05rem;font-weight:700}.app-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;background:#0006;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.app-modal{background:var(--surface-color);border:1px solid var(--surface-border);border-radius:var(--radius-lg);width:100%;max-width:480px;box-shadow:var(--shadow-main);flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.app-modal-header{justify-content:space-between;align-items:center;display:flex}.site-footer{text-align:center;color:var(--text-dim);border-top:1px solid var(--surface-border);background:var(--surface-color);margin-top:3rem;padding:2rem 1rem;font-size:.85rem}.footer-links{justify-content:center;align-items:center;gap:1rem;margin-top:.6rem;display:flex}.notify-btn{font-family:var(--font-body);color:var(--text-muted);background:var(--bg-color);border:1px solid var(--surface-border);cursor:pointer;transition:all var(--transition-fast);border-radius:99px;align-items:center;gap:.4rem;padding:.35rem .75rem;font-size:.82rem;font-weight:500;display:inline-flex}.notify-btn:hover{color:var(--text-main);border-color:var(--accent-color);background:var(--surface-hover)}.notify-btn.subscribed{color:var(--accent-color);border-color:var(--accent-color);background:var(--surface-hover);font-weight:600}.rss-link{transition:transform var(--transition-fast), opacity var(--transition-fast);justify-content:center;align-items:center;display:inline-flex}.rss-link:hover{opacity:.9;transform:scale(1.1)}.rss-icon{border-radius:5px;box-shadow:0 2px 6px #f2652240}.btn-text-desktop{display:inline}.btn-text-mobile{display:none}@media (width<=600px){.btn-text-desktop{display:none}.btn-text-mobile{display:inline}.site-header{padding:.6rem .5rem}.header-container{gap:.5rem}.brand-name{font-size:1.4rem}.app-switcher{gap:.15rem;max-width:100%;padding:.15rem}.nav-link{height:28px;padding:0 .55rem;font-size:.76rem}.main-content{padding:.75rem .5rem}.comic-card{padding:1rem .75rem}.comic-id,.comic-title{font-size:1.15rem}.controls-bar{gap:.2rem;margin:.75rem 0}.btn{padding:.35rem .45rem;font-size:.78rem}}.about-container{box-sizing:border-box;flex-direction:column;gap:1.25rem;width:100%;max-width:650px;margin:0 auto;display:flex}.about-main-heading{font-family:var(--font-heading);color:var(--text-main);text-align:center;margin:0;font-size:1.6rem;font-weight:800}.about-card{background:var(--surface-color);border:1px solid var(--surface-border);border-radius:var(--radius-lg);color:var(--text-main);box-sizing:border-box;flex-direction:column;gap:1.5rem;padding:2.25rem 2rem;font-size:1.05rem;line-height:1.75;display:flex;box-shadow:0 4px 20px #0000000a}.about-paragraph{margin:0}.about-contact{color:var(--text-muted);margin:0;font-weight:600}.about-contact a{color:var(--accent-color);font-weight:700;text-decoration:none;transition:opacity .15s}.about-contact a:hover{text-decoration:underline}