@font-face{font-family:Salon;src:url('assets/Abcursiva.ttf') format('truetype');font-display:swap}*{box-sizing:border-box}body{margin:0;padding:24px 16px;background:#faf3e7;color:#42264c;font-family:system-ui,sans-serif}main{max-width:1150px;margin:auto}header{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:12px;font-weight:800;letter-spacing:3px;color:#865534}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:4px solid #df9b20;outline-offset:4px}.quiet{background:transparent;border:1px solid #d7bdb0;border-radius:30px;padding:9px 20px;color:#58345f}h1{font-family:Salon,cursive;font-weight:400;line-height:1.4}#welcome{text-align:center;padding:20px 0 40px}#welcome h1{font-size:clamp(44px,6vw,67px);margin:0}#welcome>p{line-height:1.6}.flower{font-size:80px!important;color:#df8a16;margin:8px}.mode-cards{display:flex;justify-content:center;gap:18px;margin:30px auto;max-width:700px}.mode-cards button{width:50%;background:#fffdf8;border:2px solid #e3cfae;border-radius:22px;padding:26px 22px;text-align:left;color:#492254;box-shadow:0 7px 0 #e9dcc7}.mode-cards button:hover{border-color:#b76d29;transform:translateY(-2px)}.mode-cards b{font-size:20px;display:block;margin-bottom:12px}.mode-cards span{font-size:15px;line-height:1.5}.note,.tip{font-size:13px;color:#77665e}.heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.heading h1{font-size:36px;margin:18px 0 4px}.heading #count{font-size:13px;font-weight:750}progress{width:100%;height:9px;accent-color:#d88b1e;margin-bottom:20px}.workspace{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}.altar-panel{background:#f0e0c3;border-radius:24px;padding:12px 10px 6px;border:1px solid #e5cd9f}#altar{position:relative;aspect-ratio:1.12;isolation:isolate;overflow:hidden;border-radius:15px;background:radial-gradient(ellipse at 50% 25%,#fff5da,#eddbb8)}.arch{position:absolute;left:22%;top:4%;width:56%;height:80%;border:15px solid #dc8c20;border-bottom:0;border-radius:50% 50% 0 0;opacity:.42}.tier{position:absolute;border-radius:5px 5px 0 0;background:linear-gradient(#fbf8e9 0 13%,#764081 14% 80%,#d0923c 81%);box-shadow:0 -3px 0 #fffaf0}.top{left:25%;top:38%;width:50%;height:26%}.middle{left:8%;top:61%;width:84%;height:23%;background:linear-gradient(#fff9e8 0 12%,#c26638 13% 80%,#6b3a77 81%)}.bottom{left:2%;top:82%;width:96%;height:17%}.floor{position:absolute;bottom:0;height:3%;width:100%;background:#dca94c}#placed{position:absolute;inset:0}.piece{position:absolute;transform:translate(-50%,-100%);width:19%;aspect-ratio:1;border:0;padding:0;background:transparent;filter:none}.piece img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal}.piece.paper{width:62%;transform:translate(-50%,-35%)}#target{position:absolute;transform:translate(-50%,-100%);width:17%;aspect-ratio:1;background:#fff9decc;border:3px dashed #99562d;border-radius:18px;color:#88452a;font-size:28px;z-index:5;animation:pulse 1s infinite alternate}#target span{pointer-events:none}#action{font-size:13px;min-height:35px;margin:8px;text-align:center;font-weight:650}.instruction{background:#fffdf8;border:1px solid #e4d7c1;border-radius:18px;padding:17px;margin-bottom:15px}.instruction h2{font-size:20px;margin:7px 0 12px}.instruction>span{font-size:11px;font-weight:800;letter-spacing:1px;color:#9b5b20}.audio{background:#ede3f0;color:#593262;border:0;border-radius:30px;padding:11px 18px;font-size:14px;font-weight:700}#options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:410px;overflow:auto;padding:4px}.option{background:#fffdf8;border:2px solid #e0d0b8;border-radius:15px;padding:6px 4px;color:#492254;min-width:0}.option img{width:100%;height:75px;object-fit:contain}.option span{font-family:Salon,cursive;font-size:24px;display:block;line-height:1.3;overflow-wrap:normal}.option.selected{border-color:#8b4e9b;background:#f1e5f5;box-shadow:0 0 0 2px #bb92c4}.option:hover{border-color:#8b4e9b}.option.wrong{background:#fff0dc;border-color:#bb6d3a}.option:disabled{opacity:.45;cursor:default}.primary{background:#653474;color:white;border:0;border-radius:14px;padding:14px 24px;font-weight:750;width:100%}#message{font-size:15px;line-height:1.5;min-height:52px;padding:10px 4px}details{font-size:13px;line-height:1.6;margin-top:14px}summary{cursor:pointer;color:#70547b}footer{font-size:12px;color:#796a65;margin-top:30px;border-top:1px solid #e2d1b8;padding-top:20px}footer details{max-width:760px}footer a{color:inherit}#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:10}#confetti i{position:absolute;top:-20px;width:9px;height:15px;animation:fall 1.9s ease-in forwards}@keyframes fall{to{transform:translateY(105vh) rotate(650deg)}}@keyframes pulse{to{box-shadow:0 0 0 6px #f3be5944}}[hidden]{display:none!important}@media(max-width:720px){body{padding:16px 10px}.workspace{grid-template-columns:1fr;gap:12px}.heading h1{font-size:29px}.heading #count{font-size:12px}.altar-panel{max-width:520px;width:100%;margin:auto}#altar{aspect-ratio:1.22}#action{min-height:20px;margin:5px;font-size:12px}progress{margin-bottom:10px}.instruction{padding:12px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px}.instruction>span{grid-column:1/-1}.instruction h2{margin:4px 0;font-size:17px}.audio{font-size:12px;padding:10px}#options{max-height:245px;grid-template-columns:repeat(3,minmax(0,1fr))}.option img{height:65px}.option span{font-size:23px}.mode-cards{flex-direction:column}.mode-cards button{width:100%}#welcome{padding:10px 12px 30px}.flower{font-size:60px!important}#message{min-height:35px;padding:8px 4px}.tip{font-size:12px}#transcript{font-size:14px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}

.piece{mix-blend-mode:normal}

.option.long span{font-size:19px}.piece.paper{height:22%;aspect-ratio:auto;transform:translate(-50%,-35%)}

.piece.paper{height:13%;transform:translate(-50%,-70%)}

/* Anchor each object by its visible base on the horizontal shelf. */
.tier{background:linear-gradient(#fff8e7 0 20%,#764081 21% 85%,#d0923c 86%)}
.middle{background:linear-gradient(#fff8e7 0 20%,#c26638 21% 85%,#6b3a77 86%)}
.piece{width:15%;height:auto;aspect-ratio:auto;transform:translate(-50%,-100%);isolation:isolate;}
.piece img{display:block;width:100%;height:auto;position:relative;z-index:1;}
.piece::after{content:"";position:absolute;width:75%;height:6px;left:12.5%;bottom:-3px;background:radial-gradient(ellipse,#4a261b55,transparent 70%);z-index:0;}
.piece.paper{width:54%;height:13%;transform:translate(-50%,-70%)}
.piece.paper img{height:100%;object-fit:contain}.piece.paper::after{display:none}
#target{width:15%;transform:translate(-50%,-100%)}

.option.long span{font-size:17px}.option[data-id="2"] span,.option[data-id="5"] span{font-size:18px}