.title1{font-family:var(--font-family-title);font-size:var(--font-size-20);line-height:var(--line-height-20)}.title2{font-family:var(--font-family-title);font-size:var(--font-size-15);line-height:var(--line-height-15)}.title3{font-family:var(--font-family-title);font-size:var(--font-size-10);line-height:var(--line-height-10)}.container{max-inline-size:48rem;padding:var(--spacing-4);margin:auto}dialog{transition-behavior:allow-discrete;border:0;transition-property:opacity,translate,display,overlay;transition-duration:.5s}dialog::backdrop{background-color:var(--color-primary-black);transition-behavior:allow-discrete;opacity:0;transition-property:opacity,display,overlay;transition-duration:.5s}dialog[open]::backdrop{opacity:.8}@starting-style{dialog[open]::backdrop{opacity:0}}dialog .x-icon{color:var(--color-primary-grey-light);font-size:var(--font-size-15);position:absolute;inset-block-start:-3.125rem;inset-inline-end:0}dialog .dialog-container{inline-size:30rem;max-inline-size:calc(100% - var(--spacing-4) * 2);padding:var(--spacing-4);background-color:var(--color-primary-light);z-index:101;transition-property:opacity,transform;transition-duration:.5s;transition-timing-function:linear(0,.402 7.4%,.711 15.3%,.929 23.7%,1.008 28.2%,1.067 33%,1.099 36.9%,1.12 41%,1.13 45.4%,1.13 50.1%,1.111 58.5%,1.019 83.2%,1.004 91.3%,1);border-radius:var(--border-radius-medium);position:fixed;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)scale(1)}@starting-style{dialog .dialog-container{opacity:0;transform:translate(-50%,-50%)scale(.5)}}dialog:not([open]) .dialog-container{opacity:0;transform:translate(-50%,-50%)scale(.5)}.button.default{--background-color:var(--color-primary-grey-light);--border-color:var(--color-primary-grey-light);--color:var(--color-primary-black)}.button.secondary{--background-color:var(--color-secondary-light);--border-color:var(--color-secondary-light);--color:var(--color-secondary-white)}.button{border:solid 1px var(--border-color);padding:var(--spacing-2);align-items:center;gap:var(--spacing-2);color:var(--color);background:var(--background-color);border-radius:var(--border-radius-medium);flex-direction:row;display:flex}.button:hover:not(:active),.button.hollow{color:var(--border-color);background:0 0}.button.hollow:hover:not(:active){color:var(--color);background:var(--background-color)}.device{background-color:var(--color-primary-light);padding:var(--spacing-4);border-radius:var(--border-radius-large);inline-size:fit-content;max-inline-size:100%;box-shadow:0 0 5px 0 var(--color-shadow-white);margin:auto}.device .screen-container{aspect-ratio:10/9;background-color:var(--color-primary-mid);border-radius:var(--border-radius-large);inline-size:30rem;max-inline-size:100%;position:relative}.device .screen-container:has(input:focus){border:solid 1px var(--color-primary-white)}.device .screen-container .insert-rom-container{justify-content:center;align-items:center;gap:var(--spacing-4);flex-direction:column;display:flex;position:absolute;inset:0}.device .screen-container .insert-rom-container svg{font-size:var(--font-size-10)}.device .screen-container .insert-rom-container input{z-index:1;cursor:pointer;opacity:0;position:absolute;inset:0}.device .screen-container canvas{-webkit-user-select:none;user-select:none;pointer-events:none;border-radius:var(--border-radius-large);block-size:100%;inline-size:100%;position:absolute;inset:0}.device .controls{align-items:center;gap:var(--spacing-8);-webkit-user-select:none;user-select:none;touch-action:none;-webkit-touch-callout:none;grid-template-columns:repeat(3,1fr);margin-block-start:var(--spacing-4);display:grid}.device .controls .direction-container{block-size:7.8125rem;inline-size:7.8125rem;margin:auto;display:inline-block;position:relative;transform:translateY(-.5rem)}.device .controls .direction-container .up-direction{background-color:var(--color-primary-black);border-radius:var(--border-radius-medium);block-size:3.125rem;inline-size:1.5625rem;box-shadow:0 0 5px 0 var(--color-shadow-black);position:absolute;inset-block-start:0;inset-inline-start:50%;transform:translate(-50%)}.device .controls .direction-container .up-direction:after{content:"";position:absolute;inset-block:-1.25rem 1.25rem;inset-inline:-1.25rem}.device .controls .direction-container .down-direction{background-color:var(--color-primary-black);border-radius:var(--border-radius-medium);block-size:3.125rem;inline-size:1.5625rem;box-shadow:0 0 5px 0 var(--color-shadow-black);position:absolute;inset-block-end:0;inset-inline-start:50%;transform:translate(-50%)}.device .controls .direction-container .down-direction:after{content:"";position:absolute;inset-block:1.25rem -1.25rem;inset-inline:-1.25rem}.device .controls .direction-container .left-direction{background-color:var(--color-primary-black);border-radius:var(--border-radius-medium);block-size:1.5625rem;inline-size:3.125rem;box-shadow:0 0 5px 0 var(--color-shadow-black);position:absolute;inset-block-start:50%;inset-inline-start:0;transform:translateY(-50%)}.device .controls .direction-container .left-direction:after{content:"";position:absolute;inset-block:-1.25rem;inset-inline:-1.25rem 1.25rem}.device .controls .direction-container .right-direction{background-color:var(--color-primary-black);border-radius:var(--border-radius-medium);block-size:1.5625rem;inline-size:3.125rem;box-shadow:0 0 5px 0 var(--color-shadow-black);position:absolute;inset-block-start:50%;inset-inline-end:0;transform:translateY(-50%)}.device .controls .direction-container .right-direction:after{content:"";position:absolute;inset-block:-1.25rem;inset-inline:1.25rem -1.25rem}.device .controls .direction-container .up-direction.pressed,.device .controls .direction-container .down-direction.pressed,.device .controls .direction-container .left-direction.pressed,.device .controls .direction-container .right-direction.pressed{background-color:var(--color-secondary-light);box-shadow:none}.device .controls .menu-container{justify-content:space-between;align-items:center;gap:var(--spacing-4);flex-direction:row;margin:auto;display:flex}.device .controls .menu-container .select-container,.device .controls .menu-container .start-container{justify-content:center;align-items:center;gap:var(--spacing-4);flex-direction:column;display:flex}.device .controls .menu-container .select-container button,.device .controls .menu-container .start-container button{background-color:var(--color-primary-black);border-radius:var(--border-radius-medium);block-size:1.25rem;inline-size:3.125rem;box-shadow:0 0 5px 0 var(--color-shadow-black);position:relative}.device .controls .menu-container .select-container button:after,.device .controls .menu-container .start-container button:after{content:"";position:absolute;inset:-1.25rem}.device .controls .menu-container .select-container button.pressed,.device .controls .menu-container .start-container button.pressed{background-color:var(--color-secondary-light);box-shadow:none}.device .controls .menu-container .select-container span,.device .controls .menu-container .start-container span{font-size:var(--font-size-1);color:var(--color-primary-grey-light)}.device .controls .menu-container .select-container button:after{inset-inline-end:-.3125rem}.device .controls .menu-container .start-container button:after{inset-inline-start:-.3125rem}.device .controls .buttons-container{justify-content:space-between;align-items:center;gap:var(--spacing-4);flex-direction:row;margin:auto;display:flex}.device .controls .buttons-container .a-button-container,.device .controls .buttons-container .b-button-container{justify-content:center;align-items:center;gap:var(--spacing-4);flex-direction:column;display:flex}.device .controls .buttons-container .a-button-container button,.device .controls .buttons-container .b-button-container button{background:radial-gradient(var(--color-secondary-light),var(--color-secondary));block-size:3.125rem;inline-size:3.125rem;box-shadow:0 0 5px 0 var(--color-shadow-black);border-radius:50%;position:relative}.device .controls .buttons-container .a-button-container button:after,.device .controls .buttons-container .b-button-container button:after{content:"";position:absolute;inset:-20px}.device .controls .buttons-container .a-button-container button.pressed,.device .controls .buttons-container .b-button-container button.pressed{background:var(--color-secondary-light);box-shadow:none}.device .controls .buttons-container .a-button-container span,.device .controls .buttons-container .b-button-container span{font-size:var(--font-size-1);color:var(--color-primary-grey-light)}.device .controls .buttons-container .b-button-container button:after{inset-inline-end:-.4375rem}.device .controls .buttons-container .a-button-container button:after{inset-inline-start:-.4375rem}.device .settings{align-items:center;gap:var(--spacing-4);flex-flow:wrap;margin-block-start:var(--spacing-8);display:flex}.device .console{background-color:var(--color-primary-mid);border-radius:var(--border-radius-medium);padding:var(--spacing-4);aspect-ratio:10/9;overflow:auto}.device .keyboard-modal{color:var(--color-primary-grey-light)}.device .keyboard-modal table{inline-size:100%;display:block}.device .keyboard-modal table thead,.device .keyboard-modal table tbody{display:block}.device .keyboard-modal table tr{grid-template-columns:repeat(2,1fr);display:grid}.device .keyboard-modal table td,.device .keyboard-modal table th{line-height:var(--line-height-3);text-align:center}.device .keyboard-modal table th{border-block-end:solid 1px var(--color-primary-white);color:var(--color-primary-white);padding:var(--spacing-2)}.device .keyboard-modal table td{padding:var(--spacing-4)}.device .keyboard-modal .keyboard-button{background-color:var(--color-primary-grey-light);color:var(--color-primary-black);padding:var(--spacing-2);border-radius:var(--border-radius-medium)}@media(width<=30.625rem){.device .controls{grid-template-columns:repeat(2,1fr)}.device .controls .menu-container{grid-area:2/1/auto/3}}@media(width<=21.875rem){.device .controls{grid-template-columns:1fr}.device .controls .menu-container{grid-area:3/1}}:root{--color-primary:#0e141b;--color-primary-white:#f8fafc;--color-primary-black:#0a0f14;--color-primary-mid:#111922;--color-primary-light:#151e28;--color-shadow-white:#f8fafc33;--color-shadow-black:#0a0f14cc;--color-primary-grey-light:#b3b3b3;--color-secondary:#ad24db;--color-secondary-light:#c665e6;--font-family-text:Helvetica, sans-serif;--font-family-title:Helvetica, sans-serif;--font-size-1:.75rem;--line-height-1:1.125rem;--font-size-2:.875rem;--line-height-2:1.3125rem;--font-size-3:1rem;--line-height-3:1.5rem;--font-size-4:1.125rem;--line-height-4:1.6875rem;--font-size-5:1.25rem;--line-height-5:1.875rem;--font-size-6:1.375rem;--line-height-6:2.0625rem;--font-size-7:1.5rem;--line-height-7:2.25rem;--font-size-8:1.625rem;--line-height-8:2.4375rem;--font-size-9:1.75rem;--line-height-9:2.625rem;--font-size-10:1.875rem;--line-height-10:2.8125rem;--font-size-11:2rem;--line-height-11:3rem;--font-size-12:2.125rem;--line-height-12:3.1875rem;--font-size-13:2.25rem;--line-height-13:3.375rem;--font-size-14:2.375rem;--line-height-14:3.5625rem;--font-size-15:2.5rem;--line-height-15:3.75rem;--font-size-16:2.625rem;--line-height-16:3.9375rem;--font-size-17:2.75rem;--line-height-17:4.125rem;--font-size-18:2.875rem;--line-height-18:4.3125rem;--font-size-19:3rem;--line-height-19:4.5rem;--font-size-20:3.125rem;--line-height-20:4.6875rem;--spacing-1:.25rem;--spacing-2:.5rem;--spacing-3:.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-7:1.75rem;--spacing-8:2rem;--spacing-9:2.25rem;--spacing-10:2.5rem;--spacing-11:2.75rem;--spacing-12:3rem;--spacing-13:3.25rem;--spacing-14:3.5rem;--spacing-15:3.75rem;--spacing-16:4rem;--spacing-17:4.25rem;--spacing-18:4.5rem;--spacing-19:4.75rem;--spacing-20:5rem;--border-radius-large:16px;--border-radius-medium:8px}*{box-sizing:border-box;font:inherit;outline-color:var(--color-primary-white);margin:0;padding:0}html,body{-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;background-color:var(--color-primary);color:var(--color-primary-white);font-family:var(--font-family-text);line-height:0}body{min-block-size:100vb;grid-template-rows:auto 1fr auto;grid-template-columns:100%;padding-block-end:var(--spacing-4);display:grid}body>*{inline-size:100%}p,a,pre{font-size:var(--font-size-3);line-height:var(--line-height-3)}a{color:var(--color-secondary-light)}a:hover{text-decoration:none}button{cursor:pointer;background:0 0;border:0}svg{block-size:1em;inline-size:1em}body>header,body>footer{text-align:center}body>footer ul{justify-content:center;align-items:center;gap:var(--spacing-2);flex-direction:row;list-style:none;display:flex}body>footer ul li{gap:var(--spacing-2);flex-direction:row;justify-content:center;align-items:center;display:flex}body>footer ul li:after{content:"|"}body>footer ul li:last-child:after{content:unset}@media(width<=23.125rem){body>footer ul{flex-direction:column}body>footer ul li:after{content:unset}}