:root{color-scheme:dark;--bg:#101113;--ink:#ededf0;--muted:#96989e;--line:#2b2d32;--accent:#f3a76b;--green:#dca77c}body{font-family:Inter,'Segoe UI','Microsoft YaHei',sans-serif;background:radial-gradient(ellipse at 80% 0,#2d221a33,transparent 45%),var(--bg);font-size:14px}aside{background:#161719;border-color:#27292d;width:218px;padding:33px 19px}.brand{color:#faf9f7;letter-spacing:-2.5px}.brand span{color:#f3b17d;background:#35271f;border:1px solid #61402b;font-size:9px}.workspace{color:#797b83;font-size:11px;letter-spacing:1px;margin-top:13px}.navlabel{color:#62646b;font-size:9px}.ui-icon{width:22px;height:22px;display:inline-block;flex-shrink:0;vertical-align:middle}nav button{position:relative;border:1px solid transparent;font-size:12px;border-radius:10px;padding:14px 13px;color:#94969e;transition:background .25s,color .25s,transform .3s}nav button i{display:flex}nav button:hover{background:#222326;color:#eee;transform:translateX(3px)}nav button.active{background:linear-gradient(100deg,#3d2b1f,#2a241f);border-color:#69452c;color:#ffc18c;box-shadow:0 5px 20px #0001}nav button.active:after{content:'';width:4px;height:18px;border-radius:8px;background:var(--accent);position:absolute;left:-20px;box-shadow:0 0 18px #ef9f6055}nav button:hover .ui-icon{transform:rotate(-6deg)}nav .ui-icon{transition:transform .3s}.shell{margin-left:218px}header{background:#111214aa;border-color:#25272c;height:72px;padding:0 38px;backdrop-filter:blur(20px)}header strong{color:#c5c5cb}.pill{background:#1b1c20;border-color:#303238;color:#b2b2ba}.avatar{background:#35291f;color:#eeb58b}main{padding:36px 38px 24px;max-width:1490px}.intro{margin-bottom:28px}h1{font-size:30px;font-weight:600;letter-spacing:-.8px;margin:11px 0}.intro p{font-size:12px;color:#93949b}.eyebrow{color:#b18664;letter-spacing:2.5px;font-size:9px}button{background:#242529;border-color:#37393f;color:#d4d4da;transition:background .22s,border-color .22s,box-shadow .22s,transform .22s}button:hover{border-color:#7f5c40;background:#2c2b2a;box-shadow:0 5px 14px #0002}button:active{transform:scale(.97)}.primary{background:#efa568;border-color:#efa568;color:#241910;box-shadow:0 4px 18px #f0a26018}.primary:hover{background:#ffc18c;border-color:#ffc18c;box-shadow:0 6px 24px #f0a26033}.intro .primary{display:flex;align-items:center;gap:8px;padding:12px 18px;font-size:12px}.intro .primary .ui-icon{width:16px;height:16px}.notice{background:#1b1d1b;border-color:#30372e;border-radius:10px;padding:12px 17px;margin-bottom:23px}.notice>span{color:#a4b398;display:flex}.notice>span .ui-icon{width:19px}.notice strong{color:#c0c8b8;font-size:11px;font-weight:500}.notice small{color:#7d8777;font-size:10px}.notice button{color:#abb49f;font-size:10px}.grid{grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);gap:20px}.card{border-color:#2d2f34;background:linear-gradient(135deg,#202125,#1c1d21);border-radius:15px;padding:25px;box-shadow:0 6px 22px #00000012}.card h2{font-size:14px;color:#e6e6eb;letter-spacing:.2px}.card p{color:#85868f;font-size:11px}.hero{background:radial-gradient(ellipse at 48% 38%,#55433155,transparent 62%),linear-gradient(130deg,#28292c,#1c1d20);min-height:386px;isolation:isolate}.hero:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse,black,transparent 75%);z-index:-1}.hero .tag{color:#aaa29b;background:#232323;border-color:#454039;font-size:8px;letter-spacing:1.7px}.hero-orbit{position:absolute;left:50%;top:47%;width:230px;height:230px;border:1px solid #ffffff09;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.hero-orbit:after{content:'';position:absolute;inset:24px;border:1px dashed #ffffff0b;border-radius:50%}.product{height:253px;display:flex;align-items:center;justify-content:center}.product svg{width:315px;height:246px;filter:drop-shadow(0 24px 15px #0009);transform:rotate(-9deg);animation:deviceEnter 900ms cubic-bezier(.2,.7,.2,1) both;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.hero:hover .product svg{transform:rotate(-4deg) translateY(-5px)}.product:after{content:'ONE';font-size:125px;letter-spacing:13px;font-weight:800;color:#ffffff04;top:51px}.devicebottom h2{font-size:22px;font-weight:500;letter-spacing:2px;margin-bottom:9px}.devicebottom .small{color:#8d8c91}.battery{background:#2c302a;border-color:#444d3c;color:#bdcfa8;font-size:10px;border-radius:6px;white-space:nowrap}.rangehead{margin-top:28px;color:#c6c5cd;font-size:12px}.rangehead output{color:#f7b47e;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;-webkit-appearance:none;accent-color:var(--accent);height:5px;border-radius:8px;background:linear-gradient(90deg,#ecaa74 0%,#ecaa74 var(--progress,72%),#3e3f45 var(--progress,72%),#3e3f45 100%);outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border:3px solid #f2b27e;border-radius:50%;background:#282321;box-shadow:0 0 0 4px #eeaa710d;transition:box-shadow .2s}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 7px #eeaa7119}.divider{background:#303136}.row{margin:24px 0}.row label{color:#c9c9d0}.row small{color:#777a83;line-height:1.6}.value{color:#e2b48d;font-size:11px}.toggle{background:#393b42;border:1px solid #44464e;width:37px;height:22px;padding:2px;box-shadow:none;flex-shrink:0;transition:background .3s,border-color .3s}.toggle:before{width:16px;height:16px;background:#9c9da5;box-shadow:0 2px 3px #0003;transition:transform .35s cubic-bezier(.2,.8,.2,1.3),background .3s}.toggle.on{background:#e6a776;border-color:#e6a776}.toggle.on:before{background:#31231b;transform:translateX(15px)}.toggle:hover{box-shadow:none;transform:none}.sectionhead{margin:25px 0 15px}.sectionhead h2{font-size:14px;font-weight:500}.sectionhead span{font-size:8px;color:#63666f;letter-spacing:1.3px}.presets{gap:13px}.preset{background:linear-gradient(130deg,#202125,#1b1c20);border-color:#2f3137;min-height:121px;padding:19px 20px;position:relative;overflow:hidden}.preset:after{content:'';position:absolute;right:15px;top:18px;width:6px;height:6px;background:#53545c;border-radius:50%;transition:background .3s,box-shadow .3s}.preset.active{background:linear-gradient(130deg,#382a20,#24211f);border-color:#a6734b;box-shadow:inset 0 0 30px #eb9d5b06}.preset.active:after{background:#efac75;box-shadow:0 0 12px #f0a36077}.preset .icon{margin-bottom:17px;color:#90929d;display:block}.preset .ui-icon{width:25px;height:25px;transition:transform .4s,color .3s}.preset.active .icon{color:#f0b17e}.preset:hover .ui-icon{transform:translateY(-3px) rotate(-6deg)}.preset b{color:#d7d7de;font-size:12px;font-weight:500}.preset small{font-size:10px;color:#777983;margin-top:8px}.lower{margin-top:20px;gap:20px}.inlinecard{padding:20px;gap:13px}.inlinecard>span{display:flex;padding:11px;background:#292a2f;border:1px solid #35363e;color:#b7a28d;border-radius:10px}.inlinecard .ui-icon{width:23px;height:23px}.inlinecard h2{font-size:12px}.inlinecard p{font-size:10px}.inlinecard button{white-space:nowrap;font-size:10px;padding:9px 11px}.small{color:#868892}.sidebottom{color:#8e918e;font-size:10px}.dot{background:#a4b88b;box-shadow:0 0 10px #a4b88b33}.sidebottom small{color:#555861;font-size:8px;letter-spacing:.6px}.sidebottom a{color:#a7907a}footer{color:#585b64;font-size:9px;margin-top:28px}.band output{color:#d5aa87}.band input[type=range]{appearance:auto;height:155px;width:26px;background:none;accent-color:var(--accent)}.band{color:#94959d}.equalizer{height:260px;border-bottom:1px solid #ffffff07;margin:20px 0;background:repeating-linear-gradient(to bottom,transparent,transparent 43px,#ffffff05 43px,#ffffff05 44px)}.empty{border-color:#3a3c43;background:#18191c;color:#8c8d96;font-size:12px}.tabs button.active{color:#efb482;background:#392b20;border-color:#9f6c47}input[type=text],select{background:#16171a;border-color:#383a42;color:#eee}.profile{border-color:#303238}.profile small{color:#8b8c95}.profile b{color:#d7c5b6}dialog{background:linear-gradient(145deg,#29272a,#1b1c20);border-color:#4c4037;color:#f0ece9;padding:35px;box-shadow:0 30px 100px #0008}dialog[open]{animation:modalEnter .35s cubic-bezier(.2,.8,.2,1) both}dialog::backdrop{background:#090a0cb3;backdrop-filter:blur(8px);animation:backdropEnter .3s both}.connection{background:#222120;border:1px solid #49392b}.connection b{color:#e4b38a}.close{background:none;color:#a5a2a1}#toast{background:#3c2d22;color:#f5d8be;border:1px solid #7d5639;box-shadow:0 10px 40px #0006;animation:toastEnter .3s ease both}::view-transition-old(root){animation:pageOut .16s ease both}::view-transition-new(root){animation:pageIn .32s cubic-bezier(.2,.7,.2,1) both}#content{view-transition-name:panel}::view-transition-old(panel){animation:panelOut .15s ease both}::view-transition-new(panel){animation:panelIn .4s cubic-bezier(.2,.75,.2,1) both}::view-transition-group(panel){animation-duration:.35s}@keyframes panelIn{from{opacity:0;transform:translateY(16px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes panelOut{to{opacity:0;transform:translateY(-8px)}}@keyframes pageIn{from{opacity:.6}to{opacity:1}}@keyframes pageOut{to{opacity:.6}}@keyframes deviceEnter{from{opacity:0;transform:rotate(-15deg) translateY(15px) scale(.94)}to{opacity:1;transform:rotate(-9deg) translateY(0) scale(1)}}@keyframes modalEnter{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}@keyframes backdropEnter{from{opacity:0}to{opacity:1}}@keyframes toastEnter{from{opacity:0;margin-bottom:-10px}to{opacity:1;margin-bottom:0}}@keyframes strokeDraw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}.preset.active .ui-icon path{stroke-dasharray:60;animation:strokeDraw .8s ease both}.navlabel:after{content:none;letter-spacing:1px;font-size:7px;color:#484a51}@media(min-width:1500px){main{padding-top:44px}.hero{min-height:430px}.product{height:290px}.product svg{height:280px;width:340px}}@media(max-width:1050px) and (min-width:801px){.grid{grid-template-columns:1.2fr 1fr}.presets{grid-template-columns:repeat(4,1fr)}.preset{padding:16px 13px}.lower{grid-template-columns:1fr}.hero{min-height:395px}.devicebottom{gap:10px}.battery{font-size:8px}.product svg{width:280px}}@media(max-width:800px){aside{width:174px;padding:28px 13px}.shell{margin-left:174px}main{padding:27px 22px}.grid{grid-template-columns:1fr}.hero{min-height:370px}h1{font-size:25px}.intro .primary{padding:11px;font-size:11px}.presets{grid-template-columns:repeat(2,1fr)}nav button.active:after{left:-14px}.navlabel:after{display:none}.lower{grid-template-columns:1fr}.devicebottom{margin-top:0}}@media(max-width:650px){aside{position:static;width:auto;padding:18px 17px}.shell{margin-left:0}.brand{font-size:30px}nav{gap:6px}nav button{padding:11px 12px;background:#202125;font-size:11px}nav button.active:after{display:none}nav button i{display:flex;width:auto}nav .ui-icon{width:15px;height:15px}.intro{align-items:center}.intro .primary{margin-top:0;white-space:nowrap;padding:10px}.intro .primary .ui-icon{display:none}main{padding:24px 16px}header{height:49px;padding:0 19px}h1{font-size:23px}.hero{min-height:365px}.card{padding:22px}.preset{padding:20px}.notice small{max-width:220px}.notice button{white-space:nowrap;font-size:9px}.hero-orbit{width:230px}.inlinecard{padding:18px;gap:10px}.inlinecard button{padding:9px}.equalizer{gap:0}.band input[type=range]{width:20px}.sidebottom{display:none}}
.brand{letter-spacing:-1px;font-size:42px}.brand span{margin-left:11px;letter-spacing:1px}.product .headset-photo{display:block;position:relative;z-index:1;height:258px;width:320px;max-width:100%;object-fit:contain;filter:drop-shadow(0 20px 18px #0007);animation:photoEnter .8s cubic-bezier(.2,.7,.2,1) both;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.hero:hover .headset-photo{transform:translateY(-5px) rotate(-2deg)}.product:after{content:'M HUB';font-size:88px;letter-spacing:8px}.devicebottom h2{font-size:20px}@keyframes photoEnter{from{opacity:0;transform:translateY(15px) scale(.95)}to{opacity:1;transform:none}}@media(min-width:1500px){.product .headset-photo{height:290px;width:350px}}@media(max-width:650px){.brand{font-size:32px}.product .headset-photo{height:250px;width:290px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}::view-transition-group(*),::view-transition-new(*),::view-transition-old(*){animation:none!important}}
