@import url('fonts/menu/mobile-fonts.css');
@font-face{font-family:'Menu Fraunces';src:url('fonts/menu/fraunces.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Menu Lexend';src:url('fonts/menu/lexend.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Menu Sora';src:url('fonts/menu/sora.ttf') format('truetype');font-weight:100 800;font-display:swap}
@font-face{font-family:'Menu Plex Sans';src:url('fonts/menu/ibmplexsans.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Menu Plex Sans';src:url('fonts/menu/ibmplexsans-bold.woff2') format('woff2');font-weight:600 900;font-display:swap}
@font-face{font-family:'Menu Source Sans';src:url('fonts/menu/sourcesans3.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Menu Source Sans';src:url('fonts/menu/sourcesans3-bold.woff2') format('woff2');font-weight:600 900;font-display:swap}
@font-face{font-family:'Menu Public Sans';src:url('fonts/menu/publicsans.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Menu Public Sans';src:url('fonts/menu/publicsans-bold.woff2') format('woff2');font-weight:600 900;font-display:swap}
.font-evidence{background:#edf2e9;padding:14px 16px;margin-top:12px;color:#263d2e;font:14px/1.6 Arial,sans-serif;border-radius:10px}
.font-evidence p{margin:0}.font-evidence a{display:inline-flex;align-items:center;min-height:44px;margin-right:18px;text-underline-offset:3px}
.type-option .type-organisation{color:#30513b;font-weight:600}
:root{font-family:Arial,Helvetica,sans-serif;color:#181818;background:#fafaf8;--paper:#fafaf8;--ink:#181818;--muted:#62625f;--line:#d7d7d2;--focus:#185bc1}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}a{color:inherit}button,a,input{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:4px}button[hidden],[hidden]{display:none!important}.skip{position:absolute;z-index:10;top:8px;left:8px;transform:translateY(-200%);background:white;padding:16px}.skip:focus{transform:none}
.studio-header{display:flex;align-items:center;gap:32px;padding:20px 40px;border-bottom:1px solid var(--line);min-height:80px}.brand{text-decoration:none;white-space:nowrap;letter-spacing:.09em;font-size:14px}.studio-header nav{display:flex;gap:24px}.studio-header nav a{font-size:14px;text-decoration:none;color:var(--muted);display:flex;align-items:center;min-height:44px}.studio-header nav a:hover,.studio-header nav a[aria-current]{color:var(--ink)}.studio-header nav a[aria-current]{box-shadow:inset 0 -2px var(--ink)}.demo-label{margin-left:auto;font-size:13px;color:var(--muted)}main{max-width:1480px;margin:auto;padding:0 40px}.intro{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;padding:40px 0 34px}.eyebrow,.step{font-size:12px;letter-spacing:.12em;font-weight:600;color:var(--muted)}.eyebrow{margin:0 0 14px}h1{font-size:clamp(30px,3.2vw,46px);letter-spacing:-.045em;line-height:1.14;font-weight:500;margin:0}.intro>p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}.comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:44px}.reference,.working{min-width:0}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:20px}.section-heading h2{font-size:20px;font-weight:500;letter-spacing:-.02em;margin:8px 0 0}.text-button{border:0;background:none;border-bottom:1px solid #a8a8a0;min-height:44px;font-size:14px;padding:8px 0;white-space:nowrap}.text-button:hover{background:#edede9}.reference-frame{position:relative;aspect-ratio:685/475;max-width:685px;overflow:hidden;background:#141414;border:1px solid #303030;border-radius:4px}.reference-frame img{position:absolute;width:280.292%;height:auto;max-width:none;left:-90.511%;top:-89.474%;display:block}.reference-caption{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:1.6;margin-top:14px}.reference-caption strong{font-weight:500}.reference-caption span{color:var(--muted);text-align:right;font-size:12px}.reference-note{font-size:12px;color:var(--muted);line-height:1.6;margin:8px 0 26px}.anatomy{border-top:1px solid var(--line)}.anatomy>div{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}.anatomy>div>span{font-size:12px;color:var(--muted);padding-top:3px}.anatomy p{margin:0;line-height:1.5;font-size:14px;color:var(--muted)}.anatomy b{display:block;color:var(--ink);font-weight:500;margin-bottom:3px}.terms{margin:16px 0;font-size:14px;line-height:1.6}.terms summary{cursor:pointer;min-height:44px;padding:12px 0}.terms p{color:var(--muted);margin:6px 0 20px}
.demo-surface{--surface:#151515;--menu:#242424;--text:#f5f5f5;--secondary:#c3c3c3;--border:#404040;--hover:#383838;--radius:12px;--row:48px;--accent:#b65a38;background:var(--surface);color:var(--text);min-height:440px;padding:24px 26px 22px;border-radius:4px;position:relative;display:flex;flex-direction:column;--focus:#83baff}.demo-surface[data-theme=light]{--surface:#f0f0ed;--menu:#fff;--text:#181818;--secondary:#62625f;--border:#d1d1ca;--hover:#ededeb;--focus:#185bc1}.demo-surface[data-corners=sharp]{--radius:2px}.demo-surface[data-spacing=compact]{--row:44px}.surface-label{font-size:12px;letter-spacing:.09em;color:var(--secondary);margin-bottom:22px}.menu-anchor{position:relative;flex:1}.add-button{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 13px;background:var(--menu);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font-size:15px}.plus-icon{font-size:24px;font-weight:300;line-height:1}.add-button:hover{background:var(--hover)}.menu-panels{display:flex;align-items:flex-start;gap:6px;margin-top:8px;max-width:100%}.menu{background:var(--menu);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 10px 28px rgb(0 0 0/.12);padding:5px;min-width:0}.menu[role=menu]{width:50%}.menu button{display:flex;align-items:center;gap:9px;min-height:var(--row);width:100%;color:var(--text);background:none;border:0;border-radius:calc(var(--radius) * .7);padding:8px 10px;font-size:14px;text-align:left;line-height:1.35;transition:background 140ms ease}.menu button:hover,.menu button:focus-visible,.menu button[aria-expanded=true]{background:var(--hover)}.menu button:focus-visible{outline-offset:-3px}.row-icon{flex:0 0 18px;font-size:20px;text-align:center;color:var(--secondary);line-height:1}.letter-icon{font-size:13px;letter-spacing:-1px}.chevron{margin-left:auto;color:var(--secondary);font-size:20px}.divider{height:1px;background:var(--border);margin:6px}.submenu{position:relative}.submenu button[aria-selected=true]{box-shadow:inset 3px 0 var(--accent);background:var(--hover)}.submenu button[aria-selected=true]::after{content:'✓';margin-left:auto;color:var(--text)}.selection{border-top:1px solid var(--border);margin-top:20px;padding-top:16px}.selection>span{font-size:11px;letter-spacing:.1em;color:var(--secondary)}.selection p{font-size:15px;line-height:1.5;margin:7px 0 0;min-height:23px}.try-hint{font-size:13px;line-height:1.5;color:var(--muted);margin:12px 0 24px}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;align-items:start}.controls fieldset{padding:0;border:0;margin:0;min-width:0}.controls legend{font-size:14px;margin:0 0 10px;padding:0}.segmented{display:flex;border:1px solid var(--line);padding:3px;border-radius:5px;background:#fff;gap:2px}.segmented label{position:relative;flex:1;cursor:pointer}.segmented input{position:absolute;opacity:0;width:1px;height:1px}.segmented span{display:grid;place-items:center;min-height:44px;border-radius:3px;font-size:13px;padding:7px 5px;color:var(--muted)}.segmented input:checked+span{background:#181818;color:white}.segmented input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}.accent-control{grid-column:1/-1;display:flex;gap:14px;align-items:center;font-size:14px;padding:8px 0}.accent-control input{width:44px;height:44px;padding:3px;background:white;border:1px solid var(--line);cursor:pointer;border-radius:5px}.accent-control span{font-size:12px;color:var(--muted);font-family:monospace}.handoff{display:flex;gap:16px;align-items:center;padding-top:20px;border-top:1px solid var(--line);margin-top:16px}.copy-button{background:var(--ink);color:white;border:1px solid var(--ink);min-height:46px;padding:11px 17px;border-radius:5px;white-space:nowrap;font-size:14px}.copy-button:hover{background:#383838}.handoff p{font-size:13px;line-height:1.5;color:var(--muted);margin:0}.demo-note{font-size:12px;line-height:1.7;color:var(--muted);margin:18px 0 0}footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:44px;padding:22px 0 30px;font-size:13px;line-height:1.5;color:var(--muted)}footer a{min-height:44px;text-underline-offset:4px}
dialog{border:1px solid var(--line);padding:0;width:min(1320px,calc(100% - 32px));max-height:calc(100dvh - 32px);background:var(--paper);overflow:auto}dialog::backdrop{background:rgb(0 0 0/.7)}.dialog-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line)}.dialog-bar h2{font-size:16px;font-weight:500;margin:0}.dialog-bar button{min-height:44px;background:white;border:1px solid var(--line);padding:8px 16px}.original-image{padding:12px;background:#141414}.original-image img{display:block;max-width:1920px;width:100%;height:auto}dialog>p,dialog>a{font-size:14px;line-height:1.6;display:block;margin:16px 20px}dialog>a{min-height:44px;text-underline-offset:4px}
@media(max-width:1120px){.studio-header{padding:14px 28px;gap:20px}.demo-label{display:none}main{padding:0 28px}.comparison{gap:28px}.demo-surface{padding:24px 16px}.menu button{font-size:13px;padding:8px;gap:6px}.controls{gap:12px}.intro{align-items:start}.intro>p{font-size:14px;flex-shrink:0}}
@media(max-width:850px){.comparison{grid-template-columns:1fr;gap:36px}.reference{max-width:685px}.demo-surface{min-height:430px}.intro{display:block;padding:30px 0}.intro>p{margin-top:14px}.intro>p br{display:none}.studio-header nav{gap:18px}.studio-header{flex-wrap:wrap;gap:6px 20px}.studio-header nav{margin-left:auto}.menu button{font-size:15px}.menu[role=menu]{width:min(50%,280px)}.reference-frame{max-width:685px}}
@media(max-width:480px){main{padding:0 18px}.studio-header{padding:12px 18px}.studio-header nav{width:100%;margin:0;justify-content:space-between;gap:12px}.studio-header nav a{font-size:13px}.intro h1{font-size:33px;max-width:330px}.section-heading h2{font-size:18px}.text-button{font-size:12px}.reference-caption{display:block}.reference-caption span{display:block;text-align:left;margin-top:3px}.demo-surface{padding:18px 12px;min-height:430px}.menu-panels{flex-direction:column;gap:8px}.menu[role=menu]{width:100%}.menu-anchor{min-height:265px}.menu{box-shadow:none}.submenu{max-height:240px;overflow:auto}.demo-surface:has(.submenu:not([hidden])){min-height:600px}.menu button{font-size:15px}.controls{grid-template-columns:1fr}.controls fieldset{display:flex;align-items:center;justify-content:space-between;gap:16px}.controls legend{float:left;margin:14px 0}.segmented{width:210px;max-width:68%}.accent-control{padding:0}.handoff{align-items:start;flex-direction:column;gap:10px}footer{display:block}footer a{display:inline-flex;align-items:center;margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
.submenu button[aria-checked=true]{box-shadow:inset 3px 0 var(--accent);background:var(--hover)}.submenu button[aria-checked=true]::after{content:'✓';margin-left:auto;color:var(--text)}

/* Locally hosted original font files; copyright and OFL notices live beside them. */
@font-face{font-family:'Menu Outfit';src:url('fonts/menu/outfit.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Menu Space';src:url('fonts/menu/spacegrotesk.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:'Menu Work';src:url('fonts/menu/worksans.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:'Menu Lora';src:url('fonts/menu/lora.ttf') format('truetype');font-weight:400 700;font-display:swap}
@font-face{font-family:'Menu Display';src:url('fonts/menu/dmserifdisplay.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Menu Mono';src:url('fonts/menu/ibmplexmono.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Menu Condensed';src:url('fonts/menu/barlowcondensed.ttf') format('truetype');font-weight:400;font-display:swap}
.intro{padding:28px 0 24px}.comparison{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:32px}
.style-browser{border-top:1px solid var(--line);padding:18px 0 28px}.picker-heading{display:flex;gap:16px;align-items:baseline;justify-content:space-between;margin-bottom:14px}.picker-heading h2{font-size:16px;margin:0;font-weight:500}.picker-heading>span{font-size:14px;color:var(--muted)}
.style-options{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}.style-option{min-height:100px;background:white;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.35}.style-option:hover{background:#f0f0ed}.style-option[aria-pressed=true]{border:2px solid var(--ink);padding:9px;background:#f0f0ed}.style-option>span:last-child{margin-top:auto}
.style-sample{height:42px;display:grid;gap:4px;grid-template-columns:42% 1fr;width:100%;padding:5px;background:#e9e9e5;border-radius:3px;align-content:center}.style-sample i{height:5px;display:block;background:#92928c;border-radius:2px}.style-sample i:nth-child(2n){background:#c4c4bd}.style-option[data-style=rail] .style-sample{grid-template-columns:24% 1fr}.style-option[data-style=tiles] .style-sample{grid-template-columns:1fr 1fr}.style-option[data-style=tiles] i{height:12px}.style-option[data-style=editorial] .style-sample{background:none;grid-template-columns:1fr;border-top:1px solid #888;border-bottom:1px solid #888}.style-option[data-style=editorial] i{height:2px;background:#888}.style-option[data-style=pill] i{height:9px;border-radius:10px}.style-option[data-style=outline] i{height:10px;background:transparent;border:1px solid #888}.style-option[data-style=poster] .style-sample{border:2px solid #333;box-shadow:3px 3px #777;border-radius:0}.style-option[data-style=command] .style-sample{background:#333;grid-template-columns:1fr}.style-option[data-style=command] i{height:3px;background:#aaa}.style-option[data-style=notebook] .style-sample{border-left:3px solid #888;grid-template-columns:1fr;border-radius:0}.style-option[data-style=ribbon] .style-sample{grid-template-columns:repeat(4,1fr);align-content:start}.style-option[data-style=ribbon] i{height:10px}
.demo-surface{font-family:var(--menu-font,Arial,Helvetica,sans-serif);--accent-ink:#fff}.demo-surface button{font-family:inherit}.demo-surface .surface-label{line-height:1.5;letter-spacing:.04em}.demo-surface .selection>span{font-size:12px}.demo-surface .menu button{font-size:16px}.demo-surface .menu-panels{padding-bottom:8px}.demo-surface .menu-anchor{min-width:0}.demo-surface .menu button>span:not(.row-icon):not(.chevron){overflow-wrap:anywhere}.demo-surface .menu button[aria-checked=true]{background:var(--accent);color:var(--accent-ink);box-shadow:none}.demo-surface .menu button[aria-checked=true]::after{color:var(--accent-ink)}
.controls .wide-field{grid-column:1/-1;display:block;border-bottom:1px solid var(--line);padding-bottom:18px}.controls .wide-field legend{float:none;font-size:16px;margin:0 0 12px}.legend-note{font-size:13px;color:var(--muted)}.palette-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.palette-option{min-height:60px;background:white;border:1px solid var(--line);border-radius:4px;color:var(--muted);padding:6px;display:flex;flex-direction:column;gap:6px;align-items:start;font-size:12px;line-height:1.3}.palette-option:hover{background:#f0f0ed}.palette-option[aria-pressed=true]{border:2px solid var(--ink);padding:5px;color:var(--ink)}.palette-sample{display:flex;width:100%;height:16px;border-radius:2px;overflow:hidden;border:1px solid rgb(0 0 0/.15)}.palette-sample i{flex:1}
.type-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.type-option{background:white;color:var(--ink);border:1px solid var(--line);border-radius:4px;padding:9px 6px;min-height:98px;text-align:left;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere}.type-option:hover{background:#f0f0ed}.type-option[aria-pressed=true]{border:2px solid var(--ink);padding:8px 5px;background:#f0f0ed}.type-sample{font-size:30px;line-height:1.2}.type-name{font:12px Arial,Helvetica,sans-serif;margin-top:3px}.type-option small{font:11px/1.4 Arial,Helvetica,sans-serif;color:var(--muted)}.font-status{font-size:12px;color:var(--muted);margin:12px 0 0;min-height:18px}
/* Each treatment changes grouping, rhythm or structure; palette and type remain independent. */
.demo-surface[data-style=rail] .menu-panels{gap:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--menu);overflow:hidden}.demo-surface[data-style=rail] .menu{border:0;border-radius:0;box-shadow:none;background:transparent}.demo-surface[data-style=rail] #reference-menu{width:43%;border-right:1px solid var(--border)}.demo-surface[data-style=rail] .submenu{flex:1;width:auto}.demo-surface[data-style=rail] .menu button{border-radius:0}.demo-surface[data-style=rail] .chevron{display:none}
.demo-surface[data-style=tiles] #reference-menu{display:grid;grid-template-columns:1fr 1fr;gap:5px}.demo-surface[data-style=tiles] #reference-menu .divider{display:none}.demo-surface[data-style=tiles] #reference-menu button{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;min-height:100px;font-size:14px;padding:12px;background:var(--hover)}.demo-surface[data-style=tiles] .row-icon{flex:auto;font-size:24px}.demo-surface[data-style=tiles] .chevron{display:none}.demo-surface[data-style=tiles] .submenu{display:grid;gap:5px}.demo-surface[data-style=tiles] .submenu button{min-height:64px;background:var(--hover)}.demo-surface[data-style=tiles] .submenu button[aria-checked=true]{background:var(--accent)}
.demo-surface[data-style=editorial] .menu{border:0;border-radius:0;box-shadow:none;padding:0;background:transparent}.demo-surface[data-style=editorial] .menu-panels{gap:24px;border-top:2px solid var(--text);padding-top:8px}.demo-surface[data-style=editorial] .menu button{border-radius:0;border-bottom:1px solid var(--border);padding:13px 4px;min-height:58px}.demo-surface[data-style=editorial] .submenu button::before{content:attr(data-number);font:12px Arial,sans-serif;color:var(--secondary);margin-right:10px}.demo-surface[data-style=editorial] .submenu button[aria-checked=true]::before{color:var(--accent-ink)}.demo-surface[data-style=editorial] .row-icon{display:none}.demo-surface[data-style=editorial] .add-button{border:0;border-radius:0;background:transparent;padding-left:0;font-size:22px}
.demo-surface[data-style=pill] .menu{background:transparent;border:0;box-shadow:none;padding:0}.demo-surface[data-style=pill] .menu button{background:var(--menu);border:1px solid var(--border);border-radius:30px;margin-bottom:8px;padding:12px 16px}.demo-surface[data-style=pill] .divider{display:none}.demo-surface[data-style=pill] .menu-panels{gap:12px}.demo-surface[data-style=pill] .add-button{border-radius:30px}.demo-surface[data-style=pill] .menu button[aria-checked=true]{background:var(--accent)}
.demo-surface[data-style=outline] .menu{border:0;box-shadow:none;background:transparent;padding:0}.demo-surface[data-style=outline] .menu button{border:1px solid var(--border);margin-bottom:7px;border-radius:var(--radius);min-height:52px}.demo-surface[data-style=outline] .divider{display:none}.demo-surface[data-style=outline] .menu button[aria-expanded=true]{border-color:var(--text);box-shadow:none}.demo-surface[data-style=outline] .menu-panels{gap:12px}
.demo-surface[data-style=poster] .menu,.demo-surface[data-style=poster] .add-button{border:2px solid var(--text);border-radius:0;box-shadow:5px 5px var(--accent)}.demo-surface[data-style=poster] .menu-panels{gap:16px}.demo-surface[data-style=poster] .menu button{border-radius:0;font-weight:700;min-height:54px}.demo-surface[data-style=poster] .menu button[aria-expanded=true]{box-shadow:none;background:var(--text);color:var(--menu)}.demo-surface[data-style=poster] .menu button[aria-expanded=true] .row-icon,.demo-surface[data-style=poster] .menu button[aria-expanded=true] .chevron{color:inherit}.demo-surface[data-style=poster] .surface-label{font-weight:700}
.demo-surface[data-style=command] .menu-panels{flex-direction:column;gap:0}.demo-surface[data-style=command] .menu{width:100%;box-shadow:none;border-radius:0}.demo-surface[data-style=command] #reference-menu{display:flex;flex-wrap:wrap;border-bottom:0}.demo-surface[data-style=command] #reference-menu button{width:50%;min-height:44px;font-size:14px}.demo-surface[data-style=command] #reference-menu .divider{display:none}.demo-surface[data-style=command] .submenu button::before{content:attr(data-number);font:12px monospace;color:var(--secondary);padding:3px 6px;border:1px solid var(--border);margin-right:8px}.demo-surface[data-style=command] .submenu button[aria-checked=true]::before{color:inherit;border-color:currentColor}.demo-surface[data-style=command] .submenu button{min-height:44px}.demo-surface[data-style=command] .add-button{border-radius:0}
.demo-surface[data-style=notebook] .menu{border-radius:0;box-shadow:none;padding:0;border:0;background:transparent}.demo-surface[data-style=notebook] .menu button{border-radius:0;border-bottom:1px solid var(--border);padding:14px 12px}.demo-surface[data-style=notebook] .submenu{border-left:3px solid var(--accent);padding-left:10px}.demo-surface[data-style=notebook] .menu-panels{gap:14px}.demo-surface[data-style=notebook] .divider{display:none}.demo-surface[data-style=notebook] .row-icon{display:none}
.demo-surface[data-style=ribbon] .menu-panels{flex-direction:column;gap:0}.demo-surface[data-style=ribbon] #reference-menu{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%;background:transparent;border:0;box-shadow:none;padding:0 0 8px}.demo-surface[data-style=ribbon] #reference-menu .divider{display:none}.demo-surface[data-style=ribbon] #reference-menu button{background:var(--menu);border:1px solid var(--border);min-height:52px}.demo-surface[data-style=ribbon] #reference-menu button[aria-expanded=true]{background:var(--accent);color:var(--accent-ink);box-shadow:none}.demo-surface[data-style=ribbon] #reference-menu button[aria-expanded=true] .row-icon{color:inherit}.demo-surface[data-style=ribbon] .chevron{display:none}.demo-surface[data-style=ribbon] .submenu{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:10px}.demo-surface[data-style=ribbon] .submenu button{min-height:58px}
@media(max-width:1150px){.style-options{grid-template-columns:repeat(5,minmax(0,1fr))}.style-option{min-height:90px}.style-sample{height:32px}.palette-options{grid-template-columns:repeat(4,minmax(0,1fr))}.type-options{grid-template-columns:repeat(4,minmax(0,1fr))}.demo-surface .menu button{font-size:14px}}
@media(max-width:850px){.comparison{grid-template-columns:1fr}.working{grid-row:1}.reference{grid-row:2}.style-options{grid-template-columns:repeat(5,minmax(0,1fr))}.palette-options{grid-template-columns:repeat(6,minmax(0,1fr))}.type-options{grid-template-columns:repeat(5,minmax(0,1fr))}.demo-surface .menu button{font-size:16px}.intro>p{margin-top:10px}.picker-heading{align-items:flex-start}.picker-heading>span{max-width:260px;text-align:right}}
@media(max-width:480px){.style-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.style-option{font-size:11px;padding:7px;min-height:88px}.style-option[aria-pressed=true]{padding:6px}.style-sample{padding:3px;gap:3px;height:28px}.picker-heading{display:block}.picker-heading>span{display:block;max-width:none;text-align:left;font-size:13px;margin-top:8px}.palette-options{grid-template-columns:repeat(4,minmax(0,1fr))}.type-options{grid-template-columns:repeat(3,minmax(0,1fr))}.controls .wide-field{display:block}.controls .wide-field legend{float:none;margin:0 0 12px}.demo-surface[data-style=rail] .menu-panels{flex-direction:column}.demo-surface[data-style=rail] #reference-menu{width:100%;border-right:0;border-bottom:1px solid var(--border)}.demo-surface[data-style=rail] .submenu{width:100%}.demo-surface[data-style=editorial] .menu-panels{gap:8px}.demo-surface[data-style=command] #reference-menu button{font-size:14px}.demo-surface[data-style=ribbon] #reference-menu button{font-size:14px}.demo-surface[data-style=ribbon] .submenu button{font-size:15px}.demo-surface .menu-panels{max-width:100%}.demo-surface[data-style=poster] .menu-panels{padding-right:5px}.demo-surface[data-style=tiles] .submenu{grid-template-columns:1fr 1fr}.demo-surface[data-style=tiles] #reference-menu button{min-height:82px}.demo-surface:has(.submenu:not([hidden])){min-height:0}.menu-anchor{min-height:0}.reference-frame{margin-top:0}}
.comparison{display:flex;flex-direction:column;gap:40px}.working{order:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0 32px;align-items:start}.working>.section-heading{grid-column:1/-1}.working>.demo-surface{grid-column:1;grid-row:2;position:sticky;top:16px;scroll-margin-top:16px}.working>.controls{grid-column:2;grid-row:2}.working>.try-hint{grid-column:1;grid-row:3}.working>.handoff{grid-column:2;grid-row:3}.working>.demo-note{grid-column:1/-1}.reference{order:1;width:100%;max-width:685px;border-top:1px solid var(--line);padding-top:24px}.preview-jump{display:none}.style-option,.palette-option,.type-name{font-size:14px}.type-name{line-height:1.35}.type-option small{font-size:12px}.style-option{min-height:104px}
@media(max-width:850px){.working{display:block}.working>.demo-surface{position:static}.preview-jump{display:inline-flex;align-items:center;min-height:44px;grid-column:1/-1;font-size:14px;text-underline-offset:4px}.controls .wide-field{padding-bottom:16px}.palette-options{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:480px){.style-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.style-option{min-height:82px;font-size:14px}.palette-options{grid-template-columns:repeat(3,minmax(0,1fr))}.type-name{font-size:14px}.type-option{min-height:110px}.style-sample{height:28px}.working>.section-heading{padding-top:2px}}

/* Expanded structures: geometry changes independently of colour and typography. */
.palette-options{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.palette-option{overflow-wrap:anywhere}
.style-option[data-style=poster] .style-sample{border:0;border-top:2px solid #333;border-bottom:1px solid #777;box-shadow:none}
.type-options{max-height:244px;overflow-y:auto;padding:5px;scrollbar-gutter:stable}
.type-sample{white-space:nowrap;font-size:28px}
.demo-surface #reference-menu button,.demo-surface .add-button{font-family:var(--category-font,var(--menu-font));font-weight:var(--category-weight,500)}
.demo-surface[data-style=poster] #reference-menu button{font-weight:var(--category-poster-weight,700)}
.style-options{grid-template-columns:repeat(9,minmax(0,1fr))}
.style-option:is([data-style=topbar],[data-style=tray]) .style-sample{grid-template-columns:repeat(4,1fr);align-content:start}
.style-option[data-style=tray] .style-sample{align-content:end}
.style-option:is([data-style=index],[data-style=ledger]) .style-sample{grid-template-columns:1fr 3fr}
.style-option[data-style=directory] .style-sample{background:transparent;border-top:1px solid #777;border-bottom:1px solid #777;border-radius:0}
.style-option[data-style=shelf] i{height:14px;border-radius:50%;width:14px;margin:auto}
.style-option[data-style=stack] .style-sample{grid-template-columns:1fr;gap:3px}
.style-option[data-style=mosaic] i:first-child{grid-column:1/-1}
.demo-surface:is([data-style=topbar],[data-style=directory],[data-style=shelf],[data-style=stack],[data-style=tray]) .menu-panels{flex-direction:column}
.demo-surface:is([data-style=topbar],[data-style=directory],[data-style=shelf],[data-style=stack],[data-style=tray]) .menu[role=menu]{width:100%}
.demo-surface:is([data-style=topbar],[data-style=directory],[data-style=shelf],[data-style=tray]) #reference-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--item-gap);border:0;background:transparent;padding:0}
.demo-surface:is([data-style=topbar],[data-style=directory],[data-style=shelf],[data-style=tray],[data-style=index],[data-style=ledger],[data-style=mosaic]) .divider{display:none}
.demo-surface:is([data-style=topbar],[data-style=directory],[data-style=shelf],[data-style=tray]) #reference-menu button{flex-direction:column;text-align:center;justify-content:center;gap:8px;padding:var(--row-pad) 4px;font-size:16px}
.demo-surface:is([data-style=topbar],[data-style=directory],[data-style=shelf],[data-style=tray],[data-style=mosaic]) .chevron{display:none}
.demo-surface[data-style=topbar] #reference-menu button{border-radius:0;border-bottom:2px solid transparent}
.demo-surface[data-style=topbar] #reference-menu button[aria-expanded=true]{border-bottom-color:var(--text)}
.demo-surface[data-style=topbar] .submenu{border:0;background:transparent;padding:0}
.demo-surface[data-style=topbar] .submenu button{border-bottom:1px solid var(--border);border-radius:0}
.demo-surface[data-style=index] #reference-menu{width:36%;border:0;border-right:2px solid var(--accent);border-radius:0;background:transparent;padding-right:var(--panel-pad)}
.demo-surface[data-style=index] .submenu{width:auto;flex:1;border:0;background:transparent}
.demo-surface[data-style=index] #reference-menu .row-icon{display:none}
.demo-surface[data-style=index] #reference-menu button::before{content:counter(category,decimal-leading-zero);counter-increment:category;font-size:12px;color:var(--secondary)}
.demo-surface[data-style=index] #reference-menu{counter-reset:category}
.demo-surface[data-style=index] #reference-menu button{gap:6px;flex-wrap:wrap}
.demo-surface[data-style=index] .chevron{display:none}
.demo-surface[data-style=index] .submenu button{min-height:var(--detail-row)}
.demo-surface[data-style=directory] .row-icon{display:none}
.demo-surface[data-style=directory] #reference-menu{border-bottom:1px solid var(--border)}
.demo-surface[data-style=directory] .submenu{display:grid;grid-template-columns:1fr 1fr;border:0;background:transparent;padding:0;gap:var(--item-gap)}
.demo-surface[data-style=directory] .submenu button{border-left:2px solid var(--border);border-radius:0}
.demo-surface[data-style=shelf] #reference-menu button{min-height:var(--tile-row);border-radius:var(--radius);background:var(--menu)}
.demo-surface[data-style=shelf] .row-icon{width:32px;height:32px;flex-basis:32px}
.demo-surface[data-style=shelf] .submenu{display:grid;grid-template-columns:1fr 1fr;background:transparent;border:0;padding:0;gap:var(--item-gap)}
.demo-surface[data-style=shelf] .submenu button{background:var(--menu);min-height:var(--detail-row)}
.demo-surface[data-style=stack] #reference-menu{display:grid;grid-template-columns:1fr 1fr;gap:var(--item-gap)}
.demo-surface[data-style=stack] .divider{display:none}
.demo-surface[data-style=stack] .submenu{border-top:3px solid var(--accent)}
.demo-surface[data-style=stack] .submenu button{border-bottom:1px solid var(--border);border-radius:0}
.demo-surface[data-style=ledger] .menu-panels{gap:0;align-items:stretch;border-top:1px solid var(--text);border-bottom:1px solid var(--text)}
.demo-surface[data-style=ledger] .menu{border:0;border-radius:0;background:transparent}
.demo-surface[data-style=ledger] #reference-menu{width:42%;border-right:1px solid var(--border)}
.demo-surface[data-style=ledger] .submenu{flex:1;width:auto}
.demo-surface[data-style=ledger] .row-icon{display:none}
.demo-surface[data-style=ledger] .menu button{border-bottom:1px solid var(--border);border-radius:0}
.demo-surface[data-style=ledger] .menu button:last-child{border-bottom:0}
.demo-surface[data-style=ledger] .submenu button::before{content:attr(data-number);font-size:13px;font-variant-numeric:tabular-nums;color:var(--secondary)}
.demo-surface[data-style=tray] #reference-menu{order:2;border-top:1px solid var(--border);padding-top:var(--panel-pad)}
.demo-surface[data-style=tray] .submenu{order:1;border:0;background:var(--menu)}
.demo-surface[data-style=tray] #reference-menu button[aria-expanded=true]{background:var(--text);color:var(--menu)}
.demo-surface[data-style=tray] #reference-menu button[aria-expanded=true] .row-icon{color:inherit}
.demo-surface[data-style=mosaic] #reference-menu{display:grid;grid-template-columns:1fr 1fr;gap:var(--item-gap);padding:0;border:0;background:transparent}
.demo-surface[data-style=mosaic] #reference-menu button{flex-direction:column;justify-content:center;text-align:center;gap:10px;min-height:var(--tile-row);background:var(--menu)}
.demo-surface[data-style=mosaic] #reference-menu button:first-child{grid-column:1/-1;flex-direction:row;min-height:var(--row)}
.demo-surface[data-style=mosaic] #reference-menu button:last-child{grid-column:1/-1;min-height:var(--row)}
.demo-surface[data-style=mosaic] .submenu{display:grid;gap:var(--item-gap);border:0;padding:0;background:transparent}
.demo-surface[data-style=mosaic] .submenu button{background:var(--menu);min-height:var(--detail-row);border-radius:var(--radius)}
.demo-surface:is([data-style=shelf],[data-style=mosaic]) .menu button[aria-checked=true]{background:var(--accent)}
@media(max-width:1150px){.style-options{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:600px){.style-options{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-surface:is([data-style=topbar],[data-style=directory],[data-style=shelf],[data-style=tray]) #reference-menu{grid-template-columns:1fr 1fr}.demo-surface[data-style=index] #reference-menu,.demo-surface[data-style=ledger] #reference-menu{width:100%;border-right:0;border-bottom:2px solid var(--accent)}.demo-surface[data-style=index] .submenu,.demo-surface[data-style=ledger] .submenu{width:100%}.demo-surface[data-style=index] #reference-menu{display:grid;grid-template-columns:1fr 1fr}.demo-surface[data-style=directory] .submenu,.demo-surface[data-style=shelf] .submenu{grid-template-columns:1fr}}
/* Native-size panels and vector controls: no image scaling or fractional transforms. */
.demo-surface{--row:64px;--radius:8px;--row-pad:16px;--panel-pad:8px;--panel-gap:16px;--tile-row:132px;--detail-row:76px;--item-gap:10px;min-height:500px;padding:28px;font-synthesis:none}
.demo-surface[data-spacing=compact]{--row:44px;--row-pad:8px;--panel-pad:4px;--panel-gap:8px;--tile-row:92px;--detail-row:48px;--item-gap:8px}
.demo-surface .menu-anchor{display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:340px;width:100%;max-width:680px;margin:0 auto;padding:12px 0 24px}
.demo-surface .add-button{align-self:flex-start;gap:10px;min-height:48px;padding:10px 16px;font-size:17px;font-weight:500}
.demo-surface .plus-icon{display:block;width:22px;height:22px;flex:0 0 22px}
.demo-surface .menu-panels{gap:var(--panel-gap);margin-top:12px;padding-bottom:0}
.demo-surface .menu{padding:var(--panel-pad);border-radius:var(--radius);box-shadow:none}
.demo-surface .menu[role=menu]{width:calc((100% - var(--panel-gap)) / 2)}
.demo-surface .menu button{display:flex;align-items:center;min-height:var(--row);gap:12px;padding:var(--row-pad) 14px;font-size:18px;font-weight:var(--label-weight,500);line-height:1.4;letter-spacing:-.015em;border-radius:4px;box-shadow:none;text-shadow:none;filter:none;transition:background 140ms ease,color 140ms ease}
.demo-surface[data-style] .menu button{min-height:var(--row);padding:var(--row-pad) 14px}
.demo-surface[data-style=command] #reference-menu button,.demo-surface[data-style=ribbon] #reference-menu button{min-height:var(--row)}
.demo-surface .row-icon{display:block;width:24px;height:24px;flex:0 0 24px;color:var(--secondary)}
.demo-surface .letter-icon{display:grid;place-items:center;font-size:18px;line-height:24px;letter-spacing:-1px;font-weight:500}
.demo-surface .chevron{display:block;width:20px;height:20px;flex:0 0 20px;margin-left:auto;align-self:center;color:var(--secondary)}
.demo-surface .menu-label{position:relative;top:-1px;min-width:0}
.demo-surface .selection{margin-top:4px;padding-top:20px}
.demo-surface .selection p{font-size:16px}
.demo-surface[data-corners=sharp] .menu,.demo-surface[data-corners=sharp] .menu button{border-radius:2px}
.demo-surface[data-style=tiles] #reference-menu{gap:var(--item-gap)}
.demo-surface[data-style=tiles] #reference-menu button{align-items:center;gap:12px;min-height:var(--tile-row);padding:var(--row-pad) 10px;font-size:17px;text-align:center;background:transparent;border:1px solid var(--border)}
.demo-surface[data-style=tiles] #reference-menu button:hover,.demo-surface[data-style=tiles] #reference-menu button[aria-expanded=true]{background:var(--hover)}
.demo-surface[data-style=tiles] .row-icon{flex:0 0 24px}
.demo-surface[data-style=tiles] .submenu{gap:var(--item-gap)}
.demo-surface[data-style=tiles] .submenu button{min-height:var(--detail-row);font-size:18px;background:transparent}
.demo-surface[data-style=tiles] .submenu button:hover{background:var(--hover)}
.demo-surface[data-style=tiles] .submenu button[aria-checked=true]{background:var(--accent)}
.demo-surface[data-style=rail] .menu,.demo-surface[data-style=editorial] .menu,.demo-surface[data-style=pill] .menu,.demo-surface[data-style=outline] .menu,.demo-surface[data-style=command] .menu,.demo-surface[data-style=notebook] .menu{box-shadow:none}
.demo-surface[data-style=rail] .menu-panels{align-items:stretch;gap:0}
.demo-surface[data-style=rail] .menu{border-radius:0}
.demo-surface[data-style=rail] #reference-menu{width:48%;flex:0 0 48%;border-right:1px solid var(--border)}
.demo-surface[data-style=rail] .submenu{width:auto;flex:1}
.demo-surface[data-style=rail] .menu button{border-radius:4px}
.demo-surface[data-style=editorial] .menu-panels{border-top:0;padding-top:0}
.demo-surface[data-style=editorial] .divider{display:none}
.demo-surface[data-style=editorial] .menu button{font-size:19px;border-radius:0}
.demo-surface[data-style=editorial] .submenu button::before,.demo-surface[data-style=command] .submenu button::before,.demo-surface[data-style=poster] .submenu button::before{content:attr(data-number);font:inherit;font-size:16px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:0;line-height:1.4;min-width:2ch;padding:0;margin:0 4px 0 0;border:0;color:var(--secondary)}
.demo-surface[data-style=poster] .submenu button[aria-checked=true]::before{color:inherit}
.demo-surface[data-style=poster] .menu{border:0;border-top:2px solid var(--text);border-bottom:1px solid var(--border);background:transparent;box-shadow:none}
.demo-surface[data-style=poster] .add-button{border:1px solid var(--border);border-radius:4px;box-shadow:none}
.demo-surface[data-style=poster] .menu button{font-size:21px;font-weight:var(--poster-weight,700);line-height:1.35;letter-spacing:-.02em;border-radius:0}
.demo-surface[data-style=pill] .menu button,.demo-surface[data-style=outline] .menu button{margin-bottom:var(--item-gap)}
.demo-surface[data-style=pill] .menu button:last-child,.demo-surface[data-style=outline] .menu button:last-child{margin-bottom:0}
.demo-surface[data-style=ribbon] #reference-menu,.demo-surface[data-style=ribbon] .submenu{gap:var(--item-gap)}
.demo-surface[data-style=editorial] .menu,.demo-surface[data-style=poster] .menu,.demo-surface[data-style=command] .menu,.demo-surface[data-style=notebook] .menu{border-radius:0}
.demo-surface[data-style=pill] .menu button{border-radius:24px}
.demo-surface[data-style=command] .menu,.demo-surface[data-style=ribbon] .menu[role=menu]{width:100%}
.demo-surface[data-style=editorial] .row-icon,.demo-surface[data-style=notebook] .row-icon{display:none}
.demo-surface[data-style=tiles] .chevron,.demo-surface[data-style=ribbon] .chevron{display:none}
.demo-surface[data-style=rail] .chevron{display:block}
@media(max-width:600px){.demo-surface[data-style=command] #reference-menu button{width:100%;font-size:17px}.demo-surface[data-style=ribbon] #reference-menu,.demo-surface[data-style=ribbon] .submenu{grid-template-columns:1fr}}
@media(max-width:1150px) and (min-width:851px){.working{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0 24px}.demo-surface{padding:22px 16px}.demo-surface .menu button{font-size:16px;padding:var(--row-pad) 10px;gap:8px}.demo-surface[data-style=poster] .menu button{font-size:19px}}
@media(max-width:600px){.demo-surface{padding:22px 16px;min-height:0}.demo-surface .menu-anchor{min-height:0;padding:12px 0 24px}.demo-surface .menu-panels{flex-direction:column}.demo-surface .menu[role=menu],.demo-surface[data-style=rail] #reference-menu,.demo-surface[data-style=rail] .submenu{width:100%}.demo-surface[data-style=rail] #reference-menu{flex:auto;border-right:0;border-bottom:1px solid var(--border)}.demo-surface .submenu{max-height:none}.demo-surface .menu button{font-size:18px;padding:var(--row-pad) 14px}.demo-surface[data-style=tiles] .submenu{grid-template-columns:1fr}.demo-surface[data-style=tiles] #reference-menu button{min-height:var(--tile-row);font-size:17px}.demo-surface[data-style=poster] .menu button{font-size:21px}.demo-surface .surface-label{font-size:12px}.demo-surface .selection p{font-size:16px}}

/* Whole-word specimens, 28 October: readable words at desktop and phone widths. */
.type-options{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));max-height:330px}.type-sample{white-space:normal;font-size:26px;line-height:1.25}.type-sample>span{display:block}.type-sample>span+span{font-size:20px;margin-top:3px}@media(max-width:480px){.type-options{grid-template-columns:repeat(2,minmax(0,1fr))}.type-sample{font-size:24px}}