.tool-hero{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;margin-bottom:1rem;}
.hero-text{flex:1;min-width:260px;}
.hero-text h1{font-size:40px;font-weight:700;line-height:1.2;margin-bottom:0;}
.hero-subtitle{font-size:18px;color:var(--text-muted);max-width:640px;margin-bottom:1rem;margin-top:0;}
@media (max-width:767px){.hero-text h1{font-size:clamp(1.75rem,5vw,2.5rem);}.hero-subtitle{font-size:clamp(1rem,3vw,1.125rem);}}
.jsg-app{margin-bottom:2rem;}
.jsg-card{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.08);border:1px solid var(--border,#e5e7eb);}
.jsg-side{flex:0 0 auto;padding:1.25rem;border-bottom:1px solid var(--border,#e2e8f0);}
.jsg-result{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.jsg-viewport{position:relative;width:100%;aspect-ratio:1;max-height:min(85vmin,480px);background:#0a0a0a;display:flex;align-items:center;justify-content:center;}
.jsg-viewport canvas{width:100%;height:100%;object-fit:contain;display:block;}
.jsg-stats{display:flex;flex-wrap:wrap;gap:0.5rem 1rem;padding:0.75rem 1rem;font-size:0.8125rem;color:var(--text-muted,#64748b);background:var(--surface-muted,#f8fafc);border-top:1px solid var(--border,#e2e8f0);}
.jsg-stat{white-space:nowrap;}
.jsg-presets{margin-bottom:1rem;}
.jsg-presets-label{display:block;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted,#64748b);margin-bottom:0.5rem;}
.jsg-presets-strip{display:flex;gap:0.5rem;overflow-x:auto;padding-bottom:0.25rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;flex-wrap: wrap;}
.jsg-presets-strip::-webkit-scrollbar{height:5px;}
.jsg-presets-strip::-webkit-scrollbar-track{background:var(--surface-muted,#f1f5f9);border-radius:3px;}
.jsg-presets-strip::-webkit-scrollbar-thumb{background:var(--border,#cbd5e1);border-radius:3px;}
.jsg-preset{flex:0 0 auto;padding:0.5rem 0.875rem;font-size:0.875rem;font-weight:500;color:var(--text-main,#334155);background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:999px;cursor:pointer;transition:color 0.2s,background 0.2s,border-color 0.2s;}
.jsg-preset:hover{background:var(--surface-muted,#f1f5f9);border-color:var(--text-muted,#cbd5e1);}
.jsg-actions{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.25rem;}
.jsg-btn{padding:0.65rem 1.1rem;font-size:0.9375rem;font-weight:500;border-radius:10px;cursor:pointer;transition:background 0.2s,color 0.2s,border-color 0.2s;border:1px solid transparent;}
.jsg-btn-primary{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.jsg-btn-primary:hover{background:var(--primary-dark,#1d4ed8);border-color:var(--primary-dark,#1d4ed8);}
.jsg-btn-secondary{background:#fff;color:var(--text-main,#334155);border-color:var(--border,#e2e8f0);}
.jsg-btn-secondary:hover{background:var(--surface-muted,#f1f5f9);border-color:var(--text-muted,#cbd5e1);}
.jsg-params{border-top:1px solid var(--border,#e2e8f0);padding-top:1rem;}
.jsg-params-heading{font-weight:600;font-size:0.9375rem;color:var(--text-main,#334155);margin-bottom:0.75rem;}
.jsg-params-inner{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem 1rem;}
.jsg-field{display:flex;flex-direction:column;gap:0.25rem;}
.jsg-field-full{grid-column:1/-1;}
.jsg-field label{font-size:0.8125rem;font-weight:500;color:var(--text-muted,#64748b);}
.jsg-field input,.jsg-field select{width:100%;padding:0.5rem 0.75rem;font-size:0.9375rem;color:var(--text-main,#334155);background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:8px;transition:border-color 0.2s;}
.jsg-field input:focus,.jsg-field select:focus{outline:0;border-color:var(--primary,#2563eb);box-shadow:0 0 0 2px rgba(37,99,235,0.15);}
.jsg-edu{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border,#e2e8f0);}
.jsg-edu-title{font-size:1.25rem;font-weight:700;color:var(--text-main,#1e293b);margin:0 0 0.5rem;}
.jsg-edu-sub{font-size:1.0625rem;font-weight:600;color:var(--text-main,#334155);margin:1rem 0 0.35rem;}
.jsg-edu p{font-size:0.9375rem;line-height:1.55;color:var(--text-muted,#64748b);margin:0;}
@media (min-width:768px){.jsg-card{flex-direction:row;}.jsg-side{width:280px;min-width:280px;border-bottom:none;border-right:1px solid var(--border,#e2e8f0);padding:1.5rem;}.jsg-result{min-height:400px;}.jsg-viewport{max-height:520px;aspect-ratio:1;}}
@media (min-width:992px){.jsg-side{width:320px;min-width:320px;padding:1.75rem;}.jsg-params-inner{grid-template-columns:1fr;}}