*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{color:#fff2d7;background:#183c40;font-family:Trebuchet MS,Arial,sans-serif}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{cursor:default;opacity:.52}button:focus-visible{outline-offset:3px;outline:3px solid #fff}[hidden]{display:none!important}.studio{height:calc(100dvh - var(--nav-height,0px));isolation:isolate;background:linear-gradient(90deg,#133b46bb,#15343a55 40%,#331e1355),url(/demos/mosaic-muse/assets/world-OSefAadE.webp) 50%/cover;grid-template-rows:54px minmax(0,1fr) 78px;min-height:270px;display:grid;position:relative}.studio:before{content:"";pointer-events:none;z-index:-1;background:radial-gradient(at 90% 55%,#fdb25218,#0000 40%);animation:5s ease-in-out infinite alternate kiln;position:absolute;inset:0}@keyframes kiln{to{opacity:.4}}header{z-index:2;background:linear-gradient(#102f36dd,#163f4588);border-bottom:1px solid #e5c68b66;align-items:center;gap:12px;padding:5px 3%;display:flex}.wordmark{letter-spacing:-1.8px;text-shadow:1px 2px #09272f;font-family:Georgia,serif;font-size:clamp(22px,2.5vw,34px);font-weight:900}.wordmark em{color:#97e8dc;font-style:normal}.header-note{color:#e9d5ab;flex:1;padding-left:15px;font-size:13px}header button{background:#163940bb;border:1px solid #d0b77877;border-radius:50%;width:36px;height:36px;font-size:23px}.atelier{grid-template-columns:minmax(135px,17%) minmax(0,1fr) minmax(120px,20%);align-items:center;gap:18px;width:100%;max-width:1340px;height:100%;min-height:0;margin:auto;padding:14px 24px 5px;display:grid}.palette{background:linear-gradient(130deg,#112d36e8,#23565be8);border:1px solid #bb9b63;border-radius:50px 6px 40px;align-self:center;padding:22px 15px;box-shadow:0 10px 20px #07171966}.palette h2{letter-spacing:2px;color:#cfbd93;text-align:center;margin:0 0 12px;font-size:11px}#profiles{flex-direction:column;gap:8px;display:flex}#profiles button{text-align:left;background:#254d50;border:1px solid #a4bfa433;border-radius:8px;align-items:center;gap:8px;min-height:53px;padding:7px 9px;transition:background .2s,transform .2s;display:flex}#profiles button[aria-pressed=true]{color:#243b3e;background:linear-gradient(130deg,#e2c582,#f6e4ac);border-color:#fff1cd;transform:translate(3px);box-shadow:0 2px #947d4f}#profiles i{font-size:24px;font-style:normal}#profiles b{font-size:15px;display:block}#profiles small{opacity:.85;margin-top:3px;font-size:10px;line-height:1.2;display:block}.selection-tools{text-align:center;grid-template-columns:1fr;gap:4px;padding-top:18px;display:grid}.selection-tools>strong{color:#b4f1df;font-size:27px}.selection-tools>span{letter-spacing:1px;font-size:10px}.selection-tools button{background:0 0;border:0;border-radius:5px;padding:8px 2px;font-size:11px}#random{background:#307777;border:1px solid #80b4ac;margin-top:8px;font-weight:700}#clear{opacity:.8}.workbench{grid-template-rows:26px minmax(100px,1fr) 24px 58px 62px;width:100%;max-width:760px;height:100%;min-height:0;margin:auto;display:grid}.board-top{letter-spacing:1px;color:#fff4d8;justify-content:space-between;padding:2px 6px;font-size:12px;font-weight:700;display:flex}#draw-count{color:#f8d993}#board{perspective:600px;background:linear-gradient(145deg,#b57c41,#ddbc80 45%,#996638);border:3px double #f4deb1;border-radius:11px;grid-template-rows:repeat(5,minmax(0,1fr));grid-template-columns:repeat(8,1fr);gap:7px;min-height:0;padding:12px;display:grid;box-shadow:0 8px #523d31,0 12px 22px #001b2d70}.tile{color:#2b555b;background:linear-gradient(135deg,#e8ddb9,#c9b989);border:1px solid #f4e3b5;border-radius:8px 5px 7px 4px;min-width:0;min-height:0;font-size:clamp(14px,2.1vw,25px);font-weight:800;transition:background .16s,box-shadow .16s,opacity .16s;position:relative;box-shadow:inset 1px 2px 2px #fff7d0,0 3px #9c774a}.tile:after{content:"";pointer-events:none;border:1px solid #fff7d433;border-radius:5px;position:absolute;inset:6px}.tile i{color:#fff5ae;font-size:12px;font-style:normal;display:none;position:absolute;bottom:0;right:2px}.tile.selected{color:#fff6d9;background:linear-gradient(130deg,#35a5a3,#146b79);border-color:#a8fff1;box-shadow:inset 1px 1px #d1ffedaa,0 3px #16545b}.tile.hit{color:#214345;background:linear-gradient(130deg,#fff5b8,#eabb54);border-color:#fff;box-shadow:0 0 15px #fae38b99,inset 0 0 4px #fff}.tile.hit i{color:#8b6529;display:block}.tile.miss{color:#dae1c9;opacity:.7;background:#6d7770;border-color:#9ca58f;box-shadow:inset 0 2px 4px #3d4d49}.tile:disabled{opacity:1}.tile.miss:disabled{opacity:.7}.payout-caption{letter-spacing:1px;color:#f0dbb1;justify-content:space-between;align-items:end;padding:0 4px 3px;font-size:9px;display:flex}.payout-caption span{letter-spacing:0;opacity:.8;font-size:9px}.paytable{grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;display:grid}.paytable>div{background:#103a41ed;border:1px solid #94b8a455;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;gap:3px;display:flex}.paytable small{color:#c1d4c7;font-size:9px}.paytable b{color:#ffe6a7;white-space:nowrap;font-size:clamp(10px,1.35vw,16px)}.paytable span{color:#90bdb6;font-size:9px}.paytable .current{background:#f1d290;border:2px solid #fff1ca;box-shadow:0 0 12px #f6d18266}.paytable .current :is(b,small,span){color:#253b3e}.result{text-align:center;flex-direction:column;justify-content:center;gap:3px;padding:5px 0;display:flex}.result>div{justify-content:center;align-items:center;gap:12px;display:flex}.result span{text-shadow:0 2px 2px #051d28;font-size:clamp(12px,1.35vw,18px);font-weight:800}.result b{color:#ffedb3;text-shadow:0 2px 1px #422c19;font-size:clamp(26px,3vw,38px);line-height:1}.result small{color:#dddcc5;font-size:11px;line-height:1.2}.muse{flex-direction:column;justify-content:end;align-self:end;align-items:center;max-height:100%;padding-bottom:22px;display:flex;position:relative}.muse img{object-fit:contain;transform-origin:50% 90%;filter:drop-shadow(0 12px 8px #10232b88);width:132%;max-height:360px;animation:6s ease-in-out infinite alternate breathe;position:relative}.muse-halo{background:radial-gradient(#ffcd6466,#0000 70%);border-radius:50%;width:120%;height:65%;position:absolute;top:5%}.muse>span{letter-spacing:6px;text-shadow:0 3px #142e36;margin-top:-3px;font-family:Georgia,serif;font-size:23px;font-weight:900}.muse>small{letter-spacing:1px;margin-top:5px;font-size:9px}.mosaic-pieces{gap:3px;margin:0 0 6px;display:flex}.mosaic-pieces i{color:#497578;text-shadow:0 2px #142d37;font-size:25px;font-style:normal;transition:color .2s,filter .2s}.mosaic-pieces i.lit{color:#f5d583;filter:drop-shadow(0 0 5px #fff0ae)}#hit-counter{color:#ffeeaf;margin-top:7px;font-family:Georgia,serif;font-size:38px}#hit-counter small{color:#d6ded1;font-size:20px}@keyframes breathe{to{transform:translateY(-4px)rotate(.5deg)}}footer{z-index:1;background:linear-gradient(#1e464bea,#133239f5);border-top:1px solid #edce9477;justify-content:center;align-items:center;gap:24px;padding:10px 20px;display:flex}footer>div{flex-direction:column;gap:5px;display:flex}footer small{letter-spacing:1.2px;color:#c7d6c7;font-size:10px}footer b{white-space:nowrap;font-size:23px}footer button:not(.primary){background:#16373e;border:1px solid #9bb7a577;border-radius:6px}.stake>span{align-items:center;gap:12px;display:flex}.stake button{width:34px;height:34px;font-size:24px}.stake b{font-size:21px}#speed{min-height:38px;padding:8px 13px;font-size:11px;font-weight:700}.primary{color:#254248;letter-spacing:1px;background:linear-gradient(145deg,#fae6ad,#dfb965);border:1px solid #ffefc7;border-radius:8px;min-height:47px;padding:15px 26px;font-weight:900;box-shadow:0 4px #967042}.primary:hover:not(:disabled){filter:brightness(1.08)}.primary span{vertical-align:middle;margin-right:7px;font-size:23px}#draw{min-width:230px}.intro{z-index:5;background:#1b3e42;grid-template-columns:58% 42%;display:grid;position:absolute;inset:0}.intro-cover{object-fit:cover;object-position:45% center;width:100%;height:100%;-webkit-mask-image:linear-gradient(90deg,#000 85%,#0000);mask-image:linear-gradient(90deg,#000 85%,#0000)}.welcome{background:radial-gradient(at 0,#46736a66,#0000);flex-direction:column;justify-content:center;gap:20px;padding:30px 7% 30px 3%;display:flex}.welcome>small{letter-spacing:1px;color:#d7d8bc;font-size:10px;line-height:1.5}.welcome h1{color:#fbe4ae;margin:0;font-family:Georgia,serif;font-size:clamp(24px,3.2vw,48px);font-weight:400;line-height:1.15}.welcome p{color:#d7e5d8;margin:0;font-size:15px;line-height:1.6}.intro-facts{border-top:1px solid #d2b77b66;border-bottom:1px solid #d2b77b66;gap:22px;padding:12px 0;display:flex}.intro-facts span{letter-spacing:.6px;flex-direction:column;gap:8px;font-size:9px;display:flex}.intro-facts b{color:#b2ebd8;font-family:Georgia,serif;font-size:30px}.welcome .primary{align-self:start;min-width:210px}dialog{color:#eaf0d8;background:linear-gradient(145deg,#1a4c53,#123238);border:1px solid #ddb978;border-radius:15px;width:min(630px,100vw - 24px);max-height:calc(100dvh - 30px);padding:30px;overflow:auto;box-shadow:0 15px 80px #011a2a99}dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#06202bba}dialog h2{color:#f5d897;margin:12px 0 20px;font-family:Georgia,serif;font-size:27px}dialog p{font-size:14px;line-height:1.65}dialog .close{background:#103039;border:1px solid #b7c3a577;border-radius:50%;width:30px;height:30px;font-size:22px;position:absolute;top:12px;right:12px}.rules-table{background:#0a293080;border-radius:8px;gap:10px;padding:15px;display:grid}.rules-table section{flex-direction:column;gap:6px;display:flex}.rules-table b{color:#f2d58e}.rules-table span{font-size:12px;line-height:1.6}details{margin-top:20px;font-size:12px}@media (width>=1400px){.atelier{gap:25px;padding-top:28px;padding-bottom:18px}.workbench{grid-template-rows:30px minmax(0,1fr) 28px 70px 78px}#board{gap:12px;padding:17px}.muse img{max-height:480px}}@media (height<=590px) and (width>=701px){.studio{grid-template-rows:43px minmax(0,1fr) 63px}.atelier{grid-template-columns:142px minmax(0,1fr) 135px;gap:12px;padding:7px 18px 0}.palette{border-radius:30px 5px;padding:14px 8px}.palette h2{margin-bottom:6px;font-size:9px}#profiles button{min-height:43px;padding:4px 6px}#profiles small{font-size:8px}#profiles b{font-size:13px}.selection-tools{gap:1px;padding-top:7px}.selection-tools>strong{font-size:23px}.selection-tools button{padding:5px}.workbench{grid-template-rows:20px minmax(80px,1fr) 20px 47px 47px}#board{border-width:2px;gap:5px;padding:7px}.tile{border-radius:5px;font-size:19px}.tile:after{inset:3px}.paytable b{font-size:11px}.paytable small,.paytable span{font-size:8px}.muse img{max-height:240px}.muse{padding-bottom:12px}.muse>span{font-size:19px}.muse>small{font-size:8px}#hit-counter{margin-top:4px;font-size:29px}.mosaic-pieces i{font-size:20px}.result b{font-size:27px}.result small{font-size:10px}.result span{font-size:12px}footer{gap:23px;padding:6px 16px}footer b{font-size:21px}footer .primary{min-height:42px;padding:9px 20px}footer small{font-size:9px}#draw{min-width:205px}.welcome{gap:13px;padding-top:20px;padding-bottom:20px}.welcome p{font-size:13px}.intro-facts{padding:8px 0}.intro-facts b{font-size:25px}.welcome h1{font-size:29px}}@media (width<=700px){.studio{grid-template-rows:46px minmax(0,1fr) 112px}header{gap:8px;padding:5px 12px}.wordmark{font-size:25px}.header-note{display:none}header button:first-of-type{margin-left:auto}header button{width:31px;height:31px;font-size:20px}.atelier{grid-template-rows:95px minmax(0,1fr);grid-template-columns:1fr;gap:5px;padding:7px 10px 0;display:grid;position:relative}.palette{box-shadow:none;background:0 0;border:0;grid-template-columns:1fr;align-self:stretch;padding:0;display:grid}.palette h2{display:none}#profiles{flex-direction:row;gap:6px}#profiles button{flex:1;gap:4px;min-height:44px;padding:7px 6px}#profiles button[aria-pressed=true]{transform:translateY(-1px)}#profiles i{font-size:20px}#profiles b{font-size:12px}#profiles small{font-size:8px}.selection-tools{align-items:center;gap:6px;padding:0 6px;display:flex}.selection-tools>strong{font-size:20px}.selection-tools>span{font-size:9px}#random{margin:0 0 0 auto;padding:7px 10px;font-size:9px}#clear{font-size:10px}.workbench{grid-template-rows:22px minmax(140px,1fr) 23px 57px 70px}.muse{display:none}#board{border-width:2px;gap:6px;padding:8px}.tile{font-size:18px}.paytable{gap:3px}.paytable b{font-size:10px}.paytable small,.paytable span{font-size:8px}.result>div{gap:9px}.result span{font-size:12px}.result b{font-size:30px}.result small{font-size:11px}footer{grid-template-rows:36px 43px;grid-template-columns:1fr 1fr 75px;gap:10px;padding:8px 13px;display:grid}footer>div:first-child{grid-area:1/1;gap:2px}footer b{font-size:19px}footer small{font-size:8px}.stake{grid-area:1/2/auto/4;align-items:end;gap:2px}.stake>small{display:none}.stake>span{gap:13px}.stake button{width:31px;height:31px}.stake b{font-size:19px}#draw{grid-area:2/1/auto/3;min-width:0;min-height:38px;padding:7px 12px;font-size:12px}#speed{grid-area:2/3;padding:5px;font-size:9px}.intro{grid-template-rows:47% 53%;grid-template-columns:1fr}.intro-cover{object-position:center 40%;-webkit-mask-image:linear-gradient(#000 85%,#0000);mask-image:linear-gradient(#000 85%,#0000)}.welcome{gap:12px;padding:4px 25px 18px}.welcome h1{font-size:29px}.welcome p{font-size:13px;line-height:1.4}.welcome>small{font-size:8px}.intro-facts{gap:26px;padding:8px 0}.intro-facts b{font-size:24px}.intro-facts span{gap:3px;font-size:8px}.welcome .primary{align-self:stretch;min-height:43px;padding:12px 20px}}@media (height<=410px) and (width>=701px){.studio{grid-template-rows:33px minmax(0,1fr) 48px}.atelier{grid-template-columns:125px minmax(0,1fr) 100px;gap:10px;padding-top:3px}.wordmark{font-size:22px}header button{width:26px;height:26px;font-size:16px}.header-note{font-size:10px}.workbench{grid-template-rows:16px minmax(65px,1fr) 16px 35px 35px}.board-top{font-size:9px}.palette{padding:7px}.palette h2{display:none}#profiles{gap:4px}#profiles button{min-height:32px}#profiles i{font-size:18px}#profiles small{font-size:7px}.selection-tools{grid-template-columns:1fr 1fr;padding-top:5px;display:grid}.selection-tools>span{font-size:7px}#random{grid-column:1/3;margin-top:0;font-size:9px}#clear{grid-column:1/3;padding:1px;font-size:9px}.muse img{max-height:130px}.muse>small{display:none}.mosaic-pieces i,.muse>span{font-size:14px}#hit-counter{font-size:22px}.tile{box-shadow:none;font-size:13px}.tile i{font-size:8px}.paytable small,.paytable span{font-size:7px}.paytable b{font-size:9px}.paytable>div{gap:1px}#board{gap:4px;padding:5px;box-shadow:0 3px #503b29}.payout-caption,.payout-caption span{font-size:7px}.result b{font-size:20px}.result span{font-size:10px}.result small,footer small{font-size:8px}footer b,.stake b{font-size:17px}.stake button{width:26px;height:26px;font-size:18px}#speed{min-height:30px;font-size:9px}footer .primary{min-height:32px;padding:5px 12px;font-size:11px}#draw{min-width:180px}.welcome{gap:8px}.welcome h1{font-size:23px}.welcome p{font-size:11px}.welcome .primary{min-height:32px;padding:8px 15px;font-size:11px}.welcome>small{font-size:8px}.intro-facts{padding:4px}.intro-facts b{font-size:20px}.intro-facts span{gap:3px;font-size:7px}}@media (prefers-reduced-motion:reduce){*,:before{transition:none!important;animation:none!important}}#app{padding-top:var(--nav-height,0px)}.intro-cover{object-fit:contain;align-self:center;height:auto;max-height:100%;-webkit-mask-image:none;mask-image:none}.intro{background:linear-gradient(90deg,#153e41d9,#163b40),url(/demos/mosaic-muse/assets/world-OSefAadE.webp) 50%/cover}@media (width<=700px){.intro-cover{object-fit:contain;height:100%;max-height:100%}}.demo-navigation{z-index:100;background:#0c1120;border-bottom:1px solid #ffffff20;justify-content:space-between;align-items:center;height:44px;padding:0 16px;font:600 14px/1 system-ui,sans-serif;display:flex;position:fixed;inset:0 0 auto}.demo-navigation a{color:#f4e5b8;letter-spacing:.04em;align-items:center;min-width:44px;min-height:44px;text-decoration:none;display:inline-flex}.demo-navigation a:hover{color:#fff}.demo-navigation a:focus-visible{outline-offset:-4px;outline:2px solid #f4e5b8}.has-demo-navigation .cabinet{top:calc(50% + 22px)}.has-demo-navigation.fluid-demo #app{height:calc(100dvh - 44px);margin-top:44px}.has-demo-navigation.fluid-demo .cabinet{width:min(100vw,177.778dvh - 78.2222px);height:min(100dvh - 44px,56.25vw);top:auto}@media (width<=620px) and (orientation:portrait){.has-demo-navigation.fluid-demo .cabinet{width:100vw;height:calc(100dvh - 44px)}}