:root{color-scheme:light;--ink:#243e38;--jade:#226c5e;--cream:#f6f2e7}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.55 system-ui,sans-serif}main{max-width:1240px;margin:auto;padding:30px}header{padding:10px 0 25px;border-bottom:1px solid #c8cfc2}h1{font:52px/1.1 Georgia,serif;margin:12px 0}h1 span{font-size:28px;font-style:italic;color:#617c6c}header>p:last-child{margin:12px 0 0}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:750}h2{font:32px/1.2 Georgia,serif}h3{font:21px Georgia,serif}.toolbar{display:flex;align-items:end;gap:10px;flex-wrap:wrap;margin:22px 0}label{font-size:12px;display:grid;gap:5px}button,select{font:inherit;border:1px solid #aabbb0;color:var(--ink);background:#fffdf5;border-radius:8px;padding:9px 13px;cursor:pointer}button:hover{background:#dce8dc}button:focus-visible,select:focus-visible{outline:3px solid #be8d35;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.layout{display:grid;grid-template-columns:minmax(0,1fr) 295px;gap:34px}.table{background:#e6ecdf;border:1px solid #c3cfbd;border-radius:22px;padding:20px;align-self:start;box-shadow:0 20px 45px #304a3410}.score{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #bdcbb9;padding-bottom:12px;font-size:14px}.score b{font-size:23px;padding-left:6px}#turn{font-size:11px;text-transform:uppercase;letter-spacing:1px}#status{min-height:48px;margin-bottom:0;font-weight:650}#board{position:relative;width:100%;aspect-ratio:1.12;max-width:700px;margin:auto}#board svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#board button{position:absolute;transform:translate(-50%,-50%);padding:0;width:4.6%;aspect-ratio:1;border-radius:50%;border:0;background:transparent;display:grid;place-items:center}#board button:before{content:'';width:5px;height:5px;background:#829785;border-radius:50%}#board button.ring:before{width:85%;height:85%;border:6px solid #fefcf2;background:#688c6a;border-radius:50%;box-shadow:1px 3px 3px #193c3140}#board button.jade.ring:before{border-color:#226c5e;background:#b9ccba}#board button.marker:before{width:56%;height:56%;background:#fffdf2;box-shadow:0 2px 2px #243e3850}#board button.jade.marker:before{background:#226c5e}#board button.legal{background:#b8d9a9;box-shadow:0 0 0 2px #609459}#board button.selected{outline:3px solid #c69130;outline-offset:2px}#board button.suggest{outline:4px dashed #ba7c22}#board button:hover{box-shadow:0 0 0 3px #cfb56e}#note{font-size:13px;color:#526c5c;margin-bottom:0;min-height:40px}#choices{display:flex;gap:8px;flex-wrap:wrap}aside{font-size:14px}aside ol{padding-left:22px}aside li{margin-bottom:10px}aside button{display:block;width:100%;text-align:left;margin:7px 0}summary{cursor:pointer;font-weight:700;padding:12px 0}a{color:#286656}#journal{font-size:12px;max-height:175px;overflow:auto}footer{font-size:12px;text-align:center;margin-top:35px;color:#6b7c6c}@media(max-width:800px){main{padding:18px}.layout{grid-template-columns:1fr}h1{font-size:39px}h1 span{display:block;font-size:24px}.table{padding:12px}.score{font-size:12px}#board button.ring:before{border-width:4px}.toolbar button,.toolbar select{font-size:14px}#status{font-size:14px}aside{max-width:650px}#board button{width:5.4%}}
