.demo-page{padding:clamp(2.5rem,5vw,4rem) 0 0}.demo-heading{max-width:60rem;margin-bottom:clamp(1.75rem,3.5vw,3rem)}.demo-heading h1{letter-spacing:-.045em;max-width:22ch;margin:.8rem 0 1rem;font-size:clamp(2.2rem,4.2vw,3.6rem);line-height:1.02}.demo-heading>p:last-child{max-width:52ch;color:var(--text-muted);margin:0;font-size:1.02rem;line-height:1.6}.demo-stage{min-height:calc(100svh - 13rem);margin-inline:var(--gutter);border-radius:calc(var(--radius) * 1.4) calc(var(--radius) * 1.4) 0 0;background:#0c0d11 50%/cover;border:1px solid #ffffff1f;flex-direction:column;display:flex;position:relative;overflow:hidden;box-shadow:0 2rem 7rem #00000080}.demo-stage-frame{background:#0c0d11eb;align-items:center;gap:6px;height:34px;padding:0 13px;display:flex}.demo-stage-frame span{background:#ffffff38;border-radius:999px;width:7px;height:7px}.demo-canvas{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.9rem;padding:clamp(2.5rem,6vh,5rem) 1.25rem clamp(11rem,24vh,15rem);display:flex}.demo-clock{text-align:center;text-shadow:0 2px 18px #00000073;justify-items:center;gap:.15rem;display:grid}.demo-clock strong{font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-size:clamp(3.4rem,8vw,5.4rem);font-weight:450;line-height:1}.demo-clock span{color:#ffffffbd;font-size:.95rem}.demo-search{color:#ffffffd1;backdrop-filter:blur(14px);background:#0a0b0f8c;border:1px solid #ffffff2e;border-radius:999px;align-items:center;gap:.6rem;width:min(100%,32rem);margin-top:1.1rem;padding:.35rem .5rem .35rem 1.1rem;transition:border-color .6s,box-shadow .6s;display:flex}.demo-search:focus-within{border-color:var(--demo-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--demo-accent) 22%, transparent)}.demo-search svg{opacity:.7;flex:none}.demo-search input{color:#fffffff0;background:0 0;border:none;outline:none;flex:1;min-width:0;padding:.55rem .3rem .55rem 0;font-size:.95rem}.demo-search input::placeholder{color:#ffffff73}.demo-search-note{color:#ffffff80;margin:0;font-size:.74rem}.demo-shortcuts{width:min(100%,40rem);margin-top:1.6rem}.demo-shortcuts-title{color:#ffffff94;letter-spacing:.14em;text-align:center;text-transform:uppercase;margin:0 0 .65rem;font-size:.7rem;font-weight:700}.demo-shortcuts ul{flex-wrap:wrap;justify-content:center;gap:.55rem;margin:0;padding:0;list-style:none;display:flex}.demo-shortcut{position:relative}.demo-shortcut a{border-radius:calc(var(--radius) * 1.1);color:#ffffffe0;backdrop-filter:blur(10px);background:#0a0b0f80;border:1px solid #ffffff24;align-items:center;gap:.5rem;padding:.5rem .85rem;font-size:.84rem;font-weight:600;text-decoration:none;transition:border-color .6s,background-color .2s;display:inline-flex}.demo-shortcut a:hover,.demo-shortcut a:focus-visible{border-color:color-mix(in srgb, var(--demo-accent) 65%, transparent);background:#101117b8}.demo-shortcut a>span{color:#090a0d;background:color-mix(in srgb, var(--demo-accent) 85%, white 15%);border-radius:.4rem;place-items:center;width:1.35rem;height:1.35rem;font-size:.72rem;font-weight:800;transition:background-color .6s;display:grid}.demo-shortcut-remove{color:#ffffffd9;opacity:0;background:#0a0b0fe6;border:1px solid #ffffff38;border-radius:999px;place-items:center;width:1.1rem;height:1.1rem;padding:0;transition:opacity .16s,background-color .16s;display:grid;position:absolute;top:-.4rem;right:-.4rem}.demo-shortcut:hover .demo-shortcut-remove,.demo-shortcut:focus-within .demo-shortcut-remove{opacity:1}.demo-shortcut-remove:hover{background:#ef6b68e6}.demo-shortcut-add{flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:.9rem;display:flex}.demo-shortcut-add input{border-radius:calc(var(--radius) * .9);color:#ffffffe6;background:#0a0b0f8c;border:1px solid #ffffff24;outline:none;width:9rem;min-width:0;padding:.45rem .7rem;font-size:.8rem;transition:border-color .2s}.demo-shortcut-add input::placeholder{color:#fff6}.demo-shortcut-add input:focus-visible{border-color:var(--demo-accent)}.demo-shortcut-add-button{border-radius:calc(var(--radius) * .9);color:#ffffffe6;background:#ffffff0f;border:1px solid #ffffff24;align-items:center;gap:.35rem;padding:.45rem .8rem;font-size:.8rem;font-weight:650;transition:border-color .2s,background-color .2s;display:inline-flex}.demo-shortcut-add-button:hover{border-color:color-mix(in srgb, var(--demo-accent) 65%, transparent);background:#ffffff1a}.demo-dock{z-index:4;border-radius:calc(var(--radius) * 1.3);backdrop-filter:blur(16px);background:#090a0dc7;border:1px solid #ffffff21;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.6rem 1.25rem;margin:0 1rem 1rem;padding:.85rem 1rem;display:grid;position:absolute;inset:auto 0 0}.demo-dock-themes{flex-wrap:wrap;gap:.35rem;display:flex}.demo-theme-chip{color:#ffffffd1;white-space:nowrap;background-color:#ffffff09;border:1px solid #ffffff24;border-radius:999px;flex:none;padding:.4rem .75rem;font-size:.72rem;font-weight:650;transition:border-color .18s,background-color .18s,color .18s;position:relative}.demo-theme-chip:before{content:"";vertical-align:1px;background:var(--chip-background);border-radius:999px;width:.55rem;height:.55rem;margin-right:.45rem;display:inline-block}.demo-theme-chip:hover{color:#fff;background-color:#ffffff1a}.demo-theme-chip.is-active{color:#fff;background-color:#ffffff24;border-color:#ffffffa6}.demo-dock-wallpaper{flex-wrap:wrap;justify-self:end;align-items:center;gap:.5rem .7rem;display:flex}.demo-upload{color:var(--amber);cursor:pointer;background:#f4a94f14;border:1px solid #f4a94f66;border-radius:999px;align-items:center;padding:.4rem .8rem;font-size:.72rem;font-weight:700;transition:border-color .18s,background-color .18s;display:inline-flex}.demo-upload:hover{background:#f4a94f24;border-color:#f4a94fb3}.demo-upload input{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.demo-palette{background:#090a0db3;border:1px solid #ffffff29;border-radius:999px;gap:.25rem;padding:.25rem;display:inline-flex}.demo-palette-swatch{border-radius:999px;width:.95rem;height:.95rem}.demo-palette-note{color:#ffffffb8;font-size:.7rem;font-weight:650}.demo-wallpaper-clear{color:#ffffffbf;background:0 0;border:1px solid #ffffff24;border-radius:999px;padding:.35rem .65rem;font-size:.7rem;font-weight:650;transition:border-color .18s,color .18s}.demo-wallpaper-clear:hover{color:#fff;border-color:#ffffff59}.demo-wallpaper-privacy{color:var(--text-faint);font-size:.68rem}.demo-error{color:#ef6b68;font-size:.7rem;font-weight:650}.demo-install{border-radius:calc(var(--radius) * 1.1);color:#090a0d;background:#fcfcfcf5;grid-column:1/-1;justify-self:end;align-items:center;gap:.55rem;padding:.55rem .85rem .55rem .7rem;font-size:.78rem;font-weight:750;text-decoration:none;transition:transform .18s,box-shadow .18s;display:inline-flex}.demo-install:hover{transform:translateY(-1px);box-shadow:0 .8rem 2rem #0006}.demo-install>span{gap:.05rem;display:grid}.demo-install strong{letter-spacing:.02em;font-size:.68rem}.demo-install em{color:#090a0dad;max-width:24ch;font-size:.6rem;font-style:normal;font-weight:600;line-height:1.3}@media (width<=900px){.demo-stage{min-height:calc(100svh - 11rem)}.demo-dock{grid-template-columns:1fr;margin:0 .6rem .6rem;position:relative;inset:auto}.demo-dock-themes{scrollbar-width:thin;flex-wrap:nowrap;padding-bottom:.3rem;overflow-x:auto}.demo-dock-wallpaper{justify-self:start}.demo-install{grid-column:auto;justify-self:start}.demo-canvas{padding-bottom:2rem}}@media (width<=520px){.demo-stage{margin-inline:calc(var(--gutter) * -.45);border-inline:none;border-radius:0}.demo-shortcut-add input{width:100%}}