html body.example-mode { padding-top: var(--example-header-height, 146px) !important; }
html body.example-mode.public-list-page.lists-page { padding-top: var(--example-header-height, 180px) !important; }
html body.example-mode > main { padding-top: 20px !important; margin-top: 0 !important; }
.example-header { display: block; position: fixed !important; inset: 0 0 auto; z-index: 3500; padding: 0 !important; margin: 0; transform: none !important; background: var(--gg-room, #0d0c10); border-bottom: 1px solid var(--gg-room-line-2); color: var(--gg-text); font-family: var(--gg-font-case); }
.example-topline { max-width: 1320px; padding: 12px 24px 8px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.example-topline .gg-wordmark { font-size: 22px; text-decoration: none; }
.example-topline > div { display: flex; align-items: center; gap: 20px; }
.example-label { color: var(--gg-accent-light); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.example-signup { display: inline-flex; align-items: center; gap: 18px; min-height: 40px; padding: 8px 14px; border-radius: 7px; background: var(--gg-accent); color: var(--gg-text); text-decoration: none; font-size: 12px; font-weight: 600; }
.example-nav { display: flex; gap: 6px; max-width: 1320px; margin: 0 auto; padding: 0 24px; overflow-x: auto; scrollbar-width: thin; }
.example-nav a { flex: none; padding: 10px 14px; min-height: 40px; color: var(--gg-room-tx-2); border-bottom: 2px solid transparent; text-decoration: none; font-size: 13px; }
.example-nav a[aria-current="page"] { color: var(--gg-accent-light); border-bottom-color: var(--gg-accent-light); }
.example-categories { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 24px; padding:8px 16px; border-top:1px solid var(--gg-room-line); }
.example-categories a { color:var(--gg-room-tx-2); font-size:12px; line-height:1.8; text-decoration:none; }
.example-categories a[aria-current="page"] { color:var(--gg-accent-light); text-decoration:underline; text-underline-offset:4px; }
.example-notice { display: flex; gap: 12px; justify-content: center; align-items: baseline; padding: 9px 18px; background: var(--gg-room-2); color: var(--gg-room-tx-2); font-size: 11px; line-height: 1.6; }
.example-notice a { margin-left: 8px; color: var(--gg-accent-light); text-underline-offset: 3px; }
.example-status { position: fixed; z-index: 9000; bottom: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 14px 18px; border: 1px solid var(--gg-accent-light); border-radius: 8px; background: var(--gg-room-2); color: var(--gg-text); font: 500 13px/1.6 var(--gg-font-case); box-shadow: 0 8px 30px #0008; }
.example-header a:hover { color: var(--gg-text); }
.example-header a:active { background: var(--gg-room-3); }
.example-header a:focus-visible { outline: 2px solid var(--gg-accent-light); outline-offset: -2px; }
.example-mode .mobile-tabbar, .example-mode .desktop-game-page-bar { display: none !important; }
@media(max-width:640px) {
  .example-topline { padding: 10px 16px 5px; }
  .example-topline .gg-wordmark { font-size: 19px; }
  .example-topline > div > .example-label { display: none; }
  .example-signup { padding: 8px 10px; gap: 12px; }
  .example-nav { padding: 0 8px; }
  .example-nav a { padding: 10px 13px; font-size: 12px; }
  .example-notice { justify-content: flex-start; gap: 8px; padding: 7px 16px; font-size: 10px; }
  .example-notice > .example-label { display: none; }
  .example-notice a { margin-left: auto; }
}