:root {
  --scale-0: 1rem;
  --scale-1: 1.125rem;
  --scale-2: 1.25rem;
  --scale-3: 1.5rem;
  --scale-4: 1.875rem;
  --scale-5: 2.25rem;
  --scale-6: 3rem;
  --scale-7: 3.75rem;
  --scale-8: 4.5rem;
  --scale-9: 6rem;
  --scale-10: 8rem;
  --scale-000: 0.75rem;
  --scale-00: 0.875rem;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-bold: 700;
  --line-none: 1;
  --line-xs: 1.125;
  --line-sm: 1.275;
  --line-md: 1.5;
  --line-lg: 1.625;
  --line-xl: 2;
  --letter-xs: -0.05em;
  --letter-sm: -0.025em;
  --letter-none: 0em;
  --letter-lg: 0.025em;
  --letter-xl: 0.05em;
  --size-1: 4px;
  --size-2: 8px;
  --size-3: 12px;
  --size-4: 16px;
  --size-5: 20px;
  --size-6: 24px;
  --size-7: 28px;
  --size-8: 32px;
  --size-9: 36px;
  --size-10: 40px;
  --size-11: 44px;
  --size-12: 48px;
  --size-14: 56px;
  --size-16: 64px;
  --size-20: 80px;
  --size-24: 96px;
  --size-28: 112px;
  --size-32: 128px;
  --size-36: 144px;
  --size-40: 160px;
  --size-44: 176px;
  --size-48: 192px;
  --size-52: 208px;
  --size-56: 224px;
  --size-60: 240px;
  --size-64: 256px;
  --size-72: 288px;
  --size-80: 320px;
  --size-96: 384px;
  --size-px: 1px;
  --size-full: 100%;
  --size-screen: 100vw;
  --size-min: min-content;
  --size-max: max-content;
  --width-xs: 480px;
  --width-sm: 640px;
  --width-md: 768px;
  --width-lg: 1024px;
  --width-xl: 1280px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 4px 6px -2px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 12px 16px -4px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 24px -4px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.25);
  --color-black: #000;
  --color-white: #fff;
  --color-grey-50: #f9fafb;
  --color-grey-100: #f3f4f6;
  --color-grey-200: #e5e7eb;
  --color-grey-300: #d1d5db;
  --color-grey-400: #9ca3af;
  --color-grey-500: #6b7280;
  --color-grey-600: #4b5563;
  --color-grey-700: #374151;
  --color-grey-800: #1f2937;
  --color-grey-900: #111827;
  --color-grey-950: #030712;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #a16207;
  --color-yellow-800: #854d0e;
  --color-yellow-900: #713f12;
  --color-yellow-950: #422006;
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-indigo-200: #c7d2fe;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-indigo-600: #4f46e5;
  --color-indigo-700: #4338ca;
  --color-indigo-800: #3730a3;
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100dvh; line-height: 1.5; font-family: "Exo 2", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased;  display: flex; flex-direction: column; margin: 0; }
body:has(dialog[open]) { overflow: hidden;}
main { flex: 1 }
img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
input, button, textarea, select { font: inherit; resize: none; }
button { appearance: none; background: none; border: none; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.2; font-weight: 600;}
code, pre { font-family: ui-monospace, monospace;}
select { cursor: pointer; padding: 10px 40px 10px 15px; background-color: var(--color-slate-600) }

[hidden] { display: none !important }

.container {padding: 10px;margin-inline: auto;max-width: var(--width-lg);}

header.header { background-color: var(--color-black); color: white; padding: var(--size-2) 0; }
header.header nav { display: flex; justify-content: space-between; align-items: center; }
header.header nav .right-nav { display: flex; gap: 2rem; align-items: center }
header.header nav .right-nav a { color: var(--color-slate-300); font-size: var(--scale-00); }
header.header nav .right-nav a:hover { color: white; }
header.header nav .right-nav a.active { color:  white; font-weight: bold; }


.link { color: var(--color-indigo-600); cursor:pointer }
.link-attn { font-weight: bold; cursor:pointer }

.form { display: flex; flex-direction: column; gap: 32px; max-width: var(--width-sm); margin-top: var(--size-8) }
.label { font-weight: var(--weight-bold); margin-bottom: var(--size-2) }
.label .input { margin-top: var(--size-2); font-weight: normal;  }
.input { background-color: var(--color-slate-50); width: 100%; padding: 0.5em 0.75em; border: 1px solid var(--color-slate-200); border-radius: var(--radius-md) }
.input.error { border-color: var(--color-red-500) }
.input ~ small { color: var(--color-slate-600); font-size: var(--scale-00) }
.input::placeholder { color: var(--color-slate-400); }
.input:disabled { opacity: 0.6 }
.input:focus { border: 1px solid var(--color-indigo-500); outline: none; box-shadow: 0 0 2px 4px color-mix(in srgb, var(--color-indigo-500) 20%, transparent); }

