body {
    font-family: "Fuzzy Bubbles", serif;
    font-weight: 400;
    font-style: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f6f6ff;
    font-size: max(3vw, 20px);
    color: #100822;
}

b, strong, .title {
    font-family: "Fuzzy Bubbles", serif;
    font-weight: 700;
    font-style: normal;
}

.emoji, .emoji::before {
    font-family: "Noto Emoji", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

.emoji.ok::before {
    content: "✅";
    color: #2a2;
}

.emoji.cancel::before {
    content: "✘";
    color: #a22;
}

.loading {
    --b: calc(1lh/16);
    width: calc(12*var(--b));
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        repeating-radial-gradient(calc(2*var(--b)) at top,#0000 -1px,#000 0 calc(50% - 1px),#0000 50% calc(100% - 1px)) calc(50% + var(--b)) 100%,
        repeating-radial-gradient(calc(2*var(--b)) at bottom,#000 -1px,#0000 0 calc(50% - 1px),#000 50% calc(100% - 1px)) 50% 0;
    background-size: 150% 50%;
    background-repeat: no-repeat;
    mask:
        radial-gradient(calc(1.5*var(--b)) at calc(100% - var(--b)/2) 0, #0000 calc(100%/3), #000 calc(100%/3 + 1px) 110%, #0000 0) calc(50% + var(--b)/2)
        100%/calc(3*var(--b)) 50% exclude no-repeat,
        conic-gradient(#000 0 0);
    animation: loading-l20 1s infinite linear;
    display: inline-block;
    margin-left: 0.5ex;
    margin-right: 0.5ex;
}
@keyframes loading-l20 {
    100% {transform: rotate(-1turn)}
}

#root {
    min-width: 300px;
    min-height: 400px;
    width: 80%;
    background-color: #ffffe3;
    border: 2px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 0.2ex 0.5ex 0.5ex 0.5ex;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#root::before {
    content: "Words Myth";
    position: absolute;
    display: block;
    top: -0.8lh;
    left: 5%;
    background-color: #ffffe3;
    border: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 0.1lh 0.5ex 0.5ex 0.5ex;
    background-image: linear-gradient(#ffffe3, #ffffe3),
                      linear-gradient(to bottom, #ccc, #ccc 0.8lh, transparent 0.8lh);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: #999;
}

.row, .menu {
    display: flex;
    flex-direction: row;
}

a {
    text-decoration: none;
    color: inherit;
}

a.plain {
    color: #c0c0f0;
}

.menu a {
    font-size: min(80%, 14px);
    color: #aaa;
    margin-left: 8px;
}

.subtitle {
    font-size: min(80%, 14px);
    color: #aaa;
    justify-content: center
}

a:not(.plain)::before {
    content: "<";
    color: #c0c0f0;
    font-size: 130%;
    line-height: 0;
    vertical-align: middle;
}

a:not(.plain)::after {
    content: ">";
    color: #c0c0f0;
    font-size: 130%;
    line-height: 0;
    vertical-align: middle;
}

a:hover::before, a:hover::after, a.plain:hover {
    color: #6060ff
}

.content {
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5ex;
    margin-top: 0.5ex;
}

.title {
    font-size: 110%;
    align-self: center;
}

.input {
    outline: 0;
    border: 0;
}

.input:focus {
    outline: 0;
    border: 0;
}

.input-wrap {
}

.input-wrap:focus-within {
    background-color: #e0e0e3;
}

.input-wrap:not(:focus-within)::before {
    content: "[";
    color: #c0c0c3;
    font-size: 130%;
    line-height: 0;
    vertical-align: middle;
}

.input-wrap:not(:focus-within)::after {
    content: "]";
    color: #c0c0c3;
    font-size: 130%;
    line-height: 0;
    vertical-align: middle;
}


.input-wrap:not(:focus-within):hover::after,
.input-wrap:not(:focus-within):hover::before {
    color: #dddd55;
}