.dbv-shell {
  margin: 2.5rem 0;
  padding: 1.25rem;
  border: 1px solid rgba(40, 45, 40, 0.14);
  border-radius: 22px;
  background: radial-gradient(circle at 20% 0%, rgba(180, 190, 175, 0.25), transparent 34%), linear-gradient(135deg, #f6f7f2 0%, #e4e7df 100%);
  color: #1d231d;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
}
.dbv-header { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.dbv-kicker { margin: 0 0 0.25rem; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.76rem; color: #536050; font-weight: 700; }
.dbv-header h3 { margin: 0 0 0.35rem; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.1; color: #111711; }
.dbv-header p { margin: 0; max-width: 850px; color: #384138; line-height: 1.55; }
.dbv-grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.dbv-panel { border: 1px solid rgba(30, 35, 30, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.68); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); }
.dbv-controls { padding: 1rem; }
.dbv-controls label { display: grid; gap: 0.4rem; margin-bottom: 1rem; font-size: 0.95rem; color: #202820; font-weight: 700; }
.dbv-controls label span { display: block; }
.dbv-controls select, .dbv-controls input[type="range"] { width: 100%; }
.dbv-controls select { appearance: none; border: 1px solid rgba(30, 35, 30, 0.22); border-radius: 12px; padding: 0.65rem 0.75rem; background: #ffffff; color: #172017; font: inherit; }
.dbv-controls input[type="range"] { accent-color: #49654a; }
.dbv-controls output { color: #49654a; font-weight: 800; }
.dbv-readout { display: grid; gap: 0.55rem; margin-top: 1rem; }
.dbv-readout div { padding: 0.72rem; border-radius: 14px; background: rgba(245, 247, 242, 0.9); border: 1px solid rgba(30, 35, 30, 0.08); }
.dbv-readout span { display: block; margin-bottom: 0.15rem; color: #5a6659; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; }
.dbv-readout strong { display: block; color: #121812; font-size: 0.98rem; line-height: 1.25; overflow-wrap: anywhere; }
.dbv-stage { overflow: hidden; padding: 0.75rem; }
.dbv-stage canvas { display: block; width: 100%; height: auto; border-radius: 15px; background: #eef0eb; }
.dbv-caption { margin-top: 0.65rem; color: #384238; font-size: 0.92rem; line-height: 1.45; }
.dbv-note { margin-top: 1rem; padding: 0.9rem 1rem; border-left: 4px solid #49654a; border-radius: 14px; background: rgba(255, 255, 255, 0.72); }
.dbv-note p { margin: 0; line-height: 1.55; color: #303930; }
@media (max-width: 820px) {
  .dbv-shell { padding: 1rem; border-radius: 18px; }
  .dbv-grid { grid-template-columns: 1fr; }
  .dbv-stage { order: -1; }
}