Spaces:
Running
Running
| :root { | |
| --paper: #e7e8ea; | |
| --paper-2: #f1f2f4; | |
| --ink: #1d2036; | |
| --blue: #3a4bff; | |
| --pink: #ff5c8f; | |
| --slate: #5d6376; | |
| --rule: #c5c8d1; | |
| --ok: #1f7a55; | |
| --bad: #b3261e; | |
| --ui: "Familjen Grotesk", system-ui, sans-serif; | |
| --doc: "Literata", Georgia, serif; | |
| --r: 3px; | |
| } | |
| * { box-sizing: border-box; } | |
| html { color-scheme: light; } | |
| body { | |
| margin: 0; background: var(--paper); color: var(--ink); | |
| font: 400 16px/1.5 var(--ui); | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 10; } | |
| .skip:focus { left: 8px; top: 8px; } | |
| :focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: var(--r); } | |
| button, input, textarea, select { font: inherit; color: inherit; } | |
| h1, h2, h3, p { margin: 0; } | |
| /* top bar */ | |
| .top { display: flex; align-items: center; gap: 28px; padding: 22px 36px 18px; border-bottom: 1px solid var(--rule); } | |
| .brand { display: flex; align-items: center; gap: 12px; flex: none; } | |
| .mark { position: relative; width: 30px; height: 30px; display: inline-block; } | |
| .mark i { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: multiply; } | |
| .mark i:first-child { background: var(--blue); transform: translate(-3px, -2px); } | |
| .mark i:last-child { background: var(--pink); transform: translate(4px, 3px); } | |
| .name { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; } | |
| .tag { color: var(--slate); max-width: 62ch; font-size: 15px; } | |
| /* layout */ | |
| .shell { display: grid; grid-template-columns: 210px minmax(0, 1fr) 330px; gap: 0; min-height: calc(100vh - 140px); } | |
| .ledger { border-right: 1px solid var(--rule); padding: 26px 0 26px 36px; } | |
| .panel { padding: 30px 44px 60px; min-width: 0; outline: none; } | |
| .sheet { border-left: 1px solid var(--rule); padding: 30px 28px 40px; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto; } | |
| /* ledger */ | |
| #steps { list-style: none; margin: 0; padding: 0; } | |
| #steps li { position: relative; } | |
| #steps button { | |
| display: grid; grid-template-columns: 26px 1fr; align-items: baseline; gap: 6px; width: 100%; | |
| text-align: left; background: none; border: 0; padding: 9px 12px 9px 0; cursor: pointer; color: var(--slate); | |
| } | |
| #steps .n { font-variant-numeric: tabular-nums; font-weight: 600; } | |
| #steps li.done button { color: var(--ink); } | |
| #steps li.done .n { color: var(--blue); } | |
| #steps li.on button { color: var(--ink); font-weight: 600; } | |
| #steps li.on::before { content: ""; position: absolute; left: -36px; top: 8px; bottom: 8px; width: 4px; background: var(--blue); } | |
| #steps button:disabled { cursor: default; opacity: .55; } | |
| /* type */ | |
| .panel h1 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.06; letter-spacing: -0.03em; font-weight: 700; max-width: 18ch; } | |
| .panel h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; max-width: 26ch; } | |
| .lede { color: var(--slate); margin-top: 12px; max-width: 58ch; } | |
| .group { margin-top: 30px; } | |
| .group > h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; } | |
| .hint { color: var(--slate); font-size: 14px; } | |
| /* format specimens */ | |
| .specimens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 30px; } | |
| .spec { | |
| position: relative; text-align: left; background: var(--paper-2); border: 1px solid var(--rule); | |
| border-radius: var(--r); padding: 20px 20px 22px; cursor: pointer; | |
| } | |
| .spec[aria-pressed="true"] { border-color: var(--ink); box-shadow: 5px 5px 0 -1px var(--blue), -3px -3px 0 -1px var(--pink); } | |
| .spec b { display: block; font-size: 18px; margin-bottom: 4px; } | |
| .spec .eg { font-family: var(--doc); font-size: 14.5px; line-height: 1.5; margin-top: 14px; color: #2b2f48; } | |
| .spec .eg u { text-decoration: none; display: block; font-style: italic; color: var(--slate); margin-bottom: 2px; } | |
| .spec .eg p + p { margin-top: 8px; } | |
| /* choice lists */ | |
| .choices { list-style: none; margin: 14px 0 0; padding: 0; columns: 3 190px; column-gap: 28px; } | |
| .choices li { break-inside: avoid; } | |
| .choice { | |
| display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; width: 100%; text-align: left; | |
| background: none; border: 0; padding: 7px 0; cursor: pointer; | |
| } | |
| .box { width: 16px; height: 16px; margin-top: 3px; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--paper-2); display: grid; place-items: center; } | |
| .choice[aria-pressed="true"] .box { background: var(--blue); border-color: var(--blue); } | |
| .choice[aria-pressed="true"] .box::after { content: ""; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); } | |
| .choice[aria-pressed="true"] span:last-child { font-weight: 600; } | |
| .sub-block { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule); } | |
| .sub-block h3 { font-size: 17px; } | |
| /* fields */ | |
| label.f { display: block; margin-top: 22px; } | |
| label.f > span { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; } | |
| .in, textarea.in, select.in { | |
| width: 100%; background: var(--paper-2); border: 1px solid #aeb2bf; border-radius: var(--r); padding: 11px 13px; | |
| } | |
| textarea.in { min-height: 118px; resize: vertical; font-family: var(--doc); font-size: 16.5px; line-height: 1.55; } | |
| .in:hover { border-color: var(--ink); } | |
| .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } | |
| .seg { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } | |
| .seg button { background: var(--paper-2); border: 1px solid #aeb2bf; border-radius: var(--r); padding: 8px 15px; cursor: pointer; font-variant-numeric: tabular-nums; } | |
| .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); } | |
| .check { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; } | |
| .check input { margin-top: 5px; accent-color: var(--blue); width: 16px; height: 16px; } | |
| /* buttons */ | |
| .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; } | |
| .btn { border: 1.5px solid var(--ink); background: var(--paper-2); border-radius: var(--r); padding: 11px 20px; font-weight: 600; cursor: pointer; } | |
| .btn:hover:not(:disabled) { background: #fff; } | |
| .btn.go { background: var(--blue); border-color: var(--blue); color: #fff; } | |
| .btn.go:hover:not(:disabled) { background: #2a39e6; } | |
| .btn:disabled { opacity: .45; cursor: not-allowed; } | |
| .linkish { background: none; border: 0; padding: 0; color: var(--blue); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } | |
| /* blueprint */ | |
| .bp { margin-top: 22px; border-top: 1px solid var(--ink); } | |
| .bp-row { display: grid; grid-template-columns: 150px 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); } | |
| .bp-row > b { font-size: 14px; } | |
| .bp ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; } | |
| .bp li { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; padding: 3px 9px; font-size: 14px; } | |
| .bp .tree { display: grid; gap: 8px; } | |
| .bp .tree div > strong { font-weight: 600; } | |
| .bp .tree small { color: var(--slate); } | |
| .note { margin-top: 14px; padding: 10px 14px; border-left: 4px solid var(--pink); background: var(--paper-2); font-size: 14.5px; } | |
| .note.bad { border-left-color: var(--bad); } | |
| .note.ok { border-left-color: var(--ok); } | |
| /* spec sheet */ | |
| .sheet h2 { font-size: 18px; margin-bottom: 14px; } | |
| .sheet dl { margin: 0; } | |
| .sheet .line { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; } | |
| .sheet dt { color: var(--slate); } | |
| .sheet dd { margin: 0; overflow-wrap: anywhere; } | |
| .sheet .est { margin-top: 18px; font-size: 14.5px; color: var(--slate); } | |
| .sheet .est b { color: var(--ink); } | |
| /* run: the printed deck */ | |
| .count { display: flex; align-items: baseline; gap: 10px; margin-top: 24px; } | |
| .count .big { font-size: clamp(54px, 9vw, 92px); line-height: 1; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } | |
| .count .of { font-size: 22px; color: var(--slate); } | |
| .bar { height: 6px; background: var(--rule); margin-top: 14px; border-radius: 3px; overflow: hidden; } | |
| .bar > i { display: block; height: 100%; width: 0; background: var(--ink); transition: width .5s ease; } | |
| .state { margin-top: 10px; color: var(--slate); } | |
| .press { position: relative; height: 230px; margin: 30px 0 8px; } | |
| .card { | |
| position: absolute; left: 0; top: 0; width: min(100%, 640px); padding: 18px 22px 20px; background: #fbfbfc; border: 1px solid #aeb2bf; border-radius: 2px; | |
| font-family: var(--doc); font-size: 15px; line-height: 1.5; overflow: hidden; height: 190px; | |
| } | |
| .card::before, .card::after { content: ""; position: absolute; inset: -1px; border-radius: 2px; pointer-events: none; mix-blend-mode: multiply; } | |
| .card::before { box-shadow: 4px 3px 0 0 var(--pink); z-index: -1; } | |
| .card::after { box-shadow: -3px -2px 0 0 var(--blue); z-index: -1; } | |
| .card em { display: block; font-style: italic; color: var(--slate); font-size: 13px; margin-bottom: 3px; font-family: var(--ui); } | |
| .card .a { margin-top: 10px; color: #3a3f5a; } | |
| .card .clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } | |
| .card.print { animation: print .45s cubic-bezier(.2,.8,.2,1) both; } | |
| @keyframes print { from { transform: translate(14px, -10px); opacity: 0; } to { opacity: 1; } } | |
| @media (prefers-reduced-motion: reduce) { .card.print { animation: none; } .bar > i { transition: none; } } | |
| .table { margin-top: 28px; border-top: 1px solid var(--ink); } | |
| .trow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); } | |
| .trow .id { color: var(--slate); font-variant-numeric: tabular-nums; } | |
| .trow .p { font-family: var(--doc); } | |
| .trow .meta { color: var(--slate); font-size: 13px; margin-top: 2px; } | |
| .trow details { margin-top: 6px; } | |
| .trow summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: 14px; } | |
| .trow .full { font-family: var(--doc); white-space: pre-wrap; margin-top: 8px; font-size: 15px; line-height: 1.55; } | |
| .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 26px; border-top: 1px solid var(--ink); } | |
| .stats div { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--rule); } | |
| .stats b { display: block; font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } | |
| .stats span { color: var(--slate); font-size: 13.5px; } | |
| .foot { display: flex; justify-content: space-between; gap: 20px; padding: 18px 36px 26px; border-top: 1px solid var(--rule); color: var(--slate); font-size: 13.5px; flex-wrap: wrap; } | |
| @media (max-width: 1100px) { | |
| .shell { grid-template-columns: 1fr; } | |
| .ledger { border: 0; border-bottom: 1px solid var(--rule); padding: 10px 20px; overflow-x: auto; } | |
| #steps { display: flex; gap: 4px; } | |
| #steps button { grid-template-columns: auto auto; white-space: nowrap; padding: 8px 12px; } | |
| #steps li.on::before { left: 0; right: 0; top: auto; bottom: 0; height: 3px; width: auto; } | |
| .sheet { position: static; border: 0; border-top: 1px solid var(--rule); max-height: none; } | |
| .panel { padding: 24px 20px 40px; } | |
| .top { padding: 18px 20px 14px; flex-wrap: wrap; gap: 8px 18px; } | |
| } | |
| @media (max-width: 640px) { | |
| .specimens, .row2 { grid-template-columns: 1fr; } | |
| .bp-row { grid-template-columns: 1fr; gap: 6px; } | |
| .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| .press { height: 250px; } | |
| } | |
| /* mode switch */ | |
| .modes { display: inline-flex; border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; flex: none; } | |
| .modes button { background: var(--paper-2); border: 0; padding: 7px 14px; font-weight: 600; cursor: pointer; } | |
| .modes button + button { border-left: 1.5px solid var(--ink); } | |
| .modes button[aria-pressed="true"] { background: var(--ink); color: #fff; } | |
| /* curate */ | |
| .addrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; margin-top: 8px; } | |
| .in.sm { width: auto; padding: 7px 10px; font-size: 14.5px; } | |
| .in.num { width: 7.5em; font-variant-numeric: tabular-nums; } | |
| .srow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: start; } | |
| .srow:first-of-type { border-top: 1px solid var(--ink); margin-top: 10px; } | |
| .sname b { display: block; overflow-wrap: anywhere; } | |
| .sname .hint { display: block; } | |
| .sctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } | |
| .peek, .ptext { font-family: var(--doc); white-space: pre-wrap; font-size: 14.5px; line-height: 1.5; max-height: 260px; overflow: auto; margin-top: 6px; padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; } | |
| details summary { cursor: pointer; color: var(--blue); font-weight: 600; font-size: 14px; margin-top: 4px; } | |
| code { font-size: .92em; background: var(--paper-2); padding: 0 4px; border-radius: 2px; } | |
| .range { width: 100%; accent-color: var(--blue); } | |
| .sv { font-weight: 600; color: var(--blue); margin-left: 6px; } | |
| .pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; } | |
| .pcard .ph { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } | |
| .flag { color: var(--bad); font-size: 13px; font-weight: 600; } | |
| .mix { padding-top: 14px; border-top: 1px solid var(--rule); } | |
| .mixhead { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } | |
| .mixhead .seg { margin-top: 0; } | |
| .wtable { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 22px; margin-top: 14px; } | |
| .wtable label { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; } | |
| .wtable label > span:first-child { overflow-wrap: anywhere; } | |
| .stages { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 0; margin: 26px 0 0; } | |
| .stages li { color: var(--slate); } | |
| .stages li.done { color: var(--ink); } | |
| .stages li.on { color: var(--blue); font-weight: 600; } | |
| .stages li.on::after { content: " …"; } | |
| .tscroll { overflow-x: auto; margin-top: 8px; } | |
| .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; } | |
| .tbl th { text-align: left; font-weight: 600; border-bottom: 1px solid var(--ink); padding: 8px 12px 8px 0; white-space: nowrap; } | |
| .tbl td { border-bottom: 1px solid var(--rule); padding: 9px 12px 9px 0; vertical-align: top; } | |
| .hists { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; margin-top: 12px; } | |
| .hists span { font-weight: 600; font-size: 14px; } | |
| .hist { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-top: 6px; border-bottom: 1px solid var(--ink); } | |
| .hist i { flex: 1; background: var(--blue); min-height: 1px; } | |
| .ex { margin-top: 10px; } | |
| .exd { margin-top: 10px; } | |
| .quote { font-family: var(--doc); font-size: 14.5px; margin-top: 8px; } | |
| .code { background: var(--ink); color: #f1f2f4; padding: 14px 16px; border-radius: var(--r); overflow-x: auto; font-size: 13.5px; line-height: 1.6; margin-top: 12px; white-space: pre; } | |
| @media (max-width: 640px) { | |
| .pairs { grid-template-columns: 1fr; } | |
| .addrow { grid-template-columns: 1fr auto; } | |
| .addrow .btn { grid-column: 1 / -1; } | |
| .srow { grid-template-columns: 1fr; } | |
| .sctl { justify-content: flex-start; } | |
| } | |
| .in.num.wide { width: 11em; } | |
| /* visualize */ | |
| .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } | |
| .vsrcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 30px; } | |
| .vsrc { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 20px 20px; min-width: 0; } | |
| .vsrc > b { display: block; font-size: 18px; margin-bottom: 4px; } | |
| .vsrc .actions { margin-top: 16px; } | |
| .vsrc .seg { margin-top: 12px; } | |
| .vsrc .addrow { grid-template-columns: minmax(0, 1fr) auto; margin-top: 14px; } | |
| .vsamples { list-style: none; margin: 10px 0 0; padding: 0; columns: 2 150px; column-gap: 18px; } | |
| .vsamples li { break-inside: avoid; } | |
| .vsample { background: none; border: 0; padding: 5px 0; cursor: pointer; text-align: left; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; text-decoration-thickness: 2px; } | |
| .vsample:hover:not(:disabled) { color: var(--blue); text-decoration-color: var(--pink); } | |
| .vsample:disabled { cursor: default; opacity: .6; } | |
| .vsamples em { color: var(--blue); font-style: normal; font-size: 13px; font-weight: 600; } | |
| .filebtn { display: inline-block; margin-top: 14px; position: relative; overflow: hidden; } | |
| .filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } | |
| .filebtn:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; } | |
| .askbar { border-bottom: 1px solid var(--rule); padding-bottom: 22px; } | |
| textarea.in.vq { min-height: 64px; font-size: 19px; } | |
| .askbar .actions { gap: 10px 22px; } | |
| .vz-stages { margin: 0; gap: 4px 18px; } | |
| .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } | |
| .chip { background: none; border: 1px solid #aeb2bf; border-radius: 999px; padding: 6px 13px; cursor: pointer; font-size: 14.5px; text-align: left; } | |
| .chip:hover:not(:disabled) { border-color: var(--ink); background: var(--paper-2); } | |
| .chip:disabled { opacity: .5; cursor: default; } | |
| .scopechip { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; padding: 8px 12px; background: var(--paper-2); border-left: 4px solid var(--pink); font-size: 14.5px; } | |
| .answer { margin-top: 28px; } | |
| .answer h2 { max-width: 40ch; } | |
| .prose { font-family: var(--doc); font-size: 17.5px; line-height: 1.6; margin-top: 12px; max-width: 64ch; } | |
| .facts { margin: 12px 0 0; padding-left: 18px; font-family: var(--doc); } | |
| .chart { margin-top: 22px; min-height: 120px; } | |
| .chart.small { margin-top: 8px; min-height: 80px; } | |
| .svgwrap svg { display: block; max-width: 100%; height: auto; overflow: visible; } | |
| .chart text { font: 13px var(--ui); fill: var(--ink); } | |
| .chart .lab { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; } | |
| .chart .tick { font-size: 11.5px; fill: var(--slate); font-variant-numeric: tabular-nums; } | |
| .chart .val { font-weight: 600; font-variant-numeric: tabular-nums; } | |
| .chart .ink { fill: var(--blue); } | |
| .chart .ghost { fill: var(--pink); opacity: .85; } | |
| .chart .grid { stroke: var(--rule); stroke-width: 1; } | |
| .chart .hit { fill: transparent; } | |
| .chart .bx { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.5; } | |
| .chart .whisk { stroke: var(--ink); stroke-width: 1.5; } | |
| .chart .med { stroke: var(--pink); stroke-width: 3.5; pointer-events: none; } | |
| .chart .dot { fill: var(--blue); opacity: .72; mix-blend-mode: multiply; cursor: pointer; } | |
| .chart .seg { mix-blend-mode: multiply; } | |
| .chart .segv { fill: #fff; font-size: 11.5px; font-weight: 600; pointer-events: none; } | |
| .chart .mk { cursor: pointer; outline: none; } | |
| .chart .mk:hover .ink { fill: #2a39e6; } | |
| .chart .mk:hover .lab { font-weight: 600; } | |
| .chart .mk:focus-visible .hit { stroke: var(--blue); stroke-width: 2; } | |
| .chart .sel .ink { fill: var(--pink); } | |
| .chart .sel .ghost { fill: var(--blue); } | |
| .chart .sel .bx { stroke: var(--pink); stroke-width: 2.5; } | |
| .chart circle.sel { fill: var(--pink); opacity: 1; } | |
| .chart .sel .lab { font-weight: 700; } | |
| .chart .dim { opacity: .28; } | |
| .chart .thin { opacity: .65; } | |
| .fresh .grow { animation: vzgrow .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0ms); } | |
| .fresh .grow-y { animation: vzgrowy .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0ms); } | |
| .fresh .grow-o { animation: vzfade .5s ease both; animation-delay: var(--d, 0ms); } | |
| @keyframes vzgrow { from { transform: scaleX(0); } } | |
| @keyframes vzgrowy { from { transform: scaleY(0); } } | |
| @keyframes vzfade { from { opacity: 0; } } | |
| @media (prefers-reduced-motion: reduce) { .fresh .grow, .fresh .grow-y, .fresh .grow-o { animation: none; } } | |
| .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; } | |
| .lg { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 2px 0; cursor: pointer; font-size: 14px; } | |
| .lg i { width: 12px; height: 12px; border-radius: 2px; } | |
| .lg.sel { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } | |
| .axisline { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; color: var(--slate); font-size: 13.5px; } | |
| .linkish.sm { font-size: 13.5px; } | |
| .vnote { margin-top: 8px; max-width: 70ch; } | |
| .vtools { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; } | |
| .glance { margin-top: 30px; } | |
| .glance > h3 { font-size: 15px; font-weight: 600; } | |
| .gl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px 30px; margin-top: 10px; } | |
| .gl { border-top: 1px solid var(--ink); padding-top: 10px; min-width: 0; } | |
| .gl > b { font-size: 14.5px; } | |
| .drawer { margin-top: 28px; border-top: 3px solid var(--pink); padding-top: 14px; } | |
| .drawhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; } | |
| .btn.sm { padding: 7px 13px; font-size: 14px; } | |
| .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } | |
| .tagc { display: inline-block; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; padding: 1px 7px; font-size: 12.5px; color: var(--slate); } | |
| .tagc.made { border-color: var(--pink); color: var(--ink); } | |
| .sheet .tagc { margin: 0 2px 4px 0; } | |
| @media (max-width: 640px) { .vsrcs { grid-template-columns: 1fr; } textarea.in.vq { font-size: 17px; } } | |