/* Edge design system 2.0 (v2.2, site): the ONE stylesheet for every DS2-owned getedge.cc page.
   Base: the live landing and skill pages. One definition per token, component, state and page rule.
   Pages compose classes; no page CSS, no !important, no borders (fill, space, soft shadow; focus rings stay). */

@font-face{font-family:"Inter";src:url("edge-inter.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ================= 1. TOKENS ================= */
:root{
  color-scheme:light;
  --e-paper:#f5f3eb; --e-surface:#ffffff; --e-sunken:#f1efe7; --e-tint:#ebe9e0;
  --e-ink:#16251e; --e-muted:#59685f; --e-divider:#e6e3da;
  --e-blue:#154cff; --e-blue-hover:#103ed7; --e-blue-base:#0c35ba; --e-blue-soft:#e9efff; --e-blue-ink:#183abe;
  --e-blue-top:#3d6cff;                       /* primary key face, top of gradient */
  --e-key2-top:#ffffff; --e-key2-bottom:#f2f0e9; --e-key2-base:#d5d1c5;
  --e-sky-top:#dfe8f0; --e-sky-art:#2e78b1; --e-meadow:#334626; --e-meadow-ink:#e6ecdf;
  --e-success:#315f43; --e-success-soft:#e5efe8; --e-warn:#7a5200; --e-warn-soft:#f5ecd6; --e-error:#a43d3d; --e-error-soft:#f7e6e3;
  --e-font:"Inter Display","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --e-mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --e-fs-hero:clamp(44px,4.6vw,68px); --e-fs-title:clamp(32px,3vw,44px); --e-fs-section:48px; --e-fs-h3:20px;
  --e-fs-lede:18px; --e-fs-body:16px; --e-fs-small:14px; --e-fs-meta:13px;
  --e-track:-.035em; --e-w-display:500;
  --e-s1:4px;--e-s2:8px;--e-s3:12px;--e-s4:16px;--e-s5:20px;--e-s6:24px;--e-s8:32px;--e-s10:40px;--e-s12:48px;--e-s16:64px;--e-s24:96px;
  --e-gutter:clamp(20px,5vw,72px); --e-max:1200px; --e-measure:600px;
  --e-r-key:12px; --e-r-sm:12px; --e-r-card:18px; --e-r-dialog:22px; --e-r-pill:999px;
  --e-sh-card:0 1px 2px #16251e0a,0 10px 30px #16251e0f;
  --e-sh-card-hover:0 2px 4px #16251e0d,0 18px 40px #16251e1a;
  --e-sh-dialog:0 24px 80px #10261933;
  --e-focus:0 0 0 3px var(--e-paper),0 0 0 5px var(--e-blue);
  --e-logo:18px;                              /* the one logo size */
  --e-nav-h:68px;                             /* the sticky nav; sticky tabs pin right under it */
  --e-ease:cubic-bezier(.2,.7,.2,1); --e-t-press:90ms; --e-t-hover:200ms;
}
@media (max-width:700px){:root{--e-fs-section:32px;--e-fs-lede:17px;--e-fs-hero:clamp(36px,10vw,44px);--e-fs-title:clamp(28px,7.6vw,32px)}}

/* ================= 2. BASE + TYPE ================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--e-paper);color:var(--e-ink);font:400 var(--e-fs-body)/1.55 var(--e-font);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--e-focus);border-radius:var(--e-r-key)}
/* the ring is for keyboard users only: after a mouse or touch press (html[data-input=pointer], set by edge-ds2-v2.js) no element keeps it */
html[data-input=pointer] :focus-visible:not(input):not(textarea){box-shadow:none}
h1,h2,h3{font-weight:var(--e-w-display);letter-spacing:var(--e-track);margin:0}
p{margin:0}
.e-wrap{max-width:calc(var(--e-max) + 2*var(--e-gutter));margin:0 auto;padding-inline:var(--e-gutter)}
.e-section{padding-block:var(--e-s12)}
.e-stack{display:grid;gap:var(--e-s4)} .e-stack--tight{gap:6px}
.e-row{display:flex;flex-wrap:wrap;gap:var(--e-s3);align-items:center} .e-row--between{justify-content:space-between}
.e-grid{display:grid;gap:var(--e-s6);grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--e-min,260px)),1fr))}
.e-muted{color:var(--e-muted)}
.e-after{margin-top:var(--e-s6)}
.e-hero-title{font-size:var(--e-fs-hero);line-height:1.02}
.e-accent{color:var(--e-blue);display:block}
.e-title{font-size:var(--e-fs-title);line-height:1.08} .e-title--sm{font-size:28px;line-height:1.12}
.e-h2{font-size:var(--e-fs-section);line-height:1.06}
.e-h3{font-size:var(--e-fs-h3);line-height:1.3;letter-spacing:-.02em}
.e-lede{font-size:var(--e-fs-lede);line-height:1.55;letter-spacing:-.01em;color:var(--e-muted);max-width:var(--e-measure)}
.e-small{font-size:var(--e-fs-small);line-height:1.45}
.e-meta{font-size:var(--e-fs-meta);line-height:1.4;color:var(--e-muted)}

/* ================= 3. LOGO (one size, one ink) ================= */
.e-logo{flex:none;display:inline-block;width:var(--e-logo);height:var(--e-logo);background:currentColor;
  -webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;vertical-align:-.2em}
.e-logo--claude{--src:url(claude-app.svg)} .e-logo--claude-code{--src:url(claude-code.svg)} .e-logo--chatgpt{--src:url(chatgpt.svg)}
.e-logo--codex{--src:url(codex.svg)} .e-logo--cursor{--src:url(cursor.svg)}
/* a named product: logo + name, everywhere a product is named */
.e-product{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:500}
/* works-with row */
.e-works{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:var(--e-fs-small);color:var(--e-ink)}
.e-works>span:first-child{color:var(--e-muted);font-weight:400}
/* backers row (company logos, wordmarks keep their shape) */
.e-backers{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;font-size:var(--e-fs-meta);color:var(--e-muted)}
.e-backers>span{flex:0 0 100%}
.e-backer{display:block;flex:none;height:24px;background:var(--e-ink);opacity:.72;-webkit-mask:var(--src) left center/contain no-repeat;mask:var(--src) left center/contain no-repeat}
.e-backer--yc{--src:url(yc-mono.svg);width:24px} .e-backer--sequoia{--src:url(sequoia.svg);width:144px;height:19px} .e-backer--a16z{--src:url(a16z-mark.svg);width:50px}

