.cr-page,.cr-page .cr-workshop,.cr-page .cr-drawing,.cr-page .cr-ink{-webkit-tap-highlight-color:transparent}
.cr-letter{position:relative;display:block;width:100%;aspect-ratio:var(--letter-ratio);isolation:isolate;background:#fff6da;border-radius:18px;color:#081637;min-width:0}
.cr-letter-copy{position:absolute;inset:0;display:grid;place-items:center;padding:4px;text-align:center;font-size:clamp(12px,2vw,22px);line-height:1.15;font-weight:700}
.cr-letter-window{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0}
.cr-page .cr-letter-window img{position:absolute;height:auto;max-width:none;pointer-events:none;user-select:none;-webkit-user-select:none}
.cr-letter-ready{background:transparent;border-radius:0}
.cr-letter-ready>.cr-letter-window{opacity:1}
.cr-letter-ready>.cr-letter-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.cr-letter-mobile{display:none}
.cr-page .cr-subtitle:has(.cr-letter),.cr-page .cr-bubble:has(.cr-letter),.cr-page .cr-lead:has(.cr-letter),.cr-page .cr-pill:has(.cr-letter),.cr-page .cr-help:has(.cr-letter),.cr-page .cr-prompt:has(.cr-letter){padding:0;border:0;background:transparent;box-shadow:none;transform:none;border-radius:0}
.cr-page .cr-subtitle:has(.cr-letter)::after,.cr-page .cr-subtitle:has(.cr-letter)::before,.cr-page .cr-lead:has(.cr-letter)::after,.cr-page .cr-lead:has(.cr-letter)::before,.cr-page .cr-help:has(.cr-letter)::after,.cr-page .cr-help:has(.cr-letter)::before,.cr-page .cr-bubble:has(.cr-letter)::after{display:none}
.cr-page .cr-subtitle:has(.cr-letter){width:100%;max-width:390px;margin:8px 0 15px}
.cr-page .cr-bubble:has(.cr-letter){width:72%;max-width:280px;margin:10px 0 16px}
.cr-page .cr-excerpt>.cr-lead:has(.cr-letter){width:min(96%,940px);max-width:none;margin:15px auto 23px}
.cr-page .cr-workshop>.cr-lead:has(.cr-letter){width:min(95%,770px);max-width:none;margin:15px auto 8px}
.cr-page .cr-workshop>.cr-pill:has(.cr-letter){width:min(82%,580px);display:block;margin:0 auto 22px}
.cr-page .cr-workshop>.cr-privacy:has(.cr-letter){width:min(90%,560px);margin:20px auto 8px}
.cr-page .cr-help:has(.cr-letter){width:min(94%,610px);max-width:none;margin:8px auto 20px}
.cr-page .cr-final .cr-lead:has(.cr-letter){width:100%;max-width:450px;margin:20px 0}
.cr-page .cr-button:has(.cr-letter),.cr-page .cr-save .cr-pill:has(.cr-letter){display:block;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0;line-height:1;min-height:0;transform:none}
.cr-page .cr-button:has(.cr-letter)>svg,.cr-page .cr-save .cr-pill:has(.cr-letter)>svg{display:none}
.cr-page .cr-button:has(.cr-letter)>span,.cr-page .cr-save .cr-pill:has(.cr-letter)>span{display:block;width:100%}
.cr-page .cr-button:has(.cr-letter):hover,.cr-page .cr-save .cr-pill:has(.cr-letter):hover{filter:brightness(1.04)}
.cr-page .cr-hero .cr-button:has(.cr-letter){width:min(100%,330px);max-width:330px}
.cr-page .cr-final .cr-button:has(.cr-letter){width:min(100%,340px)}
.cr-page .cr-save .cr-pill:has(.cr-letter){width:240px;max-width:40%;min-height:44px}
.cr-page .cr-save .cr-button:has(.cr-letter){width:340px;max-width:56%}
.cr-page .cr-save{gap:3%}
.cr-page .cr-tabs button:has(.cr-letter){gap:10px}
.cr-page .cr-tabs button:has(.cr-letter)>span{width:100%;min-width:0;max-width:155px;display:block}
.cr-page .cr-tabs .cr-letter{background:transparent}
.cr-page .cr-tabs button[aria-pressed=true] .cr-letter-window{filter:brightness(0) invert(1)}
.cr-page .cr-tool:has(.cr-letter){gap:7px}
.cr-page .cr-tool:has(.cr-letter)>span{width:78px;display:block}
.cr-page .cr-tool .cr-letter{background:transparent}
.cr-page .cr-tool[aria-pressed=true] .cr-letter-window{filter:brightness(0) invert(1)}
.cr-page .cr-prompt:has(.cr-letter){width:320px;max-width:62%;margin:6px 0 0 10px!important}
.cr-page .cr-prompt [data-prompt-variant]{display:block}
@media(max-width:600px){
 .cr-letter-responsive{aspect-ratio:var(--letter-mobile-ratio)}
 .cr-letter-responsive .cr-letter-desktop{display:none}
 .cr-letter-mobile{display:block}
 .cr-page .cr-subtitle:has(.cr-letter){margin-top:3px;max-width:260px}
 .cr-page .cr-bubble:has(.cr-letter){width:90%;max-width:190px;margin:7px 0}
 .cr-page .cr-excerpt>.cr-lead:has(.cr-letter){width:min(82%,285px);margin:12px auto 20px}
 .cr-page .cr-workshop>.cr-lead:has(.cr-letter){width:100%;margin:14px auto 8px}
 .cr-page .cr-workshop>.cr-pill:has(.cr-letter){width:95%;margin:5px auto 22px}
 .cr-page .cr-tabs button:has(.cr-letter){flex-direction:column;gap:6px;padding:9px 5px;min-height:92px}
 .cr-page .cr-tabs button:has(.cr-letter)>span{width:100%;max-width:130px}
 .cr-page .cr-tabs svg{width:40px;height:30px;flex:0 0 30px}
 .cr-page .cr-tabs .cr-letter{height:39px;aspect-ratio:auto}
 .cr-page .cr-tabs .cr-letter-window{top:50%;height:auto;aspect-ratio:var(--letter-ratio);transform:translateY(-50%)}
 .cr-page .cr-save .cr-pill:has(.cr-letter){width:42%;max-width:none}
 .cr-page .cr-save .cr-button:has(.cr-letter){width:55%;max-width:none}
 .cr-page .cr-prompt:has(.cr-letter){max-width:68%;width:260px;margin-left:0!important}
 .cr-page .cr-final{grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:2%;padding-inline:0}
 .cr-page .cr-final h2{font-size:clamp(27px,7.9vw,40px);line-height:1.07}
 .cr-page .cr-final .cr-lead:has(.cr-letter){margin:16px 0}
 .cr-page .cr-workshop>.cr-privacy:has(.cr-letter){width:96%;margin:15px auto 8px}
 .cr-page .cr-tools{display:grid;grid-template-columns:100px minmax(0,1fr) minmax(0,1fr);gap:4px;padding:8px 6px}
 .cr-page .cr-colors{grid-column:1/-1;justify-content:center}
 .cr-page .cr-sizes{padding:0;gap:0;border-left:0}
 .cr-page .cr-sizes button{width:32px;height:44px;min-width:0}
 .cr-page .cr-tool:has(.cr-letter){padding:5px 2px;gap:3px;width:100%;min-height:44px}
 .cr-page .cr-tool:has(.cr-letter)>span{width:calc(100% - 19px);max-width:70px}
 .cr-page .cr-tool:has(.cr-letter)>.cr-icon{width:16px;height:20px;flex-basis:16px}
}
