.vpe-app {
  --vpe-panel: min(440px, 92vw);
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 680px;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f2eee7;
  background: radial-gradient(circle at 54% 34%, #292723 0, #111 38%, #050505 75%);
  font-synthesis: none;
  isolation: isolate;
}
.vpe-app, .vpe-app * { box-sizing: border-box; }
.vpe-app #escena { display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
.vpe-app #escena.esculpir { cursor:crosshair; }
.vpe-app #escena.gesto { cursor:none; }
.vpe-app .panel {
  position:absolute; z-index:20; top:0; left:0;
  width:var(--vpe-panel); max-height:calc(100% - 48px); overflow-y:auto;
  margin:24px; padding:22px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(7,7,7,.78); backdrop-filter:blur(14px);
  box-shadow:0 18px 60px rgba(0,0,0,.38);
}
.vpe-app .kicker { margin:0 0 10px; font-size:11px; letter-spacing:.18em; opacity:.6; }
.vpe-app h1 { margin:0 0 14px; color:#f2eee7; font-family:Georgia,"Times New Roman",serif; font-size:clamp(32px,5vw,58px); line-height:.94; font-weight:500; }
.vpe-app p { margin:0; color:rgba(242,238,231,.78); line-height:1.55; }
.vpe-app .modos, .vpe-app .familias { display:grid; gap:8px; margin-top:14px; }
.vpe-app .modos { grid-template-columns:1fr 1fr; }
.vpe-app button { appearance:none; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:rgba(242,238,231,.88); cursor:pointer; font:inherit; border-radius:0; }
.vpe-app .modos button, .vpe-app .familia, .vpe-app #reiniciar { padding:12px 14px; font-size:11px; letter-spacing:.12em; font-weight:700; }
.vpe-app .modos button.activo { background:#e4c7a1; color:#17120e; border-color:#e4c7a1; }
.vpe-app .estado, .vpe-app .memoria, .vpe-app .rgbEstado { margin-top:16px; padding:12px 14px; border-left:2px solid #e4c7a1; background:rgba(255,255,255,.06); font-size:13px; }
.vpe-app .subtitulo { margin-top:18px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.58; }
.vpe-app .familia { text-align:left; width:100%; }
.vpe-app .familia strong, .vpe-app .familia span { display:block; }
.vpe-app .familia strong { font-size:14px; letter-spacing:0; }
.vpe-app .familia span { margin-top:4px; font-size:12px; opacity:.72; line-height:1.35; letter-spacing:0; font-weight:400; }
.vpe-app .familia.activa { border-color:#e4c7a1; background:rgba(228,199,161,.12); }
.vpe-app .familia em { display:block; margin-bottom:5px; font-style:normal; font-size:9px; letter-spacing:.16em; opacity:.46; }
.vpe-app .familias-m01 { grid-template-columns:1fr 1fr; }
.vpe-app .codigo { margin-top:16px; padding:14px; border:1px solid rgba(255,255,255,.11); background:rgba(0,0,0,.42); }
.vpe-app .codigo span, .vpe-app .codigo small { display:block; }
.vpe-app .codigo span { font-size:10px; letter-spacing:.13em; opacity:.62; }
.vpe-app .codigo code { display:block; margin:10px 0; color:#f0c5ad; font-size:12px; overflow-wrap:anywhere; background:transparent; padding:0; }
.vpe-app .codigo small { color:rgba(242,238,231,.58); }
.vpe-app .lecturas { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.vpe-app .lecturas div { padding:12px 10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.vpe-app .lecturas span { display:block; font-size:10px; opacity:.6; letter-spacing:.1em; text-transform:uppercase; }
.vpe-app .lecturas strong { display:block; margin-top:6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.vpe-app .memoria, .vpe-app .rgbEstado { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.vpe-app .memoria strong, .vpe-app .rgbEstado strong { font-family:Georgia,"Times New Roman",serif; font-size:24px; font-weight:500; text-align:right; }
.vpe-app .diagnostico { margin-top:12px; padding:12px 14px; min-height:90px; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.08); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:rgba(242,238,231,.72); white-space:pre-wrap; line-height:1.45; }
.vpe-app #reiniciar.secundario { margin-top:14px; width:100%; background:transparent; color:rgba(242,238,231,.72); border-color:rgba(255,255,255,.18); }
.vpe-app .nota { margin-top:16px; font-size:12px; opacity:.62; }
.vpe-app .firma { position:absolute; right:26px; bottom:22px; z-index:10; font-size:11px; letter-spacing:.15em; opacity:.55; }

.vpe-app .mobile-panel-head { display:none; }
@media (max-width:650px) {
  .vpe-app {
    height:100svh; min-height:100svh; width:100vw;
    margin-left:calc(50% - 50vw);
  }
  .vpe-app #escena { position:absolute; inset:0; width:100%; height:100%; }
  .vpe-app .panel {
    top:auto; bottom:0; left:0;
    width:100%; max-height:46svh;
    margin:0; padding:0 16px 18px;
    overflow-y:auto; overscroll-behavior:contain;
    border-left:0; border-right:0; border-bottom:0;
    border-top:1px solid rgba(255,255,255,.2);
    background:rgba(7,7,7,.88);
    box-shadow:0 -18px 50px rgba(0,0,0,.42);
    backdrop-filter:blur(16px);
    transition:max-height .28s ease;
  }
  .vpe-app .mobile-panel-head {
    position:sticky; top:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    margin:0 -16px 12px; padding:11px 16px 10px;
    background:rgba(7,7,7,.96);
    border-bottom:1px solid rgba(255,255,255,.1);
    font-size:10px; letter-spacing:.14em;
  }
  .vpe-app .panel-movil-toggle {
    padding:7px 10px; min-width:82px;
    border-color:#e4c7a1; color:#17120e; background:#e4c7a1;
    font-size:9px; letter-spacing:.12em; font-weight:800;
  }
  .vpe-app .panel.is-collapsed { max-height:52px; overflow:hidden; padding-bottom:0; }
  .vpe-app .panel.is-collapsed > :not(.mobile-panel-head) { display:none !important; }
  .vpe-app .kicker { margin-top:2px; font-size:9px; }
  .vpe-app h1 { font-size:34px; margin-bottom:10px; }
  .vpe-app p { font-size:13px; line-height:1.45; }
  .vpe-app .modos { grid-template-columns:1fr 1fr; gap:7px; }
  .vpe-app .modos button { padding:10px 9px; font-size:9px; }
  .vpe-app .estado { margin-top:10px; padding:10px 11px; font-size:11px; }
  .vpe-app .subtitulo { margin-top:12px; }
  .vpe-app .familias-m01 { grid-template-columns:1fr 1fr; gap:7px; }
  .vpe-app .familia { padding:10px 10px; }
  .vpe-app .familia strong { font-size:12px; }
  .vpe-app .familia span { font-size:10px; }
  .vpe-app .codigo { padding:10px; margin-top:10px; }
  .vpe-app .lecturas { grid-template-columns:repeat(3,1fr); gap:5px; }
  .vpe-app .lecturas div { padding:8px 6px; }
  .vpe-app .lecturas span { font-size:8px; }
  .vpe-app .lecturas strong { font-size:10px; }
  .vpe-app .memoria, .vpe-app .rgbEstado { margin-top:8px; padding:9px 10px; font-size:11px; }
  .vpe-app .memoria strong, .vpe-app .rgbEstado strong { font-size:18px; }
  .vpe-app .diagnostico { min-height:64px; font-size:10px; padding:9px 10px; }
  .vpe-app .nota { font-size:10px; }
  .vpe-app .firma { right:12px; top:12px; bottom:auto; font-size:9px; }
}