.se { --se-ink: var(--ink); --se-soft: var(--ink-soft); --se-faint: var(--ink-faint); --se-line: var(--border); --se-accent: var(--bronze); --se-panel: var(--surface); --se-path: #8A591C; --se-band: rgba(76, 93, 109, .14); }
.se-dark { --se-ink: #F3EEE4; --se-soft: var(--on-deep-soft); --se-faint: var(--on-deep-faint); --se-line: #262D36; --se-accent: var(--ev-gold-lit, #D3A15A); --se-panel: rgba(7, 9, 13, .6); --se-path: #F3DDB4; --se-band: rgba(90, 136, 210, .2); }
.se { border: 1px solid var(--se-line); background: var(--se-panel); padding: clamp(.9rem, 2vw, 1.4rem); color: var(--se-ink); }
.se-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; max-width: none; }
.se-step { margin: 0; padding-top: 1rem; border-top: 1px solid var(--se-line); min-width: 0; }
.se-step:first-child { border-top: 0; padding-top: 0; }
.se-k { margin: 0 0 .45rem; font-weight: 500; font-size: .98rem; color: var(--se-ink); display: flex; gap: .6rem; align-items: baseline; }
.se-n { font-family: var(--mono); font-size: .7rem; color: var(--se-accent); letter-spacing: .06em; }
.se-p { margin: 0 0 .6rem; font-size: .88rem; line-height: 1.55; color: var(--se-soft); max-width: 66ch; }
.se-warn { color: #B4442F; }
.se-dark .se-warn { color: #F0A493; }
.se-cap { font-size: .76rem; line-height: 1.45; color: var(--se-faint); margin: .45rem 0 0; text-align: left; caption-side: top; padding-bottom: .4rem; }
.se-fig { margin: 0; }
.se-qwave { display: block; width: 100%; height: 56px; margin: .2rem 0 .5rem; }
.se-feat { display: block; width: 100%; height: 88px; image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid var(--se-line); }
.se-feat-r { height: 44px; border-top: 0; }
.se-matrix-wrap { margin-top: .6rem; }
.se-matrix-in { position: relative; }
.se-matrix { display: block; width: 100%; height: clamp(120px, 24vw, 200px); image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid var(--se-line); }
.se-path { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); pointer-events: none; }
.se-path-line { fill: none; stroke: var(--se-path); stroke-width: 2; stroke-linejoin: round; }
.se-path-band { fill: var(--se-band); }
.se-act { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; }
.se-btn, .se-chip { min-height: 38px; padding: .3rem .75rem; border: 1px solid var(--se-line); background: transparent; color: var(--se-ink); font: inherit; font-size: .82rem; cursor: pointer; transition: border-color 160ms var(--ease-ui), background-color 160ms var(--ease-ui); }
.se-btn:hover, .se-chip:hover { border-color: var(--se-accent); }
.se-choose { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .2rem; }
.se-chip[aria-pressed="true"] { border-color: var(--se-accent); background: color-mix(in srgb, var(--se-accent) 16%, transparent); }
.se-scroll { overflow-x: auto; max-width: 100%; }
.se-table { border-collapse: collapse; width: 100%; font-size: .8rem; min-width: 28rem; }
.se-table th, .se-table td { text-align: left; padding: .35rem .6rem .35rem 0; border-bottom: 1px solid var(--se-line); color: var(--se-soft); font-weight: 400; }
.se-table thead th { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--se-faint); }
.se-table td { font-family: var(--mono); font-size: .76rem; }
.se-table tbody th { color: var(--se-ink); }
.se-engine { margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--se-line); font-size: .82rem; line-height: 1.5; color: var(--se-faint); }
.se-engine a { color: var(--se-soft); }
.se :focus-visible { outline: 2px solid var(--se-accent); outline-offset: 2px; }
@media (forced-colors: active) { .se-path-line { stroke: Highlight; } }

.vx-with { padding: clamp(3rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--border-subtle); background: var(--bg); }
.vx-with-head { max-width: 46rem; margin-bottom: 1.6rem; }
.vx-h { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.12; margin: 0 0 .6rem; }
.vx-note { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.vx-group { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .4rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--border); }
.vx-k { margin: .15rem 0 0; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }
.vx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem 2rem; align-items: center; max-width: none; }
.vx-p { margin: 0; display: grid; grid-template-columns: auto; gap: .1rem; }
.vx-p.has-logo { grid-template-columns: auto minmax(0, 1fr); column-gap: .8rem; align-items: center; }
.vx-p.has-logo .vx-name, .vx-p.has-logo .vx-unit { grid-column: 2; }
.vx-p.has-logo .vx-logo { grid-row: span 2; }
.vx-logo { display: grid; place-items: center; padding: .35rem .5rem; min-height: 3.1rem; }
.vx-logo.on-paper { background: #FBFAF6; box-shadow: inset 0 0 0 1px var(--border); }
.vx-logo.on-deep { background: #0B0F0D; }
.vx-logo img { display: block; height: 40px; width: auto; max-width: 9rem; }
.vx-name { font-family: var(--serif); font-size: 1.12rem; line-height: 1.15; color: var(--ink); }
.vx-unit { font-size: .8rem; color: var(--ink-faint); line-height: 1.3; }
.vx-more { margin: 1.2rem 0 0; font-weight: 500; }
@media (max-width: 760px) {
  .vx-group { grid-template-columns: minmax(0, 1fr); }
  .vx-list { gap: .9rem 1.6rem; }
}