.gpio-toc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}.gpio-toc a{margin:0;font-size:14px}.gpio-figure{padding:20px}.gpio-demo-face{display:flex;align-items:center;gap:20px;padding:24px 0}.gpio-demo-face output{font-size:20px;font-weight:700}.gpio-demo-led{display:inline-block;width:52px;height:52px;flex-shrink:0;border:3px solid #758c84;border-radius:50%;background:#c2cdc6;transition:background .15s,box-shadow .15s}.gpio-demo-led.lit{background:#ffcb4d;border-color:#ba810b;box-shadow:0 0 28px #ffcb4d99}.gpio-demo-code{min-height:3em}body[data-lesson="01-gpio"] h3{margin-top:34px}body[data-lesson="01-gpio"] section{margin-top:55px}@media(max-width:600px){.gpio-toc{grid-template-columns:1fr}.gpio-figure{padding:5px}.gpio-demo-face output{font-size:16px}.gpio-demo-led{width:38px;height:38px}}@media(prefers-reduced-motion:reduce){.gpio-demo-led{transition:none}}

.cube-shot{padding:12px}.cube-shot a{display:block}.cube-shot img{border-radius:5px}.cube-shot figcaption{padding:5px 3px}.cube-shot a:focus-visible{outline:3px solid #dc8500}body[data-lesson="01-gpio"] h4{font-size:17px;line-height:1.7;margin:32px 0 12px}
body[data-lesson="01-gpio"] .callout strong{display:inline}body[data-lesson="01-gpio"] .callout>strong:first-child{display:block}

.cube-input-detail{aspect-ratio:942/430;position:relative;overflow:hidden}.cube-input-detail img{position:absolute;bottom:0;left:0;display:block;width:100%;height:auto}