.shader-preview{position:relative;width:100%;height:100%;background:#0a0a0a;overflow:hidden}.shader-preview canvas,.shader-preview>*{display:block;width:100%!important;height:100%!important}.color-panel{background:#00000080;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:12px;border:1px solid rgba(255,255,255,.08);padding:16px;height:100%;overflow-y:auto;-ms-overflow-style:none;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.color-panel::-webkit-scrollbar{width:4px}.color-panel::-webkit-scrollbar-track{background:transparent}.color-panel::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.color-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.color-panel-header h3{margin:0;color:#fff;font-size:14px;font-weight:600}.reset-btn{background:#ffffff14;border:1px solid rgba(255,255,255,.1);color:#fff9;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:11px;transition:all .2s}.reset-btn:hover{background:#ffffff1f;color:#fff}.color-list{display:flex;flex-direction:column;gap:20px}.color-item{display:flex;flex-direction:column;gap:8px}.color-info{display:flex;flex-direction:column;gap:2px}.color-info label{color:#ffffffe6;font-size:13px;font-weight:500}.color-description{color:#fff6;font-size:11px}.color-picker-wrapper{display:flex;flex-direction:column;gap:8px}.color-picker-wrapper .react-colorful{width:100%;height:110px;border-radius:8px}.hex-input-wrapper{display:flex;align-items:center}.hex-input-wrapper input{width:100%;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);color:#fff;padding:7px 10px;border-radius:6px;font-family:Monaco,Menlo,monospace;font-size:12px;transition:border-color .2s}.hex-input-wrapper input:focus{outline:none;border-color:#ffffff40}.preset-gallery{display:flex;flex-direction:column;gap:10px}.gallery-top-row{display:flex;align-items:center;gap:8px}.category-tabs{display:flex;gap:4px;background:#00000073;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:4px;border-radius:8px;border:1px solid rgba(255,255,255,.08)}.category-tab{background:transparent;border:none;color:#ffffff80;padding:6px 12px;border-radius:6px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s;white-space:nowrap}.category-tab:hover{color:#fffc;background:#ffffff0f}.category-tab.active{background:#ffffff1f;color:#fff}.preset-scroll-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none}.preset-scroll-row::-webkit-scrollbar{display:none}.preset-card{flex-shrink:0;background:#00000073;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:0;cursor:pointer;overflow:hidden;transition:all .2s ease;text-align:center;width:120px;display:flex;flex-direction:column}.preset-card:hover{border-color:#fff3;transform:translateY(-2px)}.preset-card.selected{border-color:#ffffff80;box-shadow:0 0 0 1px #fff3}.preset-thumbnail{position:relative;width:100%;height:64px;overflow:hidden;pointer-events:none}.preset-thumbnail canvas,.preset-thumbnail>*{position:absolute;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important}.preset-name{color:#fffc;font-size:11px;font-weight:500;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-width:768px){.preset-card{width:100px}.preset-thumbnail{height:52px;overflow:hidden}.preset-name{font-size:10px;padding:5px 6px}}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#0a0a0a;color:#fff;overflow:hidden}.app{position:relative;width:100vw;height:100vh;overflow:hidden}.shader-canvas-wrapper{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:0}.top-bar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;pointer-events:none}.top-bar>*{pointer-events:auto}.top-bar-left{display:flex;align-items:center;gap:16px}.app-title{margin:0;font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em;background:#00000073;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.08)}.preset-name-label{font-size:13px;color:#fff9;background:#00000059;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.06)}.top-bar-right{display:flex;gap:8px}.top-btn{background:#00000073;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);color:#fffc;padding:8px 16px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s ease}.top-btn:hover{background:#0009;color:#fff;border-color:#ffffff26}.top-btn.active{background:#ffffff1f;color:#fff;border-color:#fff3}.error-banner{position:absolute;top:64px;left:50%;transform:translate(-50%);z-index:20;background:#cc3232e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;max-width:500px}.color-panel-overlay{position:absolute;top:60px;right:16px;bottom:120px;width:280px;z-index:15;transform:translate(calc(100% + 24px));opacity:0;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;pointer-events:none}.color-panel-overlay.open{transform:translate(0);opacity:1;pointer-events:auto}.bottom-gallery{position:absolute;bottom:0;left:0;right:0;z-index:10;padding:0 16px 16px;pointer-events:none}.bottom-gallery>*{pointer-events:auto}.mobile-color-screen{display:none}@media(max-width:768px){body{overflow:auto}.app{height:auto;min-height:100vh;overflow:visible}.top-bar{position:fixed;padding:12px 16px;z-index:30}.preset-name-label,.top-bar-right,.color-panel-overlay{display:none}.shader-canvas-wrapper{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0}.bottom-gallery{position:fixed;bottom:0;left:0;right:0;padding:0 8px 8px;z-index:10;transition:opacity .3s ease,transform .3s ease}.bottom-gallery.scrolled-away{opacity:0;transform:translateY(20px);pointer-events:none}.mobile-spacer{height:100vh;pointer-events:none}.mobile-color-screen{display:block;position:relative;z-index:5;min-height:100vh;background:#0a0a0a;padding:32px 16px 24px}.mobile-color-screen .color-panel{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:12px;height:auto;max-height:none}.scroll-hint{position:fixed;bottom:90px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff6;font-size:11px;animation:hintBounce 2s ease-in-out infinite;pointer-events:none;z-index:5;transition:opacity .3s ease}.scroll-hint.hidden{opacity:0}.scroll-hint-arrow{width:20px;height:20px;border-left:2px solid rgba(255,255,255,.3);border-bottom:2px solid rgba(255,255,255,.3);transform:rotate(-45deg)}@keyframes hintBounce{0%,to{opacity:.4;transform:translate(-50%) translateY(0)}50%{opacity:.8;transform:translate(-50%) translateY(6px)}}}