:root{--bg-dark: #0c0d12;--bg-card: rgba(18, 20, 29, .85);--border-color: rgba(255, 255, 255, .12);--text-main: #f0f2f8;--text-muted: #8a91b4;--accent-yellow: #ffe500;--accent-blue: #3b82f6;--accent-danger: #ef4444;--accent-warning: #f59e0b;--panel-width: 320px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Instrument Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-dark);color:var(--text-main);overflow-x:hidden;overflow-y:auto;min-height:100vh;width:100vw;-webkit-user-select:none;user-select:none}#app{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column}#viewport-container{flex:1;position:relative;width:100%;min-width:320px;min-height:350px;background-color:#f1f5f9;overflow:hidden}#touchplate-div{position:relative;width:100%;padding:24px 28px;font-family:Instrument Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.6;background-color:#0f172a;color:#f1f5f9;-webkit-user-select:text;user-select:text}#touchplate-div p{font-size:16px;line-height:1.6;margin-bottom:12px}#touchplate-div p:last-child{margin-bottom:0}#touchplate-div a,#touchplate-div a:link,#touchplate-div a:visited,#touchplate-div a:active{color:var(--link-color, #ff3b30);text-decoration:none;font-weight:400;transition:opacity .2s ease}#touchplate-div a:hover{opacity:.8}#touchplate-div canvas{display:none}#svg-viewport{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}#svg-viewport svg{width:100%;height:100%;display:block}#loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0c0d12eb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:100;transition:opacity .4s ease}.spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--text-main);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:13px;font-family:JetBrains Mono,monospace;color:var(--text-muted)}.control-panel{position:absolute;top:20px;right:24px;width:var(--panel-width);background:var(--bg-card);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:14px;z-index:20;box-shadow:0 20px 40px #0000004d;max-height:calc(100vh - 90px);overflow-y:auto;transition:padding .25s ease,gap .25s ease}.inline-controls-row{display:flex;align-items:center;gap:6px;width:100%}.inline-controls-row input[type=text]{flex:1;min-width:0;background:#0006;border:1px solid var(--border-color);border-radius:8px;padding:8px 12px;color:var(--text-main);font-size:13px;font-family:Instrument Sans,sans-serif;font-weight:600;outline:none;transition:border-color .2s ease}.inline-controls-row input[type=text]:focus{border-color:#fff6}.icon-btn{width:34px;height:34px;min-width:34px;display:flex;align-items:center;justify-content:center;background:#ffffff14;border:1px solid var(--border-color);border-radius:8px;color:var(--text-main);font-size:14px;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn:hover{background:#ffffff2e;border-color:#ffffff59}.rain-btn.active{background:#3b82f666;border-color:#60a5fa}.clear-btn:hover{background:#ef444440;border-color:#ef444466}.hamburger-btn{width:34px;height:34px;min-width:34px;display:flex;align-items:center;justify-content:center;background:#ffffff1f;border:1px solid var(--border-color);border-radius:8px;color:var(--text-main);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;padding:0}.hamburger-btn:hover,.hamburger-btn.active{background:#ffffff3d;border-color:#ffffff73}.collapsible-content{display:flex;flex-direction:column;gap:14px;max-height:1200px;opacity:1;overflow:hidden;padding-bottom:6px;transition:max-height .3s cubic-bezier(.4,0,.2,1),opacity .2s ease}.control-panel.collapsed{padding:8px;gap:0}.control-panel.collapsed .collapsible-content{max-height:0!important;opacity:0!important;margin:0!important;padding:0!important;pointer-events:none!important}.panel-section{display:flex;flex-direction:column;gap:8px}.section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-family:JetBrains Mono,monospace}.color-picker-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.color-picker-item{display:flex;flex-direction:column;gap:4px}.color-picker-item label{font-size:11px;color:var(--text-muted)}.color-input-wrapper{display:flex;align-items:center;gap:8px;background:#0000004d;border:1px solid var(--border-color);border-radius:8px;padding:4px 8px}.color-input-wrapper input[type=color]{-webkit-appearance:none;border:none;width:24px;height:24px;border-radius:4px;cursor:pointer;background:none}.color-input-wrapper input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-input-wrapper input[type=color]::-webkit-color-swatch{border:1px solid rgba(255,255,255,.2);border-radius:4px}.color-hex{font-size:11px;font-family:JetBrains Mono,monospace;color:var(--text-main)}.theme-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}.preset-btn{background:#ffffff0d;border:1px solid var(--border-color);color:var(--text-muted);font-size:10px;padding:6px;border-radius:6px;cursor:pointer;transition:all .2s ease}.preset-btn:hover{background:#ffffff1a;color:var(--text-main)}.preset-btn.active{border-color:#fff6;color:var(--text-main);background:#ffffff26}.select-input{background:#0006;border:1px solid var(--border-color);border-radius:8px;padding:8px 12px;color:var(--text-main);font-size:12px;outline:none;cursor:pointer}.checkbox-grid{display:flex;flex-direction:column;gap:6px}.checkbox-label{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-main);cursor:pointer}.checkbox-label input[type=checkbox]{accent-color:var(--text-main);cursor:pointer}.slider-row{display:flex;flex-direction:column;gap:4px}.slider-header{display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);font-family:JetBrains Mono,monospace}input[type=range]{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:#ffffff26;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text-main);cursor:pointer;transition:transform .1s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}