.hayate-demo{width:min(100%,520px);justify-self:end;display:grid;gap:16px}
.hayate-demo-heading{display:grid;gap:6px}
.hayate-demo-heading p{margin:0;color:var(--gold);font-size:8px;font-weight:900;letter-spacing:.18em}
.hayate-demo-heading h3{max-width:15em;margin:0;color:#fff;font-family:var(--serif);font-size:clamp(23px,2.3vw,31px);font-weight:600;line-height:1.45;letter-spacing:-.025em}
.hayate-demo-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(220,195,148,.38);border-left:1px solid rgba(220,195,148,.38)}
.hayate-demo-tab{min-width:0;min-height:58px;padding:7px 3px;display:flex;align-items:center;justify-content:center;gap:5px;border:0;border-right:1px solid rgba(220,195,148,.38);border-bottom:1px solid rgba(220,195,148,.38);background:#102038;color:#d8e0ea;font:800 8.2px/1.2 var(--sans);cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}
.hayate-demo-tab img{width:23px;height:23px;border-radius:7px;object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.hayate-demo-tab:hover,.hayate-demo-tab:focus-visible{background:#172b48;color:#fff}
.hayate-demo-tab:focus-visible{position:relative;z-index:2;outline:3px solid #f7dc9f;outline-offset:2px}
.hayate-demo-tab:active{transform:translateY(1px)}
.hayate-demo-tab[data-demo="ig"].is-active{background:linear-gradient(135deg,#66205c,#c73389);color:#fff}
.hayate-demo-tab[data-demo="x"].is-active{background:linear-gradient(135deg,#17191f,#796132);color:#fff}
.hayate-demo-tab[data-demo="threads"].is-active{background:#06070a;color:#fff}
.hayate-demo-tab[data-demo="line"].is-active{background:linear-gradient(135deg,#08683f,#0db96a);color:#fff}
.hayate-demo-tab[data-demo="tiktok"].is-active{background:linear-gradient(135deg,#0a0a0c,#1c1c20);color:#fff;box-shadow:inset 0 0 0 1px #25F4EE}
.hayate-demo-tab[data-demo="youtube"].is-active{background:linear-gradient(135deg,#a3080c,#e6291b);color:#fff}
.hayate-demo-stage{position:relative;width:100%;overflow:hidden;border:1px solid rgba(220,195,148,.72);background:#06080d;box-shadow:18px 18px 0 rgba(104,84,157,.42)}
.hayate-demo-panel{width:100%;background:#06080d}
.hayate-demo-panel[hidden]{display:none}
.hayate-demo-panel video{display:block;width:100%;height:auto;aspect-ratio:39/68;object-fit:cover;background:#06080d}
@media(max-width:980px){.hayate-demo{justify-self:center}}
@media(max-width:720px){
  .hayate-demo{width:100%;gap:13px}
  .hayate-demo-heading p{font-size:7px}.hayate-demo-heading h3{font-size:24px}
  .hayate-demo-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hayate-demo-tab{min-height:52px;justify-content:flex-start;gap:7px;padding:7px 12px;font-size:9px}
  .hayate-demo-tab img{width:25px;height:25px}
  .hayate-demo-stage{box-shadow:10px 10px 0 rgba(104,84,157,.42)}
}
@media(prefers-reduced-motion:reduce){.hayate-demo-tab{transition:none}}