.header{position:sticky;top:0;z-index:50;background:#0b151ef5;backdrop-filter:blur(14px)}.language-control{display:flex;align-items:center;gap:7px;color:#9db4bc;font-size:12px}.language-control select{background:#0f222b;border:1px solid #31505a;color:#dceae8;border-radius:5px;font-size:11px;padding:10px 8px;max-width:115px;cursor:pointer}.header-tools{display:flex;gap:22px;align-items:center}.hero-visual.simulator-visual{height:640px;background:radial-gradient(ellipse at center,#1d4d4433,transparent 70%)}.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 14px;border-bottom:1px solid #294149;background:#0e2029}.demo-toolbar label{display:flex;gap:8px;align-items:center;font-size:10px;color:#7fa89b;min-width:0}.demo-toolbar select{background:#122a2e;border:1px solid #35564e;color:#dcece8;font-size:10px;border-radius:4px;padding:8px 6px;min-width:0;max-width:220px}.demo-controls{display:flex;gap:5px}.demo-controls button{display:grid;place-items:center;border:1px solid #35584d;background:#15312a;color:#5deab5;width:29px;height:30px;font-size:16px;border-radius:4px}.demo-controls button:hover{background:#1c4839}.demo-stage{height:532px;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative}.demo-phone-space{position:relative;flex-shrink:0}.demo-phone{transform-origin:top left;border:5px solid #344c52;border-radius:27px;overflow:hidden;background:#0b1220;box-shadow:0 8px 30px #0007;position:absolute;inset:0}.demo-phone iframe{border:0;display:block;width:100%;height:100%;background:#0b1220}.demo-footer{height:45px;border-top:1px solid #294149;padding:8px 13px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#688f91;font:9px Consolas,monospace}.demo-footer span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:65%}.demo-footer strong{font-weight:400;color:#8ba59c;white-space:nowrap}.demo-disclaimer{color:#739b91;font-size:9px;text-align:center;padding:7px 12px;background:#102720}.demo-fullscreen{width:min(1100px,96vw);max-width:none;height:96dvh;max-height:96dvh;padding:15px}.demo-fullscreen>.dialog-close{z-index:3;top:3px;right:8px}.demo-fullscreen-body{height:100%;padding-top:18px}.demo-fullscreen-body .simulator-visual{height:100%;border:0}.demo-fullscreen-body .demo-stage{height:calc(100% - 135px)}.demo-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.demo-photo-file{padding:8px;border:1px solid #35534c;background:#0d2027;color:#cce5df;border-radius:5px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px}.demo-photo-file:hover{border-color:#4de4ad;background:#17382d}.demo-photo-file img{width:100%;height:115px;object-fit:contain;background:#d3d9d6;border-radius:3px}.demo-photo-file small{color:#80aa99;font:9px Consolas,monospace}.demo-photo-file span{max-width:100%;overflow-wrap:anywhere}#demo-gallery{max-width:680px}#demo-gallery h2{font-size:25px;margin-bottom:8px}#demo-gallery .technical{display:block;margin-bottom:22px}.header-tools nav{padding:0}
@media(max-width:1100px){.header-tools{gap:17px}.header nav{gap:20px}.hero-visual.simulator-visual{height:615px}.demo-stage{height:507px}.demo-toolbar label{gap:5px}.demo-toolbar select{max-width:177px}.hero h1{font-size:58px}}
@media(max-width:800px){.header-tools{gap:12px}.language-control select{max-width:90px;font-size:10px;padding:9px 5px}.header nav{gap:12px}.hero-visual.simulator-visual{height:590px}.demo-stage{height:482px}.demo-toolbar{padding:10px 8px;gap:6px;flex-wrap:wrap}.demo-toolbar label{width:100%}.demo-toolbar select{max-width:100%;flex:1}.demo-controls{margin-left:auto}.demo-controls button{width:29px;height:27px}.hero h1{font-size:48px}.demo-footer{font-size:8px}}
@media(max-width:600px){.header-tools{gap:9px}.header .brand{font-size:18px;gap:6px}.header .brand img{width:33px;height:33px}.header .brand small{font-size:8px;letter-spacing:2px}.language-control{gap:0}.language-control>span{display:none}.language-control select{width:83px;max-width:83px;padding:8px 4px;font-size:10px}.menu-button{font-size:10px;padding:7px 8px;gap:6px}.hero-visual.simulator-visual{height:650px}.demo-stage{height:542px}.demo-toolbar{flex-wrap:nowrap;padding:11px 9px}.demo-toolbar label{width:auto;flex:1}.demo-toolbar select{width:175px;max-width:175px;font-size:9px}.demo-controls{margin-left:0;gap:4px}.demo-controls button{width:26px;height:29px}.demo-gallery-grid{grid-template-columns:repeat(2,1fr);gap:9px}.demo-photo-file img{height:105px}.demo-fullscreen{padding:7px}.demo-fullscreen-body .demo-toolbar{flex-wrap:wrap}.demo-fullscreen-body .demo-toolbar label{flex:1;width:100%}.demo-disclaimer{font-size:8px}.hero h1{font-size:54px}}
.hero-visual.simulator-visual{display:flex;flex-direction:column}.demo-toolbar,.demo-footer,.demo-disclaimer{flex-shrink:0}.demo-stage{flex:1;min-height:0;height:auto}.demo-fullscreen-body .demo-stage{height:auto}
.demo-expanded:before{content:"";position:fixed;inset:0;background:#031219e8;z-index:90;backdrop-filter:blur(8px)}.demo-expanded .simulator-visual{position:fixed;z-index:100;left:50%;top:14px;transform:translateX(-50%);width:min(1100px,calc(100vw - 28px));height:calc(100dvh - 28px);box-shadow:0 20px 100px #0009}.demo-expanded .demo-toolbar{flex-wrap:nowrap}.demo-expanded .demo-toolbar label{width:auto}.demo-controls [hidden]{display:none!important}
.demo-tour-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:43px;padding:8px 12px;background:#112c27;border-bottom:1px solid #294d40;font-size:10px;color:#a8d9c9;flex-shrink:0}.demo-tour-bar span{line-height:1.4}.demo-tour-bar button{border:1px solid #4a9179;border-radius:20px;background:#173d30;color:#8ef2ca;padding:7px 10px;font-size:10px;white-space:nowrap;cursor:pointer}