.studio-header {
 all:initial; --studio-text-min:12px; box-sizing:border-box; display:block; position:relative;
 isolation:isolate; z-index:50; width:100%; min-width:0; margin:0; padding:0;
 border:0; border-bottom:1px solid #383633; background:#101112; color:#ebe8df; color-scheme:dark;
 font:400 14px/1.5 "IBM Plex Sans","Helvetica Neue",sans-serif; letter-spacing:normal; text-align:left; text-transform:none;
}
.studio-header *, .studio-header *::before, .studio-header *::after {box-sizing:border-box}
.studio-header .studio-header-inner {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 24px; width:100%; max-width:1480px; min-width:0; margin:0 auto; padding:12px clamp(16px,3vw,40px)}
.studio-header .studio-brand {display:inline-flex; align-items:center; gap:10px; min-height:44px; max-width:100%; margin:0; padding:0; border:0; background:transparent; color:inherit; font:500 14px/1.35 "IBM Plex Sans","Helvetica Neue",sans-serif; letter-spacing:.015em; text-decoration:none; text-transform:none}
.studio-header .studio-brand img {display:block; flex:0 0 28px; width:28px; height:28px; min-width:28px; max-width:28px; margin:0; padding:0; border:0; border-radius:0; background:transparent; object-fit:contain; filter:none; transform:none; box-shadow:none}
.studio-header .studio-brand span {color:inherit; font:inherit}
.studio-header .studio-navigation {display:flex; position:static; align-items:center; gap:6px; min-width:0; max-width:100%; margin:0; padding:0; border:0; background:transparent; overflow:visible; visibility:visible; opacity:1; transform:none}
.studio-header .studio-nav-group {position:relative; margin:0; padding:0; border:0; background:transparent; min-width:0}
.studio-header summary, .studio-header .studio-menu-toggle {display:flex; align-items:center; gap:12px; min-height:44px; margin:0; padding:10px 14px; border:0; border-radius:2px; color:inherit; background:transparent; font:400 14px/1.5 "IBM Plex Sans","Helvetica Neue",sans-serif; letter-spacing:normal; text-transform:none; list-style:none; cursor:pointer}
.studio-header summary::-webkit-details-marker {display:none}
.studio-header summary::after, .studio-header .studio-menu-toggle::after {content:""; width:6px; height:6px; border-right:1px solid; border-bottom:1px solid; transform:rotate(45deg); margin-top:-3px}
.studio-header details[open]>summary::after, .studio-header .studio-menu-toggle[aria-expanded="true"]::after {transform:rotate(225deg); margin-top:3px}
.studio-header .studio-nav-panel {position:absolute; top:100%; right:0; min-width:240px; max-width:calc(100vw - 32px); padding:8px; border:1px solid #504839; background:#141517; box-shadow:0 16px 36px #0006}
.studio-header details:not([open])>.studio-nav-panel {display:none}
.studio-header .studio-navigation a {display:flex; align-items:center; min-height:44px; margin:0; padding:10px 14px; border:0; border-radius:1px; color:#d8d5ce; background:transparent; font:400 14px/1.5 "IBM Plex Sans","Helvetica Neue",sans-serif; text-align:left; text-decoration:none; text-transform:none; white-space:normal; overflow-wrap:anywhere}
.studio-header .studio-navigation a:hover, .studio-header summary:hover, .studio-header .studio-menu-toggle:hover {color:#f6eddb; background:#262521}
.studio-header .studio-navigation a[aria-current="page"] {color:#e3be83; box-shadow:inset 2px 0 #c89e60; background:#27251f}
.studio-header a:focus-visible, .studio-header summary:focus-visible, .studio-header button:focus-visible {outline:2px solid #e3be83; outline-offset:2px}
.studio-header .studio-menu-toggle {display:none; margin-left:auto; border:1px solid #746044}
.studio-header .studio-navigation[hidden], .studio-header .studio-menu-toggle[hidden] {display:none!important}
.studio-header .studio-skip {position:fixed; left:16px; top:-100px; z-index:1000; padding:12px 18px; background:#101112; color:#ebe8df; font:400 16px/1.5 "IBM Plex Sans","Helvetica Neue",sans-serif}
.studio-header .studio-skip:focus {top:8px; outline:3px solid #e3be83}
.studio-context-navigation {display:flex; flex-wrap:wrap; gap:4px 20px; padding:8px clamp(16px,4vw,64px); background:#141417; border-bottom:1px solid #383633}
.studio-context-navigation a {display:inline-flex; align-items:center; min-height:44px; color:#d8d5ce; font:400 14px/1.5 "IBM Plex Sans","Helvetica Neue",sans-serif; text-decoration:none; text-underline-offset:4px}
.studio-context-navigation a:hover, .studio-context-navigation a[aria-current="page"] {text-decoration:underline}
.studio-context-navigation a:focus-visible {outline:2px solid #e3be83; outline-offset:3px}
body[data-studio-codices] label, body[data-studio-codices] select {min-width:0; max-width:100%}
@media(max-width:59.999rem) {
 .studio-header .studio-menu-toggle {display:flex}
 .studio-header .studio-navigation {display:block; flex:1 0 100%; width:100%; max-height:calc(100dvh - 90px); overflow-y:auto; padding-top:8px; border-top:1px solid #383633}
 .studio-header .studio-nav-group {border-bottom:1px solid #383633}
 .studio-header summary {justify-content:space-between; padding:12px 4px}
 .studio-header .studio-nav-panel {position:static; min-width:0; max-width:100%; padding:0 8px 8px; border:0; background:transparent; box-shadow:none}
}
@media(forced-colors:active) {
 .studio-header,.studio-header .studio-nav-panel {background:Canvas; color:CanvasText; border-color:CanvasText}
 .studio-header .studio-navigation a {color:LinkText}
 .studio-header .studio-navigation a[aria-current="page"] {outline:1px solid LinkText}
}