/* Skills how-to guide (/skills/how-to/): the step lists and the animated mockups.
   Each mockup is a 48em x 33em stage that scales with its width (1em = 1/48 of the stage), so every
   position below is in stage ems. skills-guide.js shows one scene at a time by adding .is-on; the
   animations inside a scene start when it does. --d sets when something appears, --o when it goes. */

/* ---------- Page layout ---------- */
.guide-jump { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.guide__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-areas: "head fig" "steps fig" "note fig"; column-gap: 48px; align-items: start; }
.guide__head { grid-area: head; }
.guide__head h2 { margin: 10px 0 10px; }
.guide__head p { margin: 0; max-width: 46ch; }
.guide__steps { grid-area: steps; margin-top: 22px; gap: 8px; }
.guide__steps li { max-width: calc(var(--measure) + 48px); padding: 0 0 0 48px; }
.guide__steps li::before { top: 7px; }
.guide__step { display: block; width: 100%; padding: 9px 12px; border: 2px solid transparent; border-radius: var(--radius-md); background: none; color: inherit; font: inherit; font-size: 16px; line-height: 1.45; text-align: left; cursor: pointer; }
.guide__step:hover { border-color: var(--navy); }
.guide__steps li.is-on .guide__step { border-color: var(--navy); background: var(--surface-raised); box-shadow: 3px 3px 0 0 var(--navy); }
.guide__steps li.is-on::before { background: var(--navy); color: var(--cream); }
.guide__step code { font-size: .86em; white-space: nowrap; }
.guide__note { grid-area: note; max-width: var(--measure); margin-top: 20px; }
.guide__fig { grid-area: fig; position: sticky; top: 112px; margin: 0; }
.guide__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; font-size: 14px; color: var(--ink-muted); }
.guide__play { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 2px solid var(--navy); border-radius: var(--radius-pill); background: var(--cream); color: var(--navy); font-family: var(--font-display); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.guide__play:hover { background: var(--navy); color: var(--cream); }
.guide__nav { display: inline-flex; gap: 6px; }
.guide__nav button { width: 34px; height: 34px; border: 2px solid var(--navy); border-radius: 50%; background: var(--cream); color: var(--navy); font: inherit; font-weight: 700; line-height: 1; cursor: pointer; }
.guide__nav button:hover { background: var(--navy); color: var(--cream); }
@media (max-width: 900px) {
  .guide__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "steps" "note"; }
  .guide__fig { position: static; margin-top: 24px; }
}

