@import "https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap";
:root{--background:#ededed;--foreground:#000}*{box-sizing:border-box}body{background-color:var(--background);cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M 10 6 L 6 6 L 6 26 L 10 26' fill='none' stroke='%23CD3F01' stroke-width='1.5'/><path d='M 22 6 L 26 6 L 26 26 L 22 26' fill='none' stroke='%23CD3F01' stroke-width='1.5'/><path d='M 16 11 L 16 21 M 11 16 L 21 16' fill='none' stroke='%23CD3F01' stroke-width='1.5'/></svg>") 16 16,crosshair;background-image:linear-gradient(-45deg,#ededed 25%,#e7e7e7 25% 50%,#ededed 50% 75%,#e7e7e7 75% 100%);background-size:56.57px 56.57px;justify-content:center;align-items:center;width:100vw;height:100dvh;margin:0;padding:0;font-family:Geist Mono,monospace;display:flex;overflow:hidden}#scaler{transform-origin:50%;justify-content:center;align-items:center;display:flex;transform:scale(1)}.card .block{background:#fff;position:relative}.card .hline{z-index:5;background-color:#999;width:200vw;height:1px;position:absolute;left:50%;transform:translate(-50%)}.card .vline{z-index:5;background-color:#999;width:1px;height:200vh;position:absolute;top:50%;transform:translateY(-50%)}.card .v-left{left:0}.card .v-right{right:0}.card .boundary{z-index:10;height:0;position:absolute;left:0;right:0}.card .b-top{top:0}.card .b-bottom{bottom:0}.card .cross{z-index:15;width:11px;height:11px;position:absolute;top:0;transform:translate(-50%,-50%)}.card .cross:before{content:"";background-color:#000;width:2px;position:absolute;top:0;bottom:0;left:4px}.card .cross:after{content:"";background-color:#000;height:2px;position:absolute;top:4px;left:0;right:0}.card .cross-left{left:0}.card .cross-right{left:100%}.card .header-block{padding:12px 24px}.card .header-text{letter-spacing:-.02em;color:#000;font-size:11px;line-height:1}.card .canvas-block{aspect-ratio:404/402;justify-content:center;align-items:flex-start;width:100%;height:auto;display:flex;overflow:hidden}.card canvas#c{aspect-ratio:1;image-rendering:auto;width:100%;height:auto;display:block}.card .footer-block{padding:20px 40px 32px}.card .headline{letter-spacing:-.02em;color:#cd3f01;margin-bottom:12px;font-size:20px}.card .subhead{letter-spacing:-.02em;color:#333e32;padding-left:24px;font-size:12px}.card .status-row{justify-content:space-between;align-items:baseline;margin-bottom:4px;display:flex}.card .dots{border-bottom:2px dotted #aaa;flex-grow:1;margin:0 8px}.card .val{color:#000}.card .cursor-blink{color:#cd3f01;margin-left:5px;animation:1s step-end infinite blink;display:inline-block}@media (max-width:480px){.card .header-block{padding:10px 15px}.card .header-text{font-size:8.5px}.card .footer-block{padding:15px 20px 24px}.card .headline{margin-bottom:8px;font-size:16px}.card .subhead{padding-left:12px;font-size:10px}}.card.loading-active .canvas-block,.card.loading-active .header-text,.card.loading-active .headline,.card.loading-active .subhead,.card.loading-active .status-row,.card.loading-active canvas{opacity:0;visibility:hidden}.card.loading-active .block{background:0 0}.card.loading-active .vline,.card.loading-active .hline,.card.loading-active .cross{opacity:0}.card.phase-6 .v-left,.card.phase-6 .header-block .b-top .hline,.card.phase-7 .v-left,.card.phase-7 .header-block .b-top .hline,.card.phase-8 .v-left,.card.phase-8 .header-block .b-top .hline{opacity:1}.card.phase-8 .v-right{opacity:1;animation:.5s forwards expandVLine}.card.phase-8 .footer-block .b-bottom .hline{opacity:1;animation:.5s forwards expandHLine}.card.phase-8 .block{background:#fff;transition:background-color .5s}.card.phase-8 .canvas-block{opacity:1;visibility:visible}.card.phase-9 .block{background:#fff}.card.phase-9 .v-left,.card.phase-9 .v-right,.card.phase-9 .header-block .b-top .hline,.card.phase-9 .footer-block .b-bottom .hline{opacity:1}.card.phase-9 .canvas-block{opacity:1;visibility:visible}.card.phase-9 canvas{opacity:1;visibility:visible;animation:.8s cubic-bezier(.87,0,.13,1) forwards revealPortrait}.card.phase-9 .header-block .b-bottom .hline,.card.phase-9 .footer-block .b-top .hline{opacity:1;animation:.5s forwards expandHLine}.card.phase-9 .cross{animation:.3s .3s forwards fadeIn}.card.phase-10 .block{background:#fff}.card.phase-10 .v-left,.card.phase-10 .v-right,.card.phase-10 .hline,.card.phase-10 .cross{opacity:1;transition:opacity .3s}.card.phase-10 .canvas-block,.card.phase-10 canvas{opacity:1;visibility:visible}.card.phase-10 .header-text,.card.phase-10 .headline,.card.phase-10 .subhead,.card.phase-10 .status-row{opacity:1;visibility:visible;transition:opacity .5s}@keyframes revealPortrait{0%{clip-path:inset(0% 0% 100%)}to{clip-path:inset(0%)}}@keyframes expandVLine{0%{height:0;top:0;bottom:100%;transform:translateY(0)}to{height:200vh;top:50%;bottom:auto;transform:translateY(-50%)}}@keyframes expandHLine{0%{width:0;left:0;right:100%;transform:translate(0)}to{width:200vw;left:50%;right:auto;transform:translate(-50%)}}@keyframes fadeIn{to{opacity:1}}