:root{--color-bg-primary:#0f0f23;--color-bg-secondary:#1a1a2e;--color-bg-tertiary:#252542;--color-bg-hover:#2a2a4e;--color-bg-error:#3d1a1a;--color-bg-danger:#2a1a1a;--color-border:#333;--color-border-light:#444;--color-border-focus:#54a0ff;--color-text-primary:#e0e0e0;--color-text-secondary:#a0a0a0;--color-text-muted:#777;--color-text-error:#ff6b6b;--color-accent:#54a0ff;--color-success:#28a745;--color-warning:#ffc107;--color-danger:#dc3545;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:24px;--spacing-2xl:32px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--transition-fast:150ms ease;--transition-normal:200ms ease;--transition-slow:300ms ease;--z-base:1;--z-dropdown:100;--z-overlay:1000;--z-modal:2000;--z-tooltip:3000;--font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;--font-size-xs:0.7rem;--font-size-sm:0.8rem;--font-size-base:1rem;--font-size-lg:1.2rem;--font-size-xl:1.5rem;--font-size-2xl:2rem;--font-size-3xl:2.5rem;--touch-target-min:44px}*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden;font-family:var(--font-family)}body{background:var(--color-bg-primary);color:var(--color-text-primary);line-height:1.5}:focus{outline:none}:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:#7ab8ff;text-decoration:underline}.btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--touch-target-min);min-height:var(--touch-target-min);padding:var(--spacing-sm) var(--spacing-lg);border:1px solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--color-text-primary);font-family:inherit;font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;-moz-user-select:none;user-select:none}.btn:hover{background:var(--color-bg-hover)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-icon{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;border-radius:var(--radius-md)}.btn-icon:hover{background:var(--color-bg-hover);border-color:var(--color-border-light)}.btn-icon.active{background:var(--color-bg-hover);border:2px solid var(--color-border-focus)}.btn-primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.btn-primary:hover{background:#4090ef;border-color:#4090ef}.btn-danger{background:var(--color-bg-danger);border-color:var(--color-border-light)}.btn-danger:hover{background:#3a2020;border-color:var(--color-text-error)}.btn-color{width:32px;height:32px;min-width:32px;min-height:32px;padding:0;border:2px solid var(--color-border-light);border-radius:var(--radius-sm)}.btn-color:hover{transform:scale(1.1)}.btn-color.active{border-color:#fff;box-shadow:0 0 0 2px var(--color-bg-primary)}.card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-xl)}.card-elevated{box-shadow:0 4px 24px rgba(0,0,0,.3)}.header{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-bg-secondary);border-bottom:1px solid var(--color-border)}.header-logo{height:40px;width:auto}.header-session{color:var(--color-text-muted);font-size:var(--font-size-sm);font-family:monospace}.header-spacer{flex:1 1}.status{display:flex;align-items:center;gap:var(--spacing-sm)}.status-dot{width:8px;height:8px;border-radius:var(--radius-full);animation:pulse 2s infinite}.status-dot.connected{background:var(--color-success)}.status-dot.connecting{background:var(--color-warning)}.status-dot.disconnected,.status-dot.error{background:var(--color-danger);animation:none}.status-text{font-size:var(--font-size-sm);color:var(--color-text-secondary)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.toolbar{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md) 0;background:var(--color-bg-secondary);border-right:1px solid var(--color-border)}.toolbar-vertical{width:56px}.toolbar-divider{width:28px;height:1px;background:var(--color-border);margin:var(--spacing-sm) 0}.toolbar-spacer{flex:1 1}.color-picker{position:relative}.color-picker-dropdown{position:absolute;top:0;left:48px;display:grid;grid-template-columns:repeat(4,1fr);grid-gap:var(--spacing-xs);gap:var(--spacing-xs);padding:var(--spacing-sm);background:var(--color-bg-tertiary);border:1px solid var(--color-border-light);border-radius:var(--radius-md);z-index:var(--z-dropdown);box-shadow:0 4px 16px rgba(0,0,0,.4)}.stroke-control{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.stroke-slider{width:36px;height:60px;writing-mode:vertical-lr;direction:rtl;cursor:pointer}.stroke-label{color:var(--color-text-muted);font-size:var(--font-size-xs)}.viewer-container{flex:1 1;position:relative;overflow:hidden;background:var(--color-bg-secondary)}.viewer-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:var(--z-base)}.loading-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg);color:var(--color-text-muted)}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-border);border-top-color:var(--color-accent);border-radius:var(--radius-full);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.loading-text{font-size:var(--font-size-base);text-align:center}.loading-subtext{font-size:var(--font-size-sm);color:var(--color-text-muted)}.error-banner{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-bg-error);color:var(--color-text-error);font-size:var(--font-size-sm);display:flex;align-items:center;gap:var(--spacing-sm)}.error-banner svg{flex-shrink:0}.landing{min-height:100vh;padding:var(--spacing-xl)}.landing,.landing-hero{display:flex;flex-direction:column;align-items:center}.landing-hero{text-align:center;padding:80px var(--spacing-xl);max-width:800px}.landing-logo{height:80px;margin-bottom:var(--spacing-xl)}.landing-title{font-size:var(--font-size-3xl);font-weight:700;margin-bottom:var(--spacing-md);background:linear-gradient(135deg,#fff,#a0a0a0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.landing-subtitle{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--spacing-2xl);max-width:500px;line-height:1.6}.landing-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:var(--spacing-lg);gap:var(--spacing-lg);width:100%;max-width:900px;margin-top:var(--spacing-2xl)}.feature-card{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);transition:all var(--transition-normal);cursor:default}.feature-card:hover{border-color:var(--color-border-light);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.3)}.feature-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-hover);border-radius:var(--radius-md);margin-bottom:var(--spacing-md);color:var(--color-accent)}.feature-title{font-size:var(--font-size-base);font-weight:600;margin-bottom:var(--spacing-sm)}.feature-desc{color:var(--color-text-secondary);line-height:1.5}.feature-desc,.landing-api{font-size:var(--font-size-sm)}.landing-api{margin-top:var(--spacing-2xl);padding:var(--spacing-lg);background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:SF Mono,Monaco,Consolas,monospace}.landing-api code{color:var(--color-accent)}@media (max-width:639px){.toolbar-vertical{width:48px}.btn-icon{width:36px;height:36px;min-width:36px;min-height:36px}.header{padding:var(--spacing-sm)}.header-logo{height:36px}.landing-hero{padding:40px var(--spacing-lg)}.landing-title{font-size:var(--font-size-2xl)}.landing-subtitle{font-size:var(--font-size-base)}.landing-features{grid-template-columns:1fr}.color-picker-dropdown{left:auto;right:48px}}@media (min-width:640px) and (max-width:1023px){.landing-features{grid-template-columns:repeat(2,1fr)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.loading-spinner{animation:none;border-top-color:var(--color-accent)}.status-dot{animation:none}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-primary)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--color-border-light)}