/* Three asset-backed physical housings. Nine-slice protects the caps on phones.
   Values are measured against 1536 x 940 cropped source assets. */
body{background:#25251f;color:#eeeadd}.page-top,main,footer{width:min(1240px,calc(100% - 48px))}.page-top{height:71px}.intro{padding:3px 2px 18px}.intro h1{font-size:43px}.intro>p{font-family:var(--pixel);font-size:14px}.prototype-label{border-color:#686a60}.variant-nav{display:flex;gap:12px;justify-content:center;max-width:640px;margin:0 auto 0}.variant-nav button{flex:1;display:flex;align-items:center;gap:10px;padding:6px 11px 6px 5px;border:1px solid #55594f;border-radius:7px;background:#2b2c25;color:#c9cfc0;min-width:0}.variant-nav button img{width:74px;height:49px;object-fit:contain;border-radius:3px;filter:saturate(.8)}.variant-nav button span{display:flex;flex-direction:column;align-items:start;font-size:12px;white-space:nowrap}.variant-nav small{font-family:var(--pixel);font-size:10px;opacity:.55}.variant-nav button.active{border-color:#e2d4ab;background:#36382d;color:#fff3ce}.variant-nav button.active img{filter:none}.variant-nav button:hover{background:#393d31}
.physical-cabinet{container-type:inline-size;--slice:187 188 325 186;--top:12.1745cqw;--right:12.2396cqw;--bottom:21.1589cqw;--left:12.1094cqw;--shell:url('shells/silver.webp');border:0;border-radius:0;background:none;box-shadow:none;padding:0;color:#eae7d7;position:relative}.physical-stage{position:relative;width:100%;aspect-ratio:1536/940;isolation:isolate}.physical-shell{position:absolute;inset:0;z-index:4;pointer-events:none;border-style:solid;border-color:transparent;border-width:var(--top) var(--right) var(--bottom) var(--left);border-image-source:var(--shell);border-image-slice:var(--slice);border-image-width:1;border-image-repeat:stretch}.physical-cabinet .glass-wrap{position:absolute;top:var(--top);right:var(--right);bottom:var(--bottom);left:var(--left);border:0;border-radius:0;padding:0;box-shadow:none;background:#0876bc;overflow:hidden;z-index:2}.physical-cabinet .tank{height:100%;width:100%;background:#0876bc;border-radius:0}.physical-cabinet .glass-glare{border-radius:0;box-shadow:inset 0 0 12px #00216077;background:linear-gradient(90deg,#fff2,transparent 2%,transparent 98%,#fff1)}.physical-cabinet .entrance-label{top:15px;font-size:15px;color:#fff7c5;text-shadow:0 1px 5px #002b6f}.physical-power{position:absolute;z-index:5;width:7%;height:7%;right:22.5%;bottom:10.3%;border-radius:3px}.physical-power:focus-visible{outline:2px solid #f4dfad;outline-offset:0}.physical-power:hover{background:#fff1}.view-caption{display:flex;justify-content:space-between;max-width:860px;margin:-38px auto 12px;color:#bdc3b4;font-family:var(--pixel);font-size:11px;padding:0 12px}.physical-cabinet .console{margin:0 auto;max-width:890px;padding:10px 12px;min-height:65px;gap:18px;justify-content:space-between;background:none;border-top:1px solid #53574b}.physical-cabinet .machine-button{background:#30372e;color:#e3e6d4;border:1px solid #68715d;box-shadow:none;padding:8px 13px;border-radius:5px;font-size:12px}.physical-cabinet .enter-button{font-size:12px;padding:9px 16px;box-shadow:none;border-radius:5px;gap:15px}.glass-toggle{font-size:11px;color:#d8ddcd;border-bottom:1px solid #68715d;padding:7px 0;white-space:nowrap}.glass-toggle span{color:#dbe8ad;margin-left:7px}.motion-control{font-size:11px;white-space:nowrap;display:flex;align-items:center;gap:10px}.motion-control input{display:inline-block;width:90px;min-width:50px;accent-color:#c4d391;padding:0;margin:0;border:0;background:none;height:24px}.under-caption{max-width:890px;margin:15px auto 28px;font-size:11px;padding:0 12px}.under-caption button{font-size:11px}footer{max-width:890px;padding-top:18px;margin-bottom:10px}.acetate-roller{position:absolute;z-index:3;top:calc(var(--top) + 2cqw);bottom:calc(var(--bottom) + 1cqw);width:2.1%;pointer-events:none;opacity:.25;background-image:linear-gradient(90deg,#0008,#fff3 40%,#fff1 65%,#000b),url('shells/film-lofi.webp');background-size:100% 100%,600% 100%;background-repeat:no-repeat,repeat-x;animation:acetate-turn 7s linear infinite}.acetate-roller.left{left:calc(var(--left) - 1.8cqw)}.acetate-roller.right{right:calc(var(--right) - 1.8cqw);animation-direction:reverse}.is-paused .acetate-roller{animation-play-state:paused}
.physical-cabinet[data-variant=toy]{--slice:183 230 302 237;--top:11.9141cqw;--right:14.974cqw;--bottom:19.6615cqw;--left:15.4297cqw;--shell:url('shells/toy.webp')}.physical-cabinet[data-variant=toy] .glass-wrap{border-radius:3% / 7%}.physical-cabinet[data-variant=toy] .physical-power{right:13%;bottom:15%;border-radius:50%;width:7%;height:8%}.physical-cabinet[data-variant=toy] .glass-glare{border-radius:3% / 7%;background:linear-gradient(108deg,#bab2ff22,transparent 15%,transparent 90%,#fff3)}
.physical-cabinet[data-variant=reel]{--slice:172 287 313 285;--top:11.1979cqw;--right:18.6849cqw;--bottom:20.3776cqw;--left:18.5547cqw;--shell:url('shells/reel.webp')}.physical-cabinet[data-variant=reel] .physical-power{right:auto;left:8%;bottom:10.5%;width:3%;height:9%}.physical-cabinet[data-variant=reel] .acetate-roller{z-index:5;width:6.4%;opacity:.45;top:9cqw;bottom:18cqw;border-radius:9px;background-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}.physical-cabinet[data-variant=reel] .acetate-roller.left{left:8.4%}.physical-cabinet[data-variant=reel] .acetate-roller.right{right:8.4%}
@keyframes acetate-turn{to{background-position:0 0,600% 0}}
.screen-mode{display:flex;align-items:center;justify-content:center;gap:15px;padding:14px 0 5px;color:#c2c7b5;font-size:11px}.screen-mode button{border:1px solid #79816b;border-radius:5px;padding:8px 18px;color:#e9edda;background:#30392d;font-size:12px}.screen-mode button:hover{background:#424c39}.screensaver-tools{display:none}.saver-active{overflow:hidden}.physical-cabinet.screen-saver{position:fixed!important;inset:0!important;z-index:100;width:100vw!important;height:100dvh!important;max-width:none!important;margin:0!important;background:#003366;color:#fff;container-type:inline-size}.screen-saver .physical-stage{height:100%;width:100%;aspect-ratio:auto}.screen-saver .physical-shell,.screen-saver .physical-power,.screen-saver .console,.screen-saver .view-caption,.screen-saver .screen-mode{display:none}.screen-saver .glass-wrap{inset:0!important;border-radius:0!important}.screen-saver .tank{height:100%!important}.screen-saver .acetate-roller{display:none}.screen-saver .screensaver-tools{display:flex;justify-content:space-between;align-items:center;position:absolute;left:0;right:0;bottom:0;padding:20px 28px;background:linear-gradient(transparent,#001329b0);z-index:10;opacity:0;transition:opacity .5s;pointer-events:none;font-family:var(--pixel);font-size:12px}.screen-saver.saver-awake .screensaver-tools{opacity:1;pointer-events:auto}.screensaver-tools button{border:1px solid #d4e4dd66;background:#08254299;color:#fff;padding:8px 17px;border-radius:4px;font-size:12px}.screen-saver:not(.saver-awake),.screen-saver:not(.saver-awake) canvas{cursor:none!important}
@media(min-width:1500px){.page-top,main{max-width:1330px}.physical-cabinet .tank{height:100%}}
@media(max-width:760px){.page-top,main,footer{width:calc(100% - 24px)}.page-top{height:65px}.intro{padding:3px 3px 16px}.intro h1{font-size:38px}.intro>p{font-size:10px;max-width:160px}.variant-nav{gap:6px;margin-bottom:10px}.variant-nav button{padding:4px;display:block;flex:1}.variant-nav button img{width:100%;height:45px}.variant-nav button span{font-size:10px;display:block;white-space:nowrap}.variant-nav small{display:none}.physical-stage{aspect-ratio:.93}.physical-shell{border-image-repeat:stretch}.physical-cabinet .glass-wrap{border-radius:0}.physical-cabinet[data-variant=toy] .glass-wrap{border-radius:4% / 2%}.physical-cabinet .physical-power{bottom:6.2%;right:22%;height:4.3%}.physical-cabinet[data-variant=toy] .physical-power{bottom:8.3%;right:13%;height:5%}.physical-cabinet[data-variant=reel] .physical-power{bottom:6.5%;left:8%;height:5%}.view-caption{font-size:10px;margin:2px auto 10px;padding:0 5px}.physical-cabinet .console{gap:11px;padding:12px 5px;flex-wrap:wrap;min-height:0}.physical-cabinet .console-left{gap:7px}.physical-cabinet .machine-button{padding:7px 10px;font-size:11px}.physical-cabinet .enter-button{padding:8px 13px;font-size:11px;order:2;margin-left:auto}.glass-toggle{font-size:10px;margin-left:auto}.motion-control{font-size:10px;order:3;flex-basis:100%;justify-content:center;border-top:1px solid #454c40;padding-top:9px}.motion-control input{width:130px}.under-caption{font-size:10px;margin:5px auto 24px;align-items:start;padding:0 5px}.under-caption button{font-size:10px}.under-caption>span{max-width:52%}footer{font-size:10px;gap:4px;padding-top:10px}.physical-cabinet .entrance-label{font-size:12px;top:14px}}
@media(prefers-reduced-motion:reduce){.acetate-roller{animation:none}}