:root{color-scheme:light;--cream:#f3ead8;--navy:#243a54;--rust:#a94f38;--line:#c3b494}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#fff8e9,#eadbbf);color:var(--navy);font:15px/1.4 system-ui,sans-serif}button,select{font:inherit;color:inherit;border:1px solid var(--line);background:#fff8eb;border-radius:10px;min-height:40px;padding:7px 12px;cursor:pointer}button:hover{background:#eadebd}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--rust);outline-offset:2px}button:disabled{opacity:.5;cursor:default}.primary,button[aria-pressed=true]{background:var(--navy);color:#fff8e9;border-color:var(--navy)}h1,h2,h3,p{margin:0}h1{font-size:clamp(17px,3vw,24px);letter-spacing:-.6px}#app{max-width:860px;margin:auto;padding:12px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom));display:grid;gap:8px}header{display:flex;align-items:center;gap:12px}header a{color:var(--rust);text-decoration:none;font-size:26px}header h1{flex:1}.status{display:flex;align-items:center;gap:10px;font-size:13px}.status b{flex:1}.status button{font-size:12px}.field{width:100%;max-width:calc(var(--board-size,5)*var(--target-cell,64px) + 75px);margin-inline:auto;border:2px solid #aa9879;box-shadow:0 5px 0 #c6b79a;border-radius:10px;overflow:hidden;background:#f4ecd9}#field{display:block;width:100%;height:min(clamp(260px,48vh,440px),calc(var(--board-size,5)*var(--target-cell,64px) + 75px));touch-action:none;user-select:none}#selectedline{font-size:12px;font-weight:650;min-height:18px;overflow-wrap:anywhere}.tools,.view-tools{display:flex;gap:5px;flex-wrap:wrap}.tools button{flex:1;min-width:60px;padding:7px 8px}.view-tools button{font-size:12px;flex:1;padding:6px;min-height:36px}.teacher{display:flex;align-items:center;gap:12px;min-height:72px}.teacher img{width:60px;height:72px;object-fit:contain}.teacher p{font-size:13px;flex:1;overflow-wrap:anywhere}#savestatus{font-size:11px;color:#685e4c}dialog{border:2px solid #ac9a79;border-radius:18px;background:#fff8eb;color:var(--navy);max-width:620px;width:calc(100% - 24px);max-height:calc(100dvh - 24px);padding:18px;overflow:auto;box-shadow:0 12px 65px #243a5450}dialog::backdrop{background:#26354b99}dialog p{margin:12px 0}dialog h2{font-size:24px;line-height:1.15;margin-bottom:10px}dialog button{margin:3px}.cover{height:230px;background:linear-gradient(90deg,#f7ecd9d0,transparent 55%),url('cover.webp') center/cover;border-radius:12px;padding:18px;display:flex;align-items:flex-start}.cover h2{font-family:Georgia,serif;font-size:36px;letter-spacing:-1.5px;color:#21384f;text-shadow:0 1px #fff5dc}.menu-actions{display:grid;grid-template-columns:1fr 1fr}.settings{display:flex;flex-wrap:wrap;gap:4px}.settings select{max-width:100%;flex:1}#pictures{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin:12px 0}#pictures h3{grid-column:1/-1;margin-top:10px;font-size:15px}#pictures button{margin:0;min-height:60px;font-size:12px;padding:6px 2px;overflow-wrap:anywhere}#pictures svg{width:100%;max-height:68px;display:block}#result img{width:70px;height:90px;object-fit:contain;float:right}#result h3{font-family:Georgia,serif;font-size:26px}@media(max-width:390px){#app{gap:6px}button,select{font-size:13px}.tools button{min-width:74px}.cover{height:190px}.cover h2{font-size:30px}dialog{padding:12px}.status{gap:5px}.teacher p{font-size:12px}#pictures{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-height:460px) and (min-width:600px){#app{max-width:980px;grid-template-columns:minmax(0,1fr) 260px;gap:7px}header{grid-column:1/-1}.status{grid-column:1;grid-row:2}.field{grid-column:1;grid-row:3/8}#field{height:250px}#selectedline,.tools,.view-tools,.teacher,#savestatus{grid-column:2}.teacher{min-height:62px}.teacher img{height:55px;width:45px}.tools button{min-width:74px}.cover{height:150px}dialog h2{font-size:21px}dialog p{margin:8px 0}}

#resultart{width:min(50vw,180px);aspect-ratio:1;margin:12px auto;background:#f3ead8;border:8px solid #e5d5b2;border-radius:8px}#resultart svg{width:100%;height:100%}@media(max-height:460px){#resultart{width:120px;margin:8px auto}}