.symmetry-page{max-width:1240px;margin:22px auto;padding:0 16px;color:#263d3b;font-family:'Zen Maru Gothic',sans-serif}.page-heading{padding:8px 4px 18px}.page-heading h1{font-size:34px;margin:0 0 6px}.page-heading p{margin:0}.parent-note{max-width:920px;margin:30px auto;padding:25px;background:#fff4d9;line-height:1.9}.parent-note h2{font-size:22px}#progress-storage{font-size:12px;text-align:center}
#host{--ink:#263d3b;--paper:#fff6df;position:relative;isolation:isolate;container-type:size;container-name:game;height:820px;max-width:1200px;margin:auto;overflow:hidden;background:#f3eddc;border:3px solid #4f7049;border-radius:10px;color:var(--ink);font-family:'Zen Maru Gothic',sans-serif}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host button{font:800 15px/1.4 'Zen Maru Gothic',sans-serif;min-width:0;min-height:43px;border:2px solid #9d8257;border-radius:9px;background:var(--paper);color:var(--ink);padding:8px 14px;cursor:pointer;touch-action:manipulation;box-shadow:0 3px 0 #b8a07e}#host button:disabled{cursor:default;opacity:.4}#host button:focus-visible,#host input:focus-visible{outline:3px solid #c44f34;outline-offset:3px}#host button:hover:enabled{filter:brightness(1.04)}#host button.primary{background:#386847;border-color:#195a56;color:#fff9df}#host input{accent-color:#386847;font:inherit}#host .symmetry-top{height:55px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:#386847;color:#fff6df}#host .symmetry-top strong{font-size:17px;white-space:nowrap}#host nav{display:flex;gap:7px}#host nav button{font-size:12px;min-height:31px;padding:5px 10px;border-width:1px;border-radius:5px;box-shadow:none}#base{height:calc(100% - 55px)}
#modal{position:absolute;inset:0;z-index:50;background:#1d3c3bc9;display:grid;place-items:center;padding:16px}#modal>section{max-height:100%;overflow:auto;width:min(620px,100%);background:#fff9e9;border:3px dashed #ad8c58;border-radius:12px;padding:25px}#modal header{display:flex;align-items:center;justify-content:space-between;gap:10px}#modal h2{font-size:23px;margin:0}#dialog-content{font-size:15px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin-top:12px}#dialog-content label{display:flex;align-items:center;gap:12px;margin:17px 0}#dialog-content input[type=checkbox]{width:25px;height:25px}#dialog-content label:has(input[type=range]){display:block}#dialog-content input[type=range]{display:block;width:100%;height:34px}#storage-note{font-size:12px}#host:fullscreen,#host.faux-fullscreen{width:100vw;height:100dvh;max-width:none;margin:0;border:0;border-radius:0}#host.faux-fullscreen{position:fixed;inset:0;z-index:99999}
#host{--ink:#22334c;--paper:#fff4da;background:#1b3452;border-color:#b79150}#host button{border-color:#b18e4f;box-shadow:0 3px 0 #ad945f;border-radius:7px}#host button.primary{background:#234766;border-color:#bf9854;color:#fff5d7}#host .symmetry-top{background:#1b3452;color:#f4d695;border-bottom:1px solid #b18e4f}#cover{height:100%;display:grid;grid-template-columns:1.7fr 1fr;gap:18px;padding:18px;background:#1b3452}.cover-art{width:100%;height:100%;object-fit:cover;object-position:40% center;border-radius:90px 90px 5px 5px;border:3px solid #bf995a;min-height:0}.welcome{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:23px;text-align:center;background:#fff4da;border:3px double #bd9852;border-radius:70px 70px 6px 6px;padding:27px 24px}.welcome h2{font-size:43px;line-height:1.45;margin:0;color:#233b59}.welcome h2 span{font-size:.94em}.welcome p{font-size:14px;line-height:1.9;margin:0}.welcome>small{font-size:10px}.diamond{font-size:65px;color:#b58b3d;line-height:1}#host #start{font-size:20px;min-height:56px;width:100%;margin-top:8px}#ready-note{font-size:9px}
#play{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px;padding:19px;background:#213a51 url('./assets/workshop.webp') center/cover}#tile-work{display:grid;grid-template-rows:32px minmax(0,1fr) 68px 18px;gap:12px;padding:15px 18px;background:#fff5e0ed;border:3px solid #b8924c;border-radius:20px;min-height:0}.board-head{display:flex;justify-content:space-around;align-items:center;font-size:16px;font-weight:800;width:min(100%,calc(100cqh - 267px),560px);margin:auto}.board-head span{flex:1;text-align:center}#board-space{display:grid;place-items:center;min-height:0}#board{position:relative;width:min(100%,calc(100cqh - 267px),560px);aspect-ratio:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:5px;border:4px solid #866d3c;padding:9px;background:#e4d5b7;box-shadow:0 4px 0 #7b6a4733;border-radius:7px}#board::after{content:'';position:absolute;top:4px;bottom:4px;width:5px;background:#c59633;left:50%;transform:translateX(-50%);box-shadow:0 0 0 2px #725a2e;pointer-events:none}#host #board button{position:relative;min-height:0;aspect-ratio:1;padding:0;border:2px solid #807253;border-radius:4px;background:var(--tile);box-shadow:inset 0 -5px 0 #0000000e;color:#243446;font-size:clamp(13px,2cqw,22px)}#host #board button:disabled{opacity:1;cursor:default}#host #board .reference{border-style:dotted;border-color:#9b8e72}#host #board button.mirror-source{outline:3px solid #284c72;outline-offset:-6px}#host #board button:focus-visible{outline:3px solid #213b62;outline-offset:-5px;z-index:2}#board[data-complete=true]{box-shadow:0 0 0 4px #4c8774,0 4px 0 #7b6a4733}#palette{display:flex;justify-content:center;gap:12px;min-height:0}#host #palette button{width:75px;display:grid;grid-template-columns:1fr 12px;grid-template-rows:38px 16px;gap:3px;padding:3px 6px;min-height:0;box-shadow:none;border:2px solid transparent;background:none}#palette .swatch{display:flex;align-items:center;justify-content:center;grid-column:1/3;background:var(--tile);border:2px solid #8c774c;border-radius:6px;font-size:20px;line-height:1}#palette b{font-size:11px;line-height:16px}#palette small{font:10px/16px sans-serif;color:#8c8065}#host #palette button[aria-pressed=true]{background:#e3e9ec;border-color:#214363;outline:2px solid #fff7dc;outline-offset:1px}#host #palette button:focus-visible{outline:3px solid #c0543f;outline-offset:2px}.palette-note{font-size:11px;text-align:center;margin:0;line-height:18px}
#toolbox{display:grid;grid-template-rows:43px 61px minmax(50px,1fr) 89px 43px 45px 40px 21px;gap:12px;padding:18px;background:#fff4ddea;border:3px solid #c2a368;border-radius:30px 30px 7px 7px;min-height:0}#toolbox h2{font-size:18px;font-weight:700;text-align:center;margin:0;display:flex;align-items:center;justify-content:center;gap:20px;border-bottom:2px solid #d0b279}#stage{font:700 28px/1 'Fredoka',sans-serif}.counts{display:flex;justify-content:space-around;align-items:center;gap:10px}.counts span{font-size:10px;display:flex;flex-direction:column;align-items:center;gap:7px}.counts b{font:700 27px/1 'Fredoka',sans-serif}.counts span:last-child b{color:#a8503c}.guide-art{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 35%;border-radius:60px 60px 4px 4px;border:2px solid #b79351}#feedback{font-size:14px;line-height:1.8;display:flex;align-items:center;justify-content:center;text-align:center;padding:9px;background:#fff9e9;border:1px solid #cbb27a;border-radius:7px;margin:0}#feedback[data-state=wrong]{background:#fbe5d7;border-color:#b8674a}#feedback[data-state=complete]{background:#dcecd8;border-color:#669479}#host #hint,#host #review{font-size:13px}.tip{font-size:10px;line-height:1.7;text-align:center}
#result{height:100%;display:grid;grid-template-rows:73px minmax(0,1fr) 125px 20px 45px;gap:13px;padding:22px 30px;background:#fff5df}#result>header{display:flex;align-items:center;justify-content:space-between;border-bottom:3px double #ad8946;padding-bottom:10px;gap:12px}#result h2{font-size:33px;line-height:1.35;margin:5px 0 0}#result header small{font-size:10px}#result header p{font-size:12px;margin:0;white-space:nowrap}#result-count{font:700 30px/1 'Fredoka',sans-serif}#exhibition{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:30px;min-height:0}.featured-frame{container-type:size;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 25px;gap:9px;place-items:center;background:#e8e1cc;border:2px solid #ba9d60;border-radius:7px;padding:9px}#featured{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:3px;border:5px solid #9c7c40;background:#c6bda1;padding:5px;width:min(calc(100cqw - 5px),calc(100cqh - 40px));aspect-ratio:1}#featured i{border:1px solid #877a5e}#featured-note{font-size:12px;line-height:1.6;margin:0;text-align:center}.review-art{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 31%;border-radius:50px 50px 7px 7px}#collection{display:flex;gap:15px;overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable;border-block:2px solid #c6ab72;padding:7px 10px;background:#f1e8d0}#host #collection>button{flex:0 0 107px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;box-shadow:none;padding:5px;min-height:0;border:2px solid #bca579;background:#fff6df}#host #collection>button[aria-pressed=true]{border-color:#294b6a;background:#dae7e8}.mini-mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:1px;width:70px;aspect-ratio:1;background:#9e8b63;border:2px solid #9e8b63}#collection b{font-size:10px;line-height:1.4}#collection:focus-visible{outline:3px solid #ab6c34;outline-offset:2px}.reading-note{font-size:11px;text-align:center;margin:0}#result>footer{display:flex;gap:15px;justify-content:center}#host #result>footer button{min-width:180px}
@media(max-width:700px){.symmetry-page{padding:0 8px}#host{height:880px}.page-heading h1{font-size:29px}.parent-note{padding:16px}}@media(max-height:520px) and (min-width:621px){#host{height:390px}}
@container game (max-width:620px){#host .symmetry-top{height:76px;display:grid;justify-content:stretch;gap:6px;padding:7px 8px;text-align:center}#host .symmetry-top strong{font-size:13px}#host nav{gap:5px}#host nav button{flex:1;white-space:nowrap;font-size:10px;padding:6px 3px;min-height:31px}#base{height:calc(100% - 76px)}#cover{grid-template-columns:1fr;grid-template-rows:minmax(220px,1fr) 252px;gap:11px;padding:12px}.cover-art{border-radius:55px 55px 4px 4px;object-position:center 55%;border-width:2px}.welcome{border-radius:30px 30px 5px 5px;padding:15px 20px;gap:11px}.welcome h2{font-size:30px;line-height:1.25}.welcome h2 br{display:none}.welcome p{font-size:11px;line-height:1.7}.welcome>small{font-size:8px}.diamond{font-size:29px}#host #start{font-size:15px;min-height:43px;margin-top:0}#ready-note{font-size:8px}#play{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 190px;gap:10px;padding:10px}#tile-work{grid-template-rows:24px minmax(0,1fr) 52px 16px;gap:8px;padding:10px;border-width:2px;border-radius:14px}.board-head{font-size:12px;width:min(100%,calc(100cqh - 440px))}#board{width:min(100%,calc(100cqh - 440px));gap:4px;padding:6px;border-width:3px}#board::after{width:4px;box-shadow:0 0 0 1px #725a2e}#host #board button{border-width:1px;border-radius:3px;font-size:15px;box-shadow:inset 0 -3px 0 #0000000e}#host #board button.mirror-source{outline-width:2px;outline-offset:-4px}#host #board button:focus-visible{outline-width:2px;outline-offset:-4px}#palette{gap:8px}#host #palette button{width:52px;grid-template-columns:1fr 9px;grid-template-rows:27px 12px;padding:3px 4px;gap:2px}#palette .swatch{font-size:15px;border-width:1px;border-radius:4px}#palette b{font-size:9px;line-height:12px}#palette small{font-size:8px;line-height:12px}.palette-note{font-size:9px;line-height:16px}#toolbox{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:29px 37px 42px 19px;gap:9px 7px;padding:12px;border-width:2px;border-radius:9px}#toolbox h2{grid-column:1;grid-row:1;font-size:12px;gap:9px;border:0}#stage{font-size:22px}.counts{grid-column:2/4;grid-row:1;gap:12px}.counts span{font-size:8px;gap:3px;flex-direction:row}.counts b{font-size:19px}.guide-art{display:none}#feedback{grid-column:1/4;grid-row:2;font-size:11px;padding:4px;line-height:1.5}#host #hint,#host #review{font-size:10px;padding:5px 2px;min-height:36px}#host #new{font-size:10px;min-height:36px;padding:5px 2px}.tip{grid-column:1/4;grid-row:4;font-size:9px}#result{grid-template-rows:79px minmax(0,1fr) 102px 21px 39px;gap:10px;padding:16px 13px}#result h2{font-size:23px}#result header small{font-size:8px}#result header p{font-size:9px}#result-count{font-size:24px}#exhibition{grid-template-columns:1fr}.review-art{display:none}.featured-frame{padding:7px;grid-template-rows:minmax(0,1fr) 23px;gap:6px}#featured{border-width:4px;padding:4px;gap:2px;width:min(calc(100cqw - 5px),calc(100cqh - 36px))}#featured-note{font-size:10px}#collection{gap:10px;padding:5px 7px}#host #collection>button{flex-basis:80px;padding:4px;gap:4px}.mini-mosaic{width:57px}#collection b{font-size:9px}.reading-note{font-size:9px}#host #result>footer button{min-width:0;flex:1;font-size:12px;min-height:36px;padding:5px}#modal>section{padding:18px}#modal h2{font-size:19px}#dialog-content{font-size:13px}}
@container game (max-height:520px) and (min-width:621px){#host .symmetry-top{height:38px;padding:4px 12px}#host .symmetry-top strong{font-size:12px}#host nav button{min-height:26px;font-size:10px;padding:4px 8px}#base{height:calc(100% - 38px)}#cover{padding:10px;gap:12px}.cover-art{border-radius:45px 45px 5px 5px}.welcome{padding:12px 20px;gap:9px;border-radius:45px 45px 5px 5px}.welcome h2{font-size:28px;line-height:1.2}.welcome h2 br{display:none}.welcome>small{font-size:8px}.welcome p{font-size:10px;line-height:1.7}.diamond{font-size:34px}#host #start{font-size:13px;min-height:34px;margin-top:0}#ready-note{font-size:8px}#play{grid-template-columns:minmax(0,1fr) 275px;gap:13px;padding:10px 20px}#tile-work{grid-template-rows:22px minmax(0,1fr) 44px 0;gap:7px;padding:8px;border-width:2px;border-radius:11px}.board-head{font-size:11px;width:min(100%,calc(100cqh - 169px))}#board{width:min(100%,calc(100cqh - 169px));gap:3px;padding:5px;border-width:3px}#board::after{width:3px;box-shadow:0 0 0 1px #725a2e}#host #board button{border-width:1px;border-radius:2px;font-size:13px;box-shadow:inset 0 -2px 0 #0000000e}#host #board button.mirror-source,#host #board button:focus-visible{outline-width:2px;outline-offset:-4px}#palette{gap:10px}#host #palette button{width:47px;grid-template-columns:1fr 8px;grid-template-rows:22px 11px;padding:2px 4px;gap:1px}#palette .swatch{font-size:13px;border-width:1px;border-radius:4px}#palette b{font-size:8px;line-height:11px}#palette small{font-size:7px;line-height:11px}.palette-note{display:none}#toolbox{grid-template-rows:30px 40px minmax(46px,1fr) 31px 32px 29px 18px;gap:8px;padding:11px 16px;border-width:2px;border-radius:20px 20px 6px 6px}#toolbox h2{font-size:13px;gap:20px}#stage{font-size:22px}.counts{gap:12px}.counts span{font-size:9px;gap:5px}.counts b{font-size:22px}.guide-art{display:none}#feedback{font-size:11px;padding:6px;line-height:1.5}#host #hint,#host #review{font-size:10px;min-height:28px;padding:4px}#host #new{font-size:11px;min-height:29px;padding:4px}.tip{font-size:8px}#result{grid-template-rows:43px minmax(0,1fr) 77px 14px 29px;gap:6px;padding:10px 24px}#result h2{font-size:23px;margin-top:2px}#result header small{font-size:8px}#result header p{font-size:10px}#result-count{font-size:22px}#result>header{padding-bottom:5px}#exhibition{grid-template-columns:1.5fr 1fr;gap:22px}.featured-frame{padding:4px;grid-template-rows:minmax(0,1fr) 18px;gap:3px}#featured{border-width:3px;padding:3px;gap:1px;width:min(calc(100cqw - 5px),calc(100cqh - 25px))}#featured-note{font-size:9px}.review-art{border-radius:20px 20px 4px 4px;object-position:center 23%}#collection{padding:4px 8px;gap:10px}#host #collection>button{flex-basis:75px;padding:3px;gap:2px}.mini-mosaic{width:42px}#collection b{font-size:8px}.reading-note{font-size:8px}#host #result>footer button{min-height:27px;min-width:160px;font-size:11px;padding:3px}#modal>section{padding:13px 22px}#modal h2{font-size:19px}#dialog-content{font-size:12px;line-height:1.6}#dialog-content p{margin:9px 0}#dialog-content label{margin:8px 0}}
@container game (max-width:350px){#cover{grid-template-rows:minmax(160px,1fr) 238px;padding:9px;gap:9px}.welcome{gap:9px;padding:11px 14px}.welcome h2{font-size:26px}.welcome p{font-size:10px}.welcome>small{font-size:7px}#host #start{font-size:14px;min-height:38px}#play{padding:8px;gap:8px;grid-template-rows:minmax(0,1fr) 178px}#tile-work{grid-template-rows:22px minmax(0,1fr) 44px 14px;gap:6px;padding:8px}.board-head{font-size:10px;width:min(100%,calc(100cqh - 408px))}#board{width:min(100%,calc(100cqh - 408px));gap:3px;padding:5px}#host #board button{font-size:12px}#palette{gap:6px}#host #palette button{width:43px;grid-template-columns:1fr 8px;grid-template-rows:23px 11px;padding:2px 3px;gap:1px}#palette .swatch{font-size:13px}#palette b{font-size:8px;line-height:11px}#palette small{font-size:7px;line-height:11px}.palette-note{font-size:8px;line-height:14px}#toolbox{padding:9px;gap:8px 5px;grid-template-rows:27px 37px 37px 18px}#toolbox h2{font-size:11px;gap:6px}#stage{font-size:19px}.counts{gap:7px}.counts span{font-size:8px;gap:4px}.counts b{font-size:16px}#feedback{font-size:10px}#host #hint,#host #review,#host #new{font-size:9px;padding:4px 1px;min-height:33px}.tip{font-size:8px}#result{grid-template-rows:72px minmax(0,1fr) 91px 20px 37px;gap:8px;padding:12px 11px}#result h2{font-size:20px}#result header small{font-size:7px}#result header p{font-size:8px}#result-count{font-size:20px}#collection{gap:8px}#host #collection>button{flex-basis:71px}.mini-mosaic{width:48px}#featured-note{font-size:9px}.reading-note{font-size:8px}}
@media(prefers-reduced-motion:reduce){#host *{transition:none!important;animation:none!important}}