/* LaunchingPad demos: the app's Window mode drawn in HTML (kit.js), the demo pointer, the
   window walks (walk.js) and the Dock folders loop (dock.js). Everything in the window
   scales from --icon. The site's kit.css supplies the page's type and wallpaper; the few
   variables used here fall back to their own values without it. */

:where(:root){
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --lp-hair:rgba(255,255,255,.14);
}
/* A demo parked out of reach (lp-demos.js) keeps its box, its height held, and draws nothing. */
.lp-parked > *{display:none!important}

/* ---------- Glyphs: one mask sprite (glyphs.webp), or an image of their own via --g ---------- */
.glyph{display:inline-block;width:1em;height:1em;background:currentColor;-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat;flex:none}

/* ---------- The window illustration ---------- */
.lpw{
  --icon:72px;
  --u:calc(var(--icon) / 72);            /* 1 unit = 1px at the 72px reference size */
  /* Corners as the app draws them on macOS 27 (WindowedChromeMetrics): the window's
     16 pt continuous radius, read off a real capture as a 16u circle, and the search
     pill inset 9u with the concentric radius left over, so both curves run parallel. */
  --radius:calc(16 * var(--u));
  --inset:calc(9 * var(--u));
  position:relative;
  display:flow-root;                     /* keeps the search pill's top margin inside the window */
  width:calc(var(--icon) * 1.86 * var(--n,8) + 12 * var(--u));
  max-width:none;
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(170,175,255,.16),rgba(140,150,255,.08));
  -webkit-backdrop-filter:blur(calc(30 * var(--u))) saturate(1.7) brightness(1.08);
  backdrop-filter:blur(calc(30 * var(--u))) saturate(1.7) brightness(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 calc(40 * var(--u)) calc(100 * var(--u)) calc(-24 * var(--u)) rgba(4,0,40,.6);
  user-select:none;pointer-events:none;
}
/* ---------- A picture of a demo (img.lp-still in its element) holds its place, sized as the
   demo will be, until the package draws the demo, and stays if it never does. Then it lies
   over the live demo until that is ready, and fades away (lp-demos.js). Each is the demo as
   it first shows, at its largest, at 2x (script/capture_demo_stills.mjs); a Dock's has the
   popup open that Reduce Motion shows. Below the widths where a demo only shrinks (a
   panel's rows giving up width, fewer tiles to a row), the picture just scales. ---------- */
.lp-still{display:block;height:auto;user-select:none;pointer-events:none}
/* A window, from --icon and its columns (--n, rails included), as the window is; the
   keyboard's is its window, six columns and no rails, the lane under it empty. */
[data-lp-demo="window"] > .lp-still,[data-lp-demo="keys"] > .lp-still{
  --u:calc(var(--icon,72px) / 72);
  width:calc(var(--icon,72px) * 1.86 * var(--n,8) + 12 * var(--u));max-width:100%;
  border-radius:calc(16 * var(--u));
  box-shadow:0 calc(40 * var(--u)) calc(100 * var(--u)) calc(-24 * var(--u)) rgba(4,0,40,.6);
}
[data-lp-demo="keys"] > .lp-still{--icon:min(64px,calc(100cqw / 11.33));--n:6;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 calc(30 * var(--u)) calc(50 * var(--u)) rgba(4,0,40,.45))}
/* The panels, by their own --u (below): Settings' pane, the Smart Folder editor, the row of tiles */
[data-lp-demo="settings"] > .lp-still{--u:max(.78px,min(1px,calc(100cqw / 560)));width:min(100%,calc(560 * var(--u)));border-radius:calc(16 * var(--u))}
[data-lp-demo="smart"] > .lp-still{--u:max(.6px,min(1px,calc(100cqw / 780)));width:calc(780 * var(--u));max-width:none;border-radius:calc(28 * var(--u))}
[data-lp-demo="settings"] > .lp-still,[data-lp-demo="smart"] > .lp-still{
  box-shadow:0 0 0 1px rgba(0,0,0,.85),0 calc(30 * var(--u)) calc(80 * var(--u)) calc(-24 * var(--u)) rgba(4,0,40,.6)}
