.ksg-tool{--ksg-radius:12px;--ksg-gap:1rem;display:flex;flex-direction:column;gap:var(--ksg-gap);}
.ksg-card{width:100%;background:#fff;border-radius:var(--ksg-radius);box-shadow:0 2px 12px rgba(0,0,0,.08);border:1px solid var(--border,#eee);overflow:hidden;}
.ksg-card-inner{display:flex;flex-direction:column;min-height:0;}
.ksg-panel-left{display:flex;flex-direction:column;gap:var(--ksg-gap);padding:1.25rem;}
.ksg-panel-right{display:flex;align-items:center;justify-content:center;min-height:280px;padding:1.25rem;background:var(--surface-muted,#fafafa);}
.ksg-canvas-zone{width:100%;max-width:100%;}
.ksg-canvas-inner{position:relative;width:100%;max-width:480px;margin:0 auto;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.06);}
.ksg-canvas-inner canvas{display:block;width:100%;height:auto;object-fit:contain;}
.ksg-controls{display:flex;flex-direction:column;gap:0.75rem;}
.ksg-control{display:flex;flex-direction:column;gap:0.25rem;}
.ksg-control label{font-size:0.8125rem;font-weight:600;color:var(--text-main,#1a1a1a);}
.ksg-value{font-weight:400;color:var(--text-muted,#666);}
.ksg-control input[type="range"]{width:100%;height:6px;accent-color:var(--primary,#5e35b1);}
.ksg-control select{width:100%;padding:0.5rem 0.75rem;font-size:0.875rem;border:1px solid var(--border,#e5e5e5);border-radius:6px;background:#fff;color:var(--text-main,#1a1a1a);}
.ksg-control-row{flex-basis:auto;}
.ksg-check{display:inline-flex;align-items:center;gap:0.5rem;font-weight:500;cursor:pointer;}
.ksg-check input{width:1.125rem;height:1.125rem;accent-color:var(--primary,#5e35b1);}
.ksg-actions{display:flex;flex-wrap:wrap;gap:0.5rem;}
.ksg-btn{padding:0.625rem 1rem;font-size:0.875rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:background .2s,transform .1s;}
.ksg-btn:active{transform:scale(0.98);}
.ksg-btn-primary{background:var(--primary,#5e35b1);color:#fff;}
.ksg-btn-primary:hover{background:var(--primary-dark,#4527a0);}
.ksg-btn-secondary{background:var(--surface-muted,#f0f0f0);color:var(--text-main,#1a1a1a);border:1px solid var(--border,#e0e0e0);}
.ksg-btn-secondary:hover{background:var(--border,#e5e5e5);}
.ksg-stats{display:flex;flex-wrap:wrap;gap:0.75rem;padding:0.75rem 0;border-top:1px solid var(--border,#eee);}
.ksg-stat{font-size:0.8125rem;color:var(--text-muted,#555);}
.ksg-stat strong{color:var(--text-main,#1a1a1a);margin-right:0.25rem;}
.ksg-edu{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border,#eee);}
.ksg-edu h2{font-size:1.25rem;font-weight:700;margin-bottom:0.5rem;color:var(--text-main,#1a1a1a);}
.ksg-edu h3{font-size:1rem;font-weight:600;margin-top:1rem;margin-bottom:0.375rem;color:var(--text-main,#1a1a1a);}
.ksg-edu p{margin:0 0 0.75rem;font-size:0.9375rem;line-height:1.5;color:var(--text-muted,#444);}
.ksg-edu ol{margin:0 0 0.75rem;padding-left:1.25rem;}
.ksg-edu li{margin-bottom:0.25rem;font-size:0.9375rem;color:var(--text-muted,#444);}
.ksg-edu var, .ksg-edu sup{font-style:normal;}
@media (min-width:768px){.ksg-card-inner{flex-direction:row;}.ksg-panel-left{width:280px;min-width:280px;flex-shrink:0;padding:1.5rem;border-right:1px solid var(--border,#eee);}.ksg-panel-right{flex:1;min-height:400px;padding:1.5rem;}.ksg-canvas-inner{max-width:100%;}}