/* the workspace: the product shell (product.css) in silver-violet, the words of its pages, and its editor */
:root { --mark: #b9a7ee; --hi: #e6defc; --soft: rgba(185, 167, 238, .13); --glow: rgba(185, 167, 238, .4); --glow-faint: rgba(185, 167, 238, .2); --glow-strong: rgba(185, 167, 238, .45); --name-end: #c9b8ff; --amber: #e0a050; --red: #f07a8a; }
:root { color-scheme: dark; }
::selection { background: var(--soft); color: var(--bright); }
* { scrollbar-width: thin; scrollbar-color: var(--thumb) transparent; }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-thumb { background: var(--thumb); border-radius: 3px; }
main { padding-bottom: 120px; }
a.tab { text-decoration: none; }
.tab.add { color: var(--dim); }
.tab.add:hover { color: var(--bright); }
.line span { white-space: nowrap; }
.line a, .line button.quiet { color: var(--dim); }
.line a:hover, .line button.quiet:hover { color: var(--bright); }
button.quiet { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }

/* home */
.hero .art { justify-self: center; width: min(256px, 70vw); height: auto; filter: drop-shadow(0 0 40px rgba(185, 167, 238, .12)); animation: rise .9s ease-out both; }
.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 26px 0 30px; }
a.project { display: block; color: var(--text); transition: border-color .15s ease; }
a.project:hover { border-color: var(--mark); }
a.project:hover h2 { color: var(--hi); }
a.project p { margin: 0 0 4px; }
.footnote { margin: 30px 0 0; color: var(--dim); font-size: 12.5px; max-width: 640px; }

