/* * Dastaan Web App Styles * Industry-standard responsive design with Hindi font support */:root{--max-content-width:1200px;--content-padding:20px;--mobile-breakpoint:768px;--tablet-breakpoint:1024px}html,body{width:100%;height:100%;height:100dvh;margin:0;padding:0;overflow:hidden;font-family:'Noto Sans Devanagari','Noto Sans',-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;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1,"liga" 1}*,*::before,*::after{font-family:'Noto Sans Devanagari','Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif}canvas,svg{font-family:'Noto Sans Devanagari','Noto Sans',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif}/* * Responsive Container - Industry Standard Approach * This centers content and limits max width on large screens */ body > div:first-child{max-width:100%;margin:0 auto;height:100%}@media (min-width:1024px){body > div:first-child{max-width:var(--max-content-width);box-shadow:0 0 50px rgba(0,0,0,0.1)}}@media (min-width:768px) and (max-width:1023px){body > div:first-child{max-width:90%}}@media (max-width:767px){body > div:first-child{max-width:100%}}/* * Accessibility and UX Improvements */ *:focus-visible{outline:2px solid #667eea;outline-offset:2px}html{scroll-behavior:smooth}/* * Performance Optimizations */ canvas{transform:translateZ(0);will-change:transform}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}