:root .sig--web-a11y { display: flex; container-type: inline-size; padding: clamp(14px, 3.4cqw, 30px); text-align: left; }
:root .sig--web-a11y svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:root .sig--web-a11y .ax { --fs: 1; flex: 1; display: flex; flex-direction: column; gap: 12px; }
:root .sig--web-a11y .ax__tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
:root .sig--web-a11y .ax__t { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 10px 6px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #eeeaf2; font: 600 12.5px/1.15 var(--f-display); cursor: pointer; transition: background .3s, border-color .3s, color .3s, transform .2s; }
:root .sig--web-a11y .ax__t svg { font-size: 21px; }
:root .sig--web-a11y .ax__t:hover { background: rgba(255, 255, 255, .1); }
:root .sig--web-a11y .ax__t:active { transform: scale(.96); }
:root .sig--web-a11y .ax__t:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
:root .sig--web-a11y .ax__t[aria-pressed="true"] { background: var(--v); border-color: var(--v); color: #fff; box-shadow: 0 12px 24px -12px rgba(161, 0, 255, .9); }
:root .sig--web-a11y .ax__t.auto::after { content: ""; position: absolute; inset: -3px; border-radius: 16px; border: 2px solid var(--lilac); animation: axRing .7s ease-out forwards; pointer-events: none; }
@keyframes axRing{ from { opacity: 1; transform: scale(.96); } to { opacity: 0; transform: scale(1.12); } }
:root .sig--web-a11y .ax__mode { display: flex; align-items: center; gap: 8px; margin: 0; color: #d4ccdc; font: 500 12.5px/1.3 var(--f-body); }
:root .sig--web-a11y .ax__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lilac); animation: axDot 1.8s ease-in-out infinite; }
:root .sig--web-a11y .is-user .ax__dot { background: #4bd08a; }
@keyframes axDot{ 50% { opacity: .3; } }
:root .sig--web-a11y .ax__page { position: relative; flex: 1; display: flex; flex-direction: column; gap: calc(var(--fs) * 10px); padding: clamp(12px, 2.6cqw, 20px); border-radius: 16px; background: #f6f4f8; color: #b9b3bf; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9); transition: background .5s, color .5s; }
:root .sig--web-a11y .ax__page * { transition: color .5s, background .5s, border-color .5s, font-size .5s var(--ease-out), box-shadow .3s, outline-color .3s; }
:root .sig--web-a11y .ax__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #ece8f0; }
:root .sig--web-a11y .ax__nav b { display: inline-flex; align-items: center; gap: 6px; color: #b49cc9; font: 700 calc(var(--fs) * 12.5px)/1 var(--f-display); }
:root .sig--web-a11y .ax__nav span { display: flex; gap: 12px; font: 500 calc(var(--fs) * 11px)/1 var(--f-body); }
:root .sig--web-a11y .ax__nav u { text-decoration: none; color: #c4bfca; border-radius: 4px; }
:root .sig--web-a11y .ax__hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; align-items: center; }
:root .sig--web-a11y .ax__h { margin: 0 0 6px; color: #c1aed2; font: 700 calc(var(--fs) * clamp(15px, 2.9cqw, 22px))/1.1 var(--f-display); letter-spacing: -.035em; border-radius: 6px; }
:root .sig--web-a11y .ax__p { margin: 0 0 10px; color: #c2bdc7; font: 400 calc(var(--fs) * 11px)/1.4 var(--f-body); border-radius: 6px; }
:root .sig--web-a11y .ax__btn { display: inline-block; padding: calc(var(--fs) * 7px) calc(var(--fs) * 12px); border-radius: 999px; background: #e2d1ef; color: #fff; font: 600 calc(var(--fs) * 11px)/1 var(--f-display); }
:root .sig--web-a11y .ax__img { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #fbf3e3, #e6f1ea); }
:root .sig--web-a11y .ax__img i { position: absolute; left: -10%; right: 30%; bottom: -40%; height: 80%; border-radius: 50%; background: #9fcfb3; }
:root .sig--web-a11y .ax__img b { position: absolute; right: 12%; top: 18%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #ffe7a8; }
:root .sig--web-a11y .ax__alt { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 5px 7px; border-radius: 6px; background: rgba(20, 16, 26, .88); color: #fff; font: 500 10px/1.2 var(--f-body); font-style: normal; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .5s var(--ease-out); }
:root .sig--web-a11y .ax__field { display: grid; gap: 4px; border-radius: 8px; }
:root .sig--web-a11y .ax__field small { color: #c9c3ce; font: 500 calc(var(--fs) * 10px)/1 var(--f-display); }
:root .sig--web-a11y .ax__in { height: calc(var(--fs) * 28px); border-radius: 8px; border: 1px solid #efebf2; background: #fff; }
:root .sig--web-a11y .ax__key { position: absolute; right: 12px; bottom: 12px; padding: 5px 9px; border-radius: 6px; background: #fff; color: #222; box-shadow: 0 3px 0 #bbb, 0 0 0 1px #ccc; font: 600 10.5px/1 var(--f-display); opacity: 0; transition: opacity .3s; }
:root .sig--web-a11y .ax--big { --fs: 1.36; }
:root .sig--web-a11y .ax--hc .ax__page { background: #fff; color: #1a1a1a; }
:root .sig--web-a11y .ax--hc .ax__nav b { color: #3b0764; }
:root .sig--web-a11y .ax--hc .ax__nav u { color: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; }
:root .sig--web-a11y .ax--hc .ax__nav { border-color: #9a94a0; }
:root .sig--web-a11y .ax--hc .ax__h { color: #1a0630; }
:root .sig--web-a11y .ax--hc .ax__p { color: #2b2730; }
:root .sig--web-a11y .ax--hc .ax__btn { background: #3b0764; color: #fff; }
:root .sig--web-a11y .ax--hc .ax__field small { color: #2b2730; }
:root .sig--web-a11y .ax--hc .ax__in { border-color: #57505e; }
:root .sig--web-a11y .ax--focus .ax__key { opacity: 1; }
:root .sig--web-a11y .ax__key.press { animation: axKey .35s ease-out; }
@keyframes axKey{ 40% { transform: translateY(2px); box-shadow: 0 1px 0 #bbb, 0 0 0 1px #ccc; } }
:root .sig--web-a11y .is-f { outline: 3px solid var(--v); outline-offset: 3px; box-shadow: 0 0 0 7px rgba(161, 0, 255, .18); }
:root .sig--web-a11y .is-r { background: rgba(161, 0, 255, .1); box-shadow: 0 0 0 2px var(--v), 0 0 0 6px rgba(161, 0, 255, .15); }
:root .sig--web-a11y .ax--read .ax__img.is-r .ax__alt, :root .sig--web-a11y .ax--read .ax__alt { opacity: 1; transform: none; }
:root .sig--web-a11y .ax__sr { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #120f16; border: 1px solid rgba(255, 255, 255, .1); color: #a9a1b2; transition: border-color .4s, color .4s; }
:root .sig--web-a11y .ax__sr > span { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .06); font-size: 16px; transition: background .4s; }
:root .sig--web-a11y .ax__srt { margin: 0; font: 500 12.5px/1.3 var(--f-body); }
:root .sig--web-a11y .ax--read .ax__sr { border-color: rgba(161, 0, 255, .6); color: #fff; }
:root .sig--web-a11y .ax--read .ax__sr > span { background: var(--v); animation: axSpeak 1s ease-in-out infinite; }
@keyframes axSpeak{ 50% { box-shadow: 0 0 0 6px rgba(161, 0, 255, .25); } }
@container (max-width: 470px){:root .sig--web-a11y .ax__tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root .sig--web-a11y .ax__t { flex-direction: row; min-height: 46px; justify-content: flex-start; padding: 8px 10px; }
:root .sig--web-a11y .ax__hero { grid-template-columns: 1fr; }
:root .sig--web-a11y .ax__img { display: none; }
:root .sig--web-a11y .ax__nav span u:last-child { display: none; }

}
@media (prefers-reduced-motion: reduce){:root .sig--web-a11y .ax__dot, :root .sig--web-a11y .ax--read .ax__sr > span { animation: none; }
 }