/* Copyright © 2026 Wayne Davies. Free software under the GNU General Public License, version 3 or later. */
/* See LICENSE for the full text. */
/* SPDX-License-Identifier: GPL-3.0-or-later */

/* The tutorials, on top of the product page's styles (../styles.css): its tokens, nav, buttons,
   window frames and reveals. */

.nav-links a[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

/* Hero */
.t-hero {
  text-align: center;
  padding: 88px 16px 24px;
}
.t-hero h1 {
  font-size: clamp(44px, 7.4vw, 92px);
  letter-spacing: -0.045em;
  line-height: 1;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}
.meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: 980px;
  padding: 7px 16px;
  font-size: 15px;
  color: var(--ink2);
}
.meta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The story card: who you are and what you'll make. */
.brief {
  max-width: 880px;
  margin: 56px auto 0;
  padding: 0 16px;
}
.brief-card {
  position: relative;
  border-radius: 22px;
  padding: 36px 40px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--grad-a) 9%, transparent), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--grad-b) 9%, transparent), transparent 60%), var(--sunk);
  border: 1px solid var(--line);
}
.brief-card .eyebrow {
  font-size: 15px;
  margin-bottom: 10px;
}
.brief-card p {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink2);
}
.brief-card p + p {
  margin-top: 14px;
}
.brief-card b {
  color: var(--ink);
  font-weight: 600;
}
.makes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
}
.makes li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink2);
}
.makes b {
  display: block;
  font-size: 16px;
  margin-bottom: 2px;
}

/* Layout: the steps beside a sticky list of them. */
.t-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 16px 40px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.toc {
  position: sticky;
  top: 84px;
}
.toc p {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--line);
}
.toc a {
  display: flex;
  gap: 10px;
  padding: 7px 0 7px 16px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--ink2);
  font-size: 15px;
  line-height: 1.3;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.toc a span {
  font: 500 13px/1.6 var(--mono);
  color: var(--ink3);
}
.toc a:hover {
  color: var(--ink);
}
.toc a.on {
  color: var(--ink);
  font-weight: 500;
  border-left-color: var(--accent);
}
.toc a.on span {
  color: var(--accent);
}
.toc .bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  margin-top: 20px;
  overflow: hidden;
}
.toc .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b));
  transition: width 0.3s var(--ease);
}

/* A step */
.lesson {
  scroll-margin-top: 76px;
  padding-bottom: 88px;
}
.lesson + .lesson {
  border-top: 1px solid var(--line);
  padding-top: 72px;
}
.num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #fff;
  font: 600 18px var(--sans);
  margin-bottom: 18px;
  box-shadow: 0 8px 20px -8px rgb(29 95 214 / 60%);
}
.lesson h2 {
  font-size: clamp(32px, 4.4vw, 48px);
}
.lesson .why {
  color: var(--ink2);
  font-size: 20px;
  line-height: 1.5;
  margin-top: 16px;
  max-width: 36em;
}
.lesson h3 {
  font-size: 21px;
  letter-spacing: -0.02em;
  margin: 40px 0 0;
}

/* Numbered instructions */
.do {
  counter-reset: do;
  list-style: none;
  padding: 0;
  margin: 26px 0 0;
  max-width: 40em;
}
.do > li {
  counter-increment: do;
  position: relative;
  padding: 0 0 0 46px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
}
.do > li + li {
  margin-top: 16px;
}
.do > li::before {
  content: counter(do);
  position: absolute;
  left: 0;
  top: 1px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: 600 14px var(--sans);
}
.do b {
  font-weight: 600;
}
.do ul {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--ink2);
}
.do ul li + li {
  margin-top: 4px;
}

/* What to type, set like the note it goes in. */
.type {
  margin: 12px 0 0;
  padding: 14px 18px;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: 12px;
  font: 400 15px/1.7 var(--mono);
  color: var(--ink);
  white-space: pre-wrap;
  overflow-x: auto;
}
.type .k {
  color: var(--accent-ink);
}
.type .t {
  color: #0d7f74;
}

/* Screenshots */
.shot {
  margin: 40px 0 0;
}
.shot .window {
  margin: 0;
}
/* A cropped screenshot, at its own shape. */
.shot .window.free {
  aspect-ratio: auto;
  max-width: 760px;
  margin: 0 auto;
}
.shot .window.narrow {
  max-width: 340px;
}
.shot figcaption {
  margin-top: 14px;
  font-size: 15px;
  color: var(--ink3);
  text-align: center;
}
.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}
.pair .shot {
  margin: 0;
}

/* Tips */
.tip {
  display: flex;
  gap: 14px;
  margin: 32px 0 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--accent-soft);
  max-width: 44em;
}
.tip svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tip p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink2);
}
.tip b {
  color: var(--ink);
}
.tip.warm {
  background: #fdf3e6;
}
.tip.warm svg {
  stroke: #9a4b08;
}

