:root{--bg:#fff;--fg:#000;--mute:#666;--ink:#352fc0;--sky:#7f86e6;--sun:#ff8a3d}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:monospace;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:3rem 1rem
}
.wrap{width:100%;max-width:646px;display:flex;flex-direction:column;gap:3rem}
header{display:flex;justify-content:center}
header img{width:112px;height:112px;display:block}
section+section{margin-top:2.5rem}
h2{margin-bottom:1rem;display:flex;align-items:center;gap:.6rem}
h2::before{content:"";width:.6rem;height:.6rem;background:var(--sun)}
iframe{width:100%;height:190px;border:0;display:block}
p{line-height:1.6}
.mute{color:var(--mute)}
pre{background:#f6f6fb;border-left:3px solid var(--sky);padding:1rem;margin:1rem 0;overflow-x:auto;font-size:.8rem;line-height:1.5}
main a,footer a{color:var(--fg);text-decoration:none}
main a{color:var(--ink);border-bottom:1px dotted var(--ink)}
main a:hover,footer a:hover{background:var(--ink);color:var(--bg)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem}
button{font:inherit;color:var(--bg);background:var(--ink);border:0;padding:.35rem .9rem;cursor:pointer}
button:hover{background:var(--sun)}
footer{display:flex;flex-wrap:wrap;gap:.5rem 2rem;border-top:2px dotted var(--sky);padding-top:1.5rem}
::selection{background:var(--ink);color:var(--bg)}
@media(max-width:480px){
  body{padding:2rem 1rem}
  header img{width:96px;height:96px}
}