:root {
    color-scheme: light dark;
    --bg: #FFFFFF;
    --panel: #FFFFFF;
    --hover: #F2F5FE;
    --ink: #1D1E22;
    --muted: #5E6068;
    --line: #E4E5EA;
    --brand: #2A2E54;
    --accent: #8189DE;
    --btn: #2A2E54;
    --on-btn: #F2F5FE;
    --pink: #A65364;
    --green: #457758;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #141416;
        --panel: #1D1E22;
        --hover: #23253A;
        --ink: #ECECEF;
        --muted: #A0A2AA;
        --line: #2E3036;
        --brand: #F2F5FE;
        --btn: #8189DE;
        --on-btn: #2A2E54;
        --pink: #DFABB6;
        --green: #61B280;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #141416;
    --panel: #1D1E22;
    --hover: #23253A;
    --ink: #ECECEF;
    --muted: #A0A2AA;
    --line: #2E3036;
    --brand: #F2F5FE;
    --btn: #8189DE;
    --on-btn: #2A2E54;
    --pink: #DFABB6;
    --green: #61B280;
}

:root[data-theme="light"] {
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 32px;
}

h1 {
    margin: 0;
    color: var(--brand);
    font-size: clamp(22px, 5vw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

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

h1 span {
    color: var(--accent);
}

#theme {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
}

#theme:hover {
    border-color: var(--accent);
}

#theme svg {
    width: 18px;
    height: 18px;
}

.panel {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: inset 4px 0 0 var(--accent);
}

h2 {
    margin: 0 0 8px;
    font-size: 22px;
}

.lead {
    margin: 0 0 20px;
    color: var(--muted);
}

label {
    display: block;
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 14px;
}

textarea,
.secret {
    display: block;
    width: 100%;
    min-height: 180px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    resize: vertical;
}

.secret {
    min-height: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

textarea:focus,
select:focus,
input:focus {
    border-color: var(--accent);
    outline: none;
}

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.counter {
    color: var(--muted);
    font-size: 13px;
}

select,
input[type="text"] {
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    color: var(--ink);
    font: inherit;
}

input[type="text"] {
    flex: 1;
    min-width: 0;
}

.btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 20px;
    border: 1px solid var(--btn);
    border-radius: 999px;
    background: var(--btn);
    color: var(--on-btn);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn:disabled {
    cursor: default;
    opacity: .6;
}

.btn.ghost {
    background: transparent;
    color: var(--ink);
}

.message {
    margin: 12px 0 0;
    font-size: 14px;
}

.message:empty {
    display: none;
}

.message.error {
    color: var(--pink);
}

.message.ok {
    color: var(--green);
}

.hint {
    margin: 16px 0 0;
}

[hidden] {
    display: none !important;
}

.about {
    margin-top: 16px;
    padding: 0 20px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
}

.about summary {
    padding: 16px 0;
    font-weight: 600;
    cursor: pointer;
}

.about ul {
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
}

.about li {
    margin-bottom: 10px;
}

.about b {
    color: var(--ink);
}

.about p {
    margin: 4px 0 20px;
    color: var(--ink);
}

.about .note {
    margin: 0 0 12px;
    color: var(--muted);
}

.code {
    margin: 0 0 12px;
    padding: 12px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg);
    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

code {
    font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.about a {
    color: var(--accent);
}

.about .note:last-child {
    margin-bottom: 20px;
}

select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 40px 0 18px;
    border-radius: 999px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.about summary {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
}

.about summary::-webkit-details-marker {
    display: none;
}

.about summary::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
    transition: transform .15s;
}

.about[open] summary::before {
    transform: rotate(45deg);
}

@media (max-width: 520px) {
    .controls {
        flex-direction: column;
        width: 100%;
    }

    .controls select,
    .controls .btn,
    #result .row input,
    #result .row .btn {
        width: 100%;
    }

    #result .row {
        flex-direction: column;
        align-items: stretch;
    }

    #result .row input {
        flex: none;
    }
}