/* Playground floats in the bottom-right corner; it hides during sketch mode and the open terminal sits above it. */
.masthead .nav-tools{position:relative;align-items:center;gap:8px;flex:none}
.play-tools-wrap{position:fixed;right:22px;bottom:max(22px,env(safe-area-inset-bottom,0px));z-index:84}
body:has(.page-drawing.is-active) .play-tools-wrap{display:none}
.site-footer{padding-bottom:95px}
.play-tools-toggle{display:inline-flex;align-items:center;gap:4px;min-height:43px;padding:5px 12px 7px 9px;border:1.8px dashed var(--ink);border-radius:13px 9px 14px 8px;background:var(--lemon);box-shadow:2px 3px 0 var(--shadow);font-size:19px;transform:rotate(-2deg);white-space:nowrap}
.play-tools-toggle:hover,.play-tools-toggle[aria-expanded="true"]{background:var(--mint);transform:rotate(1deg)}
.play-tools-toggle svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.7;flex:none}
.play-tools-menu{position:absolute;z-index:150;bottom:calc(100% + 18px);right:-4px;width:min(354px,calc(100vw - 24px));padding:18px;background:var(--paper-white);border:2px solid var(--ink);border-radius:8px 17px 7px 12px;box-shadow:8px 10px 0 var(--shadow);transform:rotate(-1deg)}
.play-tools-menu[hidden]{display:none!important}
.play-tools-menu:before{content:"";position:absolute;bottom:-11px;right:36px;width:18px;height:18px;background:var(--paper-white);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.play-menu-title{font-size:21px;color:var(--terra);margin:0 0 12px}
.play-tool-link{display:flex;align-items:center;gap:12px;width:100%;padding:12px 9px;margin:6px 0;background:var(--paper);border:1.5px dashed var(--line);border-radius:7px 13px 8px 11px;transform:rotate(.5deg)}
.play-tool-link:hover,.play-tool-link:focus-visible{background:var(--lemon);border-color:var(--ink);transform:rotate(-.5deg)}
.play-tool-link > svg{width:39px;height:39px;flex:none;stroke:currentColor;stroke-width:1.8}
.play-tool-link>span{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.play-tool-link strong{font-size:22px;font-weight:normal}
.play-tool-link small,.play-menu-hint{font:12px/1.5 'Courier New',monospace;color:var(--ink-soft)}
.play-tool-link>b{font-size:20px;color:var(--terra);flex:none}
.play-menu-hint{margin:13px 5px 0}
#terminal-zone,#draw-zone{scroll-margin-top:110px}
#terminal-zone:focus,#draw-zone:focus{outline:none}
#terminal-zone.tools-arrival,#draw-zone.tools-arrival{animation:tools-arrival .9s ease-out}
@keyframes tools-arrival{0%{filter:drop-shadow(0 0 0 var(--terra))}35%{filter:drop-shadow(0 0 10px var(--terra))}100%{filter:drop-shadow(0 0 0 var(--terra))}}
.footer-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto}
.footer-tools a{font-size:17px;padding:8px 10px;border:1px dashed var(--line);border-radius:7px;background:var(--paper-white);color:var(--ink-soft)}
.footer-tools a:hover{background:var(--lemon)}
@media(max-width:850px){.masthead .mobile-nav{max-height:calc(100dvh - 104px);overflow:auto}}
@media(max-width:570px){.masthead .nav-tools{gap:3px}.play-tools-toggle{min-height:41px;width:42px;padding:6px;justify-content:center}.play-tools-toggle>span{display:none}.play-tools-toggle svg{width:29px;height:29px}.play-tools-wrap{right:12px;bottom:max(14px,env(safe-area-inset-bottom,0px))}.play-tools-menu{bottom:calc(100% + 14px)}.footer-tools{margin-left:0}.site-footer{gap:16px;padding-bottom:80px}}
@media(max-width:365px){.masthead .signature{font-size:25px}.masthead .nav-tools{gap:0}.masthead .nav-tools .round-tool{width:36px;padding:5px}.play-tools-toggle{width:38px}}
@media(prefers-reduced-motion:reduce){#terminal-zone.tools-arrival,#draw-zone.tools-arrival{animation:none}}