@font-face{font-family:Megazoid;src:url(/assets/Megazoid-Regular-BTZMXVf9.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Megazoid Fill;src:url(/assets/Megazoid-Fill-B5_SDBMl.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Megazoid Shade Left;src:url(/assets/Megazoid-ShadeLeft-C3wSDDh7.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Megazoid Shade Right;src:url(/assets/Megazoid-ShadeRight-DGBPTOSs.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}*,*:before,*:after{box-sizing:border-box}body{--color-light: #e7e5e4;--color-dark: #0c0a09;--settings-margin: 1rem;--visual-control-size: 33;--shadow-y-offset: .15em;margin:0;overflow:hidden;color:var(--color-light);background:var(--color-dark);font-family:Megazoid,sans-serif;font-size:1.25rem}#app{position:fixed;inset:0;padding:1rem;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;opacity:0;animation:fadeIn .5s ease .5s forwards}h1,#instructions{font-size:2rem;text-align:center;text-wrap:balance}h1{margin:0 auto;padding-top:1rem}#instructions{margin-top:auto}#app.ready h1,#app.ready #instructions{display:none}#app:not(.ready) #controls{display:none}#controls{position:relative;margin-top:auto;display:flex;justify-content:center;align-items:flex-end;gap:16px}.control-button-wrapper{position:relative;display:grid;place-items:center;background:#b0b0b0;border-radius:50%}#shutter-wrapper{height:80px;width:80px}.control-button-wrapper:not(#shutter-wrapper){height:52px;width:52px}.control-button{all:unset;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.8),rgba(231,229,228,.4),var(--color-light));box-shadow:inset 2px 2px 4px #fff9,inset -2px -2px 4px #0000001a,2px 2px 4px #0000001a;transition:transform .2s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:center}#shutter{height:68px;width:68px}#open-menu,#flip-camera{height:40px;width:40px}.control-button:hover:not(:active){background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(231,229,228,.5),var(--color-light));box-shadow:inset 2px 2px 4px #ffffffb3,inset -2px -2px 4px #00000014,3px 3px 6px #0000001f;transform:scale(1.04)}.control-button:active{background:radial-gradient(circle at 30% 30%,rgba(231,229,228,.3),rgba(200,198,197,.6),var(--color-light));box-shadow:inset 3px 3px 6px #0003,inset -1px -1px 2px #ffffff4d,1px 1px 2px #0000001a;transform:scale(.88);transition:transform .1s ease,box-shadow .1s ease}canvas{position:fixed;inset:0;width:100dvw;height:100dvh;display:none;background:var(--color-dark)}#app.ready canvas{display:block}.flipped canvas{transform:scaleX(-1)}video{position:fixed;height:1px;width:1px;opacity:0}#settings{position:fixed;inset:0;pointer-events:none;margin:var(--settings-margin);overflow:auto;color:var(--color-dark);background:var(--color-light);border-radius:6px;opacity:0;transition:opacity .1s ease;display:flex;flex-direction:column}.settings-content{display:flex;flex-direction:column;flex:1;padding:1rem}body.settings-open #settings.populated{pointer-events:auto;opacity:.8}body:is(.settings-open,.controls-hidden) #controls{display:none}.scene-title,.scene-navigation{display:flex;align-items:center;justify-content:space-between;gap:.5em;font-size:2.5rem;font-family:Megazoid,sans-serif}.scene-navigation{margin-top:auto}.go-button{all:unset;cursor:pointer}#settings h2{font-size:1em;margin:.5rem 0 calc(1rem + var(--shadow-y-offset))}#settings h2,.go-button{font-weight:400;text-align:center;flex:1;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#settings h2:after,.go-button:after{content:attr(data-text);font-family:Megazoid Fill,sans-serif;z-index:-1;pointer-events:none;color:#888;position:absolute;top:var(--shadow-y-offset);left:50%;transform:translate(-50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.scene-navigation button{transition:color .1s ease}.scene-navigation button:hover:not(:active){color:#fff}.scene-navigation button:active,.scene-navigation button:focus{color:#f50}.scene-nav-button{all:unset;cursor:pointer;position:relative;display:inline-block}.scene-nav-button:before{content:attr(data-char);position:absolute;top:0;left:0;font-family:Megazoid Fill,sans-serif;z-index:-1;pointer-events:none;color:var(--color-light)}.scene-nav-button:after{content:attr(data-char);position:absolute;top:0;left:0;font-family:Megazoid Shade Right,sans-serif;z-index:-2;pointer-events:none;color:#888}#scene-next:after{font-family:Megazoid Shade Left,sans-serif}.visual-controls{display:flex;justify-content:space-evenly;counter-reset:item;text-align:center}.visual-controls>div{display:flex;flex-direction:column;justify-content:space-around;align-items:center;height:calc(var(--visual-control-size) * 1dvh);width:calc(var(--visual-control-size) * 1dvw);border:2px solid currentColor;border-radius:6px}.visual-controls>div>div{inline-size:calc(100% - 30px);position:relative;counter-increment:item;border-inline:2px solid currentColor}.visual-controls>div>div:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block;inline-size:100%;block-size:2px;background:currentColor}.visual-controls>div>div:after{content:counter(item);position:relative;display:inline-grid;width:2em;height:2em;place-items:center;border:2px solid currentColor;border-radius:50%;background:var(--color-light);writing-mode:horizontal-tb}#controls-y{writing-mode:vertical-lr}@media not (max-aspect-ratio:1){#controls-x{writing-mode:vertical-lr}#controls-y{writing-mode:horizontal-tb}}#controls-list-move{list-style:none;counter-reset:item;padding:1em 0 0 calc(((100 - var(--visual-control-size) * 2) * 1dvw - var(--settings-margin) * 2) / 3)}#controls-list-move>li{counter-increment:item;position:relative;padding-bottom:1em}#controls-list-move>li:before{content:counter(item);width:2em;height:2em;display:inline-grid;margin-right:1em;place-items:center;border-radius:50%;border:2px solid currentColor}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}button,a,[role=button]{user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none!important;-webkit-tap-highlight-color:transparent!important;-webkit-appearance:none!important;appearance:none!important}