:root,
[data-theme="foxfield"] {
    color-scheme: dark;
    --color-base-100: #0f172a;
    --color-base-200: #1e293b;
    --color-base-300: #334155;
    --color-base-content: #f8fafc;
    --color-primary: #2563eb;
    --color-primary-content: #ffffff;
    --color-secondary: #38bdf8;
    --color-secondary-content: #020617;
    --color-accent: #0ea5e9;
    --color-accent-content: #ffffff;
    --color-neutral: #020617;
    --color-neutral-content: #f8fafc;
    --color-info: #38bdf8;
    --color-info-content: #020617;
    --color-success: #22c55e;
    --color-success-content: #020617;
    --color-warning: #f59e0b;
    --color-warning-content: #020617;
    --color-error: #ef4444;
    --color-error-content: #ffffff;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--color-base-100); }

body {
    min-height: 100vh;
    margin: 0;
    color: var(--color-base-content);
    background-color: var(--color-base-100);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background-image:
        radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--color-primary) 25%, transparent) 0, transparent 38%),
        radial-gradient(circle at 88% 86%, color-mix(in srgb, var(--color-secondary) 18%, transparent) 0, transparent 36%);
}

body.portal-dpr {
    background-image:
        radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--color-secondary) 24%, transparent) 0, transparent 38%),
        radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--color-accent) 18%, transparent) 0, transparent 36%);
}

.prototype-card {
    border: 1px solid var(--color-base-300);
    background: color-mix(in srgb, var(--color-base-200) 94%, transparent);
    box-shadow: 0 24px 80px color-mix(in srgb, var(--color-neutral) 70%, transparent);
}

.prototype-field:disabled {
    cursor: not-allowed;
    opacity: 1;
    color: var(--color-base-content);
    background: var(--color-base-100);
    border-color: var(--color-base-300);
}

.prototype-field::placeholder {
    color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
    opacity: 1;
}

.prototype-button:disabled { cursor: not-allowed; opacity: .72; }
.prototype-divider { background: linear-gradient(90deg, var(--color-primary), var(--color-secondary)); }

@media (forced-colors: active) {
    .prototype-card { border: 1px solid CanvasText; }
}