*{box-sizing:border-box}body{margin:0;background:#fff8ed;color:#39214f;font-family:'Zen Maru Gothic',sans-serif}.cafe-page{max-width:1450px;padding:20px 12px;margin:auto}.cafe-page>h1,.cafe-page>p{text-align:center}.cafe{position:relative;aspect-ratio:16/9;width:100%;border:5px solid #fff1de;border-radius:26px;overflow:hidden;background:#d6c1e9 url('./assets/counter.webp') center/cover;container-type:size;isolation:isolate;font-weight:700;user-select:none}.cafe [hidden]{display:none!important}.cafe button{font:inherit;font-size:clamp(13px,1.4cqw,22px);color:#39214f;border:2px solid #d8c7a8;border-radius:18px;background:#fff3df url('./assets/ticket.webp') center/100% 100%;box-shadow:0 4px 0 #93728d;padding:.6em 1em;cursor:pointer;touch-action:manipulation}.cafe button.primary{background:#f38d83;color:#39214f;border-color:#eb7e78;box-shadow:inset 0 3px 6px #ffd1ba,0 5px 0 #bd636b}.cafe button[aria-pressed=true]{background:#8c6cbc;color:white;border-color:#725795}.cafe button:focus-visible{outline:4px solid #53296f;outline-offset:2px}.cafe button:disabled{cursor:default;opacity:.65}.cafe-tools{position:absolute;top:2%;left:3%;right:3%;height:9%;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:5}.cafe-tools>strong{font-size:clamp(18px,2.7cqw,38px);white-space:nowrap;background:#fff5e6;padding:.2em .7em;border-radius:20px;box-shadow:0 4px 0 #c997bb}.cafe-tools span,.question span{color:#b82947}.cafe-tools nav{display:flex;gap:5px}.cafe-tools button{padding:.45em .6em}.cafe-menu{position:absolute;inset:13% 10% 4%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1%}.cafe-menu>p{margin:0;background:#fff4e2;border-radius:20px;padding:.35em 1em;font-size:clamp(15px,1.8cqw,28px)}.pizza-box{height:73%;aspect-ratio:1;position:relative;background:url('./assets/box.webp') center/100% 100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8%;transform:rotate(-3deg);filter:drop-shadow(0 8px 5px #57326f33)}.pizza-box h2{margin:0;text-align:center;font-size:clamp(28px,4.8cqw,70px);line-height:1.15;background:#fff5e5;border-radius:50%;padding:.2em .5em}.pizza-box #menuPizza{width:55%;aspect-ratio:1;position:absolute;bottom:8%;right:8%;transform:rotate(3deg)}.pizza-box h2{position:absolute;top:12%;left:12%;right:12%;z-index:1}.cafe-menu footer{display:flex;gap:14px}.cafe-menu footer button{font-size:clamp(17px,2cqw,30px);padding:.65em 2em}.cafe-play{position:absolute;inset:14% 4% 3%}.pizza-column{position:absolute;left:0;top:0;width:55%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.pizza-view{width:100%;height:91%;display:grid;place-items:center}.pizza-view svg{width:100%;height:100%;max-height:100%;display:block}.pizza-column>p{height:9%;margin:0;background:#fff7e7;border-radius:15px;padding:.2em .8em;font-size:clamp(12px,1.4cqw,21px);display:flex;align-items:center}.answer-column{position:absolute;right:0;top:0;width:41%;height:100%;display:flex;flex-direction:column;gap:2%}.receipt{display:flex;justify-content:space-around;text-align:center;background:#fff9ef;padding:1.5%;border-radius:4px 4px 15px 15px;box-shadow:0 3px 4px #94789633;height:13%;font-size:clamp(12px,1.2cqw,18px)}.receipt>div{flex:1;border-right:1px solid #c5accf}.receipt>div:last-child{border:0}.receipt b{display:block;font:700 clamp(22px,2.8cqw,42px)/1.15 'Fredoka',sans-serif}.question{height:9%;display:grid;place-content:center;grid-auto-flow:column;margin:0;font-size:clamp(19px,2.5cqw,37px);gap:.2em}.answer-tickets{height:43%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}.answer-tickets button{padding:4%;display:grid;place-items:center;min-height:0;border-radius:22px}.fraction{display:inline-grid;grid-template-rows:1fr 1fr;line-height:1;text-align:center;font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(24px,3.1cqw,48px);min-width:1.3em}.fraction>span:first-child{border-bottom:.075em solid currentColor;padding-bottom:.12em}.fraction>span:last-child{padding-top:.12em}.answer-tickets button.correct{outline:4px solid #376d64;opacity:1}.answer-tickets button.incorrect{outline:4px solid #be596c;opacity:1}.small-actions{display:flex;justify-content:center;gap:10px;height:8%}.small-actions button{padding:.25em 1em}.answer-note{height:19%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#fff7ebdf;border-radius:18px;padding:1% 2%}.answer-note p{font-size:clamp(12px,1.35cqw,21px);line-height:1.55;margin:0}.answer-note button{padding:.35em 1.4em}.hint-count{font-size:38px;fill:#3b2352;paint-order:stroke;stroke:#fff8eb;stroke-width:8px;font-weight:900}.cafe-result{position:absolute;inset:13% 6% 3%;display:flex;flex-direction:column;gap:2%;align-items:stretch}.cafe-result>header{height:14%;text-align:center}.cafe-result h2{margin:0;font-size:clamp(23px,2.8cqw,40px)}.cafe-result header p{margin:.3em 0;font-size:clamp(12px,1.35cqw,21px)}.review-tray{height:72%;background:#f18f89 url('./assets/tray.webp') center/100% 100%;border-radius:32px;padding:2% 3%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:2%}.review-item{min-height:0;display:flex;align-items:center;justify-content:center;gap:3%;background:#fff8eaca;border-radius:25px;padding:3%}.review-item svg{width:66%;height:100%;flex:none}.review-item>div{text-align:center}.review-item .fraction{font-size:clamp(20px,2cqw,31px)}.review-item small{display:block;font-size:clamp(10px,1cqw,16px);margin-top:8px}.cafe-result footer{height:12%;display:flex;justify-content:center;align-items:center;gap:15px}.cafe-result footer button{font-size:clamp(15px,1.7cqw,26px)}#resultTitle:focus{outline:none}.cafe-sheet{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#3a2655c2;padding:4%}.cafe-sheet>div{background:#fff1de url('./assets/ticket.webp') center/100% 100%;max-width:660px;max-height:100%;overflow:auto;padding:5%;border-radius:30px;text-align:center}.cafe-sheet h2{margin:0 0 .5em;font-size:clamp(22px,3cqw,40px)}.cafe-sheet p{font-size:clamp(14px,1.5cqw,22px);line-height:1.8}.cafe-sheet button{margin:4px}.parent-note{max-width:900px;margin:30px auto;line-height:1.9}.cafe:fullscreen{width:100vw;height:100dvh;border:0;border-radius:0;aspect-ratio:auto}@media(max-width:650px) and (min-height:501px){.cafe{height:min(790px,94dvh);min-height:620px;aspect-ratio:auto;border-width:3px}.cafe-tools{height:6%;top:2%;left:3%;right:3%;gap:4px}.cafe-tools>strong{font-size:15px;padding:.3em}.cafe-tools nav{gap:3px}.cafe-tools button{font-size:11px;padding:.45em .25em;border-radius:10px}.cafe-menu{inset:12% 5% 5%;justify-content:center;gap:6%}.cafe-menu>p{font-size:14px}.pizza-box{height:auto;width:100%;max-width:360px;aspect-ratio:1;padding:0}.pizza-box h2{font-size:36px}.cafe-menu footer{flex-direction:column;gap:14px;width:90%}.cafe-menu footer button{font-size:21px}.cafe-play{inset:11% 5% 3%}.answer-column{display:contents}.receipt{position:absolute;top:0;left:0;width:100%;height:9%;font-size:11px}.receipt b{font-size:24px}.question{position:absolute;top:10%;left:0;width:100%;height:5%;font-size:22px}.pizza-column{top:16%;width:100%;height:34%;left:0}.pizza-column>p{font-size:11px;height:10%}.pizza-view{height:90%}.answer-tickets{position:absolute;top:52%;left:0;width:100%;height:25%;gap:8px}.answer-tickets button{padding:2%}.fraction{font-size:27px}.small-actions{position:absolute;top:79%;left:0;width:100%;height:6%;gap:8px}.small-actions button{font-size:13px;padding:.25em 1em}.answer-note{position:absolute;top:86%;left:0;width:100%;height:14%;gap:3px;padding:2%}.answer-note p{font-size:12px}.answer-note button{font-size:14px;padding:.3em 1.5em}.cafe-result{inset:11% 4% 3%;gap:2%}.cafe-result>header{height:13%}.cafe-result h2{font-size:25px}.cafe-result header p{font-size:12px}.review-tray{height:72%;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);padding:4%;gap:6px}.review-item{flex-direction:column;padding:4%;gap:0}.review-item svg{width:100%;height:66%}.review-item>div{display:flex;align-items:center;gap:5px}.review-item .fraction{font-size:20px}.review-item small{font-size:9px;margin:0;max-width:55px}.cafe-result footer{height:11%;gap:6px}.cafe-result footer button{font-size:13px;padding:.65em .7em}.cafe-sheet>div{padding:7%}.cafe-sheet p{font-size:14px}}@media(max-height:500px){.cafe-tools{top:1.5%;height:9%}.cafe-tools>strong{font-size:20px}.cafe-tools button{font-size:11px;padding:.3em .5em}.cafe-play{inset:14% 7% 3%}.answer-column{gap:2%}.receipt{font-size:10px;padding:0;height:14%}.receipt b{font-size:19px}.question{font-size:19px;height:8%}.answer-tickets{gap:6px;height:39%}.fraction{font-size:24px}.small-actions{height:9%}.small-actions button{font-size:11px;padding:.1em 1em}.answer-note{height:22%;gap:2px}.answer-note p{font-size:11px;line-height:1.4}.answer-note button{font-size:12px;padding:.2em 1em}.pizza-column>p{font-size:11px}.cafe-result h2{font-size:23px}.cafe-result>header{height:14%}.cafe-result header p{font-size:11px;margin:0}.review-tray{height:68%;padding:1% 2%;gap:4px}.review-item .fraction{font-size:19px}.review-item small{font-size:9px;margin-top:3px}.cafe-result footer{height:14%}.cafe-result footer button{font-size:13px;padding:.35em 1em}.cafe-menu{inset:14% 12% 3%;gap:1%}.cafe-menu>p{font-size:12px}.pizza-box{height:69%;padding:0}.pizza-box h2{font-size:28px}.cafe-menu footer button{font-size:15px;padding:.45em 1.5em}.cafe-sheet>div{padding:2% 5%}.cafe-sheet h2{font-size:22px}.cafe-sheet p{font-size:12px;line-height:1.5}}
@media(max-width:650px) and (min-height:501px){.review-item small{font-size:11px;max-width:60px}}@media(max-height:500px){.review-item small{font-size:11px}}