*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;touch-action:manipulation}body,html{width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden;font-family:Inter,sans-serif;font-size:14px;background:#e8eaed}#webgl-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.frame{position:fixed;top:0;left:0;padding:20px 24px;z-index:100;pointer-events:none}.brand{display:flex;align-items:center;gap:10px;pointer-events:auto}.brand-icon{font-size:22px;color:#22c55e;filter:drop-shadow(0 0 8px rgba(34,197,94,.5))}.frame__title{font-size:20px;font-weight:700;letter-spacing:-.5px;color:transparent;background:linear-gradient(135deg,#22c55e 0%,#86efac 50%,#22c55e 100%);background-size:200%;-webkit-background-clip:text;background-clip:text;animation:shimmer 4s linear infinite}@keyframes shimmer{0%{background-position:0% center}to{background-position:200% center}}.drag-notice{position:fixed;bottom:22vh;left:50%;transform:translate(-50%);font-size:13px;font-weight:500;color:#ffffffb3;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:8px 18px;border-radius:30px;border:1px solid rgba(255,255,255,.1);letter-spacing:.5px;pointer-events:none;opacity:0;animation:showAndHide 7s ease-in-out forwards;z-index:50}@keyframes showAndHide{0%{opacity:0;transform:translate(-50%) translateY(6px)}12%{opacity:1;transform:translate(-50%) translateY(0)}80%{opacity:1}to{opacity:0;visibility:hidden}}.options{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:6px}.option{position:relative;width:52px;height:52px;background:rgba(15,15,20,.7);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:14px;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);overflow:visible}.option img{height:28px;width:auto;pointer-events:none;filter:brightness(0) invert(.6);transition:filter .25s}.option span{position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);background:rgba(15,15,20,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ffffffe6;font-size:11.5px;font-weight:500;white-space:nowrap;padding:5px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.1);pointer-events:none;opacity:0;transition:opacity .2s ease}.option:hover{background:rgba(34,197,94,.15);border-color:#22c55e59;transform:scale(1.08)}.option:hover img{filter:brightness(0) invert(1)}.option:hover span{opacity:1}.option.--is-active{background:rgba(34,197,94,.2);border-color:#22c55e99;box-shadow:0 0 18px #22c55e40}.option.--is-active img{filter:brightness(0) saturate(100%) invert(60%) sepia(60%) saturate(600%) hue-rotate(90deg)}.toggle-panel{position:fixed;bottom:28px;right:28px;z-index:201;display:flex;align-items:center;gap:8px;padding:13px 22px;background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;font-family:Inter,sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.3px;border:none;border-radius:50px;cursor:pointer;box-shadow:0 8px 28px #22c55e73,0 2px 8px #0000004d;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.toggle-panel i{font-size:15px}.toggle-panel:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 36px #22c55e8c,0 4px 12px #0000004d;background:linear-gradient(135deg,#15803d,#16a34a)}.toggle-panel:active{transform:scale(.97)}.toggle-panel.active{background:linear-gradient(135deg,#1e1e2a,#2d2d3e);box-shadow:0 4px 16px #00000080}@media (max-width: 680px){.options{left:10px}.option{width:44px;height:44px;border-radius:12px}.option img{height:22px}.hint-bar{padding:8px 14px;gap:8px}.hint-bar span:not(.hint-chip){display:none}.toggle-panel{bottom:20px;right:16px;padding:11px 18px;font-size:13px}}