/* =========================================================================
   Tian2 · /ai/skills/ — shared demo-page styles
   Editorial: cream/ink/coral · 2.5px rules · no shadows/gradients
   ========================================================================= */
* { box-sizing: border-box; }
body { margin: 0; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 var(--space-6); }
a.plain { text-decoration: none; }

/* Masthead */
.masthead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) 0 var(--space-4); }
.masthead .brand { display: flex; align-items: center; gap: var(--space-3); }
.masthead .brand img { height: 38px; width: auto; display: block; }
.masthead .brand .zh { font-family: var(--font-serif-zh); font-weight: 700; font-size: 20px; color: var(--ink-2); letter-spacing: 0.08em; }
.nav { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; justify-content: flex-end; }
.nav a { font-family: var(--font-body-en); font-weight: 600; font-size: var(--fs-small); text-decoration: none; color: var(--ink); white-space: nowrap; }
.nav a:hover { color: var(--coral); }
.nav a[aria-current="page"] { color: var(--coral); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Breadcrumb */
.crumb { padding: var(--space-4) 0 0; font-family: var(--font-body-en); font-size: var(--fs-caption); color: var(--ink-3); }
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--coral); }
.crumb .sep { margin: 0 var(--space-2); }

/* Shared name chip */
.mono-name { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--cream-2); border: var(--stroke-hairline) solid var(--ink); padding: 3px 10px; border-radius: var(--radius-1); }

/* Demo hero */
.dhero { padding: var(--space-6) 0 var(--space-7); border-top: var(--stroke) solid var(--ink); margin-top: var(--space-4); }
.dhero .row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.dhero h1 { font-size: clamp(34px, 5vw, 60px); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: 900; margin: 0 0 var(--space-4); }
.dhero .lede { font-size: var(--fs-h4); color: var(--ink-2); max-width: 62ch; margin: 0; }

/* Section */
.sec { padding: var(--space-7) 0; border-top: var(--stroke) solid var(--ink); }
.sec h2 { margin: 0 0 var(--space-4); font-size: var(--fs-h3); }
.sec p { color: var(--ink-2); max-width: 72ch; }
.kick { display: block; margin-bottom: var(--space-3); }

/* Inputs / outputs grid */
.io { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: var(--stroke) solid var(--ink); }
.io .col { padding: var(--space-6); }
.io .col:first-child { border-right: var(--stroke) solid var(--ink); }
.io h3 { margin: 0 0 var(--space-3); font-size: var(--fs-h4); }
.io ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); font-size: var(--fs-small); }
.io li { margin-bottom: var(--space-2); }

/* Sample / code block */
.demo-block { border: var(--stroke) solid var(--ink); background: var(--cream-2); }
.demo-block .cap { font-family: var(--font-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-size: 12px; color: var(--ink-3); padding: var(--space-3) var(--space-5); border-bottom: var(--stroke-hairline) solid var(--ink); }
.demo-block pre { margin: 0; padding: var(--space-5); overflow-x: auto; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 13px; line-height: 1.65; color: var(--ink); background: none; border: 0; }
.demo-block pre code { background: none; border: 0; padding: 0; }
.demo-block .body { padding: var(--space-5); }

/* Flow arrows */
.flow { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin: var(--space-5) 0; flex-wrap: wrap; }
.flow .arrow { font-family: var(--font-display-en); font-weight: 900; font-size: 28px; color: var(--coral); }

/* Rendered mock card */
.qcard { border: var(--stroke) solid var(--ink); background: var(--cream); }
.qcard .qhead { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--stroke-hairline) solid var(--ink); flex-wrap: wrap; }
.qcard .pill { font-family: var(--font-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-size: 11px; padding: 2px 8px; border: var(--stroke-hairline) solid var(--ink); border-radius: var(--radius-2); background: var(--cream-2); color: var(--ink-2); }
.qcard .qbody { padding: var(--space-5); }
.qcard .qbody p { margin: 0 0 var(--space-4); color: var(--ink); }
.reveal { border-top: var(--stroke-hairline) solid var(--ink); }
.reveal summary { list-style: none; cursor: pointer; padding: var(--space-4) var(--space-5); font-family: var(--font-body-en); font-weight: 600; font-size: var(--fs-small); color: var(--coral); }
.reveal summary::-webkit-details-marker { display: none; }
.reveal summary::before { content: "\25B8  "; }
.reveal[open] summary::before { content: "\25BE  "; }
.reveal .ans { padding: 0 var(--space-5) var(--space-5); color: var(--ink-2); font-size: var(--fs-small); }

/* Score / rubric rows */
.rubric { border: var(--stroke) solid var(--ink); }
.rubric .r { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-top: var(--stroke-hairline) solid var(--ink); }
.rubric .r:first-child { border-top: 0; }
.rubric .r .lbl { font-weight: 600; color: var(--ink); font-size: var(--fs-small); }
.rubric .r .bar { flex: 1; height: 10px; background: var(--cream-2); border: var(--stroke-hairline) solid var(--ink); position: relative; max-width: 320px; }
.rubric .r .bar span { position: absolute; inset: 0 auto 0 0; background: var(--coral); }
.rubric .r .val { font-family: var(--font-label); letter-spacing: 0.06em; font-size: 15px; color: var(--ink-2); min-width: 44px; text-align: right; }

/* Simple numbered list of outputs */
.steps { list-style: none; counter-reset: s; padding: 0; margin: var(--space-4) 0 0; }
.steps li { counter-increment: s; position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-7); border-top: var(--stroke-hairline) solid var(--ink); color: var(--ink-2); font-size: var(--fs-small); }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: var(--space-3); font-family: var(--font-display-en); font-weight: 900; color: var(--coral); font-size: 20px; line-height: 1; }
.steps li strong { color: var(--ink); }

.backlink { padding: var(--space-7) 0; border-top: var(--stroke) solid var(--ink); }
.backlink a { color: var(--ink); font-weight: 600; }
.backlink a:hover { color: var(--coral); }

/* Footer */
footer { border-top: var(--stroke) solid var(--ink); margin-top: var(--space-4); }
footer .wrap { padding: var(--space-7) var(--space-6); }
.colophon { color: var(--ink-3); font-size: var(--fs-caption); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.disclaimer { margin-top: var(--space-4); color: var(--ink-3); font-size: var(--fs-caption); line-height: 1.55; max-width: 90ch; }

@media (max-width: 720px) {
  .io { grid-template-columns: 1fr; }
  .io .col:first-child { border-right: 0; border-bottom: var(--stroke) solid var(--ink); }
  .rubric .r { flex-wrap: wrap; }
}