*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{color:#234a3b;background:#102d25;font:16px Arial,Helvetica,sans-serif}button{font:inherit;cursor:pointer;color:inherit}button:disabled{opacity:.5;cursor:default}button:focus-visible{outline-offset:3px;outline:3px solid #c33e70}button{touch-action:manipulation}small{letter-spacing:1.7px;font-size:12px;font-weight:800}button,.primary{background:#fff9e8;border:1px solid #b2965f;border-radius:5px;min-height:42px}button:not(:disabled):hover{filter:brightness(1.055)}[hidden]{display:none!important}.parlor{transform-origin:50%;isolation:isolate;background:linear-gradient(#e4f2d54a,#062d2660),url(/demos/petal-parlor/assets/conservatory-pAbf1KrQ.png) 50%/cover;position:fixed;left:50%;overflow:clip}.sun-rays{pointer-events:none;background:repeating-conic-gradient(from 160deg at 35% -30%,#fff8cb21 0deg 5deg,#0000 8deg 24deg);animation:14s ease-in-out infinite alternate rays;position:absolute;inset:0}.parlor header{text-shadow:0 1px 1px #fff;align-items:center;gap:25px;height:64px;display:flex;position:absolute;top:12px;left:26px;right:26px}.parlor header small{color:#315c4a}.parlor h1{margin:0;font-size:42px;font-weight:400}.wordmark{color:#123f30;text-shadow:0 2px #fff0cd,1px 3px 1px #b29154;letter-spacing:-1.8px;white-space:nowrap;font-family:Georgia,serif;font-style:normal;font-weight:900}.wordmark em{color:#ad3b5c;font-style:italic}.parlor header>span{letter-spacing:1.1px;border-bottom:2px solid #8e864f;margin-left:auto;padding:10px 0;font-size:14px;font-weight:800}.bouquet{background:linear-gradient(135deg,#fbf4dcee,#f8e5cdee);border:1px solid #caab6b;border-radius:40px 40px 8px 8px;grid-template-rows:32px 34px;grid-template-columns:160px 1fr;align-items:center;width:984px;height:81px;padding:9px 28px;display:grid;position:absolute;top:91px;left:30px;box-shadow:0 5px 20px #183d2820}.bouquet>small{grid-row:1/3;width:130px;line-height:1.7}.bouquet>strong{white-space:nowrap;grid-column:2;font-family:Georgia,serif;font-size:25px}#chain{align-items:center;gap:10px;display:flex}#chain span{letter-spacing:1px;font-size:14px;font-weight:800}#chain i{font-style:normal}#chain .operation{color:#fff8dc;background:#287354;border-radius:20px;padding:3px 14px;font-size:19px;animation:.35s both petal-pop}#chain .multiply{background:#a93562}.petal-cabinet{z-index:2;background:#163f32;border:7px double #caaa6c;border-radius:15px 15px 6px 6px;width:984px;height:383px;position:absolute;top:183px;left:30px;box-shadow:0 10px 20px #102c3255,0 0 0 3px #fff3d5}.canopy{color:#ffefd0;background:linear-gradient(90deg,#284b35,#326347,#284b35);border-bottom:1px solid #b89d66;justify-content:space-between;align-items:center;height:36px;padding:0 20px;font-family:Georgia,serif;font-size:21px;display:flex}.canopy span{color:#e4bf7e}.board{height:326px;padding:8px;position:relative;overflow:visible}#cells{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(5,1fr);gap:3px;display:grid;position:absolute;inset:8px}.cell{isolation:isolate;background:linear-gradient(120deg,#d8eed8,#b6d3b9);border-right:1px solid #e8eed2;border-radius:2px;justify-content:center;align-items:center;display:flex;position:relative}.cell:nth-child(2n){background:linear-gradient(120deg,#eff1db,#cfdfc5)}.sprite{background-image:url(/demos/petal-parlor/assets/symbols-DufR5sAU.png);background-size:400% 200%;background-position:var(--sx) var(--sy);background-repeat:no-repeat;width:100%;height:100%;display:block}.piece{filter:drop-shadow(0 3px 1px #20493630);width:100px;height:100px}.bloom-token{filter:drop-shadow(0 0 10px #ffed8c);background:radial-gradient(circle,#ffefb0 10%,#cd885d 60%,#294c38 63%,#dcca83 70%);border-radius:50%;width:101px;height:101px;padding:9px;position:relative}.bloom-token>b{color:#ad3b5c;text-align:center;background:#fbefd4;border-radius:50%;width:29px;height:29px;font-size:25px;position:absolute;bottom:0;right:0}.bloom-cell{background:#f0d791!important}.cell.matched .piece{filter:drop-shadow(0 0 7px #fff6af);animation:.55s both petal-pop}.cell.matched:after{content:"";pointer-events:none;border:2px solid #d5a649;border-radius:40%;position:absolute;inset:4px;box-shadow:0 0 12px #feeba678}.turning .piece,.turning .bloom-token{animation:.19s linear infinite reel-flow;animation-delay:var(--delay);opacity:.65;filter:blur(1.5px)}.arriving .cell>i,.arriving .bloom-token{animation:.29s both land;animation-delay:var(--delay)}#routes{pointer-events:none;z-index:4;width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;inset:8px;overflow:visible}#routes path{fill:none;stroke:#fff8ce;stroke-width:2.5px;filter:drop-shadow(0 0 3px #a43055);stroke-dasharray:800;animation:.7s ease-out both trace}#prizes{pointer-events:none;z-index:5;position:absolute;inset:8px}#prizes b{color:#fffbe1;text-shadow:0 2px 2px #143f2a,2px 0 2px #143f2a,-2px 0 2px #143f2a;animation:.4s both prize;animation-delay:var(--prize-delay);font-size:25px;position:absolute;transform:translate(-50%,-50%)}#receipts{justify-content:center;gap:10px;height:35px;margin-top:12px;display:flex;position:absolute;top:100%;left:0;right:0;overflow:hidden}#receipts>span{background:#fff7e7ed;border:1px solid #b9ac7c;border-radius:22px;flex-shrink:0;align-items:center;gap:5px;padding:2px 10px 2px 4px;display:flex}#receipts .sprite{width:27px;height:27px}#receipts small{letter-spacing:.3px;font-size:9px}#receipts b{font-size:17px}.host{z-index:3;pointer-events:none;width:280px;height:426px;position:absolute;top:137px;left:1000px}.host>img{object-fit:contain;transform-origin:50% 92%;width:370px;height:397px;animation:5s ease-in-out infinite host-breathe;position:absolute;left:-46px}.signature{color:#fff6d3;text-shadow:0 1px 4px #0e3426;font:italic 29px Georgia;position:absolute;top:312px;right:62px}.host>button{pointer-events:auto;color:#fff4dc;background:linear-gradient(135deg,#c04665,#97264c);border-color:#eccf91;border-radius:2px 22px;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:207px;height:84px;display:flex;position:absolute;top:368px;left:34px;box-shadow:0 3px #d3ae6a,0 8px 16px #13312744}.host button small{letter-spacing:1px;font-size:10px}.host button b{font:700 19px Georgia}.host button>span{font-size:19px;position:absolute;bottom:3px;right:9px}.win-strip{color:#fff8df;text-shadow:0 2px 4px #113a30;justify-content:center;align-items:center;gap:28px;height:53px;display:flex;position:absolute;top:604px;left:40px;right:266px}.win-strip>span{align-items:center;gap:15px;display:flex}.win-strip small{width:95px;font-size:11px;line-height:1.5}.win-strip strong{letter-spacing:-1px;font-size:37px;font-weight:900}.win-strip p{max-width:240px;font-size:12px;font-weight:800}.parlor footer{color:#fff9e0;z-index:5;background:linear-gradient(90deg,#143e31,#225740,#143e31);border-top:2px solid #dec18a;justify-content:center;align-items:center;gap:50px;height:65px;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -6px 35px #cbdcad55}.wallet,.bet{flex-direction:column;gap:3px;display:flex}.wallet small,.bet small{color:#cfd9b7;letter-spacing:1px;font-size:10px}.wallet>b{font-size:24px}.bet{text-align:center}.bet>div{align-items:center;gap:14px;display:flex}.bet button{color:#fff5d6;background:#ffffff0d;border-color:#a8b18d;border-radius:50%;width:32px;height:32px;min-height:32px;font-size:22px}.bet b{min-width:75px;font-size:23px}#spin{color:#1f533d;background:radial-gradient(circle at 30% 25%,#fff6d6,#d9b46f);border:4px double #385f45;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:88px;height:88px;min-height:88px;margin-top:-21px;display:flex;box-shadow:0 0 0 3px #e4d398}#spin b{font-family:Arial;font-size:62px;line-height:.78}#spin span{letter-spacing:1px;margin-top:5px;font-size:9px;font-weight:900}.utilities{gap:8px;display:flex}.utilities button{color:#fff6d3;letter-spacing:.5px;background:#ffffff08;border-color:#ffffff3b;padding:0 12px;font-size:11px}.utilities button[aria-pressed=true]{color:#19432e;background:#cbe7ca}.winning .host img{animation:.8s both host-cheer}.winning .canopy{background:#b34662}.parlor.feature{background-color:#395539}.feature .sun-rays{background:repeating-conic-gradient(from 160deg at 35% -30%,#ffc98750 0deg 5deg,#0000 8deg 24deg)}.disc{border-radius:50%;position:absolute;inset:0;transform:rotate(0);box-shadow:0 0 0 3px #f1cb82,0 0 0 6px #a78344}.disc>svg{width:100%;height:100%;overflow:visible}.disc text{font:900 15px Arial}.disc-flower{width:38%;height:38%;position:absolute;top:31%;left:31%}.bloom-cell.opening{z-index:12;transform:scale(1.25);box-shadow:0 0 50px #fff3bb}.bloom-cell.opened{z-index:3}.bloom-cell:has(.disc){border-radius:50%;place-self:center;width:106px;height:106px}.pointer{z-index:3;filter:drop-shadow(0 1px 1px #fff);border-top:18px solid #a6325a;border-left:9px solid #0000;border-right:9px solid #0000;position:absolute;top:-11px;left:calc(50% - 9px)}.wheel-value{z-index:6;white-space:nowrap;color:#fff9db;background:#275b41;border:1px solid #e0b672;border-radius:14px;padding:2px 9px;font-size:20px;position:absolute;top:81%;left:50%;transform:translate(-50%);box-shadow:0 3px 8px #173a2b70}.wheel-active .cell:not(.opening){filter:brightness(.66);transition:filter .18s}.wheel-active .host img{filter:drop-shadow(0 0 20px #fcd57c)}#intro{z-index:20;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#b7d1ac50;place-items:center;display:grid;position:absolute;inset:0}.intro-glass{background:linear-gradient(120deg,#cee1cf88,#b7d3b66b);border:7px double #fff7db;width:50%;transition:transform .65s ease-in-out;position:absolute;top:0;bottom:0}.intro-glass.left{border-radius:45% 0 0;left:0}.intro-glass.right{border-radius:0 45% 0 0;right:0}.invitation{background:#fcf5e3;border:1px solid #bea677;grid-template-columns:1fr 1fr;width:940px;height:590px;transition:transform .6s,opacity .5s;display:grid;position:relative;transform:rotate(-1deg);box-shadow:0 20px 65px #1a493766}.invitation-cover{text-align:center;color:#fff2cc;background:linear-gradient(150deg,#193e31,#397655);border-right:5px double #c7b281;padding:29px 20px;position:relative;overflow:hidden}.invitation-cover h2{margin:17px 0 0;font-size:61px}.invitation-cover .wordmark{white-space:normal;color:#fff2ce;text-shadow:0 2px #a88742}.invitation-cover .wordmark em{color:#eaa39e;display:block}.invitation-cover p{margin-top:14px;font:italic 18px Georgia}.invitation-cover img{object-fit:contain;width:350px;height:360px;animation:6s infinite host-breathe;position:absolute;bottom:-11px;left:62px}.invitation-page{text-align:center;background:repeating-linear-gradient(90deg,#e9dbb321 0 1px,#0000 1px 6px);flex-direction:column;align-items:center;gap:12px;padding:31px 34px;display:flex}.invitation-page>small:first-child{color:#a34364;font-size:11px}.intro-flower{width:115px;height:115px;animation:8s ease-in-out infinite flower-sway}.invitation-page h3{margin:0;font:italic 37px Georgia}.invitation-page p{margin:0;font-size:17px;line-height:1.6}.intro-facts{justify-content:space-evenly;width:100%;margin:4px 0 8px;display:flex}.intro-facts>span{flex-direction:column;gap:6px;max-width:135px;font-size:11px;display:flex}.intro-facts b{color:#a13c5f;font:700 31px Georgia}.invitation-page>button{color:#fff3d9;letter-spacing:1px;background:#255d43;width:100%;min-height:52px;font-size:13px;font-weight:900}.invitation-page>small:last-child{letter-spacing:.4px;font-size:10px}.depart .intro-glass.left{transform:translate(-105%)}.depart .intro-glass.right{transform:translate(105%)}.depart .invitation{opacity:0;transform:scale(1.05)}dialog{color:#224e3b;text-align:center;background:#fcf4df;border:3px double #c3a368;border-radius:8px;width:min(850px,100vw - 26px);max-width:calc(100vw - 26px);max-height:calc(100dvh - 35px);padding:30px;overflow:auto;box-shadow:0 20px 90px #143a3570}dialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#0b292ac4}dialog h2{margin:8px 0 18px;font:italic 34px Georgia}dialog p{font-size:15px;line-height:1.6}dialog .close{background:#e9e2cc;border:none;border-radius:50%;width:35px;min-height:35px;font-size:24px;position:absolute;top:10px;right:10px}.menu-heading{padding:8px 25px}.menu-heading small{color:#a53b5c}.invitations{grid-template-columns:1fr 1fr;gap:22px;display:grid}.invitation-choice{background:linear-gradient(#f9f1db,#e0e9cd);border:4px double #a7b080;border-radius:100px 100px 8px 8px;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:16px 18px 0;display:flex;position:relative}.invitation-choice.grand{background:linear-gradient(#fbece0,#efcfcd);border-color:#ba7184}.flowers{width:190px;height:112px;position:relative}.flowers .sprite{width:110px;height:110px;animation:6s infinite flower-sway;position:absolute;top:0;left:0}.flowers .sprite+.sprite{animation-delay:-2s;top:14px;left:82px}.invitation-choice>small{font-size:11px}.invitation-choice h3{margin:2px 0;font:italic 29px Georgia}.invitation-choice p{min-height:49px;margin:0;font-size:15px}.invitation-choice strong{margin:6px 0;font-size:35px}.invitation-choice>span{color:#fff6d4;letter-spacing:.7px;background:#285d42;width:calc(100% + 36px);padding:13px 6px;font-size:12px;font-weight:900}.invitation-choice.grand>span{background:#a23f5e}.modal-bet{justify-content:center;align-items:center;gap:20px;margin:21px 0 12px;display:flex}.modal-bet>span{flex-direction:column;gap:5px;display:flex}.modal-bet small{font-size:10px}.modal-bet b{font-size:25px}.modal-bet button{background:#fdf9ec;border-radius:50%;width:45px;height:45px;font-size:23px}.fine{color:#5d705c;margin-bottom:0;font-size:11px!important}.flower-seal{width:85px;height:85px;margin:0 auto 15px}.result-amount{color:#ab405f;margin:15px;font:700 54px Georgia}.big-number{color:#ab405f;font:700 80px Georgia}.primary{color:#fff5d9;background:#286045;border:1px solid #bba170;min-width:160px;padding:14px 30px;font-size:15px;font-weight:900}.confirm{justify-content:center;gap:14px;display:flex}.confirm>button{min-width:120px;padding:12px 18px}.setting-options{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.setting-options button{padding:12px 18px}table{border-collapse:collapse;width:100%;font-size:14px}td,th{border-bottom:1px solid #c9b894;padding:8px}td:first-child{text-align:left}td .sample{vertical-align:middle;width:39px;height:39px;margin-right:6px;display:inline-block}details{text-align:left;font-size:13px}summary{cursor:pointer}.line-map{flex-wrap:wrap;justify-content:center;gap:8px;margin:15px 0;display:flex}.line-map figure{width:65px;margin:0}.line-map path{fill:none;stroke:#ac3d60;stroke-width:3px}.line-map figcaption{font-size:11px}.portrait header{flex-wrap:wrap;justify-content:center;gap:8px;height:112px;top:30px;left:24px;right:24px}.portrait h1{text-align:center;order:-1;width:100%;font-size:62px}.portrait header>span{margin-left:20px;font-size:17px}.portrait header small{font-size:15px}.portrait .bouquet{grid-template-rows:35px 44px;grid-template-columns:135px 1fr;width:710px;height:104px;padding:10px 22px;top:170px;left:25px}.portrait .bouquet>small{width:120px;font-size:12px}.portrait .bouquet>strong{font-size:25px}.portrait .petal-cabinet{width:710px;height:454px;top:298px;left:25px}.portrait .canopy{height:52px;padding:0 13px;font-size:26px}.portrait .board{height:382px}.portrait .piece{width:115px;height:115px}.portrait .bloom-token{width:112px;height:112px}.portrait .bloom-cell:has(.disc){width:115px;height:115px}.portrait .host{width:235px;height:340px;top:772px;left:515px}.portrait .host>img{width:300px;height:288px;left:-40px}.portrait .signature{font-size:27px;top:250px;right:65px}.portrait .host>button{width:400px;height:98px;top:161px;left:-458px}.portrait .host button small{font-size:16px}.portrait .host button b{font-size:26px}.portrait #receipts{gap:6px;height:44px;margin-top:15px}.portrait #receipts small{font-size:11px}.portrait #receipts b{font-size:20px}.portrait #receipts .sprite{width:31px;height:31px}.portrait .win-strip{flex-direction:column;gap:1px;height:88px;top:834px;left:45px;right:257px}.portrait .win-strip>span{flex-direction:column;gap:5px}.portrait .win-strip small{width:auto;font-size:14px}.portrait .win-strip strong{font-size:53px}.portrait .win-strip p{max-width:none;margin:0;font-size:15px}.portrait footer{flex-wrap:wrap;justify-content:flex-start;gap:25px;height:190px;padding:20px 30px}.portrait .wallet{min-width:175px}.portrait .bet b{min-width:80px;font-size:30px}.portrait .bet button{width:50px;height:50px;font-size:30px}.portrait #spin{width:116px;height:116px;min-height:116px;margin:0 0 0 12px}.portrait #spin b{font-size:78px}.portrait #spin span{font-size:13px}.portrait .utilities{gap:20px;position:absolute;bottom:17px;left:30px}.portrait .utilities button{height:43px;padding:0 20px;font-size:16px}.portrait .invitation{grid-template-rows:450px 1fr;grid-template-columns:1fr;width:694px;height:1160px;transform:none}.portrait .invitation-cover{text-align:left;border-bottom:5px double #c7b281;border-right:none;padding:35px}.portrait .invitation-cover h2{max-width:300px;font-size:66px}.portrait .invitation-cover img{width:360px;height:410px;bottom:0;left:330px}.portrait .invitation-cover p{max-width:260px;font-size:23px}.portrait .invitation-page{gap:18px;padding:29px 45px}.portrait .invitation-page h3{font-size:48px}.portrait .invitation-page p{font-size:25px;line-height:1.5}.portrait .intro-flower{width:117px;height:117px}.portrait .intro-facts b{font-size:37px}.portrait .intro-facts span{max-width:200px;font-size:17px}.portrait .invitation-page>button{min-height:77px;font-size:18px}.portrait .invitation-page>small:last-child{font-size:14px}@media (width<=600px){dialog{padding:26px 15px 18px}dialog h2{font-size:27px}dialog p{font-size:14px}.menu-heading{padding:9px 15px}.menu-heading small{letter-spacing:.8px;font-size:10px}.invitations{gap:12px}.invitation-choice{border-radius:60px 60px 6px 6px;gap:6px;padding:10px 8px 0}.flowers{width:108px;height:74px}.flowers .sprite{width:70px;height:70px}.flowers .sprite+.sprite{top:9px;left:39px}.invitation-choice>small{letter-spacing:.2px;font-size:9px}.invitation-choice h3{align-items:center;min-height:49px;font-size:21px;display:flex}.invitation-choice p{min-height:56px;font-size:12px}.invitation-choice strong{font-size:25px}.invitation-choice>span{letter-spacing:0;width:calc(100% + 16px);padding:10px 5px;font-size:10px;line-height:1.5}.fine{font-size:10px!important}.modal-bet{margin:16px 0 8px}.result-amount{font-size:42px}.confirm{gap:9px}.confirm>button{min-width:104px}table{font-size:11px}td,th{padding:6px 3px}td .sample{width:26px;height:26px;margin-right:2px}.setting-options{flex-direction:column}}@keyframes host-breathe{0%,to{transform:rotate(-.6deg)translateY(0)}50%{transform:rotate(.5deg)translateY(-4px)}}@keyframes host-cheer{0%,to{transform:rotate(0)}30%{transform:rotate(-3deg)translateY(-8px)}65%{transform:rotate(2deg)}}@keyframes flower-sway{0%,to{transform:rotate(-5deg)}50%{transform:rotate(7deg)}}@keyframes rays{0%{opacity:.4;transform:rotate(-2deg)}to{opacity:1;transform:rotate(2deg)}}@keyframes reel-flow{0%{transform:translateY(-32px)scale(.95)}to{transform:translateY(32px)scale(.95)}}@keyframes land{0%{opacity:.4;transform:translateY(-40px)}65%{opacity:1;transform:translateY(5px)}to{transform:none}}@keyframes petal-pop{0%{transform:scale(.8)}55%{transform:scale(1.13)}to{transform:scale(1)}}@keyframes trace{0%{stroke-dashoffset:800px}to{stroke-dashoffset:0}}@keyframes prize{0%{opacity:0;translate:0 12px}to{opacity:1;translate:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.parlor .utilities button,.parlor header>span{font-size:16px}@media (width>=601px) and (height<=620px){dialog{max-height:calc(100dvh - 20px);padding:16px}dialog h2{margin:6px 0 10px;font-size:27px}.menu-heading{padding:0 25px}.menu-heading small{font-size:10px}.invitations{gap:18px}.invitation-choice{gap:4px;padding:8px 18px 0}.flowers{width:146px;height:78px}.flowers .sprite{width:78px;height:78px}.flowers .sprite+.sprite{top:2px;left:63px}.invitation-choice h3{font-size:24px}.invitation-choice p{min-height:38px;font-size:13px}.invitation-choice strong{margin:3px 0;font-size:30px}.invitation-choice>span{padding:10px 6px;font-size:10px}.modal-bet{margin:12px 0 6px}.modal-bet b{font-size:23px}.fine{margin:5px 0 0;font-size:10px!important}}#cells.turning{overflow:hidden}.portrait header>span,.portrait header small{font-size:23px}.portrait .bouquet>small{letter-spacing:1px;font-size:19px;line-height:1.4}.portrait #chain span{font-size:23px}.portrait #chain .operation{font-size:25px}.portrait .win-strip small{font-size:23px}.portrait .win-strip p{font-size:21px}.portrait footer{gap:15px;height:230px;padding:16px 30px}.portrait .wallet small,.portrait .bet small{font-size:23px}.portrait .wallet>b{font-size:34px}.portrait .bet button{width:76px;height:76px}.portrait .bet>div{gap:10px}.portrait .utilities button{height:58px;font-size:24px}.portrait .utilities{gap:16px;bottom:16px}.portrait footer{grid-template-rows:126px 82px;grid-template-columns:180px 252px 130px;justify-content:start;gap:6px 24px;height:250px;padding:12px 30px;display:grid}.portrait footer .wallet{grid-area:1/1}.portrait footer .bet{grid-area:1/2}.portrait #spin{grid-area:1/3;margin:0}.portrait .utilities{grid-area:2/1/auto/4;position:static}.portrait .utilities button{height:78px}.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)}}