:root{--mochi-clay-50: #fdf8f3;--mochi-clay-100: #f5ebe0;--mochi-clay-200: #e8d5c0;--mochi-clay-300: #d4b896;--mochi-clay-400: #c49a6c;--mochi-clay-500: #b07d4b;--mochi-clay-600: #94633a;--mochi-clay-700: #7a4f2f;--mochi-clay-800: #5c3b24;--mochi-clay-900: #3d2718;--mochi-terra-50: #fef2f0;--mochi-terra-100: #fde0db;--mochi-terra-200: #fbc0b6;--mochi-terra-300: #f79485;--mochi-terra-400: #f06854;--mochi-terra-500: #e0442e;--mochi-terra-600: #c23522;--mochi-terra-700: #a12b1c;--mochi-terra-800: #7d2216;--mochi-terra-900: #591811;--mochi-sage-50: #f4f7f4;--mochi-sage-100: #e3ebe3;--mochi-sage-200: #c7d8c7;--mochi-sage-300: #a3c2a3;--mochi-sage-400: #7aaa7a;--mochi-sage-500: #5c8f5c;--mochi-sage-600: #4a754a;--mochi-sage-700: #3b5e3b;--mochi-sage-800: #2d482d;--mochi-sage-900: #1f321f;--mochi-sand-50: #faf8f5;--mochi-sand-100: #f0ebe4;--mochi-sand-200: #ddd4c8;--mochi-sand-300: #c4b7a6;--mochi-sand-400: #a89985;--mochi-sand-500: #8f7d68;--mochi-sand-600: #756654;--mochi-sand-700: #5e5143;--mochi-sand-800: #483e33;--mochi-sand-900: #312a22;--mochi-slate-50: #f6f7f9;--mochi-slate-100: #eceef2;--mochi-slate-200: #d5dae2;--mochi-slate-300: #b0bac9;--mochi-slate-400: #8a96a8;--mochi-slate-500: #6b7788;--mochi-slate-600: #555f6e;--mochi-slate-700: #444c59;--mochi-slate-800: #353b45;--mochi-slate-900: #1e2229;--mochi-surface: var(--mochi-sand-50);--mochi-surface-elevated: #ffffff;--mochi-surface-sunken: var(--mochi-sand-100);--mochi-surface-inset: var(--mochi-sand-200);--mochi-text-primary: var(--mochi-sand-900);--mochi-text-secondary: var(--mochi-sand-600);--mochi-text-tertiary: var(--mochi-sand-400);--mochi-text-inverse: var(--mochi-sand-50);--mochi-border: var(--mochi-sand-200);--mochi-border-subtle: var(--mochi-sand-100);--mochi-font-display: "Instrument Serif", "Georgia", serif;--mochi-font-body: "Inter", "SF Pro Display", -apple-system, sans-serif;--mochi-font-mono: "Geist Mono", "JetBrains Mono", "Fira Code", monospace;--mochi-text-xs: clamp(.625rem, .58rem + .22vw, .75rem);--mochi-text-sm: clamp(.75rem, .69rem + .28vw, .875rem);--mochi-text-base: clamp(.875rem, .81rem + .33vw, 1rem);--mochi-text-lg: clamp(1rem, .92rem + .39vw, 1.125rem);--mochi-text-xl: clamp(1.125rem, 1.03rem + .44vw, 1.25rem);--mochi-text-2xl: clamp(1.25rem, 1.08rem + .83vw, 1.5rem);--mochi-text-3xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);--mochi-text-4xl: clamp(1.875rem, 1.42rem + 2.28vw, 3rem);--mochi-text-5xl: clamp(2.25rem, 1.5rem + 3.75vw, 4rem);--mochi-text-6xl: clamp(3rem, 1.83rem + 5.83vw, 6rem);--mochi-text-7xl: clamp(3.75rem, 2rem + 8.75vw, 8rem);--mochi-weight-light: 300;--mochi-weight-regular: 400;--mochi-weight-medium: 500;--mochi-weight-semibold: 600;--mochi-weight-bold: 700;--mochi-leading-tight: 1.1;--mochi-leading-snug: 1.25;--mochi-leading-normal: 1.5;--mochi-leading-relaxed: 1.625;--mochi-leading-loose: 2;--mochi-tracking-tighter: -.05em;--mochi-tracking-tight: -.025em;--mochi-tracking-normal: 0;--mochi-tracking-wide: .025em;--mochi-tracking-wider: .05em;--mochi-tracking-widest: .1em;--mochi-shadow-outer-dark: 8px 8px 16px rgba(0, 0, 0, .08);--mochi-shadow-outer-light: -8px -8px 16px rgba(255, 255, 255, .9);--mochi-shadow-inset-highlight: inset 2px 2px 4px rgba(255, 255, 255, .7);--mochi-shadow-inset-shadow: inset -2px -2px 4px rgba(0, 0, 0, .04);--mochi-shadow-edge: 0 0 0 1px rgba(255, 255, 255, .5);--mochi-clay-rest: var(--mochi-shadow-outer-dark), var(--mochi-shadow-outer-light), var(--mochi-shadow-edge);--mochi-clay-pressed: var(--mochi-shadow-inset-highlight), var(--mochi-shadow-inset-shadow);--mochi-clay-elevated: 12px 12px 24px rgba(0, 0, 0, .1), -12px -12px 24px rgba(255, 255, 255, .95), var(--mochi-shadow-edge);--mochi-clay-inset: inset 4px 4px 8px rgba(0, 0, 0, .06), inset -4px -4px 8px rgba(255, 255, 255, .8);--mochi-space-1: .25rem;--mochi-space-2: .5rem;--mochi-space-3: .75rem;--mochi-space-4: 1rem;--mochi-space-5: 1.25rem;--mochi-space-6: 1.5rem;--mochi-space-8: 2rem;--mochi-space-10: 2.5rem;--mochi-space-12: 3rem;--mochi-space-16: 4rem;--mochi-space-20: 5rem;--mochi-space-24: 6rem;--mochi-space-32: 8rem;--mochi-radius-sm: 8px;--mochi-radius-md: 12px;--mochi-radius-lg: 16px;--mochi-radius-xl: 24px;--mochi-radius-2xl: 32px;--mochi-radius-full: 9999px;--mochi-spring-gentle: cubic-bezier(.34, 1.56, .64, 1);--mochi-spring-snappy: cubic-bezier(.175, .885, .32, 1.275);--mochi-spring-bouncy: cubic-bezier(.68, -.55, .265, 1.55);--mochi-spring-smooth: cubic-bezier(.4, 0, .2, 1);--mochi-duration-instant: 80ms;--mochi-duration-fast: .15s;--mochi-duration-normal: .25s;--mochi-duration-slow: .4s;--mochi-duration-slower: .6s;--mochi-ease-default: cubic-bezier(.4, 0, .2, 1);--mochi-ease-in: cubic-bezier(.4, 0, 1, 1);--mochi-ease-out: cubic-bezier(0, 0, .2, 1);--mochi-ease-in-out: cubic-bezier(.4, 0, .2, 1);--mochi-z-base: 0;--mochi-z-dropdown: 100;--mochi-z-sticky: 200;--mochi-z-fixed: 300;--mochi-z-modal-backdrop: 400;--mochi-z-modal: 500;--mochi-z-popover: 600;--mochi-z-tooltip: 700;--mochi-z-toast: 800}[data-theme=dark]{--mochi-surface: var(--mochi-slate-900);--mochi-surface-elevated: var(--mochi-slate-800);--mochi-surface-sunken: var(--mochi-slate-900);--mochi-surface-inset: var(--mochi-slate-800);--mochi-text-primary: var(--mochi-sand-100);--mochi-text-secondary: var(--mochi-sand-400);--mochi-text-tertiary: var(--mochi-sand-600);--mochi-text-inverse: var(--mochi-slate-900);--mochi-border: var(--mochi-slate-700);--mochi-border-subtle: var(--mochi-slate-800);--mochi-shadow-outer-dark: 8px 8px 16px rgba(0, 0, 0, .4);--mochi-shadow-outer-light: -8px -8px 16px rgba(255, 255, 255, .03);--mochi-shadow-inset-highlight: inset 2px 2px 4px rgba(255, 255, 255, .05);--mochi-shadow-inset-shadow: inset -2px -2px 4px rgba(0, 0, 0, .3);--mochi-shadow-edge: 0 0 0 1px rgba(255, 255, 255, .05)}@media(prefers-reduced-motion:reduce){:root{--mochi-spring-gentle: ease;--mochi-spring-snappy: ease;--mochi-spring-bouncy: ease;--mochi-spring-smooth: ease;--mochi-duration-instant: 0ms;--mochi-duration-fast: 0ms;--mochi-duration-normal: 0ms;--mochi-duration-slow: 0ms;--mochi-duration-slower: 0ms}}.clay-surface{position:relative;background:linear-gradient(145deg,var(--mochi-surface-elevated) 0%,var(--mochi-surface) 100%);border-radius:var(--mochi-radius-xl);box-shadow:var(--mochi-clay-rest);transition:box-shadow var(--mochi-duration-normal) var(--mochi-spring-gentle),transform var(--mochi-duration-normal) var(--mochi-spring-snappy);will-change:transform,box-shadow}.clay-surface:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,#fff6,#fff0,#00000005);pointer-events:none;z-index:1}.clay-surface:after{content:"";position:absolute;inset:1px;border-radius:calc(var(--mochi-radius-xl) - 1px);border:1px solid rgba(255,255,255,.3);pointer-events:none;z-index:2}.clay-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--mochi-space-2);padding:var(--mochi-space-3) var(--mochi-space-6);font-family:var(--mochi-font-body);font-size:var(--mochi-text-base);font-weight:var(--mochi-weight-semibold);color:var(--mochi-text-primary);background:linear-gradient(145deg,var(--mochi-surface-elevated) 0%,var(--mochi-surface) 100%);border:none;border-radius:var(--mochi-radius-lg);box-shadow:var(--mochi-clay-rest);cursor:pointer;user-select:none;overflow:hidden;transition:box-shadow var(--mochi-duration-normal) var(--mochi-spring-gentle),transform var(--mochi-duration-fast) var(--mochi-spring-snappy);will-change:transform,box-shadow}.clay-button:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,#ffffff80,#fff0,#00000008);pointer-events:none}.clay-button:hover{box-shadow:var(--mochi-clay-elevated);transform:translateY(-2px)}.clay-button:active,.clay-button[data-pressed=true]{box-shadow:var(--mochi-clay-pressed);transform:translateY(1px) scale(.97)}.clay-button:focus-visible{outline:2px solid var(--mochi-terra-400);outline-offset:3px}.clay-button--primary{background:linear-gradient(145deg,var(--mochi-terra-400) 0%,var(--mochi-terra-500) 100%);color:#fff;box-shadow:8px 8px 16px #e0442e33,-8px -8px 16px #ffffff1a,0 0 0 1px #e0442e4d}.clay-button--primary:hover{box-shadow:12px 12px 24px #e0442e40,-12px -12px 24px #ffffff26,0 0 0 1px #e0442e66}.clay-button--primary:active{box-shadow:inset 2px 2px 4px #00000026,inset -2px -2px 4px #ffffff1a}.clay-button--secondary{background:linear-gradient(145deg,var(--mochi-sage-400) 0%,var(--mochi-sage-500) 100%);color:#fff}.clay-button--ghost{background:transparent;box-shadow:none;color:var(--mochi-text-secondary)}.clay-button--ghost:hover{background:var(--mochi-surface-sunken);box-shadow:var(--mochi-clay-rest)}.clay-card{position:relative;padding:var(--mochi-space-6);background:linear-gradient(145deg,var(--mochi-surface-elevated) 0%,var(--mochi-surface) 100%);border-radius:var(--mochi-radius-xl);box-shadow:var(--mochi-clay-rest);transition:box-shadow var(--mochi-duration-normal) var(--mochi-spring-gentle),transform var(--mochi-duration-normal) var(--mochi-spring-snappy);will-change:transform,box-shadow}.clay-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,#ffffff59,#fff0,#00000005);pointer-events:none}.clay-card:after{content:"";position:absolute;inset:1px;border-radius:calc(var(--mochi-radius-xl) - 1px);border:1px solid rgba(255,255,255,.25);pointer-events:none}.clay-card:hover{box-shadow:var(--mochi-clay-elevated);transform:translateY(-4px)}.clay-card--interactive:active{box-shadow:var(--mochi-clay-pressed);transform:translateY(1px) scale(.99)}.clay-card--sm{padding:var(--mochi-space-4);border-radius:var(--mochi-radius-lg)}.clay-card--lg{padding:var(--mochi-space-8);border-radius:var(--mochi-radius-2xl)}.clay-input{width:100%;padding:var(--mochi-space-3) var(--mochi-space-4);font-family:var(--mochi-font-body);font-size:var(--mochi-text-base);color:var(--mochi-text-primary);background:var(--mochi-surface);border:none;border-radius:var(--mochi-radius-lg);box-shadow:var(--mochi-clay-inset);outline:none;transition:box-shadow var(--mochi-duration-normal) var(--mochi-ease-default),background var(--mochi-duration-fast) var(--mochi-ease-default)}.clay-input::placeholder{color:var(--mochi-text-tertiary)}.clay-input:focus{box-shadow:var(--mochi-clay-inset),0 0 0 2px var(--mochi-terra-300)}.clay-input-wrapper label{display:block;margin-bottom:var(--mochi-space-2);font-size:var(--mochi-text-sm);font-weight:var(--mochi-weight-medium);color:var(--mochi-text-secondary)}.clay-toggle{position:relative;display:inline-flex;align-items:center;width:52px;height:28px;padding:2px;background:var(--mochi-surface-inset);border-radius:var(--mochi-radius-full);box-shadow:var(--mochi-clay-inset);cursor:pointer;transition:background var(--mochi-duration-normal) var(--mochi-ease-default)}.clay-toggle__thumb{width:24px;height:24px;background:linear-gradient(145deg,var(--mochi-surface-elevated) 0%,var(--mochi-surface) 100%);border-radius:var(--mochi-radius-full);box-shadow:var(--mochi-clay-rest);transform:translate(0);transition:transform var(--mochi-duration-normal) var(--mochi-spring-bouncy),background var(--mochi-duration-normal) var(--mochi-ease-default)}.clay-toggle[data-checked=true]{background:linear-gradient(145deg,var(--mochi-terra-400) 0%,var(--mochi-terra-500) 100%)}.clay-toggle[data-checked=true] .clay-toggle__thumb{transform:translate(24px)}.clay-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:var(--mochi-surface-inset);border-radius:var(--mochi-radius-full);box-shadow:var(--mochi-clay-inset);outline:none}.clay-slider::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:linear-gradient(145deg,var(--mochi-surface-elevated) 0%,var(--mochi-surface) 100%);border-radius:var(--mochi-radius-full);box-shadow:var(--mochi-clay-rest);cursor:pointer;transition:transform var(--mochi-duration-fast) var(--mochi-spring-snappy),box-shadow var(--mochi-duration-fast) var(--mochi-spring-snappy)}.clay-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:var(--mochi-clay-elevated)}.clay-slider::-webkit-slider-thumb:active{transform:scale(.95);box-shadow:var(--mochi-clay-pressed)}.clay-slider::-moz-range-thumb{width:24px;height:24px;background:linear-gradient(145deg,var(--mochi-surface-elevated) 0%,var(--mochi-surface) 100%);border-radius:var(--mochi-radius-full);box-shadow:var(--mochi-clay-rest);border:none;cursor:pointer}.clay-progress{width:100%;height:12px;background:var(--mochi-surface-inset);border-radius:var(--mochi-radius-full);box-shadow:var(--mochi-clay-inset);overflow:hidden}.clay-progress__bar{height:100%;background:linear-gradient(90deg,var(--mochi-terra-400) 0%,var(--mochi-terra-500) 100%);border-radius:var(--mochi-radius-full);box-shadow:inset 0 1px 2px #ffffff4d,2px 0 8px #e0442e33;transition:width var(--mochi-duration-slow) var(--mochi-spring-gentle)}.clay-badge{display:inline-flex;align-items:center;gap:var(--mochi-space-1);padding:var(--mochi-space-1) var(--mochi-space-3);font-family:var(--mochi-font-mono);font-size:var(--mochi-text-xs);font-weight:var(--mochi-weight-medium);letter-spacing:var(--mochi-tracking-wide);text-transform:uppercase;color:var(--mochi-text-secondary);background:linear-gradient(145deg,var(--mochi-surface-elevated) 0%,var(--mochi-surface) 100%);border-radius:var(--mochi-radius-md);box-shadow:var(--mochi-clay-rest)}.clay-badge--accent{color:var(--mochi-terra-500);background:linear-gradient(145deg,var(--mochi-terra-50) 0%,var(--mochi-terra-100) 100%)}.clay-modal-backdrop{position:fixed;inset:0;background:#0000004d;backdrop-filter:blur(8px);z-index:var(--mochi-z-modal-backdrop);display:flex;align-items:center;justify-content:center;padding:var(--mochi-space-4)}.clay-modal{position:relative;width:100%;max-width:560px;max-height:90vh;padding:var(--mochi-space-8);background:linear-gradient(145deg,var(--mochi-surface-elevated) 0%,var(--mochi-surface) 100%);border-radius:var(--mochi-radius-2xl);box-shadow:20px 20px 60px #00000026,-20px -20px 60px #fffc,0 0 0 1px #fff6;overflow-y:auto}.clay-tooltip{position:absolute;padding:var(--mochi-space-2) var(--mochi-space-3);font-size:var(--mochi-text-sm);color:var(--mochi-text-inverse);background:var(--mochi-sand-800);border-radius:var(--mochi-radius-md);box-shadow:4px 4px 12px #00000026,-2px -2px 8px #ffffff0d;pointer-events:none;z-index:var(--mochi-z-tooltip);opacity:0;transform:translateY(4px);transition:opacity var(--mochi-duration-fast) var(--mochi-ease-out),transform var(--mochi-duration-fast) var(--mochi-spring-snappy)}.clay-tooltip[data-visible=true]{opacity:1;transform:translateY(0)}.clay-segmented{display:inline-flex;padding:4px;background:var(--mochi-surface-inset);border-radius:var(--mochi-radius-lg);box-shadow:var(--mochi-clay-inset);gap:2px}.clay-segmented__item{padding:var(--mochi-space-2) var(--mochi-space-4);font-size:var(--mochi-text-sm);font-weight:var(--mochi-weight-medium);color:var(--mochi-text-secondary);background:transparent;border:none;border-radius:calc(var(--mochi-radius-lg) - 4px);cursor:pointer;transition:color var(--mochi-duration-fast) var(--mochi-ease-default),background var(--mochi-duration-fast) var(--mochi-ease-default)}.clay-segmented__item[data-active=true]{color:var(--mochi-text-primary);background:linear-gradient(145deg,var(--mochi-surface-elevated) 0%,var(--mochi-surface) 100%);box-shadow:var(--mochi-clay-rest)}.clay-avatar-stack{display:flex;align-items:center}.clay-avatar-stack__item{width:40px;height:40px;margin-left:-12px;border-radius:var(--mochi-radius-full);box-shadow:2px 2px 6px #0000001a,-1px -1px 4px #fffc,0 0 0 3px var(--mochi-surface);overflow:hidden;transition:transform var(--mochi-duration-fast) var(--mochi-spring-snappy),margin-left var(--mochi-duration-normal) var(--mochi-spring-gentle)}.clay-avatar-stack__item:first-child{margin-left:0}.clay-avatar-stack__item:hover{transform:scale(1.1) translateY(-2px);z-index:2}.clay-avatar-stack:hover .clay-avatar-stack__item{margin-left:2px}.clay-avatar-stack:hover .clay-avatar-stack__item:first-child{margin-left:0}.clay-scroll::-webkit-scrollbar{width:8px}.clay-scroll::-webkit-scrollbar-track{background:var(--mochi-surface-inset);border-radius:var(--mochi-radius-full)}.clay-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--mochi-sand-300) 0%,var(--mochi-sand-400) 100%);border-radius:var(--mochi-radius-full)}.clay-scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--mochi-sand-400) 0%,var(--mochi-sand-500) 100%)}
