.ui-template {
    --ui-canvas: var(--paper);
    --ui-surface: var(--surface);
    --ui-surface-muted: var(--surface-muted);
    --ui-surface-strong: var(--ink);
    --ui-text: var(--text);
    --ui-text-muted: var(--text-muted);
    --ui-text-subtle: #767c80;
    --ui-border: var(--line-light);
    --ui-border-strong: var(--line-strong);
    --ui-accent: var(--action);
    --ui-accent-strong: var(--action-hover);
    --ui-accent-soft: #fbece7;
    --ui-focus: var(--metallic-blue-deep);
    --ui-radius-small: var(--radius);
    --ui-radius: var(--radius);
    --ui-control-height: 3rem;
    --ui-content-width: 96rem;
    --ui-gutter: var(--gutter);
    --ui-shadow-small: none;
    --ui-shadow-raised: 0 12px 32px rgba(16, 20, 22, 0.08);
    background: var(--ui-canvas);
    color: var(--ui-text);
    font-family: var(--font-ui);
    font-synthesis: none;
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.ui-template--product {
    color-scheme: light;
}

.ui-template .ui-container {
    margin-inline: auto;
    max-width: var(--ui-content-width);
    padding-inline: var(--ui-gutter);
    width: 100%;
}

.ui-template .ui-kicker {
    color: var(--ui-accent);
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.4;
    text-transform: uppercase;
}

.ui-template .ui-title {
    color: var(--ui-text);
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: 0.004em;
    line-height: 0.98;
    text-transform: uppercase;
}

.ui-template .ui-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.ui-template .ui-field__label {
    color: var(--ui-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
}

.ui-template .ui-control {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-small);
    box-shadow: 0 1px 1px rgba(19, 25, 22, 0.03);
    color: var(--ui-text);
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0;
    min-height: var(--ui-control-height);
    padding: 0.75rem 0.875rem;
    transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
    width: 100%;
}

.ui-template .ui-control::placeholder {
    color: var(--ui-text-subtle);
    opacity: 1;
}

.ui-template .ui-control:hover {
    border-color: var(--ui-border-strong);
}

.ui-template .ui-control:focus {
    border-color: var(--ui-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-focus) 16%, transparent);
    outline: 0;
}

.ui-template .ui-button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--ui-radius-small);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 650;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: 0;
    min-height: var(--ui-control-height);
    padding: 0.75rem 1.125rem;
    text-decoration: none;
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 140ms ease;
}

.ui-template .ui-button:hover {
    transform: translateY(-1px);
}

.ui-template .ui-button--primary {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    color: #ffffff;
}

.ui-template .ui-button--primary:hover {
    background: var(--ui-accent-strong);
    border-color: var(--ui-accent-strong);
}

.ui-template .ui-button--secondary {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
}

.ui-template .ui-button--secondary:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-small);
}

.ui-template .ui-button--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--ui-text-muted);
    min-height: 2.75rem;
    padding-inline: 0.75rem;
}

.ui-template .ui-button--quiet:hover {
    background: var(--ui-surface-muted);
    color: var(--ui-text);
}

@media (max-width: 720px) {
    .ui-template {
        --ui-gutter: 1rem;
    }

    .ui-template .ui-title {
        font-size: clamp(2.5rem, 13vw, 4.25rem);
    }
}