@font-face{
  font-family: Figtree;
  src: url("/fonts/figtree.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
:root{
  --canvas:#ECEEF1;
  --dot:#C9CDD4;
  --frame:#FFFFFF;
  --hover:#F6F7F9;
  --well:#E1E4E9;
  --ink:#111216;
  --mute:#585D66;
  --run:#FF4D1A;
  --run-text:#C2380B;
  --on-run:#111216;
  --dock:#111216;
  --on-dock:#F2F3F5;
  --dock-2:#2A2C32;
  --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--run);
  --out: cubic-bezier(0.23, 1, 0.32, 1);
  --move: cubic-bezier(0.2, 0.9, 0.1, 1);
  --drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --font: Figtree, ui-sans-serif, system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0}
html{font-size:16px;-webkit-text-size-adjust:100%;background:var(--canvas)}
body{
  font-family:var(--font);font-weight:450;font-size:16px;line-height:1.4;min-height:100vh;color:var(--ink);
  background-color:var(--canvas);
  background-image:radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size:20px 20px;background-position:-9px -9px;
}
img,svg{display:block;max-width:100%}
a{color:var(--run-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button,input,textarea,select{font:inherit;color:inherit;border:0;background:none}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus{outline:none}
:focus-visible{box-shadow:var(--focus)}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--frame);padding:10px 14px;border-radius:6px}
.wrap{width:min(1040px,calc(100% - 32px));margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 0 0}
.mark{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:44px}
.mark:hover{text-decoration:none}
.mark svg{width:30px;height:30px;flex:none}
.mark span{font-weight:800;font-size:19px;letter-spacing:-0.03em}

/* hero: the wordmark sits selected on the canvas */
.hero{padding:26px 0 6px}
.frame{position:relative;display:inline-block;padding:6px 14px 4px 12px;margin:10px 0 0 4px;background:var(--frame);border-radius:2px}
.frame h1{font-size:clamp(56px, 18vw, 148px);font-weight:850;letter-spacing:-0.055em;line-height:0.92}
.h{position:absolute;width:9px;height:9px;background:var(--run);border-radius:1px;pointer-events:none}
.h.tl{left:-4px;top:-4px}.h.tr{right:-4px;top:-4px}.h.bl{left:-4px;bottom:-4px}.h.br{right:-4px;bottom:-4px}
.dim{
  position:absolute;left:50%;bottom:-11px;translate:-50% 0;white-space:nowrap;pointer-events:none;
  background:var(--run);color:var(--on-run);font-size:12px;font-weight:700;line-height:1;padding:4px 7px;border-radius:4px;
  font-variant-numeric:tabular-nums;
}
.frame .dim{font-size:13px;bottom:-12px;padding:5px 8px}
.frame .h,.frame .dim{animation:grab 260ms var(--out) both;animation-delay:120ms}
.frame .h.tl{--fx:30px;--fy:20px}.frame .h.tr{--fx:-30px;--fy:20px}.frame .h.bl{--fx:30px;--fy:-20px}.frame .h.br{--fx:-30px;--fy:-20px}
.frame .dim{animation-name:tagin;animation-delay:300ms}
@keyframes grab{from{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(0.4)}to{opacity:1;transform:none}}
@keyframes tagin{from{opacity:0;transform:translateY(-4px) scale(0.92)}to{opacity:1;transform:none}}
.hero{display:flex;flex-direction:column;gap:26px;padding-bottom:30px}
.hero .line{font-size:19px;font-weight:500;max-width:22em;letter-spacing:-0.01em}
@media(min-width:820px){.hero{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;padding:40px 0 44px}.hero .line{font-size:21px;max-width:17em;padding-bottom:6px}}
.frame{align-self:flex-start}
.frame h1{overflow-wrap:anywhere}

.intro{padding:22px 0 0}
.intro h1{font-size:clamp(40px,10vw,84px);font-weight:850;letter-spacing:-0.05em;line-height:0.95;margin:0 0 12px}
.intro p{margin:0 0 6px;max-width:34em;font-size:17px}

.cnt{font-size:14px;font-weight:600;color:var(--mute);margin:26px 0 10px;font-variant-numeric:tabular-nums;min-height:20px}
.cnt #cnt-n{display:inline-block;color:var(--ink)}
.cnt #cnt-n.tick{animation:tick 220ms var(--out)}
@keyframes tick{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cnt-f{color:var(--run-text)}

/* list: each plugin is a frame on the canvas */
.tray{list-style:none;padding:0 0 120px;display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:820px){.tray{grid-template-columns:1fr 1fr;gap:14px 16px}}
.tray > li{position:relative}
.row{
  position:relative;width:100%;text-align:left;display:flex;align-items:center;gap:14px;
  min-height:64px;padding:10px 14px 10px 10px;border-radius:3px;background:var(--frame);color:var(--ink);
  transition:transform 160ms var(--out), background-color 160ms ease;
}
.row.enter{animation:settle 260ms var(--out) both;animation-delay:calc(min(var(--i,0),14) * 24ms)}
@keyframes settle{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.row:active{transform:scale(0.97)}
.gly{width:44px;height:44px;border-radius:3px;background:var(--well);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background-color 160ms ease,color 160ms ease}
.row .txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.row .name{font-size:19px;font-weight:700;letter-spacing:-0.02em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .use{flex:none;font-size:14px;font-weight:650;color:var(--mute);font-variant-numeric:tabular-nums}
.row .tag{font-size:14px;font-weight:550;color:var(--mute)}
.row.is-pick .name::after{
  content:"";display:inline-block;width:8px;height:8px;margin-left:9px;background:var(--run);
  transform:rotate(45deg);vertical-align:middle;translate:0 -2px;border-radius:1px;
}
/* signature: selection handles */
.row .h,.row .dim{opacity:0;transform:scale(0.4);transition:opacity 120ms ease, transform 140ms var(--out)}
.row .h.tl{transform-origin:100% 100%}.row .h.tr{transform-origin:0 100%}.row .h.bl{transform-origin:100% 0}.row .h.br{transform-origin:0 0}
.row .dim{transform:translateY(-4px)}
.row.is-sel .h,.row.is-sel .dim,.row:focus-visible .h,.row:focus-visible .dim{opacity:1;transform:none}
.row.is-sel .gly,.row:focus-visible .gly{background:var(--ink);color:var(--run)}
@media(hover:hover) and (pointer:fine){
  .row:hover .h,.row:hover .dim{opacity:1;transform:none}
  .row:hover .gly{background:var(--ink);color:var(--run)}
}
.row:focus-visible{box-shadow:none}
.empty{padding:28px 0 140px;color:var(--mute);font-size:17px}
.seo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* dock: a floating toolbar, like the one at the bottom of the canvas */
.dock{
  position:fixed;z-index:40;left:50%;bottom:max(14px, env(safe-area-inset-bottom));translate:-50% 0;
  width:min(520px, calc(100% - 24px));display:flex;align-items:center;gap:6px;padding:6px;
  background:var(--dock);color:var(--on-dock);border-radius:14px;
  transition:transform 240ms var(--out), opacity 200ms ease;
}
.dock.is-away{transform:translateY(calc(100% + 24px));opacity:0}
.run{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 10px 0 14px;border-radius:9px;text-align:left;transition:background-color 150ms ease, transform 160ms var(--out)}
.run:hover{background:var(--dock-2)}
.run:active{transform:scale(0.97)}
.run svg{flex:none;color:var(--run)}
.run-t{flex:1 1 auto;min-width:0;font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.run.is-on .run-t{color:#FFFFFF}
.run kbd{font:inherit;font-size:13px;font-weight:650;background:var(--dock-2);color:#C9CCD3;padding:4px 7px;border-radius:5px;flex:none}
@media(hover:none){.run kbd{display:none}}
.dock-clear{flex:none;width:48px;height:48px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--run);color:var(--on-run);transition:transform 160ms var(--out)}
.dock-clear:active{transform:scale(0.94)}
.dock-clear[hidden]{display:none}
.dock :focus-visible{box-shadow:0 0 0 2px var(--dock), 0 0 0 4px var(--run)}

/* command palette */
.pal{position:fixed;inset:0;z-index:50}
.pal[hidden]{display:none}
.pal-veil{position:absolute;inset:0;width:100%;height:100%;background:rgba(17,18,22,0.42);cursor:default}
.pal-card{
  position:absolute;left:0;right:0;bottom:0;background:var(--frame);border-radius:16px 16px 0 0;
  max-height:min(78vh, 640px);display:flex;flex-direction:column;padding:0 8px max(10px, env(safe-area-inset-bottom));
  touch-action:none;
}
.pal.anim .pal-veil{animation:fade 220ms ease both}
.pal.anim .pal-card{animation:up 300ms var(--drawer) both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.pal-grip{display:flex;justify-content:center;padding:10px 0 4px;cursor:grab}
.pal-grip span{width:40px;height:5px;border-radius:3px;background:var(--well)}
.pal-in{display:flex;align-items:center;gap:10px;padding:0 4px 0 12px;margin:4px 0 6px;background:var(--canvas);border-radius:10px}
.pal-in svg{flex:none;color:var(--mute)}
#pal-q{flex:1 1 auto;min-width:0;min-height:50px;font-size:17px;font-weight:550;padding:0}
#pal-q::placeholder{color:#7A7F88}
#pal-q:focus-visible{box-shadow:none}
.pal-in:focus-within{box-shadow:0 0 0 2px var(--run)}
.pal-x{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;color:var(--mute)}
.pal-list{list-style:none;padding:2px 0 6px;margin:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.opt{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-radius:8px;cursor:pointer;font-weight:550}
.opt .oi{width:30px;height:30px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;background:var(--well);flex:none}
.opt .oi svg{width:18px;height:18px}
.opt .ol{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt .ok2{font-size:13px;font-weight:650;color:var(--mute);font-variant-numeric:tabular-nums;flex:none}
.opt .ok2.c{min-width:2.2em;text-align:right}
.opt.is-cur .ol::after{content:"";display:inline-block;width:7px;height:7px;margin-left:8px;background:var(--run);transform:rotate(45deg);vertical-align:middle;translate:0 -2px}
.opt[aria-selected="true"]{background:var(--ink);color:#fff}
.opt[aria-selected="true"] .oi{background:var(--run);color:var(--ink)}
.opt[aria-selected="true"] .ok2{color:#C9CCD3}
.opt.is-zero{opacity:0.45}
.pal-none{padding:18px 12px;color:var(--mute)}
@media(min-width:760px){
  .pal-card{left:50%;right:auto;bottom:auto;top:14vh;width:600px;translate:-50% 0;border-radius:14px;padding:8px;max-height:min(70vh,600px)}
  .pal-grip{display:none}
  .pal.anim .pal-card{animation:pop 180ms var(--out) both}
  @keyframes pop{from{opacity:0;transform:scale(0.97)}to{opacity:1;transform:none}}
}

/* sheet with plugin details */
.veil{position:fixed;inset:0;background:rgba(17,18,22,0.42);z-index:50;padding:0;width:100%;cursor:default;animation:fade 220ms ease}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:51;background:var(--frame);
  border-radius:16px 16px 0 0;padding:8px 20px max(26px, env(safe-area-inset-bottom));max-height:min(86vh,720px);overflow:auto;
  animation:up 300ms var(--drawer);touch-action:pan-y;
}
.sheet .pal-grip{margin:0 -20px 6px}
.sheet .ids{display:flex;align-items:center;gap:14px;margin:10px 48px 8px 0}
.sheet .gly{width:56px;height:56px;background:var(--ink);color:var(--run)}
.sheet .gly svg{width:28px;height:28px}
.sheet .nm{font-size:clamp(28px,7vw,38px);font-weight:850;letter-spacing:-0.04em;line-height:1}
.sheet .k{margin:0 0 4px;color:var(--mute);font-size:14px;font-weight:600}
.sheet .close{
  position:absolute;top:16px;right:14px;width:44px;height:44px;border-radius:8px;background:var(--canvas);
  display:inline-flex;align-items:center;justify-content:center;
}
.sheet p{margin:14px 0 0;max-width:42ch;font-size:17px}
.sheet .facts{margin:14px 0 0;font-size:15px;font-weight:600;color:var(--mute)}
.sheet .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
@media(min-width:760px){
  .sheet{left:auto;right:24px;bottom:24px;width:min(460px,calc(100% - 48px));border-radius:14px;padding:22px 24px 24px}
  .sheet .pal-grip{display:none}
  .sheet .ids{margin-top:0}
  .sheet{animation:side 260ms var(--out)}
  @keyframes side{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
}

/* footer slab in run orange */
.slab{background:var(--run);color:var(--ink);padding:52px 0 120px}
.slab .wrap{width:min(760px,calc(100% - 32px))}
.slab h2{font-size:30px;font-weight:850;letter-spacing:-0.035em;line-height:1.05}
.slab p{margin:8px 0 16px;max-width:30em}
.slab a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.slab .ticket{margin-bottom:44px}
.slab input,.slab textarea{width:100%;min-height:48px;background:#FFF4EF;color:var(--ink);border-radius:6px;padding:10px 14px}
.slab input::placeholder{color:#6E5A52}
.slab textarea{min-height:100px;resize:vertical}
.slab :focus-visible{box-shadow:0 0 0 2px var(--run), 0 0 0 4px var(--ink)}
.inline{display:flex;gap:8px;flex-wrap:wrap}
.inline input{flex:1 1 200px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:8px;
  background:var(--ink);color:#fff;font-weight:700;font-size:16px;transition:transform 160ms var(--out)
}
.btn:hover{text-decoration:none}
.slab .btn{text-decoration:none}
.btn:active{transform:scale(0.97)}
.sheet .btn{background:var(--run);color:var(--on-run)}
.err{color:var(--ink);font-weight:650;font-size:15px;min-height:1.2em;margin-top:8px}
.ok{font-weight:650}
.field{margin:0 0 12px}
.field label{display:block;font-size:15px;font-weight:650;margin:0 0 6px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.foot{padding:4px 0 0;font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:0 16px;margin:0 0 12px}
.foot nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-weight:600}

.page{padding:24px 0 56px;max-width:40em}
.page h1{font-size:clamp(40px,9vw,72px);font-weight:850;letter-spacing:-0.05em;line-height:0.95;margin:8px 0 16px}
.page h2{font-size:22px;font-weight:750;margin:24px 0 8px}
.page p,.page ul{margin:0 0 14px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:200ms;animation-timing-function:var(--out)}
.tray > li:hover,.tray > li:focus-within,.tray > li:has(.is-sel){z-index:2}