.caret-settings{width:100%;min-width:0;aspect-ratio:1.42;display:grid;grid-template-columns:25% minmax(0,1fr);overflow:hidden;background:#fff;color:#171717;border:1px solid #171717;font-family:Space,'PingFang SC',Arial,sans-serif;text-align:left}
.caret-settings *{box-sizing:border-box}
.caret-settings-side{min-width:0;display:flex;flex-direction:column;background:#f7f7f4;border-right:1px solid #171717}
.caret-settings-brand{display:flex;align-items:center;gap:.5rem;padding:1.5rem 1.15rem 1.4rem;font-size:.78rem;font-weight:700;letter-spacing:-.055em}
.caret-settings-brand img{display:block;width:1.35rem;height:1.35rem;object-fit:contain}
.caret-settings-menu{display:grid}
.caret-settings-menu span{display:grid;grid-template-columns:1.5rem 1fr;gap:.4rem;align-items:center;min-height:2.65rem;padding:0 1.1rem;font-size:.75rem}
.caret-settings-menu span b{font-family:Instrument,serif;font-weight:400;font-size:1.15rem;color:#6050df}
.caret-settings-menu span i{display:block;color:#81817d;font:400 .53rem SFMono-Regular,Consolas,monospace;font-style:normal}
.caret-settings-menu span.active{background:#6050df;color:#fff}
.caret-settings-menu span.active b,.caret-settings-menu span.active i{color:#fff}
.caret-settings-status{margin:auto 0 0;padding:1rem 1.15rem;color:#6050df;font:400 .55rem SFMono-Regular,Consolas,monospace;letter-spacing:.04em}
.caret-settings-main{min-width:0;overflow:hidden;padding:1.65rem 2rem;background:#fff}
.caret-settings-main h3{font:400 clamp(2.7rem,5vw,5rem)/.9 Instrument,Georgia,serif;letter-spacing:-.065em;margin:0 0 .35rem}
.caret-settings-main>p{margin:0 0 1.4rem;color:#777;font-size:.7rem}
.caret-settings-label{display:block;margin:1.2rem 0 .5rem;color:#6050df;font:400 .6rem SFMono-Regular,Consolas,monospace;letter-spacing:.09em;text-transform:uppercase}
.caret-overview-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;border-bottom:1px solid #1717171c;padding:.65rem 0}
.caret-overview-row div{display:grid;gap:.18rem;min-width:0}
.caret-overview-row strong{font-size:.8rem;font-weight:400;white-space:nowrap}
.caret-overview-row small{color:#898986;font-size:.58rem;white-space:nowrap}
.caret-overview-row em{font:400 .52rem SFMono-Regular,Consolas,monospace;font-style:normal;color:#6050df;white-space:nowrap}
.caret-overview-row>span{font-size:.68rem;white-space:nowrap}
.caret-overview-key{display:flex;align-items:center;gap:.65rem;padding:.33rem 0;font-size:.67rem}
.caret-overview-key b{width:2.4rem;font-weight:600;flex:none}
.caret-overview-key span{color:#777}
.caret-overview-key i{width:1.5rem;height:.8rem;margin-left:auto;border-radius:1rem;background:#6050df;position:relative;flex:none}
.caret-overview-key i:after{content:'';position:absolute;right:.1rem;top:.1rem;width:.6rem;height:.6rem;border-radius:50%;background:#fff}
.caret-input-demo{box-sizing:border-box;background:#fff;color:#171717;border:1px solid #171717;padding:1rem 1.1rem 1.15rem;font-family:Space,'PingFang SC',Arial,sans-serif;text-align:left}
.caret-input-demo *{box-sizing:border-box}
.caret-input-top{display:flex;justify-content:space-between;gap:1rem;font:400 .55rem SFMono-Regular,Consolas,monospace;letter-spacing:.08em;color:#6b6b68}
.caret-input-top b{color:#6050df;font-size:.7rem;line-height:.5}
.caret-input-line{min-height:3rem;display:flex;align-items:center;gap:.25rem;font-size:1.05rem;white-space:nowrap;letter-spacing:-.04em}
.caret-input-preedit{border-bottom:1px solid #6050df;color:#6050df;letter-spacing:0}
.caret-input-line i{font-style:normal;color:#6050df;animation:caret-input-blink 1s steps(1,end) infinite}
.caret-input-popover{border:1px solid #171717;padding:.42rem;background:#f7f7f4}
.caret-input-popover>small{display:block;margin:0 0 .35rem .3rem;color:#6050df;font:400 .48rem SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
.caret-input-popover>div{display:flex;align-items:stretch;white-space:nowrap;font-size:.76rem}
.caret-input-popover strong,.caret-input-popover span{display:flex;align-items:center;gap:.23rem;padding:.35rem .4rem;font-weight:400}
.caret-input-popover strong{background:#6050df;color:#fff}
.caret-input-popover em{font:400 .45rem SFMono-Regular,Consolas,monospace;font-style:normal}
.caret-input-popover b{border:1px solid currentColor;padding:.1rem .15rem;font:400 .42rem SFMono-Regular,Consolas,monospace}
@keyframes caret-input-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(max-width:900px){
 .caret-settings-brand{padding:1rem .7rem .8rem;font-size:.65rem}
 .caret-settings-brand img{width:1rem;height:1rem}
 .caret-settings-menu span{min-height:2rem;grid-template-columns:1rem 1fr;gap:.2rem;padding:0 .7rem;font-size:.62rem}
 .caret-settings-menu span b{font-size:.9rem}
 .caret-settings-menu span i{font-size:.43rem}
 .caret-settings-main{padding:1rem 1.2rem}
 .caret-settings-main h3{font-size:clamp(2.1rem,5vw,3.5rem)}
 .caret-settings-main>p{margin-bottom:.5rem}
 .caret-settings-label{margin:.6rem 0 .3rem}
 .caret-overview-row{padding:.45rem 0}
 .caret-overview-row strong{font-size:.67rem}
 .caret-overview-row small{font-size:.5rem}
 .caret-overview-row em{font-size:.45rem}
 .caret-overview-key{font-size:.58rem;gap:.35rem}
 .caret-overview-key b{width:2rem}
 .caret-settings-status{padding:.7rem;font-size:.42rem}
}
@media(max-width:650px){
 .caret-settings{aspect-ratio:1.18;grid-template-columns:27% minmax(0,1fr)}
 .caret-settings-brand{gap:.2rem;padding:.7rem .45rem .6rem;font-size:.58rem}
 .caret-settings-brand img{width:.8rem;height:.8rem}
 .caret-settings-menu span{min-height:1.7rem;grid-template-columns:.8rem 1fr;gap:.1rem;padding:0 .45rem;font-size:.54rem}
 .caret-settings-menu span b{font-size:.8rem}
 .caret-settings-menu span i{font-size:.34rem}
 .caret-settings-main{padding:.8rem .85rem}
 .caret-settings-main h3{font-size:2.25rem}
 .caret-settings-main>p{font-size:.54rem}
 .caret-settings-label{font-size:.43rem;margin:.6rem 0 .25rem}
 .caret-overview-row{padding:.35rem 0}
 .caret-overview-row strong{font-size:.52rem}
 .caret-overview-row small{font-size:.4rem}
 .caret-overview-row em,.caret-overview-row>span{font-size:.39rem}
 .caret-overview-key{font-size:.44rem;gap:.25rem;padding:.22rem 0}
 .caret-overview-key b{width:1.3rem}
 .caret-overview-key i{width:1rem;height:.55rem}
 .caret-overview-key i:after{width:.39rem;height:.39rem;top:.08rem;right:.08rem}
 .caret-settings-status{font-size:.36rem;padding:.5rem}
}
@media(prefers-reduced-motion:reduce){.caret-input-line i{animation:none}}