*{box-sizing:border-box}.shapes-page{max-width:1360px;margin:auto;padding:16px}.page-heading{padding:4px 4px 16px;color:#352d49}.page-heading h1{font-size:28px;margin:0}.page-heading p{margin:5px 0 0;font-size:14px}.shapes-page #host{--ink:#352d49;--violet:#7560a7;--cream:#fffdf5;position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;height:690px;min-height:570px;background:#f3eedf;border:1px solid #d6cbe5;color:var(--ink);border-radius:20px;overflow:hidden;font-family:'Zen Maru Gothic',sans-serif}.shapes-page #host [hidden]{display:none!important}#host button{font:inherit;font-weight:700;border:1px solid #cfc4de;color:var(--ink);background:#fffdf5;min-height:42px;line-height:1.35;padding:8px 12px;border-radius:10px;cursor:pointer;touch-action:manipulation}#host button:hover{background:#f4edff}#host button:disabled{cursor:default;opacity:.65}#host button:focus-visible,#collection:focus-visible{outline:3px solid #624491;outline-offset:2px}#host button.primary{color:#fff;background:#7560a7;border-color:#7560a7}#host button.primary:hover{background:#614990}.shapes-top{flex:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid #e0d7dc;background:#fffdf5;z-index:1}.shapes-top strong{font-size:17px;letter-spacing:.07em}.shapes-top nav{display:flex;gap:6px}.shapes-top button{font-size:12px!important;min-height:36px!important;padding:6px 10px!important}#base{flex:1;min-height:0;position:relative}#cover{display:grid;grid-template-columns:3fr 2fr;height:100%;min-height:0}.cover-art{width:100%;height:100%;object-fit:cover;object-position:58% center;min-height:0}.welcome{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding:clamp(18px,4vw,50px);background:#fffdf5}.welcome h2{font-size:clamp(40px,5vw,70px);letter-spacing:.08em;line-height:1.18;margin:0}.welcome p{line-height:1.85;margin:0}.welcome small{font-size:12px}.welcome .primary{min-width:170px;font-size:20px!important}.museum-mark{font-size:28px;letter-spacing:.6em;color:#977dc8}#ready-note{font-size:11px}#play{height:100%;display:grid;grid-template-columns:130px minmax(0,1fr) 225px;gap:14px;padding:20px}#modes{display:flex;flex-direction:column;gap:10px;padding-top:12px}#modes small{padding:0 6px;color:#786b83}#modes button{display:flex;align-items:center;gap:8px;text-align:left;min-height:65px;font-size:13px}#modes i{font-style:normal;font-size:25px}#modes button[aria-pressed=true]{background:#fff2a3;border-color:#c4a953;box-shadow:3px 3px 0 #e3d493}#exhibit{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:12px}#question{font-size:clamp(17px,1.7vw,24px);margin:0;text-align:center;line-height:1.5;padding:4px}#display{background:#fcf9e9 url('./assets/museum.webp') center/cover;position:relative;border:1px solid #d9cbd5;display:flex;align-items:center;justify-content:center;min-height:0;border-radius:5px;overflow:hidden}#shape-view{width:78%;height:78%;min-height:0;display:grid;place-items:center;background:#fffdf5f7;border-radius:6px}#shape-view svg{max-width:100%;height:100%;width:100%;display:block}.exhibit-plaque{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;background:#fff6cf;padding:3px 12px;border:1px solid #d7c794}#answers{display:flex;gap:7px;flex-wrap:wrap}#answers button{flex:1 0 16%;padding:10px 5px;min-height:68px;white-space:nowrap;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}#answers small{font-size:10px;font-weight:400;color:#7f6c92}#answers button.correct{background:#deefce;border-color:#608152;opacity:1}#answers button.wrong{background:#f4dede;border-color:#a76c6c;opacity:1}#feedback{margin:0;min-height:42px;font-size:14px;line-height:1.4;padding:8px 10px;background:#fffdf5;border-left:4px solid #ac9ac9}#feedback[data-state=correct]{border-color:#608152}#feedback[data-state=wrong]{border-color:#a76c6c}#ticket{background:#fffbed;border:1px solid #ded0a9;border-top:5px solid #d8caa2;display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:14px;gap:10px}.ticket-counts{display:flex;justify-content:space-evenly;gap:12px;border-bottom:1px dashed #cfbf9b;padding-bottom:12px}.ticket-counts span{display:flex;flex-direction:column;align-items:center;font-size:12px}.ticket-counts b{font-size:38px;line-height:1.15}.guide-art{width:100%;height:120px;object-fit:contain;min-height:0}#tip{margin:0;font-size:13px;line-height:1.8;flex:1;min-height:0}.ticket-actions{display:grid;gap:7px}.ticket-actions button{font-size:13px!important}.ticket-actions #reset{border:0;background:transparent;font-size:11px!important;min-height:28px;padding:3px}#result{height:100%;padding:22px 28px;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:15px}#result>header{display:flex;justify-content:space-between;align-items:center;gap:10px}#result h2{margin:4px 0;font-size:28px}#result header p{margin:0;font-size:13px;text-align:right}#result header b{font-size:32px}#result small{font-size:12px}.mobile-break{display:none}#catalogue{display:grid;grid-template-columns:3fr 2fr;min-height:0;gap:15px}#featured{display:grid;grid-template-columns:1fr 1fr;min-height:0;align-items:center;background:#fffdf5;border:1px solid #ddccb1;border-bottom:8px solid #cfbd9f;box-shadow:0 4px 0 #e6dbc2;padding:14px;gap:12px}#featured-shape{height:100%;min-height:0}#featured-shape svg{width:100%;height:100%}#featured h3{font-size:22px;margin:6px 0}#featured-note{font-size:14px;line-height:1.65;margin:4px 0}#featured-answer{font-size:12px;line-height:1.5;margin:8px 0 0;color:#655277}.review-art{width:100%;height:100%;object-fit:cover;min-height:0;border-radius:5px}#collection{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;min-height:108px;max-height:120px;padding:5px 3px 8px}#collection button{flex:0 0 98px;height:94px;display:grid;grid-template-columns:1fr;grid-template-rows:48px auto;padding:4px;font-size:11px;position:relative}#collection button[aria-pressed=true]{border:2px solid #7560a7;background:#efe8fa}#collection svg{height:48px;width:100%}#collection .outcome{position:absolute;top:3px;right:6px;color:#638052}#collection .outcome.wrong{color:#a56c74}#result footer{display:flex;justify-content:center;gap:10px}#result footer button{min-width:135px}#modal{position:absolute;inset:0;display:grid;place-items:center;background:#32274066;padding:16px;z-index:10}#modal>section{width:min(500px,100%);max-height:100%;overflow-y:auto;background:#fffdf5;border:2px solid #d1c3df;border-radius:16px;padding:20px;box-shadow:0 15px 60px #352d4933}#modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}#modal h2{font-size:21px;margin:0}#dialog-content{font-size:15px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin:10px 0}#dialog-content label{display:flex;align-items:center;gap:10px;margin:12px 0;flex-wrap:wrap}#dialog-content input[type=checkbox]{width:22px;height:22px;accent-color:#7560a7}#volume{width:100%;accent-color:#7560a7}#storage-note{font-size:12px}.parent-note{padding:24px 6px;line-height:1.9;color:#5f586b;font-size:14px}.parent-note h2{font-size:19px}.shapes-page #host:fullscreen,.shapes-page #host.faux-fullscreen{width:100vw;height:100dvh;max-height:none;min-height:0;border:0;border-radius:0}.shapes-page #host.faux-fullscreen{position:fixed;inset:0;z-index:10000}
@media(max-width:760px){.shapes-page{padding:8px}.shapes-page #host{height:780px;min-height:650px}.page-heading h1{font-size:23px}.page-heading p{font-size:12px}.shapes-top{padding:8px;flex-wrap:wrap;gap:6px}.shapes-top strong{font-size:13px}.shapes-top nav{gap:4px}.shapes-top button{font-size:11px!important;padding:5px 7px!important;min-height:32px!important}#cover{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.cover-art{object-position:center 60%}.welcome{padding:18px 24px;display:grid;grid-template-columns:1fr auto;gap:8px 15px;align-items:center}.welcome small:first-child{grid-column:1/-1}.welcome h2{font-size:36px;grid-column:1;grid-row:2/4}.welcome p{font-size:11px;grid-column:2;margin:0}.welcome .museum-mark{display:none}.welcome .primary{grid-column:2;min-width:0;font-size:16px!important}#ready-note{grid-column:1/-1}#play{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;padding:12px;gap:10px}#modes{flex-direction:row;padding:0;gap:5px}#modes small{display:none}#modes button{min-height:40px;flex:1;justify-content:center;padding:5px 6px;font-size:12px;gap:4px}#modes i{font-size:19px}#exhibit{gap:8px}#question{font-size:17px;padding:0}#answers{gap:5px}#answers button{min-height:48px;font-size:12px;padding:6px 2px}#answers small{font-size:9px}#feedback{font-size:12px;min-height:32px;padding:7px}#ticket{display:grid;grid-template-columns:80px minmax(0,1fr);grid-template-rows:auto auto;padding:10px;gap:8px;border-top-width:3px}.ticket-counts{border:0;border-right:1px dashed #cfbf9b;padding:0 8px 0 0;gap:6px;grid-row:1}.ticket-counts span{font-size:10px}.ticket-counts b{font-size:24px}.guide-art{display:none}#tip{font-size:11px;line-height:1.6}.ticket-actions{grid-column:1/-1;grid-template-columns:1.1fr 1fr .9fr;gap:5px;align-items:center}.ticket-actions button{font-size:11px!important;padding:7px 5px;min-height:36px}.ticket-actions #reset{font-size:10px!important}#result{padding:14px;gap:12px}#result h2{font-size:23px}#result small{font-size:10px}#result header p{font-size:10px}#result header b{font-size:26px}.mobile-break{display:block}#catalogue{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 90px;gap:10px}#featured{padding:12px;gap:8px;grid-template-columns:1fr 1fr}#featured h3{font-size:18px}#featured-note{font-size:12px}#featured-answer{font-size:10px}.review-art{object-position:center 30%}#collection{min-height:93px;max-height:96px}#collection button{height:80px;flex-basis:82px;grid-template-rows:38px auto;font-size:10px}#collection svg{height:38px}#result footer button{min-width:100px}#modal{padding:10px}#modal>section{padding:16px}#modal h2{font-size:18px}#dialog-content{font-size:13px}}
@media(max-width:360px){.shapes-top{justify-content:center}.shapes-top strong{display:none}#play{padding:8px;gap:7px}#modes button{font-size:11px}#answers button{font-size:10px}#answers small{display:none}.welcome{padding:15px;gap:8px}.welcome h2{font-size:30px}#result{padding:10px}#result h2{font-size:20px}#featured h3{font-size:15px}#featured-note{font-size:11px}}
@media(max-height:520px) and (min-width:600px){.shapes-page #host{height:390px;min-height:360px}.shapes-top{padding:6px 12px}.shapes-top strong{font-size:13px}.shapes-top button{min-height:30px!important;font-size:10px!important}.welcome{padding:18px;gap:8px}.welcome h2{font-size:37px}.welcome p{font-size:12px}.welcome small{font-size:10px}.welcome .museum-mark{font-size:20px}.welcome .primary{min-height:38px;font-size:16px!important}#play{grid-template-columns:100px minmax(0,1fr) 175px;padding:10px;gap:10px}#modes{padding:0;gap:8px}#modes small{display:none}#modes button{font-size:10px;min-height:48px;padding:6px}#modes i{font-size:19px}#question{font-size:16px;padding:0}#exhibit{gap:6px}#answers{gap:4px}#answers button{min-height:38px;font-size:11px;padding:5px 3px}#answers small{display:none}#feedback{font-size:11px;min-height:26px;padding:5px}#ticket{padding:8px;gap:6px}.ticket-counts{padding-bottom:6px}.ticket-counts span{font-size:10px}.ticket-counts b{font-size:23px}.guide-art{display:none}#tip{font-size:11px;line-height:1.6}.ticket-actions{gap:4px}.ticket-actions button{min-height:30px;font-size:11px!important;padding:4px}.ticket-actions #reset{min-height:24px;font-size:10px!important}#result{padding:10px 18px;gap:7px}#result h2{font-size:22px}#result header b{font-size:24px}#result header p{font-size:11px}#result small{font-size:10px}#catalogue{gap:12px}#featured{padding:8px;gap:8px;border-bottom-width:4px}#featured h3{font-size:16px;margin:3px 0}#featured-note{font-size:11px;margin:3px 0;line-height:1.45}#featured-answer{font-size:10px;margin:4px 0}#collection{min-height:68px;max-height:68px;padding:2px 3px 4px}#collection button{height:59px;flex-basis:85px;grid-template-rows:28px auto;font-size:9px;padding:2px}#collection svg{height:28px}#result footer button{min-height:30px;font-size:11px;padding:5px}#modal>section{padding:12px}#modal header{margin:0}#dialog-content{font-size:12px;line-height:1.55}#dialog-content>button{margin:6px 0;min-height:32px}#dialog-content p{margin:9px 0}#dialog-content label{margin:8px 0}}
#modes button{gap:6px}
@media(min-width:761px) and (min-height:521px){#modes button{font-size:12px;padding:8px}}
@media(prefers-reduced-motion:reduce){#host *{scroll-behavior:auto!important}}