.name-studio{padding:42px 0 46px}
#name-studio-title{scroll-margin-top:100px}
.name-studio .section-head{gap:28px;margin-bottom:0}
.name-studio .section-head h2{font-size:clamp(36px,3.4vw,48px);line-height:1.04}
.name-studio .section-head .eyebrow{margin-bottom:9px}
.name-studio .section-head>p{max-width:360px;font-size:14px;line-height:1.55;margin-top:0}
.name-studio .name-studio-grid{gap:clamp(26px,3vw,44px);margin-top:22px}
.name-studio .name-controls{min-width:0}
.name-studio .name-controls>.eyebrow{display:none}
.name-studio .name-controls h3{font-size:24px;line-height:1.15;margin:0 0 14px}
.name-studio .name-controls h3 br{display:none}
.name-studio .name-controls>label,.name-studio .name-controls legend{font-size:13px;line-height:1.4}
.name-studio .name-controls>input{font-size:24px;min-height:44px;padding:6px 0 8px;margin-bottom:14px}
.name-studio .name-controls legend{gap:10px;align-items:baseline}
.name-studio .name-controls legend span{color:#ffc928;font-size:13px;font-weight:650}
.name-studio .holder-color-fieldset{margin-bottom:10px;min-width:0}
.name-studio .studio-colors-full{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px;margin-top:8px}
.name-studio .studio-colors-full button{position:relative;width:100%;height:44px;min-width:44px;min-height:44px;border:1px solid transparent;border-radius:8px;outline:0;background:transparent;color:#d8dfed;display:flex;align-items:center;justify-content:center;padding:6px;font-size:10px;line-height:1.2;transition:background .2s,border-color .2s;transform:none}
.name-studio .studio-colors-full button[aria-pressed="true"]{border-color:#ffc928;background:#ffffff0a;color:#fff9e9}
.name-studio .studio-colors-full button:focus-visible{outline:2px solid #ffc928;outline-offset:2px;z-index:2}
.studio-color-dot{display:block;flex:none;width:28px;height:28px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #ffffff40,0 2px 4px #0003;position:relative}
.studio-color-name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.studio-colors-full [aria-pressed="true"] .studio-color-dot:after{content:"✓";position:absolute;right:-6px;bottom:-3px;background:#ffc928;color:#101b3a;border:2px solid #101b3a;border-radius:50%;width:17px;height:17px;font-size:11px;line-height:13px;font-weight:800;text-align:center}
.name-studio .studio-color-chart{display:inline-flex;align-items:center;min-height:24px;margin-top:4px;color:#c6d3eb;font-size:11px;text-underline-offset:4px}
.name-studio .studio-product{gap:12px;padding:10px 0}
.name-studio .studio-product img{width:40px;height:44px;flex-shrink:0}
.name-studio .studio-product strong{font-size:13px}
.name-studio .studio-product span{font-size:11px;margin-top:4px}
.name-studio .name-controls>.button{min-height:46px;font-size:14px;padding:12px 20px;margin:6px 0 8px}
.name-studio .studio-disclaimer{font-size:11px;line-height:1.4;max-width:100%}
@media(hover:hover) and (pointer:fine){
 .name-studio .studio-colors-full button:hover{background:#ffffff0c;transform:none;z-index:2}
 .name-studio .studio-colors-full button:after{content:attr(data-color-name);position:absolute;left:50%;bottom:calc(100% + 5px);transform:translateX(-50%);padding:5px 8px;border:1px solid #586c94;border-radius:5px;background:#0b1733;color:#fff9e9;font-size:11px;line-height:1.35;white-space:nowrap;pointer-events:none;opacity:0}
 .name-studio .studio-colors-full button:hover:after,.name-studio .studio-colors-full button:focus-visible:after{opacity:1}
}
@media(min-width:761px) and (max-height:850px){
 .name-studio{padding:32px 0 36px}
 .name-studio .section-head h2{font-size:clamp(34px,3.1vw,42px)}
 .name-studio .name-studio-grid{margin-top:18px}
 .name-studio .name-controls h3{display:none}
}
@media(max-width:760px){
 .name-studio{padding:36px 0 40px}
 .name-studio .section-head{gap:12px}
 .name-studio .section-head h2{font-size:36px}
 .name-studio .section-head>p{font-size:14px;max-width:100%}
 .name-studio .name-studio-grid{grid-template-columns:1fr;gap:22px;margin-top:20px;align-items:start}
 .name-studio-grid>.name-poster[data-card-preview]{position:sticky;top:8px;z-index:3;height:clamp(260px,34svh,290px);min-height:260px;box-shadow:0 12px 20px #0e193740}
 .name-studio .name-controls h3{font-size:22px;margin-bottom:12px}
 .name-studio .name-controls>input{font-size:24px}
 .name-studio .studio-color-chart{min-height:32px;font-size:12px;margin-top:6px}
}
@media(prefers-reduced-motion:reduce){.name-studio .studio-colors-full button{transition:none}}