/* Interactive figures adapted from the supplied TEM sample. */
.tem-page { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Consolas, monospace; }
.tem-overview { margin-top: 22px; }
.tem-page .detail { max-width: none; }
.tem-figure { margin: 26px 0 0; }
.tem-static { display: block; width: 100%; height: auto; border-radius: 6px; }
.tem-image, .tem-failures { font-family: var(--font-ui); }
.tem-image-result > p, .tem-image-inference p, .tem-image-method p,
.tf-premise, .tf-result p, .tf-source { color:var(--prose); font-family: var(--font-body); }

.tem-image { --tem-accent:#6cd4c8; --tem-muted:#b1c0bd; margin-top:22px; }
.tem-image *, .tem-image *::before, .tem-image *::after { box-sizing:border-box; }
.tem-image-presets { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tem-image-presets button { padding:8px 13px; border:1px solid #344642; border-radius:5px; color:#e8e4dd; background:#111919; font:inherit; font-size:13px; cursor:pointer; min-height:38px; }
.tem-image-presets button[aria-pressed="true"] { color:var(--tem-accent); border-color:var(--tem-accent); background:#142e2a; }
.tem-image button:focus-visible, .tem-image canvas:focus-visible, .tem-image summary:focus-visible { outline:2px solid white; outline-offset:3px; }
.tem-image-panels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.tem-image-panels figure { position:relative; margin:0; min-width:0; }
.tem-image-panels figure:not(:last-child)::after { content:''; width:13px; height:9px; position:absolute; top:calc(50% - 7px); right:-16px; background:var(--tem-accent); clip-path:polygon(0 40%,65% 40%,65% 0,100% 50%,65% 100%,65% 60%,0 60%); }
.tem-image-panels figcaption { display:flex; align-items:baseline; gap:6px; min-height:43px; font-size:13px; line-height:1.3; color:#e8e4dd; }
.tem-image-panels figcaption span { color:var(--tem-accent); font:12px var(--mono,monospace); }
.tem-image canvas { display:block; width:100%; height:auto; aspect-ratio:1; border-radius:3px; background:black; }
#tem-field { cursor:crosshair; touch-action:manipulation; }
.tem-image-panels p { margin:9px 0 0; color:var(--tem-muted); font-size:11px; line-height:1.45; }
.tem-image-result { margin-top:22px; padding-top:19px; }
.tem-image-values { display:flex; flex-wrap:wrap; gap:14px 38px; margin-bottom:12px; }
.tem-image-values span { display:block; font-size:12px; color:var(--tem-muted); }
.tem-image-values strong { display:block; font-size:27px; line-height:1.35; color:var(--tem-accent); font-weight:500; font-variant-numeric:tabular-nums; }
.tem-image-result > p { margin:0; min-height:68px; font-size:calc(14px + var(--prose-size-increase)); line-height:1.6; color:var(--tem-muted); }
.tem-image-inference { margin-top:18px; padding:16px; border-radius:5px; background:#111b1b; }
.tem-image-inference b { display:block; margin-bottom:7px; color:#e8e4dd; font-weight:500; font-size:14px; }
.tem-image-inference b:only-child { margin-bottom:0; }
.tem-image-inference p { margin:0; font-size:calc(14px + var(--prose-size-increase)); line-height:1.6; color:var(--tem-muted); }
.tem-image-method { margin-top:17px; color:var(--tem-muted); font-size:12px; line-height:1.65; }
.tem-image-method summary { cursor:pointer; padding:4px 0; color:#e8e4dd; }
.tem-image-method p { font-size:calc(12px + var(--prose-size-increase)); margin:12px 0 0; }
.tem-image-method a { color:var(--tem-accent); }
.tem-image-fallback { display:none !important; }
@media (max-width:600px) {
  .tem-image-presets { gap:6px; }
  .tem-image-presets button { font-size:12px; padding:8px 10px; }
  .tem-image-panels { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 18px; }
  .tem-image-field { grid-column:1 / -1; }
  .tem-image-field canvas { max-width:340px; margin:auto; }
  .tem-image-panels figcaption { min-height:32px; }
  .tem-image-panels .tem-image-field::after { display:none; }
  .tem-image-values { gap:14px 22px; }
  .tem-image-values strong { font-size:25px; }
}
@media print { .tem-image { display:none !important; } .tem-image-fallback { display:block !important; } }


.tem-failures { --tf-accent:#6cd4c8; --tf-warn:#f3b887; --tf-muted:#b1c0bd; margin:24px 0 8px; color:#e8e4dd; scroll-margin-top:75px; }
.tem-failures * { box-sizing:border-box; }
.tem-failures [hidden] { display:none !important; }
.tf-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-bottom:1px solid #344642; gap:6px; }
.tf-tabs button { text-align:left; min-height:77px; border:1px solid transparent; border-radius:6px 6px 0 0; padding:13px 12px; background:transparent; color:#bdc7c4; cursor:pointer; font:500 14px/1.4 var(--sans); }
.tf-tabs button span { display:block; font:11px/1.5 var(--mono); margin-bottom:5px; color:#a4b4b0; }
.tf-tabs button[aria-selected="true"] { border-color:#344642; border-bottom-color:#142421; background:#142421; color:#fff; }
.tf-tabs button[aria-selected="true"] span { color:var(--tf-accent); }
.tf-panel { padding:22px 0 0; }
.tf-panel .tf-premise { margin:0 0 18px; font-size:calc(15px + var(--prose-size-increase)); line-height:1.65; color:#d9e1df; }
.tf-controls { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:15px; }
.tf-controls button { min-height:40px; padding:8px 12px; border:1px solid #344642; border-radius:5px; background:#111919; color:#c8d2cf; font:13px/1.35 var(--sans); cursor:pointer; }
.tf-controls button[aria-pressed="true"] { border-color:var(--tf-accent); color:var(--tf-accent); background:#142e2a; }
.tem-failures button:hover { background:#1a302b; }
.tem-failures button:focus-visible, .tem-failures summary:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.tf-chart { border:1px solid #283936; background:#0a1211; border-radius:6px; overflow:hidden; }
.tf-chart svg { display:block; width:100%; height:auto; font-family:var(--sans); }
.tf-panel .tf-caption { margin:10px 0 0; font-size:12px; line-height:1.6; color:var(--tf-muted); }
.tf-key { display:inline-flex; align-items:center; gap:6px; margin-right:17px; }
.tf-key:before { content:''; display:inline-block; width:16px; height:3px; background:var(--tf-accent); }
.tf-fit:before { background:var(--tf-warn); }
.tf-window:before { height:10px; background:#f3b88730; border:1px solid #f3b88780; }
.tf-result { margin-top:18px; border-radius:5px; background:#122421; padding:15px 17px; }
.tf-result strong { display:block; color:var(--tf-accent); font-size:16px; font-weight:500; line-height:1.5; }
.tf-result p { font-size:calc(14px + var(--prose-size-increase)); line-height:1.6; margin:6px 0 0; color:#d3dfda; }
.tf-source { margin:18px 0 0 !important; font-size:calc(11px + var(--prose-size-increase)); line-height:1.65; color:#93a9a2; }
.tf-source a { color:var(--tf-accent); }
.tf-specimen { display:grid; grid-template-columns:86px 1fr; align-items:center; gap:18px; margin-bottom:18px; }
.tf-specimen img { display:block; width:86px; height:auto; image-rendering:pixelated; border-radius:3px; margin:0; }
.tf-specimen .tf-premise { margin:0; }
.tem-failures-fallback-hidden { display:none !important; }
@media (max-width:600px) {
 .tf-tabs { gap:3px; }
 .tf-tabs button { font-size:12px; padding:10px 7px; min-height:90px; }
 .tf-tabs button span { font-size:10px; line-height:1.55; }
 .tf-controls { gap:6px; }
 .tf-controls button { font-size:12px; padding:8px 10px; }
 .tf-panel { padding-top:18px; }
 .tf-specimen { grid-template-columns:64px 1fr; gap:12px; }
 .tf-specimen img { width:64px; }
 .tf-result { padding:13px; }
}
@media print { .tem-failures { display:none !important; } .tem-failures-fallback-hidden { display:block !important; } }