.card{padding:16px;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;box-shadow:var(--shadow-sm)}.card__title{font-size:16px;font-weight:600;margin-bottom:4px}.card__description{font-size:12px;color:var(--color-text-secondary);margin-bottom:12px}.card__content{display:flex;flex-direction:column;gap:4px}.render-tracker{position:relative;border:2px solid transparent;border-radius:8px;padding:2px;transition:all .2s ease}.render-tracker__badges{position:absolute;top:4px;right:4px;font-size:10px;font-weight:700;color:var(--tracker-color, #6366f1);display:flex;gap:2px;z-index:1001}.render-tracker__badge{background-color:#fff;padding:2px 6px;border:1px solid color-mix(in srgb,var(--tracker-color, #6366f1) 30%,transparent);border-radius:4px;box-shadow:var(--shadow-sm);text-decoration:none}.demo-contection__demo{padding:16px;background-color:var(--color-bg-secondary);border-radius:8px}.demo-contection__nested-level{padding:12px;border:1px solid var(--color-border);border-radius:6px;margin-top:8px}.demo-contection__nested-note{font-size:12px;color:var(--color-text-secondary);margin-top:8px}.demo-contection__controls{position:sticky;top:0;z-index:7000;background-color:var(--color-bg);padding:12px 0;display:flex;flex-wrap:wrap;gap:8px}@media(max-width:768px){.demo-contection__controls{font-size:14px;border-bottom:1px solid var(--color-border)}}.demo-contection__demo-title{margin-bottom:16px}.button{padding:8px 16px;border-radius:6px;border:1px solid var(--color-border);background-color:var(--color-bg);color:var(--color-text);cursor:pointer;font-weight:500;transition:all .2s;font-family:inherit;font-size:inherit}.button:hover{background-color:var(--color-bg-secondary)}.button--primary{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.button--primary:hover{background-color:var(--color-primary-dark)}.info-banner{padding:16px;border:2px solid var(--color-warning);background-color:var(--color-bg-secondary);border-radius:8px;font-weight:500}.page-contection{display:flex;flex-direction:column;gap:24px}.page-contection__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}.demo-viewport__responsive-demo{padding:16px;background-color:var(--color-bg-secondary);border-radius:8px}.demo-viewport__demo-title{margin-bottom:16px}.demo-viewport__responsive-grid{display:grid;gap:16px}.demo-viewport__responsive-grid--mobile{grid-template-columns:1fr}.demo-viewport__responsive-grid--tablet{grid-template-columns:repeat(2,1fr)}.demo-viewport__responsive-grid--desktop{grid-template-columns:repeat(3,1fr)}.demo-viewport__layout-info{margin-bottom:16px;font-size:14px;color:var(--color-text-secondary)}.responsive-card{padding:16px;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;text-align:center}.page-viewport{display:flex;flex-direction:column;gap:24px}.page-viewport__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}.demo-top-layer__card-content{display:flex;flex-direction:column;gap:8px}.demo-top-layer__controls{position:sticky;top:0;z-index:1000;background-color:var(--color-bg);padding:12px 0;display:flex;flex-wrap:wrap;gap:8px}@media(max-width:768px){.demo-top-layer__controls{display:grid;grid-template-columns:repeat(2,1fr)}}.dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9000;min-width:400px;max-width:90vw}.dialog__backdrop{position:fixed;inset:0;background-color:transparent;z-index:-1}.dialog__content{background-color:var(--color-bg);padding:24px;border-radius:12px;box-shadow:var(--shadow-lg)}.dialog__title{margin-bottom:12px}.dialog__message{margin-bottom:24px;color:var(--color-text-secondary)}.dialog__actions{display:flex;gap:8px;justify-content:flex-end}.notification{position:fixed;top:20px;right:20px;color:#fff;padding:16px 24px;border-radius:8px;box-shadow:var(--shadow-lg);z-index:7000;min-width:300px;white-space:pre-line}.notification__type{font-weight:600;margin-bottom:4px}.tooltip{position:fixed;background-color:var(--color-text);color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;pointer-events:none;z-index:7000;transform:translate(-50%,-100%);margin-top:-8px}.page-top-layer{display:flex;flex-direction:column;gap:24px}.page-top-layer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}.demo-todo{width:100%}.demo-todo__container{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media(max-width:768px){.demo-todo__container{grid-template-columns:1fr}}.demo-todo__list{display:flex;flex-direction:column;gap:16px}.demo-todo__list-title{font-size:20px;font-weight:600;margin:0;color:var(--color-text)}.demo-todo__items{display:flex;flex-direction:column;gap:12px;max-height:600px;overflow-y:auto;margin-top:12px}.demo-todo__empty{padding:24px;text-align:center;color:var(--color-text-secondary);font-style:italic}.demo-todo__item{display:flex;flex-direction:column;gap:12px;padding:16px;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;transition:all .2s ease}.demo-todo__item:hover{border-color:var(--color-primary);box-shadow:0 2px 8px #0000001a}.demo-todo__item-content{display:flex;flex-direction:column;gap:8px}.demo-todo__item-title{font-size:18px;font-weight:600;margin:0;color:var(--color-text)}.demo-todo__item-description{font-size:14px;color:var(--color-text-secondary);margin:0;line-height:1.5}.demo-todo__item-meta{display:flex;flex-direction:column;gap:4px;margin-top:8px}.demo-todo__item-date{font-size:12px;color:var(--color-text-secondary)}.demo-todo__item-actions{display:flex;gap:8px}.demo-todo__item-button{flex:1}.demo-todo__form{display:flex;flex-direction:column}.demo-todo__form-content{display:flex;flex-direction:column;gap:16px}.demo-todo__form-field{display:flex;flex-direction:column;gap:8px}.demo-todo__form-field label{font-size:14px;font-weight:500;color:var(--color-text)}.demo-todo__form-field input,.demo-todo__form-field textarea{padding:10px 12px;border:1px solid var(--color-border);border-radius:6px;font-size:14px;font-family:inherit;background-color:var(--color-bg);color:var(--color-text);transition:border-color .2s ease}.demo-todo__form-field input:focus,.demo-todo__form-field textarea:focus{outline:none;border-color:var(--color-primary)}.demo-todo__form-field input::placeholder,.demo-todo__form-field textarea::placeholder{color:var(--color-text-secondary)}.demo-todo__form-field textarea{resize:vertical;min-height:80px}.demo-todo__form-actions{display:flex;gap:8px}.page-todo{display:flex;flex-direction:column;gap:24px}.navigation{background-color:var(--color-bg);border-bottom:1px solid var(--color-border);padding:12px;box-shadow:var(--shadow-sm)}.navigation__container{max-width:1200px;margin:0 auto;display:flex;gap:8px}.navigation__container--mobile{flex-direction:column}.navigation__button{padding:8px 16px;border-radius:6px;border:none;background-color:transparent;color:var(--color-text);cursor:pointer;font-weight:400;transition:all .2s;font-family:inherit;font-size:inherit}.navigation__button:hover{background-color:var(--color-bg-secondary)}.navigation__button--active{background-color:var(--color-primary);color:#fff;font-weight:600}.navigation__button--active:hover{background-color:var(--color-primary)}.global-backdrop{position:fixed;inset:0;background-color:#00000080;z-index:8000;pointer-events:auto}.layout{padding:24px}@media(max-width:768px){.layout{padding:12px}}.layout__wrapper{max-width:1200px;margin:0 auto}.layout__header{margin-bottom:32px}.layout__title{font-size:32px;font-weight:700;margin-bottom:8px;color:var(--color-text)}.layout__description{font-size:16px;color:var(--color-text-secondary);margin-bottom:24px}.layout__content{background-color:var(--color-bg);border-radius:12px;padding:24px;box-shadow:var(--shadow-md)}@media(max-width:768px){.layout__content{padding:12px}}:root{--color-primary: #6366f1;--color-primary-dark: #4f46e5;--color-secondary: #8b5cf6;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-bg: #ffffff;--color-bg-secondary: #f9fafb;--color-border: #e5e7eb;--color-text: #111827;--color-text-secondary: #6b7280;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-bg-secondary);color:var(--color-text)}dialog{width:100%;height:100%;background:none;max-width:none;max-height:none;border:none;padding:unset}html{color-scheme:light only;word-wrap:break-word}code{font-family:Courier New,monospace}a{text-decoration:none;color:var(--color-primary)}a:hover{color:var(--color-primary-dark)}