*{margin:0;padding:0;box-sizing:border-box}:root{--color-bg: #000;--color-text: #fff;--btn-bg-base: rgba(255, 255, 255, .03);--btn-bg-hover: rgba(255, 255, 255, .75);--btn-border-base: rgba(255, 255, 255, .1);--btn-border-hover: rgba(255, 255, 255, .3);--btn-text-base: rgba(255, 255, 255, .5);--btn-text-active: rgba(255, 255, 255, 1);--btn-size: 18px;--btn-font-size: 10px;--btn-gap: 12px;--btn-border-radius: 2px;--transition-base: .2s}html,body{width:100%;height:100%;overflow-x:hidden}body{font-family:monospace,sans-serif;background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased}#canvas-container{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1}#canvas-container canvas{cursor:crosshair;display:block}#ui-overlay{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:15;pointer-events:none}.ui-element{pointer-events:auto}#loader{position:fixed;top:0;left:0;width:100%;height:100vh;background:var(--color-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;gap:2rem}.loader-logo{width:clamp(80px,15vw,120px);height:auto;opacity:.9;transition:transform .3s ease-out;animation:rotate 2s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loader-progress{width:min(80vw,400px);height:2px;background:#ffffff1a;border-radius:1px;overflow:hidden}#loader-bar{height:100%;width:0%;background:linear-gradient(90deg,#fff,#ffffffb3);transition:width .3s ease}#loader-text{font-size:.875rem;letter-spacing:.1em;opacity:.6;text-transform:uppercase}#scroll-content{position:relative;z-index:12;width:100%;pointer-events:none}.content-section{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;position:relative;pointer-events:none}.content-section.spacer{background:transparent;min-height:50vh}.section-inner{width:100%;position:relative;top:50%;left:10%;transform:translate(-50%,-50%);z-index:1;pointer-events:none}.content-section a{pointer-events:auto}.content-section p{text-align:center;font-size:.9rem;line-height:1.8;opacity:.9;margin-bottom:1.5rem;text-shadow:0 2px 12px rgba(0,0,0,.612)}#hint{position:fixed;bottom:1rem;left:1rem;font-size:.6rem;opacity:.4;letter-spacing:.1em;text-transform:uppercase;z-index:100;animation:fadeInOut 13s ease-in-out infinite;pointer-events:none}@keyframes fadeInOut{0%,to{opacity:.2}50%{opacity:.6}}#fps-counter{position:fixed;bottom:2rem;left:1rem;font-size:.75rem;opacity:.3;font-family:monospace;z-index:50;pointer-events:none}.btn{height:var(--btn-size);background:var(--btn-bg-base);border:1px solid var(--btn-border-base);border-radius:var(--btn-border-radius);color:var(--btn-text-base);font-size:var(--btn-font-size);font-family:monospace;cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center;padding:0;pointer-events:auto}.btn:hover:not(.btn--active){background:var(--btn-bg-hover);border-color:var(--btn-border-hover)}.btn--active{background:var(--btn-bg-hover);border-color:var(--btn-border-hover);color:var(--btn-text-active)}#mobile-controls{position:fixed;left:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:var(--btn-gap);z-index:100;pointer-events:none}#builder-dropdown{position:fixed;top:80px;left:20px;background:#000c;color:var(--color-text);border:1px solid rgba(255,255,255,.2);padding:8px;font-size:14px;z-index:1000;display:none}#builder-controls{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:none;gap:var(--btn-gap);z-index:1000;flex-wrap:wrap;justify-content:center}.btn--builder{width:auto;height:auto;padding:4px 6px;font-size:12px;border:1px solid rgba(255,255,255,.3)}.btn--builder:hover:not(.btn--active){background:#ffffff14;border-color:#fff6}#recorder-overlay{transition:border-color .3s ease}#recorder-status{letter-spacing:.15em;text-shadow:0 2px 8px rgba(0,0,0,.5);backdrop-filter:blur(4px)}@media (max-width: 768px){#recorder-overlay{display:none!important}#recorder-status{font-size:12px;padding:8px 16px}}