:root{color-scheme:dark;--ink: #ece3d4;--muted: #9b8f7c;--panel: rgba(20, 16, 26, .55);--border: rgba(236, 227, 212, .16)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0c0a14;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--ink)}#app{position:fixed;top:0;right:0;bottom:0;left:0}#app canvas{display:block}#hud{position:fixed;top:18px;left:20px;pointer-events:none;-webkit-user-select:none;user-select:none;text-shadow:0 1px 10px rgba(0,0,0,.7)}#hud h1{margin:0;font-size:15px;font-weight:700;letter-spacing:.22em}#hud .sub{margin:5px 0 0;font-size:11px;letter-spacing:.04em;color:var(--muted)}#steps{position:fixed;left:50%;bottom:22px;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 18px;background:var(--panel);border:1px solid var(--border);border-radius:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.step-label{font-size:12.5px;letter-spacing:.05em;color:var(--ink)}.step-label #step-name{color:#f4c98a}.dots{display:flex;gap:8px}.dots .dot{width:8px;height:8px;border-radius:50%;background:#ece3d440;transition:background .3s ease,transform .3s ease;cursor:pointer}.dots .dot.active{background:#f4c98a;transform:scale(1.25)}.controls{display:flex;gap:8px}.controls button{width:34px;height:30px;border:1px solid var(--border);border-radius:8px;background:#ece3d40f;color:var(--ink);font-size:13px;cursor:pointer;transition:background .2s ease,border-color .2s ease}.controls button:hover{background:#f4c98a2e;border-color:#f4c98a80}