/* Touchpanel concept: a browser-only interactive illustration. */
@media(min-width:761px){.nav{gap:24px}.brand img{width:218px}}
@media(min-width:761px) and (max-width:930px){.nav{gap:15px}.nav>a{font-size:11px}.brand img{width:185px}.nav .nav-contact{padding:14px}}
.hero-panel-link{display:block;color:#eaf5f0;text-decoration:none;min-width:0}
.hero-panel{display:block;padding:10px;border:1px solid #52625f;border-radius:16px;background:#101a1a;box-shadow:0 24px 70px rgba(0,0,0,.35),inset 0 0 0 3px #263634;transition:transform .2s ease,box-shadow .2s ease}
.hero-panel-link:hover .hero-panel{transform:translateY(-3px);box-shadow:0 30px 80px rgba(0,0,0,.38),inset 0 0 0 3px #263634}
.hero-panel-top,.hero-panel-main,.hero-panel-bottom{display:flex;background:#1c2d2b}
.hero-panel-top{min-height:55px;align-items:center;justify-content:space-between;border-radius:7px 7px 0 0;border-bottom:1px solid rgba(205,242,225,.12);padding:0 20px;font-size:11px;font-weight:800;letter-spacing:.06em}
.hero-panel-top b,.tp-identity strong span{color:#77d8c8}
.hero-panel-top small{color:#9eb4ad;font-size:9px;letter-spacing:.1em;font-weight:600}
.hero-panel-status{font-size:9px;color:#a7cdc0;letter-spacing:.09em}
.hero-panel-status i,.hero-panel-caption i,.tp-status i{display:inline-block;width:6px;height:6px;background:#7bdbc4;border-radius:50%;margin-right:6px;vertical-align:1px}
.hero-panel-main{min-height:267px;flex-direction:column;justify-content:center;padding:32px;background:radial-gradient(circle at 80% 25%,rgba(88,182,159,.19),transparent 38%),#182522}
.hero-panel-kicker{font-size:9px;color:#88b6a8;font-weight:800;letter-spacing:.15em}
.hero-panel-main>strong{font-size:31px;line-height:1.1;letter-spacing:-.045em;margin-top:12px}
.hero-panel-subtitle{font-size:11px;color:#a5b9b1;margin-top:11px}
.hero-panel-options{display:flex;gap:10px;margin-top:25px}
.hero-panel-options span{display:flex;flex-direction:column;gap:12px;min-width:130px;background:#283c37;border:1px solid #42695e;border-radius:5px;padding:13px;font-size:10px;font-weight:700}
.hero-panel-options span+span{background:#21322e;border-color:#354c43}
.hero-panel-options b{color:#a3ddcc;font-size:17px;line-height:1}
.hero-panel-bottom{justify-content:space-between;gap:10px;padding:14px 20px;border-top:1px solid rgba(205,242,225,.1);border-radius:0 0 7px 7px;color:#90aaa0;font-size:8px;font-weight:750;letter-spacing:.08em}
.hero-panel-caption{display:flex;justify-content:space-between;gap:15px;color:#a9c1b8;font-size:9px;font-weight:800;letter-spacing:.12em;margin-top:19px}
.hero-panel-caption b{color:#b9e6d5;margin-left:6px}
.gui-section{background:#f4f7f4}
.gui-layout{display:grid;grid-template-columns:minmax(230px,.58fr) minmax(0,1.42fr);gap:52px;align-items:center}
.gui-copy h2{margin-bottom:24px}
.gui-intro{font-size:15px;line-height:1.8;color:#64716c;max-width:400px;margin-bottom:28px}
.gui-feature{display:flex;align-items:flex-start;gap:14px;border-top:1px solid #dbe3dd;padding:15px 0}
.gui-feature>span{font-size:10px;font-weight:800;color:#82958b;letter-spacing:.06em;padding-top:4px}
.gui-feature p{font-size:12px;line-height:1.6;color:#75827a;margin:0}
.gui-feature strong{font-size:13px;color:#34453d}
.gui-note{margin:18px 0 0;color:#6e7e73;font-size:11px;line-height:1.6}
.touch-device{min-width:0;padding:11px;border-radius:18px;background:linear-gradient(130deg,#56645f,#293531 26%,#101a17 70%,#4a5c54);box-shadow:0 25px 58px rgba(31,57,44,.2),inset 0 0 0 1px rgba(255,255,255,.25)}
.touch-screen{overflow:hidden;border-radius:9px;color:#eff8f3;background:#15211d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.tp-header{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 22px;border-bottom:1px solid #33483f;background:#1d3029}
.tp-identity{display:flex;align-items:center;gap:12px}
.tp-identity strong{font-size:13px;letter-spacing:.06em;white-space:nowrap}
.tp-identity small{border-left:1px solid #4a6056;padding-left:12px;color:#a4bcb1;font-size:9px;letter-spacing:.1em;font-weight:700}
.tp-header-right{display:flex;align-items:center;gap:15px}
.tp-status{font-size:9px;font-weight:800;letter-spacing:.1em;color:#a7cdc0;white-space:nowrap}
.tp-power{display:grid;place-items:center;width:35px;height:35px;color:#c3e7dc;background:#2a4238;border:1px solid #49675a;border-radius:8px;cursor:pointer}
.tp-power:hover{background:#365448}.tp-power svg{width:18px;height:18px}
.tp-body{position:relative;background:radial-gradient(circle at 85% 0,rgba(53,116,94,.18),transparent 33%),#15211d;padding:25px 26px 21px}
.tp-controls{min-width:0;border:0;padding:0;margin:0}
.tp-controls:disabled{opacity:.23}
.tp-control-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start;margin-top:20px}
.tp-secondary{display:grid;gap:12px;min-width:0}
.tp-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tp-title-row small,.tp-label{display:block;color:#a3bcb0;font-size:10px;letter-spacing:.1em;font-weight:800}
.tp-title-row h3{color:#f5fbf7;font-size:25px;letter-spacing:-.045em;line-height:1.15;margin:5px 0 0}
.tp-demo-pill{font-size:8px;font-weight:800;letter-spacing:.09em;color:#a8e2cf;padding:7px 9px;border:1px solid #3c6858;background:#1d352c;border-radius:20px;white-space:nowrap}
.tp-label{margin:24px 0 10px}
.tp-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tp-mode,.tp-source,.tp-volume-button,.tp-mute,.tp-off button{font:inherit;cursor:pointer}
.tp-mode{min-width:0;display:flex;align-items:center;gap:12px;text-align:left;color:#c2d1c9;background:#20312b;border:1px solid #354d41;border-radius:8px;padding:14px 13px;transition:background .15s,border-color .15s}
.tp-mode svg{width:24px;height:24px;flex:none;color:#a9c4b5}
.tp-mode span{min-width:0}.tp-mode strong,.tp-mode small{display:block}.tp-mode strong{font-size:12px;line-height:1.3}.tp-mode small{font-size:10px;color:#a3b8ac;margin-top:4px}
.tp-mode.is-selected,.tp-source.is-selected{border-color:#7ed6bc;background:#294b3d;color:#f3fff8;box-shadow:inset 0 0 0 1px rgba(126,214,188,.2)}
.tp-mode.is-selected svg,.tp-source.is-selected svg{color:#9be2c9}
.tp-mode:hover,.tp-source:hover{border-color:#81c9b0}
.tp-camera{min-width:0;padding:14px;background:#1c2d26;border:1px solid #354d41;border-radius:9px}
.tp-camera[hidden]{display:none}
.tp-camera-title{display:flex;align-items:center;gap:10px;color:#d0e4d8;margin-bottom:10px}
.tp-camera-title>svg{width:22px;height:22px;color:#a6dcc6;flex:none}
.tp-camera-title strong,.tp-camera-title small{display:block}
.tp-camera-title strong{font-size:11px;line-height:1.3}
.tp-camera-title small{font-size:10px;color:#a3b9ab;margin-top:4px}
.tp-ptz-panel{padding:3px 0 0}
.tp-ptz-layout{display:flex;align-items:flex-start;gap:28px}
.tp-ptz-label{color:#a3bdaf;font-size:10px;letter-spacing:.1em;font-weight:800;margin:0 0 9px}
.tp-ptz-pad{display:grid;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px);gap:4px}
.tp-ptz-button{display:grid;place-items:center;width:36px;height:36px;padding:0;color:#e1f4e8;background:#2a4436;border:1px solid #4b715b;border-radius:7px;font:700 17px/1 system-ui,sans-serif;cursor:pointer}
.tp-ptz-button:hover,.tp-ptz-button:active{background:#416b56;color:#fff}
.tp-ptz-up{grid-area:1 / 2}.tp-ptz-left{grid-area:2 / 1}.tp-ptz-home{grid-area:2 / 2}.tp-ptz-right{grid-area:2 / 3}.tp-ptz-down{grid-area:3 / 2}
.tp-zoom-controls{display:flex;gap:6px}
.tp-ptz-help{font-size:10px;line-height:1.5;color:#9eb7a8;margin:10px 0 0}
.tp-ptz-feedback{font-size:10px;color:#c4e5d1;margin:12px 0 0}
.tp-lower{display:flex;flex-direction:column;gap:0;min-width:0;padding:16px;background:#1c2d26;border:1px solid #354d41;border-radius:9px}
.tp-inputs .tp-label{margin:0 0 10px}
.tp-audio .tp-label,.tp-microphone .tp-label{margin-top:18px}
.tp-sources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.tp-source{min-width:0;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#c5d9ce;background:#20352b;border:1px solid #3b5949;border-radius:7px;padding:8px 3px}
.tp-source svg{width:20px;height:20px}.tp-source span{font-size:11px;font-weight:700;white-space:nowrap}
.tp-audio-heading{display:flex;justify-content:space-between;align-items:baseline;gap:5px}
.tp-audio-heading output{color:#c4e7d8;font-size:11px;font-weight:800}
.tp-volume-row{display:flex;align-items:center;gap:8px}
.tp-volume-button{flex:none;width:34px;height:34px;border:1px solid #486c59;border-radius:7px;background:#263e31;color:#e5f6ec;font-size:18px;line-height:1}
.tp-volume-button:hover,.tp-mute:hover{background:#355446}
.tp-volume-row input{min-width:0;width:100%;accent-color:#93ddc1;cursor:pointer}
.tp-mute{display:block;width:100%;margin-top:9px;padding:10px 9px;color:#d4e6da;border:1px solid #436250;border-radius:7px;background:#263d31;font-size:11px;font-weight:750}
.tp-mute[aria-pressed="true"]{background:#624b39;border-color:#a7825d;color:#fff1de}
.tp-microphone[hidden]{display:none}
.tp-microphone .tp-label{margin-top:18px}
.tp-environment{min-width:0;padding:15px;background:#1c2d26;border:1px solid #354d41;border-radius:9px}
.tp-environment-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.tp-environment-heading strong{color:#e7f4eb;font-size:12px}
.tp-environment-heading span{color:#a1baad;font-size:8px;font-weight:800;letter-spacing:.1em;text-align:right}
.tp-env-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.tp-env-heading span{color:#d3ecdd;font-size:11px;font-weight:800}
.tp-environment-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.tp-env-button{min-width:0;min-height:36px;padding:8px 3px;color:#d1e1d6;background:#233a2e;border:1px solid #456651;border-radius:7px;font:700 11px/1.15 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.tp-env-button:hover{border-color:#81c9b0}
.tp-env-button.is-selected{background:#294b3d;border-color:#7ed6bc;color:#f3fff8;box-shadow:inset 0 0 0 1px rgba(126,214,188,.2)}
.tp-scenes-label{margin:16px 0 9px}
.tp-blinds-control{margin-top:16px;padding-top:14px;border-top:1px solid #3a5144}
.tp-environment-feedback{color:#adcebb;font-size:10px;margin:11px 0 0}
.tp-feedback{display:flex;align-items:center;gap:9px;margin-top:22px;border-top:1px solid #30463a;padding-top:16px}
.tp-feedback span{color:#89b9a5;font-size:8px;letter-spacing:.11em;font-weight:800}
.tp-feedback strong{color:#d3e8da;font-size:10px;font-weight:650}
.tp-footer{display:flex;justify-content:space-between;gap:10px;padding:12px 22px;background:#1d3029;color:#95ada0;font-size:8px;letter-spacing:.08em;font-weight:750}
.tp-off{position:absolute;inset:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:8px;background:rgba(18,30,25,.97);color:#eaf7ed}
.tp-off[hidden]{display:none}
.tp-off-icon{display:grid;place-items:center;width:49px;height:49px;border:1px solid #608572;border-radius:50%;font-size:25px;color:#aae5cd;margin-bottom:13px}
.tp-off strong{font-size:17px}.tp-off p{font-size:11px;color:#a9bdb2;margin:7px 0 17px}
.tp-off button{padding:10px 15px;border:0;border-radius:5px;background:#bdebd4;color:#193428;font-size:11px;font-weight:800}
@media(max-width:1000px){.gui-layout{gap:36px;grid-template-columns:minmax(215px,.7fr) minmax(0,1.3fr)}.tp-body{padding:22px 19px}.tp-header,.tp-footer{padding-left:18px;padding-right:18px}}
@media(max-width:760px){.hero-panel-link{max-width:500px;width:100%}.gui-layout{grid-template-columns:1fr;gap:33px}.gui-copy{max-width:580px}.gui-intro{max-width:540px}.touch-device{max-width:650px}.hero-panel-main{min-height:235px}.tp-title-row h3{font-size:23px}}
@media(max-width:600px){.tp-control-columns{grid-template-columns:1fr}.tp-secondary{gap:12px}}
@media(max-width:480px){.hero-panel-top,.hero-panel-bottom{padding-left:14px;padding-right:14px}.hero-panel-main{padding:24px}.hero-panel-options span{min-width:0;flex:1;padding:11px;font-size:9px}.hero-panel-caption{font-size:8px}.touch-device{padding:7px;border-radius:13px}.touch-screen{border-radius:7px}.tp-header{padding:10px 13px;min-height:56px}.tp-identity{gap:8px}.tp-identity small{padding-left:8px;font-size:8px}.tp-header-right{gap:7px}.tp-status{font-size:8px}.tp-body{padding:21px 14px}.tp-title-row h3{font-size:21px}.tp-demo-pill{font-size:7px}.tp-mode{gap:7px;padding:11px 8px}.tp-mode svg{width:20px;height:20px}.tp-mode strong{font-size:10px}.tp-mode small{font-size:9px}.tp-lower{grid-template-columns:1fr;gap:0}.tp-source{min-height:64px}.tp-audio .tp-label{margin-top:19px}.tp-footer{padding:11px 13px;font-size:7px;line-height:1.5}.tp-footer span:last-child{text-align:right}}
@media(max-width:480px){.tp-ptz-layout{gap:22px}.tp-lower,.tp-camera,.tp-environment{padding:13px}.tp-env-button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.hero-panel,.tp-mode,.tp-source{transition:none}}