/* Inline code drawings share the existing typography, theme and card footprint. */
.term-card .code-diagram,.code-diagram.full{padding:0;overflow:hidden;position:relative;isolation:isolate}
.term-card .code-diagram{aspect-ratio:16/9}
.term-card .code-diagram,.code-diagram.full{
  --color-bg:var(--preview-panel);
  --color-border:var(--preview-border);
  --color-accent-soft:var(--preview-soft);
  background:var(--preview-bg);border:1px solid var(--preview-line);
  border-radius:var(--preview-stage-radius);color:var(--preview-text)
}
.code-diagram.full{width:100%;height:auto;min-height:0;max-height:420px;aspect-ratio:16/9}
.term-visual-svg{display:block;width:100%;height:100%;max-width:none;overflow:hidden;font-family:var(--font-body);font-size:12px;stroke-width:1;color:var(--color-text)}
.term-visual-svg .v-ink{fill:var(--preview-text)}
.term-visual-svg .v-muted{fill:var(--preview-shape)}
.term-visual-svg .v-accent{fill:var(--color-accent)}
.term-visual-svg .v-soft{fill:var(--color-accent-soft)}
.term-visual-svg .v-surface{fill:var(--color-bg)}
.term-visual-svg .v-stroke{stroke:var(--color-border)}
.term-visual-svg .v-line{stroke:var(--color-accent);fill:none}
.term-visual-svg .v-text{font-size:11px;fill:var(--preview-text)}
.term-visual-svg .v-small{font-size:9px;fill:var(--preview-muted)}
.code-diagram .term-visual-svg{shape-rendering:geometricPrecision;text-rendering:optimizeLegibility}
.code-diagram .term-visual-svg text{letter-spacing:0}
.code-diagram .term-visual-svg text[font-family="system-ui,sans-serif"]{font-family:var(--font-body)}
.code-diagram .term-visual-svg text.v-muted,.code-diagram .term-visual-svg text.v-small{fill:var(--preview-muted)}
.code-diagram .term-visual-svg text.v-text{fill:var(--preview-text)}
.code-diagram .term-visual-svg :is(text.v-text,text.kv-white){font-size:11px}
.code-diagram .term-visual-svg text.v-small{font-size:9px}
.code-diagram .term-visual-svg .v-ink{fill:var(--preview-text)}
.code-diagram .term-visual-svg text.mv-on-accent{fill:var(--color-on-accent)}
.code-diagram .term-visual-svg .mv-ui-title{fill:var(--preview-text);font-size:13px;font-weight:600}
.code-diagram .term-visual-svg :is(rect,circle,ellipse,polygon,path).v-muted{fill:var(--preview-shape)}
.code-diagram .term-visual-svg rect.v-surface.v-stroke{
  filter:drop-shadow(0 2px 3px color-mix(in srgb,var(--preview-text) 4%,transparent))
}
.polished-ui-visual .p-panel{fill:var(--preview-panel);stroke:var(--preview-border);stroke-width:1}
.polished-ui-visual .p-rule{fill:none;stroke:var(--preview-line);stroke-width:1}
.polished-ui-visual .p-accent-line{fill:none;stroke:var(--color-on-accent);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.polished-ui-visual .p-on-accent{fill:var(--color-on-accent)}
.polished-ui-visual .p-title{fill:var(--preview-text);font-weight:600}
.polished-ui-visual .p-caption{fill:var(--preview-muted)}
/* The four HTML before/after teaching demos use the same canvas and panel. */
.interactive-demo .demo-stage .diagram{
  --color-bg:var(--preview-panel);--color-border:var(--preview-border);
  --color-muted:var(--preview-muted);
  background:var(--preview-bg);color:var(--preview-text)
}
.interactive-demo .demo-stage .diagram.full{height:auto;min-height:300px}
.demo-stage :is(.example-copy,.example-form,.contrast-copy,.alignment-example){
  width:100%;max-width:400px;padding:24px;
  background:var(--preview-panel);border:1px solid var(--preview-border);
  border-radius:var(--preview-radius);box-shadow:var(--preview-shadow)
}
.motion-control{pointer-events:auto;position:absolute;z-index:2;top:12px;right:12px;display:flex;align-items:center;justify-content:center;gap:4px;min-width:58px;min-height:30px;padding:4px 8px;border:1px solid var(--color-border);border-radius:7px;background:var(--color-bg);color:var(--color-secondary);font-size:11px;line-height:1.4;box-shadow:0 1px 3px var(--color-shadow)}
.motion-control svg{width:12px;height:12px}
.motion-control:hover{color:var(--color-accent);border-color:var(--color-accent)}
.motion-control:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.motion-card-control{position:absolute;top:25px;right:64px;min-width:36px;width:36px;min-height:36px;height:36px;margin:0;padding:8px;border-color:transparent;border-radius:999px;background:transparent;box-shadow:none}
.motion-card-control span{display:none}
.motion-card-control svg{width:15px;height:15px}
.motion-card-control:hover{background:var(--color-hover);border-color:transparent}
.motion-card-control:active{background:var(--color-accent-soft)}
.term-card:has(.motion-card-control) .card-head{padding-right:88px}
.term-card:has(.code-diagram) .card-main{height:auto;flex:1}
.code-diagram.full[data-motion="true"]{display:flex;flex-direction:column;aspect-ratio:auto;max-height:none}
.code-diagram.full[data-motion="true"] .term-visual-svg{height:auto;max-height:340px;aspect-ratio:16/9}
.code-diagram.full .motion-control{position:static;align-self:flex-end;margin:0 12px 12px;flex-shrink:0}
.motion-control:disabled{opacity:.65;cursor:default}
.code-diagram[data-playing="false"] *{animation-play-state:paused!important}
@media(max-width:720px){.code-diagram.full{max-height:none}.motion-control{min-height:32px}.motion-card-control{top:19px;right:57px}.demo-stage :is(.example-copy,.example-form,.contrast-copy,.alignment-example){padding:20px}}
@media(prefers-reduced-motion:reduce){.code-diagram [style*="animation"]{animation-play-state:paused!important}}

/* Content density sets the canvas height; same-size cases share a grid row. */
.catalog-page .preview-band{align-items:stretch}
.catalog-page .preview-band+.preview-band{margin-top:20px}
.term-card[data-preview-size]{--case-min-height:172px;--case-padding:22px;min-width:0}
.term-card[data-preview-size="compact"]{--case-min-height:152px;--case-padding:16px}
.term-card[data-preview-size="roomy"]{--case-min-height:196px;--case-padding:28px}
.term-card[data-preview-size] .code-diagram{
  display:grid;place-items:center;aspect-ratio:auto;min-height:var(--case-min-height);
  padding:var(--case-padding) 10px;height:auto;margin-top:auto
}
.term-card[data-preview-size] .code-diagram .term-visual-svg{
  width:100%;height:auto;aspect-ratio:16/9;max-height:none
}
.code-diagram.full{
  display:grid;grid-template-columns:minmax(0,1fr);place-items:center;aspect-ratio:auto;max-height:none;padding:24px
}
.code-diagram.full .term-visual-svg,
.code-diagram.full[data-motion="true"] .term-visual-svg{
  width:min(100%,600px);height:auto;max-height:none;aspect-ratio:16/9;margin-inline:auto
}
.code-diagram.full[data-motion="true"]{padding-bottom:0}
.code-diagram.full .motion-control{margin-right:0}
/* Thin ordinary rules; explicit specimen weights still explain their concepts. */
.code-diagram .term-visual-svg :is(rect,circle,ellipse,line,path,polygon,polyline){vector-effect:non-scaling-stroke}
.code-diagram:not([data-visual-id="line-weight"]) .term-visual-svg :is(.v-stroke,.v-line):not([stroke-width]):not([style*="stroke-width"]),
.code-diagram:not([data-visual-id="line-weight"]) .term-visual-svg :is([stroke-width="1.5"],[stroke-width="1.8"],[stroke-width="2"]){stroke-width:1}
.code-diagram .term-visual-svg :is(.mv-outline,.mv-accent-line,.mv-wave-line){stroke-width:1}
.code-diagram .polished-ui-visual :is(.p-panel,.p-rule,.p-accent-line){stroke-width:1}
.demo-stage .diagram.full :is(.example-copy strong,.contrast-copy strong,.alignment-example strong){font-size:24px}
.demo-stage .diagram.full :is(.example-copy p,.contrast-copy p,.alignment-example p){font-size:12px}
.demo-stage .diagram.full .example-copy.before strong{font-size:16px}
.demo-stage .diagram.full .example-form{font-size:12px}
.demo-stage .diagram.full .demo-button{font-size:11px}
@media(max-width:720px){
  .term-card[data-preview-size="compact"]{--case-min-height:184px}
  .term-card[data-preview-size="standard"]{--case-min-height:208px}
  .term-card[data-preview-size="roomy"]{--case-min-height:232px}
  .code-diagram.full{padding:20px 12px}
}

/* Key specimen labels and summaries stay at a real CSS size in card previews. */
.term-card[data-preview-size] .code-diagram{
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto 51.15px;
  align-content:center;gap:8px;
  padding-inline:8px
}
.term-card .code-diagram .visual-footer{
  display:grid;align-content:start;width:100%;height:51.15px;min-width:0;
  font:400 11px/1.55 var(--font-body)
}
.term-card .code-diagram :is(.visual-caption,.visual-key){
  display:block;width:100%;font:400 11px/1.55 var(--font-body);
  letter-spacing:0;color:var(--preview-text);text-align:center;
  overflow-wrap:break-word
}
.term-card .code-diagram .visual-key{
  display:grid;grid-template-columns:repeat(var(--key-count),minmax(0,1fr));
  align-items:start;gap:5px 8px
}
.term-card .code-diagram .visual-key span{min-width:0;text-wrap:pretty}
/* Guides that explain the concept need more contrast than decorative panels. */
.code-diagram .term-visual-svg :is(line,path,polyline).v-stroke{
  stroke:var(--preview-muted)
}
/* Main name and translation have separate rhythm, leaving words intact. */
.term-card[data-preview-size] .card-head{margin-bottom:10px}
.term-card[data-preview-size] .card-head h3{
  line-height:1.4;overflow-wrap:break-word;word-break:normal;text-wrap:pretty
}
.term-card[data-preview-size] .card-head h3 span{
  display:block;margin:5px 0 0;font-family:var(--font-body);font-size:15px;
  line-height:1.5;font-weight:400;letter-spacing:0;color:var(--color-accent);
  overflow-wrap:break-word;text-wrap:pretty
}
@media(max-width:720px){
  .term-card[data-preview-size] .card-head h3 span{font-size:14px}
  .term-card[data-preview-size] .code-diagram{padding-inline:10px}
  .term-card .code-diagram :is(.visual-caption,.visual-key){font-size:11px}
}