/* Five component controls, with a material-aware end view beside the pencil. */
.studio-controls{grid-template-columns:repeat(5,minmax(0,1fr))}
.pencil-stage{display:flex;align-items:center;gap:20px;padding:7px 3%;height:184px;overflow:visible}
.pencil-side-view{flex:1;min-width:0;height:100%;display:flex;align-items:center}
.pencil-stage .pencil-side-view>svg{width:100%;height:100%;margin:0;max-width:100%}
.pencil-profile{width:137px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;padding-left:20px;border-left:1px solid #e4e8dc;align-self:center}
.pencil-profile figcaption{text-align:center;font-size:.59rem;letter-spacing:.13em;color:#446655;font-weight:650;line-height:1.5}
.pencil-profile figcaption span{display:block;letter-spacing:0;font-size:.6rem;font-weight:400;color:#62715b}
.pencil-stage .pencil-profile>svg{width:89px;height:89px;margin:4px 0 0;max-width:100%;overflow:visible}
.profile-shape-name{font-size:.65rem;color:#4e6c58;line-height:1.5}
.studio .part-control.shape-control .part-heading>span{background:#eee6f8;color:#795b9b}
.shape-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.shape-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:69px;border:1px solid #e1e6da;border-radius:10px;background:#fff;color:#607359;padding:9px 4px;font-size:.66rem;line-height:1.3;transition:background .18s,border-color .18s}
.shape-options button svg{width:24px;height:24px;fill:#f5f0df;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.shape-options button:hover{background:#f5f7ef;border-color:#9dae94}
.shape-options button[aria-pressed=true]{background:#eaf0df;border-color:#476d47;color:#244b35;box-shadow:inset 0 0 0 1px #476d47}
.shape-options button[aria-pressed=true] svg{fill:#f2cf65}
.shape-options button:focus-visible{outline:2px solid #c56547;outline-offset:3px}
.shape-control .part-options{margin-bottom:7px}
.accessory-unavailable .roller{background:#f5f6f1;color:#72816e;touch-action:auto;cursor:default}
.accessory-unavailable .wheel-arrows{visibility:hidden}
.no-accessory{font-size:.78rem;color:#71806b}
.studio-shortcuts{flex-wrap:wrap}
@media(min-width:1700px){.pencil-stage{height:218px}.pencil-profile{width:163px}.pencil-stage .pencil-profile>svg{width:108px;height:108px}}
@media(min-width:761px) and (max-width:1150px){
  .studio-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
  .studio .part-control{border-bottom:0}
  .studio .part-control:nth-child(4){border-right:0}
  .studio .shape-control{grid-column:1/-1;display:grid;grid-template-columns:155px 1fr;gap:0 20px;border-right:0;border-top:1px solid #e7eadd;padding:16px 20px}
  .shape-control .part-heading{grid-column:1;grid-row:1;margin:0;align-self:end}
  .shape-control .part-options{grid-column:1;grid-row:2;margin:0}
  .shape-control .shape-options{grid-column:2;grid-row:1/3;grid-template-columns:repeat(4,1fr);align-self:center}
  .shape-control .shape-options button{flex-direction:row;gap:9px;min-height:48px}
  .shape-control .control-note{grid-column:2;margin-top:8px}
}
@media(max-width:760px){
  .pencil-stage{height:136px;min-height:0;gap:0;padding:5px 9px 5px 0}
  .pencil-profile{width:90px;padding-left:7px}
  .pencil-profile figcaption{font-size:.6rem;letter-spacing:.07em}
  .pencil-profile figcaption span{font-size:.6rem}
  .pencil-stage .pencil-profile>svg{width:65px;height:65px;margin:2px 0}
  .profile-shape-name{font-size:.64rem}
  .studio-shortcuts{gap:5px;justify-content:center;padding:0 8px 12px}
  .studio-shortcuts a{padding:6px 7px;font-size:.56rem}
  .studio-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .studio .shape-control{grid-column:1/-1;border-top:1px solid #e7eadd;border-bottom:0;border-right:0;padding:15px 13px}
  .shape-control .shape-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .shape-control .part-options{height:auto;min-height:0;margin:0 0 10px}
  .shape-control .part-caption{padding:0}
  .shape-options button{min-height:68px;font-size:.65rem}
  .shape-control .control-note{margin-top:10px}
  .part-control{scroll-margin-top:251px!important}
}
@media(prefers-reduced-motion:reduce){.shape-options button{transition:none}}