:root {
    color-scheme: dark;
    --tt-accent: #00a5e3;
    --tt-accent-soft: #61cbf3;
    --tt-accent-deep: #0076a5;
    --tt-success: #2dcc9f;
    --tt-warning: #f3bf48;
    --tt-danger: #ff7272;
    --tt-bg: #09131c;
    --tt-text: #d9edf7;
    --tt-text-strong: #f4fbff;
    --tt-text-soft: #8caec0;
    --tt-surface-strong: rgba(13, 26, 38, 0.94);
    --tt-surface-soft: rgba(10, 21, 31, 0.72);
    --tt-border: rgba(97, 203, 243, 0.14);
    --tt-border-strong: rgba(97, 203, 243, 0.26);
    --tt-field-bg: rgba(11, 24, 35, 0.98);
    --tt-field-placeholder: #6f95a9;
    --tt-shadow: 0 24px 70px rgba(1, 8, 16, 0.55);
    --tt-radius-md: 0.9rem;
    --tt-radius-lg: 1.25rem;
    --tt-space-sm: 0.6rem;
    --tt-space-md: 1rem;
    --tt-space-lg: 1.4rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    min-height: 100%;
}

body {
    background:
        radial-gradient(circle at top left, rgba(0, 165, 227, 0.22), transparent 26rem),
        radial-gradient(circle at 85% 10%, rgba(0, 82, 126, 0.32), transparent 28rem),
        linear-gradient(180deg, #0a1219 0%, #071017 55%, #050b10 100%);
    color: var(--tt-text);
    font-size: 16px;
    line-height: 1.55;
    margin: 0;
}

body,
button,
input,
select,
textarea {
    font-family: inherit;
}

main {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--tt-text-strong);
    line-height: 1.12;
    margin: 0 0 0.7rem;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2rem, 3.2vw, 3rem);
}

h2 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
}

p,
ul {
    margin: 0 0 1rem;
}

small {
    color: var(--tt-text-soft);
}

h1:focus {
    outline: none;
}

a,
button {
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

a {
    color: var(--tt-accent-soft);
    text-decoration-color: rgba(97, 203, 243, 0.4);
    text-underline-offset: 0.18em;
}

a:hover {
    color: #9ce3ff;
}

article {
    background: var(--tt-surface-strong);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    margin: 0;
    padding: var(--tt-space-md);
}

article,
section[role="alert"] {
    box-shadow: var(--tt-shadow);
}

form {
    margin: 0;
}

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

label {
    color: var(--tt-text-soft);
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

label:last-child {
    margin-bottom: 0;
}

input,
select,
textarea,
button {
    font: inherit;
}

input:not([type="checkbox"]):not([type="hidden"]),
select,
textarea {
    appearance: none;
    backdrop-filter: blur(12px);
    background: var(--tt-field-bg);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    color: var(--tt-text-strong);
    min-height: 2.9rem;
    outline: none;
    padding: 0.72rem 0.9rem;
    width: 100%;
}

textarea {
    min-height: 8rem;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: var(--tt-field-placeholder);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--tt-border-strong);
    box-shadow: 0 0 0 0.22rem rgba(0, 165, 227, 0.22);
}

input[type="checkbox"] {
    accent-color: var(--tt-accent);
}

.tt-checkbox {
    appearance: none;
    background: var(--tt-field-bg);
    border: 1px solid var(--tt-border-strong);
    border-radius: 0.4rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    cursor: pointer;
    display: grid;
    flex: none;
    height: 1.2rem;
    margin: 0;
    place-content: center;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
    width: 1.2rem;
}

.tt-checkbox::before {
    background: linear-gradient(180deg, #6ed8f7, #15b6f2);
    clip-path: polygon(14% 52%, 0 66%, 42% 100%, 100% 18%, 86% 4%, 39% 68%);
    content: "";
    height: 0.7rem;
    transform: scale(0);
    transform-origin: center;
    transition: transform 150ms ease;
    width: 0.7rem;
}

.tt-checkbox:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.tt-checkbox:disabled:hover {
    border-color: var(--tt-border-strong);
}

.tt-checkbox:disabled {
    cursor: default;
}

.tt-checkbox:focus-visible {
    box-shadow: 0 0 0 0.22rem rgba(0, 165, 227, 0.22);
    outline: none;
}

.tt-checkbox:checked {
    background: rgba(10, 34, 48, 0.98);
    border-color: rgba(97, 203, 243, 0.75);
}

.tt-checkbox:checked::before {
    transform: scale(1);
}

button {
    appearance: none;
    background: linear-gradient(180deg, #24b6eb, var(--tt-accent));
    border: 1px solid transparent;
    border-radius: var(--tt-radius-md);
    color: #041018;
    cursor: pointer;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0.72rem 1rem;
    text-align: center;
}

button:hover {
    box-shadow: none;
    transform: none;
}

button:focus-visible {
    box-shadow: 0 0 0 0.24rem rgba(0, 165, 227, 0.24);
    outline: none;
}

button:disabled {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.56;
    transform: none;
}

button.secondary {
    background: linear-gradient(180deg, #17384b, #102b3a);
    border-color: #29526a;
    color: var(--tt-text);
}

button.outline {
    background: transparent;
    border-color: var(--tt-border-strong);
}

button.secondary.outline {
    background: rgba(10, 24, 35, 0.45);
    color: var(--tt-text);
}

button.secondary.outline:hover,
button.outline:hover {
    background: rgba(18, 46, 63, 0.72);
}

button.contrast {
    background: linear-gradient(180deg, #6ed8f7, #15b6f2);
    color: #041018;
}

.validation-summary-invalid {
    background: rgba(255, 114, 114, 0.1);
    border: 1px solid rgba(255, 114, 114, 0.2);
    border-radius: var(--tt-radius-md);
    color: #ffc2c2;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
}

.validation-summary-invalid ul {
    margin: 0;
    padding-left: 1.1rem;
}

.validation-summary-valid {
    display: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--tt-success);
}

.invalid {
    outline: 1px solid var(--tt-danger);
}

.validation-message {
    color: #ff9f9f;
    display: block;
    font-size: 0.9rem;
    margin-top: 0.35rem;
}