/* The light Apoo menu follows MixerView.swift and PanelStyle.swift. */
.apoo-demo .apoo-native{--ap-blue:#007aff;--ap-text:#363636;--ap-secondary:#888;position:relative;z-index:1;width:308px;max-width:100%;border:1px solid #ffffffc9;border-radius:16px;color:var(--ap-text);background:linear-gradient(125deg,#fafafafc,#f4f4f7f7);box-shadow:0 16px 48px #0005,0 1px 4px #0002,inset 0 0 0 1px #fff5;font:13px/1.2 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;letter-spacing:normal;flex:none;overflow:hidden}
.apoo-demo .apoo-native *{box-sizing:border-box;letter-spacing:normal}
.apoo-demo .apoo-native button,.apoo-demo .apoo-native select{font:inherit;color:inherit;cursor:pointer}
.apoo-demo .apoo-native button{padding:0;border:0;background:none;min-height:0;box-shadow:none}
.apoo-demo .apoo-native button:focus-visible,.apoo-demo .apoo-native select:focus-visible,.apoo-demo .apoo-native summary:focus-visible{outline:2px solid #007aff;outline-offset:2px}
.apoo-demo .apoo-native button:disabled{cursor:default}
.apoo-demo .apoo-native [hidden]{display:none!important}
.apoo-demo .apoo-definitions{position:absolute;width:0;height:0;overflow:hidden}
.apoo-demo .apoo-native-header{height:39px;padding:0 14px;display:flex;align-items:center;justify-content:space-between}
.apoo-demo .apoo-native-header strong{font-size:13px;font-weight:600;color:var(--ap-text)}
.apoo-demo .apoo-native .apoo-switch{position:relative;width:38px;height:22px;min-width:38px;border-radius:20px;background:#d2d2d4;box-shadow:inset 0 0 0 1px #00000004;transition:background .2s}
.apoo-demo .apoo-switch>span{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:0 1px 3px #0002;transition:transform .2s}
.apoo-demo .apoo-switch[aria-checked=true]{background:#c8c8cb}
.apoo-demo .apoo-switch[aria-checked=true]>span{transform:translateX(16px)}
.apoo-demo .apoo-native-rule{height:1px;margin:0 14px;background:#dcdce0;flex:none}
.apoo-demo .apoo-output-section{padding:0 14px 6px}
.apoo-demo .apoo-native h4{font:600 12px/1.2 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:#98989c;margin:0;height:26px;display:flex;align-items:center}
.apoo-demo .apoo-device{height:31px;display:flex;align-items:center;width:100%;gap:8px;border-radius:6px!important;text-align:left;white-space:nowrap}
.apoo-demo .apoo-device:hover{background:#00000006}
.apoo-demo .apoo-device-symbol{display:grid;place-items:center;flex:none;background:#e8e8eb;color:#7e7e81;width:25px;height:25px;border-radius:50%;transition:background .18s,color .18s}
.apoo-demo .apoo-device-symbol svg{width:17px;height:17px;display:block}
.apoo-demo .apoo-device[aria-pressed=true] .apoo-device-symbol{background:#008cff;color:#fff}
.apoo-demo .apoo-applications-section>h4{padding:0 14px;height:29px}
.apoo-demo .apoo-app-row{padding:0 14px;height:54px}
.apoo-demo .apoo-app-top{height:26px;display:flex;align-items:center;gap:7px}
.apoo-demo .apoo-native .apoo-mute-button{display:grid;place-items:center;position:relative;height:26px;width:26px;min-width:26px;border-radius:6px}
.apoo-demo .apoo-app-icon{display:block;width:26px;height:26px;position:relative;background-image:url(assets/apoo-icon-sprite.png);background-size:308px 510px;background-repeat:no-repeat;border-radius:6px;transition:opacity .18s}
.apoo-demo .apoo-chrome{background-position:-14px -299px}
.apoo-demo .apoo-spotify{background-position:-14px -357px}
.apoo-demo .apoo-whatsapp{background-position:-14px -415px}
.apoo-demo .apoo-app-icon.apoo-system-icon{display:grid;place-items:center;background:#e9e9ec;color:#929295;border-radius:50%}
.apoo-demo .apoo-system-icon>svg{width:17px;height:17px}
.apoo-demo .apoo-app-name{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.apoo-demo .apoo-route-wrap{position:relative;max-width:112px;min-width:0;flex:0 1 112px;display:flex;align-items:center;justify-content:flex-end}
.apoo-demo .apoo-native .apoo-route{appearance:none;-webkit-appearance:none;display:block;width:100%;font-size:10.5px;border:0;border-radius:4px;background:transparent;padding:4px 15px 4px 1px;color:#68686c;min-width:0;text-align:right;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-shadow:none}
.apoo-demo .apoo-route-wrap>svg{position:absolute;pointer-events:none;width:10px;height:10px;right:1px;color:#868689}
.apoo-demo .apoo-route:hover{background:#00000005}
.apoo-demo .apoo-native option{background:#fafafa;color:#333}
.apoo-demo .apoo-volume-row{height:23px;display:flex;gap:6px;align-items:center;color:#99999d}
.apoo-demo .apoo-volume-row>svg{width:13px;height:13px;flex:none}
.apoo-demo .apoo-volume-row>svg:last-child{width:18px;height:18px}
.apoo-demo .apoo-native input[type=range]{--volume:50%;appearance:none;-webkit-appearance:none;display:block;width:100%;height:23px;margin:0;padding:0;border:0;border-radius:4px;background:transparent;cursor:pointer;min-width:0;outline-offset:5px}
.apoo-demo .apoo-native input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--ap-blue) var(--volume),#dedee1 var(--volume))}
.apoo-demo .apoo-native input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--ap-blue) var(--volume),#dedee1 var(--volume))}
.apoo-demo .apoo-native input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:15px;height:12px;margin-top:-4px;border-radius:8px;background:transparent;border:0;box-shadow:none;transition:background .1s,box-shadow .1s}
.apoo-demo .apoo-native input[type=range]::-moz-range-thumb{width:15px;height:12px;border:0;border-radius:8px;background:transparent;box-shadow:none}
.apoo-demo .apoo-volume-row:hover input::-webkit-slider-thumb,.apoo-demo .apoo-native input[type=range]:focus-visible::-webkit-slider-thumb{background:#fff;box-shadow:0 1px 3px #0003,0 0 0 .5px #0001}
.apoo-demo .apoo-volume-row:hover input::-moz-range-thumb,.apoo-demo .apoo-native input[type=range]:focus-visible::-moz-range-thumb{background:#fff;box-shadow:0 1px 3px #0003}
.apoo-demo .apoo-native input[type=range]:focus-visible{outline:2px solid #007aff99}
.apoo-demo .apoo-muted-mark{position:absolute;right:-2px;bottom:-2px;display:none;place-items:center;width:13px;height:13px;border-radius:50%;background:#f4f4f6;box-shadow:0 0 0 .5px #ccc;color:#777}
.apoo-demo .apoo-muted-mark svg{width:10px;height:10px}
.apoo-demo .apoo-app-row.is-muted .apoo-app-icon{opacity:.6}
.apoo-demo .apoo-app-row.is-muted .apoo-muted-mark{display:grid}
.apoo-demo .apoo-native.is-off .apoo-applications-section .apoo-app-top,.apoo-demo .apoo-native.is-off .apoo-volume-row{opacity:.42}
.apoo-demo .apoo-native.is-off input[type=range]{cursor:default}
.apoo-demo .apoo-native .apoo-settings-link{height:34px;width:100%;padding:0 14px;text-align:left;font-size:13px;display:block}
.apoo-demo .apoo-native .apoo-settings-link:disabled{color:#777;cursor:default}
.apoo-demo .apoo-preview-caption{position:absolute;z-index:2;bottom:9px;left:0;right:0;text-align:center;font:9px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.02em;color:#b3bdd0;pointer-events:none}

.apoo-demo{position:relative;width:100%;max-width:480px;margin-inline:auto;text-align:left;flex:none;isolation:isolate}.apoo-demo .apoo-native{width:308px;max-width:none;box-shadow:0 12px 28px #30251b24,0 1px 3px #30251b12;color-scheme:light}.apoo-demo .apoo-native-header{height:42px}.apoo-demo .apoo-native h4{height:28px}.apoo-demo .apoo-device{height:32px}.apoo-demo .apoo-device-symbol{width:26px;height:26px}.apoo-demo .apoo-app-row{height:58px;padding-top:4px}.apoo-demo .apoo-app-name{font-size:13px}.apoo-demo .apoo-route{font-size:11px!important}.apoo-demo .apoo-app-top{gap:8px}.apoo-demo .apoo-applications-section>h4{height:28px}.apoo-demo .apoo-volume-row{height:22px}.apoo-demo .apoo-volume-row input[type=range]{height:22px}.apoo-demo .apoo-feature-rows{padding-block:10px}.apoo-demo .apoo-design-controls{padding-bottom:10px}.apoo-demo .apoo-output-section{padding-bottom:6px}.apoo-demo .apoo-native button:hover{background-color:#00000005}.apoo-demo .apoo-switch:hover{background-color:#bfbfc4}.apoo-demo .apoo-settings-view{padding-inline:14px;min-height:460px}.apoo-demo .apoo-settings-view .apoo-native-header{padding:0;justify-content:flex-start;gap:8px}.apoo-demo .apoo-settings-view .apoo-back{width:18px;height:28px;font-size:22px}.apoo-demo .apoo-setting-row{display:flex;align-items:center;justify-content:space-between;padding-block:14px}.apoo-demo .apoo-settings-view .apoo-native-rule{margin:0}.apoo-demo .apoo-settings-view p{font:11px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;color:#888;margin:8px 0;max-width:none;letter-spacing:0}.apoo-demo .apoo-settings-view .apoo-permissions{margin-top:14px}.apoo-demo .apoo-settings-view .apoo-reset{padding-block:16px;text-align:left}.apoo-demo .apoo-settings-view .apoo-settings-links{display:flex;gap:14px;padding-block:14px;font-size:12px;color:#007aff}.apoo-demo .apoo-permission-hint{padding:10px;background:#e8eef7;border-radius:8px}.apoo-demo .apoo-demo-footer{color:#888;font-size:10px;margin-top:24px;padding-block:12px;border-top:1px solid #ddd}.apoo-demo .apoo-preview-note{display:block;margin:13px 0 0;text-align:center;font-size:10px;line-height:1.4;letter-spacing:.01em;color:#746a60}.apoo-definitions{position:absolute;width:0;height:0;overflow:hidden}.apoo-demo .apoo-native input[type=range]:disabled{cursor:default}.apoo-demo .apoo-native input[type=range]:disabled::-webkit-slider-thumb{background:transparent;box-shadow:none}.apoo-demo .apoo-native button:disabled,.apoo-demo .apoo-native select:disabled{cursor:default}.apoo-demo .apoo-native.is-off .apoo-switch{opacity:1}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}.stage .apoo-demo{width:350px;max-width:100%;z-index:2}.detail .apoo-demo{max-width:430px}.native-mix .apoo-demo{max-width:100%}.native-mix{overflow:visible}.stage{min-height:650px}.stage .apoo-native{animation:panel-drift 7s ease-in-out infinite}.stage .apoo-demo:hover .apoo-native,.stage .apoo-demo:focus-within .apoo-native{animation-play-state:paused}.native-mix .apoo-native{animation:native-mix-float 7s ease-in-out infinite}.native-mix .apoo-demo:hover .apoo-native,.native-mix .apoo-demo:focus-within .apoo-native{animation-play-state:paused}@media(max-width:760px){.stage{min-height:0;padding:40px 20px 55px}.detail{padding:28px 20px}.twoup article{padding:26px 18px}}@media(prefers-reduced-motion:reduce){.apoo-demo *{animation:none!important;transition:none!important}}

.mix-lab>*,.routing>*,.mute-states,.mute-states>*,.apoo-demo{min-width:0}.mix-lab{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}.routing{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mute-states{grid-template-columns:minmax(0,1fr)}@media(max-width:760px){.mix-lab,.routing{grid-template-columns:minmax(0,1fr)}}

.native-mix{overflow:hidden}