/* Preserve the supplied reference layout and motion language. */
.original-link{font-size:12px;color:#94a3b8}
.controls .cbtn:disabled{opacity:.4;cursor:default}
:focus-visible{outline:2px solid #6366f1;outline-offset:3px}
@media(max-width:700px){
 body{display:block}
 #sidebar{width:100%;height:auto;position:relative;overflow:visible;padding-bottom:6px}
 .brand{padding:12px 16px}.side-foot{display:none}
 #sidebar>#nav,#sidebar>.nav-search{display:none}
 #sidebar.mobile-open>#nav,#sidebar.mobile-open>.nav-search{display:block}
 #sidebar.mobile-open>#nav{max-height:55vh;overflow:auto}
 .mobile-nav-toggle{display:block;position:absolute;right:16px;top:19px;background:#1e293b;color:#e2e8f0;border:1px solid #475569;border-radius:7px;padding:7px 12px}
 #main{padding:14px 12px 24px}.mod-head{display:block}.mod-head h1{font-size:21px}.mod-head p{margin-top:8px}
 .toolbar{gap:8px;padding:12px}.field{max-width:100%}.field input,.field textarea{max-width:100%}
 .work-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .stage{min-height:360px;padding:10px;max-width:100%;overflow:auto}
 .controls{flex-wrap:wrap;gap:6px;padding:10px}.controls .cbtn{width:34px}.controls .cbtn.play{width:44px}
 #progress{min-width:100px}.speed{margin-left:auto}.step-count{min-width:62px}
 .side{max-height:none;overflow:visible;min-width:0}
 #codeCard{min-width:0}
 #codeCard h3{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px}
 #codeCard h3 .mini{float:none;margin-left:auto;min-height:44px;padding:7px 12px;flex-shrink:0}
 .code{max-height:65vh;max-height:65dvh;font-size:14px;line-height:1.8;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .code .ln{padding-left:2px;padding-right:8px}
 .code .ln .no{width:22px;margin-right:8px}
 .code .ln .tx{white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere}
 #codeCard.expanded{inset:0;left:0;top:0;transform:none;width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0;display:flex;flex-direction:column;padding:12px;padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));z-index:100}
 #codeCard.expanded h3{flex-shrink:0}
 #codeCard.expanded .code{flex:1;min-height:0;max-height:none;font-size:15px}
 body:has(#codeCard.expanded){overflow:hidden}
 .hero{padding:24px 20px}.hero h1{font-size:23px}
}
@media(min-width:701px){.mobile-nav-toggle{display:none}}
@media(min-width:701px) and (max-width:1000px) and (max-height:500px){
 #codeCard.expanded{inset:0;left:0;top:0;transform:none;width:100%;height:100vh;height:100dvh;max-height:none;border-radius:0;display:flex;flex-direction:column;padding:12px;padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));z-index:100}
 #codeCard.expanded h3{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex-shrink:0}
 #codeCard.expanded h3 .mini{float:none;margin-left:auto;min-height:44px;padding:7px 12px;flex-shrink:0}
 #codeCard.expanded .code{flex:1;min-height:0;max-height:none;font-size:15px;line-height:1.8;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 body:has(#codeCard.expanded){overflow:hidden}
}