/* Tifinagh studio — contained styles using the publication's editorial palette. */
.ts { --ts-line: #d9cbb8; --ts-green: #305b3c; }
.ts [hidden] { display: none !important; }
.ts button { font-family: var(--sans); cursor: pointer; }
.ts button:disabled { cursor: default; }
.ts :is(button, a, textarea):focus-visible { outline: 3px solid #b65f3a; outline-offset: 4px; }
.ts section[id], .ts aside[id] { scroll-margin-top: 1.5rem; }
.ts-hero { padding: clamp(2.5rem, 6vw, 5.5rem) 0 3.5rem; border-bottom: 1px solid var(--ts-line); background: #f3eddf; }
.ts-hero__inner { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(15rem, .6fr); gap: 4rem; align-items: center; }
.ts-hero h1 { font-size: clamp(2.8rem, 5.3vw, 5.1rem); line-height: 1.04; letter-spacing: -.045em; }
.ts-hero__lead { color: #5e625d; max-width: 36rem; font-size: 1.08rem; }
.ts-hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.65rem 0; }
.ts-hero__meta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; font-size: .72rem; letter-spacing: .03em; color: var(--muted-fg); }
.ts-hero__meta span { color: var(--terracotta); }
.ts-specimen { margin: 0; display: grid; justify-items: center; text-align: center; border: 1px solid #cab898; background: var(--paper); padding: 1.2rem 1rem 1.7rem; border-radius: 48% 48% 8px 8px; box-shadow: 8px 8px 0 #e4d7bd; }
.ts-specimen__glyph { display: block; font-family: var(--tifinagh); font-size: clamp(7rem, 15vw, 12rem); line-height: 1.45; color: var(--terracotta); }
.ts-specimen figcaption span { display: block; text-transform: uppercase; letter-spacing: .13em; font-size: .62rem; color: var(--muted-fg); }
.ts-specimen figcaption strong { display: block; color: var(--indigo); font-family: var(--serif); font-size: 1.5rem; }
.ts-specimen figcaption strong span { display: inline; font-size: inherit; }
.ts-specimen figcaption small { color: var(--muted-fg); font-size: .72rem; }
.ts-intro { padding-block: 1.5rem; border-bottom: 1px solid var(--ts-line); }
.ts-intro p { margin: 0; max-width: 72rem; color: var(--muted-fg); font-size: .88rem; }
.ts-intro strong { color: var(--indigo); }
.ts-workspace, .ts-context { padding-block: 3.5rem; }
.ts-section-title { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.8rem; }
.ts-step { width: 3rem; height: 3rem; display: grid; place-items: center; border: 1px solid var(--ts-line); border-radius: 50%; color: var(--terracotta); flex: 0 0 auto; font-family: var(--serif); font-size: 1.1rem; }
.ts-section-title .section__kicker { margin: 0 0 .3rem; font-size: .63rem; }
.ts-section-title h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.ts-writing-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.ts-keyboard-panel { min-width: 0; }
.ts-panel-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; align-items: center; margin: 0 0 .85rem; }
.ts-panel-heading h3 { margin: 0; font-family: var(--sans); font-size: .9rem; }
.ts-panel-heading > span { font-size: .72rem; color: var(--muted-fg); }
.ts-keyboard { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; }
.ts-key { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 75px; border: 1px solid var(--ts-line); border-radius: 7px; padding: .5rem .1rem .3rem; background: var(--paper); color: var(--indigo); transition: background .15s, border-color .15s; }
.ts-key:enabled:hover { background: #eae2cf; border-color: var(--terracotta); }
.ts-key:enabled:active { background: #dfc59d; }
.ts-key__glyph { font-family: var(--tifinagh); font-size: 1.55rem; line-height: 1.3; }
.ts-key__latin { display: block; font-size: .7rem; color: #695d4f; margin-top: .3rem; }
.ts-keyboard-panel > .ts-small { margin-top: 1rem; }
.ts-small { font-size: .76rem; line-height: 1.65; color: var(--muted-fg); }
.ts-notebook { border: 1px solid var(--ts-line); border-radius: 10px; background: var(--paper); padding: 1.5rem; box-shadow: 0 8px 30px rgba(24,50,74,.04); }
.ts-notebook label { display: block; font-weight: 750; color: var(--indigo); font-size: .9rem; margin-bottom: .5rem; }
.ts-output { display: block; width: 100%; min-height: 12rem; resize: vertical; color: var(--indigo); background: repeating-linear-gradient(var(--ivory), var(--ivory) 2.9rem, #e8decb 2.9rem, #e8decb 3rem); border: 1px solid var(--ts-line); border-radius: 5px; padding: .55rem .8rem; font-family: var(--tifinagh), var(--sans); font-size: 1.85rem; line-height: 3rem; overflow-wrap: anywhere; }
.ts-output::placeholder { font-family: var(--serif); font-size: 1.05rem; color: #796a58; }
.ts-notebook__tools { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.ts-button { display: inline-flex; justify-content: center; align-items: center; gap: .7rem; min-height: 44px; padding: .65rem .95rem; border: 1px solid var(--ts-line); border-radius: 5px; background: var(--ivory); color: var(--indigo); font-size: .76rem; font-weight: 750; line-height: 1.4; }
.ts-button:enabled:hover { background: #e9dfcd; }
.ts-button--quiet { background: transparent; }
.ts-button--primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.ts-button--primary:enabled:hover { background: #294d6c; }
.ts-button:disabled { opacity: .5; }
.ts-notebook__footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--rule-soft); }
.ts-status { margin: .85rem 0 0; min-height: 2.6em; font-size: .73rem; color: var(--muted-fg); line-height: 1.5; }
.ts-notice { padding: 1rem; background: var(--muted); border-left: 3px solid var(--saffron); font-size: .85rem; }
.ts-practice-section { background: var(--indigo-dk); color: #e4e9e8; padding: 4rem 0; }
.ts-practice-layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 4rem; align-items: center; }
.ts-practice-copy .section__kicker { color: #ebbf6d; }
.ts-practice-copy h2 { color: var(--ivory); font-size: clamp(2.4rem, 4vw, 3.7rem); line-height: 1.06; }
.ts-practice-copy > p:not(.section__kicker) { max-width: 28rem; color: #c4cecF; font-size: .94rem; }
.ts-practice-copy .ts-small { font-size: .76rem !important; }
.ts-practice-reference { display: inline-block; color: #efc882; font-size: .85rem; margin-top: .7rem; }
.ts-practice-reference:hover { color: white; }
.ts-challenge { background: var(--paper); border-radius: 12px; color: var(--indigo); padding: 1.8rem; min-width: 0; }
.ts-challenge__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .73rem; font-weight: 700; }
.ts-challenge__top p { margin: 0; }
.ts-challenge__top > span { color: var(--muted-fg); font-weight: 500; }
.ts-progress-track { height: 3px; background: #e9dfce; margin-top: .8rem; }
.ts-progress-track > span { display: block; width: 0; height: 100%; background: var(--terracotta); }
.ts-welcome { display: flex; flex-direction: column; align-items: center; padding: 2rem 0; text-align: center; }
.ts-welcome > span { font-family: var(--tifinagh); color: var(--terracotta); font-size: 5rem; line-height: 1.5; }
.ts-welcome > p { font-family: var(--serif); font-size: 1.4rem; }
.ts-question-label { text-align: center; font-size: .8rem; margin: 1.5rem 0 0; }
.ts-question-glyph { text-align: center; font-family: var(--tifinagh); color: var(--indigo); font-size: 5.5rem; line-height: 1.65; }
.ts-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.ts-option { min-width: 0; min-height: 57px; border: 1px solid var(--ts-line); border-radius: 6px; background: var(--ivory); color: var(--indigo); font-size: 1.15rem; }
.ts-option:enabled:hover { background: #e9dfcd; border-color: var(--terracotta); }
.ts-option--correct { background: #dcebdc; border: 2px solid #41644a; color: #284331; }
.ts-option--incorrect { background: #f8e0d5; border: 2px solid #a14626; color: #842e18; }
.ts-answer { min-height: 3.6em; margin: 1rem 0; font-size: .83rem; line-height: 1.5; }
.ts-answer--correct { color: #305b3c; }
.ts-answer--learn { color: #834227; }
.ts-next { width: 100%; }
.ts-results { padding: 1.3rem 0 0; }
.ts-results__label { margin: 0; text-align: center; font-size: .65rem; color: var(--muted-fg); letter-spacing: .13em; text-transform: uppercase; }
.ts-results__score { margin: .3rem 0; text-align: center; font-family: var(--serif); font-size: 3.5rem; line-height: 1.2; color: var(--terracotta); }
.ts-results h3 { text-align: center; font-size: 1.4rem; }
.ts-results > p:not(.ts-results__score, .ts-results__label) { font-size: .8rem; color: var(--muted-fg); }
.ts-review { display: grid; gap: .4rem; margin: 1rem 0 1.5rem; }
.ts-review p { margin: 0; padding: .35rem .6rem; background: var(--ivory); border-radius: 3px; font-size: .78rem; }
.ts-review .tfng { display: inline-block; min-width: 2rem; color: var(--terracotta); font-size: 1.2rem; }
.ts-results > button { width: 100%; }
.ts-context-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ts-context-grid article { border-top: 1px solid var(--ts-line); padding-top: 1.1rem; }
.ts-context-number { display: block; margin-bottom: 1rem; color: var(--terracotta); font-size: .7rem; }
.ts-context-grid h3 { font-size: 1.45rem; }
.ts-context-grid p { font-size: .87rem; color: var(--muted-fg); }
.ts-further { display: flex; justify-content: space-between; align-items: start; gap: 1rem; padding: 1.7rem 0; margin-top: 1rem; border-block: 1px solid var(--ts-line); }
.ts-further p { margin: 0; font-family: var(--serif); font-size: 1.2rem; color: var(--indigo); }
.ts-further > div { display: grid; gap: .7rem; }
.ts-sources { margin-top: 2.5rem; max-width: 62rem; font-size: .83rem; color: var(--muted-fg); }
.ts-sources h3 { font-family: var(--sans); font-size: .85rem; }
.ts-sources ul { padding-left: 1.2rem; }
.ts-sources li { margin: .5rem 0; }
@media (max-width: 950px) {
  .ts-hero__inner { gap: 2rem; grid-template-columns: minmax(0, 1fr) 14rem; }
  .ts-writing-layout { grid-template-columns: 1fr; gap: 1.4rem; }
  .ts-keyboard { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .ts-practice-layout { gap: 2rem; }
  .ts-context-grid { gap: 1.1rem; }
}
@media (max-width: 650px) {
  .ts-hero { padding-top: 2.4rem; }
  .ts-hero__inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .ts-hero h1 { font-size: clamp(2.4rem, 10vw, 3.9rem); }
  .ts-specimen { display: flex; border-radius: 8px; gap: 1.7rem; padding: .8rem 1.8rem; text-align: left; }
  .ts-specimen__glyph { font-size: 5.2rem; line-height: 1.1; }
  .ts-specimen figcaption { align-self: center; }
  .ts-specimen figcaption small { display: none; }
  .ts-keyboard { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ts-key { min-height: 71px; }
  .ts-key__glyph { font-size: 1.45rem; }
  .ts-notebook, .ts-challenge { padding: 1.2rem; }
  .ts-practice-layout { grid-template-columns: 1fr; }
  .ts-practice-copy > p:not(.section__kicker) { max-width: none; }
  .ts-context-grid { grid-template-columns: 1fr; gap: 1rem; }
  .ts-context-number { margin-bottom: .5rem; }
  .ts-further { display: grid; }
  .ts-workspace, .ts-context { padding-block: 2.5rem; }
  .ts-practice-section { padding: 2.8rem 0; }
}
@media (max-width: 360px) {
  .ts-keyboard { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ts-options { grid-template-columns: repeat(2, 1fr); }
  .ts-specimen { gap: 1rem; padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .ts * { scroll-behavior: auto; transition: none; } }