[data-lp-demo="select"] > .lp-still{width:100%}
/* A Dock's: across the middle of its stage, on its foot, where the Dock stands. */
[data-lp-demo="dock"] > .lp-still{position:absolute;left:50%;bottom:0;z-index:10;width:min(100%,1280px);translate:-50% 0}
.lp-still.over{position:absolute;left:0;top:0;z-index:10;box-shadow:none;filter:none;transition:opacity .2s ease-out}
[data-lp-demo="window"] > .lp-still.over{inset:0;width:100%;height:100%}
[data-lp-demo="dock"] > .lp-still.over{left:50%;top:auto}
.lp-still.gone{opacity:0}
.lpw .lp-search{
  display:flex;align-items:center;gap:calc(14 * var(--u));
  margin:var(--inset);height:calc(66 * var(--u));padding:0 calc(22 * var(--u));
  border-radius:calc(var(--radius) - var(--inset));
  background:rgba(28,18,110,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  font:400 calc(28 * var(--u))/1 var(--font);letter-spacing:-.01em;
}
.lpw .lp-search .mag{font-size:calc(26 * var(--u));color:rgba(214,208,255,.62)}
.lpw .lp-search .field{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpw .lp-search .ph{color:rgba(222,216,255,.58)}
.lpw .lp-search .q{color:#fff}
.lpw .lp-search .q::after{content:"";display:inline-block;width:calc(2.5 * var(--u));height:1.05em;margin-left:calc(3 * var(--u));vertical-align:-.17em;background:#8fb8ff;border-radius:2px}
.lpw .lp-search .gear{font-size:calc(22 * var(--u));color:rgba(255,255,255,.82)}
.lpw .wbody{position:relative;display:grid;padding:calc(22 * var(--u)) calc(6 * var(--u))}
.lpw .rail{grid-row:1;align-self:stretch;display:grid;row-gap:calc(26 * var(--u));align-content:start;justify-items:center;border-right:1px solid var(--lp-hair)}
.lpw .lp-grid{grid-row:1;display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));row-gap:calc(26 * var(--u));align-content:start;justify-items:center}
.lpw .wfoot{grid-row:2;display:grid;align-items:start;padding-top:calc(20 * var(--u))}
.lpw .wfoot > *{grid-row:1}
.lpw .wfoot .capsule{justify-self:center}
/* Page dots centre on the whole window, as in the app; the number row sits
   just below the capsules' midline and the dots 21 pt under it. */
.lpw .wfoot .dots{grid-column:1/-1;margin-top:calc(9 * var(--u))}
.lpw .slot{display:block;width:var(--icon);height:calc(var(--icon) + 36 * var(--u))}
.lpw .overlay{position:absolute;inset:0;border-radius:inherit}

/* ---------- Tiles ---------- */
.tile{display:flex;flex-direction:column;align-items:center;gap:calc(11 * var(--u,1px));padding:calc(6 * var(--u,1px)) calc(4 * var(--u,1px));min-width:0;max-width:100%}
.tile .lbl{
  font-size:calc(13 * var(--u,1px));font-weight:500;letter-spacing:-.005em;line-height:1.25;
  color:rgba(255,255,255,.95);text-shadow:0 1px 2px rgba(10,0,50,.28);
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tile.dim{opacity:.32}
.tile.lift .icon{transform:scale(1.1)}

.icon{
  --a:#7aa7ff;--b:#3a5cff;--fg:#fff;
  position:relative;flex:none;
  width:var(--icon,72px);height:var(--icon,72px);border-radius:23.5%;
  background:linear-gradient(180deg,var(--a),var(--b));
  box-shadow:
    inset 0 1px .5px rgba(255,255,255,.55),
    inset 0 -1px 1px rgba(0,0,0,.08),
    0 1px 2px rgba(0,0,0,.16),
    0 8px 16px -8px rgba(0,0,0,.4);
}
.icon::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 75% at 50% -5%,rgba(255,255,255,.34),rgba(255,255,255,0) 62%);
}
.icon > i{position:absolute;inset:23%;background:var(--fg);-webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat}
.icon.light{--a:#ffffff;--b:#ebebf0}
.icon.light::before{display:none}
.icon.img{background:none;box-shadow:none}
.icon.img::before{display:none}
.icon.img img{width:100%;height:100%;display:block;border-radius:inherit}

/* real app icons keep macOS's transparent margin: the body is 80.5% of the image */
.icon.real{background:none;box-shadow:none}
.icon.real::before{display:none}
.icon.real img{position:absolute;left:-12.15%;top:-12.15%;width:124.3%;height:124.3%;display:block;pointer-events:none}
.icon.folder .minis .icon.real{box-shadow:none;border-radius:0}

.icon.folder{background:rgba(205,205,255,.30);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 8px 16px -10px rgba(0,0,0,.3)}
.icon.folder::before{display:none}
.icon.folder .minis{position:absolute;inset:13%;display:grid;grid-template-columns:repeat(3,1fr);gap:9%;align-content:start}
.icon.folder .minis .icon{width:100%;height:auto;aspect-ratio:1;border-radius:26%;box-shadow:inset 0 .5px 0 rgba(255,255,255,.5)}
.icon.folder .minis .icon::before{display:none}
.icon.folder .minis .icon > i{inset:20%}
/* A folder's own symbol (FolderIconView): white 84% on the plate, about 44% of it, with a
   faint shadow */
.icon.folder > i{inset:26%;background:rgba(255,255,255,.84);filter:drop-shadow(0 calc(var(--icon,72px) * .012) calc(var(--icon,72px) * .018) rgba(0,0,0,.12))}
.icon.sym{background:var(--tint,rgba(160,150,255,.5));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 16px -10px rgba(0,0,0,.3)}
.icon.sym::before{display:none}
.icon.sym > i{inset:28%}
.icon.smart{background:rgba(175,165,255,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 16px -10px rgba(0,0,0,.3)}
.icon.smart::before{display:none}
.icon.smart .disc{position:absolute;inset:27%;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center}
.icon.smart .disc.solid{background:rgba(255,255,255,.92)}
.icon.smart .disc .glyph{font-size:calc(var(--icon,72px) * .22);color:#fff}
.icon.smart .disc.solid .glyph{color:#5a52d6}
.icon.smart .wrench{position:absolute;right:9%;bottom:9%;font-size:calc(var(--icon,72px) * .15);color:rgba(255,255,255,.55)}

.badge-alias{position:absolute;left:-4%;bottom:-4%;width:31%;height:31%;border-radius:50%;background:rgba(40,40,46,.92);display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.badge-alias .glyph{font-size:calc(var(--icon,72px) * .15);color:#fff}
.badge-upd{
  position:absolute;top:-10%;right:-17%;
  display:flex;align-items:center;gap:.25em;
  padding:.18em .62em .18em .5em;border-radius:999px;
  background:#2c7bf6;color:#fff;font:600 calc(var(--icon,72px) * .145)/1.3 var(--font);
  box-shadow:0 1px 3px rgba(0,0,30,.35);white-space:nowrap;
}
.badge-upd .glyph{font-size:.85em}

.capsule{
  display:inline-flex;align-items:center;justify-content:center;
  padding:calc(2 * var(--u,1px)) calc(13 * var(--u,1px));border-radius:999px;
  border:calc(1.5 * var(--u,1px)) solid rgba(255,255,255,.22);
  color:rgba(255,255,255,.4);font:600 calc(13 * var(--u,1px))/1.25 var(--font);letter-spacing:.02em;white-space:nowrap;
}
/* Numbers and dots share 21 pt slots so each number sits over its dot; with
   the numbers showing, ⌘ takes a leading slot and the group centres as one. */
.dots{display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--u,1px));justify-self:center}
.dots .nums,.dots .row{display:flex}
.dots .nums span,.dots .row i{display:flex;justify-content:center;width:calc(21 * var(--u,1px))}
.dots .nums{font:500 calc(13 * var(--u,1px))/calc(14 * var(--u,1px)) var(--font);color:rgba(255,255,255,.42)}
.dots .nums.off{visibility:hidden}
.dots .row i::before{content:"";width:calc(8 * var(--u,1px));height:calc(8 * var(--u,1px));border-radius:50%;background:rgba(255,255,255,.45)}
.dots .row i.on::before{background:#fff}
.dots .row i.cmd::before{content:none}

/* folder panel and sheet, drawn inside the window */
.fpanel{
  position:absolute;left:50%;translate:-50% 0;
  border-radius:var(--radius);padding:calc(22 * var(--u)) calc(26 * var(--u));
  background:rgba(200,200,255,.24);
  -webkit-backdrop-filter:blur(calc(40 * var(--u))) saturate(1.6);backdrop-filter:blur(calc(40 * var(--u))) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 30px 70px -20px rgba(6,0,48,.55);
}
.fpanel h4{margin:0 0 calc(20 * var(--u));text-align:center;font:600 calc(18 * var(--u))/1.2 var(--font)}
.lpw.dimmed .wbody{filter:blur(calc(6 * var(--u)));opacity:.55}
.sheet{
  background:rgba(248,248,252,.95);color:#1d1d22;
  border-radius:calc(22 * var(--u,1px));
  box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 30px 80px -20px rgba(10,0,60,.55);
}

/* ---------- The demo pointer (core.js): an arrow or pointing hand whose tip is its
   origin, dipping to 0.86 about the tip while the button is down ---------- */
.lp-pointer{--pointer:18px;position:absolute;left:0;top:0;z-index:5;pointer-events:none;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.lp-pointer-tip{position:absolute;left:0;top:0;transform-origin:0 0}
.lp-pointer svg{position:absolute;display:block}
.lp-pointer .arrow{width:var(--pointer);left:calc(var(--pointer) * -.094);top:calc(var(--pointer) * -.094)}
.lp-pointer .hand{display:none;width:calc(var(--pointer) * 1.12);left:calc(var(--pointer) * -.403);top:calc(var(--pointer) * -.078)}
.lp-pointer.hand .hand{display:block}
.lp-pointer.hand .arrow{display:none}

/* ---------- Window walks (walk.js): folder panels drawn over the root grid, sized from
   the app (FolderOverlayView, TileView); 1 pt is 1.04u at these icon sizes ---------- */
/* A window with a walk attached keeps its search field and body on layers of their own:
   the walks animate them, and Safari repaints the whole window whenever a layer is made
   or dropped inside it. */
.lpw.wd-live > .lp-search,.lpw.wd-live > .wbody{will-change:transform}
.wd{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none}
.wd-panel{position:absolute;inset:0;border-radius:inherit}
.wd-sheet{position:absolute;left:0;right:0;top:calc(61.5 * var(--u));bottom:0;border-radius:var(--radius);
  background:rgba(22,14,78,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.wd-head{position:absolute;left:0;right:0;top:0;height:calc(66.5 * var(--u));display:flex;align-items:center;padding:0 calc(20.8 * var(--u));
  font:600 calc(19.8 * var(--u))/1 var(--display);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.wd-back,.wd-close{display:grid;place-items:center;flex:none;width:calc(29 * var(--u));height:calc(29 * var(--u));color:rgba(255,255,255,.55)}
.wd-back svg{width:calc(8.5 * var(--u))}
.wd-close svg{width:calc(11 * var(--u))}
.wd-crumbs{display:flex;align-items:center;margin-left:calc(16.6 * var(--u));min-width:0}
.wd-crumbs .crumb{font-weight:400;color:rgba(255,255,255,.55)}
.wd-crumbs .crumb.cur{font-weight:600;color:#fff}
.wd-crumbs .sep{flex:none;width:calc(11.4 * var(--u));margin:0 calc(9.4 * var(--u));color:rgba(255,255,255,.55)}
.wd-root{display:inline-flex;align-items:center;width:0;opacity:0;overflow:hidden;transform-origin:100% 50%}
.wd-root.shown{width:auto;opacity:1}
.wd-close{margin-left:auto}
.wd-grid{position:absolute;inset:0}
.wd-tile{position:absolute;left:0;top:0;width:var(--pitch);display:flex;justify-content:center}
.wd-tile .tile{max-width:none}
.wd-tile .lbl{width:calc(var(--pitch) + 6 * var(--u));font-size:calc(12 * var(--u));white-space:normal;text-align:center;overflow:visible;text-wrap:balance}
.wd-tile .icon{isolation:isolate}
.wd-tile.lifted{opacity:.001}
.wd-dots{position:absolute;left:0;right:0;bottom:calc(18.7 * var(--u));display:flex;justify-content:center;gap:calc(13 * var(--u))}
.wd-dots i{width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;background:rgba(255,255,255,.45)}
.wd-dots i:first-child{background:#fff}
/* Edit mode: a 20 pt × badge off the icon's top-left corner, no fade; a ±1.6° wiggle */
.wd-x{position:absolute;left:calc(-8.3 * var(--u));top:calc(-6.2 * var(--u));width:calc(20.8 * var(--u));height:calc(20.8 * var(--u));border-radius:50%;
  display:none;place-items:center;color:#fff;background:rgba(0,0,0,.55);box-shadow:inset 0 0 0 calc(1.04 * var(--u)) rgba(255,255,255,.7)}
.wd-x svg{width:40%}
.wd.edit .wd-x{display:grid}
.wd.paused,.wd.paused *{animation-play-state:paused!important}
/* Pages for the page walk: stacked in a clip at the Recents column's edge, each a layer of
   its own that a swipe slides; a page not showing waits in place at near-zero opacity */
.wd-pager{position:absolute;top:0;bottom:0;right:0;overflow:hidden;pointer-events:none}
.wd-page{position:absolute;left:0;top:0;bottom:0;will-change:transform,opacity}
.wd-page > *{position:absolute}
.wd-page .wd-icons{left:0;top:0}
.wd-page .lp-grid .tile .lbl{white-space:normal;text-align:center;overflow:visible;text-wrap:balance}
.wd.edit .wd-tile:not(.lifted) .icon{animation:wd-wiggle var(--wq,.56s) infinite}
@keyframes wd-wiggle{0%{rotate:0deg;animation-timing-function:ease-in-out}25%{rotate:1.6deg;animation-timing-function:ease-in-out}75%{rotate:-1.6deg;animation-timing-function:ease-in-out}100%{rotate:0deg}}
/* A drop target's halo: icon + 14 pt, white 2.5 pt with a 6 pt glow, breathing 1↔1.045 */
.wd-halo{position:absolute;inset:calc(-7.3 * var(--u));border-radius:calc(23.5 * var(--u));pointer-events:none;
  box-shadow:inset 0 0 0 calc(2.6 * var(--u)) #fff,0 0 calc(6.2 * var(--u)) rgba(255,255,255,.5);animation:wd-breathe .65s cubic-bezier(.45,0,.55,1) infinite alternate}
.wd-halo.ripple{box-shadow:inset 0 0 0 calc(3.1 * var(--u)) rgba(255,255,255,.8);animation:none}
@keyframes wd-breathe{from{scale:1;opacity:.7}to{scale:1.045;opacity:1}}
/* Selection: white 60% plate 11 pt past the icon around a black 25% band 5 pt past it */
.wd-sel{position:absolute;inset:calc(-11.4 * var(--u));z-index:-1;border-radius:calc(27.6 * var(--u));background:rgba(255,255,255,.6)}
.wd-sel::after{content:"";position:absolute;inset:calc(6.2 * var(--u));border-radius:calc(21.4 * var(--u));background:rgba(0,0,0,.25)}
/* The dragged copy: 0.9× the icon, 92% opaque, black 40% shadow 8 pt below 4 */
.wd-dragged{position:absolute;left:0;top:0;opacity:.92;filter:drop-shadow(0 calc(4.2 * var(--u)) calc(8.3 * var(--u)) rgba(0,0,0,.4))}
.wd-dragged .icon{display:block}
.wd-dragged .wd-x,.wd-dragged .wd-halo{display:none}

/* ---------- Dock folders (dock.js): popups bent by the genie on a canvas under the Dock.
   Tiles are laid out at their largest and scaled from their top left. ---------- */
.lp-dock{position:relative;contain:layout;pointer-events:none;user-select:none}
.lp-dock .dgenie{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.lp-dock .dbar{position:absolute;left:0;top:0;z-index:2;
  background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.16),0 18px 40px -22px rgba(0,0,30,.6)}
.lp-dock .ditems{position:absolute;inset:0;z-index:3}
.lp-dock .dk{position:absolute;left:0;top:0;width:var(--icon);height:var(--icon);transform-origin:0 0}
.lp-dock .dk > .icon{display:block}
.lp-dock .dk.sep{background:rgba(255,255,255,.3);border-radius:1px}
.lp-dock .icon.folder.dark{background:rgba(18,18,30,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 8px 16px -10px rgba(0,0,0,.35)}
.lp-dock .dtip{position:absolute;left:0;top:0;z-index:4;opacity:0;transition:opacity .12s}
.lp-dock .dtip span{position:relative;display:block;padding:5px 12px;border-radius:999px;font:500 14px/1.2 var(--font);color:#fff;white-space:nowrap;
  background:rgba(38,56,150,.62);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.lp-dock .dtip span::after{content:"";position:absolute;left:50%;bottom:-5px;margin-left:-5px;border:5px solid transparent;border-bottom:0;border-top-color:rgba(38,56,150,.62)}

/* ---------- Settings (kit.js, played by settings.js): the Activation pane in dark mode.
   Measured in points off a capture of the app: --u is one point, 1px while the pane has
   room for its 560 pt, smaller down to .78px, below which the rows give up width instead
   of type size. Row heights, insets and colours are the capture's. ---------- */
[data-lp-demo="settings"]{container-type:inline-size}
.lps{
  --u:max(.78px,min(1px,calc(100cqw / 560)));
  --accent:#0a84ff;
  position:relative;box-sizing:border-box;
  width:min(100%,calc(560 * var(--u)));
  padding:calc(15 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u));
  border-radius:calc(16 * var(--u));
  background:#1e1e23;
  box-shadow:0 0 0 1px rgba(0,0,0,.85),inset 0 0 0 var(--u) #353539,0 calc(30 * var(--u)) calc(80 * var(--u)) calc(-24 * var(--u)) rgba(4,0,40,.6);
  color:rgba(255,255,255,.86);
  font:400 calc(13.5 * var(--u))/1.25 var(--font);letter-spacing:-.006em;text-align:left;
  user-select:none;pointer-events:none;
}
.lps-h{margin:0 0 calc(9 * var(--u)) calc(10.5 * var(--u));font-weight:700;color:#ddd}
.lps-g{background:#25252a;border-radius:calc(13 * var(--u))}
.lps-row{position:relative;display:flex;align-items:center;height:calc(40 * var(--u));padding-left:calc(42.5 * var(--u))}
/* Rows 2-4 carry the hairline above them: 36.5, 40 and 37.5 pt of row, plus 1. */
.lps-f4{height:calc(37.5 * var(--u))}
.lps-pinch{height:calc(41 * var(--u))}
.lps-corner{height:calc(38.5 * var(--u))}
.lps-row + .lps-row::before{content:"";position:absolute;left:calc(10 * var(--u));right:calc(10 * var(--u));top:0;height:var(--u);background:#2f2f34}
.lps-i{position:absolute;left:calc(21 * var(--u));top:50%;translate:-50% -50%;color:rgba(255,255,255,.55)}
.lps-hotkey .lps-i{font-size:calc(19.7 * var(--u))}
.lps-f4 .lps-i{font-size:calc(14.8 * var(--u))}
.lps-pinch .lps-i{font-size:calc(17.8 * var(--u))}
.lps-corner .lps-i{font-size:calc(18.5 * var(--u))}
.lps-t{flex:1;min-width:0;white-space:nowrap}
/* The shortcut recorder (KeyboardShortcuts): the shortcut centred left of its clear
   button; empty, a placeholder centred across it; recording, the focus ring. */
.lps-rec{position:relative;flex:none;width:calc(132 * var(--u));height:calc(22 * var(--u));margin-right:calc(9 * var(--u));border-radius:calc(11 * var(--u));
  background:#181819;box-shadow:inset 0 0 0 var(--u) #2f2f34;transition:box-shadow .2s ease-out}
.lps-rec.focus{box-shadow:inset 0 0 0 var(--u) #2f2f34,0 0 0 calc(3.5 * var(--u)) rgba(10,132,255,.62)}
.lps-rv,.lps-rp{position:absolute;inset:0;display:grid;place-items:center;white-space:nowrap}
.lps-rv{right:calc(31.5 * var(--u))}
.lps-rp{color:rgba(255,255,255,.3)}
.lps-rx{position:absolute;right:calc(6 * var(--u));top:50%;translate:0 -50%;font-size:calc(16 * var(--u));color:rgba(255,255,255,.48)}
.lps-rec.empty .lps-rv,.lps-rec.empty .lps-rx{visibility:hidden}
/* The switch: a pill knob that slides over and lights the track with the accent. */
.lps-sw{position:relative;flex:none;width:calc(36 * var(--u));height:calc(16 * var(--u));margin-right:calc(10 * var(--u));border-radius:calc(8 * var(--u));
  background:#39393e;transition:background-color .2s ease-out}
.lps-sw i{position:absolute;left:calc(1.5 * var(--u));top:calc(2 * var(--u));width:calc(21 * var(--u));height:calc(12 * var(--u));border-radius:calc(6 * var(--u));
  background:#fff;box-shadow:0 calc(.5 * var(--u)) calc(1.5 * var(--u)) rgba(0,0,0,.3);transition:translate .26s cubic-bezier(.3,1.25,.5,1)}
.lps-sw.on{background:var(--accent)}
.lps-sw.on i{translate:calc(12 * var(--u)) 0}
/* Pop-up and pull-down buttons: the value, then a round chevron button. */
.lps-pop{display:flex;align-items:center;gap:calc(12.5 * var(--u));margin-right:calc(13.5 * var(--u));white-space:nowrap}
.lps-c{display:grid;place-items:center;width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;background:#35353a;color:#e0e0e1}
.lps-pinch .lps-c .glyph{font-size:calc(12.9 * var(--u))}
.lps-corner .lps-c .glyph{font-size:calc(8.6 * var(--u))}
.lps-rv,.lps-v{transition:opacity .18s ease-out}
.lps.fade .lps-rv,.lps.fade .lps-v{opacity:0}
.lps-f{margin:calc(10 * var(--u)) 0 0 calc(10.5 * var(--u));font-size:calc(11.5 * var(--u));line-height:1.3;color:rgba(255,255,255,.5)}
/* Menus: where they open is settings.js's to say; the checked item's text lines up with
   the button's. The item under the pointer takes the accent; a chosen one blinks. */
.lps-menu{position:absolute;left:0;top:0;z-index:4;padding:calc(5 * var(--u));border-radius:calc(11 * var(--u));white-space:nowrap;
  background:rgba(40,40,46,.86);-webkit-backdrop-filter:blur(calc(24 * var(--u))) saturate(1.6);backdrop-filter:blur(calc(24 * var(--u))) saturate(1.6);
  box-shadow:0 0 0 .5px rgba(0,0,0,.7),inset 0 0 0 var(--u) rgba(255,255,255,.13),0 calc(12 * var(--u)) calc(32 * var(--u)) rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility 0s .2s}
.lps-menu.open{opacity:1;visibility:visible;transition:opacity .08s ease-out}
.lps-mi{position:relative;display:block;height:calc(22 * var(--u));line-height:calc(22 * var(--u));padding:0 calc(14 * var(--u)) 0 calc(24 * var(--u));border-radius:calc(6 * var(--u));color:rgba(255,255,255,.88)}
.lps-mi .glyph{position:absolute;left:calc(8 * var(--u));top:50%;translate:0 -50%;font-size:calc(11.5 * var(--u));visibility:hidden}
.lps-mi.on .glyph{visibility:visible}
.lps-mi.hl{background:var(--accent);color:#fff}
.lps-mi.off{color:rgba(255,255,255,.3)}
.lps-md{display:block;height:var(--u);margin:calc(5 * var(--u)) calc(10 * var(--u));background:rgba(255,255,255,.12)}
/* A section's title, and the arrow a menu shows where it stops short of its items. */
.lps-mh{display:block;height:calc(22 * var(--u));line-height:calc(22 * var(--u));padding:0 calc(14 * var(--u)) 0 calc(10 * var(--u));font-size:calc(11.5 * var(--u));font-weight:700;color:rgba(255,255,255,.45)}
.lps-ms{display:none}
.lps-menu.clip{overflow:hidden}
.lps-menu.clip .lps-ms{position:absolute;left:0;right:0;bottom:0;display:grid;place-items:center;height:calc(18 * var(--u));border-radius:0 0 calc(11 * var(--u)) calc(11 * var(--u));background:rgb(40,40,46)}
.lps-ms .glyph{font-size:calc(8 * var(--u));color:rgba(255,255,255,.75)}

/* ---------- Smart Folder editor (kit.js, played by smart.js): the Rules section in dark
   mode, in the app's points from SmartFolderEditorView (780 pt wide at most) and colours
   from a capture. --u is one point, 1px while the element has room for the panel; the
   whole panel shrinks with it below that, down to .6px, and on a screen narrower still it
   runs off the right edge, fading. Its menus are the Settings pane's. ---------- */
[data-lp-demo="smart"]{container-type:inline-size}
@container (max-width:467px){.lpf,[data-lp-demo="smart"] > .lp-still{-webkit-mask:linear-gradient(90deg,#000 calc(100cqw - 40px),transparent 100cqw);mask:linear-gradient(90deg,#000 calc(100cqw - 40px),transparent 100cqw)}}
.lpf{
  --u:max(.6px,min(1px,calc(100cqw / 780)));
  --accent:#397bf7;
  position:relative;width:calc(780 * var(--u));border-radius:calc(28 * var(--u));
  background:#1e1e1e;
  box-shadow:0 0 0 1px rgba(0,0,0,.85),inset 0 0 0 var(--u) rgba(255,255,255,.1),0 calc(30 * var(--u)) calc(80 * var(--u)) calc(-24 * var(--u)) rgba(4,0,40,.6);
  color:#dfdfdf;font:500 calc(13 * var(--u))/1.25 var(--font);letter-spacing:-.006em;text-align:left;white-space:nowrap;
  user-select:none;pointer-events:none;
}
.lpf .glyph{flex:none}
/* The segmented control: grey, the selected segment in the accent. */
.lpf-seg{display:flex;height:calc(24 * var(--u));padding:calc(1 * var(--u));box-sizing:border-box;border-radius:calc(7 * var(--u));background:#2f2f2f}
.lpf-seg{width:calc(146 * var(--u))}
.lpf-seg span{flex:1;display:grid;place-items:center;border-radius:calc(6 * var(--u));transition:background-color .15s ease-out,color .15s ease-out}
.lpf-seg .on{background:var(--accent);color:#fff}
/* The toolbar: Match and its control (the Templates menu left off). */
.lpf-tb{display:flex;align-items:center;gap:calc(10 * var(--u));padding:calc(22 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u))}
.lpf-match{font-size:calc(12.5 * var(--u));color:rgba(255,255,255,.5)}
/* Rules: and/or, field, comparison, value, status, remove; a new one slides down into place. */
.lpf-rules{height:calc(132 * var(--u));padding:calc(8 * var(--u)) calc(24 * var(--u));box-sizing:border-box}
.lpf-rule{display:flex;align-items:center;gap:calc(8 * var(--u));height:calc(34 * var(--u))}
/* The second rule is laid out from the start and only fades and slides in, Add Rule moving
   down its 36 pt: by transforms alone, where growing its height had the pane laid out again
   on every frame. */
.lpf-rule[data-rule="1"]{margin-top:calc(2 * var(--u));opacity:0;translate:0 calc(-8 * var(--u));transition:opacity .2s ease-out,translate .3s cubic-bezier(.3,1,.4,1)}
.lpf.two .lpf-rule[data-rule="1"]{opacity:1;translate:none}
.lpf-cj{flex:none;width:calc(30 * var(--u));text-align:right;font-size:calc(12 * var(--u));color:rgba(255,255,255,.28);transition:opacity .18s ease-out}
.lpf.swap .lpf-cj{opacity:0}
.lpf-pop{flex:none;display:flex;align-items:center;justify-content:space-between;height:calc(24 * var(--u));padding:0 calc(8 * var(--u)) 0 calc(12 * var(--u));box-sizing:border-box;border-radius:calc(6 * var(--u));background:#2f2f2f}
.lpf-pop .glyph{font-size:calc(11.5 * var(--u));color:rgba(255,255,255,.75)}
.lpf-f{width:calc(164 * var(--u))}
.lpf-o{width:calc(144 * var(--u))}
.lpf-unit{width:calc(93 * var(--u))}
.lpf-val{flex:1;display:flex;align-items:center;gap:calc(21 * var(--u));min-width:0}
.lpf-tf{position:relative;display:flex;align-items:center;height:calc(24 * var(--u));padding:0 calc(7 * var(--u));box-sizing:border-box;border-radius:calc(6 * var(--u));
  background:#171717;box-shadow:inset 0 0 0 var(--u) #292929;transition:box-shadow .2s ease-out}
.lpf-num{flex:none;width:calc(73 * var(--u))}
.lpf-text{flex:1;max-width:calc(250 * var(--u))}
.lpf-tf.focus{box-shadow:inset 0 0 0 var(--u) #292929,0 0 0 calc(3.5 * var(--u)) rgba(57,123,247,.62)}
.lpf-ph{color:rgba(255,255,255,.3)}
.lpf-tv:not(:empty) + .lpf-ph{display:none}
.lpf-tf.focus .lpf-ph::before,.lpf-tf.focus .lpf-tv:not(:empty)::after{content:"";display:inline-block;width:var(--u);height:calc(15 * var(--u));margin:0 calc(.5 * var(--u));vertical-align:calc(-3 * var(--u));background:#dfdfdf;animation:lpf-caret 1.06s steps(1) infinite}
@keyframes lpf-caret{50%{opacity:0}}
.lpf-st{flex:none;display:grid;place-items:center;width:calc(18 * var(--u))}
.lpf-st .glyph{font-size:calc(15 * var(--u));color:#f09748}
.lpf-rm{margin:0 calc(4 * var(--u));font-size:calc(14 * var(--u));color:rgba(255,255,255,.2)}
.lpf-add{display:flex;align-items:center;gap:calc(7 * var(--u));margin:calc(8 * var(--u)) 0 0 calc(38 * var(--u));height:calc(18 * var(--u));
  translate:0 calc(-36 * var(--u));transition:translate .3s cubic-bezier(.3,1,.4,1)}
.lpf.two .lpf-add{translate:none}
.lpf-add .glyph{font-size:calc(12 * var(--u))}
/* The shelf of matching apps: icons come and go with a spring. */
.lpf-shelf{padding:calc(12 * var(--u)) 0 calc(14 * var(--u));border-radius:0 0 calc(28 * var(--u)) calc(28 * var(--u));
  background:rgba(255,255,255,.035);box-shadow:inset 0 var(--u) 0 rgba(255,255,255,.08)}
.lpf-sh{display:flex;align-items:center;justify-content:space-between;padding:0 calc(24 * var(--u));font-size:calc(10.5 * var(--u));font-weight:800;letter-spacing:calc(1.25 * var(--u));color:rgba(255,255,255,.5)}
.lpf-all{font-size:calc(12 * var(--u));font-weight:500;letter-spacing:0;color:#dfdfdf}
.lpf-apps{position:relative;display:flex;padding:calc(10 * var(--u)) calc(26 * var(--u)) 0;overflow:hidden;--icon:calc(40 * var(--u))}
/* The shelf's springs are smart.js's, by transforms alone: one going out leaves the row at
   once (.out) and shrinks where it was, out of the flow (.gone). */
.lpf-app{flex:none;display:grid;justify-items:center;gap:calc(5 * var(--u));width:calc(64 * var(--u));margin-right:calc(10 * var(--u))}
.lpf-app.out{display:none}
.lpf-app.out.gone{display:grid;position:absolute}
.lpf-app .icon{box-shadow:none}
.lpf-an{max-width:calc(64 * var(--u));overflow:hidden;text-overflow:ellipsis;font-size:calc(10.5 * var(--u));color:rgba(255,255,255,.55)}
.lpf.fade .lpf-v,.lpf.fade .lpf-tv,.lpf.fade .lpf-cj{opacity:0;transition:opacity .2s ease-out}

/* ---------- Multi-select (kit.js, played by select.js): a row of tiles on the wallpaper,
   eight to a row and fewer on narrow screens, sized from the element's width; the tiles
   past the end wait there, faded out by the row's edge. Selection, edit mode and drop
   targets are the window walks' (above); the band, the dragged pile and its count are the
   app's (PagedGridView: SelectionMarqueeView, DragGhostLayer, DragCountBadge). ---------- */
[data-lp-demo="select"]{container-type:inline-size}
.lpx{--cols:8;--pitch:calc(100cqw / var(--cols));--icon:min(60px,calc(var(--pitch) * .62));--u:calc(var(--icon) / 72);
  position:relative;height:calc(var(--icon) + 75 * var(--u) + 16px);overflow-x:clip;pointer-events:none;user-select:none}
@container (max-width:760px){.lpx{--cols:7}}
@container (max-width:620px){.lpx{--cols:6}}
@container (max-width:500px){.lpx{--cols:5}}
.lpx-row{position:absolute;inset:0;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 16px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 16px),transparent)}
.lpx-t{position:absolute;left:0;top:calc(22 * var(--u));width:var(--pitch);display:flex;justify-content:center;transform:translateX(calc(var(--i) * var(--pitch)))}
.lpx .tile{max-width:none}
.lpx .tile .lbl{max-width:calc(var(--pitch) - 6px);font-size:max(11px,calc(13 * var(--u)))}
.lpx .icon{isolation:isolate}
.lpx.edit .wd-x{display:grid}
.lpx.edit .lpx-t .icon{animation:wd-wiggle var(--wq,.56s) infinite}
.lpx.paused,.lpx.paused *{animation-play-state:paused!important}
/* The band: white 14% inside a white 68% hairline */
.lpx-band{position:absolute;left:0;top:0;z-index:2;border-radius:calc(11 * var(--u));background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.68);visibility:hidden}
.lpx-band.on{visibility:visible}
/* The pile rides the pointer: every icon at 70%, the grabbed one on top, the count on its
   top-right corner (accent capsule, white 1.5 pt edge, 13 pt bold) */
.lpx-pile{position:absolute;left:0;top:0;z-index:3}
.lpx-ghost{position:absolute;left:calc(var(--icon) / -2);top:calc(var(--icon) / -2);filter:drop-shadow(0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.4))}
.lpx-ghost .icon{display:block}
.lpx-count{position:absolute;left:0;top:0;z-index:2;min-width:calc(22 * var(--u));height:calc(22 * var(--u));padding:0 calc(6 * var(--u));box-sizing:border-box;translate:-50% -50%;
  border-radius:999px;background:#0a84ff;box-shadow:0 0 0 calc(.75 * var(--u)) #fff,inset 0 0 0 calc(.75 * var(--u)) #fff,0 1px 3px rgba(0,0,0,.35);
  font:700 calc(13 * var(--u))/calc(22 * var(--u)) var(--font,-apple-system,system-ui,sans-serif);color:#fff;text-align:center;font-variant-numeric:tabular-nums}

/* ---------- A window's pages side by side (kit.js, `pages`): a clip as wide as the window,
   with room above and below for the selection plate; the first page shows ---------- */
.lpw .lp-pager{grid-row:1;position:relative;overflow:hidden;margin:calc(-14 * var(--u)) calc(-6 * var(--u));padding:calc(14 * var(--u)) calc(6 * var(--u))}
.lpw .lp-strip{display:flex;will-change:transform}
.lpw .lp-strip > .lp-grid{flex:0 0 100%;position:relative}

/* ---------- Keyboard (kit.js, played by keys.js): a window of three pages, six apps to a
   row, sized from its element's width, and under it the lane where each key pressed shows
   as a capsule. Selection is the walks' plate. ---------- */
[data-lp-demo="keys"]{container-type:inline-size}
.lpk,.lpk .lpw{--icon:min(64px,calc(100cqw / 11.33))}
.lpk{--u:calc(var(--icon) / 72);display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;pointer-events:none;user-select:none}
.lpk .icon{isolation:isolate}
/* A grouped tile shrinks about its icon's centre; one gone into its folder stays laid out. */
.lpk .lp-grid > .tile{transform-origin:50% calc(6 * var(--u) + var(--icon) / 2)}
.lpk .lp-grid > .tile.lpk-gone{visibility:hidden}
/* Hold ⌘: the numbers show over the dots, ⌘ in a slot of its own before them, and the row
   centres again (PageIndicator: ease-out 0.15 s). */
.lpk .dots{translate:calc(-10.5 * var(--u)) 0;transition:translate .15s ease-out}
.lpk .dots .nums{opacity:0;transition:opacity .15s ease-out}
.lpk.cmd .dots{translate:none}
.lpk.cmd .dots .nums{opacity:1}
.lpk .dots .row i::before{transition:background-color .15s ease-out}
/* The new folder over its slot while it forms (FolderFormationBurstView), and the ring of
   its plate's shape collapsing onto it: white 50%, 2.5 pt. */
.lpk-fold{position:absolute;inset:0;z-index:1;display:flex;justify-content:center;align-items:flex-start;visibility:hidden}
.lpk-fold.on{visibility:visible}
.lpk-fold .tile{max-width:100%}
.lpk-ring{position:absolute;left:50%;top:calc(6 * var(--u));width:var(--icon);height:var(--icon);margin-left:calc(var(--icon) / -2);border-radius:23.5%;
  box-shadow:inset 0 0 0 calc(2.6 * var(--u)) rgba(255,255,255,.5);opacity:0;pointer-events:none}
.lpk .lp-grid > .tile{position:relative;z-index:2}
/* The undo capsule (UndoRedoFeedbackHUD): 30 pt, the arrow then "Undo Group Tiles" in
   12.5 pt semibold, ultra-thin material inside a white 40% → 14% edge, 48 pt above the
   window's foot; a redo's arrow turns the other way. */
.lpk-hud{position:absolute;left:50%;bottom:calc(50 * var(--u));z-index:3;display:flex;align-items:center;gap:calc(7.3 * var(--u));
  height:calc(31 * var(--u));padding:0 calc(13.5 * var(--u));box-sizing:border-box;translate:-50% 0;border-radius:999px;
  border:var(--u) solid transparent;
  background:linear-gradient(rgba(150,140,230,.3),rgba(150,140,230,.3)) padding-box,linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.14)) border-box;
  -webkit-backdrop-filter:blur(calc(20 * var(--u))) saturate(1.6);backdrop-filter:blur(calc(20 * var(--u))) saturate(1.6);
  box-shadow:0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.3);
  font:600 calc(13 * var(--u))/1 var(--font);color:rgba(255,255,255,.92);white-space:nowrap;
  opacity:0;transform-origin:50% 100%;will-change:transform,opacity}
.lpk-hud-i{display:grid;font-size:calc(12.5 * var(--u))}
.lpk-hud.redo .lpk-hud-i .glyph{scale:-1 1}
/* The lane: each key pressed shows as a capsule, the newest at the right, older ones fading
   off to the left; a capsule lights while its key is down. Capsules are not blurred: a
   backdrop blur under each one cost Safari ~130 MB and redrew the background behind it on
   every frame it moved. */
.lpk-lane{position:relative;align-self:stretch;height:calc(46 * var(--u));margin-top:calc(28 * var(--u))}
.lpk-cap{position:absolute;left:50%;top:0;opacity:0;will-change:transform,opacity;
  transition:translate .48s cubic-bezier(.22,1,.36,1),opacity .32s ease-out}
.lpk-in{position:relative;display:flex;align-items:center;gap:calc(6 * var(--u));height:calc(46 * var(--u));padding:0 calc(17 * var(--u));box-sizing:border-box;
  border-radius:999px;border:var(--u) solid transparent;
  background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) padding-box,linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.14)) border-box;
  box-shadow:0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(4,0,40,.28);
  font:600 max(12px,calc(21 * var(--u)))/1 var(--font);color:rgba(255,255,255,.94);white-space:nowrap;
  transition:scale .12s ease-out}
.lpk-in::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.2);opacity:0;transition:opacity .16s ease-out}
.lpk-in b{font-weight:inherit;min-width:.62em;text-align:center}
.lpk-in b.w{font-size:.8em;letter-spacing:.02em}
.lpk-cap.down .lpk-in{scale:.94}
.lpk-cap.down .lpk-in::after{opacity:1;transition-duration:.04s}

/* ---------- Sprite cells, written by script/build_glyph_sprite.sh ---------- */
/* glyph cells: begin */
.sg.sg{-webkit-mask:url(glyphs.webp) var(--sg)/1187.5% 1187.5% no-repeat;mask:url(glyphs.webp) var(--sg)/1187.5% 1187.5% no-repeat}
.g-alias{--sg:0.8621% 0.8621%}
.g-antenna{--sg:11.7816% 0.8621%}
.g-arrowdown{--sg:22.7011% 0.8621%}
.g-arrowright{--sg:33.6207% 0.8621%}
.g-bag{--sg:44.5402% 0.8621%}
.g-bolt{--sg:55.4598% 0.8621%}
.g-book{--sg:66.3793% 0.8621%}
.g-branch{--sg:77.2989% 0.8621%}
.g-brush{--sg:88.2184% 0.8621%}
.g-calendar{--sg:99.1379% 0.8621%}
.g-cart{--sg:0.8621% 11.7816%}
.g-chart{--sg:11.7816% 11.7816%}
.g-chat{--sg:22.7011% 11.7816%}
.g-check{--sg:33.6207% 11.7816%}
.g-checklist{--sg:44.5402% 11.7816%}
.g-chevdown{--sg:55.4598% 11.7816%}
.g-clipboard{--sg:66.3793% 11.7816%}
.g-clock{--sg:77.2989% 11.7816%}
.g-cloudsun{--sg:88.2184% 11.7816%}
.g-code{--sg:99.1379% 11.7816%}
.g-command{--sg:0.8621% 22.7011%}
.g-compass{--sg:11.7816% 22.7011%}
.g-corner{--sg:22.7011% 22.7011%}
.g-cylinder{--sg:33.6207% 22.7011%}
.g-disk{--sg:44.5402% 22.7011%}
.g-doc{--sg:55.4598% 22.7011%}
.g-dock{--sg:66.3793% 22.7011%}
.g-download{--sg:77.2989% 22.7011%}
.g-envelope{--sg:88.2184% 22.7011%}
.g-fade{--sg:99.1379% 22.7011%}
.g-film{--sg:0.8621% 33.6207%}
.g-fkey{--sg:11.7816% 33.6207%}
.g-flower{--sg:22.7011% 33.6207%}
.g-folder{--sg:33.6207% 33.6207%}
.g-fullscreen{--sg:44.5402% 33.6207%}
.g-gamecontroller{--sg:55.4598% 33.6207%}
.g-gear{--sg:66.3793% 33.6207%}
.g-gearline{--sg:77.2989% 33.6207%}
.g-globe{--sg:88.2184% 33.6207%}
.g-grid{--sg:99.1379% 33.6207%}
.g-hammer{--sg:0.8621% 44.5402%}
.g-headphones{--sg:11.7816% 44.5402%}
.g-hidden{--sg:22.7011% 44.5402%}
.g-house{--sg:33.6207% 44.5402%}
.g-info{--sg:44.5402% 44.5402%}
.g-key{--sg:55.4598% 44.5402%}
.g-keyboard{--sg:66.3793% 44.5402%}
.g-leaf{--sg:77.2989% 44.5402%}
.g-lingo{--sg:88.2184% 44.5402%}
.g-lock{--sg:99.1379% 44.5402%}
.g-map{--sg:0.8621% 55.4598%}
.g-materialize{--sg:11.7816% 55.4598%}
.g-mcircle{--sg:22.7011% 55.4598%}
.g-menubar{--sg:33.6207% 55.4598%}
.g-mic{--sg:44.5402% 55.4598%}
.g-moon{--sg:55.4598% 55.4598%}
.g-music{--sg:66.3793% 55.4598%}
.g-note{--sg:77.2989% 55.4598%}
.g-pencil{--sg:88.2184% 55.4598%}
.g-person{--sg:99.1379% 55.4598%}
.g-photo{--sg:0.8621% 66.3793%}
.g-pinch{--sg:11.7816% 66.3793%}
.g-plus{--sg:22.7011% 66.3793%}
.g-prism{--sg:33.6207% 66.3793%}
.g-pulse{--sg:44.5402% 66.3793%}
.g-qcircle{--sg:55.4598% 66.3793%}
.g-run{--sg:66.3793% 66.3793%}
.g-scissors{--sg:77.2989% 66.3793%}
.g-search{--sg:88.2184% 66.3793%}
.g-set-corner{--sg:99.1379% 66.3793%}
.g-set-fkey{--sg:0.8621% 77.2989%}
.g-set-keyboard{--sg:11.7816% 77.2989%}
.g-set-pinch{--sg:22.7011% 77.2989%}
.g-shield{--sg:33.6207% 77.2989%}
.g-shockwave{--sg:44.5402% 77.2989%}
.g-shutter{--sg:55.4598% 77.2989%}
.g-sparkle{--sg:66.3793% 77.2989%}
.g-sparkles{--sg:77.2989% 77.2989%}
.g-stack{--sg:88.2184% 77.2989%}
.g-sums{--sg:99.1379% 77.2989%}
.g-text{--sg:0.8621% 88.2184%}
.g-textformat{--sg:11.7816% 88.2184%}
.g-trash{--sg:22.7011% 88.2184%}
.g-trend{--sg:33.6207% 88.2184%}
.g-tv{--sg:44.5402% 88.2184%}
.g-twirl{--sg:55.4598% 88.2184%}
.g-undo{--sg:66.3793% 88.2184%}
.g-updown{--sg:77.2989% 88.2184%}
.g-video{--sg:88.2184% 88.2184%}
.g-viewfinder{--sg:99.1379% 88.2184%}
.g-wand{--sg:0.8621% 99.1379%}
.g-warp{--sg:11.7816% 99.1379%}
.g-window{--sg:22.7011% 99.1379%}
.g-wrench{--sg:33.6207% 99.1379%}
.g-xcircle{--sg:44.5402% 99.1379%}
.g-xmark{--sg:55.4598% 99.1379%}
/* glyph cells: end */