*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{color:#203b40;background:#152b30;font-family:Trebuchet MS,Arial,sans-serif}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.48}button:focus-visible{outline-offset:4px;outline:3px solid #de4b34}[hidden]{display:none!important}.garage{isolation:isolate;background:#89a9a4 url(/demos/rivet-rally/assets/garage-tQ_Jhqvy.png) 50%/cover;position:absolute;left:50%;overflow:clip}.garage:before{content:"";z-index:-1;background:linear-gradient(90deg,#cce0cc26,#0f434421);position:absolute;inset:0}.sprite{aspect-ratio:1;background-image:url(/demos/rivet-rally/assets/symbols-BMtqIOe7.png);background-size:400% 200%;background-position:var(--sx) var(--sy);background-repeat:no-repeat;flex-shrink:0;width:100%;display:block}header{text-align:center;color:#fff3d0;background:#c84b3b;border:4px solid #e9d9ad;width:305px;padding:12px 7px;position:absolute;top:38px;left:34px;transform:rotate(-3deg);box-shadow:4px 7px #1d4a47}header small{letter-spacing:2px;font-size:10px}h1{letter-spacing:-3px;text-shadow:2px 3px #853123;margin:5px 0;font-size:51px;font-weight:950;line-height:.85}h1 em{letter-spacing:0;font-size:61px;font-style:normal;display:block}header>span{letter-spacing:2px;font-size:11px;font-weight:900}.mechanic{text-align:center;width:288px;position:absolute;top:228px;left:24px}.mechanic>img{object-fit:contain;filter:drop-shadow(0 7px 5px #243d4570);width:230px;height:240px;animation:4s ease-in-out infinite bob}.nameplate{letter-spacing:4px;font-size:21px;font-weight:900}.nameplate small{letter-spacing:1px;margin:3px 0 13px;font-size:9px;display:block}#bonus{background:#f6e3ad;border:2px solid #315a54;border-bottom-width:5px;border-radius:5px;width:266px;padding:15px 10px;transform:rotate(-1deg);box-shadow:0 3px #eedbab}#bonus small{letter-spacing:2px;margin-bottom:5px;font-size:10px;display:block}#bonus strong{font-size:22px}.machine{width:870px;position:absolute;top:42px;left:344px}.shaft{background:linear-gradient(#244b4d,#102f35);border:4px solid #dacb9a;border-bottom:0;border-radius:12px 12px 0 0;justify-content:space-around;align-items:center;height:69px;display:flex;position:relative}.gear{color:#69867f;z-index:1;place-items:center;width:61px;height:61px;display:grid;position:relative}.gear>i{font-family:Arial;font-size:65px;font-style:normal;line-height:1}.gear>b{color:#bdccba;background:#183c3c;border-radius:50%;place-items:center;width:23px;height:23px;font-size:16px;display:grid;position:absolute}.gear.linked{color:#f1c662}.gear.linked>b{color:#fef2c8}.playing .gear.linked>i{animation:1.3s linear infinite gearSpin}.gear:nth-child(odd)>i{animation-direction:reverse}.shaft #link-bar{background:#ffc65a;width:20%;height:8px;transition:width .16s ease-out;position:absolute;top:28px;left:10%;box-shadow:0 0 8px #ffc95b}.machine-top{background:#f5e7c8;border:0;border-left:4px solid #daccac;border-right:4px solid #daccac;justify-content:space-between;align-items:center;gap:10px;height:48px;padding:0 20px;display:flex}.machine-top b{font-size:23px}.machine-top>span{letter-spacing:.7px;white-space:nowrap;color:#397067;font-size:11px;font-weight:900}.board{background:#174446;border:6px solid #d8c494;border-bottom-color:#947d4e;border-radius:0 0 9px 9px;height:377px;padding:12px;position:relative;box-shadow:0 7px #213f38,inset 0 0 0 2px #092d31}#cells{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(5,1fr);gap:5px;width:100%;height:100%;display:grid;overflow:hidden}.cell{background:linear-gradient(#edf0d8,#c4d6c2);border-radius:4px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden;container-type:size}.cell .piece{filter:drop-shadow(0 4px 3px #09252250);width:min(102cqh,96cqw)}.board:has(.matched) .cell:not(.matched){filter:brightness(.7)saturate(.6)}.matched .piece{animation:.7s ease-in-out infinite alternate pop}.matched{background:linear-gradient(#fff3bb,#e5d79b)}#routes{pointer-events:none;width:calc(100% - 24px);height:calc(100% - 24px);position:absolute;inset:12px}#routes path{fill:none;stroke:#ffc356;stroke-width:1.7px;filter:drop-shadow(0 1px 2px #493622);stroke-dasharray:190;opacity:.75;animation:.4s ease-out both trace}#prizes{pointer-events:none;position:absolute;inset:0}#prizes b{color:#fff8d3;text-shadow:0 3px #334943,2px 0 #334943,-2px 0 #334943,0 -1px #334943;font-size:32px;font-weight:950;animation:.3s ease-out both prize;position:absolute;transform:translate(-50%,-50%)}#receipts{scrollbar-width:thin;justify-content:center;align-items:center;gap:17px;height:46px;display:flex;overflow:auto}#receipts>span{white-space:nowrap;background:#f5edcfda;border-radius:5px;align-items:center;gap:5px;padding:0 8px;display:flex}#receipts .sprite{width:38px}#receipts strong{font-size:22px}#receipts small{font-size:10px}.win-strip{white-space:nowrap;justify-content:center;align-items:baseline;gap:15px;width:865px;display:flex;position:absolute;top:587px;left:345px}.win-strip small{letter-spacing:1px;color:#eaffeb;text-shadow:0 1px #163d38;font-size:12px;font-weight:900}.win-strip strong{color:#fff1b6;text-shadow:0 3px #1d5149,1px 0 #1d5149,-1px 0 #1d5149;font-size:38px;line-height:1}.win-strip>span{color:#193f3a;background:#e7efde;border-radius:3px;padding:1px 7px;font-size:11px;position:absolute;top:39px}.win-strip>span:empty{display:none}footer{background:linear-gradient(#f0e7cc,#d6caaa);border:3px solid #f9efcf;border-bottom:5px solid #395951;border-radius:6px;justify-content:space-around;align-items:center;gap:20px;height:82px;padding:8px 25px;display:flex;position:absolute;bottom:13px;left:40px;right:40px;box-shadow:0 4px #122f2b}footer small{letter-spacing:1px;color:#466561;margin-bottom:4px;font-size:11px;font-weight:900;display:block}.wallet b{font-size:27px}.bet{text-align:center}.bet>div{align-items:center;gap:13px;display:flex}.bet b{min-width:75px;font-size:24px}.bet button,.modal-bet button{background:#f3edd9;border:2px solid #7c9484;border-radius:50%;width:40px;height:40px;font-size:26px;line-height:1}#spin{color:#fff3d3;background:linear-gradient(#dc6650,#b64031);border:4px solid #f4db99;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:108px;height:88px;margin-top:-20px;display:flex;position:relative;box-shadow:0 0 0 3px #506a5c,0 5px #5c382b}#spin b{font-size:55px;line-height:.8}#spin span{letter-spacing:1px;margin-top:7px;font-size:10px;font-weight:900}.utilities{gap:12px;display:flex}.utilities button{color:#f3e9c7;background:#294b46;border:1px solid #627d6d;border-radius:5px;min-height:42px;padding:9px 13px;font-size:13px}.utilities button[aria-pressed=true]{color:#fff3d1;background:#c34936}.turning .piece{animation:.2s ease-in both turnOut}.arriving .piece{animation:.29s cubic-bezier(.2,.8,.3,1.15) both drop;animation-delay:var(--delay)}.winning .mechanic>img{animation:.55s ease-in-out 2 celebrate}#intro{z-index:20;background:#83aaa0 url(/demos/rivet-rally/assets/garage-tQ_Jhqvy.png) 50%/cover;position:absolute;inset:0;overflow:hidden}.shutter{background:repeating-linear-gradient(#244c4cd9 0 27px,#112f31dd 28px 30px);animation:1.1s cubic-bezier(.15,.6,.3,1) both shutterOpen;position:absolute;inset:0}.intro-sign{text-align:center;background:#d45741;border:6px solid #f5dfae;padding:18px 10px 14px;position:absolute;top:48px;left:75px;right:75px;transform:rotate(-1deg);box-shadow:0 7px #46615a}.intro-sign>small{letter-spacing:5px;color:#ffebc0;font-size:12px}.intro-sign h2{letter-spacing:-3px;color:#fff0c3;text-shadow:0 5px #7f332c;margin:10px 0 8px;font-size:82px;line-height:.95}.intro-sign h2 em{color:#f9d366;font-style:normal}.intro-sign p{color:#fff1cc;margin:8px 0 0;font-size:20px}.intro-bolt{object-fit:contain;filter:drop-shadow(0 9px 7px #0f34355e);width:420px;height:440px;animation:4s ease-in-out infinite bob;position:absolute;bottom:11px;left:74px}.intro-demo{text-align:center;background:#eef0d9ed;border:3px solid #e2ca9c;border-bottom:8px solid #3f6860;border-radius:8px;width:620px;padding:18px 26px 15px;position:absolute;top:298px;right:80px;box-shadow:0 9px 30px #27474250}.intro-gears{justify-content:center;align-items:center;gap:10px;display:flex}.intro-gears .gear{color:#cc633c;width:61px}.intro-gears .gear>i{animation:8s linear infinite gearSpin}.intro-gears .gear>b{color:#f5eacc}.intro-demo h3{letter-spacing:.5px;margin:16px 0 8px;font-size:22px}.intro-demo p{max-width:490px;margin:8px auto 12px;font-size:16px;line-height:1.4}.intro-facts{justify-content:center;gap:30px;margin:15px 0;display:flex}.intro-facts span{align-items:center;gap:10px;font-size:13px;font-weight:800;display:flex}.intro-facts b{color:#b94430;font-size:28px}.intro-demo>small{color:#48675b;margin-top:13px;font-size:11px;display:block}.primary,#enter{color:#fff5d9;letter-spacing:.4px;background:linear-gradient(#d85f47,#b33b2c);border:2px solid #ebca88;border-radius:5px;padding:16px 28px;font-size:17px;font-weight:950;box-shadow:0 4px #794335}#enter{width:90%;margin:0 auto}.depart{pointer-events:none;animation:.55s ease-in both introExit}dialog{color:#244740;background:#f1edd6;border:5px solid #406f65;border-top:11px solid #d25a41;border-radius:7px;width:min(820px,95vw);max-height:92dvh;padding:23px 28px;font-family:Trebuchet MS,Arial,sans-serif;overflow:auto;box-shadow:0 18px 70px #142b31bb}dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#09282eab}dialog .close{z-index:5;background:#dae3cc;border:1px solid #698579;border-radius:50%;width:35px;height:35px;font-size:25px;position:absolute;top:11px;right:11px}dialog h2{margin:8px 0 16px;font-size:30px}dialog p{font-size:15px;line-height:1.5}dialog small{letter-spacing:1px;color:#587266;font-size:11px;font-weight:900}.order-heading{text-align:center;margin:4px 24px 18px}.order-heading p{margin:0}.job-options{grid-template-columns:1fr 1fr;gap:20px;display:grid}.job{text-align:center;background:linear-gradient(120deg,#dbe9d1,#eff1d9);border:2px solid #456d65;border-bottom-width:7px;border-radius:4px;padding:24px 16px 17px;position:relative;overflow:hidden}.job.full{background:linear-gradient(120deg,#eddbc1,#f6edd8);border-color:#b74834}.job-number{color:#70917e;font-size:18px;font-weight:900;position:absolute;top:10px;left:12px}.job h3{margin:12px 0;font-size:27px}.job-gears{justify-content:center;align-items:center;gap:2px;height:50px;display:flex}.job-gears i{color:#a8baaa;font-family:Arial;font-size:42px;font-style:normal;line-height:1}.job-gears .on{color:#bc6b36;animation:9s linear infinite gearSpin}.job-gears .on:nth-child(2n){animation-direction:reverse}.job p{min-height:40px;font-size:13px}.job>strong{color:#b84430;margin:8px 0;font-size:43px;line-height:1.1;display:block}.job>small{font-size:10px;display:block}.job .select{border-top:1px dashed #839781;margin-top:15px;padding-top:12px;font-size:12px;font-weight:900;display:block}.modal-bet{justify-content:center;align-items:center;gap:22px;margin:20px auto 11px;display:flex}.modal-bet span{text-align:center;flex-direction:column;gap:5px;display:flex}.modal-bet b{font-size:27px}.fine{text-align:center;color:#567067;margin-bottom:0;font-size:11px!important}.order-confirm{text-align:center;max-width:620px;margin:20px auto}.order-confirm>strong{color:#b94832;margin:20px;font-size:63px;display:block}.confirm{justify-content:center;align-items:center;gap:15px;margin-top:25px;display:flex}.confirm>button:not(.primary){background:#dde5ce;border:1px solid #62806f;border-radius:5px;padding:17px 25px;font-weight:900}.setting-options{grid-template-columns:1fr;gap:12px;display:grid}.setting-options button{background:#dce8cf;border:2px solid #789380;border-radius:5px;padding:18px 15px;font-weight:800}.sample{vertical-align:middle;width:45px;display:inline-block}table{border-collapse:collapse;width:100%;font-size:14px}td,th{text-align:center;border-bottom:1px solid #879b8266;padding:6px}td:first-child{text-align:left}details{border-top:1px solid #879b8266;padding-top:12px}summary{cursor:pointer;font-weight:900}.portrait header{width:650px;padding:12px;top:30px;left:55px}.portrait h1{font-size:75px;line-height:1}.portrait h1 em{font-size:75px;display:inline}.portrait header small{font-size:14px}.portrait header>span{font-size:15px}.portrait .mechanic{text-align:left;width:684px;height:237px;top:192px;left:38px}.portrait .mechanic>img{width:250px;height:290px;position:absolute;top:-30px;right:5px}.portrait .nameplate{font-size:38px;position:absolute;top:18px;left:25px}.portrait .nameplate small{letter-spacing:.5px;font-size:13px}.portrait #bonus{width:368px;padding:15px 12px;position:absolute;top:111px;left:18px}.portrait #bonus small{font-size:15px}.portrait #bonus strong{font-size:27px}.portrait .machine{width:712px;top:430px;left:24px}.portrait .shaft{height:74px}.portrait .machine-top{height:62px;padding:0 12px}.portrait .machine-top b{max-width:415px;font-size:25px}.portrait .machine-top>span{white-space:normal;text-align:right;max-width:190px;font-size:13px}.portrait .board{height:392px;padding:9px}.portrait #routes{width:calc(100% - 18px);height:calc(100% - 18px);inset:9px}.portrait #receipts{justify-content:flex-start;gap:12px;height:57px}.portrait #receipts .sprite{width:46px}.portrait #receipts strong{font-size:27px}.portrait #receipts small{font-size:12px}.portrait .win-strip{gap:17px;width:712px;top:1020px;left:24px}.portrait .win-strip small{font-size:17px}.portrait footer{grid-template-rows:55px 65px;grid-template-columns:1fr 1.3fr 103px;gap:5px 13px;height:149px;padding:9px 15px;display:grid;bottom:15px;left:24px;right:24px}.portrait .wallet{grid-area:1/1}.portrait footer small{font-size:15px}.portrait .wallet b{font-size:29px}.portrait .bet{grid-area:1/2/3}.portrait .bet>small{margin-bottom:10px}.portrait .bet>div{justify-content:center;gap:6px}.portrait .bet b{min-width:86px;font-size:31px}.portrait .bet button{width:54px;height:61px;font-size:35px}.portrait #spin{grid-area:1/3/3;width:98px;height:106px;margin:0}.portrait #spin span{letter-spacing:0;font-size:13px}.portrait .utilities{flex-wrap:wrap;grid-area:2/1;gap:6px}.portrait .intro-sign{padding:24px 9px;top:49px;left:33px;right:33px}.portrait .intro-sign h2{font-size:91px}.portrait .intro-sign>small{font-size:15px}.portrait .intro-sign p{font-size:23px}.portrait .intro-bolt{width:375px;height:428px;bottom:511px;left:183px}.portrait .intro-demo{width:690px;padding:23px 25px;inset:auto auto 50px 35px}.portrait .intro-gears .gear{width:73px;height:72px}.portrait .intro-gears .gear>i{font-size:78px}.portrait .intro-gears .gear>b{width:28px;height:28px;font-size:20px}.portrait .intro-demo h3{margin:21px 0 12px;font-size:28px}.portrait .intro-demo p{max-width:600px;font-size:22px}.portrait .intro-facts{gap:34px;margin:24px 0}.portrait .intro-facts b{font-size:35px}.portrait .intro-facts span{font-size:18px}.portrait #enter{padding:23px 20px;font-size:24px}.portrait .intro-demo>small{margin-top:16px;font-size:16px}@media (width<=600px){dialog{max-height:94dvh;padding:24px 15px}dialog h2{font-size:25px}dialog p{font-size:13px}.order-heading{margin:9px 20px 19px}.job-options{grid-template-columns:1fr;gap:12px}.job{text-align:left;border-bottom-width:4px;grid-template-columns:1fr auto;gap:3px 12px;padding:13px 15px 12px;display:grid}.job-number{display:none}.job h3{grid-column:1;margin:1px 0;font-size:23px}.job-gears{grid-area:2/1;justify-content:flex-start;height:40px}.job-gears i{font-size:33px}.job p{grid-area:3/1/auto/3;min-height:0;margin:3px 0;font-size:12px}.job>strong{grid-area:1/2/3;align-self:center;margin:3px 0;font-size:31px}.job>small{grid-area:4/1;font-size:9px}.job .select{border:0;grid-area:4/2;margin:0;padding:0;font-size:9px}.fine{font-size:10px!important}.modal-bet{margin:16px auto 8px}.order-confirm>strong{font-size:49px}.primary{padding:17px 16px;font-size:13px}.confirm{gap:8px}.sample{width:32px}table{font-size:11px}td,th{padding:4px 2px}}@media (width>=601px) and (height<=650px){dialog{padding:14px 22px}.order-heading{margin:0 23px 11px}.order-heading h2{margin:6px 0;font-size:25px}.order-heading p{font-size:13px}.job{padding:14px 13px 10px}.job h3{margin:11px 0 7px;font-size:24px}.job-gears{height:41px}.job p{min-height:35px;margin:8px 0;font-size:12px}.job>strong{margin:5px 0;font-size:35px}.job .select{margin-top:9px;padding-top:8px}.modal-bet{margin:13px auto 6px}.fine{margin-top:6px}.order-confirm{margin:10px auto}}@keyframes gearSpin{to{transform:rotate(360deg)}}@keyframes bob{50%{transform:translateY(-3px)rotate(.5deg)}}@keyframes pop{50%{transform:translateY(-4px)rotate(-3deg)scale(1.06)}}@keyframes celebrate{50%{transform:translateY(-8px)rotate(-3deg)}}@keyframes trace{0%{stroke-dashoffset:190px}to{stroke-dashoffset:0}}@keyframes prize{0%{opacity:0;transform:translate(-50%,-50%)scale(.7)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes turnOut{to{opacity:0;transform:translateY(150px)}}@keyframes drop{0%{opacity:.2;transform:translateY(-150px)}to{opacity:1;transform:translateY(0)}}@keyframes shutterOpen{to{transform:translateY(-100%)}}@keyframes introExit{to{opacity:0;transform:translateY(-12%)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.shaft #link-bar{opacity:0}.nameplate{background:#f2e6c5;border:1px solid #758a70;border-radius:4px;padding:6px 13px 3px;display:inline-block}.nameplate small{margin-bottom:3px}.mechanic #bonus{margin-top:8px}.win-strip{background:#1d4844e8;border-top:1px solid #e1d49a;border-radius:4px;align-items:center;min-height:43px;top:580px}.win-strip strong{font-size:34px}.win-strip small{color:#eaffeb}.win-strip>span{font-size:10px;top:-15px}#receipts{height:40px}.portrait .nameplate{padding:8px 16px}.portrait .win-strip{min-height:58px;top:1020px}.portrait .win-strip strong{font-size:47px}.portrait .win-strip>span{font-size:13px;top:-16px}.portrait #receipts{height:57px}.gear>.sprite{filter:grayscale()brightness(.7);width:80px;position:absolute}.gear.linked>.sprite,.intro-gears .gear>.sprite{filter:drop-shadow(0 1px 2px #142d28);width:80px}.gear>b{z-index:2;width:21px;height:21px;font-size:13px}.job-gears .sprite{filter:grayscale();opacity:.45;width:59px}.job-gears .sprite.on{filter:none;opacity:1;animation:9s linear infinite gearSpin}.intro-gears .gear>b{width:23px;height:23px;font-size:15px}.turning .piece{filter:blur(.6px);animation:.26s linear infinite reelCycle}@keyframes reelCycle{0%{transform:translateY(-120%)}to{transform:translateY(120%)}}.portrait .intro-gears .gear>.sprite{width:100px}@media (width<=600px){.job-gears .sprite{width:42px}}.portrait .utilities{flex-wrap:nowrap;position:absolute;bottom:7px;left:17px}.portrait .utilities button{min-height:66px;padding:9px 13px;font-size:17px}.portrait footer{grid-template-rows:65px 86px;height:180px;bottom:15px}.portrait .bet button{width:78px;height:86px}.portrait .bet b{min-width:72px}.portrait .bet>div{gap:4px}.portrait .machine{top:411px}.portrait .win-strip{top:1001px}.portrait .mechanic>img{height:270px;top:-30px}.portrait .utilities{max-width:215px}.portrait .utilities button{padding:8px 9px;font-size:15px}.portrait .wallet{align-self:start}.portrait .bet{align-self:center}@media (width<=600px){.job{grid-template-columns:minmax(0,1fr) auto}.job h3{grid-area:1/1/auto/3}.job>strong{grid-row:2;font-size:29px}.job-gears{gap:0}.job-gears .sprite{width:29px}.modal-bet button,dialog .close{min-width:44px;min-height:44px}.job .select{font-size:9px}.confirm{flex-wrap:wrap}}.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)}}