/* the words of a page */
.md { max-width: 780px; }
.md > :first-child { margin-top: 0; }
.md p { margin: 0 0 12px; }
.md h3 { margin: 28px 0 8px; color: var(--bright); font-weight: 500; font-size: 16px; }
.md h4, .md h5, .md h6 { margin: 20px 0 6px; color: var(--hi); font-weight: 500; font-size: 14px; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 20px; }
.md li > ul, .md li > ol { margin: 2px 0; }
.md li.check { list-style: none; margin-left: -18px; }
.md li.check::before { content: "\25cb  "; color: var(--dim); }
.md li.check.done::before { content: "\25cf  "; color: var(--mark); }
.md a { color: var(--bright); border-bottom: 1px solid var(--line); transition: border-color .15s ease, color .15s ease; }
.md a:hover { color: var(--hi); border-color: var(--mark); }
.md img { display: block; max-width: 100%; height: auto; margin: 6px 0 12px; border: 1px solid var(--line); border-radius: var(--shot-radius); }
.md pre { margin: 0 0 14px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.md pre code { color: var(--text); white-space: pre; }
.md blockquote { margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 2px solid var(--line); color: var(--dim); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.md .table-wrap { margin: 0 0 14px; overflow-x: auto; }
.md table { border-collapse: collapse; min-width: 50%; font-size: 13.5px; }
.md th { color: var(--bright); font-weight: 500; text-align: left; }
.md th, .md td { padding: 6px 18px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.md [data-align="center"] { text-align: center; }
.md [data-align="right"] { text-align: right; }
.callout { margin: 0 0 14px; padding: 9px 14px; border-left: 2px solid var(--mark); background: var(--soft); border-radius: 0 var(--radius) var(--radius) 0; }
.callout > b { display: block; margin: 0 0 2px; color: var(--mark); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; }
.callout p:last-child { margin: 0; }
.callout[data-kind="tip"] { border-color: var(--green); background: rgba(122, 214, 154, .08); }
.callout[data-kind="tip"] > b { color: var(--green); }
.callout[data-kind="warning"], .callout[data-kind="caution"] { border-color: var(--amber); background: rgba(224, 160, 80, .08); }
.callout[data-kind="warning"] > b, .callout[data-kind="caution"] > b { color: var(--amber); }
.callout[data-kind="important"] { border-color: var(--red); background: rgba(240, 122, 138, .08); }
.callout[data-kind="important"] > b { color: var(--red); }

/* a project: its pages down the side */
.book { margin-top: 26px; }
.chapters a, .chapters > button { position: relative; display: block; width: 100%; padding: 6px 10px; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.chapters a:hover, .chapters > button:hover { color: var(--bright); }
.chapters a.on, .chapters > button.on { color: var(--bright); }
.chapters a::before, .chapters > button::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 0; background: var(--mark); transform: translateY(-50%); transition: height .15s ease; }
.chapters a.on::before, .chapters > button.on::before { height: 60%; }
.chapters .add { color: var(--dim); }

/* releases */
.kinds a { position: relative; padding: 4px 0; color: var(--dim); }
.kinds a:hover, .kinds a.on { color: var(--bright); }
.kinds a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--mark); transform: scaleX(0); transition: transform .15s ease; }
.kinds a.on::after { transform: none; }
.card.launcher { border-color: var(--glow-faint); }
.card.launcher .act { margin-top: 8px; }
.release { scroll-margin-top: 20px; }
.release h2 .new { color: var(--green); }
.release h2 .pre { color: var(--amber); }
.release .md { margin: 8px 0 4px; }
.files { margin: 6px 0 0; }
.file { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.file a { color: var(--bright); border-bottom: 1px solid var(--mark); overflow-wrap: anywhere; }
.file a:hover { color: var(--hi); text-shadow: 0 0 14px var(--glow-strong); }
.file span { color: var(--dim); }
.file .note { color: var(--hi); }
.release .steam { margin: 8px 0 0; color: var(--dim); font-size: 12.5px; }

/* editing: fields are a line to write on, every control plain words that light up */
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 22px; align-items: start; margin: 0 0 12px; }
.form.row3 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 170px; }
.form.row4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) 170px; }
.form .moves { align-self: end; }
.form.row3 .moves, .form.row4 .moves { justify-content: flex-end; }
.form .field.tick { align-self: end; padding-bottom: 8px; }
.field { display: grid; gap: 2px; min-width: 0; }
.field > span { color: var(--dim); font-size: 11.5px; }
.field small { color: var(--faint); font-size: 11px; overflow-wrap: anywhere; }
.field input:not([type=checkbox]), .field select, .field textarea, .made input, .bar input { width: 100%; min-width: 0; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--bright); font: inherit; font-size: 14px; outline: none; transition: border-color .15s ease; }
.field input:focus, .field select:focus, .field textarea:focus, .bar input:focus { border-color: var(--mark); }
.field textarea { resize: vertical; line-height: 1.5; }
.field select { cursor: pointer; }
.field select option, .file select option { background: var(--panel); color: var(--text); }
.field.tick { grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px; }
.field.tick small { grid-column: 2; }
.field input[type=checkbox] { accent-color: var(--mark); margin: 0; }
.field.picture { grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 14px; }
.field.picture > span { grid-column: 1 / -1; }
.field.picture img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius); }
.field.picture button, .field.picture .up { justify-self: start; }
main button:not(.tab):not(.chapters > button), .bar button, .up { padding: 2px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
main button:not(.tab):not(.chapters > button):hover, .bar button:hover, .up:hover { color: var(--bright); border-color: var(--dim); }
main button.lit, .bar button.lit { color: var(--bright); border-color: var(--mark); }
main button.lit:hover, .bar button.lit:hover { color: var(--hi); text-shadow: 0 0 14px var(--glow-strong); }
main button.drop:hover, main button[data-armed] { color: var(--red); border-color: var(--red); }
main button:disabled, .bar button:disabled { color: var(--faint); border-color: transparent; cursor: default; text-shadow: none; }
main button.add, .up.add { color: var(--dim); margin: 0 18px 14px 0; }
.up { position: relative; display: inline-block; }
.up input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.up:focus-within { color: var(--bright); border-color: var(--mark); }
.moves { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding-bottom: 6px; }
h1 .moves { margin-left: auto; font-size: 13px; padding: 0; }
.gone { margin: 34px 0 0; }
.release.editing .form { margin-top: 10px; }
.file select { max-width: 340px; padding: 2px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 12.5px; outline: none; cursor: pointer; }
.mdedit { margin: 4px 0 18px; }
.mdedit .tools { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; margin: 0 0 6px; }
.mdedit textarea { display: block; width: 100%; min-height: 160px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--bright); font: 13.5px/1.6 var(--mono); resize: vertical; outline: none; transition: border-color .15s ease; tab-size: 2; }
.mdedit textarea:focus { border-color: var(--mark); }
.mdedit .preview { min-height: 160px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: var(--radius); }
.cheat { margin: 6px 0 0; font-size: 12.5px; }
.cheat summary { color: var(--dim); cursor: pointer; list-style: none; }
.cheat summary::-webkit-details-marker { display: none; }
.cheat summary:hover { color: var(--bright); }
.cheat .md { margin: 8px 0 0; }
.made { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; margin: 6px 0 16px; max-width: 640px; }
.made small { grid-column: 1 / -1; color: var(--dim); font-size: 12px; }
.made input { color: var(--hi); }
.row span button { margin-left: 12px; }
/* a field iris refused, red until it is written in again */
.field.wrong > span { color: var(--red); }
.field.wrong input, .field.wrong textarea, .field.wrong select, .file.wrong select { border-color: var(--red) !important; }
.mdedit.wrong textarea, .sheet .code.wrong { border-color: var(--red); }
.brand small:empty { display: none; }

