*{box-sizing:border-box}.workshop-page{max-width:1320px;margin:auto;padding:16px 24px 40px;color:#122c4c}.workshop-page>h1{font-size:clamp(24px,3vw,36px);margin:6px 0}.workshop-page>p{margin:0 0 18px}.workshop{container-type:inline-size;position:relative;width:100%;aspect-ratio:16/9;min-height:570px;overflow:hidden;isolation:isolate;border:4px solid #e2d2af;border-radius:20px;background:#fff6e5 url('./assets/workshop.webp') center/cover;color:#122c4c;font-family:'Zen Maru Gothic',system-ui,sans-serif}.workshop [hidden]{display:none!important}.workshop button{font:inherit;font-weight:900;cursor:pointer;border:3px solid #193655;border-radius:12px;padding:9px 13px;color:#122c4c;background:#fff9eb;min-height:42px;line-height:1.3}.workshop button:hover:enabled{filter:brightness(.95)}.workshop button:focus-visible{outline:4px solid #e04420;outline-offset:4px}.workshop button:disabled{cursor:default}.workshop .primary{color:white;background:#d83b22;border:4px solid #b92b19;border-radius:22px 17px 23px 16px;font-size:clamp(17px,2cqw,27px);padding:11px 24px;box-shadow:0 4px 0 #912311}.workshop .plain{background:#fff9ec;border-color:#253d59}.stamp-tools{position:absolute;z-index:8;left:3%;right:3%;top:3%;display:flex;justify-content:space-between;align-items:start;gap:15px}.stamp-tools>strong{font-size:clamp(16px,2.1cqw,28px);line-height:1.3;color:#075e58;text-shadow:1px 1px #fff}.stamp-tools nav{display:flex;gap:7px}.stamp-tools button{background:#126791;color:white;border:3px dashed #fff7e5;border-radius:2px;min-width:43px;font-size:clamp(12px,1.25cqw,17px);padding:8px}.stamp-tools button:nth-child(1){background:#c53724}.stamp-tools button:nth-child(2){background:#92610b}.stamp-tools button:nth-child(4){background:#ae4c10}.stamp-tools button:nth-child(5){background:#08624f}.stamp-tools button[aria-pressed=false]{background:#57646a}.progress-stamps{position:absolute;top:12%;left:27%;right:27%;display:flex;justify-content:center;gap:4px;height:30px}.progress-stamps span{width:9%;border:2px dashed #baac92;background:#fff8ea;text-align:center;font-weight:900;font-size:16px;line-height:25px;color:#837459}.progress-stamps span.done{background:#d34125;color:#fff;border-color:#d34125}.workshop-content{position:absolute;inset:21% 4% 5%}.welcome,.sorting-stage,.album-result{position:relative;height:100%}.welcome>h2{position:absolute;left:27%;right:27%;top:-8%;font-size:clamp(32px,4.4cqw,60px);line-height:1.35;text-align:center;margin:0;color:#075e58}.welcome>h2 span{color:#c6361d}.welcome-drawers>div{position:absolute;width:26%;height:35%}.welcome-drawers>div:nth-child(1){left:0;top:3%}.welcome-drawers>div:nth-child(2){left:0;bottom:3%}.welcome-drawers>div:nth-child(3){right:0;top:3%}.welcome-drawers>div:nth-child(4){right:0;bottom:3%}.welcome-drawers img{width:100%;height:100%;object-fit:contain}.welcome-drawers strong{position:absolute;left:7%;right:7%;bottom:12%;font-size:clamp(13px,1.7cqw,23px);text-align:center;line-height:1.3}.welcome-cards{position:absolute;left:50%;top:43%;width:34%;height:38%;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%)}.picture-card{background:#fff9e9 url('./assets/card.webp') center/100% 100%;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7%;text-align:center;color:#122c4c;box-shadow:0 3px 4px #4b31151a}.picture-card img{display:block;width:100%;height:0;flex:1;min-height:0;object-fit:contain;max-width:100%;user-select:none;pointer-events:none}.picture-card b,.picture-card strong{font-size:clamp(15px,2cqw,29px);line-height:1.3;margin-top:5px;white-space:nowrap}.welcome-cards .picture-card{width:38%;height:100%;flex-shrink:0;padding:10px}.welcome-cards .picture-card:first-child{transform:rotate(-12deg)}.welcome-cards .picture-card:nth-child(2){z-index:1;transform:translateY(-6px)}.welcome-cards .picture-card:last-child{transform:rotate(12deg)}.welcome-action{position:absolute;left:27%;right:27%;bottom:0;text-align:center}.welcome-action p{font-size:clamp(14px,1.9cqw,25px);margin:0 0 12px;font-weight:900}.welcome-action .primary{display:block;width:100%;font-size:clamp(23px,3.2cqw,43px)}.welcome-action .plain{font-size:13px;margin-top:10px;padding:5px 15px;min-height:32px}.question{position:absolute;top:0;left:29%;right:29%;text-align:center}.question h2{font-size:clamp(26px,3.6cqw,49px);margin:0;line-height:1.3;color:#b8301d}.question p{font-size:clamp(12px,1.4cqw,18px);margin:8px 0}.drawer{position:absolute;width:27%;height:35%}.drawer[data-category=animal]{left:0;top:9%}.drawer[data-category=food]{left:0;bottom:9%}.drawer[data-category=vehicle]{right:0;top:9%}.drawer[data-category=clothes]{right:0;bottom:9%}.drawer img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}.drawer .drawer-back{z-index:0}.drawer .drawer-front{z-index:3;clip-path:inset(48% 0 0 0)}.workshop .drawer button{position:absolute;inset:0;z-index:4;width:100%;height:100%;border:4px solid transparent;background:transparent;border-radius:16px;box-shadow:none;display:flex;justify-content:center;align-items:end;padding:0 5% 13%;font-size:clamp(13px,1.8cqw,24px);line-height:1.3}.drawer button.correct{border:4px dashed #08734d}.drawer button.chosen-wrong{border:4px dotted #b24631}.moving-card{position:absolute;left:50%;top:46%;width:clamp(125px,15cqw,210px);height:clamp(156px,18.75cqw,263px);transform:translate(-50%,-50%);padding:14px;z-index:2}.answer-note{position:absolute;left:30%;right:30%;top:30%;text-align:center;z-index:5}.answer-note>strong{display:block;font-size:clamp(17px,2.1cqw,28px);color:#09674c}.answer-note p{font-size:clamp(15px,1.8cqw,24px);line-height:1.6;margin:12px 0 20px}.answer-note .primary{font-size:clamp(15px,1.6cqw,22px);padding:10px 14px}.sorting-hint{position:absolute;bottom:0;left:28%;right:28%;text-align:center;font-size:clamp(13px,1.5cqw,20px);font-weight:900;margin:0}.album-result{display:flex;flex-direction:column;gap:12px}.album-result>header{text-align:center;flex-shrink:0}.album-result h2{font-size:clamp(25px,3cqw,40px);color:#bf361f;margin:0}.album-result>header p{margin:5px 0;font-size:clamp(15px,1.6cqw,22px)}.album-result>header strong{font-size:1.3em}.albums{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.category-album{background:#fff8ea url('./assets/album.webp') center/100% 100%;border:5px solid var(--ink);border-radius:10px;padding:7px;display:flex;flex-direction:column;gap:8px;min-height:0}.category-album h3{text-align:center;font-size:clamp(13px,1.6cqw,21px);margin:3px 0;padding:4px 0;line-height:1.3}.album-cards{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;grid-auto-rows:minmax(0,1fr)}.result-card{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #d5c5a8;border-radius:8px;background:#fff9ec;padding:5px}.result-card img{width:100%;height:0;flex:1;min-height:0;object-fit:contain;max-height:100px}.result-card span{font-size:clamp(12px,1.35cqw,18px);font-weight:900;line-height:1.3;padding-top:4px}.empty-album{font-size:14px;line-height:1.7;text-align:center}.album-result footer{display:flex;justify-content:center;gap:15px;flex-shrink:0}.album-result footer button{font-size:clamp(15px,1.7cqw,23px)}.workshop-sheet{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#142840d9}.workshop-sheet>div{max-width:600px;width:95%;max-height:100%;overflow:auto;background:#fff8e6;border:6px dashed #b4873a;border-radius:20px;padding:20px;text-align:center}.workshop-sheet h2{font-size:clamp(23px,3cqw,38px);margin:0 0 14px}.workshop-sheet p{font-size:clamp(14px,1.6cqw,21px);line-height:1.8}.workshop-sheet button{margin:6px}.parent-note{margin:24px auto;background:#fff8ec;padding:20px;border-radius:16px;line-height:1.9}.parent-note h2{font-size:20px;margin:0}.workshop:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;min-height:0;border:0;border-radius:0}.workshop:fullscreen .workshop-content{max-width:1500px;margin:auto}@media(max-width:650px){.workshop-page{padding:10px}.workshop{aspect-ratio:auto;min-height:790px}.stamp-tools{top:12px;left:10px;right:10px;align-items:center;gap:5px}.stamp-tools>strong{font-size:13px}.stamp-tools nav{gap:3px}.stamp-tools button{font-size:10px;min-width:32px;min-height:38px;padding:4px;border-width:2px}.progress-stamps{top:69px;left:7%;right:7%;height:25px}.progress-stamps span{font-size:13px;line-height:20px}.workshop-content{inset:112px 15px 20px}.welcome>h2{left:0;right:0;top:-3%;font-size:35px}.welcome-cards{top:31%;height:22%;width:65%}.welcome-cards .picture-card{padding:7px}.picture-card b,.picture-card strong{font-size:18px}.welcome-drawers>div{width:46%;height:22%}.welcome-drawers>div:nth-child(1){left:0;top:44%}.welcome-drawers>div:nth-child(2){left:auto;right:0;top:44%;bottom:auto}.welcome-drawers>div:nth-child(3){left:0;right:auto;top:68%}.welcome-drawers>div:nth-child(4){right:0;bottom:auto;top:68%}.welcome-drawers strong{font-size:13px;bottom:14%}.welcome-action{left:3%;right:3%;bottom:-1%;display:grid;grid-template-columns:1fr 1fr;gap:7px;align-items:center}.welcome-action p{position:absolute;top:-385px;left:0;right:0;font-size:14px;display:none}.welcome-action .primary{font-size:24px;padding:8px}.welcome-action .plain{margin:0;min-height:44px}.question{top:0;left:0;right:0}.question h2{font-size:29px}.question p{font-size:12px;margin:6px 0}.moving-card{width:110px;height:138px;top:25%;padding:10px}.drawer{width:46%;height:24%}.drawer[data-category=animal]{left:0;top:42%}.drawer[data-category=food]{left:auto;right:0;top:42%;bottom:auto}.drawer[data-category=vehicle]{left:0;right:auto;top:69%}.drawer[data-category=clothes]{right:0;bottom:auto;top:69%}.workshop .drawer button{font-size:14px;padding-bottom:13%;border-width:3px}.sorting-hint{left:0;right:0;bottom:0;font-size:13px}.answer-note{left:4%;right:4%;top:14%}.answer-note>strong{font-size:19px}.answer-note p{font-size:16px;margin:6px 0 12px;line-height:1.5}.answer-note .primary{font-size:16px;padding:8px 15px}.albums{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.category-album{padding:6px;border-width:4px;gap:4px}.category-album h3{font-size:14px}.album-result{gap:9px}.album-result h2{font-size:25px}.album-result>header p{font-size:14px}.result-card{padding:3px}.result-card span{font-size:13px}.result-card img{max-height:80px}.album-result footer{gap:8px}.album-result footer button{font-size:14px;padding:9px}.workshop-sheet{padding:7px}.workshop-sheet>div{padding:14px}.workshop-sheet p{font-size:14px}.workshop-sheet button{font-size:14px}.workshop:fullscreen{min-height:0}.workshop:fullscreen .workshop-content{top:110px}}@media(min-width:651px) and (max-height:550px){.stamp-tools{top:2%}.stamp-tools>strong{font-size:17px}.stamp-tools button{font-size:11px;padding:4px;min-height:35px;min-width:35px}.progress-stamps{top:12%;height:22px}.progress-stamps span{font-size:12px;line-height:17px}.workshop-content{inset:21% 4% 5%}.welcome>h2{font-size:28px;top:-3%}.welcome-cards{height:37%;top:45%}.welcome-cards .picture-card{padding:7px}.picture-card b,.picture-card strong{font-size:16px}.welcome-action p{font-size:12px;margin-bottom:4px}.welcome-action .primary{font-size:22px;padding:6px}.welcome-action .plain{font-size:11px;min-height:26px;padding:3px;margin-top:5px}.welcome-drawers strong{font-size:13px}.question h2{font-size:27px}.question p{font-size:11px;margin:4px}.moving-card{width:100px;height:125px;padding:9px}.workshop .drawer button{font-size:14px}.answer-note>strong{font-size:17px}.answer-note p{font-size:14px;line-height:1.4;margin:6px 0}.answer-note .primary{font-size:13px;padding:7px}.sorting-hint{font-size:12px}.album-result h2{font-size:25px}.album-result>header p{font-size:12px;margin:2px}.album-result{gap:7px}.category-album{padding:4px;border-width:3px;gap:4px}.category-album h3{font-size:13px;margin:1px}.result-card span{font-size:11px}.result-card{padding:2px}.album-result footer button{font-size:13px;padding:6px;min-height:34px}.workshop-sheet>div{padding:12px}.workshop-sheet p{font-size:13px;margin:8px 0}.workshop-sheet h2{font-size:24px;margin:0}.workshop-sheet button{font-size:14px;padding:6px}}
.welcome-drawers .drawer-back{position:absolute;inset:0;z-index:0}.welcome-drawers .drawer-front{position:absolute;inset:0;z-index:3;clip-path:inset(35% 0 0)}.welcome-sample{position:absolute;left:32%;top:-13%;width:36%;height:72%;padding:6px;background:#fff9e9 url('./assets/card.webp') center/100% 100%;z-index:1;transform:rotate(-6deg)}.welcome-sample img{width:100%;height:100%;object-fit:contain}.welcome-drawers strong{top:47%;bottom:auto;height:28%;display:grid;place-items:center;z-index:4}.drawer .drawer-front{clip-path:inset(35% 0 0)}.drawer-label{position:absolute;left:7%;right:7%;top:47%;height:28%;display:grid;place-items:center}.workshop .drawer button{padding:0}

.picture-card{border:3px solid #cfb997}.welcome-sample{border:2px solid #cfb997}

.drawer .drawer-front,.welcome-drawers .drawer-front{clip-path:inset(26% 0 0)}.drawer-label,.welcome-drawers strong{left:25%;right:25%;top:38%;height:25%;line-height:1.1}.welcome-drawers strong{font-size:clamp(12px,1.5cqw,21px)}@media(max-width:650px){.drawer-label,.welcome-drawers strong{font-size:12px}}

.sorting-hint{background:#fff8eae8;border-radius:12px;padding:5px}.drawer{height:30%}.drawer[data-category=animal],.drawer[data-category=vehicle]{top:5%}.drawer[data-category=food],.drawer[data-category=clothes]{bottom:4%}@media(max-width:650px){.drawer{height:21%}.drawer[data-category=animal],.drawer[data-category=food]{top:44%;bottom:auto}.drawer[data-category=vehicle],.drawer[data-category=clothes]{top:74%;bottom:auto}}

.album-cards.few{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr))}.album-cards.few .result-card img{max-height:110px}
