.motion-depth-header,.page-article .attention-response-guide-hero{background:linear-gradient(130deg,#e9f3ee,#fff1d9)}
.md-board{display:flex;align-items:center;justify-content:center;min-height:440px;padding:20px;background:#fffaf2}
.experiment-layout[data-md-demo]{align-items:start}
.md-board[data-md-display]{max-width:none;margin:0}
.md-board svg{max-width:520px}
[data-md-display]{width:100%;max-width:520px;margin:auto;line-height:0}
[data-md-display] svg{display:block;width:100%;height:auto}
.md-controls .choice-control{padding:18px 0;border-bottom:1px solid var(--line)}
.md-controls .choice-control>div{flex-wrap:wrap;gap:8px}
.md-controls .choice-control button{min-height:44px;flex:1 1 95px;padding:10px}
.md-toggle{display:flex;gap:12px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);font-size:.9rem;cursor:pointer}
.md-toggle input{width:22px;height:22px;flex:0 0 auto;accent-color:#21705c}
.md-controls input[type=range]{min-height:24px}
.md-controls output{white-space:nowrap}
.md-controls .range-control>span{gap:12px}
.md-controls button:focus-visible,.md-controls input:focus-visible{outline:3px solid #21705c;outline-offset:4px}
.md-controls .reset-button{min-height:44px}
.md-playback{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 8px}
.md-playback button{flex:1 1 100px;min-height:44px}
.md-clock{display:block;font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--muted);margin-top:10px}
.md-controls [data-md-status],.md-controls .measurement-result{font-size:.9rem;line-height:1.6}
.md-guide-practice{margin:32px 0;padding:clamp(14px,3vw,28px);background:#e8f3eb;border:1px solid #9bbba9}
.md-guide-practice h3{margin-top:8px}
.md-guide-practice .md-practice-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.md-guide-practice .md-controls{padding:16px;background:#fffaf2}
.md-guide-practice [data-md-display]{align-self:start}
.md-guide-practice .range-control{padding:14px 0}
.md-noscript{padding:14px;background:#fff1d9;font-size:.9rem}
.visual-md-wheel .visual-sample{width:110px;height:110px;border:4px solid #25223b;border-radius:50%;background:repeating-conic-gradient(#25223b 0deg 3deg,transparent 3deg 30deg)}
.visual-md-reverse .visual-sample{width:145px;height:105px;background:radial-gradient(circle,#626262 4px,transparent 5px) 0 0/24px 24px,radial-gradient(circle,#e1e1e1 4px,transparent 5px) 12px 12px/24px 24px #b6b6b6}
.visual-md-quartet .visual-sample{width:135px;height:105px;background:radial-gradient(circle at 15% 15%,#25223b 9px,transparent 10px),radial-gradient(circle at 85% 85%,#25223b 9px,transparent 10px)}
.visual-md-cylinder .visual-sample{width:120px;height:125px;border-radius:40%;background:radial-gradient(circle,#343144 3px,transparent 4px) 0 0/17px 20px #e8f0ea}
.visual-md-coherence .visual-sample{width:150px;height:110px;background:radial-gradient(circle,#343144 3px,transparent 4px) 0 0/22px 23px #e8f0ea}
@media(max-width:950px){.md-guide-practice .md-practice-layout{grid-template-columns:minmax(0,1fr)}.md-guide-practice [data-md-display]{max-width:390px}}
@media(max-width:700px){.md-board{min-height:300px;padding:10px}.md-controls{padding:18px}.md-controls .control-panel-title{flex-wrap:wrap;gap:8px}.md-guide-practice{padding:14px}.md-guide-practice .md-controls{padding:12px}}