/* ───── "There's a use case for that" ─────
   Rebuilt on raycast.com's "There's an extension for that" (measured live, 1440px and 390px, Oct 17 2026):
   a dark band, title + muted subtitle left, a segmented category pill right, a reel of 360px cards
   (20px radius, tinted gradient + coloured glow), header row = icon tile · name · chevron button,
   a 2-line description, a 1px divider, then a 360×360 illustration. Ours are live HTML/SVG, driven by uses.js. */

.ux {
  --ux-bg: #07080a; --ux-mute: #86878a;
  --ux-pad: max(24px, calc((100vw - 1252px) / 2 + 24px));
  position: relative; display: flex; flex-direction: column; gap: 40px; padding: 152px 0;
  margin-top: 160px; background: var(--ux-bg); color: #fff; color-scheme: dark; overflow: hidden;
}
.ux-top { width: 100%; max-width: 1252px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.ux-text { padding: 0 24px; max-width: 480px; }
.ux-text h2, .ux-text p { font: 500 20px/1.2 var(--font); letter-spacing: .2px; text-wrap: balance; }
.ux-text h2 { color: #fff; }
.ux-text p { color: var(--ux-mute); }

/* segmented category pill, with a sliding backdrop */
.ux-cats-wrap { padding: 0 24px; max-width: 100%; overflow-x: auto; scrollbar-width: none; flex: none; }
.ux-cats-wrap::-webkit-scrollbar { display: none; }
.ux-cats { position: relative; isolation: isolate; display: flex; align-items: center; gap: 24px; padding: 8px 20px; border-radius: 31px; width: max-content;
  background: linear-gradient(137deg, #111214 4.87%, #0c0d0f 75.88%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.035); }
.ux-back { position: absolute; top: 8px; left: 0; height: 46px; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 36px; pointer-events: none;
  background: radial-gradient(51.07% 92.4% at 51% 7.61%, #5a5a5a 0%, #1a1a1a 100%); transition: transform .3s var(--ease), width .3s var(--ease); }
.ux-back::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(#fff, rgba(255,255,255,0)); opacity: .2; }
.ux-cat { position: relative; z-index: 1; height: 46px; font: 500 14px/22.4px var(--font); letter-spacing: .2px; color: var(--ux-mute); white-space: nowrap; transition: color .3s; }
.ux-cat:hover, .ux-cat[aria-current="true"] { color: #fff; }
.ux-cat:focus-visible { outline-offset: 6px; border-radius: 6px; }

/* the reel */
.ux-reel { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: var(--ux-pad); scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 40px 0; margin: -40px 0; outline: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 224px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 224px), transparent); }
.ux-reel::-webkit-scrollbar { display: none; }
.ux-reel.end { -webkit-mask-image: linear-gradient(to right, transparent, #000 64px); mask-image: linear-gradient(to right, transparent, #000 64px); }
.ux-reel:focus-visible { -webkit-mask-image: none; mask-image: none; outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 24px; }
.ux-track { position: relative; display: flex; gap: 56px; width: max-content; padding: 32px 32px 32px var(--ux-pad); }

/* card */
.uc { --k: 1; position: relative; isolation: isolate; flex: none; width: 360px; display: grid; grid-template-rows: auto 360px; scroll-snap-align: start;
  border-radius: 20px; overflow: hidden; color: #fff; text-decoration: none; background: var(--bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 20px 3px var(--glow), 0 0 40px 20px var(--glow), inset 0 0 0 1px rgba(255,255,255,.06); }
.uc::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 80%); }
.uc:hover::after { opacity: 1; }
.uc:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 20px; }
.uc-head { display: grid; gap: 24px; padding: 24px 24px 0; }
.uc-row { display: flex; align-items: center; gap: 12px; }
.uc-icon { width: 52px; height: 52px; flex: none; border-radius: 12px; display: grid; place-items: center; position: relative; overflow: hidden;
  background: var(--tile, linear-gradient(180deg, #2b2b30, #141417)); box-shadow: 0 1.19px 2.38px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 1px 0 rgba(255,255,255,.18); }
.uc-icon svg { width: 30px; height: 30px; }
.uc-icon .g { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.uc-name { font: 400 18px/1.15 var(--font); letter-spacing: .1px; }
.uc-go { margin-left: auto; width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 8px; color: #e6e6e6;
  background: linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.1));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.2); transition: box-shadow .3s, transform .3s var(--ease); }
.uc-go svg { width: 16px; height: 16px; }
.uc:hover .uc-go { box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.2); }
.uc-desc { font: 500 16px/25.6px var(--font); letter-spacing: .1px; min-height: 51.2px; text-wrap: pretty; }
.uc-div { height: 1px; background: rgba(255,255,255,.05); }

/* entrance (Raycast slideIn: 0.7s, 80ms stagger) */
.ux.js .uc { opacity: 0; }
.ux.js.in .uc { animation: ux-in .7s cubic-bezier(.215,.61,.355,1) calc(100ms + var(--i, 0) * 80ms) forwards; }
@keyframes ux-in { from { opacity: 0; transform: translate(10px, 50px) scale(.98); } to { opacity: 1; transform: none; } }

/* bottom row */
.ux-bot { width: 100%; max-width: 1252px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ux-note { font: 500 16px/1.4 var(--font); letter-spacing: .2px; color: var(--ux-mute); }
.ux-note a { color: #cfcfd1; text-decoration: none; white-space: nowrap; transition: color .2s; }
.ux-note a:hover { color: #fff; }
.ux-note a span { display: inline-block; transition: transform .2s var(--ease); }
.ux-note a:hover span { transform: translateX(2px); }
.ux-pager { display: flex; gap: 12px; flex: none; }
.ux-pager button { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(137deg, #111214 4.87%, #0c0d0f 75.88%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: box-shadow .3s, color .3s; }
.ux-pager button:hover:not(:disabled) { box-shadow: inset 0 1px 1px rgba(255,255,255,.1), 0 2px 40px 10px rgba(154,170,255,.05), 0 0 16px -7px rgba(154,170,255,.05); }
.ux-pager button:disabled { color: rgba(255,255,255,.3); cursor: default; }
.ux-pager svg { width: 16px; height: 16px; }

/* ───── illustrations: a 360×360 stage, scaled down on phones ───── */
.uc-ill { position: relative; overflow: hidden; }
.uc-st { position: absolute; left: 0; top: 0; width: 360px; height: 360px; transform: scale(var(--k)); transform-origin: 0 0; font-family: var(--font); color: #fff; }
.uc-st > * { position: absolute; }
.uc-st svg [data-fx], .st svg [data-k] { transform-box: fill-box; transform-origin: center; }
.ux .gl { border-radius: 16px; background: rgba(255,255,255,.065);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.08), 0 16px 36px rgba(0,0,0,.28); }
.ux .ring { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.8px currentColor; }
.ux .tag { font: 600 10.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 5px 7px; border-radius: 6px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.ux .typed { display: block; width: fit-content; max-width: 100%; }

/* 1 · Obsidian */
.ob-path { left: 32px; top: 28px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,255,.42); }
.ob-path svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.ob-path i { font-style: normal; opacity: .5; }
.ob-doc { left: 32px; right: 24px; top: 56px; display: flex; flex-direction: column; gap: 4px; }
.ob-ln { font: 400 16.5px/30px var(--font); color: rgba(255,255,255,.88); white-space: nowrap; }
.ob-ln.h { font: 600 21px/34px var(--display); letter-spacing: -.01em; color: #fff; margin-bottom: 2px; }
.ob-ln s { text-decoration: none; color: rgba(255,255,255,.3); }
.ob-ln .cb { display: inline-block; width: 13px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); vertical-align: -1px; margin-right: 6px; }
.ux .wl { position: relative; display: inline-block; }
.ux .wl b { position: absolute; inset: 0; font-weight: inherit; color: #cdbdff; text-shadow: 0 0 14px rgba(168,139,250,.95), 0 0 2px rgba(168,139,250,.6); }
.ob-graph { left: 0; top: 206px; width: 360px; height: 150px; overflow: visible; }
.ob-graph .old line { stroke: rgba(255,255,255,.12); stroke-width: 1; }
.ob-graph .old circle { fill: rgba(255,255,255,.22); }
.ob-graph .e { stroke: rgba(196,178,255,.8); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(168,139,250,.9)); }
.ob-graph .n { fill: #b9a4ff; filter: drop-shadow(0 0 6px rgba(168,139,250,1)); }
.ob-graph .c { fill: #fff; }
.ob-graph text { font: 500 11.5px var(--font); fill: rgba(255,255,255,.62); text-anchor: middle; }
.ob-graph text.ct { fill: #fff; font-weight: 600; }

/* 2 · Recruiting */
.rc-call { left: 28px; right: 28px; top: 32px; height: 84px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-radius: 24px; }
.rc-av { position: relative; width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 600 16px/1 var(--font);
  background: linear-gradient(160deg, #f4c7a1, #c98a6b); color: #3a2418; }
.rc-av i { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(52,199,89,.8); animation: rc-ring 2s cubic-bezier(.2,.7,.3,1) infinite; }
.rc-av i + i { animation-delay: 1s; }
@keyframes rc-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }
.rc-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rc-who b { font: 600 17px/1.15 var(--font); }
.rc-who small { font-size: 13px; color: rgba(255,255,255,.55); }
.rc-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.rc-btn svg { width: 17px; height: 17px; fill: #fff; }
.rc-btn.no { background: #ff453a; } .rc-btn.no svg { transform: rotate(135deg); }
.rc-btn.yes { background: #30d158; box-shadow: 0 0 18px rgba(48,209,88,.55); }
.rc-lab { left: 34px; top: 134px; display: flex; align-items: center; gap: 7px; font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.rc-lab i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.rc-chip { left: 28px; right: 28px; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 16px; }
.rc-chip b { display: block; font: 500 14.5px/1.25 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-chip small { display: block; font-size: 12.5px; line-height: 1.3; color: rgba(255,255,255,.5); }
.rc-chip > span:last-child { min-width: 0; }
.rc-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; }
.rc-ic svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rc-ic.pdf { background: linear-gradient(160deg, #ff6b5e, #d93a2e); }
.rc-ic.mail { background: linear-gradient(160deg, #4aa3ff, #1f6fe0); }
.rc-ic.prof { background: linear-gradient(160deg, #5b8def, #2f5fc4); }

/* 3 · Accounting */
.ac-head { left: 28px; right: 28px; top: 26px; display: flex; justify-content: space-between; font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.ac-rows { left: 20px; right: 20px; top: 46px; display: flex; flex-direction: column; }
.ac-row { position: relative; height: 40px; display: grid; grid-template-columns: 58px 1fr auto 26px; align-items: center; gap: 10px; padding: 0 8px; font-size: 14.5px; border-radius: 10px; }
.ac-row + .ac-row::before { content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px; background: rgba(255,255,255,.06); }
.ac-row time { color: rgba(255,255,255,.45); font-size: 13px; font-variant-numeric: tabular-nums; }
.ac-row em { font-style: normal; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.85); }
.ac-mark { position: absolute; inset: 2px 0; border-radius: 10px; background: linear-gradient(90deg, rgba(255,176,46,.26), rgba(255,176,46,.1)) no-repeat; background-size: 100% 100%; }
.ac-row > :not(.ac-mark) { position: relative; }
.ac-st { width: 18px; height: 18px; justify-self: end; display: grid; place-items: center; }
.ac-st svg { width: 16px; height: 16px; fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ac-st .ring { color: #ffb02e; filter: drop-shadow(0 0 5px rgba(255,176,46,.9)); }
.ac-mail { left: 24px; right: 24px; top: 150px; height: 186px; padding: 16px 16px 0; display: flex; flex-direction: column; gap: 8px; background: rgba(36,28,20,.97); }
.ac-mail .to { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.5); }
.ac-mail .to b { font-weight: 500; color: rgba(255,255,255,.9); }
.ac-mail .to .tag { margin-left: auto; }
.ac-mail .subj { font: 600 15px/1.3 var(--font); }
.ac-mail .body { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.7); }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ac-chips span { font-size: 12.5px; padding: 5px 9px; border-radius: 8px; color: #ffd28a; background: rgba(255,176,46,.12); box-shadow: inset 0 0 0 1px rgba(255,176,46,.28); font-variant-numeric: tabular-nums; }

/* 4 · Meetings */
.mt-head { left: 32px; right: 32px; top: 26px; display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font); color: rgba(255,255,255,.6); }
.mt-head .rec { width: 8px; height: 8px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 8px #ff453a; }
.mt-head .t { color: rgba(255,255,255,.35); }
.mt-wave { margin-left: auto; display: flex; align-items: center; gap: 3px; height: 16px; }
.mt-wave i { width: 3px; height: 16px; border-radius: 2px; background: rgba(140,180,255,.85); transform-origin: center; animation: mt-w 1.1s ease-in-out infinite alternate; }
.mt-wave i:nth-child(2) { animation-delay: -.3s; } .mt-wave i:nth-child(3) { animation-delay: -.7s; } .mt-wave i:nth-child(4) { animation-delay: -.15s; } .mt-wave i:nth-child(5) { animation-delay: -.5s; }
@keyframes mt-w { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.mt-tx { left: 0; right: 0; top: 50px; height: 178px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 18px), transparent); }
.mt-scroll { position: absolute; left: 32px; right: 24px; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.mt-scroll p { font: 500 17px/1.4 var(--font); color: rgba(255,255,255,.38); white-space: nowrap; }
.mt-scroll p b { display: inline-block; width: 44px; font: 600 12px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.4); vertical-align: 2px; }
.mt-scroll p.me { color: rgba(255,255,255,.82); }
.mt-scroll p.me b { color: #ff6b62; }
.mt-hl { color: #fff; padding: 1px 4px; margin: 0 -4px; border-radius: 6px; background: linear-gradient(90deg, rgba(90,140,255,.55), rgba(90,140,255,.35)) no-repeat; background-size: 100% 100%; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.mt-dr { left: 24px; right: 24px; height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-radius: 14px; }
.mt-dr .ring { color: #9fbcff; }
.mt-dr > span { min-width: 0; flex: 1; }
.mt-dr b { display: block; font: 500 14px/1.25 var(--font); }
.mt-dr small { display: block; font-size: 12.5px; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-dr em { font: 600 11px/1 var(--font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: #bcd0ff; padding: 5px 7px; border-radius: 6px; background: rgba(90,140,255,.2); }

/* 5 · Desktop */
.dk-head { left: 28px; right: 28px; top: 22px; height: 30px; display: flex; align-items: center; justify-content: space-between; }
.dk-x { display: grid; } .dk-x > * { grid-area: 1 / 1; }
.dk-count { font: 500 14px/30px var(--font); color: rgba(255,255,255,.8); }
.dk-count .b { color: #9fe3ff; }
.dk-btn { height: 30px; padding: 0 14px; border-radius: 8px; font: 600 13px/30px var(--font); color: #062033; background: linear-gradient(#bfeaff, #7fd0f5); box-shadow: 0 0 18px rgba(80,200,255,.45), inset 0 1px 0 rgba(255,255,255,.7); text-align: center; }
.dk-f { width: 44px; height: 52px; }
.dk-f > span { position: absolute; inset: 0; transform: rotate(var(--r, 0deg)); }
.dk-f .pg { position: absolute; left: 6px; top: 0; width: 32px; height: 42px; border-radius: 3px; background: linear-gradient(#ffffff, #e6e8ee); clip-path: polygon(0 0, 70% 0, 100% 24%, 100% 100%, 0 100%); box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.dk-f .pg::before { content: ""; position: absolute; right: 0; top: 0; width: 30%; height: 24%; background: #c7ccd6; border-bottom-left-radius: 2px; }
.dk-f .pg::after { content: ""; position: absolute; left: 6px; right: 7px; top: 15px; height: 14px; background: repeating-linear-gradient(#cdd2db 0 1.5px, transparent 1.5px 4.5px); }
.dk-f .lb { position: absolute; left: 6px; width: 32px; bottom: 10px; font: 700 7.5px/11px var(--font); text-align: center; color: #fff; border-radius: 2px; background: var(--c); }
.dk-f.shot > span { inset: 8px -6px 10px; }
.dk-f.shot .sh { position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(160deg, #3a4a6a, #1b2236); box-shadow: 0 3px 8px rgba(0,0,0,.4), inset 0 0 0 1.5px rgba(255,255,255,.85); overflow: hidden; }
.dk-f.shot .sh::before { content: ""; position: absolute; left: 4px; right: 4px; top: 4px; height: 5px; border-radius: 2px; background: rgba(255,255,255,.35); }
.dk-f.shot .sh::after { content: ""; position: absolute; left: 4px; width: 55%; bottom: 4px; height: 12px; border-radius: 2px; background: var(--c, #7fd0f5); opacity: .7; }
.dk-fold { top: 252px; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dk-fold svg { width: 78px; height: 62px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.dk-fold b { position: absolute; top: -6px; right: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font: 600 12px/22px var(--font); text-align: center; color: #fff; background: #ff453a; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.dk-fold small { font: 500 12px/1.2 var(--font); color: rgba(255,255,255,.82); white-space: nowrap; }

/* 6 · Freelance */
.fr-inv { left: 34px; top: 22px; width: 168px; height: 194px; }
.fr-paper { position: absolute; inset: 0; transform: rotate(-5deg); border-radius: 10px; padding: 16px 14px; color: #1d1d22; background: linear-gradient(#ffffff, #f1eef3);
  box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.4); display: flex; flex-direction: column; gap: 7px; }
.fr-paper .t { display: flex; justify-content: space-between; align-items: baseline; font: 700 14px/1 var(--font); }
.fr-paper .t span { font: 500 11px/1 var(--font); color: #8a8790; }
.fr-paper small { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #9a96a0; margin-top: 4px; }
.fr-paper .who { font: 600 12px/1.2 var(--font); margin-top: -4px; }
.fr-paper i { height: 6px; border-radius: 3px; background: #e4e1e8; }
.fr-paper i.s { width: 60%; }
.fr-paper .tot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; border-top: 1px solid #e4e1e8; font: 700 16px/1 var(--font); }
.fr-paper .tot span { font: 500 10px/1 var(--font); color: #8a8790; }
.fr-paper .due { font: 600 10.5px/1 var(--font); color: #d6336c; }
.fr-stamp { left: 62px; top: 118px; }
.fr-stamp span { display: block; transform: rotate(-14deg); font: 800 19px/1 var(--font); letter-spacing: .12em; color: #ff5fa0; padding: 6px 10px; border: 2.5px solid #ff5fa0; border-radius: 8px; background: rgba(255,95,160,.08); text-shadow: 0 0 12px rgba(255,95,160,.7); box-shadow: 0 0 18px rgba(255,95,160,.35); }
.fr-late { left: 222px; top: 58px; width: 116px; display: flex; flex-direction: column; align-items: flex-start; }
.fr-late .win { height: 72px; overflow: hidden; }
.fr-late .roll { display: flex; flex-direction: column; font: 600 72px/72px var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #fff; }
.fr-late .roll i { font-style: normal; height: 72px; }
.fr-late small { font: 500 15px/1.2 var(--font); color: rgba(255,255,255,.75); }
.fr-late .since { margin-top: 6px; font-size: 12.5px; color: rgba(255,255,255,.42); }
.fr-mail { left: 24px; right: 24px; top: 230px; height: 116px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; background: rgba(40,20,32,.9); }
.fr-mail .to { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.5); }
.fr-mail .to b { font-weight: 500; color: rgba(255,255,255,.9); }
.fr-mail .to .tag { margin-left: auto; }
.fr-mail .body { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.78); }
.fr-mail .att { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 12px; color: #ffc2da; padding: 4px 8px; border-radius: 7px; background: rgba(255,95,160,.14); }
.fr-mail .att svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* 7 · Focus */
.fc-pill { left: 0; right: 0; margin: 0 auto; width: fit-content; padding: 0 12px; top: 20px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 13.5px/1 var(--font); background: #ff453a; box-shadow: 0 0 22px rgba(255,69,58,.6); font-variant-numeric: tabular-nums; }
.fc-pill .win { height: 16px; overflow: hidden; }
.fc-pill .roll { display: flex; flex-direction: column; }
.fc-pill .roll i { font-style: normal; height: 16px; line-height: 16px; }
.fc-pill small { font: 500 12.5px/16px var(--font); color: rgba(255,255,255,.82); }
.fc-head { left: 179px; top: 50px; width: 2px; height: 120px; border-radius: 1px; background: linear-gradient(#ff453a, rgba(255,69,58,.15)); box-shadow: 0 0 10px rgba(255,69,58,.8); z-index: 2; }
.fc-win { left: 0; right: 0; top: 62px; height: 104px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.fc-strip { position: absolute; top: 0; left: -878px; display: flex; gap: 12px; padding-bottom: 22px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 1px, transparent 1px 14px) left bottom / 100% 8px no-repeat; }
.fc-fr { position: relative; width: 100px; height: 66px; flex: none; border-radius: 8px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); overflow: hidden; }
.fc-fr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: rgba(255,255,255,.07); }
.fc-fr i { position: absolute; left: 8px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); }
.fc-fr.sheet { background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 100% 9px, 20px 100%; }
.fc-fr.form i.f { height: 9px; border-radius: 3px; background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.fc-fr .hit { position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 2px #ff453a, 0 0 16px rgba(255,69,58,.8); }
.fc-big { left: 36px; right: 36px; top: 192px; height: 102px; border-radius: 14px; padding: 0 16px; overflow: hidden; background: rgba(36,22,22,.92); }
.fc-big .bar { display: flex; align-items: center; gap: 5px; height: 26px; margin: 0 -16px 10px; padding: 0 12px; background: rgba(255,255,255,.05); font-size: 11px; color: rgba(255,255,255,.55); }
.fc-big .bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
.fc-big .bar span { margin-left: 8px; }
.fc-big .bar em { margin-left: auto; font-style: normal; color: #ff8a82; }
.fc-big .fld { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; height: 27px; font-size: 12.5px; color: rgba(255,255,255,.5); }
.fc-big .fld span { height: 22px; border-radius: 6px; padding: 0 8px; line-height: 22px; color: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.fc-big .fld.on span { box-shadow: inset 0 0 0 1.5px #ff453a, 0 0 12px rgba(255,69,58,.35); }
.fc-big .fld.off { opacity: .45; }
.ux .caret { display: inline-block; width: 1.5px; height: 13px; background: #fff; vertical-align: -2px; animation: fc-blink 1s steps(1) infinite; }
@keyframes fc-blink { 50% { opacity: 0; } }
.fc-cap { left: 0; right: 0; top: 318px; text-align: center; font: 500 14px/1 var(--font); color: rgba(255,255,255,.75); }
.fc-cap b { color: #fff; font-weight: 600; }

/* ───── responsive ───── */
@media (max-width: 1024px) {
  .ux-top { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 719px) {   /* raycast.com at 390px: 300px cards, 16px card padding, 14px descriptions */
  .ux { padding: 112px 0; margin-top: 112px; --ux-pad: 32px; }
  .ux-text { padding: 0 24px; }
  .ux-text h2, .ux-text p { font-size: 18px; line-height: 28.8px; }
  .ux-cats-wrap { width: 100%; }
  .ux-reel { -webkit-mask-image: none; mask-image: none; }
  .ux-track { gap: 24px; padding-top: 8px; padding-bottom: 8px; }
  .uc { --k: .8333; width: 300px; grid-template-rows: auto 300px; }
  .uc-head { padding: 16px 16px 0; gap: 16px; }
  .uc-desc { font-size: 14px; line-height: 22.4px; min-height: 44.8px; }
  .ux-bot { flex-wrap: wrap; }
  .ux-note { font-size: 14px; display: flex; flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .ux.js .uc { opacity: 1; animation: none !important; }
  .ux-back, .ux-cat { transition: none; }
  .rc-av i, .mt-wave i, .ux .caret { animation: none; }
  .rc-av i { opacity: 0; }
}