.demo{margin:0;background:var(--ink);color:#fff;border-radius:var(--r);padding:24px 24px 20px}
.demo__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:14px;color:#c9d5e0;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14)}
.demo__again{background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:4px;
  font:500 13px/1 var(--sans);padding:8px 10px;cursor:pointer}
.demo__again:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.demo__log{list-style:none;margin:0;padding:6px 0 0}
.demo__log li{display:grid;grid-template-columns:3.4em minmax(0,1fr) auto;gap:12px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px;line-height:1.55}
.demo__log time{font-family:var(--num);font-weight:700;font-size:13px;color:var(--cyan)}
.demo__log b{font-family:var(--num);font-size:14px;white-space:nowrap;justify-self:end}
.demo__log .demo__human{border-bottom:0;margin-top:4px;padding-top:14px;border-top:1px dashed rgba(255,255,255,.35)}
.demo__human b{background:#fff;color:var(--ink);border-radius:4px;padding:2px 8px;font-family:var(--sans)}
.demo figcaption{margin-top:14px;color:#c9d5e0}
.demo.is-play li{opacity:0;transform:translateY(6px)}
.demo.is-play li.on{opacity:1;transform:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}

.sys{margin:40px 0 0;border-top:2px solid var(--ink)}
.sys__row{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:8px 48px;padding:28px 0;border-bottom:1px solid var(--line)}
.sys__row h3{margin:0;font-size:20px;line-height:1.5}
.sys__row h3 small{display:block;margin-top:6px;font-size:13px;font-weight:500;color:var(--ink-2)}
.sys__row dl{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:6px 16px;margin:0;font-size:15px}
.sys__row dt{color:var(--ink-2)}
.sys__row dd{margin:0}
.sys__row dd.count{font-family:var(--num);font-weight:700}
.sys__note{margin-top:20px}

@media (max-width:860px){
  .sys__row{grid-template-columns:1fr}
}
@media (max-width:480px){
  .sys__row dl{grid-template-columns:1fr;gap:2px}
  .sys__row dd{margin-bottom:8px}
  .demo{padding:20px 16px 16px}
  .demo__log li{grid-template-columns:3em minmax(0,1fr);}
  .demo__log b{grid-column:2;justify-self:start}
}

.can{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.can__cat{background:var(--pale);border-radius:var(--r);padding:24px}
.can__cat h3{display:flex;align-items:center;gap:12px;font-size:19px;margin:0 0 14px}
.can__cat h3 img{width:48px;height:48px;flex:none;background:#fff;border-radius:50%;padding:6px}
.can__cat ul{list-style:none;margin:0;padding:0}
.can__cat li{padding:14px 0 0;border-top:1px solid var(--line);margin-top:14px}
.can__cat li:first-child{margin-top:0}
.can__cat li b{font-size:16px}
.can__cat li p{font-size:14px;line-height:1.6;margin:4px 0 0;color:var(--ink)}
.can__own{display:inline-block;margin-left:8px;font-size:11px;line-height:1;padding:4px 6px;border-radius:3px;
  color:#fff;background:var(--cyan-d);vertical-align:2px;white-space:nowrap}
@media (max-width:960px){.can{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.can{grid-template-columns:1fr}}