/* Tutorial pages (website/tutorials/*.html) and the tutorial player (assets/tutorial.js) — catalogue world. */
html[data-l="en"] [data-l="ja"], html[data-l="ja"] [data-l="en"] { display: none !important; }

.tw { padding: 32px calc(var(--gut) + var(--tabs)) 72px var(--gut); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.tw-back { font: 600 14px var(--display); text-decoration: none; border-bottom: 1px solid var(--chromate); justify-self: start; }
.tw-head { display: grid; gap: 14px; max-width: 980px; }
.tw-head .pn { font: 600 13px var(--mono); color: var(--cyan-ink); }
.tw-head h1 { font: 900 clamp(34px, 4.2vw, 60px)/1 var(--display); font-variation-settings: "wdth" 114; letter-spacing: -.03em; text-wrap: balance; }
.tw-head p { font-size: 18px; color: var(--ink-2); max-width: 60ch; }
.tw-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 600 12px var(--mono); color: var(--ink-3); }
.tw-meta b { color: var(--ink); font-weight: 600; }
html[lang="ja"] .tw-back, html[lang="ja"] .tw-head h1, html[lang="ja"] .tw-head p, html[lang="ja"] .tut-steps, html[lang="ja"] .tut-cap, html[lang="ja"] .tstep, html[lang="ja"] .tw h2 { font-family: var(--jp); }
html[lang="ja"] .tw-head h1 { line-height: 1.25; letter-spacing: 0; }

/* ---------- player ---------- */
.tut { scroll-margin-top: 76px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px 28px; align-items: start; }
.tut-stage { display: grid; gap: 0; min-width: 0; }
.tut-screen { position: relative; aspect-ratio: var(--ar, 16 / 9); background: #1b1b1d; color: #fff; border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: 0 18px 40px -18px rgba(21,24,26,.45); outline-offset: 4px; }
.tut-view { position: absolute; inset: 0; overflow: hidden; }
.tut-zoom { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .6s cubic-bezier(.3,.7,.2,1); }
.tut .tf { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.tut .tf.on { opacity: 1; }
.tut .tf img { width: 100%; height: 100%; object-fit: contain; }
.tut-cur { position: absolute; left: 50%; top: 56%; width: 26px; height: 26px; transform: translate(-3px, -2px); z-index: 4; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); transition: left 1.05s cubic-bezier(.45,.05,.25,1), top 1.05s cubic-bezier(.45,.05,.25,1); }
.tut-cur.still { transition: none; }
.tut-cur .tut-tap { display: none; }
.tut.touch .tut-cur { transform: translate(-13px, -13px); transform-origin: 13px 13px; }
.tut.touch .tut-cur path { display: none; }
.tut.touch .tut-cur .tut-tap { display: inline; }
.tut-cur.click { animation: tutclick .3s ease; }
@keyframes tutclick { 50% { transform: translate(-3px, -2px) scale(.82); } }
.tut-hot { position: absolute; border: 0; padding: 0; background: none; cursor: pointer; z-index: 3; }
.tut-hot i { position: absolute; inset: -4px; border: 2px solid var(--chromate); border-radius: 3px; animation: tuthot 1.6s ease-out infinite; }
@keyframes tuthot { 0% { box-shadow: 0 0 0 0 rgba(214,183,64,.7); } 100% { box-shadow: 0 0 0 10px rgba(214,183,64,0); } }
.tut-ripple { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: rgba(214,183,64,.65); pointer-events: none; z-index: 3; animation: tutrip .6s ease-out forwards; }
@keyframes tutrip { to { transform: scale(6); opacity: 0; } }
.tut-hint { position: absolute; z-index: 5; transform: translateY(-50%); padding: 4px 8px; background: var(--chromate); color: var(--ink); border: 1.5px solid var(--ink); font: 700 12px var(--display); border-radius: var(--r); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s; }
html[lang="ja"] .tut-hint { font-family: var(--jp); }
.tut-hint.on { opacity: 1; }
.tut-keys { position: absolute; right: 14px; top: 14px; z-index: 5; padding: 5px 10px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-bottom-width: 4px; border-radius: var(--r); font: 700 14px var(--mono); opacity: 0; transition: opacity .25s; }
.tut-keys:empty { display: none; }
.tut-keys.on { opacity: 1; }

/* caption bar: the subtitle of the "video" */
.tut-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px 11px; background: rgba(255,255,255,.96); border-top: 2px solid var(--ink); }
.tut-cap .bub { background: var(--chromate); }
.tut-capt { display: grid; gap: 1px; min-width: 0; }
.tut-capt b { font: 800 16px/1.25 var(--display); font-variation-settings: "wdth" 108; color: var(--ink); }
.tut-capt span { font: 400 14px/1.4 var(--display); color: var(--ink-2); }
html[lang="ja"] .tut-capt b, html[lang="ja"] .tut-capt span { font-family: var(--jp); }

