/* One shared Mono toolbar. Keep product-page styles outside this component. */
.mono-toolbar {
  --surface: #fff; --surface-elevated: #fff; --text: #000; --secondary: #636366; --border: rgb(0 0 0 / .08); --accent-fill: #0071e3; --accent-text: #0066cc;
  --glass-fill: rgb(255 255 255 / .72); --glass-fill-strong: rgb(255 255 255 / .86);
  --glass-tint: linear-gradient(180deg,rgb(255 255 255 / .66),rgb(246 246 248 / .56));
  --glass-tint-strong: linear-gradient(180deg,rgb(255 255 255 / .82),rgb(246 246 248 / .76));
  --glass-stroke: rgb(255 255 255 / .65); --glass-rim-top: rgb(255 255 255 / .75); --glass-rim-bottom: rgb(0 0 0 / .10); --glass-rim-edge: rgb(255 255 255 / .22); --glass-soft-light: rgb(255 255 255 / .12); --glass-selected: rgb(0 0 0 / .07);
  --shadow-glass: 0 6px 22px rgb(0 0 0 / .16); --separator: rgb(60 60 67 / .29); --blur-glass:24px; --blur-glass-strong:40px;
  --lens-bezel:22px; --lens-depth:34px; --lens-ior:1.5; --lens-aberration:.015; --lens-frost:.65px; --lens-frost-strong:2.4px; --lens-specular:.16; --lens-saturation:1.1;
  font: 16px/1.5 -apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif; letter-spacing:0; color:var(--text);
}
html[data-theme="dark"] .mono-toolbar {
  --surface:#1c1c1e; --surface-elevated:#2c2c2e; --text:#fff; --secondary:#aeaeb2; --border:rgb(255 255 255 / .12); --accent-fill:#0070e0; --accent-text:#409cff;
  --glass-fill:rgb(44 44 46 / .62); --glass-fill-strong:rgb(28 28 30 / .86);
  --glass-tint:linear-gradient(180deg,rgb(43 43 43 / .72),rgb(30 30 30 / .66)); --glass-tint-strong:linear-gradient(180deg,rgb(38 38 38 / .86),rgb(27 27 27 / .80));
  --glass-stroke:rgb(255 255 255 / .14); --glass-rim-top:rgb(255 255 255 / .28); --glass-rim-bottom:rgb(255 255 255 / .16); --glass-rim-edge:rgb(255 255 255 / .10); --glass-soft-light:rgb(255 255 255 / .045); --glass-selected:rgb(0 0 0 / .68); --shadow-glass:0 6px 22px rgb(0 0 0 / .24); --separator:rgb(84 84 88 / .65);
}
.mono-toolbar *, .mono-toolbar *::before, .mono-toolbar *::after { box-sizing:border-box; }
.mono-toolbar button { font:inherit; color:inherit; border:0; cursor:pointer; background:transparent; }
.mono-toolbar a { text-decoration:none; color:inherit; }
.mono-toolbar h2, .mono-toolbar p { margin:0; font-family:inherit; }
.mono-toolbar [hidden] { display:none!important; }
.mono-toolbar.site-header { position:fixed; inset:16px 16px auto; z-index:1000; width:auto; max-width:680px; margin:auto; }
.mono-toolbar .top-bar { display:flex; align-items:center; justify-content:space-between; height:56px; min-height:0; padding:5px 12px; gap:12px; border-radius:999px; }
.mono-toolbar .top-brand { display:flex; align-items:center; gap:8px; min-height:44px; border-radius:999px; font-size:16px; font-weight:700; letter-spacing:-.025em; flex-shrink:0; }
.mono-toolbar .top-brand { padding-inline:8px; }
.mono-toolbar .brand-icon { display:flex; width:30px; height:30px; align-items:center; justify-content:center; background:#000; border-radius:8px; }
.mono-toolbar .brand-icon img { display:block; width:24px; height:24px; }
.mono-toolbar .top-nav, .mono-toolbar .top-actions { display:flex; align-items:center; gap:4px; }
.mono-toolbar .top-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 14px; border-radius:999px; color:var(--secondary); font-size:15px; font-weight:500; }
.mono-toolbar .top-link:hover, .mono-toolbar .top-link[aria-expanded="true"] { color:var(--text); background:var(--glass-selected); }
.mono-toolbar .top-link svg { width:12px; height:12px; }
.mono-toolbar .top-link[aria-expanded="true"] svg { transform:rotate(180deg); }
.mono-toolbar .mh-appearance { position:relative; }
.mono-toolbar .mh-appearance-button { display:flex; align-items:center; justify-content:center; gap:7px; min-width:44px; min-height:44px; padding:0 12px; border-radius:999px; font-size:13px; font-weight:600; background:rgb(128 128 128 / .10); border:.5px solid var(--border); }
.mono-toolbar .mh-appearance-button svg:first-child { width:14px; height:14px; color:var(--accent-fill); }
.mono-toolbar .mh-appearance-button svg:last-child { width:12px; height:12px; }
.mono-toolbar .mh-preferences { position:absolute; top:calc(100% + 10px); right:0; width:256px; border-radius:18px; padding:12px; }
.mono-toolbar .mh-preferences h2 { font-size:12px; line-height:18px; color:var(--secondary); font-weight:600; text-transform:uppercase; margin:0 0 8px 4px; letter-spacing:.04em; }
.mono-toolbar .mh-pref-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; font-size:14px; font-weight:600; }
.mono-toolbar .mh-segmented { display:flex; position:relative; background:rgb(128 128 128 / .10); padding:4px; border-radius:999px; }
.mono-toolbar .mh-segmented button { min-height:44px; padding:0 12px; border-radius:999px; font-size:12px; }
.mono-toolbar .mh-segmented.theme-segment button[aria-pressed="true"] { background:transparent; box-shadow:none; }
.mono-toolbar .mh-glass-row { border-top:.5px solid var(--border); min-height:68px; }
.mono-toolbar .mh-glass-row small { display:block; font-size:11px; color:var(--secondary); font-weight:400; margin-top:4px; line-height:1.4; }
.mono-toolbar .mh-switch { width:44px; min-width:44px; height:44px; position:relative; padding:0; }
.mono-toolbar .mh-switch::before { content:''; position:absolute; inset:10px 0; background:var(--secondary); border-radius:999px; transition:background .18s; }
.mono-toolbar .mh-switch span { position:absolute; top:12px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgb(0 0 0 / .2); }
.mono-toolbar .mh-switch[aria-checked="true"]::before { background:var(--accent-fill); }
.mono-toolbar .mh-switch[aria-checked="true"] span { transform:translateX(20px); }
.mono-toolbar #glassToggleKnob { transition:transform var(--sp-bouncy-ms) var(--sp-bouncy),scale var(--sp-bouncy-ms) var(--sp-bouncy); }
.mono-toolbar .mh-preferences p { border-radius:12px; padding:10px; color:var(--secondary); background:rgb(128 128 128 / .10); font-size:11px; line-height:1.5; }
.mono-toolbar .games-panel { position:absolute; inset:68px 0 auto; padding:32px; border-radius:32px; max-height:calc(100dvh - 104px); overflow-y:auto; overscroll-behavior:contain; }
.mono-toolbar .games-panel::before { content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.mono-toolbar .mh-menu-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; }
.mono-toolbar .game-menu-grid { display:grid; grid-template-columns:1.2fr 1.2fr 1fr; gap:32px; }
.mono-toolbar .menu-group h2 { margin-bottom:12px; color:var(--secondary); font-size:13px; font-weight:400; line-height:1.5; letter-spacing:0; }
.mono-toolbar .menu-game { display:block; min-height:44px; padding:7px 0; font-size:21px; font-weight:650; line-height:1.35; letter-spacing:-.025em; border-radius:8px; }
.mono-toolbar .menu-resource { display:flex; align-items:center; min-height:44px; font-size:15px; font-weight:500; border-radius:8px; }
.mono-toolbar .menu-game:hover, .mono-toolbar .menu-game[aria-current="page"], .mono-toolbar .menu-resource:hover { color:var(--accent-text); }
.mono-toolbar .menu-group:last-child { grid-column:auto; border:0; padding-top:0; }
.mono-toolbar .mh-arrow { width:14px; height:14px; margin-left:6px; }
.mono-toolbar :focus-visible { outline:2px solid var(--mono-focus); outline-offset:2px; }
html { scroll-padding-top:96px; }
body.mono-product-page main { padding-top:96px; }
@media (max-width:760px) {
  .mono-toolbar .desktop-link { display:none; }
  .mono-toolbar .top-bar { gap:6px; padding:5px 10px; }
  .mono-toolbar .top-brand { font-size:15px; gap:6px; }
  .mono-toolbar .top-link { padding:0 10px; }
  .mono-toolbar .mh-appearance-button > span { display:none; }
  .mono-toolbar .games-panel { padding:24px; border-radius:22px; }
  .mono-toolbar .game-menu-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
  .mono-toolbar .game-menu-grid .menu-group:last-child { grid-column:1/-1; padding-top:20px; border-top:.5px solid var(--border); }
  .mono-toolbar .menu-resource-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mono-toolbar .mh-menu-grid { gap:24px; }
  .mono-toolbar .menu-game { font-size:18px; }
}
@media (max-width:480px) {
  .mono-toolbar .top-brand > span:last-child { display:none; }
  .mono-toolbar .top-link { font-size:12px; padding:0 6px; gap:4px; }
  .mono-toolbar .top-link svg { width:10px; height:10px; }
  .mono-toolbar #appearanceBtn { width:44px; padding:0; gap:0; }
  .mono-toolbar #appearanceBtn svg:last-child { display:none; }
  .mono-toolbar .games-panel { padding:20px; }
  .mono-toolbar .mh-menu-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .mono-toolbar *, .mono-toolbar *::before, .mono-toolbar *::after { animation:none!important; transition:none!important; } }
