/* Typography hover previews (.x-ty-*) */
@property --x-ty-w { syntax: "<integer>"; inherits: true; initial-value: 100; }

.x-ty-c { text-align: center; gap: 7px; }
.x-ty-l { font: 9px var(--mono); color: var(--key); letter-spacing: .03em; white-space: nowrap; }
.x-ty-dim { color: var(--muted); }
.x-ty-row { display: flex; align-items: center; gap: 8px; }
.x-ty-two { display: flex; justify-content: center; align-items: center; gap: 16px; }
.x-ty-pulse { animation: x-ty-pulse 2.4s ease-in-out infinite; }
@keyframes x-ty-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* glyph + guides */
.x-ty-g { position: relative; font-size: var(--s); line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.x-ty-g .x-ty-t { display: block; position: relative; z-index: 1; }
.x-ty-ln { position: absolute; left: -8px; right: -8px; top: calc(var(--s) * var(--y)); height: 0; border-top: 1px solid #3a3a44; z-index: 2; }
.x-ty-ln.k { border-top-color: var(--key); }
.x-ty-ln b { position: absolute; left: calc(100% + 4px); top: -5px; font: 400 8px var(--mono); letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.x-ty-ln.k b { color: var(--key); }
.x-ty-z { position: absolute; left: -8px; right: -8px; top: calc(var(--s) * var(--y)); height: calc(var(--s) * var(--h)); background: var(--key-soft); animation: x-ty-pulse 2.4s ease-in-out infinite; }
.x-ty-bl { position: relative; font-size: 60px; line-height: 1; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 6px; }
.x-ty-bl span { line-height: 1; }
.x-ty-bl .x-ty-ln { --s: 60px; }

/* metrics */
.x-ty-em { position: relative; width: 84px; height: 84px; border: 1px dashed var(--key); display: grid; place-items: center; font-size: 84px; line-height: 1; font-weight: 600; background: var(--key-soft); animation: x-ty-emp 3s ease-in-out infinite; }
.x-ty-em span { display: block; line-height: 1; letter-spacing: -.03em; margin-top: -2px; }
.x-ty-em b { position: absolute; left: 0; top: -14px; font: 9px var(--mono); color: var(--key); }
@keyframes x-ty-emp { 0%, 100% { transform: scale(1); } 50% { transform: scale(.82); } }
.x-ty-lh { font-size: 11px; font-weight: 500; width: 150px; text-align: left; color: var(--text); animation: x-ty-lh 3.4s ease-in-out infinite; }
.x-ty-lh p { margin: 0; padding: 0; background: linear-gradient(90deg, var(--key-soft), transparent); }
@keyframes x-ty-lh { 0%, 100% { line-height: 1; } 50% { line-height: 1.8; } }
.x-ty-tr { font-size: 22px; font-weight: 700; animation: x-ty-tr 3.4s ease-in-out infinite; white-space: nowrap; }
@keyframes x-ty-tr { 0%, 100% { letter-spacing: -.05em; } 50% { letter-spacing: .22em; } }
.x-ty-kern { position: relative; font-size: 64px; font-weight: 700; line-height: 1; display: flex; letter-spacing: 0; font-kerning: none; }
.x-ty-kern i { position: absolute; left: 36px; right: 36px; bottom: -6px; height: 0; border-top: 1px solid var(--key); opacity: .0; }
.x-ty-kv { animation: x-ty-kv 3.2s ease-in-out infinite; }
.x-ty-kv b { font-weight: inherit; animation: x-ty-kvc 3.2s ease-in-out infinite; }
@keyframes x-ty-kv { 0%, 25% { transform: translateX(0); } 55%, 85% { transform: translateX(-.17em); } 100% { transform: translateX(0); } }
@keyframes x-ty-kvc { 0%, 25% { color: var(--text); } 55%, 85% { color: var(--key); } 100% { color: var(--text); } }
.x-ty-os { line-height: 1; white-space: nowrap; }

/* classification */
.x-ty-sp { font-size: 44px; line-height: 1.1; white-space: nowrap; }
.x-ty-axis { position: relative; font-size: 56px; }
.x-ty-axis span { position: relative; z-index: 1; }
.x-ty-axis i { position: absolute; left: 50%; top: -6px; bottom: -6px; border-left: 1px solid var(--key); }
.x-ty-geo { position: relative; }
.x-ty-geo i { position: absolute; left: .02em; top: .17em; width: .7em; height: .7em; border: 1px dashed var(--key); border-radius: 50%; animation: x-ty-pulse 2.4s ease-in-out infinite; }
.x-ty-geo span { position: relative; }
.x-ty-mono { display: flex; font: 600 26px var(--mono); }
.x-ty-mono span { width: 28px; height: 40px; display: grid; place-items: center; border: 1px dashed #3a3a44; margin-left: -1px; }
.x-ty-mono span:nth-child(odd) { background: var(--key-soft); }

/* roles */
.x-ty-rrow { display: flex; align-items: center; gap: 12px; }
.x-ty-lad { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; width: 36px; }
.x-ty-lad i { height: 4px; background: #2f2f37; border-radius: 2px; }
.x-ty-lad i.on { background: var(--key); }
.x-ty-rbody { text-align: left; min-width: 150px; }
.x-ty-dsp { font-size: 52px; line-height: 1; font-weight: 800; letter-spacing: -.045em; white-space: nowrap; }
.x-ty-hd { font-size: 22px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.x-ty-card { background: #18181d; border: 1px solid #2a2a31; border-radius: 8px; padding: 10px 12px; width: 150px; }
.x-ty-ti { font-size: 15px; font-weight: 600; line-height: 1.3; margin-bottom: 7px; }
.x-ty-card i { display: block; height: 5px; border-radius: 3px; background: #2a2a31; margin-top: 5px; }
.x-ty-bd { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text); font-weight: 400; width: 150px; }
.x-ty-ph { width: 150px; height: 44px; border-radius: 6px; background: linear-gradient(135deg, #24242a, #1a1a1f); border: 1px solid #2a2a31; }
.x-ty-cp { font-size: 9px; color: var(--muted); margin-top: 5px; line-height: 1.3; width: 150px; }
.x-ty-tabs { display: flex; gap: 14px; font: 600 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid #2a2a31; padding: 0 4px 6px; }
.x-ty-tabs .on { color: var(--key); box-shadow: 0 7px 0 -6px var(--key); }
.x-ty-btnrow { display: flex; gap: 10px; align-items: center; margin: 4px 0; }
.x-ty-btn { font: 600 12px var(--sans); background: var(--key); color: #111; padding: 8px 18px; border-radius: 8px; }
.x-ty-chip { font: 600 10px var(--sans); letter-spacing: .06em; text-transform: uppercase; border: 1px solid #3a3a44; padding: 4px 10px; border-radius: 99px; color: var(--text-2); }
.x-ty-code { font: 500 11px/1.6 var(--mono); background: #131317; border: 1px solid #2a2a31; border-radius: 8px; padding: 10px 14px; text-align: left; color: var(--text-2); }
.x-ty-code b { color: var(--key); font-weight: 500; }
.x-ty-num { font: 600 13px var(--sans); font-feature-settings: "tnum"; width: 190px; }
.x-ty-num div { display: grid; grid-template-columns: 40px 1fr 56px; gap: 8px; padding: 5px 0; border-bottom: 1px solid #24242a; text-align: right; }
.x-ty-num span { text-align: left; font-weight: 500; font-size: 10px; color: var(--muted); align-self: center; }
.x-ty-num em { font-style: normal; color: var(--key); }
.x-ty-num em.dn { color: #ff7a7a; }

.x-ty-ms { display: flex; align-items: baseline; gap: 6px; font-weight: 700; letter-spacing: -.02em; border-bottom: 1px solid var(--key); padding: 0 4px 2px; }
.x-ty-ms span { animation: x-ty-rise 3.2s ease-in-out infinite; }
.x-ty-ms span:nth-child(2) { animation-delay: .1s; } .x-ty-ms span:nth-child(3) { animation-delay: .2s; } .x-ty-ms span:nth-child(4) { animation-delay: .3s; } .x-ty-ms span:nth-child(5) { animation-delay: .4s; } .x-ty-ms span:nth-child(6) { animation-delay: .5s; }
.x-ty-ms2 { display: none; }
@keyframes x-ty-rise { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.x-ty-fl { container-type: inline-size; width: 230px; border: 1px dashed #3a3a44; padding: 8px 10px; animation: x-ty-flw 4s ease-in-out infinite; box-sizing: border-box; overflow: hidden; }
.x-ty-fl h4 { margin: 0; font-size: clamp(11px, 14cqw, 30px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; text-align: left; white-space: nowrap; }
@keyframes x-ty-flw { 0%, 100% { width: 250px; } 50% { width: 100px; } }
.x-ty-ramp { width: 170px; }
.x-ty-ramp div { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; border-bottom: 1px solid #24242a; line-height: 1.15; }
.x-ty-ramp em { font: normal 9px var(--mono); color: var(--key); }
.x-ty-bg { background-color: #131317; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 15px, rgba(198, 255, 61, .25) 15px, rgba(198, 255, 61, .25) 16px); padding: 0 12px; text-align: left; animation: x-ty-gridp 3s ease-in-out infinite; }
@keyframes x-ty-gridp { 0%, 100% { background-color: #131317; } 50% { background-color: #15151a; } }
.x-ty-bgh { font-size: 22px; line-height: 32px; font-weight: 800; letter-spacing: -.03em; }
.x-ty-bgp { font-size: 10.5px; line-height: 16px; color: var(--text-2); }
.x-ty-dt { padding: 12px 14px; text-align: left; animation: x-ty-dtz 4s ease-in-out infinite; font-size: 9px; }
.x-ty-dth { font-size: 1.7em; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; line-height: 1.15; }
.x-ty-dtp { font-size: 1em; line-height: 1.35; color: var(--text-2); }
.x-ty-dtb { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; align-items: center; gap: 6px; font-size: 8px; color: var(--muted); }
.x-ty-dtb span:last-child { font-size: 13px; color: var(--key); }
.x-ty-dtb i { flex: 1; height: 2px; background: #2f2f37; position: relative; }
.x-ty-dtb i::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--key); animation: x-ty-knob 4s ease-in-out infinite; }
@keyframes x-ty-knob { 0%, 100% { left: 0; } 50% { left: calc(100% - 8px); } }
@keyframes x-ty-dtz { 0%, 100% { font-size: 8.5px; } 50% { font-size: 12.5px; } }
.x-ty-hc { width: 112px; padding: 8px 10px; border: 1px solid #2a2a31; border-radius: 8px; background: #16161a; text-align: left; font-size: 11px; font-weight: 500; line-height: 1.5; color: #bdbdc3; }
.x-ty-hc2 div:nth-child(1) { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.2; letter-spacing: -.02em; }
.x-ty-hc2 div:nth-child(2) { font-size: 11px; font-weight: 600; color: var(--key); margin-bottom: 2px; }
.x-ty-hc2 div:nth-child(3) { font-size: 9px; font-weight: 400; color: var(--muted); }
.x-ty-hc > .x-ty-l { margin-top: 5px; }

/* typesetting rules */
.x-ty-meas { position: relative; width: 200px; padding-bottom: 20px; }
.x-ty-meas p { margin: 0; font-size: 10px; line-height: 1.55; color: var(--text-2); text-align: left; width: 100%; }
.x-ty-meas i { position: absolute; left: 0; right: 0; bottom: 8px; height: 5px; border: 1px solid var(--key); border-top: none; animation: x-ty-meas 3.4s ease-in-out infinite; }
.x-ty-meas b { position: absolute; left: 0; right: 0; bottom: -6px; font: 9px var(--mono); color: var(--key); text-align: center; }
@keyframes x-ty-meas { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.x-ty-vr { width: 180px; text-align: left; position: relative; padding-left: 14px; background: repeating-linear-gradient(to bottom, transparent 0 14px, rgba(198, 255, 61, .12) 14px 15px); }
.x-ty-vrh { font-size: 18px; line-height: 30px; font-weight: 800; letter-spacing: -.03em; }
.x-ty-vr p { margin: 0 0 15px; font-size: 9.5px; line-height: 15px; color: var(--text-2); }
.x-ty-vrt { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; display: flex; flex-direction: column; justify-content: space-between; }
.x-ty-vrt i { width: 6px; height: 1px; background: var(--key); }
.x-ty-rr { font-size: 11px; line-height: 1.7; text-align: left; color: var(--text); font-weight: 500; }
.x-ty-rr div { white-space: nowrap; }
.x-ty-rr i { display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: var(--key); }
.x-ty-bw { width: 122px; text-align: left; }
.x-ty-bw h5 { margin: 0 0 6px; font-size: 13px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; width: 122px; text-wrap: wrap; border: 1px dashed #2f2f37; padding: 5px 6px; box-sizing: border-box; }
.x-ty-bwb h5 { text-wrap: balance; border-color: var(--key); }
.x-ty-pg { display: flex; gap: 14px; }
.x-ty-col { width: 82px; height: 96px; border: 1px solid #2a2a31; border-radius: 4px; padding: 6px 8px; box-sizing: border-box; background: #131317; display: flex; flex-direction: column; gap: 5px; }
.x-ty-col i { display: block; height: 5px; border-radius: 2px; background: #2f2f37; flex: none; }
.x-ty-col i.hit { background: var(--key); animation: x-ty-pulse 2.4s ease-in-out infinite; }
.x-ty-col i.gap { background: transparent; height: 3px; }
.x-ty-col i.w2 { background: #2f2f37; }
.x-ty-cn { font: 8px var(--mono); color: var(--muted); }
.x-ty-hy div { white-space: nowrap; }
.x-ty-hy { font-size: 11px; line-height: 1.6; text-align: left; width: 100px; font-weight: 500; }
.x-ty-hy u { text-decoration: none; color: var(--key); }
.x-ty-hy > .x-ty-l { margin-top: 5px; }
.x-ty-hp { position: relative; text-align: left; font-size: 11px; font-weight: 500; line-height: 1.55; padding-left: 12px; }
.x-ty-hp p { margin: 0 0 5px; }
.x-ty-hp i { position: absolute; left: 12px; top: -4px; height: 52px; border-left: 1px dashed var(--key); }
.x-ty-hpg p { text-indent: -.42em; }
.x-ty-dc { margin: 0; width: 190px; font-size: 10px; line-height: 1.55; color: var(--text-2); text-align: left; }
.x-ty-dc b { float: left; font-size: 40px; line-height: .86; font-weight: 800; color: var(--key); margin: 3px 5px 0 0; }
.x-ty-lg { text-align: center; }
.x-ty-lg .h { font-family: "Hoefler Text", Palatino, serif; font-size: 40px; line-height: 1.1; }
.x-ty-lg .s { font-family: var(--sans); font-weight: 500; font-size: 17px; margin-top: 6px; color: var(--text-2); }
.x-ty-sc { text-align: center; }
.x-ty-sc .a { font: 700 30px "Hoefler Text", Palatino, serif; letter-spacing: .02em; }
.x-ty-sc .a span { font-size: 20px; font-weight: 400; }
.x-ty-sc .b { font: 700 30px "Hoefler Text", Palatino, serif; letter-spacing: .02em; font-variant-caps: all-small-caps; margin-top: 8px; font-feature-settings: "c2sc", "smcp"; }
.x-ty-sc .b::first-letter { font-variant-caps: normal; }
.x-ty-tb { position: relative; font: 600 18px var(--sans); text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.x-ty-tb > .x-ty-l { margin-top: 4px; }
.x-ty-tb i { position: absolute; right: 27px; top: -2px; height: 62px; border-left: 1px dashed var(--key); opacity: .7; }
.x-ty-sz { font: 600 24px/1.2 var(--sans); text-align: center; letter-spacing: .04em; }
.x-ty-ss { text-align: left; }
.x-ty-ss div { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid #24242a; width: 210px; }
.x-ty-ss b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.x-ty-ss em { font: normal 9px var(--mono); color: var(--muted); white-space: nowrap; }
.x-ty-ss em.k { color: var(--key); }
.x-ty-q { font: 600 20px var(--sans); color: var(--text-2); white-space: nowrap; }
.x-ty-q.g { color: var(--text); }
.x-ty-ok { font-size: 25px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.x-ty-ok div:nth-child(odd) { margin-bottom: 0; }
.x-ty-ok .x-ty-l { margin: 2px 0 7px; font-size: 9px; }

/* Korean / CJK */
.x-ty-kb { width: 104px; font-size: 12px; line-height: 1.55; font-weight: 500; text-align: left; border: 1px dashed #3a3a44; padding: 8px; box-sizing: content-box; }
.x-ty-kb2 { }
.x-ty-ow { width: 100px; font: 500 10px var(--mono); border: 1px dashed #3a3a44; padding: 8px; box-sizing: border-box; text-align: left; overflow: hidden; }
.x-ty-ow span { display: block; margin-bottom: 8px; color: var(--text); }
.x-ty-ow1 span { white-space: nowrap; background: linear-gradient(90deg, transparent 70%, rgba(198, 255, 61, .3)); }
.x-ty-ow2 span { overflow-wrap: anywhere; }
.x-ty-ow2 { border-color: var(--key); }
.x-ty-lb { font-size: 17px; line-height: 1.35; text-align: left; font-weight: 500; }
.x-ty-lb .x { color: var(--key); }
.x-ty-hl { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.x-ty-hl .r { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 4px 0; border-bottom: 1px solid #24242a; width: 190px; }
.x-ty-hl em { font: normal 9px var(--mono); color: var(--muted); }
.x-ty-hl .g em { color: var(--key); }
.x-ty-hl b { font-family: var(--sans); font-weight: 600; }
.x-ty-fs { text-align: center; }
.x-ty-fs code { font: 10px var(--mono); color: var(--muted); }
.x-ty-fs code u { color: var(--key); text-decoration: none; }
.x-ty-fs code s { color: var(--text-2); text-decoration: none; }
.x-ty-fs > div:nth-child(2) { font-size: 26px; font-weight: 600; margin: 10px 0 6px; }
.x-ty-fs .la { font-family: var(--sans); color: var(--key); }
.x-ty-ba { position: relative; font-size: 34px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.x-ty-ba i { display: none; }
.x-ty-ba span { background: linear-gradient(to bottom, transparent calc(50% + .44em), var(--key) calc(50% + .44em), var(--key) calc(50% + .44em + 1px), transparent calc(50% + .44em + 1px)); }
.x-ty-ur { text-align: center; width: 220px; }
.x-ty-ur .t { font-size: 30px; font-weight: 600; margin-bottom: 10px; }
.x-ty-ur .fl { display: flex; gap: 8px; }
.x-ty-ur .f { flex: 1; border: 1px solid #2a2a31; border-radius: 6px; background: #16161a; padding: 6px 8px; text-align: left; position: relative; overflow: hidden; }
.x-ty-ur .f b { display: block; font: 600 9px var(--mono); color: var(--text); }
.x-ty-ur .f em { display: block; font: normal 8px var(--mono); color: var(--muted); margin-top: 2px; }
.x-ty-ur .f i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--key); width: 100%; transform-origin: left; animation: x-ty-load 3s ease-in-out infinite; }
.x-ty-ur .f.h i { animation-delay: .6s; }
@keyframes x-ty-load { 0% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
.x-ty-nu { width: 200px; }
.x-ty-nu div { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #24242a; }
.x-ty-nu b { font-size: 18px; font-weight: 600; white-space: nowrap; }
.x-ty-nu em { font: normal 9px var(--mono); color: var(--muted); white-space: nowrap; margin-left: 12px; }
.x-ty-sb { font-size: 17px; font-weight: 500; text-align: center; }
.x-ty-sb b { font-family: var(--sans); font-weight: 600; }
.x-ty-sb i { display: inline-block; width: 6px; height: 14px; background: var(--key-soft); border-left: 1px solid var(--key); border-right: 1px solid var(--key); vertical-align: -2px; box-sizing: border-box; }
.x-ty-sb > div { margin: 3px 0; }
.x-ty-kf { font-size: 30px; letter-spacing: 0; }
.x-ty-kw { display: flex; gap: 6px; font-size: 32px; line-height: 1.1; }
.x-ty-kw2 { display: flex; gap: 6px; }
.x-ty-kw2 em { width: 32px; text-align: center; font: normal 8px var(--mono); color: var(--muted); }
.x-ty-sp2 { text-align: center; line-height: 1.6; }
.x-ty-nn { text-align: center; }
.x-ty-nn b { display: block; font-size: 30px; font-weight: inherit; }
.x-ty-nn em { font: normal 9px var(--mono); color: var(--muted); }
.x-ty-ls { width: 210px; }
.x-ty-ls div { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid #24242a; }
.x-ty-ls b { font-size: 15px; font-weight: 600; }
.x-ty-ls em { font: normal 9px var(--mono); white-space: nowrap; margin-left: 10px; }
.x-ty-ls em.key { color: var(--key); } .x-ty-ls em.dim { color: var(--muted); }
.x-ty-lhh { width: 120px; font-size: 11px; text-align: left; font-weight: 500; }
.x-ty-lhh p { margin: 0 0 6px; background: repeating-linear-gradient(to bottom, rgba(198, 255, 61, .0) 0, rgba(198, 255, 61, .0) 100%); }
.x-ty-vm { position: relative; font-size: 44px; font-weight: 600; line-height: normal; background: var(--key-soft); border: 1px dashed var(--key); padding: 0 12px; }
.x-ty-vm span { display: block; line-height: normal; }
.x-ty-wc { width: 190px; }
.x-ty-wc div { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: 1px solid #24242a; }
.x-ty-wc b { font-size: 11px; }
.x-ty-wc em { font: normal 9px var(--mono); color: var(--key); }
.x-ty-wc em.dim { color: var(--muted); }
.x-ty-fw { display: flex; }
.x-ty-fw span { width: 26px; height: 34px; display: grid; place-items: center; font-size: 22px; border: 1px dashed #33333b; margin-left: -1px; box-sizing: border-box; }
.x-ty-fw span.p { background: var(--key-soft); border-color: var(--key); color: var(--key); }
.x-ty-fw span.p { align-items: end; justify-items: start; padding: 0 0 4px 3px; }
.x-ty-pc > div:not(.x-ty-l) { display: flex; justify-content: center; }
.x-ty-pc span { display: flex; width: 24px; height: 32px; font-size: 24px; line-height: 32px; border: 1px dashed #33333b; margin-left: -1px; box-sizing: border-box; overflow: hidden; }
.x-ty-pc span b { flex: none; width: 24px; font-weight: 500; text-align: left; }
.x-ty-pc span.t { width: 13px; border-color: var(--key); }
.x-ty-pc span.o { justify-content: flex-end; }
.x-ty-pc span.c { justify-content: flex-start; }
.x-ty-pc > .x-ty-l { margin: 3px 0; }
.x-ty-kq { width: 214px; }
.x-ty-kq div { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; border-bottom: 1px solid #24242a; }
.x-ty-kq b { font-size: 12px; font-weight: 500; }
.x-ty-kq em { font: normal 11px var(--mono); color: var(--key); }
.x-ty-sk { text-align: center; font-size: 17px; font-weight: 500; }
.x-ty-sk > div { display: flex; justify-content: center; align-items: center; margin-bottom: 5px; }
.x-ty-sk i { width: 10px; height: 14px; border-bottom: 2px solid var(--key); margin: 0 1px; }
.x-ty-sk .x { margin-top: 5px; color: var(--text-2); }
.x-ty-vw { display: flex; flex-direction: row-reverse; gap: 14px; height: 112px; }
.x-ty-vw p { margin: 0; writing-mode: vertical-rl; font-size: 15px; font-weight: 500; letter-spacing: .08em; white-space: nowrap; }
.x-ty-vw p:first-child { color: var(--key); }
.x-ty-rb { font-size: 40px; font-weight: 500; line-height: 1.5; }
.x-ty-rb rt { font-size: 12px; color: var(--key); }

/* expressive */
.x-ty-os2 { padding: 8px 12px; }
.x-ty-os2 .big { position: absolute; left: -8px; top: -26px; font-size: 168px; font-weight: 900; letter-spacing: -.06em; line-height: 1; color: #24242a; }
.x-ty-os2 p { position: absolute; left: 14px; bottom: 12px; margin: 0; font-size: 10px; line-height: 1.35; color: var(--key); font-weight: 600; z-index: 1; }
.x-ty-cr { }
.x-ty-cr div { position: absolute; left: 6px; top: 58px; font-size: 104px; font-weight: 900; line-height: 1; letter-spacing: -.05em; white-space: nowrap; animation: x-ty-crop 3.6s ease-in-out infinite; }
.x-ty-cr b { position: absolute; right: 8px; top: 8px; font: 500 8px var(--mono); color: var(--key); }
@keyframes x-ty-crop { 0%, 100% { transform: translateY(8px); } 50% { transform: translateY(-14px); } }
.x-ty-st { text-align: left; font-size: 46px; font-weight: 900; line-height: .8; letter-spacing: -.045em; }
.x-ty-st div { padding: 2px 0; }
.x-ty-st .k { color: var(--key); }
.x-ty-ol { font-size: 44px; font-weight: 900; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1.5px var(--key); line-height: 1.1; }
.x-ty-tm { font-size: 64px; font-weight: 900; letter-spacing: -.03em; line-height: 1; color: transparent; background: repeating-linear-gradient(115deg, #3b3b46 0 10px, var(--key) 10px 22px, #8a8a93 22px 34px, #2a2a31 34px 46px); background-size: 92px 100%; -webkit-background-clip: text; background-clip: text; animation: x-ty-mask 3.2s linear infinite; }
@keyframes x-ty-mask { to { background-position: 92px 0; } }
.x-ty-mx { font-size: 24px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.x-ty-mx i { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; color: var(--key); letter-spacing: 0; font-size: 28px; }
.x-ty-ma { text-align: left; }
.x-ty-ma code { display: block; font: 500 9px var(--mono); color: var(--key); letter-spacing: .08em; }
.x-ty-ma div { font-size: 54px; line-height: 1.05; font-weight: 800; letter-spacing: -.045em; margin: 4px 0; }
.x-ty-ma code.b { color: var(--muted); }
.x-ty-va { font-size: 58px; line-height: 1; letter-spacing: -.03em; font-weight: 700; font-variation-settings: "wght" var(--x-ty-w); animation: x-ty-wg 3.6s ease-in-out infinite; }
.x-ty-vl { font: 9px var(--mono); color: var(--key); }
.x-ty-vl .n::after { content: counter(w); counter-reset: w var(--x-ty-w); animation: x-ty-wg 3.6s ease-in-out infinite; }
.x-ty-vl .n { counter-reset: w var(--x-ty-w); animation: x-ty-wg 3.6s ease-in-out infinite; }
.x-ty-vbar { width: 150px; height: 2px; background: #2f2f37; position: relative; }
.x-ty-vbar i { position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--key); animation: x-ty-knob2 3.6s ease-in-out infinite; }
@keyframes x-ty-knob2 { 0%, 100% { left: 0; } 50% { left: calc(100% - 8px); } }
@keyframes x-ty-wg { 0%, 100% { --x-ty-w: 100; } 50% { --x-ty-w: 900; } }
.x-ty-kt { display: flex; font-size: 38px; line-height: 1; letter-spacing: -.01em; }
.x-ty-kt span { display: inline-block; animation: x-ty-kt 2.6s ease-in-out infinite; }
@keyframes x-ty-kt { 0%, 100% { font-weight: 200; transform: translateY(0) scale(1); color: var(--text-2); } 35% { font-weight: 900; transform: translateY(-9px) scale(1.18); color: var(--key); } 70% { font-weight: 200; transform: translateY(0) scale(1); color: var(--text-2); } }
.x-ty-mq { width: 250px; overflow: hidden; border-top: 1px solid #2a2a31; border-bottom: 1px solid #2a2a31; padding: 8px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.x-ty-mq > div { display: flex; width: max-content; font: 600 14px var(--mono); animation: x-ty-mq 6s linear infinite; }
.x-ty-mq span { white-space: nowrap; flex: none; }
@keyframes x-ty-mq { to { transform: translateX(-50%); } }
.x-ty-sr { font-size: 26px; font-weight: 800; letter-spacing: -.03em; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; width: 220px; line-height: 1.15; }
.x-ty-sr span { display: block; overflow: hidden; padding: 2px 0; }
.x-ty-sr b { display: block; font-weight: inherit; animation: x-ty-up 3.6s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes x-ty-up { 0% { transform: translateY(110%); } 18%, 78% { transform: translateY(0); } 92%, 100% { transform: translateY(-110%); } }

/* Hangul syllable block */
.x-ty-hg { position: relative; width: 120px; height: 100px; }
.x-ty-hgj { position: absolute; inset: 0; animation: x-ty-hgj 4.2s ease-in-out infinite; }
.x-ty-hgj i { position: absolute; left: 50%; top: 50%; font-style: normal; font-size: 30px; font-weight: 600; color: var(--text-2); transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); }
.x-ty-sq { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border: 1px dashed var(--key); background: var(--key-soft); display: grid; place-items: center; opacity: 0; animation: x-ty-sq 4.2s ease-in-out infinite; }
.x-ty-sq span { font-size: 56px; font-weight: 700; line-height: 1; }
@keyframes x-ty-hgj { 0%, 30% { opacity: 1; transform: scale(1); } 52% { opacity: 0; transform: scale(.35); } 92% { opacity: 0; transform: scale(.35); } 100% { opacity: 1; transform: scale(1); } }
@keyframes x-ty-sq { 0%, 42% { opacity: 0; transform: scale(.85); } 60%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.85); } }
.x-ty-sz b { font-weight: inherit; color: var(--key); }

/* Demos that rely on Inter's variable axes or OpenType features keep Inter under the Nimbus family. */
.x-ty-va, .x-ty-kt, .x-ty-os, .x-ty-ss, .x-ty-sz, .x-ty-lg .s { font-family: Inter, system-ui, sans-serif; }
/* Anatomy guide lines are positioned from Inter's metrics (x-height .546em etc.), so those glyph specimens stay in Inter. */
.x-ty-g, .x-ty-bl { font-family: Inter, system-ui, sans-serif; }