/* Arcful overlay — styles, generated. Do not edit by hand.
   Source: arcful-web/apps/site/src/pages/index.astro
   Revision: icon-ink-normalisation @ b0503791eea0a1f160bde5c0d596138e9404ab47
   Pulled: 2026-08-03 by scripts/pull-arcful-ring.mjs
   Re-run that script to refresh. Hand edits will be overwritten. */

.stage{position:fixed;inset:0;overflow:hidden}
/* ---- drifting icon field / summoned rings ---- */
#field{position:absolute;inset:0}
/* Summoned: the drifting field stays BEHIND the disc so the glass actually
   frosts something — those icons are the only real content in the disc's
   backdrop (everything else back there is a flat gradient). Only the orbs
   bound to the ring are promoted above it. #field must keep z-index:auto here:
   giving it any z-index creates a stacking context and would trap .picked
   below the disc along with the rest. */
.stage.summoned .orb.picked{z-index:6}
.orb{position:absolute;left:0;top:0;will-change:transform;pointer-events:none;opacity:0;
  transition:filter .5s ease,opacity .5s ease}
.orb .glyph{display:block;width:var(--s);height:var(--s);border-radius:22.5%;
  transition:width .3s ease,height .3s ease,transform .15s ease}
.orb img.glyph{filter:drop-shadow(0 1px 7px rgb(var(--halo,200 205 215) / .56))}
/* command items render as a dark mono tile instead of an app icon */
.orb .cmd-tile{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,#2a2d34,#15171b);color:#fff;font-size:15px;line-height:1;
  font-family:var(--mono);font-weight:600;letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 7px rgb(var(--halo,142 142 147) / .56)}
/* MCP tool items render as a dark tile carrying the hexagonal-node mini-icon */
.orb .mcp-tile{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,#2a2d34,#15171b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 7px rgb(var(--halo,142 142 147) / .56)}
.orb .mcp-tile svg{width:55%;height:55%;display:block;color:#fff}
.orb.on .mcp-tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 9px rgb(var(--halo,142 142 147) / .66)}
/* ringed tiles snap to the native 32pt (AppConstants.defaultIconSize) */
.stage.summoned .orb.picked .glyph{width:32px;height:32px}
/* .cmd-tile and .mcp-tile are drawn, not imaged — their dark rounded-square
   substrate fills the WHOLE 32px box, while a real app icon's ink sits
   inside transparent padding and only fills ~26.5px of that same box
   (82.8% coverage, matched across the ring's other 28 icons above). At
   32px the tile substrate reads ~23% wider than an icon's visible ink.
   Shrinking just these two to 26px matches their visible extent to the
   icon set instead of standing out as oversized. Higher specificity than
   the .glyph rule above (adds .cmd-tile/.mcp-tile) so it wins regardless
   of source order. */
.stage.summoned .orb.picked .cmd-tile.glyph,
.stage.summoned .orb.picked .mcp-tile.glyph{width:26px;height:26px}
.stage.summoned .orb.picked .cmd-tile{font-size:11px}
/* Clean Crossings hover: hovered ×1.15, siblings dim to .55 — same as native */
.orb.on .glyph{transform:scale(1.15)}
.orb.on img.glyph{filter:drop-shadow(0 2px 9px rgb(var(--halo,200 205 215) / .66))}
.orb.on .cmd-tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 9px rgb(var(--halo,142 142 147) / .66)}
.stage.summoned .orb.picked.is-dim{opacity:.45}
.orb.yoink{filter:none!important;opacity:1!important}
.stage.summoned .orb.picked{filter:none;opacity:1}
/* Dim floor for unpicked orbs. Keep this well clear of zero: the .day circle
   is pure white across ~45% of the viewport, so fading content toward it is
   optically the same as painting a white wash over the page. Native dims
   non-targeted icons only to .55 (AppConstants.Glass.dimmedIconOpacity) and
   never touches the desktop at all. */
.stage.summoned .orb:not(.picked){opacity:.5}
/* Orbs fully swallowed by the disc go back to full strength — they're hidden
   behind the glass, so this is invisible from outside, but it gives the
   backdrop-filter real content to frost instead of a flat gradient. */