.tut-big { position: absolute; inset: 0; z-index: 7; display: grid; place-content: center; justify-items: center; gap: 12px; border: 0; background: rgba(21,24,26,.38); color: var(--paper); cursor: pointer; font: 800 17px var(--display); }
html[lang="ja"] .tut-big { font-family: var(--jp); }
.tut-big svg { width: 76px; height: 76px; padding: 18px 16px 18px 20px; background: var(--chromate); color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; transition: transform .2s; }
.tut-big:hover svg { transform: scale(1.06); }
.tut-big span { padding: 4px 10px; background: var(--ink); border-radius: var(--r); }
.tut-big[hidden] { display: none; }

/* control bar under the screen */
.tut-bar { display: flex; align-items: center; gap: 6px; padding: 10px 0 0; }
.tut-bar button { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 44px; justify-content: center; padding: 0 10px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--paper); cursor: pointer; font: 700 13px var(--display); }
html[lang="ja"] .tut-bar button { font-family: var(--jp); }
.tut-bar button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.tut-bar button:disabled { opacity: .35; cursor: default; }
.tut-bar svg { width: 20px; height: 20px; }
.tut-bar .tb-play { background: var(--ink); color: var(--paper); min-width: 56px; }
.tut-bar .tb-play:hover { background: var(--cyan) !important; border-color: var(--cyan); }
.tb-count { font: 600 13px var(--mono); margin: 0 8px; white-space: nowrap; }
.tb-prog { flex: 1; display: flex; gap: 3px; min-width: 60px; }
.tb-prog i { flex: 1; height: 6px; background: var(--zinc-2); border-radius: 1px; }
.tb-prog i.done { background: var(--ink); }
.tb-prog i.cur { background: var(--chromate); box-shadow: inset 0 0 0 1px var(--ink); }
.tb-zoom[aria-pressed="true"] { background: var(--chromate-2) !important; color: var(--ink) !important; }

/* step list (chapters) */
.tut-steps { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); counter-reset: s; max-height: min(70vh, 640px); overflow: auto; }
.tut-steps li { border-bottom: 1px solid var(--zinc-2); }
.tut-steps button { width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: baseline; padding: 9px 8px 9px 4px; border: 0; background: none; text-align: left; cursor: pointer; font: 600 14px/1.35 var(--display); }
html[lang="ja"] .tut-steps button { font-family: var(--jp); }
.tut-steps button:hover { background: var(--zinc-3); }
.tut-steps button small { font: 600 12px var(--mono); color: var(--cyan-ink); }
.tut-steps button[aria-current="true"] { background: var(--chromate-2); box-shadow: inset 3px 0 0 var(--ink); }
.tut-help { font: 500 12px var(--display); color: var(--ink-3); margin-top: 10px; }
.tut-help kbd { font: 600 11px var(--mono); border: 1px solid var(--zinc); border-bottom-width: 2px; border-radius: var(--r); padding: 0 4px; }

/* the written steps under the player (also what search engines read) */
.tsteps { display: grid; gap: 0; max-width: 980px; counter-reset: ts; }
.tw h2 { font: 800 28px/1.15 var(--display); font-variation-settings: "wdth" 110; padding-top: 14px; border-top: 2px solid var(--ink); }
.tstep { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--zinc-2); scroll-margin-top: 80px; }
.tstep .pn { font: 600 13px var(--mono); color: var(--cyan-ink); padding-top: 3px; }
.tstep h3 { font: 800 19px/1.3 var(--display); font-variation-settings: "wdth" 106; }
html[lang="ja"] .tstep h3 { font-family: var(--jp); }
.tstep .body { grid-column: 2; max-width: 68ch; color: var(--ink-2); }
.tstep .body p { margin: 6px 0 0; }
.tstep .body code, .tstep .body kbd { font: 500 .88em var(--mono); background: var(--zinc-3); padding: 1px 5px; border-radius: var(--r); }
.tstep .body ul, .tstep .body ol { margin: 6px 0 0; padding-left: 20px; }
.tstep .go { grid-column: 2; justify-self: start; margin-top: 6px; font: 600 13px var(--display); border: 0; background: none; padding: 0; cursor: pointer; color: var(--cyan-ink); text-decoration: underline; text-underline-offset: 3px; }
html[lang="ja"] .tstep .go { font-family: var(--jp); }