.button { display: flex; align-items:center; justify-content: center; gap: var(--size-2); opacity: 0.9; width: 100%; padding: var(--size-2) var(--size-4); background-color: var(--color-slate-800); color: rgb(255, 255, 255); border-radius: 6px; font-weight: 600; transition: background-color 0.2s; }
.button.warn { background-color: var(--color-red-600); }
.button.gray { background-color: var(--color-slate-100); color: var(--color-slate-500) }
.button:hover { opacity: 1 }
.button:focus { border-color: var(--color-indigo-500); outline: none; box-shadow: 0 0 2px 4px color-mix(in srgb, var(--color-indigo-500) 40%, transparent); }
.button:disabled { background-color: var(--color-grey-400); color: var(--color-grey-200); cursor: not-allowed }

.switch { position: relative; display: inline-block; width: 48px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch input:checked + .switch-slider {background-color: var(--color-indigo-600)}
.switch input:checked + .switch-slider:before { transform: translateX(20px) rotate(45deg); }
.switch .switch-slider { position: absolute; border-radius: 34px; cursor: pointer; inset: 0; background-color: #ccc; transition: .4s;}
.switch .switch-slider:before {position: absolute; border-radius: 50%; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s;}


.slider { position: relative; height: 40px; display: flex; align-items: center; width: 100%; }
.slider [data-js-progress] { position: absolute; width: 100%; height: 4px; background: rgb(229, 231, 235); border-radius: 2px; top: 50%; transform: translateY(-50%); }
.slider [data-js-progress-actual] { position: absolute; height: 4px; background: var(--color-indigo-600); border-radius: 2px; top: 50%; transform: translateY(-50%); left: 0; }
.slider input[type="range"] { position: absolute; width: 100%; appearance: none; background: transparent; pointer-events: none; }
.slider input[type="range"]:hover { cursor: pointer }

.slider input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--size-6); height: var(--size-6); border-radius: 50%; background: #ffffff; border: 3px solid var(--color-indigo-600); cursor: pointer; pointer-events: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.slider input[type='range']::-moz-range-thumb { width: var(--size-6); height: var(--size-6); border-radius: 50%; background: white; border: 3px solid var(--color-indigo-600); cursor: pointer; pointer-events: auto; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }


.tabs { display: flex; flex-direction: row; gap: var(--size-12); border-bottom: 1px solid var(--color-grey-200); }
.tabs a { display: flex; flex-direction: column; align-items: center; gap: var(--size-1); color: var(--color-slate-600); padding: var(--size-2) var(--size-2); }
.tabs a svg { width: 1.25em; display: inline }
.tabs a.active { font-weight: bold; color: black; border-bottom: 2px solid var(--color-black);  }
.tabs a.error { border-bottom-color: var(--color-red-500); color: var(--color-red-500); }

.clickable-card { cursor: pointer; padding: var(--size-2) var(--size-4); border-radius: var(--radius-md); border: 1px solid var(--color-slate-200); background: var(--color-slate-50)  }
.clickable-card header { font-weight: var(--weight-bold); color: var(--color-slate-600)  }
.clickable-card p { color: var(--color-slate-500); font-size: var(--scale-00) }
.clickable-card:has(input:disabled) { border-color: var(--color-slate-100) }
.clickable-card:has(input:disabled) header { color: var(--color-slate-300) }
.clickable-card:has(input:disabled) p { color: var(--color-slate-300) }
.clickable-card:has(input:checked) { border-color: var(--color-indigo-600); }


.conversation { border-bottom: 1px solid var(--color-slate-100); padding: var(--size-2) }
.conversation > .head { display: flex; justify-content: space-between; cursor: pointer; user-select: none;  }
.conversation > .head small { margin-left: 1em; font-size: var(--scale-000); color: var(--color-slate-300) }
.conversation.unread > .head { font-weight: bold  }
.conversation.open .content { display: block; margin-bottom: 25px; }
.conversation .messages { max-height: 400px; overflow-y: auto; flex-direction: column; display: flex; gap: var(--size-1); padding: var(--size-4) }
.conversation .messages .msg {padding: var(--size-3);border-radius: var(--radius-lg);font-size: var(--scale-00);margin-bottom: var(--size-2);background: var(--color-slate-100);color: var(--color-slate-600);}
.conversation .messages .msg .meta {margin-top: 0.5em;font-size: var(--scale-000);color: var(--color-slate-500);}
.conversation .messages .msg.mine {background: var(--color-indigo-500);color: white;margin-left: var(--scale-4);}
.conversation .messages .msg.mine .meta {color: var(--color-indigo-200);}
.conversation .messages .msg .meta { margin-top: 0.5em; font-size: var(--scale-000) }
.conversation .send { width: 30px; height: 30px; color: var(--color-slate-600); }
.conversation .send:disabled { opacity: 0.5; }


.tooltip { cursor: pointer; anchor-name: --tooltip; anchor-scope: --tooltip; }
.tooltip[data-title]:not([data-title=""])::after { content: attr(data-title); position-anchor: --tooltip; position: absolute; top: anchor(bottom); left: anchor(left); padding: 4px 16px; white-space: nowrap; color: #e2e8f0; font-size: 12px; background: #1e293b; border-radius: 4px; box-shadow: var(--shadow-sm); opacity: 0; display: none; transition: opacity 0.5s ease, display 0.5s ease; transition-behavior: allow-discrete; font-weight: bold; pointer-events: none; z-index: 999 }
.tooltip[data-title]:hover::after { opacity: 1; display: inline }
.tooltip[data-title]:focus::after { opacity: 1; display: inline }


.toast { font-weight: bold; position: fixed; bottom: 20px; right: 20px; color: white;padding: 16px 24px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999; min-width: 300px; max-width: 500px; display: flex; align-items: center;gap: 12px; animation: show-toast 0.3s ease-out;}
.toast.success {background: var(--color-green-600)}
.toast.error {background: var(--color-red-600)}
.toast .toast-icon {font-size: 20px;flex-shrink: 0;}
.toast .toast-message { flex: 1; font-size: var(--scale-0)}


.developers { display: flex; flex-direction: column; gap: var(--size-12); margin-top: var(--size-16); }
.dev-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); border: 1px solid var(--color-slate-200);  }
.dev-card header { display: grid; gap: var(--size-2); grid-template-columns: auto auto 1fr auto; align-items: center; justify-content: left }
.dev-card header .intent { justify-self: end; background: var(--color-indigo-100); color: var(--color-indigo-900); padding: 4px 8px; border-radius: 4px; font-weight: bold; font-size: var(--scale-00) }
.dev-card header .intent.closed { background: var(--color-red-100); color: var(--color-red-900); }
.dev-card h1 { font-size: var(--scale-1) }
.dev-card h2 { font-size: var(--scale-000); color: rgb(107, 114, 128); margin-bottom: 6px; }
.dev-card .prose { font-size: var(--scale-00); color: var(--color-slate-700); line-height: var(--line-md) }
.dev-card .highlights { display: flex; flex-direction: column; gap: 6px; }
.dev-card .highlight { display: flex; gap: 8px; }
.dev-card .highlight .check { color: var(--color-green-500); font-weight: bold; flex-shrink: 0; }
.dev-card .buttons { display: flex; justify-content: flex-start; gap: var(--size-2); }
.dev-card .buttons button.btn { font-size: var(--scale-2); background: var(--color-slate-100); color: var(--color-slate-500); transition: 0.2s; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; width: var(--scale-6); height: var(--scale-6) }
.dev-card .buttons button.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dev-card .buttons button.btn:hover:not(:disabled) { color: black; background: var(--color-slate-200) }


