/* generated by site/examples/build.mjs */
.yt-bar{position:fixed;top:0;left:0;right:0;height:36px;z-index:2147483000;
  display:flex;align-items:center;gap:10px;padding:0 16px;box-sizing:border-box;
  background:#17191d;color:#e8e3da;font:500 12px/1 Inter,system-ui,sans-serif;
  letter-spacing:.06em;text-transform:uppercase}
.yt-bar b{font-weight:600;color:#fff}
.yt-bar span{color:#9aa0a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yt-bar a{margin-left:auto;flex:none;color:#e8e3da;text-decoration:none;
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 12px}
.yt-bar a:hover{border-color:rgba(255,255,255,.6)}
/* The home mark is an anchor too, so it inherits the rule above and would be
   shoved to the right edge beside the other one. It opts out of all of it. */
.yt-bar a.yt-home{margin-left:0;border:0;padding:0;display:flex;align-items:center;
  color:#f4f2ec;line-height:0}
.yt-bar a.yt-home svg{width:17px;height:17px;display:block}
.yt-bar a.yt-home:hover{color:#fff}
body{padding-top:36px}
/* FORM CONTROLS DO NOT INHERIT THE PAGE FONT. The UA stylesheet gives button,
   input, select and textarea their own family, which in Chromium is Arial, so
   a design's own typeface stops at the edge of its buttons. Found on the video
   rung: one label reading "Send brief" computed to font-family:Arial with no
   Arial anywhere in the output, because nothing had declared it — the browser
   had. It is a correction of a browser default rather than a design decision,
   which is why it belongs in the generated chrome and not in an export. */
button,input,select,textarea{font:inherit}
/* ONLY the export's own navigation. The hero's sticky container is deliberately
   untouched: it is the scroll effect, and moving it would break the thing this
   example is here to show. It is a div, so this rule cannot reach it, and the
   bar is a div too, so this cannot reach that either.

   THE SELECTOR IS THIS PLAIN ON PURPOSE, after two wrong attempts.
   An attribute selector on the source string matches nothing: React
   re-serialises the inline style, so position:sticky;top:0; in the file
   arrives in the DOM as position: sticky; top: 0px;. Scoping under x-dc
   matches nothing either: the runtime REMOVES that host element once it has
   mounted, and the rendered tree is body > div > div.sc-host > div > header.
   Scoping to .sc-host would work and is rejected anyway, because that class is
   the runtime's own internal and a re-export may rename it.

   Bare header is safe despite looking broad. The top property is inert on
   anything not positioned, so a future export adding plain headers is
   unaffected, and a sticky one that regresses is caught by verify.mjs, which
   reads computed top off the rendered nav rather than trusting this file.

   !important is required because the declaration it has to beat is inline.
   (No backticks in this comment on purpose: it sits inside a template literal
   and one would end the string here.) */
body nav{top:52px !important}
@media (max-width:600px){
  .yt-bar{font-size:10px;gap:8px;padding:0 10px}
  .yt-bar span{display:none}
}