/* =========================================================
   Visualization demos (v4) — surface · domain · iterates
   same skin as the rest of the site (style.css / demo.css)
   ========================================================= */
:root{
  color-scheme: dark;
  --bg:      #191919;
  --panel:   #1f1f1f;
  --well:    #141414;
  --line:    rgba(255,255,255,.13);
  --line-2:  rgba(255,255,255,.28);
  --txt:     #f2f2f2;
  --dim:     #b0b0b0;
  --faint:   #8a8a8a;
  --angle:   rgb(0,114,189);     /* conformal / angle  (as in the BEM paper figure) */
  --area:    rgb(217,83,25);     /* authalic  / area   */
  --probe:   #ffd27a;
  --f:       "Source Sans 3","Source Sans Pro","Noto Sans TC",Helvetica,Arial,sans-serif;
  --ease:    cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--txt);
  font-family:var(--f); font-weight:300; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:rgba(255,255,255,.85); color:#191919; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#191919; }
::-webkit-scrollbar-thumb{ background:#333; border-radius:9px; }
a{ color:inherit; }
button, select, input{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--txt); outline-offset:2px; }
sub, sup{ font-size:.72em; }
kbd{
  display:inline-block; min-width:1.5em; padding:0 .35em; font:inherit; font-size:.76em; line-height:1.5;
  text-align:center; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:3px; color:var(--dim);
}

/* ---------- standalone chrome (hidden inside the modal) ---------- */
.demo-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px,4vw,40px); border-bottom:1px solid var(--line);
}
.demo-top a{ color:var(--dim); text-decoration:none; font-size:.92rem; transition:color .25s; }
.demo-top a:hover{ color:#fff; }
.demo-top .kicker{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); }
html.embedded .demo-top{ display:none; }

