*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;height:100%}body{background:#000;height:100%;font-family:system-ui,-apple-system,sans-serif;transition:background .6s}.hero{cursor:crosshair;background:#fff;width:100%;height:100vh;position:relative;overflow:hidden}.hero-canvas{width:100%;height:100%;display:block}.hero-label{letter-spacing:.18em;color:#0000001f;text-transform:lowercase;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:1;font-family:SF Mono,Fira Code,monospace;font-size:11px;position:absolute;bottom:32px;left:32px}.scroll-hint{pointer-events:none;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:6px;animation:2s ease-in-out infinite pulse;display:flex;position:absolute;bottom:32px;left:50%;transform:translate(-50%)}.scroll-hint-line{background:#0000001f;width:1px;height:28px}.scroll-hint-dot{background:#00000026;border-radius:50%;width:4px;height:4px}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.sand-section{background:#0a0a0a;justify-content:center;width:100%;height:100vh;display:flex;position:relative;overflow:hidden}.sand-canvas{display:block;position:absolute;top:0}.controls{opacity:0;z-index:10;-webkit-backdrop-filter:blur(12px);background:#0a0a0ad1;border-top:1px solid #ffffff0f;flex-wrap:wrap;align-items:center;gap:20px;padding:11px 20px;display:flex;position:absolute;bottom:0;left:0;right:0}.ctrl-group{align-items:center;gap:8px;display:flex}.ctrl-label{color:#ffffff47;letter-spacing:.07em;text-transform:uppercase;font-size:11px}.controls input[type=color]{cursor:pointer;background:0 0;border:1px solid #ffffff24;border-radius:3px;width:26px;height:26px;padding:1px}.controls input[type=range]{accent-color:#fff;cursor:pointer;width:72px}.amount-label{color:#ffffff47;min-width:28px;font-size:11px}.radio-group{display:flex}.radio-group input[type=radio]{display:none}.radio-group label{text-transform:uppercase;letter-spacing:.06em;color:#ffffff47;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid #ffffff1c;padding:3px 10px;font-size:11px;transition:background .1s,color .1s}.radio-group label:first-of-type{border-radius:3px 0 0 3px}.radio-group label:last-of-type{border-left:none;border-radius:0 3px 3px 0}.radio-group label:not(:first-of-type):not(:last-of-type){border-left:none}.radio-group input[type=radio]:checked+label{color:#000;background:#fff;border-color:#fff}.reset-btn{cursor:pointer;text-transform:uppercase;letter-spacing:.06em;color:#ffffff47;background:0 0;border:1px solid #ffffff1c;border-radius:3px;padding:3px 12px;font-size:11px;transition:background .1s,color .1s}.reset-btn:hover{color:#000;background:#fff;border-color:#fff}