:root{--color-ohmg-black:#1b1b1b;--color-ohmg-blue:#94dbff;--color-ohmg-red:#cc4722;--color-ohmg-yellow:#ffbf35;--color-ohmg-lilac:#b0afed;--color-ohmg-pink:#ff94c2;--text-color:var(--color-ohmg-black);--text-color-secondary:#666;--accent-color:var(--color-ohmg-lilac);--border-color-light:#0000001a;--border-color-medium:#0003;--background-overlay:#ffffffe6;--background-white:#fff;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:20px;--spacing-xl:40px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--font-size-xs:.8125rem;--font-size-sm:.875rem;--font-size-md:1.25rem;--font-size-lg:2rem;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--letter-spacing-tight:-.01em;--line-height-normal:1.4;--transition-fast:.2s ease;--transition-medium:.3s ease;--shadow-sm:0 2px 8px #0000001a;--shadow-md:0 4px 20px #0000001a;--blur-md:blur(10px);--z-nav:10;--z-overlay:1000;--nav-max-width:300px;--thumbnail-size:40px}body{background-image:radial-gradient(circle,#ccc 1px,#0000 1px);background-size:20px 20px;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden}#root{width:100%;min-height:100vh;position:relative}.nav{bottom:var(--spacing-lg);left:var(--spacing-lg);z-index:var(--z-nav);background:var(--background-overlay);-webkit-backdrop-filter:var(--blur-md);backdrop-filter:var(--blur-md);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-md);max-width:var(--nav-max-width);border:1px solid #fff3;position:fixed}.nav__container{gap:var(--spacing-md);flex-direction:column;display:flex}.nav__controls{align-items:center;gap:var(--spacing-md);display:flex}.nav__thumbnails{gap:var(--spacing-sm);scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;flex-direction:column;flex:1;align-items:center;display:flex;position:relative;overflow:hidden auto}.nav__thumbnails::-webkit-scrollbar{display:none}.nav__thumbnail{width:var(--thumbnail-size);height:var(--thumbnail-size);border-radius:var(--radius-sm);transition:all var(--transition-fast);cursor:pointer;background:0 0;border:2px solid #ff94c24d;flex-shrink:0;padding:0}.nav__thumbnail:hover{border-color:var(--accent-color)}.nav__thumbnail:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.nav__thumbnail--active{border-color:var(--accent-color);opacity:1}.nav__thumbnail--inactive{opacity:.3;border-color:var(--border-color-medium)}.nav__thumbnail--upload{border:2px dashed var(--accent-color);color:var(--accent-color);transition:opacity var(--transition-fast);background:0 0;justify-content:center;align-items:center;display:flex}.nav__thumbnail--upload:hover{opacity:.7}.canvas-grid{gap:var(--spacing-xl);padding:var(--spacing-lg);flex-wrap:wrap;justify-content:center;margin:0 auto;list-style:none;display:flex}.canvas-grid__item{border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background:#f8f9fa;flex:0 auto;justify-content:center;align-items:center;max-width:600px;min-height:200px;display:flex;position:relative;overflow:hidden}.canvas{cursor:pointer;object-fit:contain;width:auto;max-width:100%;height:auto;max-height:100%;transition:opacity var(--transition-medium);display:block}.canvas__container{position:relative}.canvas__skeleton{border-radius:var(--radius-sm);background-color:#e0e0e0;animation:2s ease-in-out infinite skeleton-pulse;position:absolute;inset:0}.canvas__error{justify-content:center;align-items:center;gap:var(--spacing-xs);color:var(--color-ohmg-red);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);background:#f8f9fa;flex-direction:column;display:flex;position:absolute;inset:0}.canvas__error-name{color:var(--text-color-secondary);font-family:ui-monospace,monospace}.canvas__badge{bottom:var(--spacing-sm);left:var(--spacing-sm);padding:3px var(--spacing-sm);color:#fff;border-radius:var(--radius-sm);pointer-events:none;opacity:0;transition:opacity var(--transition-fast);background:#1b1b1bd9;font-family:ui-monospace,monospace;font-size:11px;position:absolute}.canvas__container:hover .canvas__badge,.canvas:focus-visible+.canvas__badge{opacity:1}.canvas:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.25}}.dropzone-overlay{width:100vw;height:100vh;z-index:var(--z-overlay);pointer-events:none;padding:var(--spacing-lg);box-sizing:border-box;background:#ff94c233;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.dropzone-overlay__border{border:1px dashed #ff94c2cc;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.dropzone-overlay__content{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--background-white);text-align:center}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}body{line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}