/* © 2025–2026 Joël Abrahams. All rights reserved. */
.keywin{--keywin-width:14rem;--keywin-foot-width:22rem;width:max(var(--keywin-width),var(--keywin-foot-width));color:var(--text);grid-area:key;margin:0}:root:not(.focus)>body>.footer{grid-template-columns:1fr auto 1fr;grid-template-areas:"start key end";align-items:baseline;display:grid}.footer-start{grid-area:start}.footer-end{grid-area:end;justify-self:end}.keywin:where([data-explain=board]){grid-area:2/1/3/-1;justify-self:center}.keywin[data-explain=text]{--keywin-width:17.5rem}.keywin[data-explain=notes]{--keywin-width:23rem}.keywin[data-explain=board]{--keywin-width:32rem}@media (width>=1456px) and (not (pointer:coarse)){.keywin{z-index:2;width:var(--keywin-width);position:fixed;bottom:1rem;right:1.25rem}.keywin-explain{overscroll-behavior:contain;max-height:calc(100dvh - 6rem);overflow-y:auto}}.keywin-summary{padding:var(--space-sm)var(--space-lg)}.keywin-help{width:1.4rem;height:1.4rem;font:700 .8rem/1 var(--font-mono);color:var(--muted);cursor:help;border:1px solid var(--border);background:0 0;border-radius:50%;padding:0}.keywin-help:hover,.keywin-help:focus-visible{color:var(--hover);border-color:var(--hover)}.keywin-help-panel{width:0;font-size:var(--text-3xs);visibility:hidden;opacity:0;transition:opacity var(--duration-slow)ease,width var(--duration-slow)ease,margin var(--duration-slow)ease,visibility var(--duration-slow);border-width:0;margin-left:-.75rem;overflow:hidden}.keywin-help-panel.is-shown{visibility:visible;opacity:1;border-width:1px;width:1.4rem;margin-left:0}@media (prefers-reduced-motion:reduce){.keywin-help-panel{transition:none}}.keywin-tip{width:min(17.5rem,100vw - 2rem)}.keywin-explain{padding:var(--space-md)var(--space-lg);font-size:var(--text-sm);color:var(--text);background:var(--surface);border-top:1px solid var(--border);border-radius:0 0 var(--box-radius)var(--box-radius);line-height:1.5}.keywin-explain p{margin:0}.keywin-demo-row{gap:var(--space-sm);margin-top:var(--space-sm);display:flex}.keywin-demo-row>*{flex:1 1 0;min-width:0}.keywin-demo-quad{gap:var(--space-sm);margin-top:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}.keywin-demo-quad>*{min-width:0}.keywin-demo-quad .chess-board{position:relative}.keywin-demo{color:var(--muted);fill:currentColor;stroke:none;font:4.4px var(--font-mono);display:block}.keywin-demo-line{fill:none;stroke:currentColor;stroke-width:.5px;stroke-linejoin:round}.keywin-demo-strong{color:var(--text);font-size:5.6px}.keywin-demo-hot{color:var(--sim-red);font-weight:700}.keywin-demo-cool{color:var(--sim-blue)}.keywin-demo-ghost{opacity:.4}.keywin-demo-music{font-family:Emmentaler-20,serif}.keywin-link{margin-top:var(--space-xs);display:block}.keywin-console{gap:var(--space-xs);padding:var(--space-md)var(--space-lg);color:var(--console-text);background:var(--console-bg);border-top:1px solid var(--border);border-radius:0 0 var(--box-radius)var(--box-radius);font:.8rem/1.6 var(--font-mono);flex-direction:column;display:flex}.keywin-prompt{align-items:baseline;gap:var(--space-sm);display:flex}.keywin-prompt input{min-width:0;padding:0 var(--space-2xs);font:inherit;color:var(--console-bright);caret-color:var(--console-text);border:0;border-bottom:1px dashed var(--console-dim);background:0 0;outline:none;flex:1}.keywin-prompt input:focus{border-bottom-color:var(--console-text)}.keywin-log{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.keywin-log:after{content:"▍";animation:1s step-end infinite console-cursor}.keywin-buttons{gap:var(--button-gap);flex-wrap:wrap;display:flex}.keywin-reset{color:var(--console-text);border-color:var(--console-dim);background:0 0;align-self:flex-start;font-family:inherit}@media (prefers-reduced-motion:reduce){.keywin-log:after{animation:none}}@media (pointer:coarse){.keywin-help:not(.keywin-help-panel),.keywin-help-panel.is-shown{width:var(--tap-size);height:var(--tap-size)}}@media (width<=600px),(height<=500px) and (pointer:coarse),(width<=860px) and (not (pointer:coarse)){:root:not(.focus)>body>.footer{--foot-side:calc((100% - var(--page-width))/2);grid-template-areas:".start.end.";grid-template-columns:var(--foot-side)1fr var(--space-lg)auto var(--foot-side);gap:var(--space-sm)0;padding-inline:0;width:100%;padding-bottom:0}.keywin{--keywin-start:calc((100% - var(--page-width))/2);--keywin-inside:calc(max(var(--keywin-width),var(--keywin-foot-width)) - 2px - 2*var(--space-lg));--keywin-ground:var(--glass-solid);width:auto;box-shadow:0 50vh 0 50vh var(--keywin-ground);border:0;border-radius:0;grid-area:2/1/3/-1;justify-self:stretch}.keywin:has(details[open]){--keywin-ground:var(--console-bg)}.keywin[data-explain]:has(details[open]){--keywin-ground:var(--surface)}.keywin-summary,.keywin-console,.keywin-explain{padding-inline:var(--keywin-start)max(var(--keywin-start),100% - var(--keywin-start) - var(--keywin-inside))}.keywin-console,.keywin-explain{border-radius:0}}.panel-wrap .keywin,.focus .keywin{display:none}body.panel-morphing .keywin{view-transition-name:keywin}