/* ================= 4. KEY (chunky physical keycap) ================= */
/* face = soft vertical gradient + 1px inner top highlight; 4px darker base underneath; press = down 2px, base 2px */
.e-key{--h:48px;--base:var(--e-blue-base);--lift:4px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 20px;margin-bottom:var(--lift);
  border:0;border-radius:var(--e-r-key);font:500 15px/1 var(--e-font);letter-spacing:-.01em;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;
  box-shadow:inset 0 1px 0 var(--hi,#ffffff59),inset 0 -1px 0 #00000014,0 var(--lift) 0 var(--base),0 calc(var(--lift) + 4px) 12px var(--glow,#0c35ba33);
  transition:transform var(--e-t-press) var(--e-ease),box-shadow var(--e-t-press) var(--e-ease),filter var(--e-t-hover)}
.e-key:hover{filter:brightness(1.05)}
.e-key:active,.e-key.is-down{transform:translateY(2px);box-shadow:inset 0 1px 0 var(--hi,#ffffff40),inset 0 -1px 0 #00000014,0 2px 0 var(--base),0 4px 8px var(--glow,#0c35ba26)}
.e-key--primary{color:#fff;background:linear-gradient(180deg,var(--e-blue-top),var(--e-blue) 70%)}
.e-key--secondary{color:var(--e-ink);background:linear-gradient(180deg,var(--e-key2-top),var(--e-key2-bottom));--base:var(--e-key2-base);--hi:#fff;--glow:#16251e1f}
.e-key--quiet{background:none;color:var(--e-ink);box-shadow:none;padding-inline:2px;margin-bottom:0;text-decoration:underline;text-decoration-color:#16251e40;text-underline-offset:5px}
.e-key--quiet:active{transform:none;box-shadow:none}
.e-key--sm{--h:36px;--lift:3px;padding:0 13px;font-size:14px;gap:8px;border-radius:10px}
.e-key--lg{--h:54px;padding:0 26px;font-size:16px}
.e-key--block{width:100%}
.e-key--icon{width:var(--h);padding:0}
.e-key:disabled,.e-key[aria-disabled=true]{filter:grayscale(.6);opacity:.5;cursor:not-allowed;pointer-events:none}
.e-key:focus-visible{box-shadow:inset 0 1px 0 var(--hi,#ffffff59),0 var(--lift) 0 var(--base),var(--e-focus)}
html[data-input=pointer] .e-key:focus-visible{box-shadow:inset 0 1px 0 var(--hi,#ffffff59),inset 0 -1px 0 #00000014,0 var(--lift) 0 var(--base),0 calc(var(--lift) + 4px) 12px var(--glow,#0c35ba33)}
html[data-input=pointer] .e-key:focus-visible:active{box-shadow:inset 0 1px 0 var(--hi,#ffffff40),inset 0 -1px 0 #00000014,0 2px 0 var(--base),0 4px 8px var(--glow,#0c35ba26)}
.e-dialog:focus-visible{box-shadow:var(--e-sh-dialog)}
.e-key .e-logo{--e-logo:18px}
/* arrows are rules: --go adds →, target=_blank adds ↗ */
.e-key--go::after{content:"\2192";font-size:1.05em}
a.e-key[target=_blank]::after,a.e-link[target=_blank]::after{content:"\2197";font-size:.95em;opacity:.85}
/* copy: both labels in one grid cell = constant width; copied = ✓, same colour, arrow hidden (space kept) */
.e-copy{display:inline-grid;grid-auto-flow:column;justify-content:center;align-items:center}
.e-copy>.e-copy__idle,.e-copy>.e-copy__done{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.e-copy>.e-copy__done{visibility:hidden}
.e-copy>.e-copy__done::before{content:"\2713";font-weight:600}
.e-copy[data-state=copied]>.e-copy__idle{visibility:hidden}
.e-copy[data-state=copied]>.e-copy__done{visibility:visible}
.e-copy[data-state=copied]::after{visibility:hidden}
/* kbd = a mini keycap, same family */
.e-kbd{display:inline-flex;align-items:center;height:22px;padding:0 7px;margin:0 1px 2px;border-radius:6px;font:500 12px/1 var(--e-font);color:var(--e-ink);
  background:linear-gradient(180deg,var(--e-key2-top),var(--e-key2-bottom));box-shadow:inset 0 1px 0 #fff,0 2px 0 var(--e-key2-base)}

/* ================= 5. LINK, BADGE ================= */
.e-link{color:var(--e-ink);font-weight:500;text-decoration:underline;text-decoration-color:#16251e40;text-underline-offset:4px}
.e-link:hover{text-decoration-color:currentColor}
.e-link--go::after{content:" \2192"}
.e-back{display:inline-flex;gap:6px;font-size:var(--e-fs-small);color:var(--e-muted);text-decoration:none} .e-back::before{content:"\2190"}
.e-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--e-r-pill);background:var(--e-tint);color:var(--e-ink);font:500 12.5px/1 var(--e-font);white-space:nowrap;max-width:100%}
@media (max-width:640px){.e-badge{height:auto;min-height:26px;padding-block:6px;line-height:1.3;white-space:normal}}
.e-badge--blue{background:var(--e-blue-soft);color:var(--e-blue-base)}
.e-badge--success{background:var(--e-success-soft);color:var(--e-success)}
.e-badge--warn{background:var(--e-warn-soft);color:var(--e-warn)}
.e-badge--error{background:var(--e-error-soft);color:var(--e-error)}
.e-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* ================= 6. CARD ================= */
.e-card{position:relative;display:block;background:var(--e-surface);border-radius:var(--e-r-card);box-shadow:var(--e-sh-card);padding:var(--e-s6);color:inherit;text-decoration:none}
a.e-card{transition:transform var(--e-t-hover) var(--e-ease),box-shadow var(--e-t-hover) var(--e-ease)}
a.e-card:hover,.e-card.is-hover{transform:translateY(-3px);box-shadow:var(--e-sh-card-hover)}
.e-card__head{display:flex;gap:var(--e-s3);align-items:center}
.e-card__icon{flex:none;width:40px;height:40px;border-radius:10px;background:var(--e-blue-soft);display:grid;place-items:center;color:var(--e-blue)}
.e-card__icon svg{width:20px;height:20px}
.e-card__titles{min-width:0;flex:1}
.e-card__name{font-size:16px;font-weight:500;letter-spacing:-.015em;line-height:1.25}
.e-card__sub{font-size:var(--e-fs-meta);line-height:1.35;color:var(--e-muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}  /* wraps: "Company · Person" next to a two-mark pair */
.e-card__body{margin-top:var(--e-s3);color:var(--e-muted);font-size:var(--e-fs-small);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.e-card__foot{margin-top:var(--e-s4);display:flex;gap:var(--e-s3);align-items:center;flex-wrap:wrap;font-size:var(--e-fs-meta);color:var(--e-muted)}
.e-card__foot b{color:var(--e-ink);font-weight:500}
.e-card--center{display:grid;justify-items:center;text-align:center;gap:10px;padding:var(--e-s5)}
.e-plan{display:flex;flex-direction:column;gap:var(--e-s4);padding:var(--e-s8)}
.e-plan__price{font-size:48px;line-height:1;letter-spacing:-.04em;font-weight:500}
.e-plan__price small{display:block;margin-top:8px;font-size:var(--e-fs-small);letter-spacing:0;color:var(--e-muted);font-weight:400}
.e-plan__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--e-fs-small)}
.e-plan__list li{display:flex;gap:10px;align-items:baseline}
.e-plan__list li::before{content:"\2713";color:var(--e-blue);font-weight:600}
.e-plan__cta{margin-top:auto;display:grid;gap:var(--e-s2)}
.e-skel{display:block;height:12px;width:var(--w,100%);border-radius:6px;background:linear-gradient(90deg,var(--e-tint),var(--e-sunken),var(--e-tint));background-size:200% 100%;animation:e-shimmer 1.4s linear infinite}
@keyframes e-shimmer{to{background-position:-200% 0}}

/* ================= 7. AVATAR (.e-portrait) + CREATOR ================= */
/* ONE component for every creator. Same tile (sky gradient + cloud), same ink #183ABE, same 3px halftone grid:
   person = portrait cut-out · --company = logo cut-out, one logo size (46% of tile height), centred
   person + company = portrait + __badge (company logo on a white chip, bottom right; hidden under 72px, use the .e-avatars pair instead)
   --mono = initials, when no image exists. Sizes: tile (416:300) · --square (rows 72, creator page 96) · --avatar (card 40, skill header 56, inline 24) */
.e-portrait{position:relative;display:block;flex:none;aspect-ratio:416/300;border-radius:var(--e-r-card);overflow:hidden;background:linear-gradient(var(--e-sky-top),var(--e-paper));isolation:isolate;container-type:inline-size}
.e-portrait::before{content:"";position:absolute;z-index:-1;inset:3% -14% auto 48%;aspect-ratio:900/640;background:url(v3-cr-cloud.webp) center/contain no-repeat;image-rendering:pixelated;opacity:.95}
.e-portrait>img{position:absolute;left:50%;bottom:-6%;width:72%;height:auto;transform:translateX(-50%);image-rendering:pixelated}
.e-portrait--square{aspect-ratio:1/1;width:var(--size,96px);border-radius:14px}
.e-portrait--square>img{width:96%;bottom:-8%;image-rendering:auto}
.e-portrait--square::before{inset:4% -30% auto 30%}
.e-portrait--avatar{aspect-ratio:1/1;width:var(--size,32px);border-radius:calc(var(--size,32px)*.28)}
.e-portrait--avatar::before{display:none}
.e-portrait--avatar>img{width:118%;bottom:-14%;image-rendering:auto}
/* company: logo centred, one size on every tile shape */
.e-portrait--company>img,.e-portrait--company.e-portrait--square>img,.e-portrait--company.e-portrait--avatar>img{left:50%;top:50%;bottom:auto;width:auto;height:46%;aspect-ratio:1;transform:translate(-50%,-50%)}
.e-portrait--company:not(.e-portrait--avatar):not(.e-portrait--square)>img{top:54%}
.e-portrait--avatar.e-portrait--company>img{height:54%}
/* fallback: initials, ink on the tile */
.e-portrait--mono{display:grid;place-items:center}
.e-portrait--mono>b{font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--e-blue-ink);font-size:22cqi}
.e-portrait--mono.e-portrait--square>b,.e-portrait--mono.e-portrait--avatar>b{font-size:38cqi}
/* from 64px up the initials take the portraits' 3px halftone grid; below that they stay solid to read */
@container (min-width:64px){.e-portrait--mono>b{font-weight:600;color:transparent;background:radial-gradient(circle,var(--e-blue-ink) 1.25px,transparent 1.45px) 0 0/3px 3px;-webkit-background-clip:text;background-clip:text}}
/* company badge on a person */
/* photo = the creator's own square picture (GitHub avatar), pre-toned to the same blue duotone as the portrait cuts; fills the tile */
.e-portrait--photo::before{display:none}
.e-portrait--photo>img,.e-portrait--photo.e-portrait--avatar>img,.e-portrait--photo.e-portrait--square>img{inset:0;width:100%;height:100%;transform:none;object-fit:cover;image-rendering:auto}
/* initials tile (no picture anywhere): the dark end of the photo duotone, one of five blues fixed per name (partials.tint),
   light initials, and the portraits' 3px halftone grid fading in from the lower corner, so it reads as a portrait without a face */
.e-portrait--t0{--e-mono-bg:#122c9c}
.e-portrait--t1{--e-mono-bg:var(--e-blue-base)}
.e-portrait--t2{--e-mono-bg:var(--e-blue-ink)}
.e-portrait--t3{--e-mono-bg:#1f4fd8}
.e-portrait--t4{--e-mono-bg:#2a5fc4}
.e-portrait--mono[class*=e-portrait--t]{background:linear-gradient(160deg,color-mix(in srgb,var(--e-mono-bg) 82%,#fff),var(--e-mono-bg) 70%)}
.e-portrait--mono[class*=e-portrait--t]::before{display:block;inset:0;aspect-ratio:auto;background:radial-gradient(circle,var(--e-sky-top) .75px,transparent .95px) 0 0/3px 3px;opacity:.28;image-rendering:auto;-webkit-mask:linear-gradient(150deg,transparent 40%,#000);mask:linear-gradient(150deg,transparent 40%,#000)}
.e-portrait--mono[class*=e-portrait--t]>b{color:var(--e-sky-top);font-weight:600}
@container (min-width:64px){.e-portrait--mono[class*=e-portrait--t]>b{background-image:radial-gradient(circle,var(--e-sky-top) 1.25px,transparent 1.45px)}}

.e-portrait__badge{position:absolute;right:6%;bottom:6%;width:max(16px,30cqi);aspect-ratio:1;border-radius:28%;background:var(--e-surface);box-shadow:0 1px 2px #16251e1f,0 4px 10px #16251e1f;display:grid;place-items:center}
.e-portrait__badge img{width:66%;height:66%}
.e-portrait:not(.e-portrait--avatar):not(.e-portrait--square) .e-portrait__badge{width:21cqi;right:4%;bottom:5%}
@container (max-width:71px){.e-portrait__badge{display:none}}
/* two marks side by side at small sizes: company first, then the person. No overlap, no ring */
.e-avatars{display:inline-flex;gap:4px;flex:none}
/* byline: who made a skill (skill page header, sidebar, cards) */
.e-byline{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}
.e-byline>span:last-child{display:grid;min-width:0;line-height:1.3}
.e-byline b{font-weight:500;font-size:15px;letter-spacing:-.01em}
.e-byline>span:last-child>span{font-size:var(--e-fs-meta);color:var(--e-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-byline[style*="--size:24px"] b{font-size:14px}
a.e-byline:hover b{text-decoration:underline;text-underline-offset:3px}

.e-creator{display:block;color:inherit;text-decoration:none}
.e-creator>b{display:block;margin-top:var(--e-s4);font-size:20px;font-weight:500;letter-spacing:-.02em}
.e-creator>span:last-child{display:block;margin-top:2px;color:var(--e-muted);font-size:15px;line-height:1.5}
.e-creator .e-portrait{transition:transform .35s var(--e-ease),box-shadow .35s var(--e-ease)}
.e-creator:hover .e-portrait{transform:translateY(-5px);box-shadow:var(--e-sh-card-hover)}
.e-creator--row{display:grid;grid-template-columns:var(--size,72px) 1fr;column-gap:var(--e-s4);align-items:center}
.e-creator--row>.e-portrait{grid-row:span 2}
.e-creator--row>b{margin-top:0;align-self:end;font-size:17px}
.e-creator--row>span:last-child{align-self:start;font-size:14px}
@media (max-width:700px){
  .e-creator:not(.e-creator--row){display:grid;grid-template-columns:88px 1fr;column-gap:var(--e-s4);align-items:center}
  .e-creator:not(.e-creator--row)>.e-portrait{grid-row:span 2;aspect-ratio:1/1;width:88px;border-radius:14px}
  .e-creator:not(.e-creator--row)>.e-portrait:not(.e-portrait--company)>img{width:96%;bottom:-8%;image-rendering:auto}
  .e-creator:not(.e-creator--row)>.e-portrait .e-portrait__badge{width:30cqi;right:6%;bottom:6%}
  .e-creator:not(.e-creator--row)>.e-portrait--mono>b{font-size:38cqi}
  .e-creator:not(.e-creator--row)>.e-portrait--company>img{top:50%}
  .e-creator:not(.e-creator--row)>b{margin-top:0;align-self:end}
  .e-creator:not(.e-creator--row)>span:last-child{align-self:start;font-size:14px}
}

/* ================= 8. INPUT, SEARCH, CODE ================= */
.e-field{display:grid;gap:6px} .e-field+.e-field{margin-top:var(--e-s3)}
.e-label{font-size:var(--e-fs-small);font-weight:500}
.e-help{font-size:var(--e-fs-meta);color:var(--e-muted)}
.e-input{height:48px;width:100%;padding:0 14px;border:0;border-radius:var(--e-r-sm);background:var(--e-sunken);color:var(--e-ink);font:400 15px/1 var(--e-font)}
.e-input::placeholder{color:#59685fb3}
.e-input:focus,.e-input.is-focus{outline:none;background:var(--e-surface);box-shadow:var(--e-focus)}
.e-field--error .e-input{background:var(--e-error-soft)} .e-field--error .e-help{color:var(--e-error)}
.e-search{display:flex;align-items:center;gap:var(--e-s3);height:66px;padding:0 9px 0 20px;background:var(--e-surface);border-radius:18px;box-shadow:var(--e-sh-card);width:100%;max-width:720px}
.e-search:focus-within{box-shadow:var(--e-sh-card),var(--e-focus)}
.e-search>svg{width:18px;height:18px;color:var(--e-muted);flex:none}
.e-search input{flex:1;min-width:0;border:0;background:none;font:400 17px/1 var(--e-font);color:var(--e-ink);outline:none}
.e-search input:focus-visible{box-shadow:none}   /* the whole field carries the ring (:focus-within) */
.e-search .e-key{margin-bottom:3px}
.e-chips{display:flex;flex-wrap:wrap;gap:8px}
.e-code{display:block;margin:0;padding:14px 16px;border-radius:var(--e-r-sm);background:var(--e-sunken);font:400 13.5px/1.6 var(--e-mono);color:var(--e-ink);white-space:pre-wrap;word-break:break-word}
.e-code--scroll{white-space:pre;overflow-x:auto;word-break:normal;overflow-wrap:normal}

/* ================= 9. DIALOG (from the live Get Edge dialog + v2) ================= */
.e-dialog{container:e-dlg/inline-size;width:min(548px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:var(--e-r-dialog);background:var(--e-surface);color:var(--e-ink);box-shadow:var(--e-sh-dialog)}
.e-dialog::backdrop{background:#16251e59}
.e-dialog__in{padding:28px 28px 22px}
.e-dialog__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.e-dialog__close{--h:34px}
.e-opt{padding-block:16px;display:grid;gap:10px}
.e-opt+.e-opt{box-shadow:inset 0 1px 0 var(--e-divider)}
.e-opt__row{display:flex;align-items:center;gap:12px}
.e-opt__logos{display:flex;gap:6px;color:var(--e-ink)}
.e-opt__name{flex:1;min-width:0;font-size:16px;font-weight:500;letter-spacing:-.01em}
.e-opt__row .e-key{flex:none;min-width:172px}
.e-opt__help{font-size:var(--e-fs-small);line-height:1.6;color:var(--e-muted)}
.e-opt__help b{color:var(--e-ink);font-weight:500}
.e-reveal{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:500 14px/1 var(--e-font);color:var(--e-muted);cursor:pointer}
.e-reveal::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--e-t-hover)}
.e-reveal[aria-expanded=true]::after{transform:translateY(1px) rotate(-135deg)}
.e-reveal:hover{color:var(--e-ink)}
.e-steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:var(--e-fs-small);color:var(--e-muted)}
.e-dialog__tail{display:flex;justify-content:space-between;padding-top:14px;font-size:var(--e-fs-meta);color:var(--e-muted)}
.e-dialog__tail a{color:var(--e-ink)}
.e-dialog[open]{animation:e-pop .22s var(--e-ease)}
@keyframes e-pop{from{opacity:0;transform:translateY(8px) scale(.985)}}
/* narrow dialog (<500px: phones, sheet columns): name on its own line, keys share the row below, equal width */
@container e-dlg (max-width:499px){.e-dialog__in{padding:22px 18px 16px}.e-opt__row{flex-wrap:wrap;row-gap:12px}
  .e-opt__name{flex:1 0 calc(100% - 64px)}.e-opt__row .e-key{flex:1 1 0;min-width:0}}

/* ================= 10. STRUCTURE: section head, stats, tabs, FAQ ================= */
.e-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--e-s3) var(--e-s8);margin-bottom:var(--e-s8)}
.e-head>div{display:grid;gap:var(--e-s3)}
.e-stats{display:flex;flex-wrap:wrap;gap:var(--e-s6) var(--e-s12)}
.e-stat{display:grid;gap:4px} .e-stat__n{font-size:44px;line-height:1;letter-spacing:-.04em;font-weight:500;font-variant-numeric:tabular-nums}
.e-stat__l{font-size:var(--e-fs-small);color:var(--e-muted);max-width:24ch}
.e-faq{display:grid;gap:10px;max-width:760px}
.e-faq details{background:var(--e-surface);border-radius:14px;box-shadow:var(--e-sh-card)}
.e-faq summary{display:flex;justify-content:space-between;gap:var(--e-s4);padding:18px 20px;font-weight:500;cursor:pointer;list-style:none}
.e-faq summary::-webkit-details-marker{display:none}
.e-faq summary::after{content:"+";font-size:20px;line-height:1}
.e-faq details[open] summary::after{content:"\2212"}
.e-faq details>div{padding:0 20px 18px;color:var(--e-muted);font-size:15px}

/* ================= 11. PAGE ANATOMY: header · hero · sections · closing bar · footer ================= */
.e-nav{position:sticky;top:0;z-index:5;background:#f5f3ebeb;backdrop-filter:blur(10px)}
.e-nav__in{display:flex;align-items:center;justify-content:space-between;height:var(--e-nav-h)}
.e-brand{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:22px;letter-spacing:-.045em;text-decoration:none;color:var(--e-ink)}
.e-brand i{width:22px;height:14.6px;border-radius:0;background:currentColor;-webkit-mask:url(data:image/png;base64,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) center/contain no-repeat;mask:url(data:image/png;base64,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) center/contain no-repeat}
.e-brand--meadow{color:var(--e-meadow-ink)}
.e-nav__links{display:flex;align-items:center;gap:var(--e-s6);font-size:var(--e-fs-small)}
.e-nav__links a:not(.e-key){text-decoration:none}
.e-nav__links a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
.e-nav__links .e-key{margin-bottom:0}
@media (max-width:560px){.e-nav__links a:not(.e-key):not(:first-child){display:none}}
/* hero: eyebrow, 2-line title, lede, primary + secondary key, works-with row */
.e-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:var(--e-s5);padding-block:var(--e-s16) var(--e-s12)}
.e-hero--center{justify-items:center;text-align:center}
.e-hero--center .e-lede{margin-inline:auto}
.e-hero__actions{display:flex;flex-wrap:wrap;gap:var(--e-s3);align-items:center;margin-top:var(--e-s2)}
.e-hero__art{position:absolute;z-index:-1;right:calc(-1*var(--e-gutter));top:8px;width:clamp(300px,36vw,560px);aspect-ratio:1;background:url(sky.webp) left center/cover no-repeat;border-radius:50% 0 0 50%;pointer-events:none}
.e-page{position:relative;isolation:isolate;overflow-x:clip}
@media (max-width:1000px){.e-hero__art{display:none}}
/* closing: the ONE page ending, .e-closing (tools/chrome/stamp_close.py renders it above every footer but the
   homepage's): pricing's "Get started in seconds." (or a skill page's "Give your agent <Skill>."), edge tile, keys,
   halftone cloud bank flowing into the footer hills. The cloud art box is the bottom padding only, starting 18px under
   the keys (art never sits behind text); its top 32px fade paper to sky. Phones draw the desktop bank at 1500 css px
   (one image px per device px on 3x screens), so the dots stay crisp. A name longer than the line breaks inside it. */
.e-closing{--hills:clamp(150px,17vw,300px);--art:calc(var(--hills) + 52px);position:relative;isolation:isolate;margin-top:var(--e-s16);padding:110px var(--e-gutter) calc(var(--hills) + 70px);text-align:center;display:grid;justify-items:center;gap:var(--e-s4)}
.e-closing::before{content:"";position:absolute;z-index:-1;left:0;right:0;bottom:0;height:var(--art);background:url(v9-cloud-bank.webp) center bottom/max(100%,1500px) auto no-repeat;-webkit-mask-image:linear-gradient(#0000,#000 32px);mask-image:linear-gradient(#0000,#000 32px);pointer-events:none}
.e-closing .e-h2{font-size:clamp(40px,4.6vw,68px);line-height:1;letter-spacing:-.04em;max-width:min(18ch,100%);min-width:0;overflow-wrap:anywhere;text-wrap:balance}
.e-closing .e-lede{color:var(--e-ink);margin-inline:auto}
.e-closing__mark{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--e-surface)}
.e-closing .e-hero__actions{justify-content:center}
@media (max-width:700px){.e-closing{--hills:34vw;--art:calc(var(--hills) + 38px);padding:72px var(--e-gutter) calc(var(--hills) + 56px)}.e-closing::before{background-size:1500px auto}}
@media (max-width:700px) and (min-resolution:2.5dppx){.e-closing::before{background-size:1166.667px auto}}
/* footer: hills band over the meadow */
.e-footer{position:relative;color:var(--e-meadow-ink);background:var(--e-meadow)}
.e-footer::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 2px);height:clamp(150px,17vw,300px);background:url(hills-band.webp) center top/max(100%,1100px) auto no-repeat}
@media (max-width:700px){.e-footer::before{height:34vw;background:url(hills-band-mobile.webp) center top/100% auto no-repeat}}
.e-footer__in{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--e-s8);padding-block:var(--e-s10) var(--e-s12)}
.e-footer h4{margin:0 0 10px;font:500 13px/1 var(--e-font);color:#e6ecdfa8}
.e-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:var(--e-fs-small)}
.e-footer a{color:var(--e-meadow-ink);text-decoration:none}
.e-footer a:hover{text-decoration:underline}
.e-footer__setup{margin:6px 0 0;font-size:var(--e-fs-small);line-height:1.5;color:#e6ecdfa8;overflow-wrap:anywhere}
.e-footer__setup a{text-decoration:underline;text-decoration-color:#e6ecdf59;text-underline-offset:3px}
.e-footer__social{display:flex;gap:16px;align-items:center;margin-top:12px}
.e-footer__social a{color:inherit;display:inline-flex;opacity:.85}
.e-footer__setup a:hover{text-decoration-color:currentColor}
@media (max-width:800px){.e-footer__in{grid-template-columns:1fr 1fr}.e-footer__in>:first-child{grid-column:1/-1}}

/* ================= 12. EMPTY / ERROR ================= */
.e-hero--error{min-height:520px;align-content:center}
.e-hero--error .e-code404{position:absolute;right:var(--e-gutter);top:50%;transform:translateY(-50%)}
@media (max-width:900px){.e-hero--error{min-height:0}.e-hero--error .e-code404{position:static;transform:none;font-size:96px}}
.e-code404{display:flex;align-items:center;gap:12px;font-size:clamp(88px,12vw,160px);line-height:.9;letter-spacing:-.06em;font-weight:500;color:var(--e-ink)}
.e-code404 i{width:.7em;height:.7em;border-radius:50%;background:url(sky.webp) left center/cover;box-shadow:var(--e-sh-card);display:grid;place-items:center}
.e-code404 i img{width:38%;image-rendering:pixelated}

/* ================= 13. SKILL PAGE PARTS + STATES (from the live skill, explore and tasks pages) ================= */
/* tabs: a sunken track, the selected tab is a white chip. Arrow keys move between tabs */
.e-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--e-tint);max-width:100%;overflow-x:auto;scrollbar-width:none}
.e-tabs [role=tab]{flex:none;height:38px;padding:0 16px;border:0;border-radius:10px;background:none;font:500 14px/1 var(--e-font);color:var(--e-muted);cursor:pointer;transition:background var(--e-t-hover),color var(--e-t-hover)}
.e-tabs [role=tab]:hover{color:var(--e-ink)}
.e-tabs [role=tab][aria-selected=true]{background:var(--e-surface);color:var(--e-ink);box-shadow:0 1px 2px #16251e14,0 4px 10px #16251e0f}
.e-tabpanel{padding-top:var(--e-s5)}
/* sticky tabs, .e-tabs--sticky: the tab track pins right under the sticky nav (top = --e-nav-h, so it never detaches
   and never floats at y=0); only while it is stuck (.is-stuck, set by edge-ds2.js) a full-width paper band 12px above
   and below it hides what scrolls under, so a card is never cut mid-row behind a see-through bar. At the end of its
   section it slides up under the nav and hides (.is-under), so it never shows through the nav. Panels scroll into
   view below the pair. */
.e-tabs--sticky{position:sticky;top:var(--e-nav-h);z-index:4;transition:box-shadow var(--e-t-hover)}
.e-tabs--sticky.is-stuck{box-shadow:0 0 0 100vmax var(--e-paper);clip-path:inset(-12px -100vmax)}
.e-tabs--sticky.is-under{visibility:hidden}
.e-tabs--sticky~.e-tabpanel{scroll-margin-top:calc(var(--e-nav-h) + 72px)}
/* star, .e-star: the quiet "Star" chip next to the byline (skill and collection pages; backend edge-mcp web-stars).
   Signed out: the star is kept in this browser and a flat panel offers a one-time email link. States: default,
   hover, starred (aria-pressed), tip, panel open, sent. Markup: tools/ds2/partials.star(); behaviour: edge-ds2.js. */
.e-star-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0;position:relative}
.e-star{display:inline-flex;align-items:center;gap:6px}
.e-key.e-star__key{--h:32px;--lift:0px;min-width:96px;padding:0 13px 0 10px;gap:6px;margin:0;border-radius:var(--e-r-pill);background:var(--e-tint);color:var(--e-ink);box-shadow:none;font:500 13px/1 var(--e-font);letter-spacing:.01em}
.e-key.e-star__key:hover{filter:none;background:var(--e-divider)}
.e-key.e-star__key:active{transform:none;box-shadow:none}
.e-key.e-star__key:focus-visible{box-shadow:var(--e-focus)}
.e-key.e-star__key[aria-pressed=true]{background:var(--e-blue-soft);color:var(--e-blue-ink)}
.e-star__key svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.e-star__key[aria-pressed=true] svg{fill:var(--e-blue);stroke:var(--e-blue)}
.e-star__key.is-pop svg{animation:e-star-pop .38s cubic-bezier(.2,.9,.3,1.4)}
@keyframes e-star-pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.e-star__key[data-tip]:hover::after,.e-star__key.is-tip::after{content:attr(data-tip);position:absolute;z-index:5;top:calc(100% + 6px);left:0;white-space:nowrap;padding:5px 8px;border-radius:6px;background:var(--e-ink);color:var(--e-paper);font:500 12px/1.2 var(--e-font);pointer-events:none}
.e-star.is-open .e-star__key::after{display:none}
.e-star__n{font-size:var(--e-fs-meta);font-weight:500;color:var(--e-muted);font-variant-numeric:tabular-nums}
.e-star__panel{position:absolute;z-index:20;top:calc(100% + 8px);left:0;width:min(440px,calc(100vw - 32px));padding:16px 18px;border-radius:var(--e-r-sm);background:var(--e-surface);font-size:var(--e-fs-small);line-height:1.45;color:var(--e-ink);text-align:left}
.e-star__panel[hidden]{display:none}
.e-star__head{display:flex;align-items:center;gap:8px;margin:0 0 4px;font:500 14px/1.3 var(--e-font)}
.e-star__head svg{width:15px;height:15px;fill:var(--e-blue)}
.e-star__head .e-key{margin-left:auto}
.e-star__panel p{margin:0;color:var(--e-muted)}
.e-star__panel .e-star__err{margin:0 0 6px;color:var(--e-error)}
.e-star__form{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 6px}
.e-star__form .e-input{flex:1 1 200px;min-width:0;height:42px;width:auto}
.e-star__form .e-key,.e-star__agent .e-key{margin-bottom:0}
.e-star__panel small{display:block;font-size:12.5px;color:var(--e-muted)}
.e-star__panel small a{color:var(--e-blue-ink)}
.e-star__or{margin:12px 0 10px;font-size:12px;color:var(--e-muted)}
.e-star__agent{display:flex;align-items:center;gap:8px}
.e-star__agent code{flex:1;min-width:0;overflow-wrap:anywhere;padding:9px 11px;border-radius:8px;background:var(--e-sunken);font:12.5px/1.3 var(--e-mono);color:var(--e-ink)}
.e-star[data-specimen]{flex-wrap:wrap;align-items:flex-start}.e-star[data-specimen] .e-star__panel{position:static;flex-basis:100%;margin-top:8px}   /* sheet specimens: the panel in flow */
@media (max-width:560px){.e-star__panel{padding:14px}.e-star__form .e-key{flex:1 1 100%}.e-star__key[data-tip]:hover::after{display:none}}
@media (prefers-reduced-motion:reduce){.e-star__key.is-pop svg{animation:none}.e-tabs--sticky{transition:none}}
/* sourced facts: claim, one line, the source it links */
.e-facts{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-s3)}
.e-facts li{display:grid;gap:4px;padding:var(--e-s4) var(--e-s5);border-radius:14px;background:var(--e-sunken)}
.e-facts b{font-weight:500}
.e-facts p{font-size:var(--e-fs-small);color:var(--e-muted)}
.e-facts a{justify-self:start;font-size:var(--e-fs-meta);color:var(--e-ink)}
/* example run: the task, the skill Edge used, the result file */
.e-run{display:grid;gap:var(--e-s3);padding:var(--e-s5);border-radius:var(--e-r-card);background:var(--e-surface);box-shadow:var(--e-sh-card)}
.e-run__ask{justify-self:end;max-width:85%;padding:10px 14px;border-radius:14px 14px 4px 14px;background:var(--e-blue-soft);color:var(--e-blue-base);font-size:15px}
.e-run__used{justify-self:start}
.e-run__out{font-size:15px}
.e-file{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--e-sunken);min-width:0}
.e-file::before{content:"";flex:none;width:28px;height:34px;border-radius:5px;background:linear-gradient(225deg,var(--e-key2-base) 8px,var(--e-surface) 8px);box-shadow:0 1px 2px #16251e1a}
.e-file b{display:block;font-weight:500;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e-file span{font-size:var(--e-fs-meta);color:var(--e-muted)}
.e-file--play{width:100%;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.e-file--play::before{background:currentColor;clip-path:polygon(25% 15%,85% 50%,25% 85%);border-radius:0;box-shadow:none}
.e-file--play:hover b{text-decoration:underline}
.e-dl dd small+.e-link{display:inline-block;margin-top:4px}
.e-faq details[id]{scroll-margin-top:96px}
.e-dl dd code{font-size:.88em}
/* file viewer: file list, header with size + download, the file */
.e-files{display:grid;grid-template-columns:fit-content(300px) minmax(0,1fr);gap:var(--e-s4);align-items:start}
.e-files__nav{display:grid;gap:4px}
.e-files__nav button{height:38px;padding:0 12px;border:0;border-radius:10px;background:none;text-align:left;font:500 13.5px/1 var(--e-mono);color:var(--e-muted);cursor:pointer;white-space:nowrap}
.e-files__nav button:hover{color:var(--e-ink)}
.e-files__nav button[aria-current=true]{background:var(--e-surface);color:var(--e-ink);box-shadow:0 1px 2px #16251e14,0 4px 10px #16251e0f}
.e-files__doc{display:grid;gap:10px;min-width:0}
.e-files__head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;font-size:var(--e-fs-meta);color:var(--e-muted)}
.e-files__head b{font:500 14px/1 var(--e-mono);color:var(--e-ink)}
.e-files .e-code{max-height:260px;overflow:auto}
@media (max-width:640px){.e-files{grid-template-columns:1fr}.e-files__nav{display:flex;overflow-x:auto}.e-files__nav button{flex:none}}
/* details list: label left, value right (skill sidebar, skill details) */
.e-dl{display:grid;margin:0;container-type:inline-size}
.e-dl>div{display:grid;grid-template-columns:minmax(90px,140px) minmax(0,1fr);gap:var(--e-s4);padding-block:14px;align-items:start}
.e-dl>div+div{box-shadow:inset 0 1px 0 var(--e-divider)}
.e-dl dt{font-size:var(--e-fs-meta);color:var(--e-muted);padding-top:2px}
.e-dl dd{margin:0;font-size:15px;min-width:0;overflow-wrap:break-word}
.e-dl dd small{display:block;color:var(--e-muted);font-size:var(--e-fs-meta)}
@container (max-width:380px){.e-dl>div{grid-template-columns:1fr;gap:6px}}   /* narrow lists (side panel, phone) stack label over value */
/* data table (tasks, benchmarks): scrolls inside its card, never the page */
.e-table{overflow-x:auto;border-radius:var(--e-r-card);background:var(--e-surface);box-shadow:var(--e-sh-card)}
.e-table table{border-collapse:collapse;width:100%;min-width:680px;font-size:14px}
.e-table th{text-align:left;font-weight:500;font-size:var(--e-fs-meta);color:var(--e-muted);padding:14px 16px;background:var(--e-sunken)}
.e-table td{padding:14px 16px;vertical-align:middle} .e-table tr+tr td{box-shadow:inset 0 1px 0 var(--e-divider)}
.e-table code{font:400 12.5px/1.4 var(--e-mono)}
/* empty state: scout on the sky, one line, one way out */
.e-empty{display:grid;justify-items:center;text-align:center;gap:var(--e-s3);padding:var(--e-s10) var(--e-s6);border-radius:var(--e-r-card);background:var(--e-sunken)}
.e-empty__art{width:72px;height:72px;border-radius:50%;background:url(sky.webp) left center/cover;display:grid;place-items:center;box-shadow:var(--e-sh-card)}
.e-empty__art img{width:40%;image-rendering:pixelated}
.e-empty .e-lede{font-size:15px}
/* toast: one line, bottom centre, leaves by itself */
.e-toast{position:fixed;z-index:20;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);opacity:0;pointer-events:none;padding:12px 18px;border-radius:12px;background:var(--e-ink);color:#fff;font:500 14px/1.2 var(--e-font);box-shadow:var(--e-sh-dialog);transition:opacity .2s,transform .2s var(--e-ease)}
.e-toast[data-show]{opacity:1;transform:translate(-50%,0)}
.e-toast--static{position:static;transform:none;opacity:1;display:inline-block;box-shadow:var(--e-sh-card)}
/* consent bar: privacy choice, two small keys */
.e-consent{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-s3) var(--e-s5);padding:16px 18px;border-radius:16px;background:var(--e-surface);box-shadow:var(--e-sh-dialog);font-size:var(--e-fs-small);max-width:640px}
.e-consent p{flex:1 1 260px;color:var(--e-muted)} .e-consent p b{color:var(--e-ink);font-weight:500}
.e-consent__keys{display:flex;gap:8px}
.e-consent[data-floating]{position:fixed;z-index:15;left:16px;right:16px;bottom:16px;margin-inline:auto}
/* while the floating consent bar shows, the page ends above it (as the landing does with body padding): bar + 16px inset + 16px air.
   Bar height measured in Chromium: 99px from 640px up, 121-150px from 380px, 172px below 380px. */
body:has(.e-consent[data-floating]:not([hidden])){padding-bottom:132px}
@media (max-width:639px){body:has(.e-consent[data-floating]:not([hidden])){padding-bottom:184px}}
@media (max-width:379px){body:has(.e-consent[data-floating]:not([hidden])){padding-bottom:206px}}

/* [hidden] always wins over a component's display */
.e-wrap [hidden],.e-dialog [hidden],[hidden]{display:none}

/* ================= 14. SITE ANATOMY (v2.2: added for the real pages; each defined once, also on the sheet) ================= */
.e-skip{position:absolute;left:-9999px;top:8px;z-index:20;padding:10px 14px;border-radius:10px;background:var(--e-surface);color:var(--e-ink);box-shadow:var(--e-sh-card)}
.e-skip:focus{left:12px}
button.e-link{border:0;background:none;padding:0;font:inherit;cursor:pointer}
.e-footer button.e-link{color:var(--e-meadow-ink);font-weight:400;text-decoration:none}
.e-footer button.e-link:hover{text-decoration:underline}
.e-row--wrap{flex-wrap:wrap;gap:8px 14px}
.e-stack--loose{gap:var(--e-s8)}
/* split hero: copy left, a figure right (skill pages, landing) */
.e-hero--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start;gap:var(--e-s10);padding-block:var(--e-s12) var(--e-s10)}
.e-hero--split>.e-stack{justify-items:start;gap:var(--e-s4)}
.e-hero--split .e-title{font-size:var(--e-fs-hero);line-height:1.02;overflow-wrap:anywhere}
@media (max-width:980px){.e-hero--split{grid-template-columns:1fr;gap:var(--e-s8)}}
/* two columns: content + details aside */
.e-cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--e-s10);align-items:start}
.e-cols>aside{padding:var(--e-s5);border-radius:var(--e-r-card);background:var(--e-surface);box-shadow:var(--e-sh-card)}
@media (max-width:900px){.e-cols{grid-template-columns:1fr}}
/* use chips: what a skill does */
.e-uses{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.e-uses li{padding:8px 14px;border-radius:var(--e-r-pill);background:var(--e-surface);box-shadow:var(--e-sh-card);font-size:var(--e-fs-small);font-weight:500}
/* numbered steps as cards */
.e-steps-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.e-why{display:grid;gap:var(--e-s4)}
.e-why .e-row{flex-wrap:nowrap;align-items:center}
/* example run: header row, media, lists */
.e-run{margin:0;min-width:0}
.e-run__head{display:flex;align-items:baseline;gap:10px;font-size:var(--e-fs-small)}
.e-run__head b{font-weight:500}
.e-run__head span{color:var(--e-muted);font-size:var(--e-fs-meta)}
.e-run__media{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;border-radius:14px;background:var(--e-sunken)}
.e-run__list{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px}
.e-run .e-h3{font-size:17px}
/* a card that is a button (switches a tab) */
.e-card--action{display:grid;gap:6px;text-align:left;font:inherit;color:inherit;border:0;cursor:pointer;width:100%}
.e-card--action .e-card__name::after{content:" \2192"}
.e-card .e-dl,.e-dl.e-card{padding:var(--e-s5)}
.e-dl ul{margin:6px 0 0;padding-left:18px;font-size:var(--e-fs-small);color:var(--e-muted)}
.e-plan__price s{text-decoration-thickness:2px;color:var(--e-muted)}
.e-faq--details{max-width:none}
.e-faq--details summary{align-items:center}
.e-faq--details summary .e-badge{margin-left:auto}
.e-faq--details details>div{color:var(--e-ink)}
.e-faq--details p{font-size:15px;color:var(--e-muted)}
.e-consent .consent-copy{flex:1 1 260px;display:grid;gap:2px}
.e-consent .consent-copy strong{font-weight:500}
.e-consent .consent-copy p{color:var(--e-muted)}
.e-consent__keys a{font-size:var(--e-fs-meta);color:var(--e-ink);align-self:center}
/* landing: cycling headline word (reduced motion keeps the first word) */
.e-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.e-cycle{display:inline-grid}
.e-cycle__w{grid-area:1/1;opacity:0;transform:translateY(.25em);transition:opacity .5s var(--e-ease),transform .5s var(--e-ease)}
.e-cycle__w.is-on{opacity:1;transform:none}
.e-cycle__w.is-out{opacity:0;transform:translateY(-.25em)}
/* landing: plain vs with-Edge comparison (real runs) */
.e-compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-s4)}
.e-compare__side{display:grid;align-content:start;justify-items:start;gap:var(--e-s3);padding:var(--e-s5);border-radius:var(--e-r-card);background:var(--e-sunken);min-width:0}
.e-compare__side--edge{background:var(--e-blue-soft)}
.e-compare__prompt{justify-self:start;max-width:none}
.e-chat{display:grid;gap:var(--e-s3);width:100%}
.e-chat p{max-width:90%;padding:10px 14px;border-radius:14px;background:var(--e-surface);font-size:15px;line-height:1.45;box-shadow:0 1px 2px #16251e14}
.e-chat b{display:block;font-size:var(--e-fs-meta);font-weight:500;color:var(--e-muted);margin-bottom:2px}
.e-chat__out{justify-self:end}
.e-shot{display:grid;gap:8px;margin:0;width:100%}
.e-shot b{font-size:var(--e-fs-meta);font-weight:500;color:var(--e-muted)}
.e-shot img{width:100%;height:auto;border-radius:12px;box-shadow:0 1px 2px #16251e1a}
.e-tagline{margin-top:var(--e-s8);text-align:center;font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;font-weight:500}
@media (max-width:700px){.e-compare{grid-template-columns:1fr}}
/* forms: honeypot, success text */
.e-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.e-help--good,.e-help[data-tone=good]{color:var(--e-success)}
.e-help[data-tone=bad]{color:var(--e-error)}
.e-stack>.e-tabs{justify-self:start}
.e-dl .e-byline span{min-width:0}.e-dl .e-byline span span{white-space:normal}

/* flat surfaces (design system 1.0; 404 first): no shadow on cards, search or art, no borders; keycaps keep their base shadow,
   focus rings stay. Hover = blue-soft fill + blue name instead of lift + shadow. */
.e-flat{--e-sh-card:0 0 #0000;--e-sh-card-hover:0 0 #0000}
/* outside main on a flat page: skip link, consent panel and toasts flat too; the Get Edge dialog keeps its shadow */
body:has(.e-flat){--e-sh-card:0 0 #0000;--e-sh-card-hover:0 0 #0000}
body:has(.e-flat) .e-consent,body:has(.e-flat) .e-toast{box-shadow:none}
.e-flat .e-search:focus-within{box-shadow:var(--e-focus)}
.e-flat a.e-card:hover,.e-flat .e-card.is-hover{transform:none;background:var(--e-blue-soft)}
.e-flat a.e-card:hover .e-card__name,.e-flat .e-card.is-hover .e-card__name{color:var(--e-blue)}


/*ds2:doc*/
/* ================= DOC: legacy content pages on DS2 (docs, tasks, evaluation, playbooks, legal, landers) ================= */
/* .e-doc styles plain content (headings, text, lists, tables, code, media) so a migrated page needs no page CSS.
   Legacy layout classes gain DS2 classes via assets/ds2/legacy-map.json; nothing here targets a legacy class. */
.e-doc{display:grid;gap:var(--e-s6);padding-block:var(--e-s10) calc(clamp(150px,17vw,300px) + var(--e-s12));min-width:0}
@media (max-width:700px){.e-doc{padding-bottom:calc(34vw + var(--e-s10))}}
.e-doc>*,.e-doc *{min-width:0}
.e-doc :where(h1){font-size:var(--e-fs-title);line-height:1.08;font-weight:var(--e-w-display);letter-spacing:var(--e-track);max-width:20ch}
.e-doc :where(h1) :where(span){display:block;color:var(--e-blue)}
.e-doc :where(h2){font-size:clamp(24px,2.4vw,32px);line-height:1.15;font-weight:var(--e-w-display);letter-spacing:-.03em}
.e-doc :where(h3){font-size:var(--e-fs-h3);line-height:1.3;font-weight:500;letter-spacing:-.02em}
.e-doc :where(h4,h5){font-size:var(--e-fs-body);font-weight:500;margin:0}
.e-doc :where(p,li,dd){max-width:72ch}
.e-doc :where(p){color:var(--e-ink)}
.e-doc :where(ul,ol){margin:0;padding-left:1.25em;display:grid;gap:6px}
.e-doc :where(ul.e-grid,ol.e-grid){list-style:none;padding:0}
.e-doc :where(a:not([class])){color:var(--e-ink);font-weight:500;text-decoration:underline;text-decoration-color:#16251e40;text-underline-offset:4px}
.e-doc :where(a:not([class])):hover{text-decoration-color:currentColor}
.e-doc :where(code:not(.e-code)){font:400 .9em/1.4 var(--e-mono);padding:1px 6px;border-radius:6px;background:var(--e-sunken)}
.e-doc :where(pre) code{padding:0;background:none}
.e-doc :where(blockquote){margin:0;padding:var(--e-s4) var(--e-s5);border-radius:var(--e-r-sm);background:var(--e-sunken);color:var(--e-muted)}
.e-doc :where(hr){height:1px;margin:var(--e-s4) 0;border:0;background:var(--e-divider)}
.e-doc :where(img,video){max-width:100%;height:auto;border-radius:var(--e-r-sm)}
.e-doc :where(figure){margin:0;display:grid;gap:8px}
.e-doc :where(figcaption){font-size:var(--e-fs-meta);color:var(--e-muted)}
.e-doc :where(svg:not([width])){width:1.25em;height:1.25em}
.e-doc .e-doc__icon:not([width]){flex:none;display:inline-block;width:auto;height:28px;max-width:120px;object-fit:contain;vertical-align:middle;border-radius:6px}
.e-doc svg.e-doc__icon:not([width]){width:20px;height:20px}
.e-doc .e-doc__icon :where(img,svg){width:auto;height:100%;max-width:none}
.e-doc :where(.e-doc__hero) img.e-doc__icon{height:56px;max-width:180px}
.e-doc :where(dl:not(.e-dl)){margin:0;display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr);gap:8px var(--e-s4)}
.e-doc :where(dl:not(.e-dl)) dd{margin:0}
.e-doc :where(section,article,header,nav,aside,div:not([class])){display:grid;gap:var(--e-s4);align-content:start}
.e-doc :where(input:not([type=checkbox]):not([type=radio]),textarea,select){font:inherit;height:44px;padding:0 14px;border:0;border-radius:var(--e-r-sm);background:var(--e-surface);box-shadow:inset 0 0 0 1px var(--e-divider);color:var(--e-ink);max-width:100%}
.e-doc :where(textarea){height:auto;min-height:96px;padding:12px 14px}
.e-doc :where(input,textarea,select):focus-visible{box-shadow:var(--e-focus)}
.e-doc :where(form){display:grid;gap:var(--e-s3);max-width:520px}
.e-doc .e-table{max-width:100%}
.e-doc .e-table table{min-width:0}
.e-doc .e-table :where(th,td){padding:12px 14px;text-align:left;vertical-align:top}
.e-doc .e-card{display:grid;gap:var(--e-s3);align-content:start}
.e-doc .e-card .e-card{box-shadow:none;background:var(--e-sunken)}
.e-doc .e-section{padding-block:var(--e-s6)}
.e-doc .e-faq{max-width:860px}
.e-doc .e-faq--doc>details>summary{padding:16px 20px}
.e-doc .e-faq--doc>details>:not(summary){padding:0 20px 16px;color:var(--e-muted)}
.e-doc .e-badge{justify-self:start}
.e-doc .e-row{display:flex;flex-wrap:wrap;gap:var(--e-s3);align-items:center}
.e-doc .e-grid{align-items:stretch}
.e-doc .e-lede{max-width:var(--e-measure)}
.e-doc .e-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.e-doc__hero{display:grid;gap:var(--e-s4);justify-items:start;padding-block:var(--e-s6) var(--e-s4)}
.e-doc__crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--e-fs-small);color:var(--e-muted)}
.e-doc__crumbs a{color:inherit;text-decoration:none}
.e-doc__crumbs a:hover{color:var(--e-ink)}
.e-doc__layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--e-s10);align-items:start}
.e-doc__side{position:sticky;top:var(--e-s6);display:grid;gap:var(--e-s3);font-size:var(--e-fs-small);max-height:calc(100vh - 48px);overflow:auto;padding:var(--e-s4);border-radius:var(--e-r-card);background:var(--e-sunken)}
.e-doc__side :where(ul,ol){list-style:none;padding:0;gap:2px}
.e-doc__side :where(a){display:block;padding:5px 8px;border-radius:8px;color:var(--e-muted);text-decoration:none;font-weight:400}
.e-doc__side :where(a):hover,.e-doc__side [aria-current]{color:var(--e-ink);background:var(--e-surface)}
.e-doc .e-tabs{justify-self:start}
.e-tabs>button:not([role=tab]){flex:none;height:38px;padding:0 16px;border:0;border-radius:10px;background:none;font:500 14px/1 var(--e-font);color:var(--e-muted);cursor:pointer}
.e-tabs>button:not([role=tab]):hover{color:var(--e-ink)}
.e-tabs [aria-pressed=true],.e-tabs [aria-selected=true]{background:var(--e-surface);color:var(--e-ink);box-shadow:0 1px 2px #16251e14,0 4px 10px #16251e0f}
.e-media{position:relative;display:block;padding:0;border:0;background:var(--e-sunken);border-radius:var(--e-r-sm);overflow:hidden;cursor:pointer}
@media (max-width:860px){.e-doc__layout{grid-template-columns:1fr}.e-doc__side{position:static;max-height:none}.e-doc .e-cols{grid-template-columns:1fr}}
/* footer, minimal: one row of links on the meadow (pages that end on their own hills art, the landing) */
.e-footer--min::before{content:none}
.e-footer__links{display:flex;flex-wrap:wrap;gap:8px 24px;padding-block:var(--e-s6);font-size:var(--e-fs-small)}
.e-footer__links a{color:var(--e-meadow-ink);text-decoration:none}
.e-footer__links a:hover{text-decoration:underline;text-underline-offset:4px}
/* art card: a whole illustrated card that is one button (landing altitude cards); the art is the component's own */
.e-artcard{font:inherit;color:inherit;text-align:left;cursor:pointer}
/* nav over art (landing hero): same nav, laid over the sky instead of above it */
.e-nav--over{position:absolute;z-index:5;inset:0 0 auto;background:none;backdrop-filter:none}

/* chips: a row of icon + label facts (Free, No account, Works in Claude Code ...) */
.e-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin:0;padding:0;list-style:none;font-size:var(--e-fs-meta);color:var(--e-muted)}
.e-chips>*,.e-chips>*>a{display:inline-flex;align-items:center;gap:8px}
.e-chips svg,.e-chips img{width:18px;height:18px;flex:none}
.e-chips a{color:var(--e-ink);text-decoration:none}
.e-chips a:hover{text-decoration:underline}
.e-chips{margin-block:12px}
.e-doc code{overflow-wrap:anywhere}
.e-doc .e-stats{display:flex;flex-wrap:wrap;gap:var(--e-s6) var(--e-s12);grid-template-columns:none}
.e-doc .e-tabs{flex-wrap:wrap}
.e-doc .e-badge{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.e-doc dd{overflow-wrap:anywhere}
.e-table .e-key{white-space:nowrap}
/* live layout (tools/ds2/hints.py -> legacy.py): rows, live media sizes, viewport-only copies */
.e-doc .e-hrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.e-doc .e-hrow--top{align-items:flex-start}
.e-doc .e-hrow--between{justify-content:space-between}
.e-doc .e-hrow--tight{gap:4px 8px}
.e-doc .e-hrow>*{min-width:auto;max-width:100%}
.e-doc a :where(pre,code){text-decoration:none}
.e-doc :where(img[width],video[width],canvas[width]){flex:none;max-width:100%;height:auto}
.e-doc :where(svg[width]){flex:none;max-width:100%}
@media (max-width:640px){.e-doc .e-only-lg{display:none}}
@media (min-width:641px){.e-doc .e-only-sm{display:none}}
/* text rhythm: blocks in plain containers get space between them; grid and flex containers space by gap */
.e-doc :where(p,ul,ol,pre,blockquote,figure,.e-code,.e-table)+:where(p,ul,ol,pre,blockquote,figure,.e-code,.e-table){margin-top:.8em}
.e-doc :where(section,article,header,nav,aside,div:not([class]),form,.e-grid,.e-stack,.e-card,.e-hrow,.e-row,.e-doc__hero,.e-doc__side)>*{margin-top:0}
.e-doc :where(h2):not(:first-child){margin-top:var(--e-s6)}
.e-doc :where(h3):not(:first-child){margin-top:var(--e-s3)}
.e-doc .e-key{justify-self:start}
/* tables: a row-header table reads as label + text; a data table stacks into labelled rows on a phone */
.e-doc .e-table:has(th[scope=row]){max-width:1000px}
.e-doc .e-table th[scope=row]{width:26%;min-width:150px;background:none;color:var(--e-ink);font-size:var(--e-fs-small);font-weight:500}
.e-doc .e-table tr+tr th[scope=row]{box-shadow:inset 0 1px 0 var(--e-divider)}
.e-doc .e-table td>:where(p,ul,ol)+:where(p,ul,ol){margin-top:.6em}
@media (max-width:640px){
.e-doc .e-table:has(th[scope=row]) :where(table,tbody,tr,th,td){display:block;width:auto;min-width:0}
.e-doc .e-table:has(th[scope=row]) th{padding-bottom:4px}
.e-doc .e-table:has(th[scope=row]) td{padding-top:0;box-shadow:none}
.e-doc .e-table--stack :where(table,tbody,tr,td){display:block;width:auto}
.e-doc .e-table--stack thead{display:none}
.e-doc .e-table--stack tr{padding-block:10px}
.e-doc .e-table--stack tr+tr{box-shadow:inset 0 1px 0 var(--e-divider)}
.e-doc .e-table--stack td{padding:4px 16px;box-shadow:none}
.e-doc .e-table--stack td[data-label]::before{content:attr(data-label);display:block;font-size:var(--e-fs-meta);color:var(--e-muted)}
}
/* landing: the bell's peak label clears the panorama's top edge */
html[data-ds-home] .v6-lab--all{top:calc(6% + 4px)}
/*/ds2:doc*/
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none;transition:none}}
/* skill pages flat (design system 1.0, after the 404 and /explore/): run figures, plan cards, the uses list, the side
   panel, step cards, the selected tab and file tab, chat bubbles and consent without shadow. Keycaps and the Get Edge
   dialog keep theirs; focus rings stay. Scope: DS2 skill pages (the split hero), no page markup change. */
body:has(.e-hero--split){--e-sh-card:0 0 #0000;--e-sh-card-hover:0 0 #0000}
body:has(.e-hero--split) :is(.e-tabs [role=tab][aria-selected=true],.e-files__nav button[aria-current=true],.e-chat p,.e-shot img,.e-portrait__badge,.e-consent,.e-toast){box-shadow:none}
body:has(.e-hero--split) :is(a.e-card:hover,.e-card.is-hover,button.e-card:hover){transform:none;background:var(--e-blue-soft)}
/* dots: one dot per task, a story told top to bottom (/benchmarks: the 201-dot chart). SVG marks carry classes only;
   labels are HTML so they keep body size on phones. Flat: fills and hairline strokes, no boxes. */
.e-dots{--e-dot-pass:#d8d4c8;width:100%;max-width:760px;margin:var(--e-s6) auto 0;display:grid;justify-items:center;gap:var(--e-s3);text-align:center}
.e-dots__svg{display:block;width:100%;max-width:640px;height:auto;overflow:visible}
.e-dots__net{margin-top:var(--e-s8)}.e-dots__floor{margin-top:var(--e-s6)}
.e-dots__cap{font-size:var(--e-fs-small);font-weight:500;color:var(--e-muted)}
.e-dots__lab{font-weight:500;font-size:var(--e-fs-body);max-width:46ch}
.e-dots__lab small{display:block;font-weight:400;font-size:var(--e-fs-small);color:var(--e-muted)}
.e-dots__lab--blue,.e-dots__lab--blue small{color:var(--e-blue)}
.e-dots__p{fill:var(--e-dot-pass)}.e-dots__h{fill:none;stroke:#9a9688;stroke-width:1;stroke-dasharray:2.5 2.5}
.e-dots__b{fill:var(--e-blue)}.e-dots__k{fill:var(--e-ink)}
.e-dots__line{fill:none;stroke:var(--e-blue);stroke-width:3;stroke-linecap:round}
.e-dots__glow{fill:none;stroke:var(--e-blue);stroke-width:12;stroke-linecap:round;opacity:.12}
.e-dots__drop{stroke:#c3d0ff;stroke-width:1.5}.e-dots__drop--k{stroke:#b9b6ab}
.e-dots__base{stroke:var(--e-ink);stroke-width:2}
.e-dots__legend{list-style:none;padding:0;margin:var(--e-s4) 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e-s2) var(--e-s6);font-size:var(--e-fs-small);color:var(--e-muted)}
.e-dots__legend li{display:flex;align-items:center;gap:var(--e-s2)}
.e-dots__sw{width:12px;height:12px;flex:none}
@media (max-width:560px){.e-dots__net{margin-top:var(--e-s4)}.e-dots__legend{flex-direction:column;align-items:flex-start;gap:var(--e-s2)}}
/* .e-pbars: paired bars (benchmarks hub + reports). Outlined = the same model alone, dashed = other help, filled = with Edge or its skills.
   One 0-100% track per bar, so every pair is to scale on every screen. Geometry is SVG from the data; labels are HTML. */
.e-pbars{width:100%;max-width:880px;margin:0;display:grid;gap:var(--e-s6)}
.e-pbars__cap{font-size:var(--e-fs-small);font-weight:500;color:var(--e-muted)}
.e-pbars__group{display:grid;gap:var(--e-s2)}
.e-pbars__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-s4)}
.e-pbars__name{font-weight:500;font-size:var(--e-fs-body)}
.e-pbars__name small{display:block;font-weight:400;font-size:var(--e-fs-small);color:var(--e-muted)}
.e-pbars__delta{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--e-blue)}
.e-pbars__line{display:grid;grid-template-columns:8.5em minmax(0,1fr) 3em;align-items:center;gap:var(--e-s3);font-size:var(--e-fs-small)}
.e-pbars__line>span{color:var(--e-muted)}
.e-pbars__line>b{font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.e-pbars__svg{display:block;width:100%;height:22px;overflow:visible}
.e-pbars__svg rect,.e-pbars__sw rect{vector-effect:non-scaling-stroke}
.e-pbars__track{fill:var(--e-tint)}
.e-pbars__base{fill:var(--e-paper);stroke:var(--e-ink);stroke-width:1.5}
.e-pbars__alt{fill:var(--e-paper);stroke:var(--e-muted);stroke-width:1.5;stroke-dasharray:4 3}
.e-pbars__with{fill:var(--e-blue)}
.e-pbars__key{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:var(--e-s2) var(--e-s6);font-size:var(--e-fs-small);color:var(--e-muted)}
.e-pbars__key li{display:flex;align-items:center;gap:var(--e-s2)}
.e-pbars__sw{width:22px;height:12px;flex:none;overflow:visible}
@media (max-width:560px){.e-pbars__line{grid-template-columns:minmax(0,1fr) 3em;row-gap:2px}.e-pbars__line>span{grid-column:1/-1}.e-pbars__head{flex-wrap:wrap}}