html{overflow-x:hidden}body{margin:0;background-color:#111;overflow-x:hidden;-webkit-overflow-scrolling:touch}.App{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;max-width:100vw}main{flex:1}.Typewriter{word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}@media (max-width: 768px){body{font-size:14px}*{max-width:100%}}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(10px)}20%{opacity:1;transform:translate(-50%) translateY(0)}80%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-10px)}}.interactive-tooltip{animation:fadeInOut 4s ease-in-out forwards}.scene-container{position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#1e1e23cc,#141419e6);box-shadow:0 0 60px #6478ff26,0 0 100px #6478ff1a,0 25px 50px #0006,inset 0 1px #ffffff1a;border:1px solid rgba(255,255,255,.08);transition:all .4s cubic-bezier(.4,0,.2,1)}.scene-container:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.3) 100%);pointer-events:none;z-index:10;border-radius:24px}.scene-container:hover{box-shadow:0 0 80px #648cff40,0 0 120px #648cff26,0 30px 60px #00000080,inset 0 1px #ffffff26;transform:translateY(-4px);border-color:#ffffff1f}.scene-frame{position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:26px;background:linear-gradient(135deg,#788cff4d,#5064c81a,#788cff33);z-index:-1;opacity:0;transition:opacity .4s ease}.scene-container:hover .scene-frame{opacity:1}.interactive-canvas{transition:cursor .2s ease;border-radius:24px}@keyframes subtleGlow{0%,to{box-shadow:0 0 60px #6478ff26,0 0 100px #6478ff1a}50%{box-shadow:0 0 80px #648cff33,0 0 120px #648cff1f}}.scene-container.animated{animation:subtleGlow 4s ease-in-out infinite}.scene-overlay{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:24px;background:radial-gradient(circle at center,transparent 40%,rgba(17,17,17,.4) 100%);pointer-events:none;z-index:5}.floating-particle{position:absolute;width:4px;height:4px;background:#648cff99;border-radius:50%;filter:blur(1px);animation:float 6s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0) translate(0);opacity:.6}50%{transform:translateY(-20px) translate(10px);opacity:1}}.tooltip-container{position:absolute;bottom:24px;left:50%;transform:translate(-50%);z-index:20}.tooltip-pill{background:linear-gradient(135deg,#fffffff2,#f0f5fff2);color:#1a1a2e;padding:10px 20px;border-radius:24px;font-size:13px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;box-shadow:0 4px 20px #0003,0 0 40px #648cff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;gap:8px;animation:fadeInOut 4s ease-in-out forwards}.tooltip-pill:before{content:"";width:8px;height:8px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}}.corner-accent{position:absolute;width:30px;height:30px;border:2px solid rgba(100,140,255,.3);pointer-events:none;transition:all .3s ease}.corner-accent.top-left{top:8px;left:8px;border-right:none;border-bottom:none;border-radius:8px 0 0}.corner-accent.top-right{top:8px;right:8px;border-left:none;border-bottom:none;border-radius:0 8px 0 0}.corner-accent.bottom-left{bottom:8px;left:8px;border-right:none;border-top:none;border-radius:0 0 0 8px}.corner-accent.bottom-right{bottom:8px;right:8px;border-left:none;border-top:none;border-radius:0 0 8px}.scene-container:hover .corner-accent{border-color:#648cff99;width:40px;height:40px}.status-indicator{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:6px;padding:6px 12px;background:#0006;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);z-index:15;opacity:0;transition:opacity .3s ease}.scene-container:hover .status-indicator{opacity:1}.status-dot{width:6px;height:6px;background:#4ade80;border-radius:50%;animation:pulse 2s ease-in-out infinite}.status-text{font-size:11px;color:#fffc;font-weight:500;text-transform:uppercase;letter-spacing:.5px}