#metadata,#title-container{position:absolute;padding:.5em .75em}#title-container,body{display:flex;display:flex}.controls,.rarity{left:2%}button,input{font-size:16px}#visualization-container,body{position:relative;height:100vh}html{background:#000}body{font-family:Arial,sans-serif;margin:0;overflow:hidden;background:0 0/cover #000;width:100vw;justify-content:center;align-items:center}canvas{will-change:transform;position:absolute!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%)!important;z-index:1;aspect-ratio:1/1;width:min(95vw,95vh)!important;height:min(95vw,95vh)!important}#metadata{background:rgba(0,0,0,.7);border-radius:.25em;box-shadow:0 .125em .375em rgba(0,0,0,.5);bottom:.5em;left:.5em;font-size:.8em;color:#aaa;line-height:1.4;z-index:1000}#title-container{color:#fff;width:"100%";justify-content:center;align-items:center;top:0;left:0;right:0;height:100%;z-index:100;background:0 0;font-size:1.5em;flex-flow:column;gap:1em}#click-to-play{color:#fff;cursor:pointer}#fullscreen-button,.controls,.header-label,.rarity,.version-label{color:#616060;font-family:Arial,sans-serif;position:absolute;background:#000}#click-to-play:hover{color:#f90}.title-protocol{font-size:2.5em;font-weight:1000}#metadata .highlight{color:#50ff50}#fullscreen-button{border:none;border-radius:5px;cursor:pointer;transition:background-color .3s;display:none;font-weight:700;font-size:11px;font-style:italic;bottom:20px;right:20px;z-index:2001}#play-button{cursor:pointer;color:#a9a9a9;z-index:100;bottom:10;left:0}#play-button:hover{color:#fff}.controls,.header-label,.rarity,.version-label{font-weight:700;z-index:100;padding:2px 6px;border-radius:4px}.floating-button,button{color:#fff;cursor:pointer}.header-label{top:2%;left:2%;font-size:18px}.version-label{top:2%;right:2%;font-size:18px;font-style:italic}.rarity{bottom:2%;font-size:18px}.footer-label{bottom:1%;right:1%;font-size:28px;font-style:italic}#visualizerCanvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}button{padding:10px 20px;background:#f90;border:none;border-radius:4px}button:hover{background:#45a049}input{padding:10px;border:2px solid #ddd;border-radius:4px;width:300px}.hidden{display:none}.floating-button{position:fixed;background-color:#000;padding:12px 18px;font-size:14px;border:4px #fff;font-weight:700;transition:background-color .2s;box-shadow:0 4px 10px rgba(0,0,0,.2);z-index:1000}.loading-error,.loading-text{font-family:monospace;font-size:16px}.tip-button-floating{bottom:20px;left:20px}.wallet-button-floating{bottom:20px;right:20px}.floating-button:hover{background-color:#fff;color:#000}.loading-container{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#222;z-index:1000}.loading-spinner{width:50px;height:50px;border:3px solid #333;border-top:3px solid #f90;border-radius:50%;animation:1s linear infinite spin;margin-bottom:20px}.loading-text{color:#f90}.loading-error{color:#f44;text-align:center}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}#visualization-container{width:100%;display:flex;justify-content:center;align-items:center;background:#000}@media (max-width:300px),(max-height:300px){canvas{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important}#visualization-container{height:100%;padding:0}.play-button{padding:15px;opacity:1!important}.play-button svg{width:20px;height:20px}#fullscreen-button{display:none}}@media (max-width:135px),(max-height:135px){.play-button{padding:8px}.play-button svg{width:12px;height:12px}}.play-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:800px;height:800px;display:flex;justify-content:center;align-items:center;z-index:2000;cursor:pointer}.play-button{background:rgba(0,0,0,.3);padding:20px;border-radius:50%;opacity:0;transition:opacity .3s;color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none}.play-overlay:hover .play-button{opacity:1}.progress-bar-container{display:flex;gap:2px;height:16px;background:#000;padding:2px;margin:5px 0}.progress-segment{flex:1;background:#313131;transition:height 50ms}.progress-segment.active{background:#0f0}.eq-container{height:30px;background:#000;padding:2px;margin:5px 0;position:relative;overflow:hidden}.eq-grid,.eq-line{position:absolute}.eq-line{width:100%;height:100%;display:flex;align-items:flex-end}.eq-point{flex:1;border:1px solid #0f0;width:2px;height:2px;margin:0 1px;transition:height 50ms}.eq-grid{width:100%;height:100%;background-image:linear-gradient(to right,#111 1px,transparent 1px),linear-gradient(to bottom,#111 1px,transparent 1px);background-size:20px 5px;opacity:.5}@media (max-width:768px){.footer-label,.header-label,.version-label{font-size:3vw}.header-label{top:2%;left:1%}.version-label{top:2%;right:1%;font-weight:400}.footer-label{bottom:2%;right:3%}}@media (max-width:480px){.footer-label,.header-label,.rarity,.version-label{font-size:25px}}