/* 4 Oct: measured ChatGPT plus-menu type/desktop rhythm; library layout is custom. */
:root{font-family:-apple-system-body,ui-sans-serif,-apple-system,"system-ui","Segoe UI",Helvetica,"Apple Color Emoji",Arial,"sans-serif","Segoe UI Emoji","Segoe UI Symbol"}
.studio-header{min-height:60px;padding:10px 24px}
main{padding:0 24px}
.intro{padding:24px 0 20px}
.eyebrow{margin-bottom:8px}
h1{font-size:32px}
.style-browser{padding:12px 0;margin-bottom:16px}
.style-option{min-height:80px;padding:8px}
.style-option[aria-pressed=true]{padding:7px}
.style-sample{height:28px}
.section-heading{padding-bottom:12px}
.working{gap:0 24px}
.working>.preview-column{grid-column:1;grid-row:2;position:relative;align-self:stretch;min-width:0}
.preview-sticky{position:sticky;top:16px}
.preview-sticky>.demo-surface{position:relative;top:auto}
.demo-surface{--row:48px;--row-pad:8px;--panel-pad:6px;--panel-gap:10px;--tile-row:104px;--detail-row:56px;--item-gap:8px;min-height:0;padding:16px}
.demo-surface[data-spacing=compact]{--row:36px;--row-pad:6px;--panel-pad:4px;--panel-gap:6px;--tile-row:76px;--detail-row:40px;--item-gap:6px}
.demo-surface .surface-label{margin-bottom:10px}
.demo-surface .menu-anchor{flex:0 0 auto;justify-content:flex-start;min-height:0;max-width:560px;margin:0;padding:0}
.demo-surface .menu-panels{margin-top:8px}
.demo-surface .add-button{min-height:36px;padding:6px 10px;font-size:14px}
.demo-surface .plus-icon{width:20px;height:20px;flex-basis:20px}
.demo-surface .menu button{gap:10px;font-size:16px}
.demo-surface[data-style] .menu button{padding:var(--row-pad) 8px}
.demo-surface .row-icon{width:20px;height:20px;flex-basis:20px}
.demo-surface .letter-icon{font-size:14px;line-height:20px}
.demo-surface .chevron{width:16px;height:16px;flex-basis:16px}
.demo-surface .menu-label{top:0;align-self:center}
/* Draw the selection mark instead of inheriting a font's uneven tick glyph. */
.demo-surface .submenu button::after{content:none!important}
.demo-surface .selection-mark{display:block;width:20px;height:20px;flex:0 0 20px;margin-left:auto;align-self:center;visibility:hidden;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demo-surface .submenu button[aria-checked=true] .selection-mark{visibility:visible}
.demo-surface .selection{margin-top:14px;padding-top:10px}
.demo-surface .selection p{font-size:14px;margin-top:4px}
.demo-surface .grouped-divider{display:none}
.demo-surface[data-style=quiet] .divider,.demo-surface[data-style=rail] .divider{display:block;height:1px;margin:4px 0;background:var(--border)}
.demo-surface[data-style=quiet] .submenu button:nth-child(4){border-top:1px solid var(--border);border-radius:0}
.demo-surface[data-type=chatgpt] .menu button{font-size:14px;line-height:20px;letter-spacing:normal;font-weight:400}
.demo-surface[data-type=chatgpt] #reference-menu button{font-weight:400}
.demo-surface[data-type=chatgpt] .add-button{font-size:14px;line-height:20px;letter-spacing:normal;font-weight:400}
.try-hint{margin:10px 0 0}
.controls{gap:12px}
.controls .wide-field{padding-bottom:12px}
.controls .wide-field legend{margin-bottom:8px}
.palette-option{min-height:54px}
.type-option{min-height:92px}
.chatgpt-reference{aspect-ratio:768/332;background:#fff;border-color:#e5e5e5}
.chatgpt-reference img{position:absolute;display:block;width:166.666667%;height:auto;max-width:none;left:-36.71875%;top:-109.036145%}
.chatgpt-original{background:#fff}
.chatgpt-original img{max-width:1280px;margin:auto}
@media(max-width:850px){.preview-sticky{position:static}.intro{padding:20px 0}.intro>p{margin-top:8px}}
@media(max-width:600px){
  main{padding:0 16px}.studio-header{padding:8px 16px}h1{font-size:28px}
  .style-option{min-height:76px}.demo-surface{padding:12px}
  .demo-surface[data-spacing=compact]{--row:44px;--row-pad:8px;--detail-row:48px;--tile-row:84px}
  .demo-surface[data-spacing=roomy]{--row:52px;--row-pad:12px;--detail-row:60px;--tile-row:108px}
  .demo-surface .add-button{min-height:44px}
  .demo-surface[data-style] .menu button{padding:var(--row-pad) 8px}
  .demo-surface[data-type=chatgpt] .menu button{font-size:15px}
}
@media(pointer:coarse) and (min-width:601px){.demo-surface[data-spacing=compact]{--row:44px;--row-pad:8px}.demo-surface .add-button{min-height:44px}}