@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap";:root{color:#20312f;font-synthesis:none;background:#e8ede6;font-family:Manrope,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer}.target{border:1px solid #e7becb;opacity:1!important;background-color:#fffdfd!important;background-image:repeating-linear-gradient(90deg,#0000 0 calc(25% - 1px),#e7becb calc(25% - 1px) 25%),repeating-linear-gradient(#0000 0 calc(50% - 1px),#e7becb calc(50% - 1px) 50%)!important;background-size:100% 100%!important;inset:30% 20%!important}.piece{width:15%!important;height:20%!important}.music-sky{z-index:2!important;opacity:.3!important}.music-sky span{font-size:32px!important}.music-sky span:nth-child(11){animation-delay:-12s;top:34%;left:9%}.music-sky span:nth-child(12){animation-delay:-7s;top:39%;left:38%}.music-sky span:nth-child(13){animation-delay:-14s;top:62%;left:52%}.music-sky span:nth-child(14){animation-delay:-2s;top:29%;left:66%}.music-sky span:nth-child(15){animation-delay:-9s;top:43%;left:88%}.music-sky span:nth-child(16){animation-delay:-5s;top:91%;left:47%}.app-shell{isolation:isolate;position:relative;overflow:hidden;background:#f8e1e9!important}.topbar,.left-panel,.right-panel{background:#fff9fa!important;border-color:#e7becb!important}.brand{color:#73394d!important}.brand b{background:#d9587b!important}.quiet{color:#73394d!important;border-color:#e7becb!important}.workspace{position:relative;background-color:#f4cfdc!important;background-image:linear-gradient(#eab8c9 1px,#0000 1px),linear-gradient(90deg,#eab8c9 1px,#0000 1px)!important}.play-view,.studio{z-index:1;position:relative}.music-sky{z-index:0;pointer-events:none;color:#cf7894;opacity:.38;position:absolute;inset:72px 0 0;overflow:hidden}.music-sky span{font-family:Fraunces,serif;font-size:26px;animation:14s ease-in-out infinite alternate drift;position:absolute}.music-sky span:first-child{animation-delay:-2s;top:8%;left:4%}.music-sky span:nth-child(2){animation-delay:-8s;top:56%;left:17%}.music-sky span:nth-child(3){animation-delay:-4s;top:18%;left:32%}.music-sky span:nth-child(4){animation-delay:-10s;top:76%;left:43%}.music-sky span:nth-child(5){animation-delay:-6s;top:10%;left:58%}.music-sky span:nth-child(6){animation-delay:-1s;top:49%;left:70%}.music-sky span:nth-child(7){animation-delay:-11s;top:17%;left:83%}.music-sky span:nth-child(8){animation-delay:-5s;top:67%;left:92%}.music-sky span:nth-child(9){animation-delay:-9s;top:87%;left:24%}.music-sky span:nth-child(10){animation-delay:-3s;top:84%;left:78%}.piece.locked{width:15%!important;height:20%!important;box-shadow:none!important;border:0!important;border-radius:0!important}.piece.locked:hover{box-shadow:none!important}@keyframes drift{0%{transform:translate(0,0)rotate(-8deg)}to{transform:translate(22px,-30px)rotate(9deg)}}@media (prefers-reduced-motion:reduce){.music-sky span{animation:none}}@media (width<=800px){.topbar{z-index:3;gap:8px;height:auto;min-height:64px;padding:10px 14px;position:relative}.brand{white-space:nowrap;min-width:0;font-size:14px}.brand b{flex:0 0 26px;width:26px;height:26px}nav{gap:0;margin-left:auto;position:static;transform:none}nav button{padding:8px 7px;font-size:11px}.quiet{display:none}.play-view{flex-direction:column;min-height:calc(100svh - 64px);display:flex}.workspace{order:1;min-height:0;padding:18px 10px 20px}.workspace-heading{margin:0 4px 10px}.stage{aspect-ratio:1/1.12;border-width:6px;width:100%;min-height:330px}.target{inset:30% 20%!important}.piece{width:15%!important;height:20%!important}.left-panel{border:0;border-top:1px solid #e7becb;order:2;padding:16px 14px}.left-panel h1,.left-panel .muted{display:none}.board-list{scrollbar-width:thin;gap:8px;margin:0;padding-bottom:2px;display:flex;overflow-x:auto}.board-item{min-width:140px;padding:6px;font-size:11px}.board-item i{width:30px}.right-panel{border:0;border-top:1px solid #e7becb;order:3;padding:16px 14px 24px}.right-panel .preview{display:none}.right-panel .muted{margin:0 0 12px}.studio{padding:42px 16px}.studio-grid{grid-template-columns:1fr;gap:24px;margin-top:26px}.form{padding:20px}.mockup{min-height:250px;box-shadow:8px 8px #e55d39}.music-sky{inset:64px 0 0}.music-sky span{font-size:24px!important}}.rotate-controls{grid-template-columns:1fr 1fr;gap:8px;display:grid}.rotate-controls button{color:#183d38;background:#f8f7f1;border:1px solid #bfc9c0;border-radius:3px;font-size:22px;line-height:30px}.rotate-controls button:disabled{color:#aab5ac}.piece.locked{z-index:4;pointer-events:none;box-shadow:none}.piece.locked span{background:#d49b25}.win-backdrop{z-index:20;pointer-events:none;display:block;position:fixed;top:88px;right:18px}.win-modal{text-align:center;pointer-events:auto;background:#fff9fa;border:1px solid #e7becb;width:min(280px,100vw - 36px);padding:20px;box-shadow:8px 8px #e8a0b7}.win-modal h2{color:#73394d;margin:8px 0;font:500 32px Fraunces,serif}.win-modal p:not(.eyebrow){color:#687872;margin:0 0 16px;font-size:12px;line-height:1.5}@media (width<=800px){.win-backdrop{top:74px;left:12px;right:12px}.win-modal{width:auto;padding:16px}.win-modal h2{font-size:28px}.win-modal .primary{padding:10px}}.app-shell{background:#e8ede6;min-height:100vh}.topbar{background:#f8f7f1;border-bottom:1px solid #bfc9c0;justify-content:space-between;align-items:center;height:72px;padding:0 32px;display:flex}.brand{color:#183d38;background:0 0;border:0;align-items:center;gap:10px;font:500 20px Fraunces,serif;display:flex}.brand b{color:#f8f7f1;background:#e55d39;border-radius:4px;place-items:center;width:30px;height:30px;display:grid}nav{gap:8px;display:flex;position:absolute;left:50%;transform:translate(-50%)}nav button,.quiet{color:#667771;background:0 0;border:0;padding:10px 14px;font-size:13px;font-weight:700}nav .active{color:#183d38;border-bottom:2px solid #e55d39}.quiet{color:#183d38;border:1px solid #bfc9c0;border-radius:4px}.play-view{grid-template-columns:250px minmax(450px,1fr) 250px;min-height:calc(100vh - 72px);display:grid}.left-panel,.right-panel{background:#f8f7f1;padding:36px 24px}.left-panel{border-right:1px solid #bfc9c0}.right-panel{border-left:1px solid #bfc9c0}.eyebrow,.workspace-heading span,.panel-heading span,.count span{letter-spacing:1.3px;color:#7c8981;font:500 10px DM Mono,monospace}h1{color:#183d38;margin:10px 0 15px;font:500 34px/1.05 Fraunces,serif}.muted,.intro>p{color:#687872;font-size:13px;line-height:1.65}.board-list{gap:8px;margin-top:35px;display:grid}.board-item{color:#48605a;text-align:left;background:0 0;border:1px solid #0000;align-items:center;gap:10px;padding:8px;font-size:12px;display:flex}.board-item.selected{color:#183d38;background:#e0e7dc;border-color:#c8d3c8;font-weight:700}.board-item i{aspect-ratio:1;background-position:50%;background-size:cover;border-radius:2px;width:38px}.workspace{background-color:#d6dfd6;background-image:linear-gradient(#c7d2c8 1px,#0000 1px),linear-gradient(90deg,#c7d2c8 1px,#0000 1px);background-size:28px 28px;padding:28px clamp(20px,4vw,64px) 42px}.workspace-heading,.panel-heading{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.workspace-heading strong{color:#183d38;font:500 12px DM Mono,monospace}.stage{aspect-ratio:1.24;touch-action:none;background:#82968a;border:10px solid #f8f7f1;width:min(100%,780px);margin:auto;position:relative;overflow:hidden;box-shadow:0 18px 30px #40574c44}.target{opacity:.2;filter:grayscale(.4);background-position:50%;background-size:cover;position:absolute;inset:0}.piece{z-index:2;transform-origin:50%;touch-action:none;background-repeat:no-repeat;border:2px solid #f8f7f1;border-radius:3px;width:23%;height:43%;padding:0;position:absolute;box-shadow:0 6px 12px #19332c55}.piece:hover,.selected-piece{z-index:5;box-shadow:0 0 0 3px #e55d39,0 12px 20px #19332c88}.piece span{color:#fff;background:#183d38cc;padding:2px 4px;font:500 9px DM Mono,monospace;position:absolute;bottom:5px;right:5px}.icon{color:#183d38;background:#e0e7dc;border:0;border-radius:3px;width:30px;height:30px;font-size:20px}.preview{aspect-ratio:1.45;background-position:50%;background-size:400%;border:6px solid #e0e7dc;place-items:center;margin-bottom:26px;display:grid}.preview span{color:#fff;text-shadow:0 2px 8px #000;font:500 26px DM Mono,monospace}.control{color:#52645e;gap:9px;margin:18px 0;font-size:12px;font-weight:700;display:grid}.control span{justify-content:space-between;display:flex}.control output{color:#e55d39;font:500 11px DM Mono,monospace}.control input{accent-color:#e55d39;width:100%}.primary{color:#f8f7f1;background:#183d38;border:0;border-radius:3px;width:100%;padding:12px;font-size:12px;font-weight:700}.link-note{color:#7c8981;margin-top:16px;font-size:10px}.link-note code{color:#52645e;font-family:DM Mono,monospace}.studio{max-width:1060px;margin:auto;padding:80px 30px}.intro{max-width:490px}.intro>p{margin:0}.studio-grid{grid-template-columns:1fr 1.1fr;gap:40px;margin-top:40px;display:grid}.form{background:#f8f7f1;border:1px solid #bfc9c0;padding:28px}.form label{color:#52645e;gap:8px;font-size:11px;font-weight:700;display:grid}.form label input{border:1px solid #bfc9c0;border-radius:2px;width:100%;padding:12px}.drop{color:#687872;text-align:center;background:#edf1e9;border:1px dashed #8ea196;justify-items:center;gap:8px;margin:22px 0;padding:34px 16px;display:grid;position:relative}.drop.over{background:#fbe7dd;border-color:#e55d39}.drop input{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.drop strong{color:#183d38;font-size:14px}.drop span{font-size:11px}.count{border-block:1px solid #d5ddd4;align-items:baseline;gap:12px;margin-bottom:22px;padding:15px 0;display:flex}.count b{color:#e55d39;font:500 28px Fraunces,serif}.primary:disabled{color:#9aaba2;cursor:not-allowed;background:#cbd4cb}.mockup{background:#183d38;min-height:340px;position:relative;overflow:hidden;box-shadow:15px 15px #e55d39}.image{background-position:50%;background-size:cover;position:absolute;inset:0}.image.empty{color:#c5d0c7;background:#355d55;place-items:center;font:500 14px DM Mono,monospace;display:grid}.grid{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(4,1fr);display:grid;position:absolute;inset:0}.grid span{color:#f8f7f1;text-shadow:0 1px 4px #000;border:1px solid #f8f7f188;place-items:end start;padding:8px;font:500 10px DM Mono,monospace;display:grid}@media (width<=800px){.topbar{padding:0 16px}.brand{font-size:16px}nav{margin-left:auto;position:static;transform:none}.play-view{grid-template-columns:1fr}.left-panel{border-right:0;padding:24px}.board-list{margin-top:0;display:flex;overflow-x:auto}.board-item{min-width:140px}.workspace{min-height:500px;padding:22px 14px}.right-panel{border-top:1px solid #bfc9c0;border-left:0;padding:24px}.studio-grid{grid-template-columns:1fr}.mockup{min-height:250px}.topbar{z-index:3;gap:8px;height:auto;min-height:64px;padding:10px 14px;position:relative}.brand{white-space:nowrap;min-width:0;font-size:14px}.brand b{flex:0 0 26px;width:26px;height:26px}nav{gap:0;margin-left:auto;position:static;transform:none}nav button{padding:8px 7px;font-size:11px}.quiet{display:none}.play-view{flex-direction:column;min-height:calc(100svh - 64px);display:flex}.workspace{order:1;min-height:0;padding:18px 10px 20px}.workspace-heading{margin:0 4px 10px}.stage{aspect-ratio:1/1.12;border-width:6px;width:100%;min-height:330px}.target{inset:30% 20%!important}.piece{width:15%!important;height:20%!important}.left-panel{border:0;border-top:1px solid #e7becb;order:2;padding:16px 14px}.left-panel h1,.left-panel .muted{display:none}.board-list{scrollbar-width:thin;gap:8px;margin:0;padding-bottom:2px;display:flex;overflow-x:auto}.board-item{min-width:140px;padding:6px;font-size:11px}.board-item i{width:30px}.right-panel{border:0;border-top:1px solid #e7becb;order:3;padding:16px 14px 24px}.right-panel .preview{display:none}.right-panel .muted{margin:0 0 12px}.studio{padding:42px 16px}.studio-grid{grid-template-columns:1fr;gap:24px;margin-top:26px}.form{padding:20px}.mockup{min-height:250px;box-shadow:8px 8px #e55d39}.music-sky{inset:64px 0 0}.music-sky span{font-size:24px!important}}