:root{--bg-color:#0b0f19;--panel-bg:#161c2dbf;--panel-border:#ffffff1a;--text-primary:#f0f4f8;--text-secondary:#94a3b8;--accent-color:#3b82f6;--accent-hover:#60a5fa;--glass-blur:16px}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);width:100vw;height:100vh;font-family:Outfit,-apple-system,BlinkMacSystemFont,sans-serif;overflow:hidden}#app{width:100%;height:100%;display:flex}#canvas-container{z-index:1;flex-grow:1;position:relative}#sidebar{background:var(--panel-bg);width:360px;-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--panel-border);z-index:10;border-radius:20px;flex-direction:column;padding:32px 24px;display:flex;position:absolute;top:24px;bottom:24px;left:24px;overflow-y:auto;box-shadow:0 25px 50px -12px #00000080}header h1{background:linear-gradient(135deg,#60a5fa,#c084fc);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:4px;font-size:28px;font-weight:800}header p{color:var(--text-secondary);letter-spacing:1px;text-transform:uppercase;margin-bottom:32px;font-size:14px;font-weight:400}#steps-container{flex-direction:column;flex-grow:1;display:flex}.step{animation:.4s forwards fadeIn;display:none}.step.active{flex-direction:column;gap:16px;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.step h2{color:#fff;font-size:24px;font-weight:600}.step p{color:var(--text-secondary);font-size:18px;line-height:1.6}.actions{flex-wrap:wrap;align-items:center;gap:12px;margin-top:8px;display:flex}.next-btn{background:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:12px 20px;font-family:inherit;font-size:15px;font-weight:600;transition:background .2s,transform .1s}.next-btn:hover{background:var(--accent-hover)}.next-btn:active{transform:scale(.97)}.skip-btn,.reset-btn{color:var(--text-secondary);border:1px solid var(--panel-border);cursor:pointer;background:0 0;border-radius:10px;padding:11px 16px;font-family:inherit;font-size:14px;font-weight:600;transition:all .2s}.skip-btn:hover,.reset-btn:hover{color:#fff;background:#ffffff0d}.highlight-trigger{color:var(--accent-hover);text-underline-offset:4px;cursor:pointer;border-radius:4px;padding:0 4px;font-weight:600;-webkit-text-decoration:underline dashed;text-decoration:underline dashed;transition:all .2s;display:inline-block}.highlight-trigger:hover{color:#fff;background-color:#60a5fa26}.highlight-trigger.active{color:#fff;background-color:var(--accent-color);text-decoration:none}.controls{background:#0000004d;border-radius:12px;flex-direction:column;gap:12px;margin-top:16px;padding:16px;display:flex}.controls label{justify-content:space-between;font-size:14px;font-weight:600;display:flex}input[type=range]{-webkit-appearance:none;background:0 0;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent-color);cursor:pointer;border-radius:50%;width:16px;height:16px;margin-top:-6px;box-shadow:0 0 10px #3b82f680}input[type=range]::-webkit-slider-runnable-track{cursor:pointer;background:#fff3;border-radius:2px;width:100%;height:4px}select{color:#fff;border:1px solid var(--panel-border);background:#00000080;border-radius:8px;outline:none;padding:8px 12px;font-family:inherit}#color-mode-desc{color:var(--text-secondary);margin-top:4px;font-size:13px;line-height:1.4}#stats{border-top:1px solid var(--panel-border);color:var(--text-secondary);flex-direction:column;gap:8px;margin-top:auto;padding-top:24px;font-size:13px;display:flex}#stats span{color:#fff;font-variant-numeric:tabular-nums;font-weight:600}@media (width<=768px){#sidebar{width:auto;max-height:45vh;padding:24px 20px;inset:auto 16px 16px}header h1{font-size:24px}.step h2{font-size:20px}.step p{font-size:16px}.actions{flex-direction:column;align-items:stretch}.next-btn,.skip-btn,.reset-btn{text-align:center}}