.project-tutorial{margin-top:18px;border-top:1px solid var(--hairline);scroll-margin-top:100px}.project-tutorial summary{cursor:pointer;padding:20px 4px;color:var(--ink);font-size:16px}.project-tutorial summary span{margin-left:16px;color:var(--soft-ink);font-size:13px}.project-tutorial summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}.project-tutorial-figure{margin:0;padding:12px;border:1px solid var(--hairline);border-radius:18px;background:var(--paper)}.project-tutorial-figure video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;background:#171d29}.project-tutorial-figure figcaption{padding:12px 4px 2px;color:var(--soft-ink);font-size:12px;line-height:1.7}@media(max-width:700px){.project-tutorial summary span{display:block;margin:7px 0 0 18px}.project-tutorial-figure{padding:7px;border-radius:12px}.project-tutorial-figure video{border-radius:7px}}
.tutorial-controls{display:flex;align-items:center;gap:12px;padding:12px 2px 0}.tutorial-controls button{border:1px solid var(--hairline,var(--line));border-radius:8px;background:var(--paper);color:var(--ink);padding:8px 12px;white-space:nowrap;cursor:pointer;font:inherit;font-size:13px}.tutorial-controls input{flex:1;min-width:30px;accent-color:var(--blue,#7384bd)}.tutorial-controls :focus-visible{outline:2px solid var(--blue,#7384bd);outline-offset:3px}.ink-guide-figure .tutorial-controls{color:var(--ink)}
.project-tutorial-figure:fullscreen,.ink-guide-figure:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#151515;padding:16px}.project-tutorial-figure:fullscreen video,.ink-guide-figure:fullscreen video{max-height:calc(100vh - 100px);object-fit:contain}.project-tutorial-figure:fullscreen figcaption,.ink-guide-figure:fullscreen figcaption{display:none}