/* ---------- shell ---------- */
.vz{
  width:100%; max-width:1180px; margin-inline:auto;
  padding:clamp(18px,2.6vw,30px) clamp(16px,4vw,40px) clamp(36px,5vw,56px);
  display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px);
}
html.embedded .vz{ padding-block:14px 26px; gap:14px; }
.vz-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 24px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.vz-kicker{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.vz-head h1{ margin:6px 0 4px; font-weight:300; letter-spacing:-.02em; font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.2; }
.vz-head p{ margin:0; color:var(--faint); font-size:.95rem; max-width:66ch; }
html.embedded .vz-head h1{ display:none; }
.vz-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.vz-tools label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.vz-select{
  padding:6px 30px 6px 10px; font-size:.88rem; color:var(--txt); background:var(--well); cursor:pointer;
  border:1px solid var(--line); border-radius:3px; appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px; background-repeat:no-repeat;
}
.vz-link{
  font-size:.84rem; color:var(--faint); text-decoration:none; border:1px solid var(--line);
  border-radius:3px; padding:5px 11px; transition:color .25s, border-color .25s, background .25s;
}
.vz-link:hover{ color:var(--txt); border-color:var(--line-2); background:#232323; }

/* ---------- the two panes ---------- */
.vz-stage{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(10px,1.4vw,16px); }
.vz-pane{ margin:0; display:flex; flex-direction:column; gap:8px; min-width:0; }
.vz-pane figcaption{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; min-height:20px; }
.vz-cap{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.vz-sub{ font-size:.82rem; color:var(--dim); font-variant-numeric:tabular-nums; text-align:right; }
.vz-view{
  position:relative; height:clamp(280px,46vh,470px); overflow:hidden;
  border:1px solid var(--line); border-radius:4px; touch-action:none;
  background:radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.045), rgba(255,255,255,0) 70%), var(--well);
}
html.embedded .vz-view{ height:clamp(240px,40vh,400px); }
.vz-view canvas{ display:block; width:100%; height:100%; cursor:grab; outline:none; }
.vz-view.dragging canvas{ cursor:grabbing; }
.vz-view.flat canvas{ cursor:crosshair; }
.vz-corner{ position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:2; }
.vz-mini{
  font-size:.76rem; color:var(--dim); cursor:pointer; padding:3px 9px; border-radius:3px;
  border:1px solid var(--line); background:rgba(20,20,20,.78); transition:color .2s, border-color .2s;
}
.vz-mini:hover{ color:var(--txt); border-color:var(--line-2); }
.vz-mini[aria-pressed="true"]{ color:var(--txt); border-color:var(--line-2); background:rgba(40,40,40,.9); }
.vz-tip{
  position:absolute; left:10px; bottom:8px; z-index:2; pointer-events:none;
  font-size:.76rem; color:var(--dim); font-variant-numeric:tabular-nums;
  padding:2px 7px; border-radius:3px; background:rgba(20,20,20,.72);
  opacity:0; transition:opacity .2s;
}
.vz-tip.on{ opacity:1; }
.vz-tip b{ color:var(--txt); font-weight:400; }
.vz-load{
  position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; gap:12px;
  background:rgba(20,20,20,.9); color:var(--faint); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  transition:opacity .35s;
}
.vz-load i{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); border-top-color:var(--dim); animation:vz-spin .9s linear infinite; }
.vz-load.off{ opacity:0; pointer-events:none; }
.vz-load.err{ color:#e07a7a; text-transform:none; letter-spacing:0; font-size:.9rem; padding:20px; text-align:center; }
.vz-load.err i{ display:none; }
@keyframes vz-spin{ to{ transform:rotate(360deg); } }

/* ---------- colouring bar ---------- */
.vz-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:-4px; }
.vz-seg{ display:inline-flex; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.vz-seg button{
  border:0; background:transparent; color:var(--faint); cursor:pointer;
  font-size:.84rem; padding:5px 12px; transition:color .2s, background .2s;
}
.vz-seg button + button{ border-left:1px solid var(--line); }
.vz-seg button:hover{ color:var(--txt); }
.vz-seg button[aria-pressed="true"]{ color:var(--txt); background:rgba(255,255,255,.08); }
.vz-legend{ flex:1 1 260px; display:flex; align-items:center; gap:9px; font-size:.74rem; color:var(--faint); min-width:220px; }
.vz-legend i{ flex:1; height:6px; border-radius:3px; background:linear-gradient(to right, rgb(25,70,180), rgb(50,210,230), rgb(255,230,80), rgb(210,50,45)); }
.vz-legend.two i{ background:linear-gradient(to right, var(--angle), #2a2e38 50%, var(--area)); }
.vz-legend.check i{ background:repeating-linear-gradient(to right, #dfe2ea 0 12px, #2a3143 12px 24px); opacity:.8; }
.vz-legend.plain i{ background:rgba(255,255,255,.12); }
.vz-hint{ font-size:.78rem; color:var(--faint); }
.vz-hint b{ color:var(--probe); font-weight:400; }

/* ---------- control panel ---------- */
.vz-panel{
  display:flex; flex-direction:column; gap:14px; padding:clamp(14px,2vw,20px);
  border:1px solid var(--line); border-radius:4px; background:var(--panel);
}
.vz-transport{ display:flex; align-items:center; gap:8px; }
.vz-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:34px; white-space:nowrap;
  padding:6px 12px; font-size:.86rem; color:var(--dim); background:transparent; cursor:pointer;
  border:1px solid var(--line); border-radius:3px; transition:color .2s, border-color .2s, background .2s;
}
.vz-btn:hover{ color:var(--txt); border-color:var(--line-2); }
.vz-btn svg{ width:10px; height:10px; }
.vz-btn.sq{ width:34px; padding:0; }
.vz-play{ color:#111; background:var(--txt); border-color:var(--txt); min-width:150px; }
.vz-play:hover{ color:#000; background:#fff; border-color:#fff; }
.vz-track{ position:relative; flex:1; min-width:0; padding:0 4px; }
.vz-track input{ width:100%; margin:0; display:block; }
.vz-ticks{ position:relative; height:15px; margin-top:2px; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.vz-ticks span{ position:absolute; top:0; white-space:nowrap; transform:translateX(-1px); }
.vz-ticks span::before{ content:""; position:absolute; left:0; top:-5px; width:1px; height:4px; background:var(--line-2); }
.vz-ticks span.end{ transform:translateX(-100%); }
.vz-ticks span.end::before{ left:auto; right:0; }

input[type="range"]{ -webkit-appearance:none; appearance:none; height:20px; background:transparent; cursor:pointer; }
input[type="range"]::-webkit-slider-runnable-track{ height:2px; border-radius:2px; background:linear-gradient(to right, var(--txt) var(--p,0%), rgba(255,255,255,.18) var(--p,0%)); }
input[type="range"]::-moz-range-track{ height:2px; background:rgba(255,255,255,.18); }
input[type="range"]::-moz-range-progress{ height:2px; background:var(--txt); }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; margin-top:-5.5px; border-radius:50%; background:var(--txt); transition:transform .2s; }
input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.18); }
input[type="range"]::-moz-range-thumb{ width:13px; height:13px; border:0; border-radius:50%; background:var(--txt); }

.vz-read{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px 16px; margin:0; }
.vz-read div{ min-width:0; padding-top:8px; border-top:1px solid var(--line); }
.vz-read dt{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vz-read dd{ margin:4px 0 0; font-size:1rem; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vz-read dd small{ font-size:.74rem; color:var(--faint); }
.vz-read .probe dt{ color:var(--probe); }

/* balance */
.vz-balance{ display:grid; grid-template-columns:minmax(260px,340px) minmax(0,1fr); gap:10px 26px; align-items:center; }
.vz-beam svg{ display:block; width:100%; height:auto; overflow:visible; }
.vz-beam .beam{ transition:transform .3s var(--ease); transform-origin:160px 40px; }
.vz-beam .pan{ transition:transform .3s var(--ease); }
.vz-beam text{ font-family:var(--f); font-size:11px; fill:var(--faint); letter-spacing:.04em; }
.vz-beam .v{ font-size:12.5px; fill:var(--txt); font-variant-numeric:tabular-nums; }
.vz-beam .lvl{ fill:rgb(50,210,230); opacity:0; transition:opacity .35s; font-size:10.5px; letter-spacing:.16em; }
.vz-beam.level .lvl{ opacity:1; }
.vz-lever{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.vz-lever .vz-track{ padding:0; }
.vz-lever-ends{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--faint); }
.vz-lever-ends b{ color:var(--txt); font-weight:400; font-variant-numeric:tabular-nums; }
.vz-notches{ position:relative; height:8px; margin:0 6px; }
.vz-notches i{ position:absolute; top:0; width:1px; height:5px; background:var(--line-2); }
.vz-notches i.star{ height:8px; width:2px; background:rgb(50,210,230); }
.vz-lever-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.vz-lever-row .vz-state{ font-size:.86rem; color:var(--dim); }

/* ---------- charts ---------- */
.vz-charts{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(10px,1.4vw,16px); }
.vz-charts.two{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.vz-chart{ margin:0; padding:12px 14px 10px; border:1px solid var(--line); border-radius:4px; background:var(--panel); min-width:0; }
.vz-chart h3{ display:flex; justify-content:space-between; gap:8px; margin:0 0 8px; font-weight:400; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.vz-chart h3 em{ font-style:normal; letter-spacing:0; text-transform:none; font-size:.8rem; color:var(--dim); font-variant-numeric:tabular-nums; }
.vz-chart canvas{ display:block; width:100%; height:136px; }
.vz-chart canvas.click{ cursor:pointer; }
.vz-chart figcaption{ margin-top:6px; font-size:.74rem; line-height:1.45; color:var(--faint); }
.vz-key{ display:inline-flex; align-items:center; gap:5px; margin-right:12px; }
.vz-key::before{ content:""; width:10px; height:2px; background:currentColor; display:inline-block; }
.vz-key.dash::before{ background:repeating-linear-gradient(to right, currentColor 0 3px, transparent 3px 5px); }
.vz-key.box::before{ height:8px; width:8px; border-radius:1px; }

.vz-note{ margin:0; padding-top:12px; border-top:1px solid var(--line); color:var(--faint); font-size:.82rem; line-height:1.6; }
.vz-note code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.84em; color:var(--dim); }
.vz-keys{ color:var(--faint); }

@media (max-width:860px){
  .vz-stage, .vz-charts, .vz-charts.two, .vz-balance{ grid-template-columns:1fr; }
  .vz-read{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .vz-view{ height:clamp(250px,42vh,380px); }
  .vz-play{ min-width:0; }
}
@media (max-width:480px){
  .vz-transport{ flex-wrap:wrap; }
  .vz-track{ flex-basis:100%; order:3; }
}
/* touch screens: vertical drags scroll the page, horizontal drags turn the model */
@media (pointer:coarse){ .vz-view{ touch-action:pan-y; } }
@media (prefers-reduced-motion:reduce){ *{ transition-duration:.001ms !important; animation-duration:.001ms !important; } }