.nr-play{position:relative;display:grid;gap:10px;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;color:#333}.nr-play [hidden],.play-page [hidden]{display:none!important}.nr-play button{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}.nr-chip{font-size:.9rem;border:2px solid #ddd;background:#fff;color:#333;border-radius:999px;padding:4px 12px;font-weight:700}.nr-chip[aria-pressed=true]{border-color:#333;background:#333;color:#fff}.nr-main{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"stage side" "pal pal";gap:12px;align-items:start}.nr-stage{grid-area:stage;position:relative;width:100%;max-width:min(480px,max(200px,calc((100dvh - 330px) * 220 / 260)));aspect-ratio:220 / 260;justify-self:center;touch-action:none}.nr-stage canvas,.nr-lines,.nr-lines svg{position:absolute;inset:0;width:100%;height:100%;display:block}.nr-stage{isolation:isolate;background:#fff}.nr-stage canvas{touch-action:none;mix-blend-mode:multiply}.nr-lines{pointer-events:none}.nr-side{grid-area:side;display:grid;gap:8px;justify-items:center}.nr-tool{font-size:1rem;width:auto;min-width:84px;border:2px solid #ccc;background:#fff;color:#333;border-radius:14px;padding:10px 14px;line-height:1.2;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px}.nr-tool .tico{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.nr-donebtn .tico{stroke-width:3}@media(max-width:699px)and (orientation:portrait){.nr-play .nr-tool{flex-direction:column;gap:2px;padding:6px 2px;font-size:.78rem;line-height:1.2;letter-spacing:-.02em}.nr-tool .tico{width:22px;height:22px}.nr-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"side" "stage" "pal";gap:10px}.nr-side{display:flex;gap:6px;align-items:stretch;position:relative}.nr-side .nr-tool{flex:1 1 auto;min-width:0}.nr-side .fd-sizes{flex:1 1 auto;min-width:0;display:flex}.nr-side .fd-sizes .nr-tool{flex:1 1 0}.nr-side .nr-mihon{position:absolute;top:calc(100% + 6px);left:auto;right:0;width:min(120px,32vw);z-index:4}.nr-stage{width:100%;max-width:min(480px,max(190px,calc((100dvh - 340px) * 220 / 260)))}.nr-main .nr-palette{grid-template-columns:repeat(5,minmax(0,1fr));--cv-w: 40px;--cv-off: 30px;--cv-on: 4px}}.nr-tool[aria-pressed=true]{border-color:#333}.nr-donebtn{border-color:#d2553a;color:#d2553a;font-weight:800}.nr-mihon{width:84px;border:2px dashed #ccc;border-radius:10px;padding:4px;background:#fff}.nr-mihon svg{width:100%;height:auto;display:block}.nr-palette{grid-area:pal;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;padding:8px 6px 0;max-width:520px;width:100%;justify-self:center;background:linear-gradient(#fff6e0,#ffe9b8);border-top:3px solid #f0c36d;border-radius:14px 14px 0 0;--cw-h: 76px;--cv-w: clamp(24px, 7.5vw, 40px);--cv-off: calc(var(--cv-w) * .75);--cv-on: calc(var(--cv-w) * .1)}.nr-swatch{position:relative;display:block;width:100%;height:var(--cw-h);overflow:hidden;background:none;border:0;padding:0}.nr-swatch:focus-visible{outline:3px solid #333;outline-offset:-3px;border-radius:10px}.nr-crayon{position:absolute;display:block;transition:transform .18s cubic-bezier(.3,1.6,.5,1)}.nr-crayon-v{left:50%;top:0;width:var(--cv-w);height:calc(var(--cv-w) * 130 / 48);transform:translate(-50%) translateY(var(--cv-off))}.nr-swatch[aria-pressed=true] .nr-crayon-v{transform:translate(-50%) translateY(var(--cv-on))}.nr-crayon-h{display:none}.nr-play:has([data-nr=confirm]:not([hidden])) :is(.nr-stage,.nr-side,.nr-palette),.nr-play:has([data-fd=confirm]:not([hidden])) :is(.nr-stage,.nr-side,.nr-palette){pointer-events:none;opacity:.45}@media(orientation:portrait)and (min-width:700px){.play-page:has(.nr-main){position:relative}.play-page:has(.nr-main) .play-back{position:absolute;top:16px;left:12px;margin:0;z-index:5}.nr-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"side" "stage" "pal";gap:10px}.nr-side{display:flex;align-items:center;gap:8px;padding-left:120px;position:relative}.nr-side .nr-donebtn{margin-left:auto}.nr-mihon{position:absolute;top:calc(100% + 6px);left:120px;width:150px;z-index:4}.nr-stage{width:auto;max-width:none;height:min(calc(100dvh - 270px),calc((100vw - 24px) * 260 / 220))}.nr-palette{grid-template-columns:repeat(9,minmax(0,1fr));max-width:none;--cw-h: 120px;--cv-w: 58px;--cv-off: 46px;--cv-on: 6px}}@media(orientation:landscape){.play-page:has(.nr-main){max-width:none;padding-right:0}.nr-main{--stage-w: calc(clamp(160px, calc(100dvh - 90px) , 760px) * 220 / 260);grid-template-columns:auto minmax(0,1fr) 130px;grid-template-areas:"side stage pal";align-items:stretch;gap:14px}.nr-side{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.nr-side .nr-donebtn{margin-top:auto}.nr-stage{width:min(100%,var(--stage-w));max-width:none;height:auto;align-self:center;justify-self:center}.nr-palette{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);gap:4px;padding:8px 0 8px 8px;max-width:none;background:linear-gradient(90deg,#fff6e0,#ffe9b8);border-top:0;border-left:3px solid #f0c36d;border-radius:14px 0 0 14px;--ch-h: 46px;--ch-off: 60px;--ch-on: 8px}.nr-swatch{height:auto;min-height:0}.nr-crayon-v{display:none}.nr-crayon-h{display:block;left:0;top:50%;height:var(--ch-h);width:calc(var(--ch-h) * 130 / 48);transform:translateY(-50%) translate(var(--ch-off))}.nr-swatch[aria-pressed=true] .nr-crayon-h{transform:translateY(-50%) translate(var(--ch-on))}}@media(prefers-reduced-motion:reduce){.nr-crayon{transition:none}}.nr-confirm{position:absolute;inset:auto 0 0;background:#fff7e6;border:2px solid #f0c36d;border-radius:16px;padding:12px;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:1rem;font-weight:700;z-index:5}.nr-confirm button,.nr-done button{font-size:1rem;border-radius:14px;padding:8px 18px;border:2px solid #333;background:#fff;color:#333;font-weight:700}.nr-confirm button.nr-yes{background:#333;color:#fff}.nr-done{position:fixed;inset:0;z-index:50;background:#fffffff5;display:grid;align-content:center;justify-items:center;gap:14px;text-align:center;padding:16px}.nr-big{font-size:2rem;font-weight:800;color:#d2553a;line-height:1.2}.nr-done img{width:auto;height:auto;max-width:min(94vw,720px);max-height:calc(100dvh - 170px);object-fit:contain;border:3px solid #eee;border-radius:16px;background:#fff;pointer-events:none}.nr-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.fd-paper{border:3px solid #e6e6e6;border-radius:16px;overflow:hidden}.fd-sizes{display:grid;gap:8px}.fd-size{display:grid;justify-items:center;gap:4px}.fd-pen{display:block;border-radius:50%;background:#333}.cq-main{display:grid;gap:10px;justify-items:center}.cq-askrow{margin:0;display:flex;align-items:center;justify-content:center;gap:10px;min-height:2.6em}.cq-ask{font-size:clamp(1.3rem,5vw,1.9rem);font-weight:800;line-height:1.3;text-align:center}.cq-speak{width:52px;height:52px;flex:none;border:2px solid #ccc;border-radius:50%;background:#fff;padding:8px;display:grid;place-items:center}.cq-speak svg{width:100%;height:100%;display:block}.cq-board{display:grid;gap:14px;justify-items:center;width:100%}.cq-stage{position:relative;display:grid}.cq-picbox{position:relative;width:min(92vw,560px,max(150px,calc((100vh - 330px) * 220 / 260)));width:min(92vw,560px,max(150px,calc((100dvh - 330px) * 220 / 260)));aspect-ratio:220 / 260;container-type:inline-size}.cq-pic{position:absolute;inset:0}.cq-pic svg{width:100%;height:100%;display:block}.cq-stage.is-correct .cq-pic{opacity:.3}.cq-picbox .praise{position:absolute;inset:0;height:auto;display:grid;grid-template-columns:none;grid-template-rows:auto auto;align-content:center;justify-items:center;gap:6px;z-index:2;pointer-events:none}.cq-picbox .praise-mark{width:48%;height:auto}.cq-picbox .praise b{font-size:clamp(1.4rem,4.5vw,2.6rem);font-size:clamp(.9rem,10cqi,2.6rem);text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff,1px 1px 0 #fff,-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff}.cq-choicebox{position:relative;width:100%;max-width:520px}.cq-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;gap:12px 8px}.cq-swatch{position:relative;display:grid;justify-items:center;gap:4px;font-size:1rem;font-weight:800;color:#444;background:none;border:0;padding:0}.cq-dot{width:clamp(62px,19vw,92px);height:clamp(62px,19vw,92px);border-radius:50%;border:3px solid rgba(0,0,0,.15);display:block}.cq-swatch.is-correct .cq-dot{outline:5px solid #e53935;outline-offset:3px}@keyframes cq-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.cq-swatch.is-wrong{animation:cq-shake .4s ease-in-out}.cq-swatch.is-tried{opacity:.45}.cq-choices.is-hint .cq-dot{animation:cq-glow 3.2s ease-in-out infinite}.cq-choices.is-hint .cq-swatch:nth-child(2) .cq-dot{animation-delay:.8s}.cq-choices.is-hint .cq-swatch:nth-child(3) .cq-dot{animation-delay:1.6s}.cq-choices.is-hint .cq-swatch:nth-child(4) .cq-dot{animation-delay:2.4s}@keyframes cq-glow{0%,25%,to{box-shadow:none;transform:scale(1)}12%{box-shadow:0 0 0 5px #fff,0 0 0 7px #00000040,0 0 14px 6px #00000040;transform:scale(1.06)}}@media(orientation:portrait)and (min-width:700px){.cq-picbox{width:auto;height:min(calc(100vh - 330px),calc((100vw - 24px) * 260 / 220));height:min(calc(100dvh - 330px),calc((100vw - 24px) * 260 / 220))}.cq-choicebox{max-width:680px}.cq-dot{width:120px;height:120px}}@media(orientation:landscape){.play-page:has(.cq-main){position:relative;max-width:none;padding-top:8px;padding-bottom:0}.play-page:has(.cq-main) .play-back{position:absolute;top:8px;left:12px;margin:0;z-index:5}.cq-main{--cq-vp: 100vh;--cq-top: 100px;--cq-dot: clamp(56px, min(calc((var(--cq-vp) - 220px) / 2), 13vw), 130px);--cq-gap: clamp(20px, 4vw, 56px);--cq-side: calc(var(--cq-dot) * 2 + 22px);--cq-back: 112px;grid-template-columns:auto minmax(0,max-content);grid-template-areas:"stage ask" "stage choices";justify-content:center;align-items:center;column-gap:var(--cq-gap);row-gap:12px;min-height:calc(var(--cq-vp) - var(--cq-top) + 36px);padding-left:var(--cq-back)}.cq-board{display:contents}.cq-askrow{grid-area:ask;align-self:end}.cq-ask{font-size:clamp(1.3rem,4.2vh,2.2rem)}.cq-stage{grid-area:stage}.cq-choicebox{grid-area:choices;align-self:start}.cq-picbox{width:auto;height:min(calc(var(--cq-vp) - var(--cq-top)),calc((100vw - var(--cq-back) - var(--cq-gap) - var(--cq-side) - 24px) * 260 / 220))}.cq-choices{grid-template-columns:1fr 1fr;gap:clamp(8px,2.5vh,22px) clamp(10px,2vw,22px)}.cq-dot{width:var(--cq-dot);height:var(--cq-dot)}}@supports (height: 100dvh){@media(orientation:landscape){.cq-main{--cq-vp: 100dvh;--cq-top: 52px}}}.nr-play .cq-swatch{font-size:clamp(1.1rem,2.8vmin,1.5rem)}@media(prefers-reduced-motion:reduce){.cq-swatch.is-wrong,.cq-choices.is-hint .cq-dot{animation:none}}.nr-noscript{background:#fff8ef;border:1px solid var(--line);border-radius:12px;padding:12px 16px}