:root{--theme-mode: "light";--color-canvas: #f8f9fa;--color-surface-card: #ffffff;--color-surface-soft: #eeeff2;--color-surface-hover: #e5e7eb;--color-primary: #18181b;--color-on-primary: #ffffff;--color-inverse-canvas: #18181b;--color-hairline: #e2e4e8;--color-hairline-strong: #18181b;--color-hairline-subtle: #eff0f3;--color-ink: #18181b;--color-ink-muted: #585c67;--color-ink-subtle: #737887;--color-inverse-ink: #ffffff;--color-block-lime: #d9f99d;--color-block-lime-border: transparent;--color-block-lime-text: #18181b;--color-block-lilac: #e9d5ff;--color-block-lilac-border: transparent;--color-block-lilac-text: #18181b;--color-block-cream: #fef08a;--color-block-cream-border: transparent;--color-block-cream-text: #18181b;--color-block-mint: #ccfbf1;--color-block-mint-border: transparent;--color-block-mint-text: #18181b;--color-block-coral: #fed7aa;--color-block-coral-border: transparent;--color-block-coral-text: #18181b;--color-block-navy: #181f2c;--color-block-navy-border: transparent;--color-block-navy-text: #ffffff;--color-input-bg: #ffffff;--color-input-border: #18181b;--color-input-text: #18181b;--color-input-placeholder: #737887;--color-tag-bg: #f4f5f7;--color-tag-text: #18181b;--color-tag-dark-bg: #18181b;--color-tag-dark-text: #ffffff;--color-modal-overlay: rgba(24, 24, 27, .55);--color-modal-bg: #ffffff;--color-modal-border: #18181b;--font-sans: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--rounded-xs: 2px;--rounded-sm: 6px;--rounded-md: 10px;--rounded-lg: 24px;--rounded-xl: 32px;--rounded-pill: 50px;--rounded-full: 9999px;--spacing-xxs: 4px;--spacing-xs: 8px;--spacing-sm: 12px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-xxl: 48px;--spacing-section: 80px;--border-hairline: 1px solid var(--color-hairline);--border-hairline-strong: 1px solid var(--color-hairline-strong)}[data-theme=dark]{--theme-mode: "dark";--color-canvas: #090a0f;--color-surface-card: #12131a;--color-surface-soft: #1a1c26;--color-surface-hover: #232533;--color-primary: #ffffff;--color-on-primary: #000000;--color-inverse-canvas: #ffffff;--color-hairline: #262835;--color-hairline-strong: #ffffff;--color-hairline-subtle: #191b24;--color-ink: #f4f4f6;--color-ink-muted: #9da1ad;--color-ink-subtle: #6b6f7d;--color-inverse-ink: #000000;--color-block-lime: #16291a;--color-block-lime-border: 1px solid #2d5533;--color-block-lime-text: #e4f9d8;--color-block-lilac: #231936;--color-block-lilac-border: 1px solid #4a3471;--color-block-lilac-text: #f0e6ff;--color-block-cream: #2e2413;--color-block-cream-border: 1px solid #5c4723;--color-block-cream-text: #fff3c9;--color-block-mint: #112929;--color-block-mint-border: 1px solid #245757;--color-block-mint-text: #dbfaf5;--color-block-coral: #301d16;--color-block-coral-border: 1px solid #633c2d;--color-block-coral-text: #ffe0d1;--color-block-navy: #070b14;--color-block-navy-border: 1px solid #1a233a;--color-block-navy-text: #ffffff;--color-input-bg: #12131a;--color-input-border: #3b3e4f;--color-input-text: #f4f4f6;--color-input-placeholder: #6b6f7d;--color-tag-bg: #1a1c26;--color-tag-text: #f4f4f6;--color-tag-dark-bg: #ffffff;--color-tag-dark-text: #000000;--color-modal-overlay: rgba(0, 0, 0, .75);--color-modal-bg: #12131a;--color-modal-border: #3b3e4f;--border-hairline: 1px solid var(--color-hairline);--border-hairline-strong: 1px solid var(--color-hairline-strong)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-canvas);color:var(--color-ink);color-scheme:light dark}body{font-family:var(--font-sans);background-color:var(--color-canvas);color:var(--color-ink);font-weight:340;line-height:1.45;transition:background-color .15s ease,color .15s ease}.type-display-xl{font-family:var(--font-sans);font-size:clamp(34px,5vw,54px);font-weight:600;line-height:1.1;letter-spacing:-1px;color:var(--color-ink)}.type-display-lg{font-family:var(--font-sans);font-size:clamp(26px,3.5vw,40px);font-weight:600;line-height:1.15;letter-spacing:-.7px;color:var(--color-ink)}.type-headline{font-family:var(--font-sans);font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.3px;color:var(--color-ink)}.type-subhead{font-family:var(--font-sans);font-size:17px;font-weight:400;line-height:1.4;letter-spacing:-.1px;color:var(--color-ink-muted)}.type-body{font-family:var(--font-sans);font-size:15px;font-weight:400;line-height:1.5;color:var(--color-ink)}.type-body-sm{font-family:var(--font-sans);font-size:13px;font-weight:400;line-height:1.45;color:var(--color-ink-muted)}.app-frame{display:flex;flex-direction:row;height:100vh;width:100vw;overflow:hidden;background-color:var(--color-canvas)}.app-main{flex:1;display:flex;flex-direction:column;min-width:0;height:100vh;overflow:hidden;background-color:var(--color-canvas)}.app-content-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%}.page-container{max-width:1200px;width:100%;margin:0 auto;padding:var(--spacing-xl) var(--spacing-lg) var(--spacing-section)}.color-block{border-radius:var(--rounded-lg);padding:var(--spacing-xxl);margin-bottom:var(--spacing-xl);display:flex;flex-direction:column;position:relative;overflow:visible;transition:background-color .15s ease,border-color .15s ease}.color-block-lime{background-color:var(--color-block-lime);border:var(--color-block-lime-border);color:var(--color-block-lime-text)}.color-block-lilac{background-color:var(--color-block-lilac);border:var(--color-block-lilac-border);color:var(--color-block-lilac-text)}.color-block-cream{background-color:var(--color-block-cream);border:var(--color-block-cream-border);color:var(--color-block-cream-text)}.color-block-mint{background-color:var(--color-block-mint);border:var(--color-block-mint-border);color:var(--color-block-mint-text)}.color-block-coral{background-color:var(--color-block-coral);border:var(--color-block-coral-border);color:var(--color-block-coral-text)}.color-block-navy{background-color:var(--color-block-navy);border:var(--color-block-navy-border);color:var(--color-block-navy-text)}.editorial-card{background-color:var(--color-surface-card);border:var(--border-hairline);border-radius:var(--rounded-md);padding:var(--spacing-lg);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.editorial-row-hover{padding:12px 14px;margin:0 -14px;border-radius:var(--rounded-md);transition:background-color .12s ease;cursor:pointer}.editorial-row-hover:hover{background-color:var(--color-surface-soft)}.editorial-card:hover{border-color:var(--color-hairline-strong)}.btn-pill-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);background-color:var(--color-primary);color:var(--color-on-primary);font-family:var(--font-sans);font-size:14px;font-weight:540;padding:9px 20px;border-radius:var(--rounded-pill);border:none;cursor:pointer;text-decoration:none;transition:opacity .12s ease,transform .12s ease;white-space:nowrap}.btn-pill-primary:hover:not(:disabled){opacity:.9;transform:scale(.99)}.btn-pill-secondary{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);background-color:var(--color-surface-card);color:var(--color-ink);font-family:var(--font-sans);font-size:14px;font-weight:500;padding:8px 18px;border-radius:var(--rounded-pill);border:var(--border-hairline);cursor:pointer;text-decoration:none;transition:background-color .12s ease,border-color .12s ease,transform .12s ease;white-space:nowrap}.btn-pill-secondary:hover:not(:disabled){background-color:var(--color-surface-soft);border-color:var(--color-hairline-strong);transform:scale(.99)}.btn-icon-circle{width:36px;height:36px;border-radius:var(--rounded-full);background-color:var(--color-surface-soft);color:var(--color-ink);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-hairline);cursor:pointer;transition:background-color .15s ease,color .15s ease}.btn-icon-circle:hover{background-color:var(--color-surface-hover)}.btn-pill-primary:disabled,.btn-pill-secondary:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.pill-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:var(--rounded-pill);font-family:var(--font-sans);font-size:12px;font-weight:500;background-color:var(--color-tag-bg);color:var(--color-tag-text);border:1px solid var(--color-hairline)}.pill-tag-dark{background-color:var(--color-tag-dark-bg);color:var(--color-tag-dark-text);border:none}.pill-tag-hairline{background-color:transparent;border:1px solid var(--color-hairline);color:var(--color-ink)}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#0000002e;border-radius:9999px;transition:background .15s ease}::-webkit-scrollbar-thumb:hover{background:#00000059}[data-theme=dark] ::-webkit-scrollbar-thumb{background:#ffffff29}[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:#ffffff52}*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.18) transparent}[data-theme=dark] *{scrollbar-color:rgba(255,255,255,.16) transparent}.figma-input{width:100%;padding:11px 16px;border-radius:var(--rounded-md);border:1px solid var(--color-input-border);background-color:var(--color-input-bg);color:var(--color-input-text);font-family:var(--font-sans);font-size:14px;font-weight:400;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.figma-input::placeholder{color:var(--color-input-placeholder)}.figma-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.figma-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:9px 38px 9px 16px;border-radius:var(--rounded-pill);border:1px solid var(--color-input-border);background-color:var(--color-input-bg);color:var(--color-ink);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;outline:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:14px;transition:all .12s ease}[data-theme=dark] .figma-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")}.figma-select:hover{background-color:var(--color-surface-soft);border-color:var(--color-primary)}.figma-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.figma-select option{background-color:var(--color-surface-card);color:var(--color-ink);padding:10px 14px}.figma-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background-color:var(--color-surface-card);border:var(--border-hairline);border-radius:var(--rounded-md);box-shadow:0 10px 28px #00000026;padding:6px;z-index:1000;display:flex;flex-direction:column;gap:2px;animation:dropdownFadeIn .12s ease-out forwards}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.figma-dropdown-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:var(--rounded-sm);font-size:13px;font-weight:480;color:var(--color-ink);background-color:transparent;border:none;cursor:pointer;text-align:left;width:100%;transition:background-color .1s ease}.figma-dropdown-item:hover{background-color:var(--color-surface-soft)}.figma-dropdown-item.active{background-color:var(--color-surface-soft);font-weight:600}@keyframes figmaShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-shimmer{background:linear-gradient(90deg,var(--color-surface-soft) 25%,var(--color-surface-hover) 37%,var(--color-surface-soft) 63%);background-size:200% 100%;animation:figmaShimmer 1.6s infinite ease-in-out;border-radius:var(--rounded-md)}.figma-top-nav{height:72px;background-color:var(--color-canvas);border-bottom:var(--border-hairline);display:flex;align-items:center;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:50;transition:background-color .15s ease,border-color .15s ease}.figma-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--color-modal-overlay);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:var(--spacing-md);z-index:1000}.figma-modal-window{background-color:var(--color-modal-bg);border-radius:var(--rounded-lg);border:1px solid var(--color-modal-border);max-width:520px;width:100%;padding:var(--spacing-xl);color:var(--color-ink);box-shadow:0 12px 32px #00000059}.hide-mobile{display:block}.show-mobile{display:none!important}@media(max-width:768px){.hide-mobile{display:none!important}.show-mobile{display:block!important}.type-display-xl{font-size:24px!important;letter-spacing:-.5px!important}.type-display-lg{font-size:20px!important;letter-spacing:-.4px!important}.type-headline{font-size:17px!important}.type-subhead{font-size:14px!important}.type-body{font-size:13px!important;line-height:1.4!important}.type-body-sm{font-size:11.5px!important;line-height:1.35!important}.page-container{padding:10px 12px 86px!important}.color-block{padding:14px!important;border-radius:14px!important;margin-bottom:10px!important}.editorial-card{padding:12px!important;border-radius:10px!important;margin-bottom:10px!important}.figma-top-nav{height:52px!important;padding:0 14px!important}.btn-pill-primary{padding:7px 14px!important;font-size:13px!important}.btn-pill-secondary{padding:6px 12px!important;font-size:12px!important}.btn-icon-circle{width:32px!important;height:32px!important}.grid-2-mobile{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.grid-3-mobile{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important}.editorial-row-hover{padding:10px!important;margin:0 -10px!important}}
