/* The desk in the studio's own look: its colours, its type, its door. The fonts are the desk's own files (SIL Open
 * Font License, beside them in fonts/): nothing comes from another address. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/inter/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/space-grotesk/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jetbrains-mono/jetbrains-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root { color-scheme: dark; --bg: #0a0a0b; --card: rgba(255, 255, 255, .05); --line: rgba(255, 255, 255, .1); --field: rgba(0, 0, 0, .4); --field-line: rgba(255, 255, 255, .15); --text: #fff; --soft: rgba(255, 255, 255, .6); --dim: rgba(255, 255, 255, .5); --lime: #cdff2e; --bad: #ff8080; --good: #4ee466; --mono: "JetBrains Mono", ui-monospace, monospace; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; background: radial-gradient(90vw 90vw at 50% -30%, rgba(205, 255, 46, .06), transparent 60%) no-repeat, var(--bg); color: var(--text); font: 15px/1.5 "Inter", system-ui, sans-serif; }

header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { position: relative; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--lime); box-shadow: 0 0 18px rgba(205, 255, 46, .45); }
.brand-mark::after { content: ""; position: absolute; inset: 7px; border-radius: 3px; background: #0a0a0b; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.brand-text { display: flex; flex-direction: column; line-height: 1.06; }
.brand-name { font-family: "Space Grotesk", "Inter", system-ui, sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .13em; text-transform: uppercase; color: #f5f5f6; }
.brand-sub { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
header nav { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .05); font: 500 11px/16px var(--mono); }
.lang a { padding: 2px 8px; border-radius: 999px; letter-spacing: .06em; color: rgba(255, 255, 255, .55); }
.lang a:hover { color: #fff; text-decoration: none; }
.lang a.on { background: var(--lime); color: #000; }

a { color: var(--lime); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
main { max-width: 980px; margin: 24px auto; padding: 0 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin-bottom: 18px; overflow-x: auto; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.card.narrow { max-width: 384px; margin-left: auto; margin-right: auto; padding: 32px; }
.card.narrow button[type=submit] { width: 100%; }
.card.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
h1 { font-size: 20px; font-weight: 600; margin: 0 0 8px; } h2 { font-size: 17px; font-weight: 600; margin: 0 0 8px; } h3 { font-size: 14px; font-weight: 600; margin: 12px 0 8px; }
p { margin: 8px 0; }

label { display: block; margin: 12px 0; color: var(--dim); font-size: 12px; }
input, select { display: block; width: 100%; margin-top: 4px; padding: 8px 12px; background: var(--field); color: var(--text); border: 1px solid var(--field-line); border-radius: 10px; font: inherit; font-size: 14px; outline: none; }
input:focus, select:focus { border-color: var(--lime); }
input::placeholder { color: rgba(255, 255, 255, .3); }
select option { background: #161619; }
button { margin-top: 8px; min-height: 38px; padding: 8px 16px; background: var(--lime); color: #000; border: 0; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: filter .15s; }
button:hover { filter: brightness(1.1); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
button.small { min-height: 0; margin: 0; padding: 4px 10px; background: rgba(255, 255, 255, .06); color: var(--text); border: 1px solid var(--field-line); font-size: 12px; font-weight: 500; }
button.small:hover { background: rgba(255, 255, 255, .1); filter: none; }
button.link { min-height: 0; margin: 0; padding: 0; background: none; color: var(--lime); font-size: 15px; font-weight: 400; }
button.link:hover { text-decoration: underline; text-underline-offset: 4px; filter: none; }
label[for] { margin-bottom: 4px; }
.reveal { position: relative; margin: 0 0 12px; }
.reveal input { margin: 0; padding-right: 44px; }
.reveal input::-ms-reveal { display: none; }
.reveal input::-ms-clear { display: none; }
button.eye { position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 44px; min-height: 0; margin: 0; padding: 0; background: none; color: var(--soft); -webkit-tap-highlight-color: transparent; }
button.eye:hover { color: var(--text); filter: none; }
button.eye:focus-visible { outline-offset: -2px; }
button.eye[hidden] { display: none; }
button.eye[aria-pressed="true"] .eye-open, button.eye[aria-pressed="false"] .eye-shut { display: none; }
form.inline { display: inline; }
td:has(> form.inline) { white-space: nowrap; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--dim); font-size: 12px; font-weight: 500; }
tr.off td { color: var(--dim); }
.mono { font-family: var(--mono); font-size: 13px; }
.copyable { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; }
.copyable pre { flex: 1; min-width: 0; margin: 0; }
button.copy { flex: none; margin-top: 8px; }
button.copy.done { border-color: var(--lime); color: var(--lime); }
pre.select { user-select: all; white-space: pre-wrap; word-break: break-all; background: var(--field); border: 1px solid var(--field-line); border-radius: 10px; padding: 12px; }
pre.select.message { word-break: normal; overflow-wrap: anywhere; }
.hint { color: var(--soft); font-size: 13px; }
ol.steps { margin: 8px 0; padding-left: 20px; }
ol.steps li { margin: 4px 0; }
.error { color: var(--bad); } .ok { color: var(--good); }
.big { font-size: 18px; }