.document:has(#omok-practice){max-width:1120px}.op-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(250px,1fr);gap:24px;margin:16px 0}.op-progress{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.op-surface{background:#493320;color:#fff3d6;border-radius:16px;padding:16px;align-self:start;box-shadow:0 10px 28px #21190e25}.op-surface p{font-size:1rem;line-height:1.6;margin:0 0 12px}.op-surface p:last-child{margin:14px 0 0}.op-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));aspect-ratio:1;background:#dcb57b;padding:10px;border:3px solid #b48145;border-radius:6px;isolation:isolate}.op-cell{position:relative;display:grid;place-items:center;min-width:0;width:100%;padding:0;border:0;border-radius:0;background:linear-gradient(90deg,transparent calc(50% - .5px),#684725 calc(50% - .5px),#684725 calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#684725 calc(50% - .5px),#684725 calc(50% + .5px),transparent calc(50% + .5px));aspect-ratio:1;cursor:pointer;touch-action:manipulation;color:#432b16}.op-cell span{position:relative;z-index:1;font-size:.75rem;background:#dcb57b;line-height:1.2;padding:1px}.op-cell.black span,.op-cell.white span{width:83%;height:83%;border-radius:50%;background:radial-gradient(circle at 32% 26%,#606468,#161819 65%);box-shadow:1px 3px 3px #35291480;padding:0}.op-cell.white span{background:radial-gradient(circle at 32% 26%,#fffdf4,#d4cbbb 75%);border:1px solid #9e927e}.op-cell.last span{outline:3px solid #247e59;outline-offset:1px}.op-cell.marked{box-shadow:inset 0 0 0 3px #ac3b31;background-color:#f1cf9c}.op-cell:focus-visible{outline:3px solid #123f9b;outline-offset:-3px;z-index:2}.op-controls{min-width:0}.op-controls h2{margin-top:0}.op-controls p{font-size:1rem;line-height:1.65;overflow-wrap:anywhere}.op-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.op-controls button{min-height:44px;font-size:.95rem;border:1px solid #bcbab2;border-radius:8px;padding:8px 12px;cursor:pointer}.op-controls button:disabled{cursor:default;opacity:.65}#op-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0}#op-list button[aria-current=step]{border:2px solid #245d44;background:#e4efdc}#op-status{border-left:4px solid #a45e28;padding-left:12px;font-weight:600}#op-hint,#op-explanation{padding:12px;background:#f2eee5;border-radius:8px}#op-storage{font-size:.875rem}.op-lessons li{margin:12px 0}.op-lessons summary{cursor:pointer;font-size:1rem}.op-links{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:24px 0}@media(max-width:720px){.op-layout{grid-template-columns:1fr}.op-surface{padding:12px}.op-board{padding:5px}.op-cell span{font-size:.75rem}.document:has(#omok-practice) h1{font-size:1.75rem}.op-controls{width:100%}}@media(prefers-reduced-motion:reduce){.op-cell{transition:none}}