:root{--color-bg-primary: #0a0a0a;--color-text-primary: #fff;--color-text-secondary: rgba(255, 255, 255, .85);--color-accent: rgba(139, 92, 246, .4);--color-accent-bg: rgba(139, 92, 246, .15);--color-border: rgba(255, 255, 255, .1);--color-nav-bg: rgba(15, 15, 15, .9);--color-hint-bg: rgba(0, 0, 0, .7);--blur-backdrop: blur(12px);--transition-smooth: all .2s ease;--nav-padding: 1rem 1.5rem;--nav-gap: 1rem}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,system-ui,sans-serif;background:var(--color-bg-primary);color:var(--color-text-primary);overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}.nav{background:var(--color-nav-bg);backdrop-filter:var(--blur-backdrop);-webkit-backdrop-filter:var(--blur-backdrop);padding:var(--nav-padding);border-bottom:1px solid var(--color-border);display:flex;gap:var(--nav-gap);flex-wrap:wrap;align-items:center}.nav a{color:var(--color-text-secondary);text-decoration:none;transition:var(--transition-smooth);padding:.625rem 1.25rem;border-radius:.375rem;font-size:.9375rem;font-weight:500;border:1px solid var(--color-border);background:#ffffff0d;white-space:nowrap}.nav a:hover,.nav a.router-link-active{color:var(--color-text-primary);border-color:var(--color-accent);background:var(--color-accent-bg);transform:translateY(-1px)}@media (max-width: 768px){.nav{padding:.875rem 1.25rem;gap:.75rem}.nav a{padding:.625rem 1rem;font-size:.875rem}}@media (max-width: 480px){.nav{padding:.75rem 1rem;gap:.625rem}.nav a{font-size:.8125rem;padding:.5rem .875rem;flex:1;text-align:center}}.task-container{flex:1;position:relative;overflow:hidden}.canvas-container{width:100%;height:100%;position:relative}canvas{display:block;width:100%;height:100%;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}canvas.clickable{cursor:pointer}canvas.grabbable{cursor:grab}canvas.grabbable:active,canvas.grabbing{cursor:grabbing}canvas.crosshair{cursor:crosshair}.hint{position:absolute;top:1rem;left:50%;transform:translate(-50%);background:var(--color-hint-bg);color:var(--color-text-primary);padding:.5rem 1rem;border-radius:4px;font-size:.9rem;pointer-events:none;z-index:10;animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.gradient-bg{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);background-size:400% 400%;animation:gradientShift 15s ease infinite}