:root{color-scheme:dark;--bg-primary: #0f0f0f;--bg-secondary: #1a1a1a;--bg-tertiary: #252525;--text-primary: #ffffff;--text-secondary: #b0b0b0;--text-muted: #808080;--border-color: #333333;--accent-color: #ffffff;--accent-hover: #e0e0e0}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:radial-gradient(ellipse at top,#1a1a1a,#0a0a0a);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;color:var(--text-primary);overflow-x:hidden;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative}.isometric-grid-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.5}.home-container:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;background:radial-gradient(ellipse 100% 50% at top center,rgba(0,0,0,.7) 0%,transparent 99%),radial-gradient(ellipse 100% 50% at bottom center,rgba(0,0,0,.7) 0%,transparent 97%);z-index:0}h1{position:fixed;pointer-events:none;z-index:0}.iso-text-ludic,.iso-text-field{position:fixed;font-size:120px;font-weight:900;color:#ffffffb3;pointer-events:none;z-index:0;white-space:nowrap;letter-spacing:.05em;text-shadow:0 20px 50px rgba(0,0,0,.6)}.iso-text-ludic{color:#fff3;top:138px;right:calc(50% + 280px);font-size:60px;transform:matrix(.966,-.259,.966,.259,0,0);transform-origin:bottom right}.iso-text-field{top:80px;right:calc(50% - 70px);transform:skewY(15deg) scaleX(.966);transform-origin:bottom left}.home-container{min-height:100vh;display:flex;flex-direction:column;padding:0;position:relative;z-index:1;max-width:1920px;margin:0 auto}.main-content{flex:1;position:relative;width:100%;height:100%}.hero{position:absolute;left:200px;bottom:80px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:left;z-index:10;background:#0006;padding:24px;clip-path:polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px))}.hero-subtitle{font-size:18px;font-weight:400;color:var(--text-secondary);margin-bottom:20px;letter-spacing:0}.hero-description{font-size:16px;line-height:1.7;color:var(--text-secondary);margin-bottom:24px;max-width:500px}.hero-description strong{color:var(--text-primary);font-weight:600;text-shadow:0 0 10px rgba(255,255,255,.3)}.button-group{display:flex;flex-direction:column;gap:12px;width:100%;max-width:350px}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;font-size:16px;font-weight:500;font-family:inherit;background:var(--text-primary);color:var(--bg-primary);border:none;border-radius:6px;text-decoration:none;cursor:pointer;transition:all .15s ease;width:100%}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn-primary.btn-dimmed{background:#ffffff4d;color:#ffffffb3}.btn-primary.btn-dimmed:hover{background:#fff6;color:#ffffffd9}.btn-icon{font-size:14px}.tutorial-section{position:absolute;right:0;top:0;width:50%;height:100%;display:flex;align-items:center;justify-content:center;perspective:1500px;perspective-origin:center center}.video-platform{position:relative;width:100%;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;margin-top:-150px;margin-right:-200px}.video-container{width:100%;aspect-ratio:16 / 9;background:var(--bg-secondary);border:1px dashed rgba(255,255,255,.5);border-radius:0;overflow:hidden;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;transform:skewY(15deg) scaleX(.966);transform-origin:bottom left;box-shadow:0 20px 50px #0009,0 0 0 1px #ffffff1a;transition:box-shadow 2s ease}.video-container.video-ambient-glow{will-change:box-shadow;animation:ambientGlow 8s ease-in-out infinite}@keyframes ambientGlow{0%,to{box-shadow:0 20px 50px #0009,0 0 40px #dce6ff33,0 0 80px #dce6ff1a}50%{box-shadow:0 20px 50px #0009,0 0 40px #f0f5ff40,0 0 80px #f0f5ff26}}.video-container>*{position:absolute;top:0;left:0;width:100%;height:100%}.video-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.video-play-btn{display:flex;align-items:center;gap:10px;padding:12px 24px;font-size:16px;font-weight:500;font-family:inherit;background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .15s ease}.video-play-btn:hover{background:var(--bg-primary);border-color:var(--text-muted)}.play-icon{font-size:14px}.video-caption{font-size:14px;color:var(--text-muted)}.video-placeholder-img{object-fit:cover;display:block;transition:opacity 1s ease-in-out;z-index:2}.video-loading-indicator{position:static;display:flex;align-items:center;gap:8px;padding:12px 16px;background:#000000d9;border:1px solid rgba(100,200,255,.3);border-radius:4px;z-index:10;width:auto;height:auto;transition:all .3s ease-in-out;box-shadow:0 8px 24px #000c,0 0 20px #64c8ff4d,0 0 40px #64c8ff26}.video-loading-indicator.play-button{cursor:pointer;border-color:#64c8ff80;will-change:box-shadow;animation:playButtonPulse 2s ease-in-out infinite}.video-loading-indicator.play-button:hover{background:#000000d9;border-color:#64c8ffcc;transform:scale(1.05);box-shadow:0 8px 32px #000000e6,0 0 30px #64c8ff80,0 0 60px #64c8ff40}.video-loading-indicator.play-button:active{transform:scale(.98)}.loading-dot{width:10px;height:10px;background:#64c8ff;border-radius:50%;will-change:transform,opacity;animation:pulse 1.5s ease-in-out infinite}.loading-text{font-size:14px;font-weight:500;color:#64c8ff;letter-spacing:.1em;text-shadow:0 0 8px rgba(100,200,255,.4)}.play-icon{font-size:16px;color:#64c8ff;text-shadow:0 0 8px rgba(100,200,255,.6)}@keyframes pulse{0%,to{opacity:.3;transform:scale(.8);box-shadow:0 0 4px #64c8ff4d}50%{opacity:1;transform:scale(1.3);box-shadow:0 0 16px #64c8ffcc}}@keyframes playButtonPulse{0%,to{box-shadow:0 8px 24px #000c,0 0 20px #64c8ff4d,0 0 40px #64c8ff26}50%{box-shadow:0 8px 24px #000c,0 0 30px #64c8ff80,0 0 60px #64c8ff4d}}.video-iframe{border:none;z-index:1}.credits-footer{display:flex;flex-direction:column;align-items:center;gap:24px;padding:48px 20px 32px}.credits-card{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%}.credits-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-secondary);transition:color .15s ease;position:relative}.credits-brand:before,.credits-brand:after{content:"";position:absolute;top:50%;width:300px;height:1px}.credits-brand:before{right:calc(100% + 16px);background:linear-gradient(to right,transparent,var(--border-color))}.credits-brand:after{left:calc(100% + 16px);background:linear-gradient(to left,transparent,var(--border-color))}.credits-brand:hover{color:var(--text-primary)}.credits-brand:hover .credits-logo{will-change:transform;animation:shake .4s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-3px,0,0)}40%,60%{transform:translate3d(3px,0,0)}}.credits-logo{width:32px;height:32px;border-radius:4px}.credits-text{font-size:14px;font-weight:400}.social-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}.social-link{display:flex;align-items:center;justify-content:center;transition:all .15s ease}.social-link:hover{transform:translateY(-2px);opacity:.8}.copyright{text-align:center;font-size:12px;color:var(--text-muted)}@media(max-width:1199px){.isometric-grid-canvas{display:none}h1{position:relative;top:auto;left:auto;text-align:center;padding:40px 20px 20px;font-size:48px;font-weight:700;pointer-events:auto}.iso-text-ludic,.iso-text-field{position:relative;top:auto;left:auto;right:auto;display:inline;transform:none;font-size:inherit;font-weight:inherit;color:var(--text-primary);letter-spacing:normal}body{background:#0a0a0a}.home-container{min-height:100vh;padding:0;display:flex;flex-direction:column}.main-content{flex:1;display:flex;flex-direction:column;position:relative;height:auto}.hero{position:relative;left:auto;bottom:auto;top:auto;padding:0 20px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}.hero-subtitle{font-size:18px;margin-bottom:20px}.hero-description{font-size:15px;margin-bottom:24px;max-width:100%}.btn-primary{padding:12px 24px;font-size:15px;align-self:center}.tutorial-section{position:relative;width:100%;height:auto;right:auto;top:auto;perspective:none}.video-platform{margin:0;transform:none}.video-container{width:100%;transform:none;border:none;border-radius:0;box-shadow:none}.credits-footer{padding:48px 20px 32px}.credits-brand:before,.credits-brand:after{display:none}}