*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,system-ui,sans-serif;background:#0a0a0a;color:#fff;overflow:hidden}.nav{background:#0f0f0fe6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:1rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1);display:flex;gap:1rem;flex-wrap:wrap;align-items:center}.nav a{color:#ffffffd9;text-decoration:none;transition:all .2s ease;padding:.625rem 1.25rem;border-radius:.375rem;font-size:.9375rem;font-weight:500;border:1px solid rgba(255,255,255,.1);background:#ffffff0d;white-space:nowrap}.nav a:hover{color:#fff;border-color:#8b5cf666;background:#8b5cf626;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}}.content{padding:2rem}.content h2{margin-bottom:1rem}.task-container{display:flex;flex-direction:column;height:100vh}#app{flex:1;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:#000000b3;color:#fff;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%}}