.gm-demo {--gm-ink:#20242b; --gm-soft:rgba(255,255,255,.28); --gm-select:rgba(255,255,255,.76); font:400 17px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--gm-ink); width:100%; min-width:0; isolation:isolate}
.gm-stage {position:relative; width:100%; height:360px; overflow:hidden; border-radius:32px; background:#bbb5ac url('./assets/wallpaper.png') center/cover; user-select:none; -webkit-user-select:none}
.gm-canvas {display:block; width:100%; height:100%; pointer-events:none}
.gm-surface {position:absolute; left:0; top:0; touch-action:none; will-change:transform,width,height; color:var(--gm-ink)}
.gm-demo button,.gm-demo input {font:inherit; color:inherit; -webkit-tap-highlight-color:transparent}
.gm-demo button {appearance:none; border:0; margin:0; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; background:none; padding:0; box-shadow:none}
.gm-demo button:focus-visible {outline:none; background:rgba(255,255,255,.85); box-shadow:0 0 0 4px rgba(28,115,250,.27)}
.gm-demo svg {width:25px; height:25px; display:block; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none}
.gm-launch {position:absolute; inset:0; width:100%; height:100%; border-radius:inherit; font-weight:550!important; letter-spacing:-.3px; transition:opacity .12s; touch-action:none}
.gm-launch .gm-launch-arrow {width:18px; height:18px; margin-left:24px; opacity:.7}
.gm-demo[data-mode='circle'] .gm-launch span,.gm-demo[data-mode='circle'] .gm-launch-arrow {display:none}
.gm-demo[data-mode='circle'] .gm-launch>svg:first-child {width:32px; height:32px}
.gm-demo[data-mode='panel'] .gm-launch {opacity:0; pointer-events:none}
.gm-grip {position:absolute; left:50%; top:-25px; transform:translateX(-50%); width:72px; height:25px; border-radius:14px; cursor:grab!important; touch-action:none}
.gm-grip::after {content:''; width:32px; height:4px; background:rgba(37,42,50,.46); border-radius:9px; box-shadow:0 1px 0 rgba(255,255,255,.6)}
.gm-grip:active {cursor:grabbing!important}
.gm-panel {position:absolute; inset:0; padding:21px 23px; opacity:0; transform-origin:50% 0; pointer-events:none; overflow:hidden; display:flex; flex-direction:column; gap:15px}
.gm-demo[data-mode='panel'] .gm-panel {pointer-events:auto}
.gm-panel-header {display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:34px}
.gm-panel-title {font-size:19px; font-weight:550; letter-spacing:-.3px; margin:0}
.gm-demo .gm-close {width:34px; height:34px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.22)}
.gm-close svg {width:19px; height:19px}
.gm-toggles {display:grid; grid-template-columns:1fr 1fr; gap:10px}
.gm-demo .gm-toggle {min-height:62px; border-radius:23px; padding:12px 10px; background:rgba(255,255,255,.24); transition:background .16s,transform .16s; font-size:17px; gap:8px}
.gm-demo .gm-toggle[aria-pressed='true'] {background:rgba(248,250,255,.85); color:#1d2735}
.gm-demo .gm-toggle:active,.gm-demo .gm-close:active {transform:scale(.92)}
.gm-brightness {display:flex; flex-direction:column; gap:9px; font-size:17px; min-width:0}
.gm-brightness-head {display:flex; align-items:center; justify-content:space-between}
.gm-brightness output {font-variant-numeric:tabular-nums; opacity:.72}
.gm-range-row {display:flex; align-items:center; gap:12px}
.gm-range-row svg {width:22px; height:22px}
.gm-range {appearance:none; -webkit-appearance:none; min-width:0; width:100%; height:30px; border:0; padding:0; background:transparent; cursor:pointer; touch-action:pan-x}
.gm-range::-webkit-slider-runnable-track {height:10px; border-radius:8px; background:linear-gradient(to right,rgba(255,255,255,.95) var(--gm-level,65%),rgba(33,41,54,.2) var(--gm-level,65%))}
.gm-range::-webkit-slider-thumb {-webkit-appearance:none; width:26px; height:26px; margin-top:-8px; background:#fff; border:1px solid rgba(255,255,255,.7); border-radius:50%; box-shadow:0 3px 10px #0003}
.gm-range::-moz-range-track {height:10px; border-radius:8px; background:rgba(33,41,54,.2)}
.gm-range::-moz-range-progress {height:10px; border-radius:8px; background:#fff}
.gm-range::-moz-range-thumb {width:25px; height:25px; background:#fff; border:0; border-radius:50%; box-shadow:0 3px 10px #0003}
.gm-range:focus-visible {outline:none; filter:drop-shadow(0 0 4px color-mix(in srgb,var(--gm-ink,#303030) 60%,transparent))}
.gm-modes {position:absolute; left:50%; bottom:17px; transform:translateX(-50%); padding:5px; display:flex; gap:3px; border-radius:28px; background:rgba(245,245,249,.25); box-shadow:inset 0 1px 1px #ffffffb3,0 5px 15px #20263815; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); width:max-content; max-width:calc(100% - 24px)}
.gm-demo .gm-mode {padding:11px 18px; min-height:44px; border-radius:23px; font-size:17px; line-height:1; transition:background .18s,box-shadow .18s; white-space:nowrap}
.gm-demo .gm-mode[aria-checked='true'] {background:rgba(255,255,255,.74); box-shadow:0 2px 8px #12192712}
.gm-demo[data-gm-theme='dark'] {--gm-ink:#f8f9ff}
.gm-demo[data-gm-theme='dark'] .gm-modes {background:rgba(27,32,45,.48); box-shadow:inset 0 1px 1px #ffffff50,0 5px 15px #10131a33}
.gm-demo[data-gm-theme='dark'] .gm-mode[aria-checked='true'] {background:rgba(255,255,255,.22)}
.gm-demo[data-gm-theme='dark'] .gm-grip::after {background:rgba(255,255,255,.68); box-shadow:none}
.gm-demo[data-gm-theme='dark'] button:focus-visible {background:#546882}
.gm-demo[data-gm-transparency='reduced'] .gm-modes {background:#e8ebf1; backdrop-filter:none; -webkit-backdrop-filter:none}
.gm-demo[data-gm-transparency='reduced'][data-gm-theme='dark'] .gm-modes {background:#292f3d}
.gm-demo[data-gm-motion='reduced'] * {transition:none!important; animation:none!important}
.gm-sr {position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important}
@media(max-width:420px) {.gm-stage {height:360px; border-radius:26px}.gm-demo .gm-mode {padding:11px 13px}.gm-panel {padding:20px 18px}.gm-panel-title {font-size:18px}.gm-demo .gm-toggle {gap:7px;padding:12px 7px}.gm-launch .gm-launch-arrow {margin-left:10px}}
@media(prefers-reduced-motion:reduce) {.gm-demo * {transition:none!important;animation:none!important}}