:root{--primary: #1C1678;--secondary: #8576FF;--tertiary: #7BC9FF;--accent: #A3FFD6;--videoWRatio: 1;--videoHRatio: 1;font-family:serif;font-size:clamp(10px,2vmax,18px);line-height:1.4;font-weight:400;color-scheme:light dark;color:#fff;background-color:var(--primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;text-wrap:balance;box-sizing:border-box;-webkit-box-sizing:border-box}img,picture,svg{font-style:italic;shape-margin:1em;vertical-align:middle;max-width:100%}img,video{object-fit:cover;object-position:center}body{height:100dvh;background:var(--secondary)}section{height:100%}.home-grid{display:grid;grid-template:"header header header" auto "...... hero   ......" auto "...... main   ......" auto "footer footer footer" auto / minmax(0,1fr) minmax(min(976px,100vw),5fr) minmax(0,1fr)}.simple-grid{display:grid;grid-template-columns:[main-start header-start footer-start] 100% [main-end header-end footer-end];grid-template-rows:[header-start] 3em [main-start header-end] calc(100dvh - 6.3em) [main-end footer-start] 3em [footer-end]}.simple-grid-overlap{display:grid;grid-template-columns:[main-start header-start footer-start] auto [main-end header-end footer-end];grid-template-rows:[main-start header-start] auto [header-end info-start] auto [footer-start info-end] auto [main-end footer-end]}#Home header{grid-area:header;justify-content:left}#Home header h1:first-of-type:first-letter{float:left;font:700 3em/.65 Playfair Display,sans-serif;padding:.15em .05em 0 0;text-transform:uppercase}#Home header h1:first-of-type{font-family:Crimson Text,serif;font-size:1.9em;padding-left:.3em;padding-top:.3em;transform:scale(2.84);animation:scale 3s forwards cubic-bezier(.5,1,.89,1)}#Home aside{grid-area:hero}#Home main{grid-area:main;background:var(--primary)}#Home footer{grid-area:footer;padding-bottom:1em}header,main,aside,footer{position:relative;display:flex;flex-flow:row wrap;justify-content:center}footer,header{align-items:center;font-family:system-ui;-webkit-user-select:none;-ms-user-select:none;user-select:none}@media (max-width: 768px){#Home>header>h1:first-of-type{padding-top:.05em;padding-left:.65em}}hgroup{border:1px solid #ddd;border-radius:.5em;padding:.2em;box-shadow:0 4px 8px #fff6;display:block;flex-direction:column}hgroup p{font-family:system-ui}hgroup:hover{transform:translateY(-5px);box-shadow:0 8px 16px #ffffffb3}main>hgroup{flex:1 1 0}h1{font-size:1.6em;line-height:1.1}.hero{background:var(--primary);font-size:1.5em;border-radius:1em;filter:invert();text-align:center;min-width:min(40ch,100%);margin:auto;transform:scale(.84);animation:scale 3s forwards cubic-bezier(.5,1,.89,1)}a{color:var(--accent);text-decoration:inherit;cursor:pointer;transition:border-color .25s}a.cancel{display:inline-block;font-size:2em;text-align:center;height:1.5em;color:red;margin-left:auto;margin-right:.5em}a.check{display:inline-block;border:.05em solid;aspect-ratio:1/1;text-align:center;border-radius:50%;height:1.5em;font-size:2em;color:green}.circle{font-weight:900;border-radius:50%;width:2em;font-size:2.5em;aspect-ratio:1}a:hover{color:#fff}.logo{color:var(--accent);height:6em;padding-left:.5em;padding-top:1.5em;will-change:filter;transition:filter .3s;mix-blend-mode:difference}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.vanilla:hover{filter:drop-shadow(0 0 2em #3178c6aa)}article{display:flex;justify-content:center;flex-direction:column;align-items:center}button,dialog{border-color:var(--tertiary);color:var(--primary);transition:border-color .25s}dialog{border:.15em solid;background:var(--primary);border-radius:1em;color:#fff;min-height:50dvh;min-width:50vw;max-width:none;max-height:none;height:100dvh;width:100vw}button{padding:.1em .3em;border:.05em solid;border-radius:.5em;font-size:2em;font-weight:500;font-family:inherit;background:var(--accent);cursor:pointer;mix-blend-modeX:difference;z-index:2;transition:.5s;opacity:.9}button:hover{border:.125em solid white}button:focus,button:focus-visible{outline:.25em auto -webkit-focus-ring-color}sup{font-size:.5em}@media (min-width: 992px){#Home>header>h1:first-of-type{padding-left:.5em;padding-top:.5em}}@media (max-width: 768px){section{border:0em solid var(--secondary)};h1,.logo{padding:0}.head-hero{display:block}}@media (orientation: portrait) and (max-width: 768px){.logo{display:none}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes scale{to{transform:scale(1)}}@keyframes slideInFromLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInFromUp{0%{transform:translateY(-100%)}to{transform:translate(0)}}@keyframes dimming{0%{opacity:1}70%{opacity:0}to{opacity:.2}}.pica{position:absolute;width:100%;background-image:url(/bek.webp);background-size:cover;background-position:center;height:100dvh;opacity:.1;animation:3s ease-out 0s 1 dimming}.picag{grid-area:main;background-image:url(/bek.webp);background-size:cover;background-position:center;pointer-events:none;opacity:.2;animation:3s ease-out 0s 1 dimming}dialog[open]{opacity:1;transform:scaleY(1)}dialog{opacity:0;transform:scaleY(0);transition:opacity .7s ease-out,transform .7s ease-out,overlay .7s ease-out allow-discrete,display .7s ease-out allow-discrete}@starting-style{dialog[open]{opacity:0;transform:scaleY(0)}}#Camera header{grid-area:header}#Camera:after{content:"";position:absolute;top:0;height:100%;width:100%;color:var(--primary);left:50%;transform:translate(-50%);background-image:radial-gradient(ellipse calc(350px * var(--videoWRatio)) calc(450px * var(--videoHRatio)) at center,transparent 50%,var(--primary) 50%,transparent 100%);background-size:100% 100%;pointer-events:none;z-index:-1}#Camera main{pointer-events:none;display:contents}#Camera main video,#Camera main canvas{border-radius:1em;grid-area:main;justify-self:center;height:100%}#Camera main canvas{display:none}#Camera .krosV{pointer-events:none;grid-area:main;border-left:2px dotted yellow;height:500px;left:50%;margin-left:-1px;place-self:center center}#Camera .krosH{pointer-events:none;grid-area:main;border-top:2px dotted yellow;width:500px;top:50%;margin-top:-1px;place-self:center center}#Camera:not(:has(#boardinfo:empty)) aside #extra{display:block}#Camera:not(:has(#boardinfo:empty)) footer a{display:block}#Camera:not(:has(#boardinfo:empty)) header a{display:none}#Camera aside{display:contents;pointer-events:none;height:100%}#Camera aside #counter,#Camera aside #instr{grid-area:header;align-self:center}#Camera aside #instr{margin-left:auto;margin-right:20%}#Camera aside #counter{margin-right:auto;margin-left:20%}#Camera aside #info2,#Camera aside #boardinfo,#Camera aside #extra{grid-area:main;align-self:self-start}#Camera aside #info2,#Camera aside #boardinfo{justify-self:self-end;margin-right:.5em}#Camera aside #extra{margin-top:6em;justify-self:self-start;margin-left:.5em;display:none;animation-duration:5s}#Camera footer{grid-area:footer}#Camera footer a{display:none}#extra{overflow-y:auto;text-wrap:pretty;font-size:1.6em}video,canvas{transform:scaleX(-1);z-index:-2}.loading[aria-label]:not([aria-label=""]):is(:empty):before,[aria-label]:has(video):has(>video[hidden]):before{content:"";position:absolute;left:calc(50% - 2.5em);top:calc(50% - 2.5em);border:.5em solid var(--tertiary);border-top:.5em solid var(--accent);border-radius:50%;width:4em;height:4em;animation:2s linear 0s infinite normal both running spin;font-size:2em}.loading[aria-label]:not([aria-label=""]):is(:empty):after,[aria-label]:has(video):has(>video[hidden]):after{content:attr(aria-label);position:absolute;left:calc(50% - 3.5em);top:calc(50% - 4.5em);color:#ff0;mix-blend-mode:difference;text-align:center;height:2em;font-size:1.5em}p[aria-label]{display:block}#boardx:not(:has(#boardinfo:empty)) #extra{display:block}#board:not(:has(#boardinfo:empty)) pp{background:red}.balon,.speech{display:none}.balon:not(:empty){display:block;background-color:#fff;border:solid .125em var(--tertiary);color:var(--primary);width:fit-content;font-size:2.5em;border-radius:.75em;margin-top:.3em;padding:.1em .3em;transform:scale(.84);animation:scale 1s forwards cubic-bezier(.5,1,.89,1)}.speech:not(:empty){display:block;background-color:#fff;border:solid .125em var(--tertiary);color:var(--primary);max-width:35ch;font-size:1.8em;border-radius:.75em;line-height:1.1;text-align:center;text-wrap:balance;margin-top:.8em;padding:.4em;transform:scale(.84);animation:scale 1s forwards cubic-bezier(.5,1,.89,1)}.speech:not(:empty):before{border:solid .75em transparent;border-left:solid .75em var(--tertiary);border-top:solid .75em var(--tertiary);bottom:-1.45em;content:"";height:0;left:1.05em;position:absolute;transform:skew(-15deg);width:0}.speech:not(:empty):after{border:solid .6em transparent;border-left:solid .6em #fff;border-top:solid .6em #fff;bottom:-1em;content:"";height:0;left:1.3em;position:absolute;transform:skew(-15deg);width:0}#Camerax:has(:where(#info1,#info2):not(:empty)) button{opacity:.5;border:transparent}#Camerax:has(:where(#info1,#info2):not(:empty)) header{justify-content:left}videoX{mask-image:radial-gradient(ellipse 350px 450px at center,#000 50%,#00000080 50%);-webkit-mask-image:radial-gradient(ellipse 350px 450px at center,black 50%,rgba(0,0,0,.5) 50%)}