/* The Claude skill pack pages on 90n.ai: the 90n frame (styles.css: nav, footer, stars,
   fonts) around Lantern's own pack content (/lantern/assets/skills.css, unchanged).
   This file maps the tokens skills.css reads onto the 90n palette, and supplies the
   few pieces skills.css takes from lantern.css. The markup is written by
   scripts/build-lantern-skills.mjs. Loaded after both. */
.skills{
  --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.08);
  --line-2:rgba(255,243,220,.2);
  --ink:var(--star); --faint:var(--dim); --text:#D9D1EE;
  --flame:var(--joy); --flame-ink:var(--night); --flame-soft:rgba(255,216,74,.12);
  --font:var(--body); --display:var(--body); --mono:var(--label);
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* overflow-x:hidden on both html and body makes body a scroll container, which
   unsticks the rail; clip trims the same overflow without that. */
html.n-pack,html.n-pack body{overflow-x:clip}
html.n-pack{scroll-padding-top:24px}
.skills{font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.skills img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--joy);outline-offset:4px}
::selection{background:var(--joy);color:var(--night)}

.skip{position:fixed;z-index:60;top:-80px;left:20px;padding:10px 18px;border-radius:999px;background:var(--joy);color:var(--night)}
.skip:focus{top:14px}

/* from lantern.css: the eyebrow, the button, the tool logos — in 90n's voice */
.eyebrow{font:500 12.5px/1.4 var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--joy);margin-bottom:18px}
.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 22px;border:0;border-radius:999px;background:var(--joy);color:var(--night);font:600 14px/1.3 var(--body);text-decoration:none;white-space:nowrap;transition:box-shadow .26s,transform .18s,background .18s}
.button:hover{background:#FFE27A;box-shadow:0 0 0 6px rgba(255,216,74,.12),0 10px 40px -6px rgba(255,190,70,.5)}
.button:active{transform:translateY(1px)}
.button.small{min-height:40px;font-size:13px;padding:9px 18px}
.button.ghost{background:transparent;color:var(--star);box-shadow:inset 0 0 0 1px var(--line-2)}
.button.ghost:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,243,220,.32)}
.tool-logo{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tool-logo img{width:100%;height:100%;object-fit:cover}

/* the breadcrumb is a <nav>, and styles.css fixes every nav to the top */
nav.crumbs{position:static;z-index:auto;border:0;transition:none}

/* the top of a pack page: the 90n night sky behind the title, with the Lantern plaque
   beside it in the rail, as skills.css lays them out */
.pack-main{position:relative;overflow:clip;
  background:radial-gradient(60% 520px at 50% 0, rgba(255,214,140,.08) 0%, transparent 70%),
    radial-gradient(70% 600px at 85% 300px, rgba(120,60,180,.28) 0%, transparent 70%),
    linear-gradient(180deg,var(--night) 0%,var(--night-2) 520px,var(--night) 1100px)}
.pack-main>.stars{bottom:auto;height:900px}
.pack-main .pack-grid{position:relative;z-index:4;padding-top:140px}
.pack-hero h1{max-width:22ch;font-size:clamp(34px,4.2vw,54px);line-height:1.06;margin:0}
.pack-rail .plaque,.pack-rail .people{top:24px}
.skill{scroll-margin-top:24px}
.plaque{background:linear-gradient(180deg,rgba(255,216,74,.14),rgba(28,18,72,.7) 64%);border-color:rgba(255,216,74,.38);box-shadow:0 40px 100px -50px rgba(255,190,70,.5)}
.plaque-head,.people-names span{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.pack-sec h2{letter-spacing:-.01em}
.pack-prose blockquote{font-family:var(--serif);font-weight:500;letter-spacing:-.01em}
.skill-n,.step-n{font-weight:600}
.code-row{background:rgba(17,10,44,.6)}
.copy.done{box-shadow:inset 0 0 0 1px rgba(255,216,74,.4)}
.skill:target{border-color:rgba(255,216,74,.6);box-shadow:0 0 0 4px rgba(255,216,74,.1)}
.pack-card:hover{border-color:rgba(255,231,176,.35);box-shadow:none}
.flow li a:hover{background:rgba(255,216,74,.22)}

@media(max-width:680px){
 .pack-main .pack-grid{padding-top:116px}
}