:root{--card-bg: #1A1A1A;--card-gradient: linear-gradient(135deg, #D473F3 0%, #52D6C6 100%);--card-radius: 16px;--card-shadow: 0 4px 24px rgba(0, 0, 0, .35);--card-text-primary: #FAFAFA;--card-text-secondary: #D5D5D5;--code-bg: #2B2B2B;--code-text: #FAF7F5;--code-accent: #FCC53C;--btn-primary-bg: linear-gradient(135deg, #F857A6 0%, #FF5858 100%);--btn-primary-text: #FFFFFF;--btn-primary-radius: 8px;--btn-primary-hover-bg: linear-gradient(135deg, #FF5E99 0%, #FF4E4E 100%);--btn-primary-active-bg: linear-gradient(135deg, #D0467E 0%, #CC4444 100%);--btn-primary-disabled-bg: #333333;--btn-primary-disabled-text: #888888;--btn-primary-focus-outline: 2px solid #FAF7F5;--btn-secondary-bg: #2B2B2B;--btn-secondary-text: #FFFFFF;--btn-secondary-border: 1px solid #4D4D4D;--btn-secondary-hover-bg: #3A3A3A;--btn-secondary-focus-outline: 2px solid #FAFAFA;--heading: #FFFFFF;--subheading: #E0E0E0;--body: #CCCCCC;--text-link: #A2F6FF;--text-link-hover: #D5D5D5;--text-link-visited: #B9D6F3;--icon-fill: #FAFAFA;--icon-bg: transparent;--icon-container-bg: #1F1F1F;--icon-container-radius: 50%;--icon-container-shadow: 0 2px 8px rgba(0,0,0,.3);--bg-main: #f8f8ff;--bg-card: #1A1A1A;--bg-gradient-section: linear-gradient(135deg, #D473F3 0%, #52D6C6 100%);--bg-footer: #000000;--shadow-card: 0 4px 24px rgba(0, 0, 0, .35);--shadow-button: 0 2px 12px rgba(0, 0, 0, .2);--shadow-icon: 0 2px 8px rgba(0, 0, 0, .3);--border-default: #2B2B2B;--border-focus: #FAFAFA;--header-gradient: linear-gradient(90deg, #F857A6 0%, #FF5858 100%);--card-header-gradient: linear-gradient(135deg, #D473F3 0%, #52D6C6 100%);--feature-blocks-gradient: linear-gradient(135deg, #E6806F 0%, #FFD94F 50%, #50B7C4 100%);--footer-accent-gradient: linear-gradient(135deg, #FDFDFD 0%, #A2F6FF 100%)}body{background:var(--bg-main);color:var(--body);font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;margin:0;min-height:100vh}nav{background:var(--header-gradient);padding:1rem 2rem;display:flex;gap:2rem;border-radius:0 0 16px 16px;box-shadow:var(--shadow-card)}nav a{color:var(--text-link);font-weight:600;text-decoration:none;transition:color .2s}nav a:hover{color:var(--text-link-hover)}.card{background:var(--card-gradient);border-radius:var(--card-radius);box-shadow:var(--card-shadow);color:var(--card-text-primary);padding:2em;margin:2em auto;max-width:600px}h1,h2,h3,h4,h5,h6{color:var(--heading)}button{background:var(--btn-primary-bg);color:var(--btn-primary-text);border:var(--btn-primary-border, none);border-radius:var(--btn-primary-radius);box-shadow:var(--shadow-button);padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:background .2s,box-shadow .2s,transform .1s}button:hover{background:var(--btn-primary-hover-bg)}button:active{background:var(--btn-primary-active-bg);transform:scale(.98)}button:disabled{background:var(--btn-primary-disabled-bg);color:var(--btn-primary-disabled-text);opacity:.5;cursor:not-allowed}button:focus{outline:var(--btn-primary-focus-outline)}.secondary-btn{background:var(--btn-secondary-bg);color:var(--btn-secondary-text);border:var(--btn-secondary-border)}.secondary-btn:hover{background:var(--btn-secondary-hover-bg)}.secondary-btn:focus{outline:var(--btn-secondary-focus-outline)}.code-block{background:var(--code-bg);color:var(--code-text);border-radius:8px;padding:1em;font-family:Fira Mono,monospace;margin:1em 0}.icon-container{background:var(--icon-container-bg);border-radius:var(--icon-container-radius);box-shadow:var(--icon-container-shadow);display:inline-flex;align-items:center;justify-content:center;padding:.5em}body,html,#root{min-height:100vh;height:100%;background:#f5f6fa!important}