.cr{--cr-w:360px;--cr-h:460px;container-type:inline-size}.cr.cr-snug{--cr-w:250px;--cr-h:330px}.cr-in{align-items:flex-start;gap:20px;display:flex}.cr-mirror{width:var(--cr-w);flex-direction:column;flex:none;align-items:center;gap:8px;display:flex;position:sticky;top:8px}.cr-me{width:100%;height:var(--cr-h);border:1px solid var(--ui-border);cursor:grab;touch-action:pan-y;background:linear-gradient(#1b2f22,#2c3c26 60%,#3b4429);border-radius:4px}.cr-me:active{cursor:grabbing}.cr-me:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}.cr-turn,.cr-motions{gap:4px;width:100%;display:flex}.cr-motions{flex-wrap:wrap}.cr-turn button,.cr-motions button{border:1px solid var(--ui-border);color:var(--ui-text);font:inherit;cursor:pointer;background:#3c321e8c;border-radius:3px;flex:1 1 0;padding:5px 0;font-size:12px;line-height:1.2}.cr-motions button{flex-basis:calc(16.6667% - 3.33333px)}.cr-turn .cr-close{flex-grow:2}.cr-turn button:hover,.cr-motions button:hover{border-color:var(--ui-border-light)}.cr-turn button[aria-pressed=true],.cr-motions button[aria-pressed=true]{border-color:var(--ui-accent);box-shadow:0 0 0 1px var(--ui-accent);color:#fff}.cr-turn button:focus-visible,.cr-motions button:focus-visible,.cr-roll:focus-visible,.cr-pick:focus-visible{outline:2px solid var(--ui-accent);outline-offset:1px}.cr-roll{border:1px solid var(--ui-border);width:100%;color:var(--ui-text);font:inherit;cursor:pointer;background:#3c321eb3;border-radius:4px;padding:8px 12px}.cr-roll:hover{border-color:var(--ui-accent);color:#fff}.cr-choices{flex:auto;min-width:0}.cr-choice{margin-bottom:14px}.cr-choice>h2{color:var(--ui-dim);letter-spacing:.1em;text-transform:uppercase;margin:0 0 6px;font-size:11px;font-weight:600}.cr-choice>h2 span{color:var(--ui-text);letter-spacing:.02em;text-transform:none;margin-left:8px}.cr-row{flex-wrap:wrap;gap:5px;display:flex}.cr-pick{border:1px solid var(--ui-border);color:var(--ui-text);font:inherit;cursor:pointer;background:0 0;border-radius:3px;padding:0;line-height:0}.cr-pick:hover{border-color:var(--ui-border-light)}.cr-pick.on{border-color:var(--ui-accent);box-shadow:0 0 0 1px var(--ui-accent)}.cr-swatch{width:30px;height:30px}.cr-face{width:54px;height:54px}.cr-face canvas{width:52px;height:52px}.cr-word{padding:6px 12px;line-height:1.2}@container (width<=560px){.cr-in{flex-direction:column;align-items:stretch}.cr-mirror{width:100%;position:static}}
