.hxil:not(#hx_) { --hxil-plum: var( --helix-plum, #7a4555 ); width: 100%; max-width: 560px; margin: 0 auto; }
.hxil:not(#hx_) svg { display: block; width: 100%; height: auto; overflow: visible; }
.hxil:not(#hx_) .hxil-badge text { fill: #fff; font: 600 9.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif; } .hxil-cut:not(#hx_) .hxil-in path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hxil-cut:not(#hx_) .hxil-refl { fill: none; stroke: var( --hxil-plum ); stroke-width: 1.4; stroke-linecap: round; }
.hxil-cut:not(#hx_) .hxil-felt { fill: var( --hxil-plum ); }
.hxil-cut:not(#hx_) .hxil-in,
.hxil-cut:not(#hx_) .hxil-refl,
.hxil-cut:not(#hx_) .hxil-felt {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-delay: var( --d );
}
.hxil-cut:not(#hx_) .hxil-in { animation-name: hxil-in; transform-box: view-box; transform-origin: 270px -40px; }
.hxil-cut:not(#hx_) .hxil-l { animation-name: hxil-refl-l; }
.hxil-cut:not(#hx_) .hxil-r { animation-name: hxil-refl-r; }
.hxil-cut:not(#hx_) .hxil-felt { animation-name: hxil-felt; }
@keyframes hxil-in {
0% { transform: scale( .28 ); opacity: 0; }
6% { opacity: 1; }
45% { transform: scale( 1 ); opacity: .85; }
50%, 100% { transform: scale( 1.03 ); opacity: 0; }
}
@keyframes hxil-refl-l {
0%, 46% { transform: translate( 0, 0 ); opacity: 0; }
52% { opacity: .28; }
80%, 100% { transform: translate( -16px, -24px ); opacity: 0; }
}
@keyframes hxil-refl-r {
0%, 46% { transform: translate( 0, 0 ); opacity: 0; }
52% { opacity: .28; }
80%, 100% { transform: translate( 16px, -24px ); opacity: 0; }
}
@keyframes hxil-felt {
0%, 62% { opacity: 0; }
74% { opacity: .25; }
100% { opacity: 0; }
} .hxil-mis:not(#hx_) {
--bg: #2b2321;
--stage: #342b28;
--tog: #3c3330;
--txt: #f4ede9;
--muted: #cdc2bd;
--plum: var( --helix-plum, #7a4555 );
box-sizing: border-box;
width: 100%;
padding: 22px;
border-radius: 24px;
background: var( --bg );
color: var( --txt );
font-family: inherit;
}
.hxil-mis:not(#hx_) * { box-sizing: border-box; }
.hxil-mis:not(#hx_) .hxil-mis__title { margin: 0 0 14px; color: var( --txt ); font-size: 17px; font-weight: 700; line-height: 1.3; }
.hxil-mis__toggle:not(#hx_) { display: flex; gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 999px; background: var( --tog ); }
.hxil-mis:not(#hx_) .hxil-mis__toggle button {
flex: 1;
min-height: 0;
margin: 0;
padding: 10px 12px;
border: 0;
border-radius: 999px;
background: transparent;
color: var( --muted );
font: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
text-transform: none;
letter-spacing: normal;
box-shadow: none;
cursor: pointer;
transition: background-color .25s, color .25s, box-shadow .25s;
}
.hxil-mis:not(#hx_) .hxil-mis__toggle button:hover { background: rgba( 255, 255, 255, .06 ); color: var( --txt ); }
.hxil-mis:not(#hx_) .hxil-mis__toggle button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hxil-mis:not(#hx_) .hxil-mis__toggle button[aria-selected="true"] { background: #fff; color: #1f1a19; box-shadow: 0 0 0 2px var( --plum ) inset, 0 0 0 4px #fff inset; }
.hxil-mis__stage:not(#hx_) { overflow: hidden; border-radius: 14px; background: radial-gradient( 120% 140% at 10% 50%, #3b302d 0%, var( --stage ) 55%, #2f2724 100% ); }
.hxil-mis__stage:not(#hx_) canvas { display: block; width: 100%; height: auto; aspect-ratio: 520 / 200; }
.hxil-mis__meter:not(#hx_) { display: flex; align-items: center; gap: 12px; margin: 14px 2px 0; }
.hxil-mis__meter-label:not(#hx_) { color: var( --muted ); font-size: 12px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.hxil-mis__track:not(#hx_) { flex: 1; height: 6px; overflow: hidden; border-radius: 99px; background: #3f3532; }
.hxil-mis__fill:not(#hx_) { display: block; width: 0; height: 100%; border-radius: 99px; background: linear-gradient( 90deg, #b0707f, #f1d9cf ); }
.hxil-mis:not(#hx_) .hxil-mis__caption { min-height: 3em; margin: 12px 2px 0; color: var( --muted ); font-size: 14px; line-height: 1.5; }
.hxil-mis:not(#hx_) .hxil-mis__note { margin: 6px 2px 0; color: #9f938e; font-size: 11.5px; }
@media ( prefers-reduced-motion: reduce ) {
.hxil-cut:not(#hx_) .hxil-in,
.hxil-cut:not(#hx_) .hxil-refl,
.hxil-cut:not(#hx_) .hxil-felt { animation: none; }
.hxil-cut:not(#hx_) .hxil-wave:first-of-type .hxil-in { opacity: .8; transform: scale( .75 ); }
} .hx-mis3:not(#hx_) .hx-mis3__title { margin: 0 0 14px; color: var( --txt ); font-size: 17px; font-weight: 700; line-height: 1.3; }
.hx-mis3__toggle:not(#hx_) { display: flex; gap: 4px; margin-bottom: 12px; padding: 4px; border-radius: 999px; background: var( --tog ); }
.hx-mis3:not(#hx_) .hx-mis3__toggle button {
flex: 1;
margin: 0;
padding: 10px 12px;
border: 0;
border-radius: 999px;
background: transparent;
color: var( --muted );
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color .2s, color .2s;
-webkit-tap-highlight-color: transparent;
}
.hx-mis3:not(#hx_) .hx-mis3__toggle button[aria-selected="true"] { background: #fff; color: #1f1a19; box-shadow: 0 0 0 2px #7a4555 inset, 0 0 0 4px #fff inset; }
.hx-mis3__stage:not(#hx_) { overflow: hidden; border-radius: 14px; background: var( --stage ); }
.hx-mis3__stage:not(#hx_) svg { display: block; width: 100%; height: auto; }
.hx-mis3__panel:not(#hx_) { transition: opacity .25s ease, transform .25s ease; }
.hx-mis3[data-mode="bare"]:not(#hx_) .hx-mis3__panel { opacity: 0; transform: translateX( 16px ); }
.hx-mis3__label:not(#hx_) { fill: #f3ece8; opacity: .55; font: 600 7px/1 system-ui, sans-serif; letter-spacing: .08em; writing-mode: vertical-rl; }
.hx-mis3:not(#hx_) .hx-mis3__caption { min-height: 3em; margin: 14px 2px 0; color: var( --muted ); font-size: 14px; line-height: 1.5; } .hxil-pet:not(#hx_) .he-badge text { fill: #fff; font: 600 10px/1 system-ui, -apple-system, "Segoe UI", sans-serif; text-anchor: middle; }