body,html{padding:0;margin:0;font-family:Roboto,monospace;cursor:default;font-size:16px}html{color-scheme:dark}main{box-sizing:border-box}a{color:var(--primary-pale);text-decoration:none;transition:all .25s ease-in-out}a:visited{color:var(--secondary-pale)}a:active,a:focus,a:hover{opacity:.75;color:var(--primary)}h1{font-size:5em;line-height:100%}h2{font-size:3em;line-height:110%}h3{font-size:2em;line-height:120%}h4{font-size:1.5em;line-height:130%}h5{font-size:1em;line-height:140%}h1,h2,h3,h4,h5{margin-top:0;& option,& select{font-size:inherit;font-weight:inherit;font-family:inherit;vertical-align:baseline;border:none;background:transparent;text-align:center;padding:0 .2em}& select{margin-left:2em;-webkit-appearance:none;appearance:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;text-underline-offset:.2em;cursor:pointer;&:focus{outline:none}}}select{&[multiple]{font-size:1.2em;height:23ch;width:100%;& option{padding:.1em .5em}}}div{box-sizing:border-box;vertical-align:middle}table{border-collapse:collapse}td,th{text-align:start;padding:.25em .5em;width:-moz-fit-content;width:fit-content;white-space:pre}tr:nth-child(2n){background:#eee1}a,button{-webkit-user-select:none;user-select:none}button{cursor:pointer;box-sizing:border-box;-webkit-tap-highlight-color:transparent;font-size:inherit}button:hover{filter:brightness(.75)}button:disabled{filter:grayscale(.5) brightness(.75);cursor:not-allowed}svg{fill:currentColor;vertical-align:middle}code>pre{margin:0;padding:1.5% 1.5rem 1.5% 3%}.pointer{cursor:pointer}.token-line{height:1.14em}.warning{font-size:1em;margin:.5em auto;padding:.25em 1em;background:var(--dark,black);color:var(--light,white);border:.1em solid var(--warn,red);border-radius:.25em;&:before{color:var(--warn,red);content:"⚠";margin-right:.5em}&:hover{color:var(--warn,red)}}.bad{color:var(--warn,red)!important}@property --dist{syntax:"<length-percentage>";initial-value:0;inherits:true}@property --line-w{syntax:"<length-percentage>";initial-value:7%;inherits:true}@property --t-angle{syntax:"<angle>";initial-value:45deg;inherits:true}input,progress{accent-color:var(--primary);&:not([type=checkbox]):not([type=radio]){min-width:7em}}[popover]{font-size:max(1rem);text-align:start;min-width:50vw;max-width:90vw;min-height:30vh;max-height:80vh;height:max-content;background:var(--box-1);border:.25em solid var(--dark);border-radius:.5em;padding:.75em 1em;&::backdrop{-webkit-backdrop-filter:blur(.25em) saturate(.25);backdrop-filter:blur(.25em) saturate(.25);transition:all allow-discrete .25s}& h2{margin-top:0;margin-bottom:.2em;text-align:center}}body:has([popover]:popover-open){pointer-events:none}body:has([popover]:popover-open) [popover]{pointer-events:auto}div.bubble{border-radius:var(--br);border:var(--t) solid var(--bc,transparent);position:absolute!important;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;background-color:var(--bgc,transparent);padding:calc(var(--t, 1px) * 2)}.text{text-align:center;font-family:var(--f,Comic Sans MS,Comic Sans,cursive);font-size:var(--fs,calc(var(--bh) * .5));font-weight:var(--fw,normal);color:var(--c,#888);white-space:pre}.stick{width:var(--w);height:var(--h);background-color:transparent;padding:0;--bh:calc(var(--h) * .29);position:absolute;transition:all .25s ease-in-out}.stick div{box-sizing:content-box;position:relative}.head{margin:0 auto;--d:calc(var(--h) * .3);width:var(--d);height:var(--d);border:var(--t) solid var(--c);border-radius:50%;font-size:smaller;background-color:var(--bgc,transparent)}.body{top:calc(-.35 * var(--t))}.body,.body:after{margin:0 auto;--sh:var(--bh);height:var(--sh)}.body,.body div{background-color:transparent;border:0;--bw:var(--t);width:var(--bw)}.body:after,.body>div div:after{content:"";position:absolute;left:0;top:0;background-color:var(--c);width:var(--bw);height:var(--sh,100%);border-radius:var(--t)}.body>div{margin:0 auto;width:0;height:0}.arms{top:max(calc(var(--bh) * .05),calc(var(--t) * 1.75))}.legs{top:calc(var(--bh) - calc(var(--t) * .5))}.arms div,.legs div{display:block;transform-origin:top center}.arms>div,.legs>div{position:absolute;top:0;left:calc(-.5 * var(--t));--s1h:calc(var(--bh) * .7);--sh:var(--s1h);height:var(--s1h);transform:rotate(var(--angle-0,var(--base-0)))}.arms>div:last-child,.legs>div:last-child{left:calc(-1 * var(--t));transform:scaleX(-1) rotate(var(--angle-0,var(--base-0))) translate(calc(-.5 * var(--t)))}.arms>div>div,.legs>div>div{top:calc(var(--s1h) - calc(var(--t) * .5));left:0;--s2h:calc(var(--bh) * .7);--sh:var(--s2h);height:var(--s2h);transform:rotate(var(--angle-1,var(--base-1)))}.arms>div>div>div,.legs>div>div>div{top:calc(var(--s2h) - calc(var(--t) * .5));left:0;--s3h:calc(var(--bh) * .2);--sh:var(--s3h);height:var(--s3h);transform:rotate(var(--angle-2,var(--base-2)))}.sketch{--sbr:54% 44% 51% 47%/41% 49% 58% 50%;--scp:polygon(20% 0,80% 0,68% 25%,65% 50%,66% 75%,80% 100%,20% 100%,8% 75%,5% 50%,8% 25%);--scp2:polygon(20% 0,80% 0,92% 25%,95% 50%,92% 75%,80% 100%,20% 100%,32% 75%,35% 50%,32% 25%)}.sketch .head{border-radius:var(--sbr)}.sketch .body div:after,.sketch .body:after{clip-path:var(--scp)}.sketch .body>div>div div:after{clip-path:var(--scp2)}.comic{width:var(--w,100%);height:var(--h,100%);position:relative;border:var(--t,2px) solid var(--c,#888888);overflow:hidden;background-color:var(--bgc,transparent);box-sizing:content-box}.row{display:flex;flex-direction:row;flex-wrap:wrap}.row>span{display:contents}.scene{width:var(--w,100%);height:var(--h,100%);border:var(--t,2px) solid var(--c,#888888);margin:auto;background-color:var(--bgc,transparent);box-sizing:border-box}.game,.scene{position:relative;overflow:hidden}.game{background:var(--game-bg,hsl(0,0%,45%));height:100%;width:100%;font-size:max(1.5rem,3vmin);font-family:monospace;font-weight:700;color:var(--text,hsl(0,0%,90%));display:grid;grid-template-columns:1fr max(5rem,20%);grid-template-rows:50% 50%}.game.column{display:grid;grid-template-columns:1fr;grid-template-rows:max(3rem,8%) 1fr max(3rem,10%)}.game.demo{pointer-events:none}.game:not(.paused) .level *{pointer-events:none}.game.paused .level{background:radial-gradient(#0d0d0d4d 10%,#0d0d0d99 65%,#0d0d0de5),var(--level-bg,transparent)}.hide-cursor:not(.paused) .level{cursor:none}.moving-object{will-change:transform;transition:all 17ms}.game>.level{background:var(--level-bg,transparent);height:100%;width:100%;position:relative;overflow:hidden;cursor:crosshair;touch-action:none;grid-column:1/2;grid-row:1/3}.column .level{grid-row:2}.ball{height:var(--diameter,10px);width:var(--diameter,10px);background:var(--ball-bg,hsl(0,0%,90%));border:var(--ball-border,hsl(0,0%,20%) solid 3px);border-radius:var(--border-radius,50%)}.ball,.paddle{position:absolute;top:0;left:0}.paddle{background:var(--paddle-bg,hsl(0,0%,90%));border:var(--paddle-border,hsl(0,0%,20%) solid 3px);--border-radius:var(--paddle-radius,0);border-radius:var(--border-radius)}.brick{background:var(--brick-bg,hsl(0,0%,90%));border:var(--brick-border,hsl(0,0%,20%) solid 3px);position:absolute;box-sizing:border-box;top:0;left:0}.brick--destroyed{background:transparent;border-width:0;opacity:0;visibility:hidden;transition:border-width .25s ease-out,opacity .2s ease-in-out .1s,background .12s ease-in}#debug{height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content;background:transparent;padding:.5%;font-size:.6em;letter-spacing:.1em;line-height:1.5em;text-align:right;position:absolute;right:0;top:50%;transform:translateY(-50%);white-space:pre;z-index:2}.column #debug{top:4%;left:.5%;text-align:left}#controls{background:var(--controls-bg,transparent)}.game:not(.demo) #controls *{pointer-events:all}#controls,#hud{box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-end;gap:1vmin;letter-spacing:.5vmin;-webkit-text-stroke:0;padding:5%}.column #controls,.column #hud{flex-direction:row;align-items:center;justify-content:space-between;padding:2%}#hud,.column #controls{justify-content:flex-end}#hud{background:var(--hud-bg,transparent);color:var(--hud-text,hsl(0,0%,90%));z-index:1}#controls,#controls>*,#hud,#hud>*{transform:none!important}#pause{text-align:center;font-size:3.5rem;font-family:system-ui;font-weight:700;letter-spacing:.5rem;cursor:default;white-space:pre;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}#pause.final{animation:none}.clickable{cursor:pointer}.resume-link{position:absolute;animation:pulse 3s ease-in-out infinite}@keyframes pulse{0%{opacity:1}70%{opacity:.75}to{opacity:1}}.particle{position:absolute;display:block}css-text{--transition-duration:.25s}css-text::part(letter){color:transparent;display:inline-block;position:relative;overflow:visible;transition:all 1s ease-in-out}css-text::part(letter)::selection{background:#00f;color:transparent}css-text::part(letter)::-moz-selection{background:#00f;color:transparent}css-text::part(letter):after,css-text::part(letter):before{content:"";position:absolute;box-sizing:border-box;border-color:var(--line-color);border-width:var(--line-width);transition:all .5s}css-text.monospace::part(letter){font-family:monospace;font-style:normal;height:1em;--line-width:.13em}css-text.monospace::part(letter):after,css-text.monospace::part(letter):before{top:40%;left:9%;height:20%;width:80%;margin-top:.1em;border-radius:calc(var(--line-width) / 2);border-style:solid;transform-origin:center center}css-text.monospace::part(A):after{top:17%;left:35%;height:67%;width:5%;border-width:0;border-left-width:calc(1.1 * var(--line-width));border-radius:0;transform-origin:top center;transform:skew(-16deg)}css-text.monospace::part(A):before{top:17%;left:39%;height:67%;width:5%;border-width:0;border-left-width:calc(1.1 * var(--line-width));border-radius:0;transform-origin:top center;transform:skew(16deg)}css-text.monospace::part(B):after{top:47%;left:11%;height:38%;width:83%;border-radius:0 45% 50% 5%;border-right-width:calc(1.1 * var(--line-width))}css-text.monospace::part(B):before{top:17%;left:11%;height:36%;width:78%;border-radius:5% 45% 50% 0;border-right-width:calc(1.1 * var(--line-width))}css-text.monospace::part(C):after{top:17%;height:36%;width:79%;border-radius:70% 15% 0 0/100% 15% 0 0;border-bottom-width:0;border-right-width:0;transform:rotateX(-1turn)}css-text.monospace::part(C):before{top:50%;height:36%;width:79%;border-radius:0 0 15% 70%/0 0 15% 100%;border-top-width:0;border-right-width:0}css-text.monospace::part(D):after{top:50%;height:36%;width:84%;border-radius:0 0 75% 1%;border-top-width:0;transform:rotateY(1turn)}css-text.monospace::part(D):before{top:17%;height:35%;width:84%;border-radius:1% 50% 0 0/1% 80% 0 0;border-bottom-width:0}css-text.monospace::part(E):after{top:45%;left:18%;height:7%;width:67%;border-top-width:0;border-radius:5%;transform:rotate(-180deg)}css-text.monospace::part(E):before{top:17%;left:16%;height:68%;width:75%;border-right-width:0;border-radius:5%}css-text.monospace::part(F):after{top:17%;left:16%;height:68%;width:75%;border-bottom-width:0;border-right-width:0;border-radius:5%}css-text.monospace::part(F):before{top:45%;left:18%;height:7%;width:67%;border-top-width:0;border-radius:5%;transform:rotateY(-1turn)}css-text.monospace::part(G):after{top:46%;left:47%;height:32%;width:44%;border-width:calc(.9 * var(--line-width));border-bottom-width:0;border-left-width:0;border-radius:0 10% 15% 0/0 10% .1em 0}css-text.monospace::part(G):before{top:17%;left:6%;height:68%;width:95%;border-right-color:transparent;border-radius:50%/.25em}css-text.monospace::part(H):after{top:44%;left:24%;height:9%;width:60%;border-width:0;border-top-width:var(--line-width);border-bottom-width:0;border-radius:0;transform:rotate(180deg)}css-text.monospace::part(H):before{top:17%;left:8%;height:68%;width:84%;border-top-width:0;border-bottom-width:0;border-radius:0}css-text.monospace::part(I):after{top:17%;left:10%;height:66%;width:76%;border-top-width:calc(.9 * var(--line-width));border-bottom-width:calc(.9 * var(--line-width));border-left-width:0;border-right-width:0;border-radius:1%}css-text.monospace::part(I):before{top:17%;left:38%;height:66%;width:10%;border-right-width:0;border-radius:0}css-text.monospace::part(J):after{top:65%;left:5%;height:20%;width:74%;border-width:calc(.8 * var(--line-width));border-top-width:0;border-left-color:transparent;border-radius:0 0 .35em .3em/0 0 .35em .35em;transform:rotateY(-1turn)}css-text.monospace::part(J):before{top:17%;left:16%;height:50%;width:63%;border-width:calc(.8 * var(--line-width));border-left-width:0;border-bottom-width:0;border-radius:0}css-text.monospace::part(K):after{top:30%;left:33%;height:.41em;width:.44em;border-top-width:0;border-right-width:0;border-radius:0;transform:rotate(45deg) skew(11deg,12deg)}css-text.monospace::part(K):before{top:17%;height:68%;width:2%;border-width:0;border-left-width:var(--line-width);border-radius:0}css-text.monospace::part(L):after{top:17%;left:18%;height:66%;width:5%;border-width:0;border-left-width:var(--line-width);border-radius:0}css-text.monospace::part(L):before{top:71%;left:18%;height:2%;width:71%;border-width:0;border-top-width:var(--line-width);border-radius:0}css-text.monospace::part(M):after{top:15%;left:calc(50% - .16em);height:.32em;width:.32em;border-width:calc(1.1 * var(--line-width));border-top-width:0;border-right-width:0;transform:rotate(-45deg) skew(-17deg,-17deg)}css-text.monospace::part(M):before{top:14%;left:8%;height:68%;width:84%;border-width:calc(1.1 * var(--line-width));border-top-width:0;border-bottom-width:0;border-radius:0;transform:perspective(1em) rotateX(13deg)}css-text.monospace::part(N):after{top:17%;left:9%;height:66%;width:83%;border-top-width:0;border-bottom-width:0;border-radius:0}css-text.monospace::part(N):before{top:17%;left:40%;height:66%;width:5%;border-width:0;border-left-width:var(--line-width);border-radius:0;transform:skew(25deg)}css-text.monospace::part(O):after{top:17%;left:4%;height:69%;width:92%;border-right-color:transparent;border-radius:50%/40%}css-text.monospace::part(O):before{top:17%;left:4%;height:69%;width:92%;border-left-color:transparent;border-radius:50%/40%}css-text.monospace::part(P):after{top:17%;left:12%;height:47%;width:85%;border-radius:0 50% 50% 0}css-text.monospace::part(P):before{top:17%;left:12%;height:69%;width:9%;border-width:0;border-left-width:var(--line-width);border-radius:0}css-text.monospace::part(Q):after{top:65%;left:35%;height:35%;width:62%;border-top-color:transparent;border-right-color:transparent;border-radius:0 0 5% .15em;transform:rotate(-23deg)}css-text.monospace::part(Q):before{top:17%;left:4%;height:69%;width:92%;border-radius:50%/40%}css-text.monospace::part(R):after{top:41%;left:12%;height:39%;width:62%;border-top-width:0;border-bottom-width:0;border-radius:0;transform-origin:20% 50%;transform:perspective(.3em) rotateX(25deg) skew(5deg)}css-text.monospace::part(R):before{top:17%;left:12%;height:40%;width:80%;border-radius:0 50% 50% 0}css-text.monospace::part(S):after{top:17%;height:40%;width:68%;border-right-width:0;border-radius:50% 10% 10% 50%/50% 20% 10% 50%;transform:rotate(11deg)}css-text.monospace::part(S):before{top:45%;left:12%;height:42%;width:79%;border-left-width:0;border-top-width:calc(.8 * var(--line-width));border-radius:40% 50% 50% 20%/20% 50% 50% 30%;transform:rotate(11deg) skew(-10deg)}css-text.monospace::part(T):after{top:17%;left:7%;height:9%;width:86%;border-width:0;border-top-width:calc(.9 * var(--line-width));border-radius:0}css-text.monospace::part(T):before{top:18%;left:39%;height:67%;width:9%;border-width:0;border-left-width:var(--line-width);border-radius:0}css-text.monospace::part(U):after{top:47%;left:8%;height:40%;width:84%;border-top-color:transparent;border-radius:0 0 50% 50%}css-text.monospace::part(U):before{top:17%;left:8%;height:43%;width:84%;border-top-width:0;border-bottom-width:0;border-radius:0}css-text.monospace::part(V):after{top:18%;left:18%;height:66%;width:5%;border-width:0;border-left-width:calc(1.1 * var(--line-width));border-radius:0;transform:skew(17deg)}css-text.monospace::part(V):before{top:18%;left:57%;height:66%;width:5%;border-width:0;border-left-width:calc(1.1 * var(--line-width));border-radius:0;transform:skew(-17deg)}css-text.monospace::part(W):after{top:20%;left:7%;height:68%;width:86%;border-top-width:0;border-bottom-width:0;border-radius:0;transform:perspective(1em) rotateX(-15deg)}css-text.monospace::part(W):before{top:54%;left:calc(50% - .19em);height:.38em;width:.38em;border-width:calc(.9 * var(--line-width));border-bottom-width:0;border-left-width:0;border-radius:5%;transform:rotate(-45deg) skew(-25deg,-25deg)}css-text.monospace::part(X):after{top:18%;left:36%;height:66%;width:5%;border-width:0;border-left-width:calc(1.1 * var(--line-width));border-radius:0;transform:skew(-31deg)}css-text.monospace::part(X):before{top:18%;left:36%;height:66%;width:5%;border-width:0;border-left-width:calc(1.1 * var(--line-width));border-radius:0;transform:skew(31deg)}css-text.monospace::part(Y):after{top:-10%;left:0;height:.55em;width:.55em;border-top-color:transparent;border-right-color:transparent;border-radius:5%;transform:rotate(-45deg) skew(-17deg,-17deg)}css-text.monospace::part(Y):before{top:45%;left:calc(50% - var(--line-width) / 2);height:39%;width:9%;border-width:0;border-left-width:var(--line-width);border-radius:0}css-text.monospace::part(Z):after{top:18%;left:9%;height:65%;width:83%;border-left-width:0;border-right-width:0;border-radius:0}css-text.monospace::part(Z):before{top:30%;left:35%;height:41%;width:5%;border-width:0;border-left-width:calc(1.3 * var(--line-width));border-radius:0;transform:skew(-35deg)}css-text.monospace::part(newline){display:block;height:0;width:0;--line-color:transparent}css-text.monospace::part(space){width:.7em;--line-color:transparent}