.dcg-generator{--dcg-radius:10px;--dcg-gap:1rem;display:flex;flex-direction:column;gap:var(--dcg-gap);}
.dcg-viewport{width:100%;min-height:240px;background:var(--surface-muted,#f8f9fa);border-radius:var(--dcg-radius);overflow:hidden;border:1px solid var(--border,#e9ecef);}
.dcg-viewport canvas{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain;}
.dcg-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0.75rem;padding:1rem;background:#fff;border-radius:var(--dcg-radius);border:1px solid var(--border,#e9ecef);}
.dcg-control{display:flex;flex-direction:column;gap:0.2rem;min-width:0;}
.dcg-control label{font-size:0.75rem;font-weight:600;color:var(--text-main,#1a1a1a);text-transform:uppercase;letter-spacing:0.02em;}
.dcg-value{font-size:0.8125rem;color:var(--text-muted,#666);}
.dcg-control input[type="range"]{width:100%;min-width:80px;height:6px;accent-color:#c2410c;}
.dcg-control input[type="color"]{width:100%;height:36px;padding:2px;border:1px solid var(--border,#e5e5e5);border-radius:6px;cursor:pointer;background:#fff;}
.dcg-control select{padding:0.4rem 0.6rem;font-size:0.875rem;border:1px solid var(--border,#e5e5e5);border-radius:6px;background:#fff;color:var(--text-main,#1a1a1a);min-width:100px;}
.dcg-toggle{padding:0.5rem 0.75rem;font-size:0.8125rem;font-weight:600;color:#c2410c;background:transparent;border:1px solid #c2410c;border-radius:6px;cursor:pointer;transition:background .2s,color .2s;}
.dcg-toggle:hover{background:#c2410c;color:#fff;}
.dcg-options{display:flex;flex-wrap:wrap;align-items:flex-end;gap:0.75rem;padding:0.75rem 1rem;background:var(--surface-muted,#f8f9fa);border-radius:var(--dcg-radius);border:1px solid var(--border,#e9ecef);}
.dcg-control-check{justify-content:flex-end;}
.dcg-check{display:inline-flex;align-items:center;gap:0.4rem;font-size:0.875rem;font-weight:500;cursor:pointer;color:var(--text-main,#1a1a1a);}
.dcg-check input{width:1rem;height:1rem;accent-color:#c2410c;}
.dcg-actions{display:flex;flex-wrap:wrap;gap:0.5rem;}
.dcg-btn{padding:0.6rem 1rem;font-size:0.875rem;font-weight:600;border-radius:8px;border:none;cursor:pointer;transition:background .2s,transform .05s;}
.dcg-btn:active{transform:scale(0.98);}
.dcg-btn-primary{background:#c2410c;color:#fff;}
.dcg-btn-primary:hover{background:#9a3412;}
.dcg-btn-secondary{background:#fff;color:var(--text-main,#1a1a1a);border:1px solid var(--border,#e0e0e0);}
.dcg-btn-secondary:hover{background:var(--surface-muted,#f5f5f5);}
.dcg-meta{display:flex;flex-wrap:wrap;gap:1rem;padding:0.75rem 0;font-size:0.8125rem;color:var(--text-muted,#555);border-top:1px solid var(--border,#eee);}
.dcg-meta-item strong{margin-right:0.25rem;color:var(--text-main,#1a1a1a);}
.dcg-edu{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border,#eee);}
.dcg-edu h2{font-size:1.2rem;font-weight:700;margin-bottom:0.5rem;color:var(--text-main,#1a1a1a);}
.dcg-edu h3{font-size:1rem;font-weight:600;margin-top:1rem;margin-bottom:0.35rem;color:var(--text-main,#1a1a1a);}
.dcg-edu p{margin:0 0 0.65rem;font-size:0.9375rem;line-height:1.55;color:var(--text-muted,#444);}
.dcg-edu code{font-size:0.875em;padding:0.15em 0.4em;background:var(--surface-muted,#f0f0f0);border-radius:4px;}
.dcg-edu var{font-style:normal;}
@media (min-width:480px){.dcg-bar .dcg-control{flex:1 1 140px;}.dcg-options .dcg-control{flex:1 1 120px;}}
@media (min-width:768px){.dcg-viewport{min-height:320px;}.dcg-viewport canvas{max-height:520px;}.dcg-bar{padding:1.25rem;}.dcg-options{padding:1rem 1.25rem;}}