:root{--c-1:#ffe3ef;--c-2:rgba(173,201,233,0.4);--grad-base:rgb(238,174,202);--grad:linear-gradient(45deg,rgba(238,174,202,0.5),rgba(148,187,233,0.5));--connector-width:0.25rem;--connector-length:3rem;--color-valid:#94bbe9;--color-spangram:#eece23;--color-selected:#b5bac0}.char{position:relative}#guess,#messagebox,.char .inner{animation-iteration-count:1!important}.char .hinted,.char .selected,.char .spangram,.char .valid{background-color:rgba(0,0,0,0);border:.25rem solid rgba(0,0,0,0);position:relative;touch-action:none;border-radius:9999px}.char .hinted{border:.25rem dashed var(--color-valid)}.char .selected{background-color:var(--color-selected)}.char .valid{background-color:var(--color-valid)}.char .spangram{background-color:var(--color-spangram)}.button .progress{height:150%;position:absolute;left:0;background-color:var(--color-accent);opacity:.5}.connector{position:absolute;background-color:var(--color-selected);opacity:.5}.char.valid .connector{background-color:var(--color-valid)}.char.spangram .connector{background-color:var(--color-spangram)}.connector.d,.connector.u{height:var(--connector-length);width:var(--connector-width);left:0;right:0;margin-left:auto;margin-right:auto}.connector.u{bottom:50%}.connector.d{top:50%}.connector.l,.connector.r{width:var(--connector-length);height:var(--connector-width);top:0;bottom:0;margin-top:auto;margin-bottom:auto}.connector.l{right:50%}.connector.r{left:50%}.connector.ul,.connector.ur{height:calc(var(--connector-length) * 1.5);width:var(--connector-width);margin-left:auto;margin-right:auto;bottom:.5em}.connector.ur{transform:rotate(45deg);left:2.5em}.connector.ul{transform:rotate(-45deg);right:2.5em}.connector.dl,.connector.dr{height:calc(var(--connector-length) * 1.5);width:var(--connector-width);margin-left:auto;margin-right:auto;top:.5em}.connector.dr{transform:rotate(-45deg);left:2.5em}.connector.dl{transform:rotate(45deg);right:2.5em}:root{--black:#000000;--bthickness:0.15rem;--bthickness-sm:0.12rem;font-family:Hanken Grotesk,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;--connector-width:0.52rem!important;--bcolor-valid:#5096dd;--bcolor-spangram:#f4df71;--bcolor-selected:#92969b}.\~neutral,.\~neutral section:not(.\~info){--color-muted-low:rgba(255,255,255,50%)!important;--color-fill-low:rgba(255,255,255,20%)!important}.modal .card.\~neutral{background-color:white}.button:focus:not([disabled]):not(.field):not(\@high),.button:hover:not([disabled]):not(.field):not(\@high){filter:invert(.2) brightness(.8)!important}.handwriting{font-family:NeverMind Hand,Hanken Grotesk,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol}.card{border-radius:.8rem!important;border:var(--bthickness) solid var(--black)!important}.button,input.field{border-radius:.4rem!important;border:var(--bthickness-sm) solid var(--black)!important}table thead,table tr{border-bottom:2px solid var(--black)!important}aside.aside{border:var(--bthickness-sm) solid var(--black)!important}.char .connector{opacity:1!important}.char .selected{border:.15rem solid var(--bcolor-selected)!important}.char .selected:after{border:.1rem solid var(--bcolor-selected)}.char.selected .connector{background-color:var(--bcolor-selected)!important}.char .valid{border:.15rem solid var(--bcolor-valid)!important;color:#205799!important}.char .valid:after{border:.1rem solid var(--bcolor-valid)}.char.valid .connector{background-color:var(--bcolor-valid)!important}.char .spangram{border:.15rem solid var(--bcolor-spangram)!important;color:#fdf9e5!important}.char .spangram:after{border:.1rem solid var(--bcolor-spangram)}.char.spangram .connector{background-color:var(--bcolor-spangram)!important}.char .selected:after,.char .spangram:after,.char .valid:after{content:"";display:block;position:absolute;border-radius:9999px;pointer-events:none}.char .s1:after{width:110%;height:115%}.char .s2:after{width:115%;height:110%}.char .s3:after{width:112%;height:118%}.char .s4:after{width:118%;height:112%}.char .s5:after{width:110%;height:102%}.char .s6:after{width:102%;height:110%}.char .s7:after{width:116%;height:109%}.char .s8:after{width:109%;height:116%}button .progress{background-color:var(--black)!important;opacity:1!important}html:not(.dark) .card.\@low:not(.\~neutral):not(.\~positive):not(.\~urge):not(.\~warning):not(.\~info):not(.\~critical),html:not(.dark) .card.\@low:not(.\~neutral):not(.\~positive):not(.\~urge):not(.\~warning):not(.\~info):not(.\~critical)>*{--color-fill-high:#64748b;--color-fill-low:#e2e8f0;--color-content-high:#f8fafc;--color-content-low:#1e293b;--color-accent-high:#475569;--color-accent-low:#cbd5e1;--color-muted-high:#475569;--color-muted-low:#f1f5f9;background-color:#fff}.animate-select{animation:select .3s ease-out}@keyframes select{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}.animate-slide-up{animation:slideUp .2s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-nod{animation:nod .4s ease-in-out}@keyframes nod{0%,to{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}