:root{color-scheme:light;--ink:#304f48;--green:#436c5a;--paper:#fffdf7;--peach:#f6dfc4}*{box-sizing:border-box}body{margin:0;background:#f5f1e7;color:var(--ink);font-family:'Nunito','Yu Gothic',sans-serif}button,select{font:inherit}button,summary,select{cursor:pointer}button{min-height:46px;border:1px solid #d9dfd1;border-radius:16px;background:var(--paper);color:var(--ink);padding:11px 17px;font-weight:800;box-shadow:0 3px 0 #d6ddcd;transition:background .15s,box-shadow .15s}button:hover:not(:disabled){background:#f1f5e9}button:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #c18535;outline-offset:4px}button[aria-pressed=true],.primary{background:var(--green);color:white;border-color:var(--green)}button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}.studio{max-width:1220px;margin:auto;padding:28px 24px 44px}.eyebrow{font-size:11px;letter-spacing:3px;color:#74866d;font-weight:800}.intro{display:flex;align-items:center;justify-content:space-between;gap:22px}h1{font-size:clamp(26px,4vw,40px);letter-spacing:.05em;margin:10px 0}#description{line-height:1.8;margin:0 0 18px;color:#68796d}.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}.settings{margin:17px 0;padding:14px 18px;border:1px solid #dbdfd1;border-radius:18px;background:#fffdf8}.settings summary{font-weight:700}.settings .row{margin-top:15px}.settings select{padding:10px;max-width:100%;border:1px solid #bdccba;border-radius:12px;background:white;color:var(--ink)}.progress-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:20px 0 9px}.progress-head h2{font-size:20px;margin:0}.meter{height:7px;background:#e0e5d8;border-radius:9px;overflow:hidden;margin-bottom:17px}.meter span{display:block;height:100%;background:#d49c56;transition:width .2s}#status{min-height:28px;font-size:14px;color:#697865;margin:10px 0}.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:22px;align-items:start}.frame{padding:12px;background:#ead6af;border:2px solid #e2cda4;border-radius:23px;box-shadow:0 12px 25px #76683e10;position:relative;overflow:hidden}.board{display:grid;gap:2px;border-radius:13px;overflow:hidden;background:#d5c39c;position:relative}.slot{padding:0;border:0;border-radius:2px;box-shadow:none;aspect-ratio:var(--piece-ratio);background:#f4ead5;position:relative;overflow:hidden;min-height:0}.slot:hover:not(:disabled){background:#e6e1c5}.slot .tile-art{opacity:.18;filter:saturate(.5)}.slot.filled .tile-art{opacity:1;filter:none}.slot .dot{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;color:#b9ae8d}.tile-art{display:block;width:100%;height:100%;background-image:var(--art);background-size:var(--bg-size);background-position:var(--bg-pos);pointer-events:none}.tray-panel{border-radius:22px;background:#eee4d1;padding:18px;border:1px solid #e2d8c7}.tray-title{margin:0 0 13px;font-size:16px}.tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.piece{aspect-ratio:var(--piece-ratio);padding:0;min-height:0;border-radius:9px;border:3px solid #fff9ea;box-shadow:0 4px 0 #c1b28f,0 7px 13px #755f3422;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.piece[aria-pressed=true]{outline:4px solid #c39142;outline-offset:2px}.piece:disabled{visibility:hidden}.piece.dragging{opacity:.3}.preview{margin-top:18px;background:#fffaf0;padding:10px;border-radius:14px}.preview summary{font-size:13px;font-weight:700}.preview img{display:block;width:100%;margin-top:10px;border-radius:8px}.hint-target{outline:4px solid #e6b25b!important;outline-offset:-4px;z-index:1}.ghost{position:fixed;pointer-events:none;z-index:10000;opacity:.94;border:3px solid #fffdf6;border-radius:10px;box-shadow:0 18px 30px #263b3a50;transform:translate(-50%,-50%) rotate(-3deg);overflow:hidden}.snap{animation:snap .3s ease-out}@keyframes snap{50%{filter:brightness(1.3)}100%{filter:brightness(1)}}.finished-image{display:block;width:100%;border-radius:12px}.frame.finished .board{display:none}.scene-life{position:absolute;inset:0;pointer-events:none;overflow:hidden}.scene-life i{position:absolute;width:12px;height:12px;border-radius:50% 0 50% 50%;background:#f4cc6c;left:var(--x);top:var(--y);animation:float 4s ease-in-out infinite;animation-delay:var(--delay);box-shadow:0 0 10px #fff7bf}.scene-life.ocean i{border:2px solid #ffffffaa;background:#c9effb44;border-radius:50%;animation:bubble 4s ease-in-out infinite}@keyframes float{50%{transform:translate(18px,-26px) rotate(90deg)}}@keyframes bubble{0%{opacity:0;transform:translateY(40px)}50%{opacity:1}100%{opacity:0;transform:translateY(-110px)}}.friend-pop{position:absolute;bottom:0;right:8%;width:26%;filter:drop-shadow(0 5px 5px #53645630);pointer-events:none;animation:hello 1.2s ease-in-out 2}@keyframes hello{0%,100%{transform:translateY(15%)}45%{transform:translateY(-12%) rotate(-7deg)}65%{transform:translateY(-12%) rotate(7deg)}}.celebrate{background:#e6ecda;padding:22px;border:1px solid #cddbbf;border-radius:20px;margin-top:18px}.celebrate h2{margin:0 0 8px;font-size:24px}.celebrate p{line-height:1.8}.celebrate .row{margin-top:16px}.album{margin-top:25px;background:var(--paper);padding:20px;border-radius:20px}.album summary{font-weight:800}.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.album-card{border:1px solid #dddccc;padding:12px;border-radius:15px;text-align:center}.album-card img{width:100%;aspect-ratio:1.5;object-fit:cover;border-radius:9px}.unknown{aspect-ratio:1.5;background:#eeeee2;display:grid;place-items:center;border-radius:9px;font-size:45px;color:#a5b49b}.badges{display:flex;justify-content:center;gap:5px;flex-wrap:wrap;margin-top:9px}.badge{padding:5px 8px;border-radius:20px;background:#efefea;font-size:11px}.badge.earned{background:#f4dfac;color:#6c5020}.save-note{font-size:13px;color:#6f7c6c;line-height:1.8}.confirm{margin-top:15px;padding:18px;background:#fbefdd;border-radius:14px}.shadow-board{grid-template-columns:repeat(3,1fr);background:#f7f1df;gap:12px;padding:14px}.shadow-board .slot{aspect-ratio:1;background:#eee6d1;border-radius:18px}.shadow-art{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.slot:not(.filled) .shadow-art{filter:brightness(0);opacity:.2}.shadow-mode .piece{aspect-ratio:1;background:#fffdf5}.tip{font-size:13px;line-height:1.8;color:#7c7864;margin-bottom:0}.art-error{background:#fff1d8;padding:16px;border-radius:12px}.language-bar{background:#eeeadd!important}@media(max-width:760px){.studio{padding:20px 15px}.intro{display:block}.workspace{grid-template-columns:1fr}.tray-panel{padding:14px}.tray{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.shadow-mode .tray{grid-template-columns:repeat(3,1fr)}.frame{padding:9px}.preview img{max-width:230px}.album-grid{grid-template-columns:1fr}.album-card{max-width:360px;width:100%;margin:auto}.progress-head h2{font-size:18px}.row button{padding:10px 13px;font-size:14px}.piece{border-width:2px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}body.no-motion *{animation:none!important;transition:none!important}

.is-complete .tray-panel{display:none}.is-complete .workspace{grid-template-columns:minmax(0,800px);justify-content:center}.piece:hover:not(:disabled){box-shadow:0 5px 0 #baa77e,0 10px 18px #755f3430}.slot.hint-target .tile-art{opacity:.55}

button[aria-pressed=true]:hover:not(:disabled),button.primary:hover:not(:disabled){background:#365b4a;color:white}.piece[aria-pressed=true]:hover:not(:disabled){background:var(--paper)}