@media (prefers-reduced-transparency:reduce) { .mono-toolbar .sg-glass { background:var(--surface-elevated)!important; backdrop-filter:none; } .mono-toolbar .sg-lens-layer { display:none!important; } }

/* Reuse Chrome's moving monochrome wordmark for product headings. */
.mono-product-gradient { display:inline-block; color:var(--text); }
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .mono-product-gradient {
    --product-sweep-width:360px;
    --product-sweep-duration:5s;
    background-image:linear-gradient(90deg,#000 0%,#fff 50%,#000 100%);
    background-size:var(--product-sweep-width) 100%;
    background-repeat:repeat-x;
    background-position:0 0;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:.4px rgb(128 128 128 / .35);
    animation:mono-product-sweep var(--product-sweep-duration) linear infinite;
  }
}
@keyframes mono-product-sweep { from {background-position:0 0;} to {background-position:var(--product-sweep-width) 0;} }
@media (prefers-reduced-motion:reduce) {
  .mono-product-gradient { animation:none; background:none; color:var(--text); -webkit-text-fill-color:var(--text); -webkit-text-stroke:0; }
}

/* Quiet monochrome focus; selected controls retain their product accent. */
:root { --mono-focus:rgb(0 0 0 / .5); }
html.dark,html[data-theme="dark"] { --mono-focus:rgb(255 255 255 / .5); }
html body :focus-visible { outline-color:var(--mono-focus)!important; --tw-ring-color:var(--mono-focus)!important; }
html body [class*="focus:ring"]:focus { --tw-ring-color:var(--mono-focus)!important; }
html body .sg-search:focus-within { outline-color:var(--mono-focus)!important; }
@media (forced-colors:active) { html body :focus-visible { outline-color:Highlight!important; } }

/* Animate the shell rather than scaling its text. */
.mono-toolbar.is-morphing .top-bar {overflow:clip;}