/* What's in a skill */
.anatomy { display: grid; gap: 20px; }
.anatomy .fl-card { padding: 18px 20px; }
.anatomy__label { margin: 0 0 10px; font-family: var(--font-display); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--shade); }
.anatomy pre { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.anatomy pre .fm { color: var(--shade); }
.anatomy pre .dim { color: var(--ink-muted); }
.parts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.parts b { display: block; }

/* ---------- The mockup frame ---------- */
.mock { container-type: inline-size; border: var(--stroke) solid var(--navy); border-radius: 14px; background: #fff; box-shadow: 8px 8px 0 0 var(--navy); overflow: hidden; }
.mock__stage { position: relative; aspect-ratio: 16 / 11; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; font-size: calc(100cqi / 48); line-height: 1.25; color: #1f1e1d; }
.mock__stage *, .mock__stage *::before, .mock__stage *::after { box-sizing: border-box; }
.mock__stage b { font-weight: 600; }
.sc { position: absolute; inset: 0; overflow: hidden; background: #fff; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.sc.is-on { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.abs { position: absolute; }
.layer { position: absolute; inset: 0; }
.fast { --dur: .5s; }

/* Window bar: traffic lights plus an address or a title */
.wbar { position: absolute; left: 0; right: 0; top: 0; height: 2.2em; display: flex; align-items: center; gap: .45em; padding: 0 .9em; background: #e8e6e1; border-bottom: 1px solid #d2cfc7; }
.wbar i { flex: none; width: .72em; height: .72em; border-radius: 50%; background: #ff5f57; }
.wbar i + i { background: #febc2e; }
.wbar i + i + i { background: #28c840; }
.wbar__url { display: flex; align-items: center; width: 30em; height: 1.5em; margin-left: 1.4em; padding: 0 1em; border-radius: .75em; background: #fff; color: #57534b; font-size: .8em; white-space: nowrap; overflow: hidden; }
.wbar__title { flex: 1; margin-right: 3.5em; text-align: center; color: #4d4a44; font-size: .8em; font-weight: 600; }

/* Pointer, with a ring on each click. --x0/--y0 is where it starts; it clicks at x1/y1, then x2/y2... */
.cur { position: absolute; z-index: 9; left: var(--x0); top: var(--y0); width: 1.3em; height: 1.8em; background: url("/assets/skills/cursor.svg") no-repeat 0 0 / contain; pointer-events: none; }
.cur::after { content: ""; position: absolute; left: -.6em; top: -.6em; width: 1.2em; height: 1.2em; border: .18em solid #2b7bf0; border-radius: 50%; opacity: 0; }
.is-on > .cur { animation: cur-1 1.4s cubic-bezier(.45, 0, .25, 1) .4s both; }
.is-on > .cur::after { animation: ring-1 1.4s linear .4s both; }
.is-on > .cur--2 { animation-name: cur-2; animation-duration: 2.8s; }
.is-on > .cur--2::after { animation-name: ring-2; animation-duration: 2.8s; }
.is-on > .cur--3 { animation-name: cur-3; animation-duration: 3.6s; }
.is-on > .cur--3::after { animation-name: ring-3; animation-duration: 3.6s; }
@keyframes cur-1 { 0% { left: var(--x0); top: var(--y0); } 70%, 100% { left: var(--x1); top: var(--y1); } }
@keyframes cur-2 { 0% { left: var(--x0); top: var(--y0); } 35%, 50% { left: var(--x1); top: var(--y1); } 85%, 100% { left: var(--x2); top: var(--y2); } }
@keyframes cur-3 { 0% { left: var(--x0); top: var(--y0); } 25%, 35% { left: var(--x1); top: var(--y1); } 60%, 70% { left: var(--x2); top: var(--y2); } 90%, 100% { left: var(--x3); top: var(--y3); } }
@keyframes ring-1 { 0%, 69% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes ring-2 { 0%, 34% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; transform: scale(.3); } 50% { opacity: 0; transform: scale(1.8); } 51%, 84% { opacity: 0; transform: scale(.3); } 85% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes ring-3 { 0%, 24% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(.3); } 35% { opacity: 0; transform: scale(1.8); } 36%, 59% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(.3); } 70% { opacity: 0; transform: scale(1.8); } 71%, 89% { opacity: 0; transform: scale(.3); } 90% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }
/* Clicks land at about 1.4s (one move), 1.4s and 2.8s (two moves), or 1.3s, 2.6s and 3.6s (three). */

/* Appear, disappear, type, fill, press, switch on */
.is-on .pop { animation: pop .35s cubic-bezier(.2, .9, .3, 1.2) var(--d, 1.45s) both; }
.is-on .out { animation: out .2s ease var(--o, 1.45s) both; }
.is-on .type { animation: type var(--dur, 1.1s) steps(30, end) var(--d, .3s) both; }
.is-on .fill { transform-origin: 0 50%; animation: fill 1s ease-out var(--d, 1.6s) both; }
.is-on .press { animation: press .35s ease var(--d, 1.35s) both; }
.is-on .hl { animation: hl .3s ease var(--d, 1.45s) both; }
.is-on .sw--flip { animation: sw-bg .25s ease var(--d, 1.45s) both; }
.is-on .sw--flip::after { animation: sw-knob .25s ease var(--d, 1.45s) both; }
.is-on .flash { animation: flash 1.8s ease var(--d, .3s) both; }
@keyframes pop { from { opacity: 0; transform: translateY(.5em) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes out { to { opacity: 0; visibility: hidden; } }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -1em 0 0); } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes press { 45% { transform: scale(.93); filter: brightness(.9); } }
@keyframes hl { from { background-color: transparent; } to { background-color: var(--hl, #ddf4ff); } }
@keyframes sw-bg { to { background: #2c84db; } }
@keyframes sw-knob { to { transform: translateX(.9em); } }
@keyframes flash { 0%, 30% { background-color: #fff4c4; } 100% { background-color: transparent; } }
.d0 { --d: 0s; } .d03 { --d: .3s; } .d06 { --d: .6s; } .d1 { --d: 1s; } .d11 { --d: 1.1s; } .d12 { --d: 1.2s; } .d13 { --d: 1.3s; }
.d14 { --d: 1.45s; } .d15 { --d: 1.55s; } .d17 { --d: 1.7s; } .d19 { --d: 1.9s; } .d2 { --d: 2s; } .d21 { --d: 2.1s; } .d23 { --d: 2.3s; }
.d25 { --d: 2.5s; } .d26 { --d: 2.6s; } .d27 { --d: 2.7s; } .d28 { --d: 2.8s; } .d3 { --d: 3s; } .d32 { --d: 3.2s; } .d34 { --d: 3.4s; }
.d36 { --d: 3.6s; } .d37 { --d: 3.7s; } .d38 { --d: 3.8s; } .d4 { --d: 4s; } .d45 { --d: 4.5s; } .d48 { --d: 4.8s; } .d5 { --d: 5s; }
.o03 { --o: .3s; } .o1 { --o: 1s; } .o14 { --o: 1.45s; } .o15 { --o: 1.55s; } .o24 { --o: 2.4s; } .o17 { --o: 1.7s; } .o28 { --o: 2.85s; } .o3 { --o: 3s; } .o4 { --o: 4s; }

/* Where each pointer starts and clicks, scene by scene */
.cp-a0 { --x0: 40em; --y0: 30.5em; --x1: 7.4em; --y1: 23.7em; }
.cp-a1 { --x0: 30em; --y0: 27em; --x1: 4.4em; --y1: 14.3em; }
.cp-a2 { --x0: 30em; --y0: 26em; --x1: 43.3em; --y1: 7.4em; --x2: 36.5em; --y2: 10.1em; --x3: 26em; --y3: 10.1em; }
.cp-a3 { --x0: 43em; --y0: 30em; --x1: 22.5em; --y1: 13.6em; --x2: 31.8em; --y2: 24.1em; }
.cp-a4 { --x0: 30em; --y0: 28em; --x1: 42.2em; --y1: 11em; }
.cp-g0 { --x0: 36em; --y0: 29em; --x1: 5.6em; --y1: 15.5em; }
.cp-g2 { --x0: 22em; --y0: 29em; --x1: 42.3em; --y1: 9em; --x2: 30.5em; --y2: 20.6em; }
.cp-g3 { --x0: 40em; --y0: 28em; --x1: 23.6em; --y1: 8.2em; --x2: 28em; --y2: 16.3em; }
.cp-d0 { --x0: 30em; --y0: 22em; --x1: 28em; --y1: 1em; }
.cp-d1 { --x0: 32em; --y0: 12em; --x1: 15em; --y1: 26.2em; --x2: 17.2em; --y2: 22.1em; }
.cp-d2 { --x0: 24em; --y0: 30em; --x1: 34.6em; --y1: 14em; --x2: 29em; --y2: 16.7em; }

/* Download bubble (top right of a browser) */
.dlpop { position: absolute; z-index: 5; left: 31.2em; top: 2.7em; width: 15.8em; padding: .8em .9em; border: 1px solid #cfcac0; border-radius: .7em; background: #fff; box-shadow: 0 .5em 1.4em #0002; }
.dlpop__row { display: flex; align-items: center; gap: .7em; }
.dlpop__row div { flex: 1; min-width: 0; }
.dlpop b { display: block; font-size: .82em; }
.dlpop small { display: block; margin-top: .15em; color: #6b675e; font-size: .68em; }
.dlpop__bar { height: .3em; margin-top: .6em; border-radius: .15em; background: #ebe8e1; overflow: hidden; }
.dlpop__bar span { display: block; height: 100%; background: #2b7bf0; }
.zipdoc { display: block; flex: none; position: relative; width: 1.7em; height: 2.1em; border: 1px solid #b9b4a8; border-radius: .2em; background: #fff; }
.zipdoc::before { content: ""; position: absolute; left: .7em; top: .2em; width: .25em; height: 1.1em; background: repeating-linear-gradient(#77726a 0 .12em, transparent .12em .24em); }
.zipdoc--big { width: 3em; height: 3.6em; margin: 0 auto; border-radius: .3em; }
.zipdoc--big::before { left: 1.3em; top: .35em; width: .38em; height: 1.9em; background: repeating-linear-gradient(#77726a 0 .18em, transparent .18em .36em); }
.ok { color: #1a7f37; }

/* ---------- Fountain Labs page (where the .zip comes from) ---------- */
.flm { background: #f7f3ea; color: #0b1b33; }
.flm__head { position: absolute; left: 0; right: 0; top: 2.2em; height: 2.9em; border-bottom: .14em solid #0b1b33; }
.flm__logo { position: absolute; left: 1.6em; top: .7em; width: 1.5em; height: 1.5em; border-radius: .35em; background: #0b1b33; }
.flm__brand { position: absolute; left: 3.5em; top: .72em; font-family: var(--font-display); }
.flm__brand span { font-size: .9em; }
.flm__nav { position: absolute; right: 1.4em; top: .65em; display: flex; gap: .4em; }
.flm__nav span { padding: .3em .8em; border-radius: 1em; font-family: var(--font-display); font-size: .62em; }
.flm__nav .on { background: #0b1b33; color: #f7f3ea; }
.flm__h1 { position: absolute; left: 2.2em; top: 6.4em; font-family: var(--font-display); line-height: 1; }
.flm__h1 span { font-size: 1.8em; }
.flm__card { position: absolute; top: 10.6em; width: 20.6em; height: 15.6em; padding: 1.1em 1.2em; border: .14em solid #0b1b33; border-radius: .7em; background: #fffdf8; box-shadow: .3em .3em 0 #0b1b33; }
.flm__card--a { left: 2.2em; }
.flm__card--b { left: 25.2em; }
.flm__tag { display: inline-block; padding: .25em .7em; border: .1em solid #0b1b33; border-radius: 1em; background: #2b7bf0; color: #0b1b33; font-family: var(--font-display); font-size: .55em; letter-spacing: .06em; text-transform: uppercase; }
.flm__card h4 { margin: .6em 0 .7em; font-family: var(--font-display); font-size: 1.3em; font-weight: 400; }
.skel { display: block; height: .55em; margin-top: .55em; border-radius: .3em; background: #ddd6c6; }
.w90 { width: 90%; } .w80 { width: 80%; } .w70 { width: 70%; } .w60 { width: 60%; } .w50 { width: 50%; } .w40 { width: 40%; } .w30 { width: 30%; }
.flm__btn { position: absolute; left: 1.1em; bottom: 1.2em; width: 8.4em; height: 1.9em; display: grid; place-items: center; border: .12em solid #0b1b33; border-radius: 1em; background: #f7f3ea; font-family: var(--font-display); font-size: 1em; }
.flm__btn span { font-size: .58em; letter-spacing: .08em; text-transform: uppercase; }
.flm__btn--lock { width: 6.4em; left: auto; right: 1.1em; border-style: dashed; }

/* ---------- Claude app ---------- */
.cl { background: #faf9f5; color: #29261b; }
.cl-side { position: absolute; left: 0; top: 2.2em; bottom: 0; width: 11em; background: #f3f1ea; border-right: 1px solid #e5e2d8; }
.cl-nav { position: absolute; left: .7em; height: 1.75em; width: 9.6em; display: flex; align-items: center; gap: .6em; padding: 0 .6em; border-radius: .45em; }
.cl-nav span { font-size: .8em; color: #3d3a30; }
.cl-nav i { flex: none; width: .9em; height: .9em; border: .12em solid #8a867a; border-radius: .25em; }
.cl-nav--new i { border: 0; border-radius: 50%; background: #d97757; }
.cl-nav--on { background: #e8e5dc; }
.cl-nav { --hl: #e8e5dc; }
.n1 { top: 3.1em; } .n2 { top: 5.2em; } .n3 { top: 7.3em; } .n4 { top: 9.4em; } .n5 { top: 11.5em; }
.cl-user { position: absolute; left: .7em; bottom: .8em; display: flex; align-items: center; gap: .55em; }
.cl-user i { width: 1.5em; height: 1.5em; border-radius: 50%; background: #5a5546; }
.cl-user span { font-size: .75em; color: #3d3a30; }
.cl-hello { position: absolute; left: 15em; top: 9.2em; width: 29em; text-align: center; font-family: Georgia, "Times New Roman", serif; }
.cl-hello span { font-size: 1.65em; }
.cl-box { position: absolute; left: 15em; width: 29em; height: 5.6em; padding: .9em 1em; border: 1px solid #ddd9ce; border-radius: 1.1em; background: #fff; box-shadow: 0 .2em .8em #0000000d; }
.cl-box--home { top: 13.2em; }
.cl-box--chat { top: 24.6em; height: 5.2em; }
.cl-box p { margin: 0; font-size: .82em; color: #8b877c; }
.cl-box .typed { color: #29261b; }
.cl-box__plus { position: absolute; left: .9em; bottom: .8em; width: 1.5em; height: 1.5em; border: 1px solid #ddd9ce; border-radius: .5em; }
.cl-box__send { position: absolute; right: .9em; bottom: .8em; width: 1.6em; height: 1.6em; border-radius: .5em; background: #e3b7a5; }
.cl-box__send--go { background: #d97757; }
.cl-title { position: absolute; left: 14em; top: 3.8em; font-family: Georgia, "Times New Roman", serif; }
.cl-title span { font-size: 1.5em; }
.cl-tabs { position: absolute; left: 14em; top: 6.8em; display: flex; gap: .3em; }
.cl-tabs span { padding: .35em .8em; border-radius: .5em; font-size: .78em; color: #5d594e; }
.cl-tabs .on { background: #ebe8df; color: #29261b; font-weight: 600; }
.cl-plus { position: absolute; left: 42.5em; top: 6.6em; width: 2em; height: 2em; display: grid; place-items: center; border: 1px solid #d6d2c7; border-radius: .55em; background: #fff; }
.cl-plus span { font-size: 1.1em; line-height: 1; }
.cl-list { position: absolute; left: 14em; top: 9.6em; width: 30.5em; border: 1px solid #e3e0d6; border-radius: .8em; background: #fff; overflow: hidden; }
.cl-row { position: relative; height: 3.3em; padding: .65em 4em .5em 1em; border-top: 1px solid #ece9e0; }
.cl-row:first-child { border-top: 0; }
.cl-row b { display: block; font-size: .8em; }
.cl-row small { display: block; margin-top: .2em; color: #7a766b; font-size: .68em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw { position: absolute; right: 1em; top: 1.05em; width: 2.1em; height: 1.2em; border-radius: .6em; background: #d6d3cb; }
.sw::after { content: ""; position: absolute; left: .15em; top: .15em; width: .9em; height: .9em; border-radius: 50%; background: #fff; box-shadow: 0 .05em .15em #0003; }
.sw--on { background: #2c84db; }
.sw--on::after { transform: translateX(.9em); }
.cl-menu { position: absolute; z-index: 4; width: 11.4em; padding: .35em; border: 1px solid #ddd9ce; border-radius: .7em; background: #fff; box-shadow: 0 .5em 1.4em #0002; }
.cl-menu span { display: flex; align-items: center; gap: .5em; height: 2.5em; padding: 0 .7em; border-radius: .45em; font-size: .8em; --hl: #f0ede5; }
.cl-menu--a { left: 33.1em; top: 9em; }
.cl-menu--b { left: 21.4em; top: 9em; }
.cl-dim { position: absolute; inset: 2.2em 0 0 0; background: #1f1e1d59; }
.cl-dialog { position: absolute; z-index: 3; left: 11.5em; top: 5.4em; width: 25em; height: 21.4em; border: 1px solid #e0ddd3; border-radius: 1em; background: #fff; box-shadow: 0 1em 3em #0003; }
.cl-dialog h4 { position: absolute; left: 1.17em; top: .9em; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.2em; font-weight: 400; }
.cl-dialog__x { position: absolute; right: 1.2em; top: 1.1em; color: #8b877c; font-size: .9em; }
.cl-drop { position: absolute; left: 1.4em; top: 3.8em; width: 22.2em; height: 10.6em; border: .12em dashed #c9c5ba; border-radius: .8em; background: #fbfaf7; }
.cl-drop__hint { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .4em; text-align: center; }
.cl-drop__hint i { width: 2em; height: 2em; border-radius: 50%; background: #efece4; }
.cl-drop__hint b { font-size: .8em; }
.cl-drop__hint small { color: #7a766b; font-size: .7em; }
.cl-file { position: absolute; left: 1.2em; right: 1.2em; top: 3.6em; display: flex; align-items: center; gap: .8em; padding: .7em .8em; border: 1px solid #e3e0d6; border-radius: .6em; background: #fff; }
.cl-file div { flex: 1; }
.cl-file b { display: block; font-size: .8em; }
.cl-file .dlpop__bar { margin-top: .45em; }
.cl-file .ok { font-weight: 700; }
.cl-dialog__fine { position: absolute; left: 1.4em; top: 15.1em; color: #7a766b; }
.cl-dialog__fine span { font-size: .7em; }
.cl-btn { position: absolute; bottom: 1.4em; height: 2em; display: grid; place-items: center; border-radius: .55em; }
.cl-btn span { font-size: .78em; font-weight: 600; }
.cl-btn--go { right: 1.4em; width: 6em; background: #1f1e1d; color: #fff; }
.cl-btn--no { right: 8em; width: 5.4em; border: 1px solid #d6d2c7; }
.cl-toast { position: absolute; z-index: 4; left: 21em; top: 28.6em; padding: .6em 1.1em; border-radius: .6em; background: #1f1e1d; color: #fff; }
.cl-toast span { font-size: .78em; }
.chip-file { position: absolute; left: 1.5em; top: 1.6em; display: flex; align-items: center; gap: .5em; padding: .45em .7em; border: 1px solid #cfcac0; border-radius: .5em; background: #fff; box-shadow: 0 .4em 1em #0002; white-space: nowrap; }
.chip-file .zipdoc { width: 1.2em; height: 1.5em; }
.chip-file .zipdoc::before { left: .45em; height: .8em; }
.chip-file b { font-size: .75em; }
.cl-you { position: absolute; right: 4em; top: 4.6em; max-width: 20em; padding: .7em 1em; border-radius: 1em; background: #f0eee6; }
.cl-you span { font-size: .82em; }
.cl-tool { position: absolute; left: 15em; top: 8.6em; display: flex; align-items: center; gap: .5em; padding: .35em .8em; border: 1px solid #e3e0d6; border-radius: .6em; background: #fff; }
.cl-tool i { width: .7em; height: .7em; border-radius: .2em; background: #d97757; }
.cl-tool span { font-size: .72em; color: #5d594e; }
.cl-say { position: absolute; left: 17.4em; margin: 0; font-size: .86em; line-height: 1.4; white-space: nowrap; }
.s1 { top: 13.3em; } .s2 { top: 15.4em; } .s3 { top: 17.5em; }

/* ---------- GitHub ---------- */
.gh { background: #fff; color: #1f2328; }
.gh-head { position: absolute; left: 0; right: 0; top: 2.2em; height: 2.9em; display: flex; align-items: center; gap: .7em; padding: 0 1.2em; background: #f6f8fa; }
.gh-head i { width: 1.6em; height: 1.6em; border-radius: 50%; background: #1f2328; }
.gh-head span { font-size: .85em; }
.gh-head em { padding: .05em .55em; border: 1px solid #d1d9e0; border-radius: 1em; color: #59636e; font-size: .65em; font-style: normal; }
.gh-tabs { position: absolute; left: 0; right: 0; top: 5.1em; height: 2.3em; display: flex; gap: 1.6em; padding: 0 1.4em; border-bottom: 1px solid #d1d9e0; background: #f6f8fa; }
.gh-tabs span { display: flex; align-items: center; font-size: .75em; color: #59636e; }
.gh-tabs .on { color: #1f2328; font-weight: 600; box-shadow: inset 0 -.2em 0 #fd8c73; }
.gh-crumb { position: absolute; left: 2.1em; top: 8.3em; color: #0969da; }
.gh-crumb span { font-size: .85em; }
.gh-crumb b { color: #1f2328; }
.gh-box { position: absolute; left: 2em; width: 44em; border: 1px solid #d1d9e0; border-radius: .6em; background: #fff; overflow: hidden; }
.gh-box--files { top: 10.4em; }
.gh-box--root { top: 11em; }
.gh-box--file { top: 10.3em; height: 21.2em; }
.gh-box--readme { top: 18.4em; height: 13em; }
.gh-pad { padding: .6em 1.2em; }
.gh-pad .skel { background: #e6e9ed; height: .5em; }
.gh-box__head i.doc { width: .8em; height: 1em; border-radius: .12em; border: .1em solid #59636e; background: none; }
.gh-box__head { display: flex; align-items: center; gap: .6em; height: 2.3em; padding: 0 1em; background: #f6f8fa; border-bottom: 1px solid #d1d9e0; }
.gh-box__head i { width: 1.1em; height: 1.1em; border-radius: 50%; background: #8c959f; }
.gh-box__head span { font-size: .72em; color: #59636e; }
.gh-box__head b { font-size: .72em; }
.gh-box__head .r { margin-left: auto; }
.gh-row { display: flex; align-items: center; gap: .7em; height: 2.1em; padding: 0 1em; border-top: 1px solid #d1d9e0; --hl: #ddf4ff; }
.gh-box__head + .gh-row { border-top: 0; }
.gh-row span { font-size: .78em; }
.gh-row small { margin-left: auto; color: #59636e; font-size: .7em; }
.gh-row .dir, .gh-row .doc { flex: none; width: 1em; height: .85em; border-radius: .12em; background: #54aeff; }
.gh-row .doc { width: .8em; height: 1em; background: none; border: .1em solid #59636e; }
.gh-btn { position: absolute; top: 8.3em; height: 1.9em; display: flex; align-items: center; justify-content: center; gap: .5em; padding: 0 .8em; border: 1px solid #d1d9e0; border-radius: .45em; background: #f6f8fa; }
.gh-btn span { font-size: .75em; font-weight: 600; }
.gh-btn--branch { left: 2em; width: 5.2em; }
.gh-btn--find { left: 7.8em; width: 10em; justify-content: flex-start; background: #fff; }
.gh-btn--find span { font-weight: 400; color: #59636e; }
.gh-btn--code { left: 39.4em; width: 6.6em; background: #1f883d; border-color: #1a7f37; color: #fff; }
.gh-menu { position: absolute; z-index: 4; left: 26.4em; top: 10.6em; width: 19.6em; padding-bottom: .5em; border: 1px solid #d1d9e0; border-radius: .7em; background: #fff; box-shadow: 0 .6em 1.6em #1f232833; }
.gh-menu__tabs { display: flex; gap: 1.4em; height: 2.1em; padding: 0 1em; border-bottom: 1px solid #d1d9e0; }
.gh-menu__tabs span { display: flex; align-items: center; font-size: .72em; color: #59636e; }
.gh-menu__tabs .on { color: #1f2328; font-weight: 600; box-shadow: inset 0 -.2em 0 #fd8c73; }
.gh-menu__clone { padding: .7em 1em .4em; }
.gh-menu__clone b { font-size: .75em; }
.gh-menu__url { margin-top: .5em; padding: .4em .6em; border: 1px solid #d1d9e0; border-radius: .4em; background: #f6f8fa; font-family: ui-monospace, Menlo, monospace; font-size: .62em; }
.gh-menu__item { display: flex; align-items: center; gap: .7em; height: 2.1em; margin: 0 .4em; padding: 0 .6em; border-radius: .4em; --hl: #eef1f4; }
.gh-menu__item span { font-size: .75em; }
.gh-menu__item i { width: .9em; height: .9em; border: .1em solid #59636e; border-radius: .2em; }
.gh-menu hr { margin: .4em 0; border: 0; border-top: 1px solid #d1d9e0; }
.gh-front { position: absolute; left: 3.2em; top: 13.6em; width: 29.6em; border-collapse: collapse; }
.gh-front th, .gh-front td { padding: .45em .8em; border: 1px solid #d1d9e0; text-align: left; vertical-align: top; }
.gh-front th span, .gh-front td span { font-size: .72em; }
.gh-front th { background: #f6f8fa; font-weight: 600; }
.gh-front .k { width: 7em; }
.gh-text { position: absolute; left: 3.2em; top: 20.4em; width: 29.6em; }
.gh-text .skel { background: #e6e9ed; height: .5em; }
.gh-seg { display: flex; border: 1px solid #d1d9e0; border-radius: .4em; overflow: hidden; }
.gh-seg span { padding: .25em .7em; font-size: .68em; color: #59636e; }
.gh-seg .on { background: #fff; color: #1f2328; font-weight: 600; box-shadow: 0 0 0 1px #d1d9e0; }
.anno { position: absolute; z-index: 3; border: .16em dashed #2b7bf0; border-radius: .5em; }
.anno--a { left: 2.7em; top: 13.1em; width: 30.6em; height: 6.4em; }
.anno--b { left: 2.7em; top: 19.9em; width: 30.6em; height: 8.6em; }
.anno__tag { position: absolute; z-index: 3; left: 35.2em; width: 9.6em; padding: .5em .8em; border-radius: .6em; background: #0b1b33; color: #f7f3ea; line-height: 1.2; }
.anno__tag::before { content: ""; position: absolute; right: 100%; top: 50%; width: 1.9em; border-top: .16em dashed #2b7bf0; }
.anno__tag span { font-family: var(--font-display); font-size: .66em; letter-spacing: .03em; }
.anno__tag--a { top: 14.8em; }
.anno__tag--b { top: 22.6em; }

/* ---------- Finder ---------- */
.fd { background: #fff; color: #1d1d1f; }
.fd .wbar { background: #ececec; }
.fd-bar { position: absolute; left: 10em; right: 0; top: 2.2em; height: 2.4em; display: flex; align-items: center; gap: .9em; padding: 0 1em; border-bottom: 1px solid #e3e3e3; }
.fd-bar span { font-size: .75em; color: #6e6e73; }
.fd-bar b { font-size: .75em; }
.fd-side { position: absolute; left: 0; top: 2.2em; bottom: 0; width: 10em; padding-top: .8em; background: #f2f2f1; border-right: 1px solid #e3e3e3; }
.fd-side p { margin: 0; height: 1.6em; display: flex; align-items: center; margin-inline: .5em; padding: 0 .6em; border-radius: .4em; }
.fd-side p span { font-size: .75em; }
.fd-side .muted span { font-size: .62em; color: #8e8e93; font-weight: 600; }
.fd-side .on { background: #dcdcdc; }
.fd-item { position: absolute; width: 7.6em; height: 6.4em; display: flex; flex-direction: column; align-items: center; gap: .3em; padding-top: .3em; }
.fd-lbl { max-width: 100%; padding: .05em .4em; border-radius: .25em; font-size: .7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; --hl: #2a6fdb; }
.fd-folder { display: block; position: relative; width: 3.4em; height: 2.7em; margin-top: .4em; border-radius: .25em; background: linear-gradient(#7cc1f7, #4aa3ee); }
.fd-folder::before { content: ""; position: absolute; left: 0; top: -.35em; width: 1.4em; height: .5em; border-radius: .2em .2em 0 0; background: #6bb6f4; }
.fd-icon { display: block; padding: .2em .3em; border-radius: .35em; --hl: #00000014; }
.c1 { left: 12.4em; top: 6.2em; } .c2 { left: 20em; top: 6.2em; } .c3 { left: 27.6em; top: 6.2em; } .c4 { left: 35.2em; top: 6.2em; }
.c5 { left: 12.4em; top: 12.8em; } .c6 { left: 20em; top: 12.8em; } .c7 { left: 27.6em; top: 12.8em; }
.fd-menu { position: absolute; z-index: 4; left: 24.6em; top: 8.6em; width: 13.4em; padding: .3em; border: 1px solid #c8c8cc; border-radius: .55em; background: #f6f6f6; box-shadow: 0 .6em 1.6em #0003; }
.fd-menu span { display: flex; align-items: center; height: 1.6em; padding: 0 .7em; border-radius: .3em; --hl: #2a6fdb; }
.fd-menu span b { font-size: .72em; font-weight: 400; }
.fd-menu hr { margin: .2em .5em; border: 0; border-top: 1px solid #d6d6d8; }
.is-on .fd-menu .hl b { animation: to-white .3s ease var(--d) both; }
.is-on .fd-item .hl { animation-name: hl, to-white; }
@keyframes to-white { to { color: #fff; } }

/* ---------- Claude desktop app, Code tab ---------- */
.dk { background: #faf9f5; color: #29261b; }
.dk-bar { height: 2.6em; background: #f0eee7; border-color: #e2dfd5; }
.dk-tabs { position: absolute; left: 17.4em; top: .45em; width: 13.2em; height: 1.7em; display: flex; padding: .15em; border-radius: .6em; background: #e6e3da; }
.dk-tabs span { flex: 1; display: grid; place-items: center; border-radius: .45em; --hl: #fff; }
.dk-tabs b { font-size: .72em; font-weight: 500; color: #5d594e; }
.dk-tabs .on { background: #fff; box-shadow: 0 .05em .2em #0002; }
.dk-tabs .on b { color: #29261b; font-weight: 600; }
.is-on .unhl { animation: unhl .3s ease var(--o, 1.45s) both; }
@keyframes unhl { to { background-color: transparent; box-shadow: none; } }
.dk .cl-side { top: 2.6em; }
.dk .cl-dim { top: 2.6em; }
.dk-side { position: absolute; left: 0; top: 2.6em; bottom: 0; width: 11.5em; display: flex; flex-direction: column; gap: .25em; padding: .8em .7em; background: #f3f1ea; border-right: 1px solid #e5e2d8; }
.dk-new { display: flex; align-items: center; height: 1.9em; padding: 0 .7em; border: 1px solid #dcd8cd; border-radius: .5em; background: #fff; }
.dk-new b, .dk-sess b, .dk-cust b { font-size: .76em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-label { margin: 1em 0 .2em; padding: 0 1.1em; color: #8b877c; font-size: .62em; font-weight: 600; }
.dk-sess { display: flex; align-items: center; height: 1.7em; padding: 0 .7em; border-radius: .45em; }
.dk-sess b { font-weight: 400; }
.dk-sess.on { background: #e8e5dc; }
.dk-cust { position: absolute; left: .7em; right: .7em; bottom: 2.9em; display: flex; align-items: center; gap: .55em; height: 1.7em; padding: 0 .6em; }
.dk-cust i { width: .9em; height: .9em; border: .12em solid #8a867a; border-radius: .25em; }
.dk-title { position: absolute; left: 13.6em; top: 3.3em; }
.dk-title b { font-size: .82em; }
.dk-empty { position: absolute; left: 13.6em; top: 15.4em; width: 32em; margin: 0; text-align: center; font-family: Georgia, "Times New Roman", serif; }
.dk-empty span { font-size: 1.3em; }
.dk-box { position: absolute; left: 13.6em; top: 23.2em; width: 32em; height: 4.6em; padding: .8em 1em; border: 1px solid #ddd9ce; border-radius: .9em; background: #fff; box-shadow: 0 .2em .8em #0000000d; }
.dk-box p { margin: 0; font-size: .8em; color: #8b877c; white-space: nowrap; }
.dk-box .typed { color: #29261b; }
.dk-box__plus { position: absolute; left: .8em; bottom: .7em; width: 1.5em; height: 1.5em; display: grid; place-items: center; border: 1px solid #ddd9ce; border-radius: 50%; }
.dk-box__plus b { font-size: .95em; font-weight: 400; color: #5d594e; line-height: 1; }
.dk-box__send { position: absolute; right: .8em; bottom: .7em; width: 1.6em; height: 1.6em; border-radius: .5em; background: #e3b7a5; }
.dk-box__send--go { background: #d97757; }
.dk-under { position: absolute; left: 13.6em; top: 28.2em; width: 32em; display: flex; align-items: center; gap: .4em; border-radius: .5em; }
.dk-under span { padding: .3em .6em; border-radius: .4em; font-size: .66em; color: #5d594e; white-space: nowrap; }
.dk-under .r { margin-left: auto; }
.dk-folder { display: inline-block; width: .95em; height: .75em; margin-right: .35em; border-radius: .12em; background: #8a867a; vertical-align: -.05em; }
.dk-menu { position: absolute; z-index: 4; left: 13.6em; top: 14.9em; width: 13.4em; padding: .35em; border: 1px solid #ddd9ce; border-radius: .7em; background: #fff; box-shadow: 0 .5em 1.4em #0002; }
.dk-menu span { display: flex; align-items: center; gap: .6em; height: 2em; padding: 0 .7em; border-radius: .45em; --hl: #f0ede5; }
.dk-menu i { width: .85em; height: .85em; border: .12em solid #8a867a; border-radius: .2em; }
.dk-menu b { font-size: .76em; font-weight: 400; }
.dk-dialog { position: absolute; z-index: 3; left: 9em; top: 4.2em; width: 30em; height: 25.4em; border: 1px solid #e0ddd3; border-radius: 1em; background: #fff; box-shadow: 0 1em 3em #0003; }
.dk-dialog h4 { position: absolute; left: 1.4em; top: 1.1em; margin: 0; font-size: 1em; font-weight: 600; }
.dk-dtabs { position: absolute; left: 1.4em; top: 3.1em; display: flex; gap: 1.2em; }
.dk-dtabs span { padding-bottom: .3em; font-size: .74em; color: #7a766b; }
.dk-dtabs .on { color: #29261b; font-weight: 600; box-shadow: inset 0 -.15em 0 #29261b; }
.dk-search { position: absolute; left: 1.4em; top: 5.3em; width: 27.2em; height: 2.2em; display: flex; align-items: center; padding: 0 .8em; border: 1px solid #ddd9ce; border-radius: .55em; }
.dk-search span { font-size: .76em; }
.dk-search .abs { color: #8b877c; }
.dk-plist { position: absolute; left: 1.4em; top: 8.2em; width: 27.2em; }
.dk-prow { position: relative; height: 3.6em; padding: .75em 6.5em .5em .2em; border-bottom: 1px solid #ece9e0; }
.dk-prow b { display: block; font-size: .8em; }
.dk-prow small { display: block; margin-top: .2em; color: #7a766b; font-size: .66em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-install, .dk-done { position: absolute; right: .2em; top: .85em; width: 5em; height: 1.9em; display: grid; place-items: center; border-radius: .5em; background: #1f1e1d; color: #fff; }
.dk-done { background: #fff; color: #1a7f37; box-shadow: inset 0 0 0 1px #b7dfc2; }
.dk-install span, .dk-done span { font-size: .72em; font-weight: 600; }
.dk-scope { position: absolute; z-index: 5; left: 17.4em; top: 11.3em; width: 11em; padding: .35em; border: 1px solid #ddd9ce; border-radius: .6em; background: #fff; box-shadow: 0 .5em 1.4em #0002; }
.dk-scope span { display: flex; align-items: center; height: 2em; padding: 0 .7em; border-radius: .4em; --hl: #f0ede5; }
.dk-scope b { font-size: .74em; font-weight: 400; }
.dk-slash { position: absolute; z-index: 4; left: 13.6em; top: 15.3em; width: 32em; padding: .35em; border: 1px solid #ddd9ce; border-radius: .7em; background: #fff; box-shadow: 0 .5em 1.4em #0002; }
.dk-slash__h { display: block; padding: .5em 1.1em .3em; color: #8b877c; font-size: .62em; font-weight: 600; }
.dk-slash__row { display: block; height: 2.7em; padding: .45em .7em; border-radius: .45em; --hl: #f0ede5; }
.dk-slash__row b { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72em; }
.dk-slash__row small { display: block; margin-top: .2em; color: #7a766b; font-size: .66em; }
.dk-you { position: absolute; right: 3em; top: 5.2em; max-width: 22em; padding: .6em 1em; border-radius: .9em; background: #f0eee6; }
.dk-you span { font-size: .8em; }
.dk-tool { position: absolute; left: 13.6em; top: 8.4em; display: flex; align-items: center; gap: .5em; padding: .35em .8em; border: 1px solid #e3e0d6; border-radius: .55em; background: #fff; }
.dk-tool i { width: .55em; height: .55em; border-radius: 50%; background: #d97757; }
.dk-tool b { font-size: .72em; }
.dk-tool span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68em; color: #7a766b; }
.dk .cl-say { left: 15.8em; }

/* With reduced motion nothing moves: each step shows how it ends, and the pointer is hidden. */
@media (prefers-reduced-motion: reduce) {
  .mock *, .mock *::before, .mock *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .cur { display: none; }
}