/* Claude REV.01: original faceted X, cut tip and KRYVEX paths, scoped locally. */
.kxs-symbol { --kxs-xs: 210px; --kxs-logo: min(84cqw, 370px); --kxs-ox: calc(50% + .0924 * var(--kxs-logo)); --kxs-oy: 196px; container-type: inline-size; position: relative; width: 100%; max-width: 460px; min-width: 0; margin: 0; }
.kxs-topline, .kxs-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 13px; border-block: 1px solid var(--ax-line-strong); color: var(--ax-text-3); font: 400 10.5px/1.6 var(--ax-font-mono); letter-spacing: .045em; text-transform: uppercase; }
.kxs-topline > :last-child { color: var(--ax-text-2); white-space: nowrap; }
.kxs-stage { position: relative; height: 324px; overflow: hidden; }
.kxs-guide { position: absolute; pointer-events: none; }
.kxs-guide--v { width: 1px; top: 15px; bottom: 15px; left: var(--kxs-ox); background: var(--ax-line); opacity: .5; }
.kxs-guide--h { height: 1px; left: 12px; right: 12px; top: 50%; background: var(--ax-line); opacity: .5; }
.kxs-stage::before, .kxs-stage::after { content: ''; position: absolute; width: 9px; height: 9px; border-color: var(--ax-line-control); }
.kxs-stage::before { top: 21px; left: 0; border-top: 1px solid; border-left: 1px solid; }
.kxs-stage::after { bottom: 21px; right: 0; border-bottom: 1px solid; border-right: 1px solid; }
.kxs-hz { position: absolute; left: 0; right: 0; top: var(--kxs-oy); height: 1px; background: var(--ax-line); }
.kxs-x { position: absolute; width: var(--kxs-xs); height: var(--kxs-xs); top: calc(var(--kxs-oy) - var(--kxs-xs) / 2); left: calc(var(--kxs-ox) - var(--kxs-xs) / 2); opacity: 0; }
.kxs-half, .kxs-x-half, .kxs-x-half > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kxs-x-brush { pointer-events: none; }
.kxs-lit .kxs-x-kerf { fill: var(--ax-laser); }
.kxs-beam { position: absolute; left: 30.45%; width: 39.1%; top: calc(50% - 1px); height: 2px; background: var(--ax-laser); transform-origin: 50% 50%; }
.kxs-laser { position: absolute; top: calc(var(--kxs-oy) - var(--kxs-xs) * .32667 - .5px); height: 1px; background: var(--ax-laser); opacity: 0; transform: scaleX(0); }
.kxs-laser--l { left: 0; width: var(--kxs-ox); transform-origin: 0 50%; }
.kxs-laser--r { left: var(--kxs-ox); right: 0; transform-origin: 100% 50%; }
.kxs-end { position: absolute; top: calc(var(--kxs-oy) - var(--kxs-xs) * .32667 - 7px); width: 1px; height: 14px; background: var(--ax-text-3); opacity: 0; }
.kxs-end--l { left: 0; } .kxs-end--r { right: 0; }
.kxs-tip { position: absolute; width: calc(var(--kxs-logo) * 28.4 / 471); height: calc(var(--kxs-logo) * 25 / 471); left: calc(var(--kxs-ox) - var(--kxs-logo) * 14.2 / 471); top: calc(var(--kxs-oy) - var(--kxs-logo) * 25 / 471); transform-origin: 0 0; opacity: 0; }
.kxs-tip-fill, .kxs-tip-glow { position: absolute; inset: 0; background: var(--ax-laser); clip-path: polygon(0 0, 100% 0, 69.72% 100%, 30.28% 100%); }
.kxs-tip-glow { display: none; }
.kxs-mark { position: absolute; width: var(--kxs-logo); left: calc(var(--kxs-ox) - var(--kxs-logo) * 279 / 471); top: calc(var(--kxs-oy) - var(--kxs-logo) * 100 / 471); }
.kxs-logo { display: block; width: 100%; height: auto; overflow: visible; }
.kxs-letter { visibility: hidden; }
.kxs-logo.is-play > path { visibility: hidden; }
.kxs-logo.is-play > .kxs-letter { visibility: visible; }
.kxs-symbol.is-playing .kxs-x { opacity: 1; }
.kxs-caption { min-height: 72px; border-top: 0; padding-block: 10px; font-size: 10.5px; letter-spacing: .015em; }
.kxs-caption > span { max-width: 20em; }
.kxs-replay { flex: none; display: inline-flex; align-items: center; gap: 15px; min-height: 44px; padding: 8px 0 8px 10px !important; border: 0 !important; background: transparent !important; color: var(--ax-text-2); font: 400 10.5px/1.5 var(--ax-font-mono); text-transform: uppercase; cursor: pointer; }
.kxs-replay span { color: var(--ax-text); font-size: 14px; }
.kxs-replay:hover { color: var(--ax-text); }
.kxs-replay:disabled { opacity: .4; cursor: default; }
.kxs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px !important; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 767px) { .kxs-symbol { --kxs-xs: 180px; --kxs-logo: 86cqw; --kxs-oy: 174px; max-width: 420px; } .kxs-stage { height: 290px; } .kxs-topline { font-size: 10.5px; } .kxs-caption { min-height: 68px; } }
@media (prefers-reduced-motion: reduce) { .kxs-symbol .kxs-x, .kxs-symbol .kxs-laser, .kxs-symbol .kxs-end, .kxs-symbol .kxs-tip { opacity: 0 !important; } .kxs-logo.is-play > path { visibility: visible; } .kxs-logo.is-play > .kxs-letter { visibility: hidden; } }