/* Mac or Windows: chosen at the top, followed by the install steps and every key. */
.pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 30px;
}
.pick p {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink2);
}
.pick .seg {
  margin-top: 0;
}
.pick .seg button {
  min-width: 128px;
}
.pick .pick-note {
  flex-basis: 100%;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink3);
}
.os {
  margin-top: 26px;
}
.os-pane[data-os="win"],
[data-os="win"] .os-pane[data-os="mac"] {
  display: none;
}
[data-os="win"] .os-pane[data-os="win"] {
  display: block;
}

/* A terminal session: what you typed, the tools the assistant called (by server) and its answer,
   set like the home page's Terminal card. The calls come in one after another as it scrolls in. */
.session {
  margin: 32px 0 0;
  border-radius: 14px;
  overflow: hidden;
  background: #15171b;
  color: #e9ecf1;
  box-shadow: var(--shadow);
}
.s-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #202328;
  font: 500 12px var(--mono);
  color: #8d95a1;
}
.s-bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3a3e45;
}
.s-bar span {
  margin-left: 10px;
}
.s-body {
  padding: 18px 20px 20px;
  font: 400 14px/1.65 var(--mono);
}
/* What each part of a session is: your prompt, the tools Claude uses, what you get. */
.s-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font: 600 14px/1.4 var(--sans);
  letter-spacing: -0.005em;
  color: #aab1bc;
}
.s-label::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: currentColor;
}
.s-l-you {
  color: #7fb2ff;
}
.s-l-tools {
  margin-top: 18px;
}
.s-l-result {
  margin-top: 16px;
  color: #3fd0b8;
}
.s-you + .s-l-result,
.s-you + .s-label {
  margin-top: 18px;
}
.s-tools + .s-l-result {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid #2c3036;
}
.s-you {
  color: #fff;
  white-space: pre-wrap;
}
.s-you::before {
  content: "› ";
  color: #3fd0b8;
  font-weight: 700;
}
.s-tools {
  list-style: none;
  padding: 0;
  margin: 14px 0;
}
.s-tools li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 3px 0;
  color: #c9ced6;
}
.s-tools li::before {
  content: "●";
  color: #3fd0b8;
  font-size: 10px;
}
.s-tools .r {
  flex-basis: 100%;
  padding-left: 18px;
  color: #8d95a1;
  font-size: 13px;
}
.s-tools .r::before {
  content: "⎿ ";
}
.mcp {
  font: 600 11px/1 var(--mono);
  padding: 4px 7px;
  border-radius: 6px;
  color: #fff;
  background: #1d5fd6;
  text-transform: lowercase;
}
.mcp.atlassian {
  background: #0c66e4;
}
.mcp.asana {
  background: #e8676b;
}
.mcp.figma {
  background: #8c4cf0;
}
.mcp.slack {
  background: #611f69;
}
.mcp.github {
  background: #3d444d;
}
.mcp.calendar {
  background: #188038;
}
.mcp.notion {
  background: #55534e;
}
.s-answer {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  color: #e9ecf1;
}
.s-answer p + p,
.s-answer p + ul,
.s-answer ul + p {
  margin-top: 10px;
}
.s-answer ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.s-answer b {
  color: #fff;
}
.s-answer code {
  background: #2a2e35;
  border-color: #3a3e45;
  color: #e9ecf1;
}
.js .session.reveal .s-tools li,
.js .session.reveal .s-l-result,
.js .session.reveal .s-answer {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.js .session.reveal.in .s-tools li,
.js .session.reveal.in .s-l-result,
.js .session.reveal.in .s-answer {
  opacity: 1;
  transform: none;
}
.session.in .s-tools li:nth-child(2) {
  transition-delay: 0.25s;
}
.session.in .s-tools li:nth-child(3) {
  transition-delay: 0.5s;
}
.session.in .s-tools li:nth-child(4) {
  transition-delay: 0.75s;
}
.session.in .s-tools li:nth-child(5) {
  transition-delay: 1s;
}
.session.in .s-tools li:nth-child(6) {
  transition-delay: 1.25s;
}
.session.in .s-tools li:nth-child(7) {
  transition-delay: 1.5s;
}
.session.in .s-tools li:nth-child(8) {
  transition-delay: 1.75s;
}
.session.in .s-tools li:nth-child(n + 9) {
  transition-delay: 2s;
}
.session.in .s-l-result,
.session.in .s-answer {
  transition-delay: 2.1s;
}

/* Which tools a recipe uses. */
.uses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.uses .mcp {
  font-size: 12px;
  padding: 5px 9px;
}

/* The finish */
.done {
  text-align: center;
  padding: 96px 16px 110px;
  background: var(--sunk);
}
.done h2 {
  font-size: clamp(40px, 6vw, 72px);
}
.checks {
  max-width: 640px;
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  text-align: left;
}
.checks li {
  display: flex;
  gap: 10px;
  align-items: start;
  font-size: 17px;
  color: var(--ink2);
}
.checks svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: none;
  stroke: #0d7f74;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .t-body {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: 48px;
  }
  .toc {
    display: none;
  }
  .makes {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .brief-card {
    padding: 26px 22px;
  }
  .pair,
  .checks {
    grid-template-columns: 1fr;
  }
  .do > li {
    font-size: 17px;
  }
  .lesson .why {
    font-size: 18px;
  }
}