:root {
  --ink: #1b1b1b;
  --paper: #fbfaf7;
  --line: #d9d5cc;
  --soft: #f1efe9;
  --accent: #1d5fa8;
  --note: #b8860b;
  --error: #b03030;
  --mark: #fff3b0;
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--paper); }
body { display: flex; flex-direction: column; }
header {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--soft);
}
.brand { font-weight: 700; letter-spacing: 0.04em; }
.reference { font-size: 12px; color: #666; text-decoration: none; border-bottom: 1px dotted #aaa; white-space: nowrap; }
.reference:hover { color: var(--accent); border-bottom-color: var(--accent); }
.file-name { font-family: Menlo, Consolas, monospace; color: #555; }
.grow { flex: 1; }
.status { color: #555; font-size: 13px; min-width: 200px; text-align: right; }
/* who is signed in, or the way to: a name and a picture, or a link to Google */
.account { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #555; }
.account:empty { display: none; }
.account img { width: 22px; height: 22px; border-radius: 50%; }
.account .signin { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; padding: 4px 12px; border: 1px solid var(--line); border-radius: 4px; background: white; white-space: nowrap; }
.account .signin svg { flex: none; }
.account .signin:hover { border-color: var(--accent); }
.account button { font-size: 12px; padding: 2px 8px; }
.account button.plan { color: var(--accent); border-color: var(--accent); }
#btn-share.on { color: #2a7a3b; border-color: #cfe3d3; background: #f1f8f2; }
.account button.plan.paid { color: #2a7a3b; border-color: #cfe3d3; background: #f1f8f2; }
button {
  font: inherit; padding: 4px 12px; border: 1px solid var(--line); border-radius: 4px;
  background: white; cursor: pointer;
}
button:hover { border-color: var(--accent); color: var(--accent); }
main { flex: 1; display: flex; min-height: 0; position: relative; }
/* an ear on the edge, upright, that brings a shut pane back */
.ear { position: absolute; top: 50%; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 8px 3px; font-size: 12px; letter-spacing: 0.04em; color: #555; background: var(--soft); border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,0.12); writing-mode: vertical-rl; }
.ear.left { left: 7px; transform: translateY(-50%) rotate(180deg); border-radius: 6px 0 0 6px; border-right: 0; }
.ear.right { right: 7px; transform: translateY(-50%); border-radius: 6px 0 0 6px; border-right: 0; }
.ear.left svg { transform: rotate(180deg); }
.ear[hidden], .editbar[hidden], button[hidden] { display: none !important; }
.ear:hover { color: var(--accent); border-color: var(--accent); }
.ear svg { color: var(--accent); }
.side { width: 240px; flex: none; display: flex; flex-direction: column; overflow: hidden; transition: width 0.2s ease; }
.side > * { min-width: 240px; }
.side-foot { padding: 8px 12px 10px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.45; color: #888; }
.side-foot a { color: #666; }
.side.closed { width: 0 !important; }
button.panel { padding: 1px 4px; margin-left: 8px; color: #999; border-color: transparent; background: transparent; line-height: 0; }
button.panel:hover { color: var(--accent); }
.side-head button.panel, .code-head button.panel { align-self: center; }
.vhandle.shut { background: #e3ecf7; position: relative; }
.vhandle.shut::after { content: "›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 13px; color: var(--accent); pointer-events: none; }
#code-handle.shut::after { content: "‹"; }
.side-head { display: flex; align-items: center; padding: 4px 12px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 12px; color: #777; }
.side-head button { font-size: 12px; padding: 1px 8px; }
.side-head .all { margin-left: 10px; display: flex; align-items: center; gap: 3px; cursor: pointer; }
.files { flex: 1; overflow: auto; padding: 8px 0; font-family: Menlo, Consolas, monospace; font-size: 12px; }
.editbar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; margin: -8px -8px 12px; border-bottom: 1px solid var(--line); background: var(--soft); font-size: 12px; color: #666; }
.editbar .hint code { font-family: Menlo, Consolas, monospace; }
.editbar button { font-size: 12px; padding: 1px 8px; }
#drawn > * { flex: none; }
.files .dir { padding: 6px 12px 2px; color: #777; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.files .file { padding: 3px 12px 3px 20px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.files .file:hover { background: var(--soft); }
.files .file.current { background: #e3ecf7; color: var(--accent); }
.files .file.example::after { content: "example"; float: right; font-size: 10px; color: #999; letter-spacing: 0.04em; }
/* one's own file: a cross on the right deletes it, shown when the pointer is there */
.files .file.mine { display: flex; align-items: center; gap: 6px; }
.files .file.mine .name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.files .file.mine .del { flex: none; visibility: hidden; padding: 0 5px; font-size: 12px; line-height: 1.2; color: #999; border-color: transparent; background: transparent; }
.files .file.mine:hover .del { visibility: visible; }
.files .file.mine .del:hover { color: var(--error); border-color: var(--error); }
.middle { flex: 3; display: flex; flex-direction: column; min-width: 0; }
.tabs { display: flex; gap: 2px; padding: 6px 12px 0; border-bottom: 1px solid var(--line); background: var(--soft); }
.tab { border: 1px solid transparent; border-bottom: 0; background: transparent; border-radius: 4px 4px 0 0; color: #666; }
.tab.current { background: var(--paper); border-color: var(--line); color: var(--ink); }
.zoom { display: flex; gap: 2px; align-items: center; padding-bottom: 4px; }
.zoom button { padding: 1px 8px; font-size: 12px; min-width: 28px; }
.zoom #tidy { margin-right: 8px; }
.diagrams.panning, .sim-diagrams.panning { cursor: grabbing; user-select: none; }
#btn-undo, #btn-redo { padding: 4px 8px; font-size: 14px; line-height: 1; }
#btn-undo:disabled, #btn-redo:disabled { color: #bbb; border-color: var(--line); cursor: default; }
.diagrams h2 button.export { font-size: 11px; padding: 1px 7px; margin-left: 6px; color: #777; font-weight: 400; }
.diagrams h2 button.export:hover { color: var(--accent); }
.zoom #zoom-reset { min-width: 52px; font-family: Menlo, Consolas, monospace; }
.view { display: none; flex: 1; min-height: 0; }
.view.current { display: flex; flex-direction: column; }
.diagrams { overflow: auto; padding: 16px; }
.simulate { overflow: hidden; }
.sim-controls { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.sim-controls .sep { width: 12px; }
.sim-controls button.live svg { color: #b3541e; }
.sim-controls button.live.on { background: #fdece2; border-color: #b3541e; color: #b3541e; }
.machine-data { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 4px 12px; font: 12px/1.6 Menlo, Consolas, monospace; color: #444; background: #fffbe6; border-bottom: 1px solid var(--line); }
.machine-data .who { color: #888; }
.sim-diagrams .sym.break .shape { stroke: #c62828; stroke-width: 2.4; stroke-dasharray: 5,3; }
.sim-diagrams.live .sym[data-state] { cursor: crosshair; }
.sim-controls input[type=range] { width: 160px; }
.counter { font-family: Menlo, Consolas, monospace; color: #555; min-width: 70px; }
.allowance { font-size: 12px; color: #777; white-space: nowrap; }
.allowance:empty { display: none; }
.allowance.spent { color: var(--error); }
.event { padding: 4px 12px; font-family: Menlo, Consolas, monospace; font-size: 12px; color: #444; background: var(--mark); min-height: 22px; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.sim-body { flex: 1; display: flex; min-height: 0; }
.vhandle { flex: none; width: 7px; cursor: col-resize; background: var(--soft); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.vhandle:hover { background: #e3ecf7; }
.chart-pane { flex: 1; overflow: auto; padding: 12px; }
.chart-pane .empty { color: #777; max-width: 36em; padding: 8px; }
.chart-pane text { font-family: Menlo, Consolas, monospace; font-size: 12px; }
.chart-pane .row.future { opacity: 0.12; }
.sim-diagrams { flex: 1; overflow: auto; padding: 12px; }
.sim-diagrams h2 { font-size: 13px; font-weight: 600; margin: 8px 0; color: #444; }
.sim-diagrams h2 .kind { color: #999; font-weight: 400; margin-right: 6px; }
.sim-diagrams svg { display: block; }
.sim-diagrams { padding: 0; }
.sim-diagrams .machine-tabs { position: sticky; top: 0; left: 0; z-index: 1; align-items: center; }
.sim-diagrams .machine-tabs .tab { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; }
.sim-diagrams .machine-tabs .tab .kind { font-size: 11px; color: #999; }
.sim-diagrams .machine-tabs .tab .state { font: 11px Menlo, Consolas, monospace; color: var(--accent); }
.sim-diagrams .machine-tabs .tab .timers { font: 11px Menlo, Consolas, monospace; color: var(--note); }
.sim-diagrams .sym.armed .shape { stroke: var(--note); stroke-width: 2; }
.diagrams .comment-text, .sim-diagrams .comment-text { font-size: 11px; fill: #666; }
.diagrams .comment-mark, .sim-diagrams .comment-mark { font-size: 11px; fill: #999; pointer-events: all; cursor: help; }
.diagrams .comment { pointer-events: all; }
.diagrams .type-name { font-weight: 600; }
.diagrams .ctor { cursor: pointer; pointer-events: all; }
.diagrams .ctor:hover { fill: var(--accent); }
.sim-diagrams .machine-tabs .tab.moved .name { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.sim-diagrams .machine-tabs .follow { font-size: 12px; color: #666; padding: 0 12px 4px 0; white-space: nowrap; }
.sim-diagrams .machine-pane { padding: 12px; }
.sim-diagrams text { font-family: Menlo, Consolas, monospace; font-size: 12px; pointer-events: none; }
.sim-diagrams .sym.lit .shape { fill: var(--mark); stroke: var(--accent); stroke-width: 2; }
.sim-diagrams .transition.active .shape { fill: #e3ecf7; }
.sim-output { margin: 0; padding: 8px 12px; flex: none; height: 110px; overflow: auto; background: var(--soft); font: 12px/1.5 Menlo, Consolas, monospace; white-space: pre-wrap; }
.diagrams .empty { color: #777; max-width: 40em; }
.diagrams h2 { font-size: 14px; font-weight: 600; margin: 24px 0 8px; color: #444; }
.diagrams h2:first-child { margin-top: 0; }
.diagrams h2 .kind { color: #999; font-weight: 400; margin-right: 6px; }
/* the pane is a flex column: nothing in it may be squeezed to fit */
.diagrams > * { flex: none; }
.diagrams svg { display: block; overflow: visible; user-select: none; -webkit-user-select: none; }
.diagrams .sym { cursor: pointer; }
/* a symbol can be taken and moved; its lines follow */
.diagrams .sym[data-node], .sim-diagrams .sym[data-node] { cursor: grab; }
.diagrams .sym.dragging, .sim-diagrams .sym.dragging { cursor: grabbing; }
.diagrams .sym.dragging .shape, .sim-diagrams .sym.dragging .shape { stroke: var(--accent); stroke-width: 2; }
/* a state a dragged next state would be dropped on */
.diagrams .sym.target .shape { fill: #e3ecf7; stroke: var(--accent); stroke-width: 2; }
.diagrams .sym.erred .shape { stroke: var(--error); }
.diagrams .sym.uses .shape { fill: #e8f1fb; stroke: var(--accent); stroke-width: 2; }
.diagrams .sym.selected .shape, .sim-diagrams .sym.selected .shape { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4,2; }
.diagrams .sym:focus, .sim-diagrams .sym:focus { outline: none; }
.diagrams .sym:focus-visible .shape, .sim-diagrams .sym:focus-visible .shape { stroke: var(--accent); stroke-width: 2.4; }
.diagrams .band { fill: rgba(29, 95, 168, 0.08); stroke: var(--accent); stroke-dasharray: 4,2; }
.diagrams .sym.route.uses .shape { fill: none; }
.sim-diagrams svg { overflow: visible; }
.diagrams .sym:hover .shape { stroke: var(--accent); stroke-width: 2; }
.diagrams .sym.lit .shape { fill: var(--mark); }
.diagrams .noted .shape { stroke: var(--note); }
.diagrams text { font-family: Menlo, Consolas, monospace; font-size: 12px; fill: var(--ink); pointer-events: none; }
.diagrams .badge { fill: var(--note); }
.diagrams .hint, .sim-diagrams .hint { font-size: 10px; fill: #999; letter-spacing: 0.04em; }
.diagrams .sym.block { cursor: pointer; }
.diagrams .sym.block:hover .shape { stroke: var(--accent); }
.imported { margin-top: 32px; padding-top: 8px; border-top: 1px dashed var(--line); }
.imported:empty { display: none; }
.imported h2 { margin-top: 12px; }
.imported h3 { font-size: 13px; font-weight: 600; margin: 16px 0 6px; color: #666; }
.imported h3 .kind { color: #999; font-weight: 400; margin-right: 6px; }
.imported svg .sym { cursor: pointer; }
.diagrams h2 a.crumb { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.diagrams .frame { pointer-events: none; }
.diagrams .returns, .sim-diagrams .returns { fill: #444; }
.diagrams .badge-text { fill: white; font-size: 10px; font-weight: 700; }
.code { flex: 2; min-width: 240px; display: flex; flex-direction: column; background: white; overflow: hidden; transition: width 0.2s ease, min-width 0.2s ease; }
.code.closed { width: 0 !important; min-width: 0 !important; flex: none !important; }
.code > * { min-width: 240px; }
.code-head { display: flex; align-items: center; padding: 4px 12px; border-bottom: 1px solid var(--line); color: #777; font-size: 12px; background: var(--soft); }
.dirty { color: var(--error); margin-right: 8px; }
.code-body { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.gutter {
  margin: 0; padding: 8px 6px 8px 10px; text-align: right; color: #aaa; background: var(--soft);
  font: 12px/1.5 Menlo, Consolas, monospace; user-select: none; overflow: hidden; white-space: pre;
}
.gutter .lit { background: var(--mark); color: var(--ink); }
.gutter .err { color: var(--error); font-weight: 700; }
.gutter .note { color: var(--note); }
.code-stack { flex: 1; position: relative; min-width: 0; overflow: hidden; }
.colors, textarea#editor {
  margin: 0; padding: 8px 10px; border: 0; font: 12px/1.5 Menlo, Consolas, monospace;
  white-space: pre; tab-size: 2; letter-spacing: 0;
}
.colors {
  position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; pointer-events: none;
  color: var(--ink); overflow: visible; will-change: transform;
}
textarea#editor {
  position: absolute; inset: 0; width: 100%; height: 100%; outline: none; resize: none;
  background: transparent; color: transparent; caret-color: var(--ink); overflow: auto;
}
/* the colours are behind the textarea, so a selection must let them through */
textarea#editor::selection { background: rgba(29, 95, 168, 0.22); }
.tk-comment { color: #8a8378; font-style: italic; }
.tk-string { color: #2a7a3b; }
.tk-escape { color: #1f6f2f; font-weight: 600; }
.tk-number { color: #9a4a00; }
.tk-keyword { color: #7a1f8f; font-weight: 600; }
.tk-constant { color: #9a4a00; }
.tk-type { color: #1d5fa8; }
.tk-ctor { color: #1d5fa8; }
.tk-machine { color: #a0341f; }
.tk-call { color: #2d4f7f; }
.tk-wild { color: #999; }
.tk-arrow, .tk-op, .tk-lambda { color: #6b6b6b; }
.diagrams .adder { cursor: pointer; }
.diagrams .adder text { fill: #888; }
.diagrams .adder:hover .shape { stroke: var(--accent); }
.adder-button { margin-left: 12px; font-size: 12px; padding: 1px 8px; }
button.iconic { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
button.iconic svg { flex: none; }
button.iconic.plus svg { color: #2a7a3b; }
button.iconic.run svg { color: #2a7a3b; }
button.iconic.run:hover svg { color: #1f6b30; }
.editbar button.iconic svg, .side-head button.iconic svg { color: var(--accent); }
.editbox {
  position: fixed; z-index: 10; width: 440px; background: white; border: 1px solid var(--line);
  border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,0.15); padding: 10px;
  max-height: calc(100vh - 16px); overflow: auto;
}
.editbox-title { font-size: 12px; color: #666; margin-bottom: 6px; }
/* a line edited in place, on its symbol */
.inplace { position: fixed; z-index: 11; background: white; border: 1px solid var(--accent); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.inplace input { width: 100%; font: 12px/1.5 Menlo, Consolas, monospace; padding: 4px 6px; border: 0; outline: none; }
.inplace-hint { font-size: 10px; color: #888; padding: 0 6px; }
.inplace.uses { min-width: 320px; max-width: 520px; }
.inplace.uses ul { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; font: 12px/1.5 Menlo, Consolas, monospace; }
.inplace.uses li { padding: 2px 6px; cursor: pointer; white-space: pre; overflow: hidden; text-overflow: ellipsis; border-radius: 3px; }
.inplace.uses li:hover, .inplace.uses li:focus { background: var(--mark); outline: none; }
.inplace.uses li .line { display: inline-block; min-width: 3ch; margin-right: 8px; color: #999; text-align: right; }
.editbox input, .editbox textarea {
  width: 100%; font: 12px/1.5 Menlo, Consolas, monospace; padding: 6px; border: 1px solid var(--line); border-radius: 4px; white-space: pre; resize: vertical;
}
.editbox-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.editbox button.primary { background: var(--accent); color: white; border-color: var(--accent); }
.editbox button.danger { color: var(--error); }
.editbox-status { font-size: 12px; color: var(--error); margin-left: 6px; }
.editbox.form { width: 540px; }
.form-body { display: flex; flex-direction: column; gap: 6px; }
.form-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.form-row > label { flex: none; width: 84px; padding-top: 4px; color: #666; text-align: right; }
.form-row select, .form-row input { font: 12px/1.4 Menlo, Consolas, monospace; padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; }
.form-row input { flex: 1; }
.choice { display: inline-flex; gap: 4px; align-items: center; flex: 1; }
.choice input { flex: 1; min-width: 90px; }
.choice input.args { flex: 2; }
.form-actions { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.form-action { display: flex; gap: 4px; align-items: center; }
/* a decision's branch: its own actions and end, a step in */
.form-branch { margin-left: 92px; padding: 6px 8px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.form-branch .form-row > label { width: 60px; }
.form-branch-head { display: flex; gap: 6px; align-items: center; font-size: 12px; color: #666; }
.form-branch-label { font-family: Menlo, Consolas, monospace; color: var(--accent); }
.form-branch-head input { font: 12px/1.4 Menlo, Consolas, monospace; padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; flex: 1; }
.form-action .choice { flex: 1; }
.form-action input.ms { width: 70px; flex: none; }
.form-action input.wide { flex: 1; }
button.tiny { font-size: 11px; padding: 1px 6px; }
.form-ticks { display: flex; flex-wrap: wrap; gap: 4px 12px; flex: 1; align-items: center; }
.form-ticks .tick { display: inline-flex; align-items: center; gap: 4px; font: 12px Menlo, Consolas, monospace; }
.form-ticks input.wide { flex-basis: 100%; }
.editbox.form.scenario { width: 720px; }
.form-word { font: 12px Menlo, Consolas, monospace; color: #666; flex: none; }
.form-action { flex-wrap: wrap; }
.form-preview-title { font-size: 11px; color: #888; margin-top: 8px; }
.form-preview { margin: 4px 0 0; padding: 6px 8px; background: var(--soft); border: 1px solid var(--line); border-radius: 4px; font: 12px/1.5 Menlo, Consolas, monospace; white-space: pre; overflow: auto; max-height: 160px; }
.complete {
  position: fixed; z-index: 21; margin: 0; padding: 2px 0; list-style: none; min-width: 120px; max-width: 320px; background: white;
  border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); font: 12px/1.6 Menlo, Consolas, monospace;
}
.complete li { padding: 1px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.complete li.chosen, .complete li:hover { background: var(--mark); }
.form-ticks .tick.list { font-style: italic; }
.lang { font-size: 11px; padding: 1px 6px; margin-left: 8px; color: #777; }
.plan-hint { font-size: 12px; color: #777; margin: 0 0 8px; }
.chart.plan .band { cursor: crosshair; }
.chart.plan .band:hover { fill: rgba(43, 108, 176, 0.08); }
.chart.plan .step { cursor: pointer; }
.chart.plan .step:hover rect, .chart.plan .step:hover line { stroke: var(--accent); }
.chart.plan .adder { cursor: pointer; }
.chart.plan .adder:hover rect { stroke: var(--accent); }
.msc-box { position: fixed; z-index: 12; }
.msc-box .form-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.hovertip {
  position: fixed; z-index: 20; max-width: 480px; padding: 6px 10px; background: #fffbe6; border: 1px solid var(--line);
  border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); font: 12px/1.5 Menlo, Consolas, monospace; white-space: pre; pointer-events: none;
}
.handle { flex: none; height: 7px; cursor: row-resize; background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.handle:hover { background: #e3ecf7; }
.problems { list-style: none; margin: 0; padding: 0; flex: none; height: 140px; overflow: auto; font-size: 12px; background: white; }
.problems li { padding: 4px 12px; cursor: pointer; border-bottom: 1px solid #f0eee8; }
.problems li:hover { background: var(--soft); }
.problems li { display: flex; align-items: baseline; gap: 8px; }
.problems .icon {
  flex: none; display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center;
  font-size: 10px; font-weight: 700; color: white; border-radius: 50%; position: relative; top: 2px;
}
.problems .icon.error { background: var(--error); }
.problems .icon.note { background: #2f6fbf; font-family: Georgia, serif; font-style: italic; }
.problems .icon.warning { background: var(--note); border-radius: 2px; clip-path: polygon(50% 0, 100% 100%, 0 100%); line-height: 19px; }
.problems .line { flex: none; font-family: Menlo, Consolas, monospace; color: #777; min-width: 56px; }
.problems .error .line { color: var(--error); }
.problems .note .line { color: var(--note); }
.form-about { font-size: 12px; color: #666; }
html[lang="tr"] .files .file.example::after { content: "örnek"; }