body{font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif}h1,h2,h3,.brand,.play-state strong{font-family:Georgia,"Times New Roman","AppleMyungjo",serif}
.rail nav{display:block;padding:20px 0 0;border:0}.rail nav a{width:100%;white-space:nowrap}
.playground{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:6vw;padding:8vh 7vw;border-top:1px solid var(--rule);background:linear-gradient(135deg,rgba(255,253,247,.72),rgba(216,229,223,.45))}
.playground h2{font-size:clamp(2.2rem,4.5vw,4.8rem);margin:.2em 0}.play-guide{margin-top:28px;padding:18px;border-left:3px solid var(--teal);background:var(--surface)}.play-guide ol{padding-left:1.25rem}.play-guide p{margin-bottom:0;color:var(--muted)}
.play-instrument{min-width:0;padding:clamp(18px,3vw,32px);border:1px solid var(--ink);background:var(--surface);box-shadow:10px 10px 0 rgba(24,32,31,.1)}.play-inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.play-inputs label{margin:0}.play-inputs input,.play-inputs select{width:100%;min-height:44px;margin-top:5px;padding:10px;border:1px solid var(--muted);background:#fff;color:var(--ink);font:inherit}
.play-actions{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}.play-actions button{min-height:44px}.play-actions button:disabled{cursor:not-allowed;opacity:.42}.play-actions .primary-next{outline:3px solid #ed9f45;outline-offset:2px}.play-actions button:focus-visible,.play-inputs input:focus-visible,.play-inputs select:focus-visible{outline:3px solid #ed9f45;outline-offset:3px}
.play-state{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--rule)}.play-state>div{padding:12px 10px;border-right:1px solid var(--rule)}.play-state>div:last-child{border:0}.play-state span,.play-state strong{display:block}.play-state span{font-size:.76rem;color:var(--muted)}.play-state strong{font-family:'Fraunces',serif;overflow-wrap:anywhere}
.play-explanation{margin-top:20px;padding:18px;background:#f0eee6;border-left:4px solid var(--teal)}.play-explanation p{margin:.3rem 0}.play-learning{color:var(--teal);font-weight:600}.play-boundary{margin:18px 0 0;color:#684609;font-size:.82rem}
@media(max-width:760px){.playground{grid-template-columns:1fr;padding:7vh 6vw}.play-instrument{padding:16px;box-shadow:5px 5px 0 rgba(24,32,31,.1)}.play-inputs{grid-template-columns:1fr}.play-state{grid-template-columns:repeat(2,minmax(0,1fr))}.play-state>div:nth-child(2){border-right:0}.play-state>div:nth-child(-n+2){border-bottom:1px solid var(--rule)}.play-actions button{width:100%}}