.avatar { font-size: var(--scale-00); align-items: center; justify-content: center; display: flex; width: var(--size-8); height: var(--size-8); color: white; font-weight: bold; border-radius: var(--radius-full); }

.pulse-dot { position: relative; width: var(--scale-000); height: var(--scale-000); background: var(--color-green-600); border-radius: var(--radius-full); }
.pulse-dot::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: inherit; border-radius: var(--radius-full); z-index: -1; animation: pulse-ripple 2s cubic-bezier(0.25, 0, 0, 1) infinite; }

.dots-loading { width: 12px; aspect-ratio: 1; border-radius: 50%; animation: dots-loading 1s infinite linear alternate; }


progress.text-progress { height: 4px; background: var(--color-grey-200); border-radius: 4px; appearance: none; background: var(--color-grey-200); }
progress.text-progress::-webkit-progress-bar { background: var(--color-grey-200); border-radius: 4px;  }
progress.text-progress::-webkit-progress-value { background: var(--color-green-600); border-radius: 4px;  }
progress.text-progress::-moz-progress-bar { background: var(--color-green-600); border-radius: 4px; }
progress.text-progress.invalid::-webkit-progress-value { background: var(--color-red-600) }
progress.text-progress.invalid::-moz-progress-bar { background: var(--color-red-600) }

@keyframes show-toast { from { transform: translateY(400px); } to { transform: translateY(0)} }
@keyframes pulse-ripple {  0% { transform: scale(1); opacity: 0.6; }  100% { transform: scale(2.5); opacity: 0; } }
@keyframes dots-loading {  0%   {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }  33%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}  66%  {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}  100% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }  }