/* A ruled sketchbook, contained inside the existing scaled stage. */
.stage { padding: 16px 22px 8px; border: 1px solid #d6c7a6; border-radius: 4px 14px 14px 4px; background: linear-gradient(90deg, transparent 32px, #cf847c66 33px, transparent 34px), repeating-linear-gradient(0deg, transparent 0 25px, #8bada72b 26px 27px), #fffaf0; box-shadow: inset 7px 0 12px #ad936422, inset 0 -4px #eadfc7; }
svg.figure { width: 180px; height: 180px; overflow: visible; }
svg.figure .gallows { stroke: #615543; stroke-width: 4; }
svg.figure .part { stroke: #ae5447; stroke-width: 4; stroke-dasharray: 160; stroke-dashoffset: 160; transition: opacity .25s, stroke-dashoffset .45s ease; }
svg.figure .part.on { stroke-dashoffset: 0; }
.theme-clue { padding: 5px 12px; border: 1px solid #cdbb9566; background: #fffaf0; border-radius: 4px; }
.slot { height: 42px; border-bottom: 2px solid #887253; font-family: 'Bricolage Grotesque', serif; background: #fffaf0b8; }
.slot.revealed { color: #286757; border-color: #286757; }
.key { background: linear-gradient(#fffdf7, #f1e5cf); border-color: #cbbd9f; box-shadow: 0 3px 0 #c2b18e, inset 0 1px #fff; }
.key.correct { background: #356e5b; box-shadow: 0 3px #244f40; }
.key.wrong { box-shadow: none; background: #e1d6c6; opacity: .7; }
.key:focus-visible { outline: 3px solid #357767; outline-offset: 3px; }