:root{color:#f7e5bd;font-synthesis:none;background:#123634;font-family:Arial,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{padding-top:var(--nav-height,0px);margin:0}button{font:inherit;cursor:pointer;color:inherit;background:#133c3c;border:1px solid #c7a56499;border-radius:7px;font-weight:800}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline-offset:3px;outline:3px solid #fce8a6}[hidden]{display:none!important}#app{height:calc(100dvh - var(--nav-height,0px));min-height:300px}.pavilion{isolation:isolate;background:linear-gradient(#12333333,#051c2344),url(/demos/saffron-spin/assets/world-BpsODtmJ.webp) 50%/cover;grid-template-rows:58px minmax(0,1fr) 82px;height:100%;display:grid;position:relative;overflow:hidden}header{background:#0c2b31c9;border-bottom:1px solid #d2aa62aa;align-items:center;gap:15px;padding:9px 25px;display:flex}header .wordmark{letter-spacing:1px;white-space:nowrap;color:#f9dd94;text-shadow:0 3px #362714;font-family:Georgia,serif;font-size:25px;font-weight:900}header b{color:#fff1d0}header span{letter-spacing:.5px;color:#e4c99b;flex:1;font-size:12px}header button{width:34px;height:34px;font-size:21px}.stage{grid-template-columns:230px minmax(280px,1fr) 23%;align-items:center;gap:15px;width:100%;max-width:1340px;height:100%;min-height:0;margin:auto;padding:18px 30px;display:grid}.programme{background:#102d2ddf;border:1px solid #b5996199;border-radius:70px 70px 9px 9px;align-self:center;padding:17px;box-shadow:0 8px 25px #061c2955}.programme>small{text-align:center;letter-spacing:1.3px;margin-top:9px;font-size:8px;display:block}.programme h2{text-align:center;color:#ffe8ae;margin:13px 0 16px;font:700 28px/1.05 Georgia,serif}.profiles{flex-direction:column;gap:7px;display:flex}.profiles button{text-align:left;background:#174c4a;justify-content:space-between;align-items:center;gap:7px;padding:12px 10px;display:flex}.profiles b{font-size:15px}.profiles span{white-space:nowrap;color:#c8cfb4;font-size:9px}.profiles button[aria-pressed=true]{color:#2a3428;background:linear-gradient(120deg,#dca94f,#f2d183);border-color:#ffe8b0;box-shadow:0 3px #765f32}.profiles button[aria-pressed=true] span{color:#514422}.legend-head{letter-spacing:1.4px;text-align:center;color:#dbc48e;margin:19px 0 8px;font-size:9px}#legend{flex-direction:column;gap:5px;display:flex}.prize{font-variant-numeric:tabular-nums;background:#082b2a66;border:1px solid #63807b66;border-radius:4px;grid-template-columns:11px 42px 1fr 31px;align-items:center;gap:5px;padding:6px;display:grid}.prize i{border:1px solid #c2be9c;border-radius:50%;width:10px;height:10px}.prize b{font-size:11px}.prize strong{text-align:right;font-size:13px}.prize span{text-align:right;color:#c9d1be;font-size:10px}.prize.selected{background:#345e4e;outline:2px solid #e9c473}.programme .note{letter-spacing:.3px;margin-top:12px;font-size:8px}.wheel-scene{grid-template-rows:minmax(0,1fr) 75px;align-items:center;gap:8px;height:100%;min-height:0;display:grid}.wheel-wrap{width:min(100%,calc(100dvh - var(--nav-height,0px) - 270px));aspect-ratio:1;isolation:isolate;filter:drop-shadow(0 12px 12px #092324aa);max-height:100%;margin:auto;position:relative}canvas{z-index:2;width:100%;height:100%;display:block;position:relative}.pointer{z-index:5;color:#fff0b5;text-shadow:0 2px 3px #372707,0 0 12px #e6ac3c;font-size:34px;line-height:1;position:absolute;top:-1%;left:50%;transform:translate(-50%)}.pointer:after{content:"";border-top:25px solid #fcd487;border-left:7px solid #0000;border-right:7px solid #0000;position:absolute;top:21px;left:10px}.hub{z-index:3;text-align:center;color:#ffe7a7;background:radial-gradient(circle at 35% 25%,#315c54,#132e32 70%);border:5px double #d4ae64;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:30%;box-shadow:0 7px 16px #041d33aa,inset 0 0 20px #dec58544}.hub span{letter-spacing:1px;font-size:clamp(7px,1vw,11px);font-weight:800}.hub strong{margin:4px 0;font-family:Georgia,serif;font-size:clamp(24px,3.5vw,52px);line-height:1.2}.hub small{letter-spacing:1px;color:#cdcfb6;font-size:8px}.rays{z-index:0;border:1px dashed #eeb75955;border-radius:50%;animation:60s linear infinite sun-rays;position:absolute;inset:-5%}.rays:after{content:"";border-radius:50%;position:absolute;inset:6%;box-shadow:0 0 50px #e6ac3522}.score{text-align:center;background:linear-gradient(90deg,#0000,#0a2e33df 15% 85%,#0000);border-top:1px solid #cfb37477;flex-wrap:wrap;place-content:center;align-items:center;gap:3px 14px;min-height:70px;padding:7px 5px;display:flex}.score>span{color:#f2d7a3;font-size:12px;font-weight:800}.score>b{color:#ffe8aa;font-variant-numeric:tabular-nums;font-size:33px;line-height:1}.score>small{color:#e8d5b2;width:100%;font-size:12px}.conductor{pointer-events:none;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-height:0;max-height:590px;display:flex;position:relative}.conductor img{object-fit:contain;object-position:center bottom;filter:drop-shadow(0 7px 8px #07312aaa);transform-origin:50% 85%;z-index:2;width:125%;height:90%;animation:5s ease-in-out infinite conduct-idle;position:relative}.conductor>div{text-align:center;z-index:3;background:#143838bf;border-bottom:1px solid #ad8f58;padding:5px 15px}.conductor b{letter-spacing:5px;font-family:Georgia,serif;font-size:25px;display:block}.conductor span{letter-spacing:1px;font-size:8px}footer{background:#0e3039ed;border-top:2px solid #c0a164;justify-content:center;align-items:center;gap:30px;padding:10px 20px;display:flex;box-shadow:0 -7px 30px #071f3455}footer small{letter-spacing:1.3px;color:#c4cebb;margin-bottom:5px;font-size:9px;display:block}footer b{font-variant-numeric:tabular-nums;font-size:24px}.stake{flex-direction:column;align-items:center;display:flex}.stake span{align-items:center;gap:13px;display:flex}.stake button{border-radius:50%;width:30px;height:30px;font-size:20px}.primary{color:#293e33;letter-spacing:.8px;background:linear-gradient(#f4d88d,#dba751);border:2px solid #fde4a8;border-radius:7px;padding:16px 24px;font-size:14px;box-shadow:0 4px #8d652e}#speed{padding:12px;font-size:10px}.intro{z-index:20;background:#113637;grid-template-rows:minmax(0,1fr) auto;display:grid;position:absolute;inset:0}.intro-art{background:radial-gradient(#ae6c2d55,#0f2d2e);justify-content:center;height:100%;min-height:0;display:flex;position:relative;overflow:hidden}.cover{object-fit:contain;width:100%;height:100%}.intro-hero,.intro h1{display:none}.intro-copy{grid-template-columns:1fr auto;align-items:center;gap:5px 18px;width:100%;max-width:1150px;margin:auto;padding:13px 25px 17px;display:grid}.intro-copy h2{grid-column:1;margin:0;font:700 25px Georgia,serif}.intro-copy p{color:#e2d4b6;grid-column:1;margin:0;font-size:13px}.intro-copy small{letter-spacing:.7px;font-size:9px}.intro-copy button{grid-area:1/2/4;min-width:225px}.intro-copy small:last-child{text-align:center;grid-column:1/-1;margin-top:8px}.spinning .conductor img{animation:.55s ease-in-out infinite alternate conduct}.spinning .hub strong{animation:4s linear infinite sun-rays}.win .rays{border-color:#ffdf98;box-shadow:0 0 35px #ffdc8644}.win .hub{box-shadow:0 0 25px #efc963aa,inset 0 0 22px #c79b3666}.win .score>b{animation:.55s ease-out score-arrive}.win .conductor img{animation:.8s ease-in-out 2 alternate conduct}.partial .hub,.miss .hub{border-color:#bac7b3}dialog{color:#f3e1bc;background:#123538;border:2px solid #d9b573;border-radius:18px;width:calc(100% - 28px);max-width:740px;max-height:85dvh;padding:25px;overflow:auto;box-shadow:0 20px 80px #041923bb}dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#07222abf}dialog .close{float:right;width:34px;height:34px;font-size:23px}dialog h2,dialog h3{font-family:Georgia,serif}dialog p{font-size:14px;line-height:1.6}dialog table{border-collapse:collapse;text-align:center;width:100%;font-size:12px}td,th{border-bottom:1px solid #5d827b;padding:8px 4px}dialog details{margin-top:15px;font-size:12px}@keyframes conduct-idle{50%{transform:translateY(-4px)rotate(.4deg)}}@keyframes conduct{to{transform:rotate(-2deg)translateY(-5px)}}@keyframes sun-rays{to{transform:rotate(360deg)}}@keyframes score-arrive{0%{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (width<=1100px){.stage{grid-template-columns:205px minmax(260px,1fr) 19%;gap:10px;padding:12px 20px}.programme{padding:12px}.programme h2{font-size:24px}.profiles button{padding:9px}.profiles b{font-size:13px}.profiles span{font-size:8px}.conductor b{font-size:21px}.conductor img{width:135%}.wheel-wrap{width:min(100%,calc(100dvh - var(--nav-height,0px) - 240px))}}@media (height<=570px) and (orientation:landscape){.pavilion{grid-template-rows:42px minmax(0,1fr) 62px}header{padding:5px 20px}.wordmark{font-size:22px!important}header span{font-size:10px}header button{width:30px;height:30px;font-size:19px}.stage{grid-template-columns:195px minmax(220px,1fr) 19%;gap:12px;padding:9px 20px}.programme{border-radius:30px 30px 7px 7px;padding:9px 12px}.programme>small{margin-top:3px;font-size:7px}.programme h2{margin:7px 0;font-size:19px}.programme h2 br{display:none}.profiles{gap:4px}.profiles button{padding:6px 7px}.profiles b{font-size:12px}.profiles span{font-size:7px}.legend-head{margin:10px 0 5px;font-size:8px}.prize{grid-template-columns:9px 34px 1fr 26px;gap:4px;padding:4px 5px}.prize i{width:8px;height:8px}.prize b{font-size:10px}.prize strong{font-size:12px}.prize span{font-size:9px}.programme .note{margin-top:6px;font-size:7px}.wheel-scene{grid-template-rows:minmax(0,1fr) 59px;gap:4px}.wheel-wrap{width:min(100%,calc(100dvh - var(--nav-height,0px) - 189px))}.score{min-height:53px;padding:4px}.score>span{font-size:10px}.score>b{font-size:26px}.score>small{font-size:10px}.hub span{font-size:7px}.hub strong{font-size:28px}.hub small{font-size:6px}.hub{border-width:3px}.pointer{font-size:25px}.pointer:after{border-top-width:18px;border-left-width:5px;border-right-width:5px;top:16px;left:8px}.conductor>div{padding:4px 8px}.conductor span{font-size:7px}.conductor b{font-size:18px}footer{gap:25px;padding:6px 20px}footer small{margin-bottom:3px;font-size:8px}footer b{font-size:20px}.primary{padding:11px 20px;font-size:12px}#speed{padding:10px;font-size:9px}.intro-copy{gap:3px 15px;padding:8px 20px 12px}.intro-copy h2{font-size:20px}.intro-copy p{font-size:11px}.intro-copy small{font-size:8px}.intro-copy small:last-child{margin-top:4px}}@media (height<=430px) and (orientation:landscape){.pavilion{grid-template-rows:34px minmax(0,1fr) 54px}.stage{grid-template-columns:185px minmax(200px,1fr) 18%;padding:5px 18px}.programme{border-radius:16px 16px 5px 5px;padding:6px 9px}.programme h2,.programme>small:first-child,.programme .note{display:none}.profiles{flex-direction:row;gap:3px}.profiles button{flex-direction:column;flex:1;gap:3px;padding:5px 4px;display:flex}.profiles b{font-size:9px}.profiles span{font-size:6px}.legend-head{margin:8px 0 4px;font-size:7px}.prize{padding:4px}.prize b{font-size:9px}.prize strong{font-size:11px}#legend{gap:4px}.wheel-wrap{width:min(100%,calc(100dvh - var(--nav-height,0px) - 157px))}.wheel-scene{grid-template-rows:minmax(0,1fr) 48px;gap:1px}.score{gap:2px 9px;min-height:46px}.score>span{font-size:9px}.score>b{font-size:22px}.score>small{font-size:9px}.hub strong{font-size:23px}.hub span{letter-spacing:.2px;font-size:6px}.hub small{letter-spacing:.4px;font-size:5px}.conductor b{font-size:14px}.conductor span{font-size:6px}header button{width:25px;height:25px;font-size:16px}header .wordmark{font-size:18px!important}header span{font-size:9px}footer b{font-size:18px}footer small{font-size:7px}.primary{padding:9px 15px;font-size:11px}.stake button{width:26px;height:26px;font-size:18px}.conductor img{height:89%}}@media (width<=700px) and (orientation:portrait){.pavilion{background-position:50%;grid-template-rows:46px minmax(0,1fr) 124px}.stage{grid-template-rows:auto minmax(0,1fr);grid-template-columns:1fr;gap:8px;padding:9px 13px 6px;display:grid;position:relative}.programme{box-shadow:none;background:0 0;border:0;border-radius:0;flex-direction:column;grid-row:1;width:100%;padding:0;display:flex}.programme>small:first-child,.programme h2,.programme .note{display:none}.profiles{flex-direction:row;gap:7px}.profiles button{flex-direction:column;flex:1;justify-content:center;gap:3px;padding:9px 4px}.profiles b{font-size:13px}.profiles span{font-size:8px}.legend-head{margin:11px 0 5px;font-size:8px}#legend{flex-direction:row;justify-content:center;gap:5px}.prize{background:#0c2e32e6;flex-direction:column;flex:1;gap:4px;padding:7px 5px;display:flex}.prize i{border-radius:1px;width:18px;height:4px}.prize b{font-size:11px}.prize strong{font-size:15px}.prize span{font-size:10px}.wheel-scene{grid-row:2;grid-template-rows:minmax(0,1fr) 76px;gap:4px}.wheel-wrap{width:min(100%,calc(100dvh - var(--nav-height,0px) - 436px));min-width:205px}.hub strong{font-size:32px}.hub span{letter-spacing:.5px;font-size:7px}.hub small{font-size:6px}.hub{border-width:3px}.conductor{z-index:6;width:78px;height:130px;position:absolute;bottom:87px;right:-3px}.conductor img{filter:drop-shadow(0 2px 3px #123333);width:100%;height:100%}.conductor>div{display:none}.score{gap:3px 12px;min-height:75px}.score>span{font-size:11px}.score>b{font-size:31px}.score>small{font-size:11px}header{gap:10px;padding:6px 12px}header .wordmark{font-size:22px!important}header span{display:none}header button:first-of-type{margin-left:auto}header button{width:29px;height:29px;font-size:18px}footer{grid-template-columns:1fr 1fr;gap:8px 14px;padding:9px 17px;display:grid}footer b{font-size:21px}footer small{font-size:8px}.stake{align-items:flex-end}.stake span{gap:10px}.primary{white-space:nowrap;padding:11px 7px;font-size:11px}#speed{justify-self:end;min-width:99px;padding:12px;font-size:10px}.intro{background:url(/demos/saffron-spin/assets/world-BpsODtmJ.webp) 50%/cover}.cover{display:none}.intro-art{background:0 0}.intro h1{text-align:center;letter-spacing:-1px;color:#ffe4a5;text-shadow:0 3px #553b1f,0 7px 18px #102e2e;z-index:2;width:100%;margin:0;font:900 43px/.94 Georgia,serif;display:block;position:absolute;top:20px}.intro h1 b{font-size:55px}.intro-hero{object-fit:contain;object-position:center bottom;max-width:90%;height:calc(100% - 95px);display:block;position:absolute;top:95px;bottom:0}.intro-copy{text-align:center;background:#102d31e8;border-top:1px solid #b69b5b;flex-direction:column;gap:10px;padding:16px 18px;display:flex}.intro-copy h2{font-size:25px}.intro-copy p{font-size:12px;line-height:1.4}.intro-copy button{width:100%;padding:14px;font-size:13px}.intro-copy small{font-size:8px}.intro-copy small:last-child{margin-top:0}dialog{padding:17px}dialog h2{font-size:23px}dialog p{font-size:13px}th,td{padding:6px 3px;font-size:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (width<=700px) and (orientation:portrait) and (height<=720px){.pavilion{grid-template-rows:42px minmax(0,1fr) 104px}.stage{gap:6px;padding:6px 12px}.profiles button{gap:2px;padding:6px 4px}.profiles b{font-size:12px}.profiles span{font-size:7px}.legend-head{margin:7px 0 4px;font-size:7px}.prize{gap:3px;padding:5px}.prize strong{font-size:13px}.prize b{font-size:10px}.prize span{font-size:9px}.wheel-scene{grid-template-rows:minmax(0,1fr) 60px;gap:4px}.wheel-wrap{min-width:0;max-height:none}.hub strong{font-size:25px}.hub span{font-size:6px}.hub small{font-size:5px}.score{min-height:58px}.score>b{font-size:27px}.score>span,.score>small{font-size:10px}.conductor{width:55px;height:90px;bottom:74px}footer{gap:5px 12px;padding:6px 16px}footer b{font-size:19px}footer small{margin-bottom:3px;font-size:7px}.stake button{width:25px;height:25px}.primary{padding:9px 6px;font-size:10px}#speed{padding:9px;font-size:9px}.intro-copy{gap:7px;padding:12px 14px}.intro-copy h2{font-size:21px}.intro-copy p{font-size:10px}.intro-copy button{padding:11px;font-size:12px}.intro h1{font-size:34px;top:12px}.intro h1 b{font-size:44px}.intro-hero{height:calc(100% - 76px);top:76px}}.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)}}