body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#0a0a0a;color:#e0e0e0;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth}#root{min-height:100vh}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#0a0a0a;color:#e0e0e0}.app{height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,#1e3c72,#2a5298);padding:1rem 2rem;box-shadow:0 2px 10px #0000004d;flex-shrink:0}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.title-section{text-align:left}.language-selector{display:flex;align-items:center}.language-select{background-color:#ffffff1a;border:1px solid rgba(255,255,255,.3);border-radius:4px;color:#fff;padding:.5rem;font-size:.9rem;cursor:pointer}.language-select:focus{outline:none;border-color:#fff9}.language-select option{background-color:#1a1a1a;color:#fff}.app-header h1{font-size:2rem;margin-bottom:.25rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.app-header p{font-size:.9rem;opacity:.9}.main-container{display:flex;flex:1;min-height:calc(100vh - 100px)}.sidebar{width:320px;min-width:320px;background-color:#1a1a1a;padding:0;overflow:hidden;border-right:1px solid #333;display:flex;flex-direction:column;height:100%}.problem-selector{display:flex;flex-direction:column;height:100%}.selector-header{padding:1rem;border-bottom:1px solid #333;background-color:#1f1f1f;flex-shrink:0}.selector-header h2{margin-bottom:.5rem;color:#61dafb;font-size:1.2rem}.problem-stats{display:flex;gap:.5rem;flex-wrap:wrap}.stat{font-size:.75rem;padding:.25rem .5rem;border-radius:12px;font-weight:700}.stat.easy{background-color:#4caf50;color:#fff}.stat.medium{background-color:#ff9800;color:#fff}.stat.hard{background-color:#f44336;color:#fff}.filters{padding:1rem;border-bottom:1px solid #333;background-color:#1f1f1f;flex-shrink:0}.search-container{margin-bottom:.75rem}.search-input{width:100%;padding:.5rem;background-color:#333;border:1px solid #555;border-radius:4px;color:#fff;font-size:.9rem}.search-input:focus{outline:none;border-color:#61dafb}.search-input::placeholder{color:#aaa}.difficulty-filter label{display:block;margin-bottom:.25rem;font-size:.8rem;color:#ccc}.difficulty-select{width:100%;padding:.5rem;background-color:#333;border:1px solid #555;border-radius:4px;color:#fff;font-size:.9rem}.difficulty-select:focus{outline:none;border-color:#61dafb}.problem-list-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:0 1rem;scrollbar-width:thin;scrollbar-color:#555 #1a1a1a;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.problem-list-container::-webkit-scrollbar{width:6px}.problem-list-container::-webkit-scrollbar-track{background:#1a1a1a}.problem-list-container::-webkit-scrollbar-thumb{background:#555;border-radius:3px}.problem-list-container::-webkit-scrollbar-thumb:hover{background:#777}.problem-list{display:flex;flex-direction:column;gap:.75rem;padding:1rem 0}.problem-card{background-color:#252525;border:1px solid #333;border-radius:8px;padding:1rem;cursor:pointer;transition:all .2s ease}.problem-card:hover{border-color:#61dafb;transform:translate(3px);box-shadow:0 2px 8px #61dafb1a}.problem-card.active{background-color:#2a3f5f;border-color:#61dafb;box-shadow:0 0 0 2px #61dafb33}.problem-card.sound-problem{border-left:3px solid #ff9800}.sound-icon{font-size:1.2em;margin-left:8px}.category-tag{display:inline-block;padding:2px 8px;background:#333;border-radius:12px;font-size:.85em;margin-top:8px;color:#aaa}.filter-row{display:flex;gap:15px;margin-top:10px}.category-filter{flex:1}.category-filter label{margin-right:8px}.category-select{padding:8px 12px;border-radius:4px;border:1px solid #444;background:#2a2a2a;color:#fff;cursor:pointer}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}input[type=range]::-webkit-slider-track{width:100%;height:6px;background:#333;border-radius:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#61dafb;border-radius:50%;cursor:pointer;margin-top:-5px}input[type=range]::-moz-range-track{width:100%;height:6px;background:#333;border-radius:3px}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#61dafb;border-radius:50%;cursor:pointer;border:none}.problem-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.problem-number{background-color:#333;color:#61dafb;padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:700;min-width:30px;text-align:center;flex-shrink:0}.problem-header h3{font-size:1rem;color:#fff;flex:1;margin:0}.no-results{text-align:center;padding:2rem;color:#888}.clear-filters-btn{background-color:#61dafb;color:#1a1a1a;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;margin-top:1rem;font-size:.9rem;transition:background-color .2s}.clear-filters-btn:hover{background-color:#4fa8c5}.scroll-indicators{padding:.5rem 1rem;border-top:1px solid #333;background-color:#1f1f1f;flex-shrink:0}.scroll-hint{text-align:center;font-size:.75rem;color:#888}.scroll-hint span{animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-3px)}60%{transform:translateY(-1px)}}.difficulty{padding:.25rem .5rem;border-radius:4px;font-size:.75rem;font-weight:700;text-transform:uppercase;flex-shrink:0}.difficulty.easy{background-color:#4caf50;color:#fff}.difficulty.medium{background-color:#ff9800;color:#fff}.difficulty.hard{background-color:#f44336;color:#fff}.problem-description{font-size:.9rem;color:#b0b0b0;line-height:1.4}.workspace{flex:1;display:flex;flex-direction:column;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:2rem}.workspace-header{padding:1.5rem;background-color:#1a1a1a;border-bottom:1px solid #333;flex-shrink:0}.workspace-header h2{color:#61dafb;margin-bottom:.75rem}.workspace-header p{margin-bottom:1rem;line-height:1.6}.workspace-buttons{display:flex;gap:1rem;margin-bottom:1rem}.hint-button,.solution-button{background-color:#2a5298;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.hint-button:hover,.solution-button:hover{background-color:#1e3c72}.solution-button{background-color:#4caf50}.solution-button:hover{background-color:#45a049}.hints{margin-top:1rem;padding-left:1.5rem;list-style-type:disc}.hints li{margin-bottom:.5rem;color:#b0b0b0}.solution{margin-top:1rem;padding:1rem;background-color:#4caf501a;border:1px solid #4caf50;border-radius:8px}.solution h4{color:#4caf50;margin-bottom:.75rem;font-size:1rem}.solution-code{background-color:#0d0d0d;color:#e0e0e0;padding:1rem;border-radius:6px;font-family:Consolas,Monaco,monospace;font-size:14px;line-height:1.5;overflow-x:auto;white-space:pre-wrap;border:1px solid #333}.workspace-content{flex:1;display:flex;min-height:500px;padding-bottom:1rem;margin-bottom:1rem;gap:1rem;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#555 #1a1a1a}.workspace-content::-webkit-scrollbar{height:12px;width:12px}.workspace-content::-webkit-scrollbar-track{background:#1a1a1a;border-radius:6px}.workspace-content::-webkit-scrollbar-thumb{background:#555;border-radius:6px;border:2px solid #1a1a1a}.workspace-content::-webkit-scrollbar-thumb:hover{background:#777}.workspace-content::-webkit-scrollbar-corner{background:#1a1a1a}.monaco-shader-editor{flex:1;background-color:#1a1a1a;border:1px solid #333;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;min-height:0}.monaco-shader-editor .editor-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:#252525;border-bottom:1px solid #333;flex-shrink:0}.monaco-shader-editor .editor-title{font-weight:700;color:#61dafb}.monaco-shader-editor .run-button{background-color:#4caf50;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.monaco-shader-editor .run-button:hover{background-color:#45a049}.monaco-shader-editor .editor-container{flex:1;overflow:hidden}.editor-section{flex:1.2;display:flex;flex-direction:column;padding:1.5rem .75rem 1.5rem 1.5rem;overflow:hidden;min-width:600px;flex-shrink:0}.shader-editor{flex:1;background-color:#1a1a1a;border:1px solid #333;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;min-height:0}.editor-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:#252525;border-bottom:1px solid #333;flex-shrink:0}.editor-title{font-weight:700;color:#61dafb}.run-button{background-color:#4caf50;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.run-button:hover{background-color:#45a049}.editor-container{display:flex;flex:1;overflow:hidden}.line-numbers{background-color:#0d0d0d;padding:1rem .5rem;color:#666;font-family:Consolas,Monaco,monospace;font-size:14px;line-height:1.5;-webkit-user-select:none;user-select:none;overflow-y:auto;flex-shrink:0}.line-number{text-align:right;padding-right:.5rem}.code-editor{flex:1;background-color:#0d0d0d;color:#e0e0e0;border:none;padding:1rem;font-family:Consolas,Monaco,monospace;font-size:14px;line-height:1.5;resize:none;outline:none;overflow-y:auto}.output-section{flex:1.5;display:flex;flex-direction:row;padding:1.5rem 1.5rem 2rem .75rem;gap:1rem;overflow:hidden;min-width:800px;flex-shrink:0}.render-container{background-color:#1a1a1a;padding:1rem;border-radius:8px;border:1px solid #333;flex-shrink:0;width:auto;min-width:340px;max-width:380px}.render-container h3{margin-bottom:1rem;color:#61dafb}.shader-renderer{display:flex;flex-direction:column;align-items:center}.shader-renderer canvas{display:block;background-color:#000;width:320px!important;height:320px!important}.error-message{color:#f44336;margin-top:.5rem;font-size:.9rem;font-family:monospace}.image-comparison{background-color:#1a1a1a;padding:1rem 1rem 2rem;border-radius:8px;border:1px solid #333;flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0;min-height:0;-webkit-overflow-scrolling:touch}.comparison-section{display:flex;flex-direction:column;gap:1rem;height:auto;overflow:visible}.comparison-panel{flex-shrink:0;min-width:340px;max-width:380px;width:100%}.score-panel{flex:1;min-height:0;overflow-y:auto;min-width:300px;padding-bottom:1rem;-webkit-overflow-scrolling:touch;width:100%}.comparison-panel h3{margin-bottom:.75rem;color:#61dafb}.comparison-panel canvas{background-color:#000}.score-panel h3{margin-bottom:.75rem;color:#61dafb}.output-buttons{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}.download-btn{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:.5rem 1rem;border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.25rem;min-width:80px;justify-content:center}.download-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #4caf504d}.download-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.download-btn.gif-btn{background:linear-gradient(135deg,#ff9800,#f57c00)}.download-btn.gif-btn:hover:not(:disabled){box-shadow:0 4px 12px #ff98004d}.score{font-size:2rem;font-weight:700;text-align:center;padding:.75rem;border-radius:8px;transition:all .3s ease}.score.excellent{background-color:#4caf50;color:#fff}.score.good{background-color:#ff9800;color:#fff}.score.needs-work{background-color:#666;color:#fff}.success-message,.good-message,.hint-message{text-align:center;margin-top:.5rem;font-size:.9rem}.success-message{color:#4caf50}.good-message{color:#ff9800}.hint-message{color:#b0b0b0}.score-breakdown{margin-top:.5rem}.breakdown-toggle{background-color:#333;color:#fff;border:none;padding:.4rem .8rem;border-radius:4px;cursor:pointer;font-size:.75rem;width:100%;margin-bottom:.5rem}.breakdown-toggle:hover{background-color:#444}.breakdown-content{background-color:#2a2a2a;border-radius:6px;padding:.75rem;margin-top:.25rem}.breakdown-content h4,.breakdown-content h5{color:#61dafb;margin-bottom:.5rem;font-size:.8rem}.score-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-bottom:.5rem}.score-item{display:flex;flex-direction:column;gap:.2rem;font-size:.7rem;padding:.3rem;background-color:#ffffff0d;border-radius:4px}.score-item .label{color:#ccc;font-size:.65rem}.score-item .value{color:#fff;font-weight:700;font-size:.75rem}.bar{width:100%;height:6px;background-color:#444;border-radius:3px;overflow:hidden;margin-top:.2rem}.fill{height:100%;background:linear-gradient(90deg,#f44336,#ff9800,#4caf50);transition:width .3s ease}.code-stats{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem}.stat{display:flex;justify-content:space-between;font-size:.8rem;padding:.25rem 0}.stat .label{color:#ccc}.stat .value{color:#fff;font-weight:700}.scoring-info{border-top:1px solid #444;padding-top:.75rem}.scoring-info ul{list-style:none;padding:0;font-size:.75rem;color:#aaa}.scoring-info li{margin-bottom:.25rem}@media (max-width: 1600px){.editor-section{flex:1}.output-section{flex:1.3}.render-container{min-width:300px;max-width:340px}.comparison-panel{min-width:300px;max-width:340px;width:100%}}@media (max-width: 1400px){.workspace-content{flex-direction:column;gap:.5rem}.editor-section{padding-right:1.5rem;flex:none;min-height:350px}.output-section{padding-left:1.5rem;flex-direction:row;flex:none}.render-container{min-width:280px;max-width:320px}.comparison-panel{min-width:280px;max-width:320px;width:100%}}@media (max-width: 1200px){.main-container{flex-direction:column}.sidebar{width:100%;min-width:auto;height:180px;border-right:none;border-bottom:1px solid #333}.problem-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding-bottom:.5rem;gap:.5rem;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.problem-card{min-width:200px;flex-shrink:0}.workspace{height:calc(100vh - 280px);padding-bottom:3rem}.workspace-content{flex-direction:column;gap:1rem;padding-bottom:2rem}.editor-section{min-height:300px;padding:1rem;margin-bottom:1rem}.output-section{padding:1rem 1rem 3rem;flex-direction:column;gap:1rem}.render-container{min-width:auto;max-width:none;width:100%}.comparison-panel{min-width:auto;max-width:none}}@media (max-width: 900px){.app-header{padding:.75rem 1rem}.header-content{flex-direction:column;gap:.5rem;align-items:flex-start}.title-section{text-align:left}.app-header h1{font-size:1.5rem}.language-selector{align-self:flex-end}.workspace-header{padding:1rem}.workspace-buttons{flex-direction:column;gap:.5rem}.workspace-buttons button{width:100%;max-width:200px}.render-container{width:100%;max-width:none}.comparison-section{flex-direction:column;gap:1rem}.comparison-panel{width:100%;min-width:auto;max-width:none}}.success-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.success-modal{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-radius:20px;padding:3rem;max-width:800px;width:90%;max-height:90vh;overflow-y:auto;text-align:center;border:2px solid #4caf50;box-shadow:0 20px 60px #4caf504d;position:relative}.success-content{position:relative;z-index:2}.celebration-container{position:relative;margin-bottom:2rem}.celebration-circle{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#4caf50,#81c784);margin:0 auto 2rem;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .6s cubic-bezier(.68,-.55,.265,1.55)}.celebration-circle.animate{transform:scale(1)}.success-icon{width:60px;height:60px}.checkmark{width:100%;height:100%;fill:#fff;transform:scale(0);transition:transform .4s ease-in-out .2s}.checkmark.animate{transform:scale(1)}.checkmark-path{stroke-dasharray:25;stroke-dashoffset:25;animation:checkmark-draw .8s ease-in-out .3s forwards}@keyframes checkmark-draw{to{stroke-dashoffset:0}}.confetti-container{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.confetti{position:absolute;width:10px;height:10px;animation:confetti-fall 3s ease-out forwards}@keyframes confetti-fall{0%{transform:translateY(-100px) rotate(0);opacity:1}to{transform:translateY(400px) rotate(720deg);opacity:0}}.success-message{opacity:0;transform:translateY(20px);transition:all .6s ease-out}.success-message.show{opacity:1;transform:translateY(0)}.success-message h2{color:#4caf50;font-size:2.5rem;margin-bottom:1rem;font-weight:700}.problem-completed{font-size:1.2rem;color:#b0b0b0;margin-bottom:1.5rem}.problem-name{color:#61dafb;font-weight:700}.score-display{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}.score-label{font-size:1.1rem;color:#ccc}.score-value{font-size:2rem;font-weight:700;color:#4caf50;text-shadow:0 0 10px rgba(76,175,80,.5)}.success-image-section{margin:2rem 0;opacity:0;transform:translateY(20px);transition:all .5s ease;text-align:center}.success-image-section.show{opacity:1;transform:translateY(0)}.success-comparison-image{width:100%;max-width:600px;height:auto;border-radius:10px;border:2px solid #4caf50;margin-bottom:1rem;box-shadow:0 10px 30px #4caf504d}.download-comparison-btn{padding:.75rem 2rem;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s ease;margin-bottom:1rem}.download-comparison-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #4caf5066}.download-comparison-btn:disabled{opacity:.6;cursor:not-allowed}.download-options{display:flex;flex-direction:column;align-items:center;gap:1rem}.download-type-selector{display:flex;gap:1rem;margin-bottom:.5rem}.type-btn{padding:.5rem 1.5rem;background:#333;color:#ccc;border:1px solid #555;border-radius:8px;font-size:.9rem;cursor:pointer;transition:all .3s ease}.type-btn:hover:not(:disabled){background:#444;border-color:#666;color:#fff}.type-btn.active{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border-color:#4caf50}.type-btn:disabled{opacity:.6;cursor:not-allowed}.success-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;align-items:center;opacity:0;transform:translateY(20px);transition:all .6s ease-out}.success-actions.show{opacity:1;transform:translateY(0)}.next-problem-btn{background:linear-gradient(135deg,#4caf50,#81c784);color:#fff;border:none;padding:1rem 2rem;border-radius:10px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #4caf5066}.next-problem-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4caf5099}.close-btn{background:transparent;color:#ccc;border:2px solid #555;padding:1rem 2rem;border-radius:10px;font-size:1.1rem;cursor:pointer;transition:all .3s ease}.close-btn:hover{border-color:#61dafb;color:#61dafb}.floating-elements{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.floating-element{position:absolute;font-size:1.5rem;opacity:0;animation:float-up 4s ease-in-out infinite}.floating-element.animate{opacity:1}@keyframes float-up{0%,to{transform:translateY(0) rotate(0);opacity:.7}50%{transform:translateY(-20px) rotate(180deg);opacity:1}}@media (max-width: 768px){body{overflow-x:hidden}.app{height:100vh;overflow:hidden}.app-header{padding:.5rem 1rem;flex-shrink:0}.main-container{flex:1;min-height:0;overflow:hidden}.sidebar{height:160px;overflow:hidden}.problem-list-container{padding:.5rem}.problem-list{padding:.5rem 0;gap:.5rem}.problem-card{min-width:180px;padding:.75rem}.workspace{flex:1;overflow-y:auto;height:calc(100vh - 220px);-webkit-overflow-scrolling:touch;padding-bottom:4rem}.workspace-header{padding:.75rem;flex-shrink:0}.workspace-content{flex:1;overflow-y:auto;min-height:0;padding-bottom:3rem;margin-bottom:2rem}.editor-section{padding:.75rem;min-height:250px;margin-bottom:1.5rem}.output-section{padding:.75rem .75rem 4rem;flex-direction:column;gap:.75rem}.render-container{width:100%;padding:.75rem;margin-bottom:1rem}.image-comparison{padding:.75rem .75rem 3rem;margin-bottom:2rem}.success-modal{padding:1.5rem;margin:.5rem;width:calc(100% - 1rem);max-height:95vh}.success-message h2{font-size:1.75rem}.celebration-circle{width:90px;height:90px}.success-actions{flex-direction:column}.monaco-shader-editor{min-height:200px}.shader-renderer canvas{max-width:100%;height:auto}}.twitter-share-btn{background:linear-gradient(135deg,#1da1f2,#0d8bd9);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem;box-shadow:0 4px 15px #1da1f266;text-decoration:none;justify-content:center;width:100%;max-width:180px}.twitter-share-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #1da1f299;background:linear-gradient(135deg,#0d8bd9,#1da1f2)}.twitter-icon,.help-icon{width:18px;height:18px;fill:currentColor}.twitter-share-btn.help-button{background:linear-gradient(135deg,#ff6b6b,#ee5a52);box-shadow:0 4px 15px #ff6b6b66;animation:pulse-help 2s infinite}.twitter-share-btn.help-button:hover{background:linear-gradient(135deg,#ee5a52,#ff6b6b);box-shadow:0 6px 20px #ff6b6b99}@keyframes pulse-help{0%{box-shadow:0 4px 15px #ff6b6b66}50%{box-shadow:0 4px 20px #ff6b6bb3}to{box-shadow:0 4px 15px #ff6b6b66}}.share-section{margin-top:1rem;padding-top:1rem;border-top:1px solid #444;text-align:center}.success-modal .twitter-share-btn{margin-bottom:.5rem}.button-row{display:flex;gap:1rem;justify-content:center}.score-breakdown .twitter-share-btn{font-size:.85rem;padding:.5rem 1rem;max-width:140px}@media (max-width: 768px){.success-modal{padding:2rem 1.5rem;width:95%;max-width:95%}.success-comparison-image{max-width:100%}.download-type-selector{flex-direction:column;width:100%}.type-btn{width:100%}.success-actions{display:flex;flex-direction:column;align-items:center;gap:1rem}.button-row{flex-direction:column;width:100%;gap:.75rem}.button-row button{width:100%;max-width:200px}.twitter-share-btn{font-size:.9rem;padding:.6rem 1rem}.render-container{width:100%;max-width:400px}.shader-container{flex-direction:column}.shader-item{width:100%}.comparison-container{flex-direction:column;gap:1rem}.comparison-panel{width:100%}}@media (max-width: 480px){.app-header h1{font-size:1.25rem}.app-header p{font-size:.8rem}.sidebar{height:140px}.problem-card{min-width:160px;padding:.5rem}.problem-header h3{font-size:.9rem}.workspace{height:calc(100vh - 200px);padding-bottom:5rem}.workspace-header{padding:.5rem}.workspace-header h2{font-size:1.1rem}.workspace-buttons{gap:.25rem}.editor-section,.output-section{padding:.5rem;margin-bottom:2rem}.output-section{padding-bottom:5rem}.render-container,.image-comparison{padding:.5rem;margin-bottom:2rem}.image-comparison{padding-bottom:4rem}.success-modal{padding:1rem;margin:.25rem;width:calc(100% - .5rem)}.celebration-circle{width:70px;height:70px}.success-icon{width:35px;height:35px}.success-message h2{font-size:1.4rem}.twitter-share-btn{font-size:.8rem;padding:.4rem .6rem}.next-problem-btn,.close-btn{font-size:.85rem;padding:.5rem .75rem}.monaco-shader-editor{min-height:180px}.shader-renderer canvas{width:240px!important;height:240px!important;max-width:100%}.output-buttons{flex-direction:column;gap:.25rem}.download-btn{width:100%;font-size:.8rem;padding:.4rem .6rem}}.share-preview-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.share-preview-modal{background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border-radius:20px;padding:2rem;max-width:800px;width:90%;max-height:90vh;overflow-y:auto;border:2px solid #444;box-shadow:0 20px 60px #00000080}.share-preview-modal h3{color:#61dafb;margin-bottom:1rem;text-align:center}.share-instructions{color:#ccc;text-align:center;margin-bottom:2rem}.combined-image-container{text-align:center;margin-bottom:2rem}.combined-image{max-width:100%;height:auto;border-radius:10px;border:2px solid #333;margin-bottom:1rem;box-shadow:0 10px 30px #00000080}.download-btn{max-width:300px;padding:.75rem 2rem;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s ease;margin:0 auto;display:block}.download-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #4caf5066}.close-preview-btn{display:block;margin:0 auto;padding:.75rem 2rem;background:#333;color:#fff;border:1px solid #555;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s ease}.close-preview-btn:hover{background:#444;border-color:#666}@media (max-width: 768px){.share-preview-modal{padding:1.5rem;width:95%}.combined-image{border-width:1px}}