:root{font-family:var(--font-family-primary, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);line-height:1.5;font-weight:400;color-scheme:light;color:var(--color-text-primary, #000000);background-color:var(--color-background, #ffffff);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl, 2rem);background-color:var(--color-background, #ffffff)}.main-content{text-align:center;max-width:800px}.main-content h1{margin:0 0 var(--spacing-md, 1rem) 0;font-family:var(--font-family-primary);font-size:var(--font-size-h1, 3.5rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-tight, 1.2);color:var(--color-text-primary, #000000);letter-spacing:var(--letter-spacing-default, -.01em)}.main-content .subtitle{margin:0;font-family:var(--font-family-primary);font-size:var(--font-size-h4, 1.5rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-normal, 1.5);color:var(--color-text-secondary, #666666);letter-spacing:var(--letter-spacing-default, -.01em)}@media(max-width:768px){.main-content h1{font-size:var(--font-size-h2, 2.5rem)}.main-content .subtitle{font-size:var(--font-size-h4, 1.25rem)}}.ds-icon-button{position:fixed;bottom:var(--spacing-xl, 2rem);right:var(--spacing-xl, 2rem);width:48px;height:48px;display:flex;align-items:center;justify-content:center;background-color:var(--color-background, #ffffff);border:1px solid var(--color-border, #e0e0e0);border-radius:var(--border-radius-full, 9999px);color:var(--color-text-primary, #000000);text-decoration:none;box-shadow:0 2px 8px #0000001a;transition:all .2s ease;z-index:1000}.ds-icon-button:hover{background-color:var(--color-surface, #f5f5f5);box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.ds-icon-button:active{transform:translateY(0)}.ds-icon-button svg{width:24px;height:24px}@media(max-width:768px){.ds-icon-button{bottom:var(--spacing-md, 1rem);right:var(--spacing-md, 1rem);width:44px;height:44px}.ds-icon-button svg{width:20px;height:20px}}.ds-page{min-height:100vh;background-color:var(--color-background, #ffffff);padding-bottom:var(--spacing-2xl, 3rem)}.ds-header{padding:var(--spacing-xl, 2rem);border-bottom:1px solid var(--color-border, #e0e0e0);background-color:var(--color-background, #ffffff);position:sticky;top:0;z-index:100}.ds-back-button{display:inline-flex;align-items:center;gap:var(--spacing-sm, 8px);color:var(--color-text-primary, #000000);text-decoration:none;font-family:var(--font-family-primary);font-size:var(--font-size-body, 1rem);margin-bottom:var(--spacing-md, 1rem);transition:color .2s ease}.ds-back-button:hover{color:var(--color-info-main, #005f78)}.ds-back-button svg{width:20px;height:20px}.ds-title{font-family:var(--font-family-primary);font-size:var(--font-size-h1, 3.5rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-tight, 1.2);margin:0 0 var(--spacing-sm, 8px) 0;color:var(--color-text-primary, #000000);letter-spacing:var(--letter-spacing-default, -.01em)}.ds-subtitle{font-family:var(--font-family-primary);font-size:var(--font-size-h4, 1.5rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-normal, 1.5);margin:0;color:var(--color-text-secondary, #666666);letter-spacing:var(--letter-spacing-default, -.01em)}.ds-content{max-width:1200px;margin:0 auto;padding:var(--spacing-xl, 2rem)}.ds-section{margin-bottom:var(--spacing-3xl, 4rem)}.ds-section-title{font-family:var(--font-family-primary);font-size:var(--font-size-h2, 2.5rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-tight, 1.2);margin:0 0 var(--spacing-xl, 2rem) 0;color:var(--color-text-primary, #000000);letter-spacing:var(--letter-spacing-default, -.01em)}.ds-colors-grid{display:flex;flex-direction:column;gap:var(--spacing-xl, 2rem)}.ds-color-group-title{font-family:var(--font-family-primary);font-size:var(--font-size-h4, 1.5rem);font-weight:var(--font-weight-semibold, 600);margin:0 0 var(--spacing-md, 1rem) 0;color:var(--color-text-primary, #000000)}.ds-color-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-md, 1rem)}.ds-color-item{display:flex;align-items:center;gap:var(--spacing-md, 1rem);padding:var(--spacing-md, 1rem);border:1px solid var(--color-border, #e0e0e0);border-radius:var(--border-radius-md, 8px);background-color:var(--color-background, #ffffff)}.ds-color-swatch{width:48px;height:48px;border-radius:var(--border-radius-md, 8px);border:1px solid var(--color-border, #e0e0e0);flex-shrink:0}.ds-color-info{display:flex;flex-direction:column;gap:var(--spacing-2px, 2px)}.ds-color-name{font-family:var(--font-family-primary);font-size:var(--font-size-body, 1rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary, #000000)}.ds-color-value{font-family:var(--font-family-primary);font-size:var(--font-size-small, 14px);color:var(--color-text-secondary, #666666);font-family:Monaco,Courier New,monospace}.ds-typography-examples{display:flex;flex-direction:column;gap:var(--spacing-xl, 2rem)}.ds-typography-item{padding:var(--spacing-xl, 2rem);border:1px solid var(--color-border, #e0e0e0);border-radius:var(--border-radius-md, 8px);background-color:var(--color-background, #ffffff)}.ds-typography-label{font-family:var(--font-family-primary);font-size:var(--font-size-small, 14px);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-secondary, #666666);margin-bottom:var(--spacing-md, 1rem);text-transform:uppercase;letter-spacing:.05em}.ds-typography-preview{color:var(--color-text-primary, #000000);margin-bottom:var(--spacing-sm, 8px)}.ds-typography-specs{font-family:var(--font-family-primary);font-size:var(--font-size-small, 14px);color:var(--color-text-secondary, #666666);font-family:Monaco,Courier New,monospace}.ds-spacing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--spacing-md, 1rem)}.ds-spacing-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm, 8px);padding:var(--spacing-md, 1rem);border:1px solid var(--color-border, #e0e0e0);border-radius:var(--border-radius-md, 8px);background-color:var(--color-background, #ffffff)}.ds-spacing-visual{border-radius:var(--border-radius-sm, 4px)}.ds-spacing-label{font-family:var(--font-family-primary);font-size:var(--font-size-small, 14px);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary, #000000)}.ds-spacing-value{font-family:var(--font-family-primary);font-size:var(--font-size-small, 14px);color:var(--color-text-secondary, #666666);font-family:Monaco,Courier New,monospace}.ds-components-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-md, 1rem)}.ds-component-card{padding:var(--spacing-lg, 1.5rem);border:1px solid var(--color-border, #e0e0e0);border-radius:var(--border-radius-md, 8px);background-color:var(--color-background, #ffffff);transition:box-shadow .2s ease}.ds-component-card:hover{box-shadow:0 4px 12px #0000001a}.ds-component-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm, 8px)}.ds-component-name{font-family:var(--font-family-primary);font-size:var(--font-size-h4, 1.5rem);font-weight:var(--font-weight-bold, 700);margin:0;color:var(--color-text-primary, #000000)}.ds-component-status{font-family:var(--font-family-primary);font-size:var(--font-size-small, 14px);font-weight:var(--font-weight-medium, 500);color:var(--color-success-main, #3c6300);background-color:var(--color-success-background, #d5dfce);padding:var(--spacing-2px, 2px) var(--spacing-sm, 8px);border-radius:var(--border-radius-sm, 4px)}.ds-component-description{font-family:var(--font-family-primary);font-size:var(--font-size-body, 1rem);line-height:var(--line-height-normal, 1.5);color:var(--color-text-secondary, #666666);margin:0}.ds-radius-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--spacing-md, 1rem)}.ds-radius-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm, 8px);padding:var(--spacing-md, 1rem);border:1px solid var(--color-border, #e0e0e0);border-radius:var(--border-radius-md, 8px);background-color:var(--color-background, #ffffff)}.ds-radius-visual{width:80px;height:80px}.ds-radius-label{font-family:var(--font-family-primary);font-size:var(--font-size-small, 14px);font-weight:var(--font-weight-semibold, 600);color:var(--color-text-primary, #000000)}.ds-radius-value{font-family:var(--font-family-primary);font-size:var(--font-size-small, 14px);color:var(--color-text-secondary, #666666);font-family:Monaco,Courier New,monospace}@media(max-width:768px){.ds-content{padding:var(--spacing-md, 1rem)}.ds-title{font-size:var(--font-size-h2, 2.5rem)}.ds-section-title{font-size:var(--font-size-h3, 2rem)}.ds-color-items,.ds-components-grid{grid-template-columns:1fr}.ds-spacing-grid,.ds-radius-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}