.hf-tester-section{padding:88px max(64px,calc((100% - 1600px)/2 + 64px));position:relative}
.hf-tester-section>h2{font-size:54px;line-height:1.08;letter-spacing:-2.4px;margin:0 0 34px;padding-bottom:28px;border-bottom:1px solid #2c3136}
.hf-tester-layout{grid-template-columns:minmax(0,980fr) minmax(0,300fr);gap:32px}
.hf-home-tester-panel{min-width:0;outline:1px solid #2c3136;outline-offset:-1px}
.hf-tester-controls{height:72px;min-height:72px;padding:0 16px;gap:10px;flex-wrap:nowrap;border:0;outline:1px solid #2c3136;outline-offset:-1px}
.hf-tester-controls label{position:relative;display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;border:1px solid #2c3136;flex:none}
.hf-tester-controls label>svg{width:15px;height:15px;flex:none;color:#a5a6a2}
.hf-tester-controls select{padding:0;border:0;border-radius:0;height:38px;min-height:0;font-size:11px;font-weight:700;width:100%;min-width:0;background:transparent;color:#f3f0ea}
.hf-tester-controls .hf-home-font{width:132px;background:#ff4f9a;border-color:#ff4f9a}.hf-tester-controls .hf-home-font svg,.hf-tester-controls .hf-home-font select{color:#0b0d0f}
.hf-tester-controls .hf-home-weight{width:150px}.hf-tester-controls .hf-home-size{width:108px}.hf-tester-controls .hf-home-align{width:82px;padding-right:8px}
.hf-home-align select{appearance:none;-webkit-appearance:none}.hf-tester-controls select option{background:#14171a;color:#f3f0ea}
.hf-home-tester-actions{display:flex;gap:10px;margin-left:auto}.hf-tester-controls button{display:flex;align-items:center;justify-content:center;padding:0;width:40px;height:40px;min-height:40px;background:transparent;color:#a5a6a2;cursor:pointer}.hf-tester-controls button svg{width:16px;height:16px}.hf-tester-controls button.hf-expand{background:#ff4f9a;color:#0b0d0f;border-color:#ff4f9a}
.hf-tester-preview{height:360px;padding:36px 32px;display:flex;flex-direction:column;justify-content:space-between}
.hf-tester-preview [data-hf=preview]{font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:72px;line-height:.98;letter-spacing:-2.5px;color:#0b0d0f;white-space:pre-wrap;overflow-wrap:anywhere;min-height:142px;max-height:230px;overflow:auto;width:100%}
.hf-tester-preview .hf-glyphs{font-size:16px;line-height:1.3;letter-spacing:1px;font-weight:600;margin:0;color:#3b3934}
.hf-tester-sidebar{height:432px;display:flex;flex-direction:column;justify-content:space-between;padding:12px 0 12px 32px;gap:24px;border-left:1px solid #2c3136}
.hf-tester-sidebar h3{font-size:32px;line-height:41px;letter-spacing:-1px;margin:0}
.hf-tester-sidebar .hf-home-promo-details p{font-size:13px;line-height:1.6;margin-top:14px;color:#a5a6a2}
.hf-home-promo-price{display:flex;align-items:center;gap:14px;height:92px}.hf-home-promo-price del{font-size:22px;color:#a5a6a2}.hf-home-promo-price strong{font-family:"Space Grotesk",sans-serif;font-size:72px;line-height:92px;font-weight:700;letter-spacing:-3px;color:#ff4f9a}
.hf-tester-sidebar>a{display:flex;justify-content:space-between;align-items:center;height:54px;min-height:54px;padding:0 22px;font-size:12px;font-weight:800;letter-spacing:.8px;background:#ff4f9a;color:#0b0d0f}
.hf-home-tester-hints{display:flex;justify-content:space-between;gap:24px;margin-top:34px;font-size:10px;font-weight:700;line-height:12px;letter-spacing:.9px;color:#a5a6a2}
.hf-home-font-disclosure{position:absolute;bottom:32px;left:max(64px,calc((100% - 1600px)/2 + 64px));right:max(64px,calc((100% - 1600px)/2 + 64px));font-size:10px;color:#a5a6a2;line-height:1.4}
.hf-tester.is-expanded{display:flex;flex-direction:column;gap:0;max-height:calc(100dvh - 40px)}.hf-tester.is-expanded .hf-tester-layout{flex:1;min-height:0}.hf-tester.is-expanded .hf-tester-preview{height:calc(100dvh - 240px)}.hf-tester.is-expanded .hf-tester-preview [data-hf=preview]{max-height:calc(100dvh - 340px)}.hf-tester.is-expanded .hf-home-font-disclosure{display:none}
@media(max-width:1100px){.hf-tester-section{padding-inline:24px}.hf-tester-section>h2{font-size:44px}.hf-tester-layout{grid-template-columns:minmax(0,1fr)}.hf-tester-sidebar{height:auto;min-height:200px;display:grid;grid-template-columns:1fr 1fr;align-items:center;border-left:0;border-top:1px solid #2c3136;padding:24px 0 0}.hf-tester-sidebar>a{grid-column:1/-1}.hf-home-font-disclosure{left:24px;right:24px}}
@media(max-width:700px){.hf-tester-section{padding:88px 18px}.hf-tester-section>h2{font-size:36px;line-height:1.08;letter-spacing:-1.7px;padding-bottom:24px}.hf-tester-layout{gap:24px}.hf-tester-controls{height:114px;padding:12px;display:grid;grid-template-columns:132px minmax(0,1fr) 90px;grid-template-rows:40px 40px;gap:10px 8px;align-items:center}.hf-tester-controls .hf-home-font{grid-column:1;grid-row:1}.hf-tester-controls .hf-home-weight{grid-column:2/4;grid-row:1;width:150px}.hf-tester-controls .hf-home-size{grid-column:1;grid-row:2;width:108px}.hf-tester-controls .hf-home-align{grid-column:2;grid-row:2;width:82px;margin-left:-24px}.hf-home-tester-actions{grid-column:3;grid-row:2;gap:8px;margin-left:0}.hf-tester-preview{height:300px;padding:22px}.hf-tester-preview [data-hf=preview]{font-size:56px;letter-spacing:-2px;min-height:110px;max-height:180px}.hf-tester-preview .hf-glyphs{font-size:13px;line-height:1.4;letter-spacing:0}.hf-tester-sidebar{display:flex;align-items:stretch;min-height:0;gap:20px;padding-top:24px}.hf-home-promo-price{height:92px}.hf-home-tester-hints{flex-direction:column;gap:10px;font-size:9px;line-height:1.5}.hf-home-font-disclosure{left:18px;right:18px;bottom:24px;font-size:9px}.hf-tester.is-expanded{max-height:calc(100dvh - 16px)}.hf-tester.is-expanded .hf-tester-sidebar,.hf-tester.is-expanded .hf-home-tester-hints{display:none}.hf-tester.is-expanded .hf-tester-preview{height:calc(100dvh - 200px)}}
@media(max-width:360px){.hf-tester-controls{grid-template-columns:108px minmax(0,1fr) 88px}.hf-tester-controls .hf-home-font{width:108px;padding-inline:8px}.hf-tester-controls .hf-home-align{width:70px;margin-left:0;padding-inline:8px}.hf-home-tester-actions{gap:4px}}
@media(min-width:1101px){.hf-tester-section>h2{height:86px}}

/* The editable canvas scrollbar stays unobtrusive until hovered. */
.hf-tester-preview [data-hf=preview]{scrollbar-width:thin;scrollbar-color:transparent transparent}
.hf-tester-preview [data-hf=preview]:hover{scrollbar-color:#ff4f9a transparent}
.hf-tester-preview [data-hf=preview]::-webkit-scrollbar{width:8px;background:transparent}
.hf-tester-preview [data-hf=preview]::-webkit-scrollbar-track{background:transparent}
.hf-tester-preview [data-hf=preview]::-webkit-scrollbar-thumb{background:transparent;border-radius:4px}
.hf-tester-preview [data-hf=preview]:hover::-webkit-scrollbar-thumb{background:#ff4f9a}
@media(max-width:700px){.hf-home-tester-actions{grid-column:2/4;justify-self:end;width:88px}}

/* Focus belongs to the complete control, not the narrower native select. */
.hf-tester-controls select:focus,.hf-tester-controls select:focus-visible{outline:none;box-shadow:none}
.hf-tester.hf-keyboard-focus .hf-tester-controls label:has(select:focus){outline:2px solid #ff4f9a;outline-offset:-2px}
.hf-tester.hf-keyboard-focus .hf-tester-controls .hf-home-font:has(select:focus){outline-color:#0b0d0f}

/* Site-styled menus, with dimensions matching the Pen toolbar controls. */
.hf-tester-controls .hf-custom-select{position:relative;height:40px;flex:none;min-width:0;padding:0;border:0}
.hf-custom-select>svg,.hf-custom-select>span,.hf-custom-select>select[hidden]{display:none}
.hf-tester-controls .hf-custom-select .hf-select-trigger{width:100%;height:40px;min-height:40px;display:flex;justify-content:flex-start;gap:9px;padding:0 14px;border:1px solid #2c3136;color:#f3f0ea;background:#14171a;font-family:Inter,sans-serif;font-size:11px;font-weight:700;letter-spacing:.7px;white-space:nowrap}
.hf-tester-controls .hf-home-font .hf-select-trigger{background:#ff4f9a;color:#0b0d0f;border-color:#ff4f9a}
.hf-select-trigger>svg{width:15px!important;height:15px!important;flex:none;color:#a5a6a2}
.hf-home-font .hf-select-trigger>svg{color:#0b0d0f}
.hf-select-value{overflow:hidden;text-overflow:ellipsis}
.hf-select-trigger .hf-select-chevron{margin-left:auto;width:12px!important;height:12px!important}
.hf-custom-select.is-open .hf-select-chevron{transform:rotate(180deg)}
.hf-tester-controls .hf-select-trigger:focus{outline:none}
.hf-tester.hf-keyboard-focus .hf-select-trigger:focus{outline:2px solid #ff4f9a;outline-offset:-3px}
.hf-tester.hf-keyboard-focus .hf-home-font .hf-select-trigger:focus{outline-color:#0b0d0f}
.hf-select-menu{position:absolute;top:calc(100% + 8px);left:0;width:100%;padding:5px;background:#14171a;border:1px solid #2c3136;box-shadow:0 12px 30px #0006;z-index:50;max-height:260px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ff4f9a transparent}
.hf-select-menu[hidden]{display:none}
.hf-tester-controls .hf-select-menu .hf-select-option{width:100%;height:36px;min-height:36px;padding:0 8px;border:0;background:transparent;color:#f3f0ea;display:flex;justify-content:flex-start;text-align:left;font-family:Inter,sans-serif;font-size:11px;font-weight:600;letter-spacing:.3px;white-space:nowrap;gap:4px;outline:none}
.hf-select-option:after{content:"";margin-left:auto;width:9px;height:9px;flex:none}
.hf-select-option[aria-selected=true]:after{content:"✓";color:#ff4f9a;line-height:9px}
.hf-tester-controls .hf-select-option[aria-selected=true]{color:#ff4f9a;background:#ff4f9a14}
.hf-tester-controls .hf-select-option:hover,.hf-tester-controls .hf-select-option:focus{background:#252a30;color:#ff4f9a}
@media(max-width:360px){.hf-tester-controls .hf-home-font .hf-select-trigger{padding-inline:8px;gap:6px}.hf-tester-controls .hf-select-menu .hf-select-option{font-size:10px;padding-inline:5px;letter-spacing:0}}

.hf-tester-controls .hf-custom-select .hf-select-trigger{gap:6px;letter-spacing:.3px}.hf-select-value{flex:1;text-align:left}.hf-select-trigger .hf-select-chevron{margin-left:0}

.hf-tester .hf-select-option:disabled{opacity:.4;cursor:default}
.hf-tester-controls .hf-home-font-static{display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;flex:none;width:auto;min-width:132px;max-width:240px;border:1px solid #ff4f9a;background:#ff4f9a;color:#0b0d0f}.hf-home-font-static>svg{width:15px;height:15px;flex:none}.hf-home-font-static .hf-home-font-name{font:700 11px/1.3 Inter,sans-serif;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hf-home-font-static select[hidden]{display:none!important}.hf-home-font-static .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:700px){.hf-tester-controls .hf-home-font-static{width:132px;min-width:0;max-width:100%;padding-inline:10px}}
@media(max-width:360px){.hf-tester-controls .hf-home-font-static{width:108px;padding-inline:8px}}