.content-page .mdx-res,.content-page .mdx-slider,.content-page .mdx-fonttest{margin:28px 0}.content-page .mdx-res-stage{background:linear-gradient(#0000000a 1px,#0000 1px) 0 0/24px 24px,linear-gradient(90deg,#0000000a 1px,#0000 1px) 0 0/24px 24px,#fbfaf6;border:1px solid #ececec;border-radius:14px;width:100%;position:relative;overflow:hidden}.content-page .mdx-res-box{color:#6b6555;font:inherit;cursor:pointer;background:0 0;border:2px solid #c9c4b4;border-width:2px 2px 0 0;justify-content:flex-end;align-items:flex-start;padding:6px 8px;font-size:12px;font-weight:700;transition:background .25s,border-color .25s,color .25s;display:flex;position:absolute;bottom:0;left:0}.content-page .mdx-res-box.is-key{color:#1a1a1a;border-color:#1a1a1a}.content-page .mdx-res-box:hover{background:#ffd60026}.content-page .mdx-res-box.is-active{color:#1a1a1a;background:#ffd60059;border-color:#e0a800}.content-page .mdx-res-box span{white-space:nowrap;background:#ffffffd9;border-radius:999px;padding:2px 7px}.content-page .mdx-res-box.is-active span{background:#ffd600}.content-page .mdx-res-info{color:#444;background:#fff9d6;border-radius:12px;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:12px;padding:12px 14px;font-size:14px;display:flex}.content-page .mdx-res-info strong{color:#1a1a1a;font-size:16px}.content-page .mdx-slider-frame{--pos:50%;-webkit-user-select:none;user-select:none;background:#111;border:1px solid #ececec;border-radius:14px;position:relative;overflow:hidden}.content-page .mdx-slider-frame img{object-fit:cover;border:0;border-radius:0;width:100%;height:100%;margin:0;position:absolute;inset:0}.content-page .mdx-slider-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}.content-page .mdx-slider-line{top:0;bottom:0;left:var(--pos);pointer-events:none;background:#fff;width:2px;margin-left:-1px;position:absolute;box-shadow:0 0 14px 2px #ffd600b0}.content-page .mdx-slider-line:after{content:"";background:#ffd600 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") 50%/18px no-repeat;border-radius:50%;width:38px;height:38px;margin:-19px 0 0 -19px;position:absolute;top:50%;left:50%;box-shadow:0 4px 14px #0006}.content-page .mdx-slider-tag{color:#fff;letter-spacing:.04em;pointer-events:none;background:#000a;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;position:absolute;top:12px}.content-page .mdx-slider-tag.is-left{left:12px}.content-page .mdx-slider-tag.is-right{color:#1a1a1a;background:#ffd600;right:12px}.content-page .mdx-slider-frame input[type=range]{opacity:0;cursor:ew-resize;touch-action:pan-y;width:100%;height:100%;margin:0;position:absolute;inset:0}.content-page .mdx-slider-frame:has(input:focus-visible){outline-offset:2px;outline:3px solid #ffc400}.content-page .mdx-slider figcaption{color:#666;text-align:center;margin-top:8px;font-size:13.5px}.content-page .mdx-fonttest{background:#fcfbf7;border:1px solid #ececec;border-radius:18px;padding:18px}.content-page .mdx-fonttest-bar{flex-direction:column;gap:10px;margin-bottom:16px;display:flex}.content-page .mdx-fonttest-bar .mdx-chips{margin:0}.content-page .mdx-fonttest-input{color:#444;flex-direction:column;gap:6px;font-size:13px;font-weight:700;display:flex}.content-page .mdx-fonttest-input input{width:100%;font:inherit;color:#1a1a1a;background:#fff;border:1px solid #e3e3e3;border-radius:12px;padding:11px 14px;font-size:16px;font-weight:600}.content-page .mdx-fonttest-input input:focus{border-color:#ffd600;outline:none;box-shadow:0 0 0 3px #ffd60055}.content-page .mdx-fonttest-dot{vertical-align:-1px;border:2px solid;border-radius:50%;width:12px;height:12px;margin-right:6px;display:inline-block}.content-page .mdx-fonttest-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.content-page .mdx-fonttest-grid li{margin:0}.content-page .mdx-fonttest-card{aspect-ratio:16/9;background:var(--ft-bg);text-align:center;border-radius:12px;place-items:center;padding:0 6%;transition:transform .2s;display:grid;overflow:hidden;container-type:inline-size}.content-page .mdx-fonttest-grid li:hover .mdx-fonttest-card{transform:translateY(-3px)}.content-page .mdx-fonttest-card span{-webkit-line-clamp:3;color:var(--ft-fill);font-size:var(--ft-size);letter-spacing:.01em;overflow-wrap:anywhere;-webkit-box-orient:vertical;line-height:1.02;display:-webkit-box;overflow:hidden}.content-page .has-outline .mdx-fonttest-card span{-webkit-text-stroke:.9cqw var(--ft-stroke);paint-order:stroke fill}.content-page .has-shadow .mdx-fonttest-card span{text-shadow:.6cqw .8cqw #000000b3}.content-page .is-caps .mdx-fonttest-card span{text-transform:uppercase}.content-page .mdx-fonttest-meta{padding:8px 2px 0}.content-page .mdx-fonttest-meta strong{font-size:15px}.content-page .mdx-fonttest-meta p{color:#555;margin:2px 0 4px;font-size:13.5px;line-height:1.5}.content-page .mdx-fonttest-meta a{font-size:12.5px;font-weight:700}@media (prefers-reduced-motion:reduce){.content-page .mdx-res-box,.content-page .mdx-fonttest-card{transition:none}.content-page .mdx-fonttest-grid li:hover .mdx-fonttest-card{transform:none}}@media (width<=639px){.content-page .mdx-fonttest{padding:14px}.content-page .mdx-fonttest-grid{grid-template-columns:1fr}.content-page .mdx-res-box{padding:3px 4px;font-size:10px}.content-page .mdx-res-box span{padding:1px 5px}}