*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a12;--surface:#12121e;--surface-2:#1a1a2e;--border:#ffffff0f;--text:#e4e4ef;--text-dim:#8888a4;--accent-1:#6c63ff;--accent-2:#00c9a7;--accent-3:#ff6b6b;--accent-4:#ffc75f;--accent-5:#845ec2;--font:"Inter", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", monospace;--radius:16px;--radius-sm:10px;--radius-xs:6px}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;overflow-x:hidden}a{color:var(--accent-1);text-decoration:none}a:hover{text-decoration:underline}#particles-canvas{z-index:0;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.view{z-index:1;flex-direction:column;align-items:center;min-height:100vh;padding:2rem 1.5rem 4rem;animation:.5s both fadeUp;display:none;position:relative}.view.active{display:flex}@keyframes fadeUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero{text-align:center;max-width:720px;margin-bottom:3rem;padding-top:3rem}.hero-badge{color:var(--accent-1);letter-spacing:.02em;background:#6c63ff1f;border:1px solid #6c63ff40;border-radius:999px;align-items:center;gap:.5rem;margin-bottom:1.5rem;padding:.45rem 1rem;font-size:.82rem;font-weight:600;display:inline-flex}.hero-badge .material-icons-round{font-size:1rem}.hero h1{margin-bottom:1rem;font-size:clamp(2rem,5vw,3.4rem);font-weight:800;line-height:1.15}.gradient-text{background:linear-gradient(135deg,var(--accent-1),var(--accent-2),var(--accent-3));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.hero-subtitle{color:var(--text-dim);max-width:540px;margin:0 auto;font-size:1.1rem}.cards-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;width:100%;max-width:1060px;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:left;cursor:pointer;color:inherit;padding:2rem 1.8rem 2.2rem;font-family:inherit;transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;overflow:hidden}.card:hover{border-color:#ffffff1f;transform:translateY(-6px);box-shadow:0 20px 50px #00000059}.card-glow{background:radial-gradient(circle at 50% 50%, var(--accent,#6c63ff) 0%,transparent 70%);opacity:0;pointer-events:none;mix-blend-mode:soft-light;width:180%;height:180%;transition:opacity .5s;position:absolute;top:-40%;left:-40%}.card:hover .card-glow{opacity:.25}.card-icon{background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));width:56px;height:56px;color:var(--accent);border-radius:14px;justify-content:center;align-items:center;margin-bottom:1.2rem;font-size:1.6rem;display:flex}.card-icon .material-icons-round{font-size:28px}.card h2{margin-bottom:.5rem;font-size:1.2rem;font-weight:700}.card p{color:var(--text-dim);font-size:.88rem;line-height:1.55}.card-arrow{color:var(--text-dim);font-size:1.2rem;transition:transform .3s,color .3s;position:absolute;bottom:1.4rem;right:1.4rem}.card:hover .card-arrow{color:var(--text);transform:translate(4px)}.main-footer{text-align:center;color:var(--text-dim);margin-top:4rem;font-size:.82rem}.demo-view{padding-top:0}.demo-nav{z-index:10;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);background:#0a0a12d9;align-items:center;gap:1rem;width:100%;max-width:900px;margin-bottom:2rem;padding:1.2rem 0;display:flex;position:sticky;top:0}.demo-nav h2{align-items:center;gap:.5rem;font-size:1.15rem;font-weight:700;display:flex}.back-btn{background:var(--surface-2);border:1px solid var(--border);color:var(--text);cursor:pointer;font-family:var(--font);border-radius:999px;align-items:center;gap:.35rem;padding:.5rem 1rem;font-size:.85rem;font-weight:500;transition:background .2s,border-color .2s;display:inline-flex}.back-btn:hover{background:var(--surface);border-color:#ffffff26}.demo-container{width:100%;max-width:900px}.demo-info{border-left:3px solid var(--accent-1);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text-dim);background:#6c63ff0f;margin-bottom:1.5rem;padding:1.2rem 1.6rem;font-size:.92rem}.demo-info strong{color:var(--text)}.glass-panel{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--radius);background:#12121eb3;padding:2rem}.demo-actions{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.5rem;display:flex}.action-btn{background:linear-gradient(135deg, var(--btn-accent), color-mix(in srgb, var(--btn-accent) 70%, #000));color:#fff;border-radius:var(--radius-sm);cursor:pointer;font-size:.88rem;font-weight:600;font-family:var(--font);border:none;align-items:center;gap:.45rem;padding:.7rem 1.4rem;text-decoration:none;transition:opacity .2s,transform .2s,box-shadow .2s;display:inline-flex}.action-btn:hover{opacity:.88;box-shadow:0 6px 20px color-mix(in srgb, var(--btn-accent) 35%, transparent);transform:translateY(-2px)}.action-btn:disabled{opacity:.35;pointer-events:none}.action-btn .material-icons-round{font-size:1.1rem}.toggle-label{color:var(--text-dim);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;font-size:.85rem;display:inline-flex}.toggle-label input[type=checkbox]{appearance:none;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;border-radius:999px;width:40px;height:22px;transition:background .2s;position:relative}.toggle-label input[type=checkbox]:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:2px;left:2px}.toggle-label input[type=checkbox]:checked{background:var(--accent-1)}.toggle-label input[type=checkbox]:checked:after{transform:translate(18px)}.status-badge{border-radius:var(--radius-xs);color:#00c9a7;background:#00c9a71a;align-items:center;gap:.4rem;margin-bottom:1rem;padding:.55rem 1rem;font-size:.85rem;font-weight:500;animation:.35s both fadeUp;display:inline-flex}.status-badge.error{color:#ff6b6b;background:#ff6b6b1a}.status-badge .material-icons-round{font-size:1.1rem}.hidden{display:none!important}.video-container{aspect-ratio:4/3;border-radius:var(--radius-sm);background:#000;width:100%;max-width:640px;margin:0 auto;position:relative;overflow:hidden}.video-container video{object-fit:cover;width:100%;height:100%}.video-container canvas{object-fit:cover;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}#fs-editor{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-xs);width:100%;color:var(--text);font-family:var(--mono);resize:vertical;outline:none;padding:1rem;font-size:.88rem}#fs-editor:focus{border-color:var(--accent-1)}.field-label{color:var(--text-dim);margin-bottom:.5rem;font-size:.82rem;display:block}.field-label span{color:var(--text);font-weight:600}#fs-image-preview img{border-radius:var(--radius-sm);max-width:100%}#fs-tree-list{padding-left:0;list-style:none}#fs-tree-list li{border-radius:var(--radius-xs);align-items:center;gap:.5rem;padding:.5rem .7rem;font-size:.88rem;transition:background .15s;display:flex}#fs-tree-list li:hover{background:var(--surface-2)}#fs-tree-list li .material-icons-round{color:var(--text-dim);font-size:1.1rem}.auth-user-section{align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.auth-avatar{background:linear-gradient(135deg,var(--accent-2),#009c84);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;font-size:1.5rem;display:flex}.auth-input{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-xs);color:var(--text);font-family:var(--font);outline:none;flex:1;padding:.7rem 1rem;font-size:.92rem;transition:border-color .2s}.auth-input:focus{border-color:var(--accent-2)}.result-box{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);margin-top:1.2rem;padding:1.2rem}.result-box h3{margin-bottom:.6rem;font-size:.9rem;font-weight:600}.result-box pre{font-family:var(--mono);color:var(--text-dim);white-space:pre-wrap;word-break:break-all;max-height:200px;font-size:.8rem;overflow:auto}.text-muted{color:var(--text-dim);margin-top:.3rem;font-size:.82rem}.api-support{border-radius:var(--radius-xs);align-items:center;gap:.4rem;margin-top:1.5rem;padding:.8rem 1.2rem;font-size:.82rem;font-weight:500;display:flex}.api-support.supported{color:#00c9a7;background:#00c9a714}.api-support.unsupported{color:#ff6b6b;background:#ff6b6b14}#capture-screenshot-preview img{border-radius:var(--radius-sm);max-width:100%;margin-bottom:1rem}#capture-screenshot-preview{margin-top:1.5rem}#capture-screenshot-preview h3{margin-bottom:.8rem;font-size:.95rem}.audio-visualizer-wrap{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;position:relative;overflow:hidden}#audio-visualizer{width:100%;height:160px;display:block}.audio-timer{font-family:var(--mono);color:#ff4081;font-size:1.4rem;font-weight:600;position:absolute;top:.8rem;right:1rem}.audio-timer.recording{animation:1s infinite pulse-red}@keyframes pulse-red{0%,to{opacity:1}50%{opacity:.4}}.sensor-display{grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.2rem;display:grid}.sensor-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;padding:1rem}.sensor-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;font-size:.75rem}.sensor-value{font-family:var(--mono);color:var(--text);margin-bottom:.5rem;font-size:1.6rem;font-weight:700}.sensor-bar{background:#ffffff0f;border-radius:999px;width:100%;height:6px;overflow:hidden}.sensor-fill{background:var(--bar-color,var(--accent-1));border-radius:999px;width:0%;height:100%;transition:width .15s}.orient-3d-wrap{perspective:500px;width:160px;height:160px;margin:1.5rem auto 0}.orient-cube{width:100%;height:100%;transform-style:preserve-3d;transition:transform .1s;position:relative}.cube-face{color:#fff;backface-visibility:visible;border:2px solid #ffffff26;border-radius:8px;justify-content:center;align-items:center;width:160px;height:160px;font-size:1.4rem;font-weight:700;display:flex;position:absolute}.cube-face.front{background:#00bcd473;transform:translateZ(80px)}.cube-face.back{background:#00bcd440;transform:rotateY(180deg)translateZ(80px)}.cube-face.right{background:#ff408159;transform:rotateY(90deg)translateZ(80px)}.cube-face.left{background:#ff408140;transform:rotateY(-90deg)translateZ(80px)}.cube-face.top{background:#ffc75f59;transform:rotateX(90deg)translateZ(80px)}.cube-face.bottom{background:#ffc75f40;transform:rotateX(-90deg)translateZ(80px)}.motion-ball-wrap{background:var(--surface-2);border:1px solid var(--border);border-radius:50%;width:250px;height:250px;margin:1.5rem auto 0;position:relative;overflow:hidden}.motion-ball{background:radial-gradient(circle at 35% 35%,#ff9800,#e65100);border-radius:50%;width:32px;height:32px;transition:transform .1s;position:absolute;top:calc(50% - 16px);left:calc(50% - 16px);box-shadow:0 0 16px #ff980080}.touch-info{color:var(--text-dim);margin-bottom:.8rem;font-size:.88rem}.touch-info strong{color:var(--text)}.touch-canvas{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);touch-action:none;cursor:crosshair;width:100%;height:400px;display:block}.vt-showcase{grid-template-columns:repeat(3,1fr);gap:1rem;transition:all .4s;display:grid}.vt-showcase.list-layout{grid-template-columns:1fr}.vt-card{background:linear-gradient(135deg, color-mix(in srgb, var(--vt-color) 18%, var(--surface)), var(--surface));border:1px solid color-mix(in srgb, var(--vt-color) 25%, transparent);border-radius:var(--radius-sm);cursor:pointer;view-transition-name:var(--vt-name,none);align-items:center;gap:.7rem;padding:1.2rem 1.4rem;transition:transform .3s,box-shadow .3s,opacity .3s;display:flex}.vt-card:hover{transform:scale(1.04);box-shadow:0 8px 24px #0000004d}.vt-card .material-icons-round{color:var(--vt-color);font-size:1.6rem}.vt-card span:last-child{font-size:.92rem;font-weight:600}.vt-showcase.light-theme{border-radius:var(--radius);background:#ffffff14;padding:1rem}.vt-showcase.light-theme .vt-card{background:#ffffff0f;border-color:#ffffff1f}@media (width<=640px){.cards-grid{grid-template-columns:1fr}.demo-nav{flex-direction:column;align-items:flex-start}.demo-actions,.auth-user-section{flex-direction:column}.sensor-display{grid-template-columns:1fr}.vt-showcase{grid-template-columns:repeat(2,1fr)}.orient-3d-wrap,.cube-face{width:120px;height:120px}.cube-face.front{transform:translateZ(60px)}.cube-face.back{transform:rotateY(180deg)translateZ(60px)}.cube-face.right{transform:rotateY(90deg)translateZ(60px)}.cube-face.left{transform:rotateY(-90deg)translateZ(60px)}.cube-face.top{transform:rotateX(90deg)translateZ(60px)}.cube-face.bottom{transform:rotateX(-90deg)translateZ(60px)}}