/* the stylesheet: numbered lines, and iris's word on it underneath */
.sheet { margin: 18px 0 0; max-width: 980px; }
.sheet .tools { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; margin: 0 0 8px; }
.sheet .code { display: grid; grid-template-columns: auto minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; transition: border-color .15s ease; }
.sheet .code:focus-within { border-color: var(--mark); }
.sheet .gutter, .sheet textarea { margin: 0; padding: 12px 0; font: 13px/1.6 var(--mono); }
.sheet .gutter { min-width: 3.2em; padding-right: 12px; padding-left: 10px; overflow: hidden; color: var(--faint); text-align: right; user-select: none; border-right: 1px solid var(--line); }
.sheet .gutter .bad { color: var(--red); }
.sheet textarea { position: relative; display: block; width: 100%; min-height: 420px; padding-left: 14px; padding-right: 14px; border: 0; background: transparent; color: transparent; -webkit-text-fill-color: transparent; caret-color: var(--bright); resize: vertical; outline: none; white-space: pre; overflow: auto; tab-size: 2; }
.sheet textarea::placeholder { color: var(--faint); -webkit-text-fill-color: var(--faint); }
.sheet textarea::selection { background: rgba(185, 167, 238, .26); }
/* the words drawn in moxia's colors under a textarea whose own are clear, scrolled with it */
.sheet .ink { position: relative; min-width: 0; }
.sheet .paint { position: absolute; inset: 0; margin: 0; padding: 12px 14px; overflow: hidden; pointer-events: none; white-space: pre; font: 13px/1.6 var(--mono); color: #c1b9c9; tab-size: 2; }
.sheet .ink:has(textarea[readonly]) .paint { opacity: .75; }
.x-comment { color: #6c6c78; font-style: italic; }
.x-at { color: #8fb8f0; }
.x-tag { color: #f08bb8; }
.x-sel { color: #f6f0fa; }
.x-pseudo { color: #c79bf2; }
.x-attr { color: #9ce0c4; }
.x-prop { color: #c9a6ff; }
.x-own, .x-var { color: #f0a67a; font-style: italic; }
.x-bad { color: #e0566c; text-decoration: underline wavy #e0566c; text-underline-offset: 3px; }
.x-num { color: #f0a67a; }
.x-color, .x-str { color: #e8c48b; }
.x-fn { color: #7fd7d2; }
.x-imp { color: #e0566c; }
.x-punct { color: #7c7287; }
.x-word { color: #c1b9c9; }
/* moxisense: what fits at the caret, each with moxia's mark, and a word's meaning under the pointer */
.sense, .sense-tip { position: absolute; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(18, 17, 22, .97); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); font: 12.5px/1.5 var(--mono); }
.sense { z-index: 5; width: 360px; max-width: calc(100% - 8px); overflow: hidden; }
.sense-list { max-height: 218px; overflow-y: auto; padding: 4px 0; }
.sense-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 2px 10px; color: var(--text); cursor: pointer; }
.sense-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sense-item i { color: var(--faint); font-size: 11px; font-style: normal; }
.sense-item b { font-weight: 400; text-align: center; }
.sense-item.on { background: rgba(185, 167, 238, .14); color: var(--bright); }
.sense-item:hover:not(.on) { background: rgba(255, 255, 255, .03); }
.k-func { color: #7fd7d2; }
.k-key, .k-group { color: #f6f0fa; }
.k-let { color: #f0a67a; }
.k-value { color: #e8c48b; }
.k-tag { color: #f08bb8; }
.sense-about { margin: 0; padding: 6px 10px 7px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; }
.sense-tip { z-index: 6; max-width: 380px; padding: 6px 10px; color: var(--text); font-size: 12px; pointer-events: none; }
.sense-tip b { margin-right: 6px; color: var(--bright); font-weight: 400; }
.sense-probe { position: absolute; visibility: hidden; white-space: pre; font: 13px/1.6 var(--mono); }
.sheet .cheat kbd { font: inherit; color: var(--bright); }
.verdict { min-height: 1.6em; margin: 8px 0 0; font-size: 13px; color: var(--dim); }
.verdict.good { color: var(--green); }
.verdict.bad { color: var(--red); }
.sheet .cheat .md p { margin: 10px 0 0; color: var(--dim); }

/* the bar along the bottom while editing or looking back */
.bar { position: fixed; left: 250px; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding: 12px clamp(16px, 4vw, 56px) max(12px, env(safe-area-inset-bottom)); background: var(--bar); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); font-size: 13.5px; }
.bar > span:first-child { color: var(--hi); }
.bar input { flex: 1 1 220px; max-width: 380px; font-size: 13px; }
.bar .said { flex-basis: 100%; color: var(--dim); font-size: 12.5px; }
.bar .said:empty { display: none; }
.bar .said.bad { color: var(--red); font-size: 13.5px; }
.bar .said.good { color: var(--green); font-size: 13.5px; }
.bar .said button { margin-left: 10px; }
.bar > span.hold { color: var(--amber); }
.bar > .said:only-child { flex-basis: auto; }

/* history: a console's lines, a save each, its changes under the arrow */
.log { margin: 18px 0 0; max-width: 1100px; font: 12.5px/1.6 var(--mono); }
.turn { display: grid; grid-template-columns: 16px auto auto auto minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; padding: 3px 4px; border-bottom: 1px solid rgba(255, 255, 255, .03); }
.turn:hover, .turn.open { background: rgba(255, 255, 255, .015); }
.log button.t-fold { padding: 0; border: 0; color: var(--dim); font: inherit; }
.log button.t-fold:hover, .turn.open button.t-fold { color: var(--bright); }
.log .t-end button { padding: 0; font: inherit; font-size: 12px; color: var(--dim); }
.t-time { color: #6c6c78; white-space: nowrap; }
.t-ver { color: #f0a67a; }
.t-who { color: #8fb8f0; }
.who-1 { color: #f08bb8; }
.who-2 { color: #7fd7d2; }
.who-3 { color: #e8c48b; }
.who-4 { color: #c9a6ff; }
.who-5 { color: #9ce0c4; }
.t-did { color: var(--text); overflow-wrap: anywhere; }
.t-part { color: #f6f0fa; }
.t-note { color: #e8c48b; }
.t-detail, .t-dim { color: var(--dim); }
.t-dim { margin: 0; }
.t-end { justify-self: end; }
.t-now { color: var(--green); font-style: normal; }
.v-added, .v-removed, .v-changed, .v-moved, .v-restored { font-weight: 400; }
.v-added { color: #7ad69a; }
.v-removed { color: #e0566c; }
.v-changed { color: #c9a6ff; }
.v-moved { color: #8fb8f0; }
.v-restored { color: #e8c48b; }
.t-more { grid-column: 2 / -1; padding: 6px 0 10px; }
.t-change { padding: 1px 0; overflow-wrap: anywhere; }
/* a change of words: its own arrow, its diff shut until asked for */
details.t-change > summary { list-style: none; cursor: pointer; }
details.t-change > summary::-webkit-details-marker { display: none; }
details.t-change > summary::before { content: "▸"; display: inline-block; width: 14px; color: var(--dim); }
details.t-change[open] > summary::before { content: "▾"; color: var(--bright); }
details.t-change > summary:hover::before { color: var(--bright); }
div.t-change { padding-left: 14px; }
.d-came { color: #7ad69a; }
.d-went { color: #e0566c; }
.diff { margin: 4px 0 8px; padding: 8px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; font: 12px/1.55 var(--mono); }
.diff span { display: block; padding: 0 12px; white-space: pre; }
.d-add { color: #7ad69a; background: rgba(122, 214, 154, .07); }
.d-del { color: #e0566c; background: rgba(224, 86, 108, .07); }
.d-same { color: var(--dim); }
.d-fold { color: var(--faint); }

@media (max-width: 1100px) and (min-width: 721px) {
  .bar { left: 190px; }
}
@media (max-width: 720px) {
  .bar { left: 0; }
  /* an editor keeps the switch to edit on a phone, where the rest of that line is hidden */
  nav .line:has(button) { display: block; margin: 2px 2px 4px; text-align: left; font-size: 11.5px; }
  .chapters a, .chapters > button { width: auto; white-space: nowrap; padding: 6px 9px; }
  .chapters a::before, .chapters > button::before { left: 50%; top: auto; bottom: 0; width: 0; height: 2px; transform: translateX(-50%); transition: width .15s ease; }
  .chapters a.on::before, .chapters > button.on::before { width: 60%; height: 2px; }
  .form.row3, .form.row4 { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .md table { min-width: 100%; }
  h1 .moves { margin-left: 0; }
  .turn { grid-template-columns: 16px auto auto minmax(0, 1fr) auto; }
  .t-did { grid-column: 2 / -1; grid-row: 2; }
  .sense { width: calc(100% - 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .art { animation: none; }
  .kinds a::after, .chapters a::before, a.project, .md a { transition: none; }
}