*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#fff;color:#111827;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.container{width:100vw;height:100vh;display:flex;flex-direction:column}header{text-align:center;padding:1.5rem 1rem 1rem;background:#fffffff2;border-bottom:1px solid #e5e7eb;z-index:10}h1{font-size:2.5rem;font-weight:700;letter-spacing:-.02em;color:#111827;margin-bottom:.25rem}.tagline{font-size:.9375rem;color:#6b7280;font-weight:400}main{flex:1;position:relative;overflow:hidden}#app{width:100%;height:100%;display:block}#app canvas{display:block}.controls{position:absolute;top:1rem;right:1rem;z-index:100}.control-panel{background:#fffffffa;border-radius:12px;padding:1.25rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;width:280px;max-height:calc(100vh - 200px);overflow-y:auto}.control-section{margin-bottom:1.25rem}.control-section:last-child{margin-bottom:0}.control-section label{display:block;font-size:.8125rem;font-weight:600;color:#374151;margin-bottom:.5rem}.control-section label span{float:right;color:#6b7280;font-weight:500}select{width:100%;padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem;font-family:inherit;color:#111827;background:#fff;cursor:pointer;transition:border-color .15s ease}select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}input[type=range]{width:100%;height:6px;border-radius:3px;background:#e5e7eb;outline:none;margin:.5rem 0;cursor:pointer;-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#3b82f6;cursor:pointer;transition:transform .15s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#3b82f6;cursor:pointer;border:none;transition:transform .15s ease}input[type=range]::-moz-range-thumb:hover{transform:scale(1.15)}.color-picker{display:flex;gap:.5rem}.color-btn{width:40px;height:40px;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:all .15s ease}.color-btn:hover{transform:scale(1.05)}.color-btn.active{border-color:#111827;box-shadow:0 0 0 2px #1118271a}.checkbox-label{display:flex;align-items:center;cursor:pointer;user-select:none}.checkbox-label input[type=checkbox]{width:18px;height:18px;margin-right:.5rem;cursor:pointer}.checkbox-label span{font-size:.875rem;font-weight:500;color:#374151}footer{text-align:center;padding:.75rem 1rem;background:#fffffff2;border-top:1px solid #e5e7eb;z-index:10}footer p{font-size:.8125rem;color:#6b7280}footer a{color:#2563eb;text-decoration:none;font-weight:500}footer a:hover{text-decoration:underline}.control-panel::-webkit-scrollbar{width:6px}.control-panel::-webkit-scrollbar-track{background:#f3f4f6;border-radius:3px}.control-panel::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.control-panel::-webkit-scrollbar-thumb:hover{background:#9ca3af}@media(max-width:768px){h1{font-size:2rem}.tagline{font-size:.875rem}header{padding:1rem 1rem .75rem}.controls{top:.5rem;right:.5rem;left:.5rem}.control-panel{width:100%;max-height:calc(100vh - 180px)}}@media(max-width:480px){h1{font-size:1.75rem}.control-panel{padding:1rem;max-height:calc(100vh - 160px)}footer p{font-size:.75rem}}