:root{--ks-bg:#0a0a12;--ks-text:#e2e8f0;--ks-text-muted:#94a3b8;--ks-control-bg:#0a0a12e0;--ks-control-border:#94a3b81f;--ks-btn-bg:#94a3b81a;--ks-btn-hover:#94a3b833;--ks-btn-active:#6366f140;--ks-primary:#6366f1;--ks-primary-rgb:99, 102, 241;--ks-danger:#ef4444;--ks-accent:#6366f199;--ks-radius:10px;--ks-radius-sm:6px}._ks-container{width:100%;min-height:100vh;background:var(--ks-bg);cursor:crosshair;overscroll-behavior:contain;touch-action:none;min-height:100dvh;position:relative;overflow:hidden}._ks-canvas{z-index:1;touch-action:none;width:100%;height:100%;display:block;position:absolute;top:0;left:0}@media (max-width:768px){._ks-container{min-height:100dvh}}._ks-controls{z-index:10;background:var(--ks-control-bg);-webkit-backdrop-filter:blur(16px);border-style:solid;border-width:1px;border-color:var(--ks-control-border);border-radius:var(--ks-radius);width:260px;color:var(--ks-text);-webkit-user-select:none;user-select:none;touch-action:manipulation;font-size:.8125rem;position:absolute;top:16px;left:16px;box-shadow:0 8px 32px #0006}._ks-controls-header{cursor:pointer;-webkit-tap-highlight-color:transparent;justify-content:space-between;align-items:center;min-height:44px;padding:12px 14px;display:flex}._ks-controls-header:hover{opacity:.85}._ks-controls-title{letter-spacing:.02em;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;display:flex}._ks-controls-title svg{opacity:.7;width:14px;height:14px}._ks-controls-chevron{opacity:.5;transition:opacity .2s;display:flex}._ks-controls-chevron svg{width:12px;height:12px}._ks-controls-body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;flex-direction:column;gap:12px;max-height:500px;padding:0 14px 14px;transition:max-height .3s,padding .3s,opacity .2s;display:flex;overflow-y:auto}._ks-controls-body--collapsed{opacity:0;max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}._ks-control-group{flex-direction:column;gap:6px;display:flex}._ks-control-row{flex-direction:row;justify-content:space-between;align-items:center}._ks-control-label{color:var(--ks-text-muted);text-transform:uppercase;letter-spacing:.05em;justify-content:space-between;align-items:center;font-size:.75rem;font-weight:500;display:flex}._ks-control-value{color:var(--ks-text);font-variant-numeric:tabular-nums;font-weight:600}._ks-symmetry-btns{gap:4px;display:flex}._ks-sym-btn{background:var(--ks-btn-bg);border-radius:var(--ks-radius-sm);min-height:32px;color:var(--ks-text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;border:1px solid #0000;flex:1;padding:6px 0;font-size:.75rem;font-weight:600;transition:background .15s,color .15s,border-color .15s}._ks-sym-btn:hover{background:var(--ks-btn-hover);color:var(--ks-text)}._ks-sym-btn--active{background:var(--ks-btn-active);border-color:rgba(var(--ks-primary-rgb), .4);color:var(--ks-text)}._ks-palette-btns{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}._ks-palette-btn{background:var(--ks-btn-bg);border-radius:var(--ks-radius-sm);cursor:pointer;-webkit-tap-highlight-color:transparent;border:1px solid #0000;justify-content:center;align-items:center;min-height:32px;padding:8px 6px;transition:background .15s,border-color .15s;display:flex}._ks-palette-btn:hover{background:var(--ks-btn-hover)}._ks-palette-btn--active{background:var(--ks-btn-active);border-color:rgba(var(--ks-primary-rgb), .4)}._ks-palette-preview{gap:3px;display:flex}._ks-palette-dot{border-radius:50%;width:12px;height:12px;display:block}._ks-range{-webkit-appearance:none;appearance:none;background:var(--ks-btn-bg);cursor:pointer;touch-action:pan-y;border:0 solid #0000;border-radius:2px;outline:none;width:100%;height:4px}._ks-range::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ks-primary);cursor:pointer;width:18px;height:18px;box-shadow:0 0 6px rgba(var(--ks-primary-rgb), .4);border-radius:50%}._ks-range::-moz-range-thumb{background:var(--ks-primary);cursor:pointer;width:18px;height:18px;box-shadow:0 0 6px rgba(var(--ks-primary-rgb), .4);border:0 solid #0000;border-radius:50%}._ks-toggle-btn{border-radius:var(--ks-radius-sm);border-style:solid;border-width:1px;border-color:var(--ks-control-border);background:var(--ks-btn-bg);min-height:28px;color:var(--ks-text-muted);cursor:pointer;-webkit-tap-highlight-color:transparent;text-transform:uppercase;letter-spacing:.05em;padding:5px 14px;font-size:.6875rem;font-weight:600;transition:background .15s,color .15s}._ks-toggle-btn--active{background:rgba(var(--ks-primary-rgb), .2);border-color:rgba(var(--ks-primary-rgb), .4);color:var(--ks-text)}._ks-actions{z-index:10;background:var(--ks-control-bg);-webkit-backdrop-filter:blur(16px);border-style:solid;border-width:1px;border-color:var(--ks-control-border);touch-action:manipulation;border-radius:40px;gap:8px;padding:6px 10px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 32px #0006}._ks-action-btn{background:var(--ks-btn-bg);width:44px;height:44px;color:var(--ks-text);cursor:pointer;-webkit-tap-highlight-color:transparent;border:0 solid #0000;border-radius:50%;justify-content:center;align-items:center;transition:background .15s,color .15s;display:flex}._ks-action-btn svg{width:14px;height:14px}._ks-action-btn:hover{background:var(--ks-btn-hover)}._ks-action-btn--active{background:rgba(var(--ks-primary-rgb), .25);color:#a5b4fc}._ks-action-btn--danger:hover{color:#fca5a5;background:#ef444433}._ks-hint{z-index:10;-webkit-backdrop-filter:blur(8px);max-width:calc(100% - 32px);color:var(--ks-text-muted);text-align:center;pointer-events:none;opacity:1;background:#00000080;border-radius:20px;padding:6px 16px;font-size:.75rem;transition:opacity .5s;position:absolute;bottom:88px;left:50%;transform:translate(-50%)}._ks-hint--hidden{opacity:0}@media (max-width:768px){._ks-controls{flex-direction:column;width:auto;max-height:calc(100% - 90px);display:flex;top:10px;left:10px;right:10px}._ks-controls-body{max-height:70vh}._ks-actions{gap:6px;padding:5px 8px;bottom:16px}._ks-action-btn{width:44px;height:44px}._ks-hint{padding:5px 12px;font-size:.6875rem;bottom:76px}}@media (max-width:380px){._ks-symmetry-btns{flex-wrap:wrap}._ks-sym-btn{flex:1 0 18%}}
