:root{--color-primary: #007AFF;--color-secondary: #5E5CE6;--color-accent: #FF9500;--color-success: #34C759;--color-warning: #FF9500;--color-error: #FF3B30;--color-neutral-100: #F5F5F7;--color-neutral-200: #E5E5EA;--color-neutral-300: #D1D1D6;--color-neutral-400: #C7C7CC;--color-neutral-500: #AEAEB2;--color-neutral-600: #8E8E93;--color-neutral-700: #636366;--color-neutral-800: #3A3A3C;--color-neutral-900: #1C1C1E;--color-background: #FFFFFF;--color-background-dark: #000000;--color-text: #000000;--color-text-secondary: #8E8E93;--color-text-light: #FFFFFF;--spacing-1: 8px;--spacing-2: 16px;--spacing-3: 24px;--spacing-4: 32px;--spacing-5: 40px;--spacing-6: 48px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 12px;--transition-duration: .3s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%;overflow-x:hidden}body{font-family:var(--font-family);font-size:var(--font-size-md);line-height:1.5;color:var(--color-text);background-color:var(--color-background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--transition-duration) ease}@media (prefers-color-scheme: dark){body{background-color:var(--color-background-dark);color:var(--color-text-light)}}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-duration) ease}a:hover{color:#0062cc}button{background:var(--color-primary);color:#fff;border:none;border-radius:var(--border-radius-md);padding:var(--spacing-1) var(--spacing-3);font-size:var(--font-size-md);font-weight:500;cursor:pointer;transition:background-color var(--transition-duration) ease,transform .1s ease}button:hover{background-color:#006ee6}button:active{transform:scale(.98)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-2)}#app{min-height:100vh;display:flex;flex-direction:column}.header{padding:var(--spacing-2) 0;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid var(--color-neutral-200)}@media (prefers-color-scheme: dark){.header{background:#000c;border-bottom:1px solid var(--color-neutral-800)}}.header .container{display:flex;justify-content:space-between;align-items:center}.header .logo{font-size:var(--font-size-xl);font-weight:600}.header .logo a{color:var(--color-text)}@media (prefers-color-scheme: dark){.header .logo a{color:var(--color-text-light)}}.header .nav{display:flex;gap:var(--spacing-3)}.header .nav a{color:var(--color-text);font-weight:500;transition:color var(--transition-duration) ease}.header .nav a:hover,.header .nav a.active{color:var(--color-primary)}@media (prefers-color-scheme: dark){.header .nav a{color:var(--color-text-light)}}.canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.canvas-container canvas{width:100%!important;height:100%!important}.canvas-container .canvas-overlay{position:absolute;bottom:var(--spacing-3);left:var(--spacing-3);padding:var(--spacing-2);background:#000000b3;color:#fff;border-radius:var(--border-radius-md);pointer-events:none;opacity:.8;transition:opacity .5s ease-out}.home-page .intro{margin-bottom:var(--spacing-4)}.home-page .intro h1{font-size:var(--font-size-4xl);line-height:1.2;margin-bottom:var(--spacing-2);font-weight:700}.home-page .intro p{font-size:var(--font-size-lg);color:var(--color-text-secondary);max-width:600px}.home-page-layout{display:flex;height:100vh;overflow:hidden}.sidebar{width:250px;background-color:#2c3e50;color:#ecf0f1;padding:15px;box-shadow:2px 0 5px #0000004d;transition:width .3s ease,padding .3s ease;position:relative;display:flex;flex-direction:column;overflow-y:auto}.sidebar.collapsed{width:50px;padding:15px 0}.sidebar.collapsed .sidebar-content{display:none}.sidebar-toggle{background-color:#34495e;color:#ecf0f1;border:none;padding:10px;cursor:pointer;width:100%;text-align:center;font-size:1.2em;margin-bottom:10px}.sidebar.collapsed .sidebar-toggle{margin-bottom:0}.sidebar-toggle:hover{background-color:#4a6278}.sidebar-content{flex-grow:1}.main-content{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;position:relative}.main-content .container{display:flex;flex-direction:column;flex-grow:1;min-height:0}.main-content .intro{flex-shrink:0;position:relative;z-index:1}.main-content .canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}#scene-container{flex-grow:1;width:100%;height:100%;min-height:300px}.canvas-overlay{position:absolute;bottom:10px;left:10px;background-color:#00000080;color:#fff;padding:5px 10px;border-radius:5px;font-size:.9em;opacity:1;transition:opacity .5s ease-out}.not-found{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:calc(100vh - 200px)}.not-found h1{font-size:var(--font-size-4xl);margin-bottom:var(--spacing-2)}.not-found p{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--spacing-4)}.not-found .back-button{display:inline-block}.loading{position:fixed;top:0;left:0;width:100%;height:100%;background:#ffffffe6;display:flex;justify-content:center;align-items:center;z-index:1000;opacity:1;transition:opacity var(--transition-duration) ease}@media (prefers-color-scheme: dark){.loading{background:#000000e6}}.loading.hidden{opacity:0;pointer-events:none}.loading .spinner{width:40px;height:40px;border:3px solid transparent;border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.page-enter{opacity:0;transform:translateY(20px)}.page-enter-active{opacity:1;transform:translateY(0);transition:opacity var(--transition-duration) ease,transform var(--transition-duration) ease}.page-exit{opacity:1}.page-exit-active{opacity:0;transition:opacity var(--transition-duration) ease}@media (max-width: 768px){.home-page .intro h1{font-size:var(--font-size-3xl)}.home-page .intro p{font-size:var(--font-size-md)}.canvas-container{height:50vh}.sidebar{width:200px}.sidebar.collapsed{width:40px}}