:root {
  --demo-bar-height: 52px;
  --demo-bar-bg: rgba(16, 16, 15, .94);
  --demo-bar-fg: #f5f2ea;
  --demo-bar-line: rgba(255, 255, 255, .2);
}

html { scroll-padding-top: calc(var(--demo-bar-height) + 20px); }
body.public-demo { padding-top: var(--demo-bar-height) !important; }

.demo-ribbon {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  left: 0;
  min-height: var(--demo-bar-height);
  padding: 0 clamp(14px, 3vw, 36px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2.2vw, 28px);
  border-bottom: 1px solid var(--demo-bar-line);
  background: var(--demo-bar-bg);
  color: var(--demo-bar-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.demo-ribbon a { color: inherit; text-decoration: none; }
.demo-ribbon__back { font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
.demo-ribbon__state { min-width: 0; display: flex; align-items: baseline; gap: 12px; }
.demo-ribbon__state strong { font-size: 11px; letter-spacing: .12em; }
.demo-ribbon__state span { overflow: hidden; color: rgba(245, 242, 234, .65); font-size: 10px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.demo-ribbon__action { min-height: 34px; padding: 0 14px; display: inline-flex; align-items: center; gap: 14px; border: 1px solid rgba(255,255,255,.42); font-size: 10px; letter-spacing: .08em; }
.demo-ribbon__action i { font-style: normal; transition: transform .24s ease; }
.demo-ribbon__action:hover i, .demo-ribbon__action:focus-visible i { transform: translate(3px, -3px); }

.demo-ribbon a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

body.public-demo .studio-toggle,
body.public-demo .studio-bar,
body.public-demo .studio-status,
body.public-demo .studio-panel,
body.public-demo .story-panel,
body.public-demo .inspector-panel,
body.public-demo .preview-frame__label,
body.public-demo .preview-meta { display: none !important; }

body.public-demo .studio-layout,
body.public-demo .preview-stage,
body.public-demo .preview-frame,
body.public-demo .studio-preview { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; box-shadow: none !important; }
body.public-demo .portfolio { max-width: none !important; box-shadow: none !important; }
body.public-demo .portfolio-progress { top: var(--demo-bar-height) !important; }
body.public-demo .site-header { top: var(--demo-bar-height); }
body.public-demo .hero-scene__scroll { display: none !important; }

@media (max-width: 720px) {
  :root { --demo-bar-height: 48px; }
  .demo-ribbon { grid-template-columns: auto 1fr auto; gap: 9px; padding-inline: 11px; }
  .demo-ribbon__back { font-size: 0; }
  .demo-ribbon__back::before { content: "←"; font-size: 16px; }
  .demo-ribbon__state span { display: none; }
  .demo-ribbon__state strong { font-size: 9px; }
  .demo-ribbon__action { min-height: 32px; padding-inline: 10px; }
  .demo-ribbon__action span { display: none; }
  .demo-ribbon__action::before { content: "相談"; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-ribbon *, .demo-ribbon *::before, .demo-ribbon *::after { animation: none !important; transition: none !important; }
}