.hb-demo{position:relative}.hb{--hb-ink:var(--brand-ink,#0e0828);--hb-paper:var(--brand-paper,#fff6ee);--hb-segoe:"Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;position:absolute;inset:0}.hb-half{width:400px;height:500px;position:absolute;top:0;overflow:hidden}.hb-os{letter-spacing:.18em;text-transform:uppercase;font:500 15px/1 Roboto Mono,ui-monospace,monospace;position:absolute;top:132px}.hb-win{background:linear-gradient(160deg,#eef4fc 0%,#c7dbf4 60%,#a9c6ec 100%);left:0}.hb-bloom{width:400px;height:500px;position:absolute;inset:0}.hb-win .hb-os{color:#0e082899;right:18px}.hb-sel{visibility:hidden;background:#ffffff52;border-radius:6px;position:absolute;box-shadow:inset 0 0 0 1.5px #fff9}.hb-win .hb-bin-art{filter:drop-shadow(0 6px 8px #0a286447)}.hb-win-name{text-align:center;color:#fff;font:400 19px/1.3 var(--hb-segoe);text-shadow:0 1px 2px #000000bf,0 0 6px #00000059;position:absolute}.hb-taskbar{backdrop-filter:blur(20px)saturate(1.6);color:#1b1b1b;height:52px;font:400 12px/1.25 var(--hb-segoe);background:#f0f3f8db;align-items:center;gap:10px;padding:0 14px;display:flex;position:absolute;bottom:0;left:0;right:0;box-shadow:inset 0 1px #00000014}.hb-weather{align-items:center;gap:8px;margin-right:auto;display:flex}.hb-weather>span{flex-direction:column;display:flex}.hb-weather b{font-weight:600}.hb-start{border-radius:5px;grid-template-columns:11px 11px;gap:2px;padding:9px;display:grid}.hb-start i{background:linear-gradient(135deg,#36a8ff,#0067c0);border-radius:1.5px;width:11px;height:11px}.hb-search{color:#555;background:#ffffffd9;border-radius:16px;align-items:center;gap:8px;width:120px;height:32px;padding:0 12px;font-size:13px;display:flex;box-shadow:inset 0 0 0 1px #00000012}.hb-folder{background:linear-gradient(#ffd75e,#f5b400);border-radius:3px;flex:none;width:30px;height:24px;margin-right:-30px;box-shadow:inset 0 4px #e9a700}.hb-drag-tip{z-index:2;color:#1b1b1b;font:400 14px/1.2 var(--hb-segoe);white-space:nowrap;visibility:hidden;background:#f9f9f9;border-radius:4px;align-items:center;gap:6px;padding:5px 9px;display:flex;position:absolute;box-shadow:0 0 0 1px #0000001f,0 4px 10px #0000002e}.hb-mac{background:radial-gradient(46% 52% at 70% 58%,#fff6eecc,#0000 72%),radial-gradient(60% 70% at 10% 18%,#3449c6f2,#0000 70%),radial-gradient(55% 60% at 96% 8%,#a855f7d9,#0000 70%),radial-gradient(70% 60% at 50% 110%,#f83b56bf,#0000 70%),#0e0828;left:400px}.hb-mac:before{content:"";z-index:3;background:var(--hb-ink);width:3px;position:absolute;top:0;bottom:0;left:0}.hb-mac .hb-os{color:#fff6eebf;left:21px}.hb-dock{backdrop-filter:blur(16px)saturate(1.6);background:#ffffff3d;border-radius:48px;position:absolute;box-shadow:inset 0 1.5px #ffffffbf,inset 0 0 0 1px #ffffff4d,inset 0 -10px 24px -12px #fff6,0 18px 40px -18px #0e082899}.hb-tile{box-sizing:border-box;border-radius:23%;position:absolute;transform:scale(.84);box-shadow:inset 0 1.5px #ffffff80,inset 0 0 0 1px #ffffff2e,0 6px 14px -6px #0e082880}.hb-tile:after{content:"";border:9px solid #fff6eeeb;border-radius:50%;position:absolute;inset:34%}.hb-tile-a{background:linear-gradient(160deg,#ff5a1f,#f83b56)}.hb-tile-b{background:linear-gradient(160deg,#4f63e0,#3449c6)}.hb-tile-b:after{border-radius:10px;inset:30% 26%}.hb-divider{background:#0e082840;border-radius:1px;width:2px;position:absolute}.hb-tip{z-index:2;backdrop-filter:blur(12px);color:#1d1d1f;font:500 15px/1.2 var(--ui,system-ui, sans-serif);visibility:hidden;background:#f6f6f8d1;border-radius:999px;padding:5px 12px;position:absolute;transform:translate(-50%);box-shadow:0 0 0 .5px #00000026,0 6px 16px -6px #0006}.hb-bin-art,.hb-bin{pointer-events:none;position:absolute}.hb-bin-art{inset:0}.hb-bin{display:block}.hb-full{visibility:hidden}.hb-file{transform-origin:50% 40%;will-change:transform;flex-direction:column;align-items:center;gap:4px;width:68px;display:flex;position:absolute;top:0;left:0}.hb-file svg{filter:drop-shadow(0 3px 4px #0e082873);display:block}.hb-file span{color:#fff;max-width:130px;font:500 13px/1.2 var(--ui,system-ui, sans-serif);white-space:nowrap;text-shadow:0 1px 2px #000000b3;border-radius:5px;padding:2px 6px}.hb-win .hb-file span{font-family:var(--hb-segoe);font-weight:400}.hb-gl{z-index:1;pointer-events:none;width:800px;height:500px;position:absolute;top:0;left:0}.hb-still{z-index:1;width:100%;height:100%;position:absolute;inset:0}.hb-menu{z-index:2;visibility:hidden;flex-direction:column;display:flex;position:absolute}.hb-menu span{white-space:nowrap;justify-content:space-between;gap:24px;display:flex}.hb-mac-menu{box-sizing:border-box;backdrop-filter:blur(20px)saturate(1.8);color:#1d1d1f;width:184px;font:400 16px/1 var(--ui,system-ui, sans-serif);transform-origin:50% 100%;background:#f6f6f8cc;border-radius:14px;padding:5px;box-shadow:0 0 0 .5px #0003,inset 0 1px #fffc,0 14px 30px -10px #00000080}.hb-mac-menu span{border-radius:8px;align-items:center;height:30px;padding:0 12px}.hb-mac-menu.is-hot span:last-child{color:#fff;background:#0a7cff}.hb-win-menu{box-sizing:border-box;color:#1b1b1b;width:252px;font:400 15px/1 var(--hb-segoe);transform-origin:0 100%;background:#f9f9f9;border-radius:8px;padding:4px;box-shadow:0 0 0 1px #0000001a,0 8px 18px #0003}.hb-win-menu span{border-radius:4px;align-items:center;height:34px;padding:0 12px 0 40px}.hb-win-menu kbd{font:inherit;color:#6b6b6b;font-size:13px}.hb-win-menu hr{background:#00000017;border:0;height:1px;margin:4px 0}.hb-win-menu.is-hot span:nth-child(2){background:#0000000f}.hb-pointer{z-index:2;pointer-events:none;will-change:transform;position:absolute;top:0;left:0}.hb-pointer svg{filter:drop-shadow(0 2px 2px #00000059);margin:-3px 0 0 -6px;display:block}.hb-pick{z-index:2;backdrop-filter:blur(10px);--p:0;background:#0e0828d1;border-radius:999px;gap:2px;padding:3px;display:flex;position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 0 0 1px #fff6ee24,0 8px 20px -8px #0009}.hb-pick button{color:#fff6eeb8;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;border-radius:999px;height:30px;padding:0 14px;font:500 12px/1 Roboto Mono,ui-monospace,monospace;transition:background-color .16s,color .16s;position:relative;overflow:hidden}.hb-pick button:hover{color:var(--brand-paper,#fff6ee);background:#fff6ee1a}.hb-pick button:focus-visible{outline:2px solid var(--brand-accent-3,#efff00);outline-offset:2px}.hb-pick button[aria-pressed=true]{background:var(--brand-paper,#fff6ee);color:var(--brand-ink,#0e0828)}.hb-pick button i{opacity:0;height:2px;transform:scaleX(var(--p));transform-origin:0;background:currentColor;border-radius:1px;position:absolute;bottom:5px;left:14px;right:14px}.hb-pick:not(.is-picked) button[aria-pressed=true] i{opacity:.35}@media (width<=860px){.hb-pick{width:fit-content;margin:12px auto 0;position:relative;top:auto;left:auto;transform:none}.hb-pick button{height:34px}}