.demo-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:40px 20px}.demo-header{text-align:center;margin-bottom:40px;color:#e0e0e0}.demo-header h1{font-size:2rem;font-weight:700;margin-bottom:8px;background:linear-gradient(90deg,#6b8aaa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.demo-header p{font-size:1rem;color:#888;max-width:500px}.demo-header .subtitle{font-size:.875rem;color:#666;margin-top:4px}.view-toggle{display:flex;gap:4px;justify-content:center;margin-top:16px;padding:4px;background:#ffffff0d;border-radius:8px;width:fit-content;margin-left:auto;margin-right:auto}.view-toggle button{padding:8px 20px;border:none;border-radius:6px;background:transparent;color:#888;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.view-toggle button:hover{color:#e0e0e0}.view-toggle button.active{background:#6b8aaa;color:#fff}.desktop-container{width:100%;max-width:1200px;margin:0 auto}.tak-container{display:flex;flex-direction:column;align-items:center;gap:30px}.tak-instructions{max-width:780px}.device-frame-container{position:relative;width:610px;height:1090px;flex-shrink:0}.device-frame{position:absolute;top:0;left:0;width:610px;height:1090px;pointer-events:none;z-index:10}.screen-content{position:absolute;top:135px;left:105px;width:400px;height:700px;overflow:hidden;border-radius:12px;z-index:5}.demo-footer{margin-top:40px;text-align:center;color:#666;font-size:.875rem}.demo-footer a{color:#6b8aaa;text-decoration:none}.demo-footer a:hover{text-decoration:underline}@media (max-width: 700px){.device-frame-container{transform:scale(.6);transform-origin:top center}.demo-header h1{font-size:1.5rem}}@media (max-width: 500px){.device-frame-container{transform:scale(.45);transform-origin:top center}}.instructions{margin-top:30px;padding:20px 24px;background:#ffffff0d;border-radius:12px;border:1px solid rgba(255,255,255,.1);max-width:500px;color:#ccc}.instructions h3{font-size:.875rem;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:12px}.instructions ul{list-style:none;padding:0}.instructions li{padding:8px 0 8px 24px;position:relative;font-size:.9rem;line-height:1.5}.instructions li:before{content:"→";position:absolute;left:0;color:#6b8aaa}