/* status chips for the AI examples */
.chip { display: inline-block; padding: 1px 7px; border: 1.5px solid var(--ink); border-radius: var(--r); font: 700 11px var(--mono); letter-spacing: .02em; vertical-align: 2px; margin-left: 6px; white-space: nowrap; }
.chip.ok { border-color: var(--ok); color: var(--ok); }
.chip.soon { border-style: dashed; border-color: var(--zinc); color: var(--ink-3); }
.chip.lvl { background: var(--ink); color: var(--paper); }

@media (max-width: 1100px) {
  .tut { grid-template-columns: 1fr; }
  .tut-steps { max-height: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 16px; }
}
@media (max-width: 720px) {
  .tut-cap { position: static; padding: 10px 12px; }
  .tut-screen { overflow: visible; display: grid; aspect-ratio: auto; }
  .tut-view { position: relative; aspect-ratio: var(--ar, 16 / 9); overflow: hidden; }
  .tut-big { bottom: auto; aspect-ratio: var(--ar, 16 / 9); }
  .tut-bar { flex-wrap: wrap; }
  .tb-prog { order: 9; flex-basis: 100%; }
  .tb-zoom span { display: none; }
  .tstep { grid-template-columns: 1fr; }
  .tstep .body, .tstep .go { grid-column: 1; }
  .tut-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tut-cur, .tut-zoom, .tut .tf { transition: none; }
  .tut-hot i { animation: none; }
}

/* search in the page head, quoted prompts, section intros, next link */
.tw-srch { max-width: 560px; margin-top: 6px; }
.tw-srch .srch-box { height: 46px; }
.tw-srch input { font-size: 15px; }
.say { margin: 8px 0 4px; padding: 8px 14px; border-left: 3px solid var(--chromate); background: var(--paper-2); font: 600 16px/1.5 var(--display); color: var(--ink); }
html[lang="ja"] .say { font-family: var(--jp); }
.say p { margin: 0; }
.tsec { display: grid; gap: 10px; max-width: 980px; }
.tsec-intro { max-width: 72ch; color: var(--ink-2); }
html[lang="ja"] .tsec-intro, html[lang="ja"] .tw-next { font-family: var(--jp); }
.tsec-intro code, .tstep code { overflow-wrap: anywhere; }
.tw-next { font: 600 16px var(--display); padding-top: 16px; border-top: 2px solid var(--ink); max-width: 980px; }
.tw-next a, .tsec-intro a, .tstep .body a { color: var(--cyan-ink); }
.tw-more { border-top: 0; padding-top: 6px; font-weight: 500; color: var(--ink-2); }
.tsec.compact .tsteps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 24px; max-width: none; }
.tsec.compact .tstep { grid-template-columns: 1fr; padding: 12px 0; gap: 2px; }
.tsec.compact .tstep .pn { padding: 0; }
.tsec.compact .tstep h3 { font-size: 16px; }
.tsec.compact .tstep .body { grid-column: 1; font-size: 14px; }
.tsec.compact .tstep:last-child { grid-column: 1 / -1; }
/* when the picture is zoomed (phones), the cursor and the label keep their size */
.tut-cur { scale: var(--iz, 1); transform-origin: 3px 2px; }
.tut-hint { scale: var(--iz, 1); transform-origin: left center; }
.tut-hint.left { transform-origin: right center; }
.tut-hot i { border-width: calc(2px * var(--iz, 1)); }
/* acts inside a step (2026-10-20): pressed button while dragging, a key press */
.tut-cur.down { filter: drop-shadow(0 0 0 2px var(--chromate)) drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.tut-cur.down path { fill: var(--chromate-2, #f3e7b0); }
.tut-keys.press { animation: tutkey .28s ease; }
@keyframes tutkey { 40% { transform: translateY(2px); border-bottom-width: 2px; } }
.tut.acting .tut-hot { display: none; }
.tut-steps li.part { border-bottom: 0; padding: 12px 4px 4px; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cyan-ink); }
html[lang="ja"] .tut-steps li.part { font-family: var(--jp); letter-spacing: 0; text-transform: none; }
.tsteps h2.part { margin-top: 2.2em; }
@media (prefers-reduced-motion: reduce) { .tut-keys.press { animation: none; } }