*{box-sizing:border-box}html,body{color:#fff0d1;background:#091b26;width:100%;height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;overflow:hidden}body{background:radial-gradient(#183c49,#050e16)}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.48}button:focus-visible{outline-offset:3px;outline:3px solid #a3ffeb}button,dialog{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}.stage{transform-origin:50%;isolation:isolate;background:linear-gradient(#10233133,#071a2860),url(/demos/sky-lanterns/assets/harbor.png) 50%/cover;position:absolute;top:50%;left:50%;overflow:hidden}.stage:after{content:"";pointer-events:none;z-index:-1;background:linear-gradient(#0000 74%,#051b2fdd);position:absolute;inset:0}.sprite{background:url(/demos/sky-lanterns/assets/symbols-v2.png) var(--sx) var(--sy)/400% var(--sh,300%) no-repeat;flex-shrink:0;width:100%;height:100%;display:inline-block}header{text-align:center;position:absolute;top:20px;left:180px;right:185px}.studio{letter-spacing:5px;color:#a9d7d5;font-size:10px;font-weight:800}h1{letter-spacing:-2px;text-shadow:0 3px #5c381b,0 0 25px #f3bc6044;margin:3px 0;font-family:Georgia,serif;font-size:49px}h1 em,h2 em{color:#f8d27b;font-style:normal}.subtitle{letter-spacing:2px;color:#e6dbc8;font-size:13px}.left{text-align:center;width:149px;position:absolute;top:143px;left:18px}.wind-orb{height:174px;position:relative}.wind-orb .sprite{filter:drop-shadow(0 0 10px #84dcef);width:112px;height:112px;animation:4s ease-in-out infinite wind-breathe}.wind-orb b{text-shadow:0 3px 2px #092438;font-size:36px;position:absolute;top:84px;left:0;right:0}.wind-orb small{letter-spacing:1px;margin-top:22px;font-size:10px;font-weight:800;display:block}.bonus-open{background:linear-gradient(#244e57ee,#102b39f5);border:1px solid #dfbf7d;border-radius:22px 22px 12px 12px;width:149px;padding:5px 8px 14px;transition:transform .2s,box-shadow .2s;box-shadow:inset 0 0 0 3px #122b30,0 8px 25px #0007}.bonus-open:hover:not(:disabled){transform:translateY(-4px);box-shadow:0 0 20px #f6c56260}.bonus-open .sprite{transform-origin:50% 10%;width:103px;height:103px;margin:auto;animation:4s ease-in-out infinite lantern-sway;display:block}.bonus-open strong{color:#ffe7a6;font-size:17px;display:block}.bonus-open small{color:#bdcdd0;margin-top:7px;font-size:10px;display:block}.feature-counter{background:#153c49c9;border-top:1px solid #dab361;border-bottom:1px solid #dab361;margin-top:28px;padding:20px 5px}.feature-counter small{font-size:12px;font-weight:800}.feature-counter b{color:#ffdf8b;font-size:65px;display:block}.board-wrap{width:918px;position:absolute;top:138px;left:181px}.board-top{letter-spacing:1.7px;z-index:3;background:linear-gradient(90deg,#235762,#14353e);border:1px solid #d2b47c;border-radius:14px 14px 0 0;justify-content:space-between;align-items:center;height:35px;padding:0 15px;font-size:12px;font-weight:800;display:flex;position:absolute;top:-20px;left:15px;right:15px}.board-top b{letter-spacing:0;color:#ffe8b2;font-size:21px}.board-top small{letter-spacing:1px;font-size:11px}.board{background:linear-gradient(#a38551,#f8db94 3%,#2f6663 6%,#0a2634 8%,#092333 92%,#f8d991 96%,#9e7646);border:1px solid #e4d5a4;border-radius:16px;height:458px;padding:9px;display:flex;position:relative;box-shadow:0 14px 40px #00111dc9,inset 0 0 0 4px #09232c}.reel{background:linear-gradient(#0c2531f7,#173b45f2,#0b2531f7);border-right:1px solid #44716d70;width:150px;height:440px;position:relative;overflow:hidden}.reel:last-of-type{border:0}.tiles{height:440px;position:relative}.tile{height:var(--h);background:radial-gradient(#39737912,#0000 65%);border-bottom:1px solid #a2d5c408;place-items:center;width:100%;transition:filter .18s;display:grid;position:relative}.tile>.sprite{width:min(132px,calc(var(--h)*.9));height:min(132px,calc(var(--h)*.9));filter:drop-shadow(0 5px 3px #0005);transform-origin:50% 65%}.tile small{letter-spacing:2px;text-shadow:0 1px 4px #000;font-size:11px;font-weight:900;position:absolute;bottom:2px}.tile.lantern>.sprite{filter:drop-shadow(0 0 9px #f3ac4166)}.tile.wild>.sprite{filter:drop-shadow(0 0 10px #9be5ef66)}.reel.running .tiles{filter:blur(1px);animation:.26s linear infinite reel-run}.reel.running .tile{height:146px}.reel.land .tiles{animation:.26s cubic-bezier(.2,.8,.2,1) reel-land}.tile.hit{background:radial-gradient(#52d8c932,#0000 76%)}.tile.hit>.sprite{filter:drop-shadow(0 0 12px #ffe889);animation:.85s ease-in-out infinite prize-breathe}.winning .tile:not(.hit){filter:brightness(.48)saturate(.8)}.paths{pointer-events:none;z-index:3;width:900px;height:440px;position:absolute;inset:9px;overflow:visible}.paths polyline{fill:none;stroke:#fff6ca;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1200;stroke-dashoffset:1200px;filter:drop-shadow(0 0 3px #fdb64e);animation:.65s forwards draw-path}.paths polyline.glow{stroke:#f1c166;stroke-width:10px;opacity:.35}.award-chip{z-index:4;pointer-events:none;background:#0a2632ed;border:1px solid #f2d383;border-radius:99px;align-items:center;gap:9px;padding:7px 16px;animation:.22s ease-out chip-in;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 22px #e3c56e55}.award-chip .sprite{width:34px;height:34px}.award-chip span{letter-spacing:1px;font-size:10px}.award-chip b{color:#ffeb9b;white-space:nowrap;font-size:26px}.result{text-align:center;height:58px;padding-top:10px;position:relative}.result>strong{text-shadow:0 2px 3px #00121e;letter-spacing:.2px;font-size:19px}.result #award-list:not(:empty)+strong{display:none}#award-list{justify-content:center;gap:8px;margin-top:3px;display:flex}#award-list button{background:#132e3ddd;border:1px solid #9bbbae70;border-radius:99px;align-items:center;gap:6px;padding:3px 12px 3px 5px;font-size:14px;display:flex}#award-list .sprite{width:29px;height:29px}#award-list button.selected{color:#ffe18e;border-color:#eed693}.right{text-align:center;width:151px;position:absolute;top:238px;left:1114px}.fox{filter:drop-shadow(0 8px 8px #05101b);width:166px;height:166px;margin-left:-6px;animation:5s ease-in-out infinite fox-idle}.winning .fox{animation:.7s ease-in-out 2 fox-cheer}.fox-name{letter-spacing:5px;font-size:18px;font-weight:900;display:block}.right>small{color:#bed2ce;letter-spacing:1px;margin-top:7px;font-size:9px;display:block}.trigger-hint{border-top:1px solid #bc9f5666;flex-wrap:wrap;justify-content:center;align-items:center;margin:26px 0 0;padding-top:12px;display:flex}.trigger-hint .sprite{width:49px;height:49px}.trigger-hint b{color:#f8d080;font-size:29px}.trigger-hint span{color:#e8dcbf;width:100%;font-size:12px;line-height:1.5}.atmosphere{pointer-events:none;z-index:-1;position:absolute;inset:0}.atmosphere i{left:var(--x);width:17px;height:23px;animation:22s linear infinite float-lantern;animation-delay:var(--delay);opacity:.65;transform:scale(var(--scale));background:radial-gradient(#ffefa9,#d78434 60%,#0000 70%);border-radius:45%;position:absolute;bottom:-50px;box-shadow:0 0 16px #e49e5466}footer{background:linear-gradient(#173a45ed,#0a2331f5);border:1px solid #91b7af75;border-radius:15px;justify-content:space-between;align-items:center;gap:20px;height:76px;padding:7px 23px;display:flex;position:absolute;bottom:9px;left:24px;right:24px;box-shadow:0 8px 20px #06151b80}footer small{letter-spacing:1.4px;color:#b5d0cd;font-size:10px;font-weight:800;display:block}footer .wallet{min-width:172px}footer .wallet b{font-size:25px;line-height:1.4}.win{text-align:center;min-width:210px}.win b{color:#ffe3a0;font-variant-numeric:tabular-nums;text-shadow:0 2px #412f22;font-size:40px;line-height:1.1}.bet{text-align:center}.bet>div{align-items:center;gap:16px;margin-top:6px;display:flex}.bet b{min-width:78px;font-size:21px}.bet button,.modal-bet button{background:#234652;border:1px solid #86a9aa77;border-radius:50%;width:35px;height:35px;font-size:24px}.spin{color:#163139;background:radial-gradient(circle at 30% 25%,#ffe6a4,#ba7f37);border:3px solid #e7bd6e;border-radius:50%;flex-shrink:0;width:89px;height:89px;margin-right:5px;transition:transform .2s;box-shadow:0 0 0 5px #102d36,0 0 0 7px #af956e}.spin:hover:not(:disabled){transform:scale(1.05)}.spin>span{margin-top:-5px;font-family:Arial;font-size:62px;line-height:58px;display:block}.spin small{color:#21434a;font-size:8px}.spin:disabled{opacity:.7}.utilities{flex-direction:column;gap:4px;width:104px;display:flex}.utilities>button{letter-spacing:.5px;background:#214551;border:1px solid #76979770;border-radius:7px;padding:8px 0;font-size:10px;font-weight:800}.utilities>button[aria-pressed=true]{color:#123842;background:#b9e7db}.utilities>div{justify-content:space-around;display:flex}.utilities>div button{background:0 0;border:0;padding:0 5px;font-size:21px}#intro{z-index:20;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);background:linear-gradient(90deg,#091d34c9,#0b2038ea 55%,#143147c4);align-items:center;gap:45px;padding:60px 95px;display:flex;position:absolute;inset:0}.intro-fox{filter:drop-shadow(0 20px 18px #0006);flex-shrink:0;width:300px;height:300px;animation:5s ease-in-out infinite fox-idle}.intro-copy{text-align:center;flex:1}.intro-copy h2{letter-spacing:-2px;color:#fff3cd;text-shadow:0 4px #604829;margin:16px 0;font-family:Georgia,serif;font-size:72px;line-height:.95}.intro-copy p{color:#d8e7df;font-size:18px;line-height:1.5}.intro-features{gap:12px;margin:20px 0 26px;display:flex}.intro-features>span{border-bottom:1px solid #bb986c88;flex:1;padding-bottom:14px}.intro-features .sprite{width:85px;height:85px;animation:4s ease-in-out infinite lantern-sway}.intro-features b{color:#ffdf9b;margin:5px 0;font-size:12px;display:block}.intro-features small{color:#b9d1d1;font-size:11px;line-height:1.4;display:block}.gold{color:#243637;letter-spacing:1px;background:linear-gradient(#ffe6aa,#d4a55b);border:1px solid #ffdd9b;border-radius:10px;padding:16px 34px;font-size:14px;font-weight:900;box-shadow:0 4px #70582f}.gold:hover:not(:disabled){filter:brightness(1.08)}.demo-note{color:#9dafb5;margin-top:18px;font-size:10px;display:block}#intro.depart{animation:.55s forwards intro-out}.transition-flare{opacity:0;pointer-events:none;z-index:10;background:radial-gradient(#ffe6a650,#0000 60%);position:absolute;inset:0}.flashing .transition-flare{animation:.9s ease-out transition-light}.feature .board-top{background:linear-gradient(90deg,#654259,#285167)}.feature .reel{background:linear-gradient(#293248f7,#2b4451ed,#243548f7)}.feature header .subtitle{color:#f0d291}.board-sparkles{pointer-events:none;z-index:5;position:absolute;inset:0;overflow:hidden}.board-sparkles i{left:var(--x);color:#ffe9a0;animation:1.1s ease-out both prize-spark;animation-delay:var(--delay);font-size:19px;font-style:normal;position:absolute;top:60%}dialog{color:#f4ecd9;text-align:center;background:radial-gradient(at top,#275566,#102b3b 70%);border:1px solid #ceba83;border-radius:20px;width:min(840px,100vw - 30px);max-height:calc(100dvh - 30px);padding:28px 32px;overflow:auto;box-shadow:0 25px 100px #000b}dialog::backdrop{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#030f1bd6}dialog[open]{animation:.25s ease-out modal-in}dialog button.close{background:#153344;border:1px solid #b6c6bb60;border-radius:50%;width:34px;height:34px;font-size:25px;position:absolute;top:12px;right:14px}.overline{color:#c5ddd3;letter-spacing:3px;font-size:10px;font-weight:800;display:block}dialog h2{color:#ffdfa0;margin:14px 15px 21px;font-family:Georgia,serif;font-size:30px}dialog p{color:#d0dedb;font-size:13px;line-height:1.55}.bonus-cards{gap:21px;display:flex}.bonus-card{background:linear-gradient(#234c59,#153a46);border:1px solid #bfab76;border-radius:34px 34px 13px 13px;flex:1;padding:16px 20px 0;transition:transform .2s,box-shadow .2s;overflow:hidden}.bonus-card.aurora{background:linear-gradient(#3b4162,#143c4b);border-color:#91cbdb}.bonus-card:hover:not(:disabled){transform:translateY(-5px);box-shadow:0 0 25px #c8dcb640}.bonus-card>.sprite{width:125px;height:125px;animation:4.5s ease-in-out infinite lantern-sway}.bonus-card h3{color:#ffe3a1;margin:10px 0;font-family:Georgia,serif;font-size:20px}.bonus-card p{white-space:nowrap;font-size:11px}.bonus-card>strong{color:#ffe8b6;margin-top:15px;font-size:36px;display:block}.bonus-card>small{color:#abc9c9;margin:5px 0 16px;font-size:11px;display:block}.card-action{color:#173540;letter-spacing:2px;background:#dcc186;margin:0 -20px;padding:12px;font-size:12px;font-weight:900;display:block}.aurora .card-action{background:#b9e3e4}.modal-bet{justify-content:center;align-items:center;gap:23px;margin:25px 0 12px;display:flex}.modal-bet span small{letter-spacing:2px;color:#a6c6c8;font-size:9px;display:block}.modal-bet span b{margin-top:5px;font-size:23px;display:block}.fine{margin-bottom:0;color:#b7c9c8!important;font-size:11px!important}.feature-card>.sprite{width:145px;height:145px;animation:4s ease-in-out infinite lantern-sway}.feature-number{color:#ffe3a0;font-variant-numeric:tabular-nums;letter-spacing:-2px;font-size:66px;line-height:1.2;display:block}.feature-card .gold{min-width:200px;margin-top:18px}.confirm-actions{justify-content:center;align-items:center;gap:16px;margin:20px 0;display:flex}.confirm-actions>button{background:#153541;border:1px solid #9eb5aa70;border-radius:9px;min-width:115px;padding:16px;font-weight:900}.confirm-actions>button.gold{background:linear-gradient(#ffe6aa,#d4a55b);margin:0}table{border-collapse:collapse;text-align:left;width:100%;font-size:13px}td,th{border-bottom:1px solid #a9c9c02b;padding:8px}th{color:#9bcbca;letter-spacing:1px;font-size:10px}td:not(:first-child),th:not(:first-child){text-align:right}.paytable td:first-child{align-items:center;gap:6px;display:flex}.paytable .sprite{width:32px;height:32px}.paytable td:not(:first-child){font-variant-numeric:tabular-nums;color:#ffe1a2}details{text-align:left;border-top:1px solid #b6d1c44a;padding-top:12px}summary{cursor:pointer;color:#bfdbd6;font-size:12px}.portrait header{top:34px;left:20px;right:20px}.portrait h1{font-size:46px}.portrait .board-wrap{width:730px;top:221px;left:15px}.portrait .reel{width:118.33px;height:517px}.portrait .tiles{height:517px}.portrait .paths{width:710px;height:517px}.portrait .tile>.sprite{width:min(111px,calc(var(--h)*1.02));height:min(111px,calc(var(--h)*1.02))}.portrait .left{justify-content:space-between;align-items:center;width:auto;height:65px;display:flex;top:140px;left:20px;right:20px}.portrait .wind-orb{text-align:left;align-items:center;gap:12px;width:270px;height:60px;display:flex}.portrait .wind-orb b{font-size:30px;position:static}.portrait .wind-orb small{width:100px;margin:0;font-size:10px}.portrait .bonus-open{border-radius:12px;grid-template-columns:55px 1fr;width:236px;height:61px;padding:8px 10px;display:grid}.portrait .bonus-open .sprite{grid-row:1/3;width:47px;height:47px}.portrait .bonus-open strong{align-self:end;font-size:15px}.portrait .bonus-open small{margin-top:3px;font-size:9px}.portrait .feature-counter{align-items:center;gap:20px;height:60px;margin:0;padding:0 20px;display:flex}.portrait .feature-counter b{font-size:39px}.portrait .right{align-items:center;gap:7px;width:210px;display:flex;top:848px;left:25px}.portrait .fox{flex-shrink:0;width:105px;height:105px}.portrait .right>small{display:none}.portrait .fox-name{font-size:15px}.portrait .trigger-hint{display:none}.portrait .result{height:78px;padding-top:17px}.portrait #award-list button{font-size:18px}.portrait #award-list .sprite{width:33px;height:33px}.portrait footer{grid-template-columns:1fr 1.15fr 1fr;gap:4px;height:158px;padding:12px 16px;display:grid;bottom:12px;left:18px;right:18px}.portrait .wallet{grid-area:1/1;min-width:0}.portrait .win{text-align:center;grid-area:1/2;min-width:0}.portrait .bet{text-align:left;grid-area:2/1}.portrait .bet small{display:none}.portrait .bet b{text-align:center;min-width:69px;font-size:18px}.portrait .spin{grid-area:1/3/3;justify-self:center;width:111px;height:111px}.portrait .spin>span{font-size:78px;line-height:76px}.portrait .utilities{flex-direction:row;grid-area:2/2;justify-content:center;align-items:center;gap:8px;width:auto}.portrait .utilities>button{min-width:78px;padding:10px 4px;font-size:10px}.portrait .utilities>div button{padding:2px 4px;font-size:20px}.portrait .utilities #history{display:none}.portrait #intro{padding:35px;display:block}.portrait .intro-copy p{font-size:22px}.portrait .intro-features{gap:12px;margin:25px 0 40px}.portrait .intro-features b,.portrait .intro-features small{font-size:13px}.portrait .intro-copy .gold{padding:23px 40px;font-size:21px}.portrait .demo-note{margin-top:25px;font-size:13px}@keyframes reel-run{0%{transform:translateY(-440px)}to{transform:translateY(0)}}@keyframes reel-land{0%{transform:translateY(-12px)}65%{transform:translateY(6px)}to{transform:translateY(0)}}@keyframes wind-breathe{50%{transform:scale(1.05)rotate(3deg)}}@keyframes lantern-sway{0%,to{transform:rotate(-3deg)translateY(0)}50%{transform:rotate(3deg)translateY(-5px)}}@keyframes fox-idle{0%,to{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-6px)rotate(1deg)}}@keyframes fox-cheer{50%{transform:translateY(-12px)rotate(3deg)}}@keyframes float-lantern{0%{opacity:0;bottom:-50px}8%{opacity:.6}85%{opacity:.5}to{opacity:0;transform:translateX(55px) scale(var(--scale));bottom:110%}}@keyframes prize-breathe{50%{transform:translateY(-3px)scale(1.055)}}@keyframes draw-path{to{stroke-dashoffset:0}}@keyframes chip-in{0%{opacity:0;transform:translate(-50%,-45%)scale(.85)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes prize-spark{0%{opacity:0;transform:translateY(50px)scale(.3)}30%{opacity:1}to{opacity:0;transform:translateY(-220px)scale(1.2)}}@keyframes intro-out{to{opacity:0;transform:scale(1.06)}}@keyframes modal-in{0%{opacity:0;transform:translateY(15px)scale(.97)}to{opacity:1;transform:none}}@keyframes transition-light{0%,to{opacity:0}25%{opacity:1}}@media (width<=580px){dialog{width:calc(100vw - 18px);padding:24px 15px}dialog h2{font-size:24px}.bonus-cards{gap:10px}.bonus-card{border-radius:25px 25px 10px 10px;padding:11px 8px 0}.bonus-card>.sprite{width:85px;height:85px}.bonus-card h3{font-size:16px}.bonus-card p{white-space:normal;font-size:9px}.bonus-card>strong{font-size:28px}.card-action{margin:0 -8px;font-size:10px}.feature-number{font-size:50px}.paytable td,.paytable th{padding:6px 3px;font-size:10px}.paytable .sprite{width:26px;height:26px}.paytable td:first-child{font-size:10px}.feature-card>.sprite{width:105px;height:105px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.paths polyline{stroke-dashoffset:0}}.stage:not(.portrait) .result{justify-content:center;align-items:center;gap:14px;height:38px;padding-top:7px;display:flex}.stage:not(.portrait) .result>strong{flex-shrink:0;font-size:17px}.stage:not(.portrait) #award-list{scrollbar-width:thin;justify-content:flex-start;max-width:60%;margin:0;overflow-x:auto}.stage:not(.portrait) #award-list button{flex-shrink:0;padding:1px 9px 1px 3px;font-size:13px}.stage:not(.portrait) #award-list .sprite{width:23px;height:23px}.portrait .left{height:86px;top:142px}.portrait .wind-orb{width:330px;height:86px}.portrait .wind-orb .sprite{width:86px;height:86px}.portrait .wind-orb small{width:120px;font-size:17px}.portrait .wind-orb b{font-size:39px}.portrait .bonus-open{grid-template-columns:69px 1fr;width:280px;height:86px}.portrait .bonus-open .sprite{width:65px;height:65px}.portrait .bonus-open strong{font-size:26px}.portrait .bonus-open small{font-size:14px}.portrait .feature-counter{height:86px}.portrait .feature-counter small{font-size:20px}.portrait .board-wrap{top:250px}.portrait .board{height:680px}.portrait .reel,.portrait .tiles{height:662px}.portrait .tile{height:calc(var(--h)*1.50455)}.portrait .paths{height:662px}.portrait .board-top{height:41px;font-size:19px;top:-29px}.portrait .board-top b{font-size:28px}.portrait .board-top small{font-size:16px}.portrait .result{height:91px}.portrait .result>strong{font-size:29px}.portrait #award-list{justify-content:safe center;gap:9px;max-width:100%;overflow-x:auto}.portrait #award-list button{flex-shrink:0;min-height:46px;font-size:22px}.portrait .right{display:none}.portrait footer{grid-template-columns:1fr 1fr 143px;gap:6px;height:240px;padding:14px}.portrait footer small{letter-spacing:1px;font-size:17px}.portrait .wallet b{font-size:36px}.portrait .win b{font-size:48px}.portrait .bet>div{gap:5px}.portrait .bet button{flex-shrink:0;width:86px;height:86px;font-size:42px}.portrait .bet b{min-width:69px;font-size:25px}.portrait .utilities{gap:4px}.portrait .utilities>button{min-width:86px;height:86px;font-size:21px}.portrait .utilities>div{flex-wrap:nowrap;width:176px}.portrait .utilities>div button{flex-shrink:0;width:86px;height:86px;font-size:34px}.portrait .spin{width:123px;height:123px}.portrait .spin small{font-size:15px}.portrait .intro-fox{width:200px;height:200px;margin:60px auto 20px}.portrait .intro-copy h2{font-size:80px}.portrait .intro-features small{font-size:20px}.portrait .intro-features b{font-size:21px}.portrait .intro-features .sprite{width:120px;height:120px}.portrait .intro-copy .gold{min-height:90px;font-size:28px}@media (width<=580px){.modal-bet button,dialog button.close{width:44px;height:44px}.modal-bet button{font-size:28px}dialog button.close{top:8px;right:8px}}@media (height<=640px) and (width>=581px){dialog{max-height:calc(100dvh - 20px);padding:16px 24px}dialog h2{margin:10px 30px 14px;font-size:26px}.bonus-card{padding-top:8px}.bonus-card>.sprite{width:85px;height:85px}.bonus-card h3{margin:5px 0;font-size:18px}.bonus-card p{margin:6px 0;font-size:10px}.bonus-card>strong{margin-top:8px;font-size:30px}.bonus-card>small{margin:4px 0 10px}.card-action{padding:9px}.modal-bet{margin:12px 0 6px}.modal-bet button{width:44px;height:44px}.feature-card>.sprite{width:90px;height:90px}.feature-number{font-size:48px}.feature-card .gold{margin-top:10px}}@media (height<=430px) and (width>=581px){dialog{padding:12px 20px}.bonus-card>.sprite{width:54px;height:54px}.bonus-card h3{font-size:16px}.bonus-card>strong{font-size:25px}.bonus-card>small{margin:3px 0 6px}.modal-bet{margin-top:8px}.overline{font-size:9px}dialog h2{margin:7px 30px 10px;font-size:23px}.feature-card>.sprite{width:55px;height:55px}.feature-number{font-size:36px}}#intro.harbor-intro{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(#102835b8,#09233230 40%,#092230f5 86%),url(/demos/sky-lanterns/assets/harbor.png) 50%/cover;padding:0;display:block}.harbor-glow{pointer-events:none;background:radial-gradient(at 65% 43%,#f7c25e36,#0000 55%);position:absolute;inset:0}.harbor-heading{text-align:center;position:absolute;top:47px;left:110px;right:110px}.harbor-heading h2{letter-spacing:-3px;text-shadow:0 4px #654023,0 0 35px #f5c0574a;margin:17px 0;font:700 71px/1 Georgia,serif}.harbor-heading p{color:#e9e6d6;letter-spacing:1px;font-size:19px}.harbor-pip{text-align:center;width:280px;height:280px;position:absolute;top:230px;left:65px}.harbor-pip>.sprite{filter:drop-shadow(0 10px 15px #031620aa);animation:5s ease-in-out infinite fox-idle}.harbor-pip>span{color:#ffe5a5;letter-spacing:5px;margin-top:-5px;font-size:18px;display:block}.harbor-pip small{color:#b7d7da;letter-spacing:1px;margin-top:8px;font-size:10px;display:block}.harbor-lanterns{pointer-events:none;position:absolute;inset:0;overflow:hidden}.harbor-lanterns>span{left:calc(29% + var(--n)*12%);top:calc(44% - var(--n)*5%);width:calc(75px - var(--n)*6px);height:calc(75px - var(--n)*6px);opacity:.8;animation:7s ease-in-out infinite route-lantern;animation-delay:calc(var(--n)*-.8s);filter:drop-shadow(0 0 10px #f6b34c50);position:absolute}.wind-route{text-align:center;position:absolute;top:313px;left:375px;right:83px}.route-overline{letter-spacing:3px;color:#e2d1a3;font-size:11px}.route-steps{align-items:center;gap:10px;margin-top:16px;display:flex}.route-steps>span{flex:1}.route-steps>i{color:#dbb266;letter-spacing:6px;margin-top:-28px;font-size:21px;font-style:normal}.route-steps .sprite{width:79px;height:79px}.route-steps b{color:#ffe4a0;margin-top:8px;font-size:13px;display:block}.route-steps small{color:#c2d9d9;margin-top:7px;font-size:13px;line-height:1.4;display:block}.harbor-departure{text-align:center;position:absolute;bottom:43px;left:0;right:0}.harbor-departure .gold{border-radius:99px;min-width:310px;min-height:57px}.harbor-departure .demo-note{margin-top:17px}#intro.harbor-intro.depart{animation:.55s ease-in forwards harbor-depart}.harbor-intro.depart .harbor-lanterns>span{animation:.55s ease-in forwards lantern-depart}dialog:has(.journey-picker){background:linear-gradient(145deg,#284b51,#102e38);border:1px solid #c0aa76;border-radius:26px 26px 10px 10px;width:min(820px,100vw - 24px)}.journey-picker{flex-direction:column;gap:14px;display:flex}.journey-pass{text-align:left;background:linear-gradient(100deg,#5f52327a,#1f3f47 55%);border:1px solid #bcb2879c;border-radius:14px;grid-template-columns:106px 1fr 185px;align-items:center;gap:14px;padding:14px 20px 14px 8px;transition:transform .2s,box-shadow .2s;display:grid;position:relative;overflow:hidden}.journey-pass.aurora{background:linear-gradient(100deg,#47557694,#203e53 55%);border-color:#92bbcc}.pass-illustration{width:102px;height:102px;animation:5s ease-in-out infinite lantern-sway}.aurora .pass-illustration{animation:5s ease-in-out infinite wind-breathe}.pass-description>small{letter-spacing:2px;color:#bbd5d2;font-size:9px;display:block}.pass-description>b{color:#ffe7b2;margin:7px 0 10px;font:700 23px/1.2 Georgia,serif;display:block}.pass-description>span{color:#cfe8e1;font-size:12px}.pass-fare{text-align:right;border-left:1px dashed #99b8ab70;padding-left:16px;display:block}.pass-fare strong{color:#ffe6a4;font-size:34px}.pass-fare small{color:#b3cace;margin:3px 0 12px;font-size:10px;display:block}.pass-fare>span{color:#e8e4c4;letter-spacing:.7px;font-size:11px;font-weight:900;display:block}.journey-pass:hover:not(:disabled){transform:translate(3px);box-shadow:-3px 0 #edce8a,0 4px 25px #081b2a77}dialog:has(.journey-picker)[open]{animation:.3s ease-out route-menu-in}dialog:has(.feature-card){border-radius:60px 60px 15px 15px}.portrait #intro.harbor-intro{padding:0}.portrait .harbor-heading{top:72px;left:30px;right:30px}.portrait .harbor-heading h2{font-size:85px;line-height:1}.portrait .harbor-heading h2 em{display:block}.portrait .harbor-heading p{font-size:23px}.portrait .harbor-pip{width:300px;height:300px;top:340px;left:calc(50% - 150px)}.portrait .harbor-pip>span{font-size:24px}.portrait .harbor-pip small{font-size:16px}.portrait .harbor-lanterns>span{left:calc(4% + var(--n)*20%);top:calc(46% - var(--n)*4%);width:80px;height:80px}.portrait .wind-route{top:770px;left:35px;right:35px}.portrait .route-overline{letter-spacing:2px;font-size:18px}.portrait .route-steps{gap:6px;margin-top:20px}.portrait .route-steps .sprite{width:92px;height:92px}.portrait .route-steps b{min-height:48px;font-size:21px}.portrait .route-steps small{font-size:19px;line-height:1.3}.portrait .route-steps>i{letter-spacing:0;font-size:16px}.portrait .harbor-departure{bottom:58px}.portrait .harbor-departure .gold{min-width:490px;min-height:100px;font-size:28px}.portrait .harbor-departure .demo-note{font-size:17px}@media (width<=580px){.journey-pass{grid-template-columns:75px 1fr;gap:8px;padding:12px}.pass-illustration{width:70px;height:70px}.pass-description>b{margin:6px 0;font-size:19px}.pass-description>small{letter-spacing:1px;font-size:9px}.pass-description>span{font-size:11px}.pass-fare{border-top:1px dashed #99b8ab70;border-left:0;grid-column:1/3;align-items:center;gap:9px;padding:9px 0 0;display:flex}.pass-fare strong{font-size:28px}.pass-fare small{margin:0;font-size:10px}.pass-fare>span{margin-left:auto;font-size:10px}.journey-picker{gap:12px}}@media (height<=640px) and (width>=581px){.journey-pass{grid-template-columns:88px 1fr 180px;padding-top:10px;padding-bottom:10px}.pass-illustration{width:80px;height:80px}.pass-description>b{font-size:22px}.pass-fare strong{font-size:31px}}@keyframes route-lantern{50%{transform:translate(15px,-24px)rotate(4deg)}}@keyframes harbor-depart{to{opacity:0;transform:translateY(-25px)}}@keyframes lantern-depart{to{opacity:0;transform:translate(40px,-350px)}}@keyframes route-menu-in{0%{opacity:0;transform:translate(-25px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.harbor-intro *,.journey-pass{transition:none!important;animation:none!important}dialog:has(.journey-picker){transition:none!important;animation:none!important}}.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)}}