.canvas{width:100vw;height:100vh;display:flex;box-sizing:border-box;padding:0}.bracket{width:3vw;border:var(--border-bracket);filter:var(--filter-bracket);flex-shrink:0}.b-l{border-right:none}.b-r{border-left:none}.letters{width:100%;padding:var(--width-bracket);display:flex;gap:var(--gap)}.letter{flex:1;display:flex;gap:var(--gap)}.bar{background:var(--color-bar);box-shadow:var(--shadow-bar);flex:1}.w .left{border-top-left-radius:var(--radius-amount);border-radius:var(--radius-amount) 0}.w .mid{height:70%;align-self:flex-end;border-radius:var(--radius-amount) var(--radius-amount) 0 0}.w .right{border-bottom-right-radius:var(--radius-amount);border-radius:var(--radius-amount) 0}.y .left{height:65%;align-self:flex-start;border-radius:0 var(--radius-amount)}.y .right{border-radius:var(--radius-amount) 0}.d .left{height:65%;align-self:flex-end;border-radius:var(--radius-amount) 0 0 var(--radius-amount)}.d .right{border-radius:var(--radius-amount) 0}@media(max-width:768px){.canvas{flex-direction:column}.bracket{width:100%;height:calc(2 * var(--width-bracket));border:var(--border-bracket)}.b-l{border-bottom:none}.b-r{border-top:none}.letters{flex-direction:column;width:100%;height:100%}}:root{--color-bg: #faf9f6;--color-text: #28282b;--color-bar: #28282b;--gap: 1.5vw;--radius-amount: 40px;--width-bracket: var(--gap);--shadow-emboss: none;--shadow-deboss: none;--shadow-bar: none;--filter-bracket: none;--border-bracket: var(--width-bracket) solid var(--color-bar)}@media(prefers-color-scheme:dark){:root{--color-bg: #28282b;--color-text: #faf9f6;--color-bar: #faf9f6}}body.theme-neumorphism-deboss,body.theme-neumorphism-emboss{--color-bg: #e6e3dd;--color-text: #28282b;--color-bar: #e6e3dd;--border-bracket: none;--filter-bracket: none;--shadow-emboss: 6px 6px 10px 0 #bebcb7, -6px -6px 10px 0 #ffffff;--shadow-deboss: inset 6px 6px 10px 0 rgba(166, 164, 159, .6), inset -6px -6px 10px 0 rgba(255, 255, 255, .9)}body.theme-neumorphism-deboss{--shadow-bar: var(--shadow-deboss)}body.theme-neumorphism-emboss{--shadow-bar: var(--shadow-emboss)}@media(prefers-color-scheme:dark){body.theme-neumorphism-deboss,body.theme-neumorphism-emboss{--color-bg: #292d32;--color-text: #d1d5db;--color-bar: #292d32;--shadow-emboss: 6px 6px 10px #1b1e22, -6px -6px 10px #373c42;--shadow-deboss: inset 6px 6px 10px #1b1e22, inset -6px -6px 10px #373c42}}@media(min-width:769px)and (max-width:1024px){:root{--gap: 2vw}}@media(max-width:768px){:root{--gap: 2.5vh}}@media(prefers-contrast:more){body.theme-neumorphism-deboss,body.theme-neumorphism-emboss{--color-bg: #faf9f6;--color-text: #28282b;--color-bar: #28282b;--border-bracket: var(--width-bracket) solid var(--color-bar);--filter-bracket: none;--shadow-emboss: none;--shadow-deboss: none;--shadow-bar: none}@media(prefers-color-scheme:dark){body.theme-neumorphism-deboss,body.theme-neumorphism-emboss{--color-bg: #000000;--color-text: #ffffff;--color-bar: #ffffff}}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Courier,monospace;line-height:1;color:var(--color-text);background-color:var(--color-bg);overflow:hidden}#app{height:100vh;width:100vw}#title{height:100%;display:flex;align-items:center;justify-content:center}