.stage.summoned .orb.under-glass:not(.picked){opacity:1}
/* ---- adaptive glass disc — it reads its backdrop across the terminator ---- */
/* Tones are matched against the native overlay, not eyeballed: the numbers
   below reproduce the macOS disc's measured luminance profile over a dark
   backdrop — ~48/255 across the plateau, lifting to ~65 at the hub and easing
   to ~44 at the rim. AppConstants.Glass is the upstream source of truth. */
.disc{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:5;
  --groove:rgba(255,255,255,.25);--glass:rgba(140,142,145,.23);--pill-glass:rgba(30,32,36,.74);
  --dome-lift:rgba(255,255,255,.085);--dome-edge:rgba(0,0,0,.065);
  --dome-lift-end:20%;--dome-mid:52%;--dome-edge-start:88%;
  --rim-top:rgba(255,255,255,.16);--rim-bot:rgba(255,255,255,.10);--rim-edge:rgba(255,255,255,.09);
  --disc-shadow:rgba(0,0,0,.45);
  --hub-a:rgba(255,255,255,.6);--hub-b:rgba(255,255,255,.28);--hub-line:rgba(255,255,255,.4)}
.disc .glass{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;
  background:var(--glass);backdrop-filter:blur(11px) saturate(1.08);
  /* Rim light at the top edge, a faint full-perimeter edge, and a deep drop —
     the disc reads as a solid object catching light rather than a flat plate.
     Mirrors the native overlay's dome/rim treatment. */
  box-shadow:
    inset 0 1px 0 var(--rim-top),
    inset 0 -1px 0 var(--rim-bot),
    inset 0 0 0 1px var(--rim-edge),
    0 6px 44px var(--disc-shadow);
  transition:transform .38s cubic-bezier(.2,1.4,.3,1),opacity .25s ease}
/* Dome shading: a radially symmetric curved-lens read — faint lift held across
   the hub, easing to nothing by mid-disc, then a soft darkening in the last
   band. Matches GlassDiscLayers.domeShading; deliberately NOT a top-to-bottom
   gradient, since the native dome is symmetric and only the rim is directional. */
.disc .glass::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle closest-side at 50% 50%,
    var(--dome-lift) 0%,
    var(--dome-lift) var(--dome-lift-end),
    rgba(255,255,255,0) var(--dome-mid),
    rgba(255,255,255,0) var(--dome-edge-start),
    var(--dome-edge) 100%)}
