:root{--color-primary:#27d9ff;--color-primary-hover:#14b8de;--color-primary-light:#7be9ff;--color-primary-glow:#27d9ff6b;--color-primary-subtle:#27d9ff33;--color-primary-alpha-08:#27d9ff14;--color-primary-alpha-12:#27d9ff1f;--color-primary-alpha-14:#27d9ff24;--color-primary-alpha-20:#27d9ff33;--color-primary-alpha-25:#27d9ff40;--color-primary-alpha-50:#27d9ff80;--color-primary-alpha-55:#27d9ff8c;--color-primary-alpha-65:#27d9ffa6;--color-primary-alpha-90:#27d9ffe6;--color-accent:#ff9500;--color-accent-hover:#e68600;--color-accent-light:#ffb347;--color-success:#00cc6a;--color-success-bright:#0f8;--color-success-glow:#00ff8880;--color-success-glow-60:#0f89;--color-success-bright-alpha-95:#00ff88f2;--color-error:#ff6b6b;--color-error-dark:#c55;--color-warning:#ffb74d;--color-info:var(--color-primary);--surface-0:#060b12;--surface-1:#0b1420;--surface-2:#111d2d;--surface-3:#1a2a3d;--surface-4:#243851;--surface-5:#315077;--text-primary:#fff;--text-secondary:#d8e4f2;--text-secondary-soft:#c8d9ec;--text-tertiary:#a8bdd3;--text-quaternary:gray;--text-disabled:#4d4d4d;--text-on-primary:#000;--font-ui:"Segoe UI", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--text-xs:.75rem;--text-sm:.85rem;--text-base:.95rem;--text-md:1rem;--text-lg:1.1rem;--text-xl:1.2rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:4rem;--text-5xl:5rem;--text-0_8:.8rem;--text-0_9:.9rem;--text-1_05:1.05rem;--text-1_3:1.3rem;--text-14px:14px;--text-15px:15px;--text-18px:18px;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.75;--tracking-tight:-.02em;--tracking-normal:0;--tracking-wide:.02em;--space-0:0;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-none:0;--radius-xs:3px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:10px;--radius-2xl:12px;--radius-full:999px;--shadow-xs:0 1px 2px #0000004d;--shadow-sm:0 2px 4px #0000004d;--shadow-md:0 4px 8px #0006;--shadow-lg:0 8px 16px #00000080;--shadow-xl:0 16px 32px #0009;--shadow-2xl:0 20px 40px #000000b3;--shadow-glow-primary:0 0 20px var(--color-primary-glow);--shadow-glow-success:0 0 10px var(--color-success-glow);--shadow-glow-accent:0 0 10px var(--color-primary-alpha-50);--shadow-glow-primary-subtle:0 0 8px var(--color-primary-subtle);--shadow-card-hover:0 12px 24px #050d188c;--shadow-card-selected:0 0 20px var(--color-primary-alpha-50);--shadow-btn:0 2px 6px var(--color-primary-subtle);--shadow-btn-active:0 1px 3px var(--color-primary-alpha-14);--shadow-glow-accent-12:0 0 12px var(--color-primary-alpha-50);--shadow-glow-primary-6:0 0 6px var(--color-primary-alpha-20);--shadow-ring-primary-soft:0 0 0 1px var(--color-primary-alpha-12);--shadow-ring-primary:0 0 0 1px var(--color-primary);--shadow-hover-lift:0 10px 18px #0003;--shadow-focus:var(--input-focus-ring);--shadow-focus-wide:0 0 0 4px var(--color-primary-alpha-25);--shadow-focus-ambient:0 0 12px var(--color-primary-alpha-25);--shadow-focus-ambient-sm:0 0 8px var(--color-primary-alpha-25);--shadow-focus-strong:0 0 0 3px var(--color-primary-alpha-14);--shadow-modal:0 14px 60px var(--overlay-black-55);--shadow-completion:0 2px 8px var(--color-success-glow-60);--border-width-thin:1px;--border-width-medium:2px;--border-width-thick:3px;--border-color-subtle:#2a3d57;--border-color-default:#355172;--border-color-strong:#47658a;--border-color-dim:#5b7697;--border-color-light:#7f9ec2;--border-color-primary:var(--color-primary);--border-color-error:var(--color-error);--duration-instant:.1s;--duration-fast:.15s;--duration-base:.2s;--duration-slow:.3s;--duration-medium:.4s;--duration-slower:.5s;--duration-spinner-fast:.6s;--duration-spinner:.8s;--duration-slowest:1s;--duration-dots:1.5s;--animation-shimmer:progress-shimmer 2s linear infinite;--ease-linear:linear;--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--ease-standard:cubic-bezier(.4, 0, .2, 1);--ease-decelerate:cubic-bezier(0, 0, .2, 1);--ease-accelerate:cubic-bezier(.4, 0, 1, 1);--ease-bounce:cubic-bezier(.68, -.55, .265, 1.55);--ease-default:var(--ease-standard);--ease-cover-zoom:cubic-bezier(.25, .46, .45, .94);--z-base:0;--z-dropdown:1;--z-sticky:10;--z-fixed:100;--z-overlay:1000;--z-deploy:1500;--z-auth:2000;--z-loading:9999;--z-error:10000;--container-xs:320px;--container-sm:420px;--container-md:720px;--container-lg:1024px;--container-xl:1280px;--breakpoint-sm:600px;--breakpoint-md:900px;--breakpoint-lg:1200px;--touch-target-min:44px;--button-padding-x:var(--space-6);--button-padding-y:var(--space-3);--button-radius:var(--radius-sm);--button-font-size:var(--text-md);--button-font-weight:var(--font-weight-normal);--button-min-height:var(--touch-target-min);--card-padding:var(--space-4);--card-radius:var(--radius-lg);--card-border:var(--border-width-thin) solid var(--border-color-default);--card-shadow:var(--shadow-md);--input-padding-x:var(--space-3);--input-padding-y:.65rem;--input-radius:var(--radius-lg);--input-border:var(--border-width-thin) solid var(--border-color-default);--input-focus-ring:0 0 0 2px #00d4ff40;--comic-card-aspect-ratio:2 / 3;--comic-card-border-width:var(--border-width-thick);--comic-card-border-selected:var(--border-width-thick) solid var(--color-primary);--grid-gap:var(--space-8);--grid-gap-mobile:var(--space-4);--grid-column-min:250px;--header-padding-x:var(--space-8);--header-padding-y:var(--space-4);--header-border:var(--border-width-medium) solid var(--border-color-default);--header-max-height:120px;--backdrop-light:#000000b3;--backdrop-medium:#000000d9;--backdrop-heavy:#000000e6;--overlay-black-45:#00000073;--overlay-black-50:#00000080;--overlay-black-55:#0000008c;--overlay-black-75:#000000bf;--overlay-white-18:#ffffff2e;--overlay-white-20:#fff3;--overlay-white-30:#ffffff4d;--overlay-white-75:#ffffffbf;--overlay-white-95:#fffffff2;--warning-border-alpha-35:#ffb74d59;--backdrop-blur:blur(4px);--backdrop-blur-strong:blur(6px);--scrollbar-width:12px;--scrollbar-track:var(--surface-1);--scrollbar-thumb:var(--surface-5);--scrollbar-thumb-hover:var(--color-primary);--gradient-primary:linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));--gradient-success:linear-gradient(90deg, var(--color-success-bright), var(--color-success));--gradient-upload:linear-gradient(90deg, var(--color-primary), var(--color-success-bright));--focus-ring:0 0 0 2px var(--color-primary-subtle);--focus-ring-error:0 0 0 2px #ff6b6b40;--scanline-opacity:.03;--scanline-color:rgba(0, 212, 255, var(--scanline-opacity))}@media (prefers-reduced-motion:reduce){:root{--duration-instant:0s;--duration-fast:0s;--duration-base:0s;--duration-slow:0s;--duration-slower:0s;--duration-slowest:0s;--ease-standard:linear;--ease-decelerate:linear;--ease-accelerate:linear;--ease-bounce:linear}}@media (prefers-contrast:high){:root{--text-secondary:#ecf3fb;--text-tertiary:#d7e3f0;--border-color-default:#6887af;--shadow-md:0 4px 8px #000c}}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.bg-surface-1{background:var(--surface-1)}.bg-surface-2{background:var(--surface-2)}.bg-surface-3{background:var(--surface-3)}.border-default{border:var(--border-width-thin) solid var(--border-color-default)}.border-primary{border-color:var(--color-primary)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.radius-sm{border-radius:var(--radius-sm)}.radius-md{border-radius:var(--radius-md)}.radius-lg{border-radius:var(--radius-lg)}.radius-full{border-radius:var(--radius-full)}.transition-fast{transition:all var(--duration-fast) var(--ease-standard)}.transition-base{transition:all var(--duration-base) var(--ease-standard)}.transition-slow{transition:all var(--duration-slow) var(--ease-standard)}*{box-sizing:border-box;margin:0;padding:0}.scanlines{background:linear-gradient(to bottom, transparent 50%, var(--scanline-color) 50%);z-index:15000;pointer-events:none;background-size:100% 2px;width:100%;height:100%;position:fixed;top:0;left:0}:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;box-shadow:var(--shadow-focus-wide)}body{font-family:var(--font-ui);background:var(--surface-1);color:var(--text-primary);overscroll-behavior:none;overflow:hidden}.booting #app,.booting #library-view{visibility:hidden;pointer-events:none}.auth-overlay{background:var(--backdrop-medium);z-index:2000;padding:var(--space-10) var(--space-4);-webkit-overflow-scrolling:touch;flex-direction:column;justify-content:flex-start;align-items:center;display:flex;position:fixed;inset:0;overflow-y:auto}.auth-overlay.hidden{display:none}.auth-card{background:var(--surface-3);border:1px solid var(--border-color-default);border-radius:var(--radius-2xl);padding:var(--space-8) var(--space-6);max-width:var(--container-sm);text-align:center;width:100%;box-shadow:var(--shadow-2xl);margin-bottom:var(--space-10);flex-shrink:0}@media (width<=480px){.auth-card{padding:var(--space-8) var(--space-4);border-radius:var(--radius-xl)}.auth-overlay{padding-top:var(--space-16)}.google-signin-btn{width:100%;max-width:280px}}.auth-card h2{color:var(--color-primary);margin-bottom:var(--space-3)}.auth-card p{color:var(--text-secondary);margin-bottom:var(--space-6)}.auth-card #google-signin-button{justify-content:center;width:100%;display:flex}.google-signin-btn{color:var(--surface-2);border:1px solid var(--text-secondary);border-radius:var(--radius-full);font-size:var(--text-15px);font-weight:var(--font-weight-semibold);cursor:pointer;transition:transform var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default);background:#fff;justify-content:center;align-items:center;padding:12px 20px;display:inline-flex}.google-signin-btn:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}.auth-card .disabled{opacity:.6;pointer-events:none}.auth-error{color:var(--color-error);margin-top:var(--space-4)}body.using-gamepad{cursor:none}.controller-only{display:none!important}.using-gamepad .controller-only{display:initial!important}.using-gamepad .keyboard-only{display:none!important}#app{flex-direction:column;height:100dvh;display:flex}.header{background:var(--surface-3);padding:var(--header-padding-y) var(--header-padding-x);border-bottom:2px solid var(--border-color-default);max-height:var(--header-max-height);transition:max-height var(--duration-slowest) var(--ease-default), padding var(--duration-slowest) var(--ease-default), border-width var(--duration-slowest) var(--ease-default), opacity var(--duration-slowest) var(--ease-default);justify-content:space-between;align-items:center;display:flex}.header h1{font-size:var(--text-2xl);color:var(--color-primary);text-overflow:ellipsis;white-space:nowrap;max-width:42vw;overflow:hidden}.controller-status{align-items:center;gap:var(--space-3);padding:var(--space-1) var(--space-3);background:var(--surface-2);border-radius:var(--radius-full);border:1px solid var(--border-color-subtle);display:flex}.controller-icon{width:20px;height:20px;transition:color var(--duration-base) var(--ease-default), filter var(--duration-base) var(--ease-default)}.controller-icon.online{color:var(--color-success-bright);filter:drop-shadow(0 0 4px var(--color-success-bright));animation:2s ease-in-out infinite pulse-green}.controller-icon.offline{color:var(--text-tertiary);opacity:.5}@keyframes pulse-green{0%{filter:drop-shadow(0 0 2px var(--color-success-bright))}50%{filter:drop-shadow(0 0 8px var(--color-success-bright))}to{filter:drop-shadow(0 0 2px var(--color-success-bright))}}#controller-name{font-size:var(--text-base);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.help-button{border:1px solid var(--border-color-subtle);color:var(--text-secondary);padding:var(--space-2) var(--space-4);font-size:var(--text-sm);border-radius:var(--radius-full);cursor:pointer;margin-left:var(--space-4);background:0 0}.help-button:hover{border-color:var(--color-primary);color:var(--color-primary);box-shadow:var(--shadow-glow-primary-subtle)}.user-menu{align-items:center;gap:var(--space-3);display:flex;position:relative}.user-menu[hidden]{display:none!important}.user-avatar{border-radius:var(--radius-full);background:var(--surface-5);width:36px;height:36px;color:var(--text-primary);font-weight:var(--font-weight-semibold);font-size:var(--text-0_9);cursor:pointer;z-index:2;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex;position:relative;overflow:hidden}.user-avatar img{object-fit:cover;width:100%;height:100%}.user-menu-panel{transform-origin:100%;background:var(--surface-3);border:1px solid var(--surface-4);border-radius:var(--radius-full);padding:var(--space-2) calc(var(--space-10) + var(--space-1)) var(--space-2) var(--space-3);align-items:center;gap:var(--space-3);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default);z-index:1;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)scaleX(.95)}.user-menu.open .user-menu-panel,.user-menu:hover .user-menu-panel,.user-menu:focus-within .user-menu-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%)scaleX(1)}.user-name{font-size:var(--text-0_9);color:var(--text-secondary)}.user-name-link{color:inherit;cursor:pointer;font:inherit;background:0 0;border:0;padding:0;text-decoration:none}.user-name-link:hover,.user-name-link:focus-visible{text-decoration:underline}.user-actions{border:1px solid var(--border-color-strong);color:var(--text-secondary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-3);cursor:pointer;background:0 0}.user-actions:hover{background:var(--surface-4)}.viewer-container{background:var(--surface-0);touch-action:manipulation;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.comic-display{touch-action:pan-y;-webkit-overflow-scrolling:touch;justify-content:center;align-items:center;width:100%;height:100%;display:flex;overflow:hidden auto}.comic-display img{object-fit:contain;max-width:100%;max-height:100%}.comic-display img.snap-back{transition:transform .3s cubic-bezier(.25,.8,.25,1)}.comic-display.fit-height{overflow-y:hidden}.comic-display.fit-height img{width:auto;max-width:none;height:100%}.comic-display.fit-width img{width:100%;height:auto;max-height:none}.comic-display.fit-width{align-items:flex-start}.comic-display.page-flash:after{content:"";background:var(--color-primary-alpha-15);pointer-events:none;z-index:100;animation:.3s ease-out flash;position:absolute;inset:0}@keyframes flash{0%{opacity:0}50%{opacity:1}to{opacity:0}}.welcome-screen{text-align:center;padding:var(--space-8);max-width:600px}.welcome-screen h2{color:var(--color-primary);margin-bottom:var(--space-4)}.instructions{background:var(--surface-3);margin-top:var(--space-8);padding:var(--space-6);border-radius:var(--radius-lg);padding:var(--space-6);text-align:left}.instructions h3{color:var(--color-primary);margin-bottom:var(--space-4)}.instructions ul{list-style-position:inside}.instructions li{margin-bottom:var(--space-2)}.controls{background:var(--surface-3);padding:var(--space-4) var(--space-8);justify-content:center;align-items:center;gap:var(--space-8);border-top:2px solid var(--border-color-default);max-height:var(--header-max-height);transition:max-height var(--duration-slowest) var(--ease-default), padding var(--duration-slowest) var(--ease-default), border-width var(--duration-slowest) var(--ease-default), opacity var(--duration-slowest) var(--ease-default);flex-wrap:wrap;display:flex}#app.ui-hidden .header,#app.ui-hidden .controls{opacity:0;pointer-events:none;border-width:0;max-height:0;padding-top:0;padding-bottom:0}.nav-btn{background:var(--color-primary);color:var(--text-on-primary);padding:var(--button-padding-y) var(--button-padding-x);font-size:var(--button-font-size);border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow-btn);transition:background var(--duration-slow) var(--ease-default), transform var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default);min-height:var(--touch-target-min);border:none;min-width:120px}.nav-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}.nav-btn:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-md), var(--shadow-glow-accent-12);transform:translateY(-2px)}.nav-btn:active{box-shadow:var(--shadow-sm);transform:translateY(0)}.nav-btn-secondary{background:var(--surface-3);color:var(--color-primary-light);border:1px solid var(--border-color-default)}.nav-btn-secondary:hover{background:var(--surface-4);box-shadow:var(--shadow-sm)}.nav-btn:disabled{background:var(--surface-5);cursor:not-allowed}#page-counter{font-size:var(--text-lg);text-align:center;-webkit-user-select:none;user-select:none;min-width:120px}.fullscreen-hint{font-size:var(--text-sm);color:var(--text-tertiary)}.debug-panel{background:var(--backdrop-heavy);border:1px solid var(--color-primary);width:300px;max-height:200px;padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-0_8);display:none;position:fixed;bottom:0;right:0;overflow-y:auto}.debug-panel.visible{display:block}.deploy-indicator{padding:var(--space-2) var(--space-3);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);background:var(--backdrop-heavy);border:1px solid var(--border-color-primary);color:var(--text-secondary);font-size:var(--text-0_8);letter-spacing:var(--tracking-wide);-webkit-backdrop-filter:var(--backdrop-blur-strong);backdrop-filter:var(--backdrop-blur-strong);z-index:1500;position:fixed;bottom:16px;right:16px}.deploy-indicator.hidden{display:none}@media (width<=900px){.header{padding:var(--space-3) var(--space-4)}.header h1{font-size:var(--text-xl)}.controller-status{font-size:var(--text-sm)}.controls{padding:var(--space-3) var(--space-4);gap:var(--space-4)}}@media (width<=600px){.header{gap:var(--space-2);text-align:center;flex-direction:column}.header h1{max-width:90vw}.controls{gap:var(--space-3);flex-direction:column}.nav-btn{width:100%;max-width:280px}}#debug-output{white-space:pre-wrap;color:var(--color-success-bright)}.loading{text-align:center;padding:var(--space-8)}.loading:after{content:"...";animation:dots var(--duration-dots) steps(4, end) infinite}@keyframes dots{0%,20%{content:"."}40%{content:".."}60%,to{content:"..."}}.page-error{text-align:center;padding:var(--space-8);color:var(--text-primary)}.page-error .error-icon{font-size:var(--text-4xl);margin-bottom:var(--space-4)}.page-error h3{color:var(--color-error);margin-bottom:var(--space-2)}.page-error p{color:var(--text-tertiary);margin-bottom:var(--space-6)}.page-error .retry-btn{background:var(--color-primary);color:var(--text-on-primary);padding:var(--button-padding-y) var(--space-8);font-size:var(--button-font-size);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--duration-slow);font-weight:var(--font-weight-bold);border:none}.page-error .retry-btn:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-card-hover);transform:translateY(-2px)}.settings-panel{background:var(--backdrop-light);z-index:1000;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.settings-panel.visible{display:flex}.settings-header{margin-bottom:var(--space-6);text-align:center}.settings-header h2{color:var(--color-primary);margin-bottom:var(--space-2)}.settings-header p{color:var(--text-secondary);font-size:var(--text-0_9)}.settings-list{gap:var(--space-3);margin-bottom:var(--space-6);flex-direction:column;display:flex}.settings-item{background:var(--surface-3);border:1px solid var(--border-color-default);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);min-width:var(--container-xs);transition:border var(--duration-base), box-shadow var(--duration-base);justify-content:space-between;align-items:center;display:flex}.settings-item.selected{border-color:var(--border-color-primary);box-shadow:var(--shadow-focus), var(--shadow-focus-ambient)}.settings-label{font-weight:var(--font-weight-semibold)}.settings-value{color:var(--color-primary);font-variant-numeric:tabular-nums}.settings-footer{text-align:center}.settings-close{background:var(--color-primary);color:var(--text-on-primary);padding:var(--space-2) var(--space-6);font-size:var(--text-md);border-radius:var(--radius-sm);cursor:pointer;border:none}.settings-close:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-card-hover);transform:translateY(-1px)}.settings-card{background:var(--surface-2);border:1px solid var(--border-color-default);padding:var(--space-6) var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl)}.help-panel{background:var(--backdrop-light);z-index:1000;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.help-panel.visible{display:flex}.help-card{background:var(--surface-2);border:1px solid var(--border-color-default);padding:var(--space-6) var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);min-width:var(--container-xs);max-width:var(--container-md);width:min(92vw,720px)}.help-header{text-align:center;margin-bottom:var(--space-5)}.help-header h2{color:var(--color-primary);margin-bottom:var(--space-2)}.help-header p{color:var(--text-secondary);font-size:var(--text-0_9)}.help-sections{gap:var(--space-8);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.help-section-wide{border-top:1px solid var(--surface-4);padding-top:var(--space-6);grid-column:1/-1}.controller-help-layout{align-items:flex-start;gap:var(--space-8);margin-top:var(--space-4);display:flex}.controller-diagram{color:var(--text-tertiary);background:var(--surface-1);padding:var(--space-4);border-radius:var(--radius-lg);flex:0 0 240px;justify-content:center;align-items:center;display:flex}.xbox-svg{filter:drop-shadow(0 4px 6px #0000004d)}.controller-details{flex:1}.edge-tip{margin-top:var(--space-6);padding:var(--space-4);background:var(--surface-4);border-left:4px solid var(--color-primary);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-secondary)}.edge-tip strong{color:var(--color-primary-light)}@media (width<=600px){.controller-help-layout{flex-direction:column;align-items:center}.controller-diagram{flex:none;width:100%}}.help-section h3{margin-bottom:var(--space-2);color:var(--text-primary);font-size:var(--text-md)}.help-list{gap:var(--space-2);color:var(--text-secondary);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.help-key{min-width:28px;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);border:1px solid var(--surface-4);background:var(--surface-3);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-primary);margin-right:var(--space-1);justify-content:center;align-items:center;display:inline-flex}.help-footer{margin-top:var(--space-5);text-align:center}.help-close{background:var(--color-primary);color:var(--text-on-primary);padding:var(--space-2) var(--space-6);font-size:var(--text-md);border-radius:var(--radius-sm);cursor:pointer;border:none}.help-close:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-card-hover);transform:translateY(-1px)}@media (prefers-reduced-motion:reduce){.nav-btn:hover,.nav-btn:active,.page-error .retry-btn:hover,.settings-close:hover,.help-close:hover{transform:none}}@media (width<=640px){.help-card{padding:var(--space-5) var(--space-6)}}.stats-panel{background:var(--backdrop-light);z-index:1000;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.stats-panel.visible{display:flex}.stats-card{background:var(--surface-2);border:1px solid var(--border-color-default);padding:var(--space-6) var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);min-width:var(--container-xs);max-width:var(--container-md);width:min(92vw,720px)}.stats-header{text-align:center;margin-bottom:var(--space-5)}.stats-header h2{color:var(--color-primary);margin-bottom:var(--space-2)}.stats-header p{color:var(--text-secondary);font-size:var(--text-0_9)}.stats-grid{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.stats-item{background:var(--surface-3);border:1px solid var(--border-color-default);padding:var(--space-4);border-radius:var(--radius-xl)}.stats-label{color:var(--text-tertiary);font-size:var(--text-sm);margin-bottom:var(--space-2)}.stats-value{color:var(--text-primary);font-size:var(--text-1_3);font-weight:var(--font-weight-bold)}.stats-footer{margin-top:var(--space-5);text-align:center}.stats-link{color:var(--color-primary);margin-bottom:var(--space-4);font-size:var(--text-sm);font-weight:var(--font-weight-medium);text-decoration:none;display:block}.stats-link:hover,.stats-link:focus-visible{text-decoration:underline}@media (width<=640px){.stats-card{padding:var(--space-5) var(--space-6)}}.metadata-form{gap:var(--space-4);flex-direction:column;display:flex}.metadata-field{gap:var(--space-2);flex-direction:column;display:flex}.metadata-label{color:var(--text-tertiary);font-size:var(--text-sm)}.metadata-input{border-radius:var(--radius-lg);width:100%;padding:var(--input-padding-y) var(--input-padding-x);border:1px solid var(--border-color-default);background:var(--surface-3);color:var(--text-primary);outline:none}.metadata-input:focus{border-color:var(--border-color-primary);box-shadow:var(--shadow-focus), var(--shadow-focus-ambient-sm)}.metadata-actions{gap:var(--space-3);margin-top:var(--space-2);justify-content:center;display:flex}