.guide-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0}.guide-card{display:block;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none!important;color:var(--text)!important}.guide-card svg{width:30px;height:30px;display:block;margin-bottom:16px;color:var(--green)}.guide-card strong{display:block;font-size:17px;margin-bottom:8px}.guide-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}.guide-steps{counter-reset:step;list-style:none;padding:0!important;display:grid;gap:12px}.guide-steps>li{position:relative;padding:16px 18px 16px 56px!important;border:1px solid var(--line);border-radius:10px;line-height:1.7}.guide-steps>li:before{counter-increment:step;content:counter(step);position:absolute;left:17px;top:18px;color:var(--green);font-weight:700}.guide-steps strong{display:block}.guide-reference{margin:14px 0;border:1px solid var(--line);border-radius:10px;padding:16px}.guide-reference summary{cursor:pointer;font-weight:650}.guide-reference table{margin-bottom:0}.guide-callout{border-left:3px solid var(--green);padding:14px 20px;background:var(--surface);border-radius:0 8px 8px 0}.prompt-lab{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:20px 0}.lab-controls{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:18px;background:var(--surface);font-size:14px}.lab-controls label{display:flex;gap:8px;align-items:center}.lab-controls select,.lab-controls button{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:6px;min-height:38px;padding:6px 12px}.lab-controls input[type=range]{max-width:160px;accent-color:var(--green)}.lab-controls input[type=checkbox]{accent-color:var(--green)}.lab-controls button{cursor:pointer;touch-action:none}.lab-controls button:focus-visible,.lab-controls select:focus-visible{outline:2px solid var(--green);outline-offset:2px}.lab-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}.lab-card{background:var(--bg);min-width:0}.lab-stage{height:150px;display:grid;place-items:center;background:#536476}.lab-caption{padding:18px;font-size:13px;color:var(--muted);line-height:1.65}.lab-caption strong{display:block;color:var(--text);font-size:15px;margin-bottom:6px}.prompt-demo{position:relative;flex:none;font-family:Arial,sans-serif}.demo-key,.demo-action,.demo-title,.demo-fill,.demo-symbol{position:absolute;box-sizing:border-box}.demo-key{z-index:1}.demo-fill{z-index:2;opacity:.6;pointer-events:none}.demo-symbol{z-index:3;display:grid;place-items:center;font-weight:700}.demo-action,.demo-title{z-index:3;display:flex;align-items:center;font-weight:700;white-space:nowrap}.demo-title{font-weight:400}.demo-title[hidden]{display:none}.lab-card[data-preset=Badge] .demo-action,.lab-card[data-preset=Badge] .demo-title{justify-content:center}.lab-note{font-size:12px;color:var(--muted);padding:12px 18px;margin:0!important}.guide-table{overflow:auto}.guide-table table{min-width:440px}main section>p,main section>ul,main section>ol{max-width:76ch}main section+section{margin-top:42px}.motion-illustration{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-align:center}.motion-illustration svg{width:100%;max-width:540px;height:auto;color:var(--green)}.motion-illustration figcaption{font-size:13px;color:var(--muted);margin-top:12px}.guide-reference summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}@media(max-width:650px){.guide-cards,.lab-compare{grid-template-columns:1fr}.lab-stage{height:130px}.lab-caption{padding:12px 18px}.lab-controls{gap:12px}.guide-card{padding:18px}}@media(prefers-reduced-motion:reduce){.prompt-lab *{scroll-behavior:auto}}
.editor-demo{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:28px;align-items:start}.editor-demo .local-clip{margin-top:0}.portrait-clip{max-width:360px}.portrait-clip video{width:100%;max-height:700px;object-fit:contain;background:var(--surface)}#sidebar .doc-icon-logo{color:var(--green);opacity:1;stroke:none}#sidebar .doc-icon-layout{opacity:1}@media(max-width:650px){.editor-demo{grid-template-columns:1fr}.editor-demo .local-clip{margin-inline:auto}}
.local-clip .voidinteract-player:not(.is-expanded)>video{aspect-ratio:auto;height:auto;width:100%;max-height:none}

.youtube-walkthrough{width:100%;aspect-ratio:16/9;margin:22px 0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.youtube-walkthrough iframe{display:block;width:100%;height:100%;border:0}