.caret-page{background:var(--paper);color:var(--ink)}
.caret-page .header{background:var(--paper)}
.caret-page .brand span,.caret-page .header nav a:hover,.caret-page .header nav a[aria-current=page]{color:var(--blue)}
.caret-page .header-code{color:#777570}
.caret-hero{min-height:calc(88svh - 5.8rem);padding:1.5rem clamp(1.4rem,3.5vw,4rem) 3rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.caret-hero-top,.caret-hero-bottom>span,.caret-section-index,.caret-stage-meta,.caret-stage-foot,.caret-notes>div>span,.caret-end>span,.caret-end>a{font:400 .7rem var(--mono);letter-spacing:.06em}
.caret-hero-top,.caret-stage-meta,.caret-stage-foot{display:flex;justify-content:space-between;gap:1rem}
.caret-hero-top a:hover{color:var(--blue)}
.caret-hero h1{font-size:clamp(9rem,25vw,32rem);line-height:.68;letter-spacing:-.085em;margin:0 0 0 -.07em;font-weight:700;white-space:nowrap}
.caret-hero h1 span{color:var(--blue)}
.caret-hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:2rem}
.caret-hero-bottom p{font-size:clamp(1.6rem,3vw,3.2rem);letter-spacing:-.065em;line-height:1.1;margin:0}
.caret-hero-bottom>span{white-space:nowrap;color:#777570}
.caret-stage{min-height:clamp(42rem,80svh,66rem);padding:2rem clamp(1.4rem,3.5vw,4rem);background:#6050df;color:#fff;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.caret-stage-meta,.caret-stage-foot{color:#dfdcff}
.caret-stage-body{display:flex;align-items:center;justify-content:center;flex:1;padding:4rem 0}
.caret-input-demo--hero{width:min(100%,76rem);min-height:23rem;padding:clamp(1.25rem,2.5vw,3rem);box-shadow:clamp(.8rem,1.5vw,1.7rem) clamp(.8rem,1.5vw,1.7rem) 0 #171717}
.caret-input-demo--hero .caret-input-top{font-size:clamp(.65rem,.8vw,.85rem)}
.caret-input-demo--hero .caret-input-line{min-height:10rem;font-size:clamp(2rem,4.6vw,6rem)}
.caret-input-demo--hero .caret-input-popover{width:max-content;max-width:100%;padding:clamp(.55rem,.9vw,1rem)}
.caret-input-demo--hero .caret-input-popover>small{font-size:clamp(.56rem,.75vw,.8rem);margin-bottom:.7rem}
.caret-input-demo--hero .caret-input-popover>div{font-size:clamp(1.05rem,2vw,2.2rem)}
.caret-input-demo--hero .caret-input-popover strong,.caret-input-demo--hero .caret-input-popover span{gap:.5rem;padding:.65rem .8rem}
.caret-input-demo--hero .caret-input-popover em,.caret-input-demo--hero .caret-input-popover b{font-size:clamp(.55rem,.7vw,.8rem)}
.caret-settings-section{padding:clamp(5rem,9vw,10rem) clamp(1.4rem,3.5vw,4rem);background:var(--paper)}
.caret-settings-heading{display:grid;grid-template-columns:1fr minmax(14rem,25%);column-gap:3rem;align-items:end;margin-bottom:clamp(3rem,5vw,6rem)}
.caret-settings-heading .caret-section-index{grid-column:1/-1;margin-bottom:clamp(2rem,4vw,5rem)}
.caret-settings-heading h2{font-size:clamp(4rem,9vw,11rem);line-height:.88;letter-spacing:-.085em;font-weight:700;margin:0}
.caret-settings-heading h2 em{font-family:Instrument,serif;font-weight:400;letter-spacing:-.06em}
.caret-settings-heading p{font-size:clamp(1.05rem,1.4vw,1.5rem);line-height:1.35;letter-spacing:-.03em;max-width:18rem;margin:0 0 .3rem}
.caret-settings-frame{width:min(100%,110rem);margin:0 auto}
.caret-settings-frame .caret-settings{aspect-ratio:1.8;box-shadow:clamp(.7rem,1.4vw,1.6rem) clamp(.7rem,1.4vw,1.6rem) 0 #6050df}
.caret-settings-frame .caret-settings-main h3{font-size:clamp(4rem,8vw,9rem)}
.caret-settings-frame .caret-settings-main>p{font-size:clamp(.8rem,1vw,1.2rem)}
.caret-settings-frame .caret-settings-label{font-size:clamp(.65rem,.9vw,1rem);margin-top:clamp(1.4rem,2.5vw,3rem)}
.caret-settings-frame .caret-overview-row{padding:clamp(.7rem,1.2vw,1.3rem) 0}
.caret-settings-frame .caret-overview-row strong{font-size:clamp(1rem,1.45vw,1.7rem)}
.caret-settings-frame .caret-overview-row small{font-size:clamp(.72rem,.85vw,.95rem)}
.caret-settings-frame .caret-overview-row em,.caret-settings-frame .caret-overview-row>span{font-size:clamp(.72rem,.9vw,1rem)}
.caret-settings-frame .caret-overview-key{font-size:clamp(.9rem,1.15vw,1.35rem);gap:1.5rem;padding:.6rem 0}
.caret-settings-frame .caret-overview-key b{width:4rem}
.caret-settings-caption{display:flex;justify-content:space-between;gap:1rem;margin:2.5rem 0 0;font:400 .68rem var(--mono);letter-spacing:.06em;color:#777570}
.caret-screen-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,5rem);margin:clamp(6rem,10vw,12rem) auto 0;max-width:110rem}
.caret-screen-gallery figure{min-width:0;margin:0}
.caret-mini-screen{min-height:clamp(32rem,47vw,43rem);padding:clamp(1.2rem,3vw,3.5rem);background:#fff;border:1px solid #171717;box-shadow:clamp(.5rem,1vw,1rem) clamp(.5rem,1vw,1rem) 0 #6050df;display:flex;flex-direction:column;color:#171717}
.caret-mini-top,.caret-mini-label,.caret-screen-gallery figcaption{font:400 .68rem var(--mono);letter-spacing:.07em}
.caret-mini-top,.caret-screen-gallery figcaption{display:flex;justify-content:space-between;gap:1rem}
.caret-mini-top,.caret-mini-label{color:#6050df}
.caret-mini-screen h3{font:400 clamp(4rem,7vw,8rem)/.88 Instrument,Georgia,serif;letter-spacing:-.07em;margin:clamp(2.5rem,5vw,5rem) 0 .8rem}
.caret-mini-screen>p{font-size:clamp(.9rem,1.2vw,1.25rem);margin:0 0 auto;color:#777}
.caret-mini-label{margin:2rem 0 .6rem}
.caret-mini-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 0;border-bottom:1px solid #1717171c;font-size:clamp(.95rem,1.2vw,1.3rem)}
.caret-mini-row span{display:grid;gap:.2rem}
.caret-mini-row small{font-size:clamp(.7rem,.8vw,.9rem);color:#898986}
.caret-mini-row i{width:1.8rem;height:1.1rem;border:1px solid #17171750;border-radius:2rem;flex:none;position:relative}
.caret-mini-row i:after{content:'';position:absolute;left:.15rem;top:.15rem;width:.7rem;height:.7rem;background:#aaa;border-radius:50%}
.caret-mini-row i.on{background:#6050df;border-color:#6050df}
.caret-mini-row i.on:after{left:auto;right:.15rem;background:#fff}
.caret-mini-choice,.caret-mini-threshold{display:flex;gap:.15rem;align-items:stretch;flex-wrap:wrap}
.caret-mini-choice strong,.caret-mini-choice span,.caret-mini-threshold strong,.caret-mini-threshold span{font:400 clamp(.72rem,.9vw,1rem) var(--mono);padding:.7rem .9rem;background:#f2f1ef}
.caret-mini-choice strong,.caret-mini-threshold strong{background:#6050df;color:#fff}
.caret-mini-threshold{margin-top:.8rem}
.caret-screen-gallery figcaption{margin-top:1.5rem;color:#777570}
.caret-screen-gallery figcaption span:first-child{color:#6050df}
.caret-statement{padding:clamp(5rem,10vw,12rem) clamp(1.4rem,3.5vw,4rem);display:grid;grid-template-columns:1fr 1fr;gap:2rem 6vw}
.caret-section-index{grid-column:1/-1;color:var(--blue)}
.caret-statement h2{font-size:clamp(4rem,8vw,10rem);line-height:.95;letter-spacing:-.09em;font-weight:700;margin:0}
.caret-statement h2 em{font-family:Instrument,serif;font-weight:400;letter-spacing:-.07em}
.caret-statement-copy{align-self:end;max-width:34rem}
.caret-statement-copy p{font-size:clamp(1.1rem,1.45vw,1.5rem);line-height:1.55;letter-spacing:-.025em;margin:0 0 1.5rem}
.caret-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,4vw,5rem);padding:0 clamp(1.4rem,3.5vw,4rem) clamp(7rem,12vw,14rem)}
.caret-notes>div{min-height:18rem;display:flex;flex-direction:column}
.caret-notes>div>span{color:var(--blue)}
.caret-notes h3{font-size:clamp(2.6rem,4.3vw,5rem);line-height:1.05;letter-spacing:-.075em;font-weight:400;margin:3rem 0 2rem}
.caret-notes p{font-size:1rem;line-height:1.6;max-width:24rem;margin:auto 0 0;color:#565550}
.caret-end{background:#171717;color:#fff;min-height:18rem;padding:2rem clamp(1.4rem,3.5vw,4rem);display:flex;align-items:end;justify-content:space-between;gap:2rem}
.caret-end>span{color:#aaa}
.caret-end>a{font-size:clamp(1rem,1.6vw,1.5rem);display:flex;gap:2.5rem;align-items:center}
.caret-end>a b{font:400 2rem var(--sans)}
.caret-end>a:hover{color:#aeb7ff}
@media(max-width:850px){
 .caret-stage-body{padding:2.5rem 0}
 .caret-input-demo--hero .caret-input-line{font-size:5vw;min-height:7rem}
 .caret-settings-heading{grid-template-columns:1fr;gap:1.5rem}
 .caret-settings-heading .caret-section-index{margin-bottom:1rem}
 .caret-settings-heading p{max-width:30rem}
 .caret-statement{grid-template-columns:1fr}
 .caret-statement-copy{max-width:38rem}
}
@media(max-width:650px){
 .caret-hero{min-height:calc(72svh - 5.6rem);padding:1.2rem 1.2rem 2rem}
 .caret-hero h1{font-size:25vw}
 .caret-hero-top,.caret-hero-bottom>span,.caret-section-index,.caret-stage-meta,.caret-stage-foot,.caret-notes>div>span,.caret-end>span{font-size:.55rem}
 .caret-hero-bottom{display:block}
 .caret-hero-bottom p{font-size:1.55rem;margin-bottom:1rem}
 .caret-stage{min-height:35rem;padding:1.2rem}
 .caret-stage-body{padding:2rem 0}
 .caret-input-demo--hero{min-height:18rem;padding:1rem;box-shadow:.55rem .55rem 0 #171717}
 .caret-input-demo--hero .caret-input-top{font-size:.5rem}
 .caret-input-demo--hero .caret-input-line{font-size:5vw;min-height:7rem}
 .caret-input-demo--hero .caret-input-popover>small{font-size:.45rem;margin-bottom:.4rem}
 .caret-input-demo--hero .caret-input-popover>div{font-size:.7rem}
 .caret-input-demo--hero .caret-input-popover strong,.caret-input-demo--hero .caret-input-popover span{gap:.2rem;padding:.45rem .3rem}
 .caret-input-demo--hero .caret-input-popover em,.caret-input-demo--hero .caret-input-popover b{font-size:.4rem}
 .caret-settings-section{padding:5rem 1.2rem}
 .caret-settings-frame .caret-settings{aspect-ratio:1.18}
 .caret-settings-heading h2{font-size:13vw}
 .caret-settings-heading p{font-size:1rem}
 .caret-settings-frame .caret-settings-main h3{font-size:2.25rem}
 .caret-settings-frame .caret-settings-main>p{font-size:.54rem}
 .caret-settings-frame .caret-settings-label{font-size:.43rem;margin:.6rem 0 .25rem}
 .caret-settings-frame .caret-overview-row{padding:.35rem 0}
 .caret-settings-frame .caret-overview-row strong{font-size:.52rem}
 .caret-settings-frame .caret-overview-row small{font-size:.4rem}
 .caret-settings-frame .caret-overview-row em,.caret-settings-frame .caret-overview-row>span{font-size:.39rem}
 .caret-settings-frame .caret-overview-key{font-size:.44rem;gap:.25rem;padding:.22rem 0}
 .caret-settings-frame .caret-overview-key b{width:1.3rem}
 .caret-settings-caption{margin-top:1.5rem;font-size:.5rem}
 .caret-screen-gallery{grid-template-columns:1fr;gap:3rem;margin-top:5rem}
 .caret-mini-screen{min-height:31rem;padding:1.5rem}
 .caret-mini-screen h3{font-size:5rem}
 .caret-mini-top,.caret-mini-label,.caret-screen-gallery figcaption{font-size:.55rem}
 .caret-mini-row{font-size:.98rem}
 .caret-mini-row small{font-size:.72rem}
 .caret-statement{padding:5rem 1.2rem}
 .caret-statement h2{font-size:12vw}
 .caret-statement-copy p{font-size:1.05rem}
 .caret-notes{grid-template-columns:1fr;padding:0 1.2rem 6rem;gap:3.5rem}
 .caret-notes>div{min-height:0}
 .caret-notes h3{font-size:3rem;margin:1.5rem 0 1rem}
 .caret-notes p{margin:0}
 .caret-end{min-height:12rem;padding:1.2rem}
}