.disc .groove{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%);border:.5px solid var(--groove);opacity:0;transition:opacity .3s ease}
.stage.summoned .disc .glass{transform:translate(-50%,-50%) scale(1);opacity:1}
.stage.summoned .disc .groove{opacity:1}
.disc{--arc-tint:224 245 255}
.disc .arc-trail{position:absolute;left:0;top:0;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;opacity:0}
.disc .arc-trail path{fill:none;stroke:rgb(var(--arc-tint));stroke-linecap:round;filter:drop-shadow(0 0 5px rgb(var(--arc-tint) / .5))}
.disc .pill{position:absolute;left:0;top:0;min-height:44px;border-radius:22px;display:flex;align-items:center;gap:9px;padding:0 16px 0 10px;transform:translate(-50%,var(--pill-y,-260px));background:var(--pill-glass);backdrop-filter:blur(48px) saturate(1.5);box-shadow:inset 0 1px 1px rgb(255 255 255 / .25),0 8px 12px rgb(0 0 0 / .30);opacity:0;transition:opacity .1s;white-space:nowrap;--label:rgb(255 255 255 / .94);--sub:rgb(235 235 245 / .55)}
.disc .pill.show{opacity:1}
.disc .pill img{width:24px;height:24px;display:block;border-radius:22.5%;filter:drop-shadow(0 1px 4px rgb(var(--halo,200 205 215) / .5))}
.disc .pill .cmd-mini{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:22.5%;background:linear-gradient(155deg,#2a2d34,#15171b);font-family:var(--mono);font-weight:600;font-size:9px;color:#fff}
.disc .pill .mcp-mini{width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:22.5%;background:linear-gradient(155deg,#2a2d34,#15171b);color:#fff}
.disc .pill .mcp-mini svg{width:55%;height:55%;display:block}
.disc .pill-text{display:flex;flex-direction:column;justify-content:center}
.disc .pill-label{font-size:13px;font-weight:500;color:var(--label);line-height:1.2}
.disc .pill.two .pill-label{font-weight:600}
.disc .pill-sub{font-size:11px;color:var(--sub);line-height:1.15;margin-top:1px}
.disc .pill-sub:empty{display:none}
.hub{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:linear-gradient(to bottom,var(--hub-a),var(--hub-b));border:.5px solid var(--hub-line);
  transition:transform .3s cubic-bezier(.2,1.4,.3,1)}
.stage.summoned .hub{transform:translate(-50%,-50%) scale(1)}
/* Explicit radius is load-bearing: an unsized radial-gradient defaults to
   farthest-corner, so "transparent 40%" scaled with viewport size and threw a
   ~500px white core over a third of the screen on every release. */
.flash{position:absolute;inset:0;background:radial-gradient(circle 240px at var(--fx) var(--fy),#fff,transparent);opacity:0;pointer-events:none;z-index:8}
/* ---- the yoink payoff: a fake macOS window ---- */
.fakewin{position:absolute;width:400px;min-height:170px;border-radius:12px;z-index:4;
  background:rgba(248,248,250,.92);backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(0,0,0,.08);box-shadow:0 30px 80px rgba(0,0,0,.35);
  overflow:hidden;color:rgba(20,24,30,.8);font-family:var(--ui)}
.fakewin .titlebar{height:38px;display:flex;align-items:center;gap:9px;padding:0 14px;
  border-bottom:1px solid rgba(0,0,0,.06);cursor:default;user-select:none;-webkit-user-select:none}
.fakewin .lights{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.fakewin .tl{width:12px;height:12px;border-radius:50%;position:relative;display:block;border:0;padding:0;-webkit-appearance:none;appearance:none}
.fakewin .tl-red{background:#ff5f57;cursor:pointer}
.fakewin .tl-yellow{background:#febc2e}
.fakewin .tl-green{background:#28c840}
.fakewin .titlebar:hover .tl-red::after{content:'\00d7';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1;color:rgba(0,0,0,.5);font-weight:700}
.fakewin .wicon{width:16px;height:16px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.fakewin .wicon img{width:16px;height:16px;border-radius:22.5%;display:block}
.fakewin .wicon .cmd-mini{width:16px;height:16px;border-radius:22.5%;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,#2a2d34,#15171b);font-family:var(--mono);font-weight:600;font-size:7px;color:#fff}
.fakewin .wicon .mcp-mini{width:16px;height:16px;border-radius:22.5%;display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,#2a2d34,#15171b);color:#fff}
.fakewin .wicon .mcp-mini svg{width:55%;height:55%;display:block}
.fakewin .wtitle{font-size:13px;font-weight:600;color:rgba(20,24,30,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fakewin .content{padding:18px 20px}
.fakewin .wlead{font-size:15px;font-weight:600;line-height:1.4;color:#14181e;margin-bottom:9px}
.fakewin .wbody{font-size:14.5px;line-height:1.5;color:rgba(20,24,30,.8)}
.fakewin .content a{color:#2b6bff;font-weight:600;text-decoration:none}
.fakewin .content a:hover{text-decoration:underline}
.fakewin .gray2{display:block;margin-top:8px;font-size:12.5px;color:rgba(20,24,30,.5)}
.fakewin .quote{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:15.5px;line-height:1.4;color:rgba(20,24,30,.9)}
.fakewin .quote .attr{display:block;margin-top:8px;font-family:var(--ui);font-style:normal;font-size:12.5px;color:rgba(20,24,30,.5)}
.fakewin .quote+.wbody{margin-top:12px}
.fakewin .wfoot{margin-top:14px;display:flex;align-items:center;gap:14px;font-size:13px}
.fakewin .wfoot a.buy{color:#2b6bff;font-weight:600;text-decoration:none}
.fakewin .wfoot .alt{color:rgba(20,24,30,.5);font-weight:400;text-decoration:none}
.fakewin .wfoot button.alt{border:0;background:none;padding:0;font:inherit;line-height:inherit;cursor:pointer}
.fakewin .wfoot a:hover,.fakewin .wfoot .alt:hover{text-decoration:underline}