/* Google Fonts (paste in page , not imported here):
*/
:root {
--background: #f4ebe3;
--foreground: #1f1611;
--card: #fbf6f0;
--card-foreground: #1f1611;
--popover: #fbf6f0;
--popover-foreground: #1f1611;
--primary: #c45c3e;
--primary-foreground: #ffffff;
--secondary: #ede3d6;
--secondary-foreground: #3d3229;
--muted: #e6d9ca;
--muted-foreground: #5c4f46;
--accent: #e8ddd0;
--accent-foreground: #1f1611;
--destructive: #a83a2a;
--destructive-foreground: #fff8f6;
--ochre: #c98a2e;
--teal: #1f6f7a;
--indigo: #22242b;
--cream: #e9d9c2;
--gold: #8b6914;
--border: rgba(31, 22, 17, 0.12);
--input: #fbf6f0;
--ring: rgba(196, 92, 62, 0.45);
--radius: 12px;
--shadow-xs: 0 1px 2px rgba(62, 38, 22, 0.08);
--shadow-sm: 0 2px 8px rgba(62, 38, 22, 0.1);
--shadow-md: 0 8px 24px rgba(62, 38, 22, 0.12);
--shadow-lg: 0 18px 48px rgba(62, 38, 22, 0.14);
--shadow-xl: 0 28px 70px rgba(62, 38, 22, 0.16);
--shadow-well: inset 0 1px 1px rgba(62, 38, 22, 0.06), inset 0 -1px 0 rgba(255, 252, 248, 0.7);
--shadow-well-deep: inset 0 1px 2px rgba(62, 38, 22, 0.1);
--accent-fill: linear-gradient(180deg, #c45c3e 0%, #ad4a30 100%);
--accent-fill-hover: linear-gradient(180deg, #cf6546 0%, #b85136 100%);
--link: #1f6f7a;
--shadow-accent: 0 0 0 0.5px rgba(196, 92, 62, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 3px rgba(62, 38, 22, 0.14), 0 0 14px rgba(196, 92, 62, 0.12);
--shadow-accent-hover: 0 0 0 0.5px rgba(196, 92, 62, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 2px 6px rgba(62, 38, 22, 0.16), 0 0 20px rgba(196, 92, 62, 0.18);
--shadow-s: var(--shadow-sm);
--shadow-m: var(--shadow-md);
--shadow-l: var(--shadow-lg);
--shadow-inset: var(--shadow-well);
--shadow-inset-deep: var(--shadow-well-deep);
--shadow-button: var(--shadow-accent);
--shadow-button-hover: var(--shadow-accent-hover);
--shadow-primary: var(--shadow-accent);
--shadow-pill: var(--shadow-accent);
--shadow-pill-hover: var(--shadow-accent-hover);
--pill-gradient: var(--accent-fill);
--pill-gradient-hover: var(--accent-fill-hover);
--text-shadow-pressed: 0 1px 0 rgba(62, 38, 22, 0.2);
--font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
--font-display: "Fraunces", ui-serif, Georgia, serif;
--font-serif: ui-serif, Georgia, serif;
--font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
}
.ds{color:var(--foreground);background:var(--background)}
.ds :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-supporting):not(.ds-card-desc):not(.ds-muted):not(.kicker):not(.eyebrow):not(.fine):not(.wait-status){color:inherit!important}
*,*::before,*::after{box-sizing:border-box}
:where(.ds){font-family:var(--font-sans);color:var(--foreground);background:var(--background);line-height:1.5}
.ds :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small){color:inherit}
.ds h1,.ds h2,.ds h3,.ds h4{font-family:inherit;font-weight:600;margin:0 0 .5em;color:var(--foreground)}
.ds .ds-display{font-family:var(--font-display);font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0;color:var(--foreground)}
.ds .ds-section-title{font-family:var(--font-display);font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:0;color:var(--foreground)}
.ds .ds-supporting{font-size:.875rem;font-weight:400;line-height:1.5;color:var(--muted-foreground);margin:0}
.ds a{color:var(--link);text-decoration:none}
.ds a.ds-btn{color:inherit}
.ds a.ds-btn:hover{text-decoration:none}
.ds p{margin:0 0 1em}
.ds-muted{color:var(--muted-foreground)}
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-size:.875rem;font-weight:500;line-height:1;padding:.6rem 1rem;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;touch-action:manipulation;transition:opacity .15s,background .15s;text-decoration:none}
.ds-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.ds-btn:disabled{background:var(--muted);color:var(--foreground);border-color:var(--border);opacity:1;cursor:not-allowed}
.ds-btn-primary{background:var(--primary);color:var(--primary-foreground);box-shadow:var(--shadow-sm)}
.ds-btn-secondary{background:var(--secondary);color:var(--secondary-foreground);box-shadow:var(--shadow-xs)}
.ds-btn-outline{background:transparent;color:var(--foreground);border-color:var(--border)}
.ds-btn-ghost{background:transparent;color:var(--foreground)}
.ds .ds-btn[aria-pressed="true"],.ds .ds-btn[aria-pressed="true"]:hover{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);opacity:1}
.ds-btn-sm{padding:.4rem .7rem;font-size:.8125rem}
.ds-btn-lg{padding:.75rem 1.4rem;font-size:1rem}
.ds-label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.4rem;color:var(--foreground)}
.ds-input,.ds-textarea,.ds-select{width:100%;font:inherit;font-size:.875rem;padding:.55rem .75rem;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--input);color:var(--foreground);box-shadow:var(--shadow-inset);transition:border-color .15s,box-shadow .15s}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--muted-foreground)}
.ds-input:focus,.ds-textarea:focus,.ds-select:focus{outline:none;border-color:var(--ring);box-shadow:var(--shadow-inset),0 0 0 2px color-mix(in oklab,var(--ring) 35%,transparent)}
.ds-textarea{min-height:5rem;resize:vertical}
.ds-card{display:flex;flex-direction:column;background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden}
.ds-card-header{padding:1.1rem 1.25rem .5rem}
.ds-card-body{padding:.5rem 1.25rem 1.1rem}
.ds-card-footer{margin-top:auto;padding:.9rem 1.25rem;border-top:1px solid var(--border);display:flex;gap:.5rem;align-items:center}
.ds-card-title{font-size:1.05rem;margin:0 0 .25rem}
.ds-card-desc{font-size:.875rem;color:var(--muted-foreground);margin:0}
.ds-badge{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:var(--secondary);color:var(--secondary-foreground);line-height:1.4}
.ds-badge-primary{background:var(--primary);color:var(--primary-foreground)}
.ds-badge-outline{background:transparent;border:1px solid var(--border);color:var(--foreground)}
.ds-alert{border:1px solid var(--border);border-radius:var(--radius-lg);padding:.9rem 1rem;background:var(--card);color:var(--card-foreground);font-size:.875rem}
.ds-alert-title{font-weight:600;margin:0 0 .2rem}
.ds-avatar{width:2.25rem;height:2.25rem;border-radius:999px;background:var(--muted);color:var(--muted-foreground);display:inline-flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:600}
.ds-divider{height:1px;background:var(--border);border:0;margin:1rem 0}
.ds-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.ds-field{margin-bottom:1rem}
.ds-control-row{display:grid;grid-template-columns:minmax(8rem,14rem) auto;gap:.75rem;align-items:end;justify-content:start}
.ds-control-row>.ds-field{margin:0}
.ds-control-row>.ds-btn,.ds-control-row .ds-input,.ds-control-row .ds-select{min-height:2.75rem}
.ds-container{max-width:42rem;margin:0 auto;padding:1.5rem}
.kicker{
font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--ochre);margin:0 0 .6rem;
}
.fine{font-size:.75rem;color:var(--muted-foreground);margin:.55rem 0 0;line-height:1.45}
.wait-status{font-size:.8125rem;font-weight:600;color:var(--link);margin:.4rem 0 0}
.grain{
position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px;
}
@media (pointer:coarse){
.ds-btn{min-height:44px}
.ds-input,.ds-select{min-height:44px;font-size:1rem}
}
@media (max-width:40rem){
.ds-control-row{grid-template-columns:1fr}
.ds-control-row>.ds-btn{width:100%}
}
@media (hover:hover) and (pointer:fine){
.ds a:hover{text-decoration:underline}
.ds-btn:hover:not(:disabled):not([aria-pressed="true"]){opacity:.9}
.ds-btn-ghost:hover:not(:disabled):not([aria-pressed="true"]){background:var(--accent);opacity:1}
.ds-input:hover:not(:disabled),.ds-textarea:hover:not(:disabled),.ds-select:hover:not(:disabled){border-color:color-mix(in oklab,var(--foreground) 20%,transparent)}
}
.ds ::selection{background:var(--primary);color:var(--primary-foreground)}
.bd-btn, .bd-view, .ds-btn { border-radius: var(--radius-md); }
.bd-card, .ds-card { border-radius: var(--radius-lg); }
.bd-btn-primary, .bd-view, .ds-btn-primary { box-shadow: var(--shadow-accent); }
.bd-btn-primary, .bd-view, .ds-btn-primary { background: var(--accent-fill); }
.ds-card { box-shadow: var(--shadow-md); }
.ds-badge, .ds-badge-primary { border-radius: 9999px; }
.ds-input, .ds-textarea, .ds-select { border-radius: var(--radius-md); box-shadow: var(--shadow-well); }
*,::before,::after,::backdrop{--tw-ring-color:currentcolor;--tw-ring-shadow:0 0 0 transparent;--tw-ring-offset-shadow:0 0 0 transparent;--tw-ring-offset-width:0px;--tw-ring-offset-color:oklch(1 0 0);--tw-ring-inset:;--tw-shadow:0 0 0 transparent;--tw-inset-shadow:0 0 0 transparent;--tw-inset-ring-shadow:0 0 0 transparent;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:;--tw-rotate-y:;--tw-rotate-z:;--tw-skew-x:;--tw-skew-y:;--tw-gradient-from:transparent;--tw-gradient-to:transparent;--tw-gradient-stops:;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-saturate:;--tw-content:''}
.ds-badge { display:inline-flex; align-items:center; gap:0.25rem; border-radius:calc(infinity * 1px); padding-left:0.625rem;padding-right:0.625rem; padding-top:0.125rem;padding-bottom:0.125rem; font-size:11px; font-weight:500; letter-spacing:0.02em; --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-inset:inset; transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; background-color:var(--secondary); color:var(--foreground); --tw-ring-color:var(--border) }
.ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; white-space:nowrap; font-size:0.875rem;line-height:1.25rem; font-weight:500; line-height:1; letter-spacing:-0.005em; border-radius:var(--radius-md); cursor:pointer; user-select:none; transition-property:background,box-shadow,transform,color,border-color;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms }
.ds-btn:focus-visible { outline:2px solid transparent;outline-offset:2px; --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color:var(--ring); --tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color:var(--background) }
.ds-btn:disabled { pointer-events:none; opacity:0.5 }
.ds-btn:active { --tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y) }
.ds .ds-btn-primary { background:var(--accent-fill); color:var(--primary-foreground); box-shadow:var(--shadow-accent) }
.ds .ds-btn-primary:hover { background:var(--accent-fill-hover); box-shadow:var(--shadow-accent-hover) }
.ds .ds-btn-primary:active { box-shadow:var(--shadow-sm) }
.ds .ds-btn-secondary { background-color:var(--secondary); color:var(--secondary-foreground); border-width:1px; border-color:var(--border); box-shadow:var(--shadow-xs) }
.ds .ds-btn-secondary:hover { background-color:var(--accent); color:var(--foreground); box-shadow:var(--shadow-sm) }
.ds .ds-btn-outline { background-color:transparent; color:var(--foreground); border-width:1px; border-color:var(--border) }
.ds .ds-btn-outline:hover { background-color:var(--accent); border-color:color-mix(in oklab, var(--border) 80%, transparent) }
.ds .ds-btn-ghost { background-color:transparent; color:var(--muted-foreground) }
.ds .ds-btn-ghost:hover { background-color:var(--accent); color:var(--foreground) }
.ds-input, .ds-textarea, .ds-select { width:100%; border-radius:var(--radius-md); padding-left:0.75rem;padding-right:0.75rem; font-size:0.875rem;line-height:1.25rem; background-color:var(--input); color:var(--foreground); border-width:1px; border-color:var(--border); transition-property:color,box-shadow,border-color;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; box-shadow:var(--shadow-well) }
.ds-input::placeholder, .ds-textarea::placeholder, .ds-select::placeholder { color:var(--muted-foreground) }
.ds-input:hover, .ds-textarea:hover, .ds-select:hover { border-color:color-mix(in oklab, var(--border) 80%, transparent) }
.ds-input:focus-visible, .ds-textarea:focus-visible, .ds-select:focus-visible { outline:2px solid transparent;outline-offset:2px; border-color:transparent; box-shadow:var(--shadow-well),0 0 0 2px var(--ring) }
.ds-input:disabled, .ds-textarea:disabled, .ds-select:disabled { cursor:not-allowed; opacity:0.5 }
.ds-card { border-radius:var(--radius-lg); background-color:var(--card); color:var(--card-foreground) }