.ap{padding:0 0 64px}
.ap .top{padding:30px 0 0}
.ap .top h1{max-width:12ch}
.ap .top .sub{margin-top:18px;font-size:17px;line-height:1.5;color:var(--ink-soft);max-width:40ch}
.ap .port{margin-top:24px;background:var(--card);border-radius:26px;overflow:hidden;display:grid;
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 28px 70px rgba(13,27,42,.1)}
.ap .livechip{position:absolute;left:16px;top:16px;z-index:3;display:flex;align-items:center;gap:9px;padding:8px 15px 8px 12px;
  border-radius:999px;background:rgba(255,253,247,.92);font-size:13.5px;font-weight:500;color:var(--ink);overflow:hidden;
  box-shadow:0 2px 4px rgba(13,27,42,.05),0 24px 60px rgba(13,27,42,.07)}
.ap .livechip i{position:relative;width:8px;height:8px;border-radius:50%;background:#2f8f5b;flex:none;animation:lpulse 2.4s infinite}
.ap .livechip i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2f8f5b;animation:appulse 2.2s ease-out infinite}
@keyframes appulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.2);opacity:0}}
.ap .port .body{padding:24px 24px 30px;display:flex;flex-direction:column}
.ap .code{font-size:48px;font-weight:390;letter-spacing:-.05em;line-height:.9}
.ap .name{margin-top:8px;font-size:17px;color:var(--ink-soft)}
.ap .port .btn{order:1;margin-top:20px;width:100%;min-height:56px;font-size:17px}
.ap .list{order:2;list-style:none;margin:26px 0 0;padding:0}
.ap .pic{position:relative;display:block;background:var(--night);min-height:100%}
.ap .pic img{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;object-position:52% 55%}
.ap .list li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line);
  font-size:16px;line-height:1.45;color:var(--ink-soft)}
.ap .list b{font-weight:500;color:var(--ink)}

.ap .see{margin-top:64px}
.ap .see h2{font-size:clamp(30px,3.6vw,46px);max-width:16ch}
.ap .modes{margin-top:28px;display:grid;gap:34px}
.ap .modes a.shot{display:block;border-radius:20px;overflow:hidden;background:var(--night);
  box-shadow:0 2px 4px rgba(13,27,42,.06),0 24px 60px rgba(13,27,42,.09);transition:transform .18s ease}
.ap .modes a.shot:hover{transform:translateY(-3px)}
.ap .modes img{display:block;width:100%;height:auto;aspect-ratio:16/11;object-fit:cover}
.ap .modes .s-live img{object-position:30% 60%}
.ap .modes .s-demo img{object-position:52% 60%}
.ap .modes h3{margin-top:20px;font-size:26px}
.ap .modes p{margin-top:8px;font-size:16.5px;color:var(--ink-soft);max-width:30ch}
.ap .modes .go{display:inline-block;margin-top:12px;font-size:15.5px;font-weight:500;color:var(--ink);text-decoration:underline;text-underline-offset:4px}

.ap .band{margin-top:64px;border-radius:26px;padding:48px 28px}
.ap .band h2{font-size:clamp(30px,3.6vw,46px);max-width:18ch}
.ap .band .note{max-width:40ch}
.ap .band .btn{margin-top:28px}

@media(min-width:900px){
  .ap .see{margin-top:96px}
  .ap .modes{grid-template-columns:repeat(2,1fr);gap:28px;margin-top:40px}
  .ap .band{margin-top:96px;padding:64px;display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center}
  .ap .band .btn{margin-top:0}
}
@media(min-width:1000px){
  .ap .top{padding:44px 0 0}
  .ap .top .sub{margin-top:24px;font-size:19px}
  .ap .port{grid-template-columns:minmax(0,7fr) minmax(0,5fr);margin-top:44px}
  .ap .port .body{padding:44px 44px 46px}
  .ap .code{font-size:clamp(56px,7vw,88px)}
  .ap .name{margin-top:12px;font-size:19px}
  .ap .port .btn{order:3;align-self:flex-start;width:auto;padding:0 38px;margin-top:30px}
  .ap .pic{min-height:560px}
  .ap .pic img{aspect-ratio:auto;position:absolute;inset:0}
  .ap .list li{grid-template-columns:84px 1fr}
}
@media(prefers-reduced-motion:reduce){
  .ap .livechip i{animation:none}
  .ap .livechip i::after{animation:none;opacity:0}
  .ap .modes a.shot{transition:none}
}