/* Demo overlay — 各デザインのCSSには一切手を入れていません */
:root{
  --demo-bg:#0b0b0b;
  --demo-mint:#12ec91;
}
body{padding-bottom:56px}
.demo-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:99999;
  height:56px;box-sizing:border-box;
  display:flex;align-items:center;gap:20px;
  padding:0 20px;
  background:var(--demo-bg);color:#fff;
  border-top:1px solid rgba(255,255,255,.16);
  font-family:"Poppins","Helvetica Neue","Yu Gothic","Hiragino Sans","Noto Sans JP","Noto Sans CJK JP",sans-serif;
  font-size:12px;letter-spacing:.02em;
}
.demo-bar a{color:#fff;text-decoration:none}
.demo-back{flex:none;opacity:.75}
.demo-back:hover{opacity:1}
.demo-note{
  margin:0;flex:1;min-width:0;
  color:#c9cdcb;font-size:11.5px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.demo-note span{
  display:inline-block;margin-right:10px;padding:4px 8px;
  background:var(--demo-mint);color:#0b0b0b;
  font-size:9.5px;font-weight:700;letter-spacing:.14em;
  vertical-align:middle;
}
.demo-note b{font-weight:400}
.demo-note i{display:none;font-style:normal}
.demo-brand{
  flex:none;padding:10px 16px;
  border:1px solid var(--demo-mint);color:var(--demo-mint);
  font-size:11px;letter-spacing:.06em;
}
.demo-brand:hover{background:var(--demo-mint);color:#0b0b0b}
@media(max-width:900px){
  body{padding-bottom:52px}
  .demo-bar{height:52px;gap:12px;padding:0 14px}
  .demo-note{font-size:10.5px}
  .demo-note b{display:none}
  .demo-note i{display:inline}
  .demo-note span{margin-right:8px;padding:3px 6px;font-size:9px}
  .demo-brand{padding:8px 12px;font-size:10px}
}
@media(max-width:560px){
  .demo-bar{gap:10px;padding:0 12px}
  .demo-back{font-size:10.5px}
  .demo-note{font-size:9.5px}
  .demo-note span{display:none}
  .demo-brand{padding:8px 10px;font-size:9.5px}
}
@media(max-width:360px){
  .demo-back{display:none}
}