:root {
--pry-measure: 46rem;
--pry-gutter: 24px;
--pry-page: calc(var(--pry-measure) + var(--pry-gutter) * 2);
--pry-pane: calc(var(--pry-measure) + 34px);
--pry-radius: 10px;
--pry-radius-sm: 7px;
--pry-border: 1px solid var(--mass-border);
}
body {
margin: 0;
color: var(--mass-text);
font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
color: var(--mass-accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
::selection {
background: var(--mass-accent-soft);
}
.pry-shell {
display: flex;
flex-direction: column;
min-height: 100dvh;
}
.pry-wrap {
width: 100%;
max-width: var(--pry-page);
margin-inline: auto;
padding-inline: var(--pry-gutter);
}
.pry-main {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding-block: 40px 72px;
}
.pry-main > .pry-wrap {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.pry-header {
position: sticky;
top: 0;
z-index: 10;
border-bottom: var(--pry-border);
background: color-mix(in srgb, var(--mass-bg-base) 88%, transparent);
backdrop-filter: blur(8px);
}
.pry-loose {
position: static;
}
.pry-header-auto {
position: sticky;
top: 0;
transition: transform 0.22s ease;
will-change: transform;
}
.pry-header-auto.pry-header-away {
transform: translateY(-100%);
}
.pry-header-auto:has(:focus-visible) {
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.pry-header-auto {
transition: none;
}
}
.pry-header-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
min-height: 76px;
}
.pry-header-right {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: 16px;
}
.pry-brand {
grid-column: 2;
justify-self: center;
display: inline-block;
color: var(--mass-text);
font: 800 30px/1.1 ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
letter-spacing: 0.12em;
margin-right: -0.12em;
text-shadow:
0 0 2px color-mix(in srgb, var(--mass-accent) 34%, transparent),
0 0 12px color-mix(in srgb, var(--mass-accent) 24%, transparent),
0 0 30px color-mix(in srgb, var(--mass-accent) 16%, transparent),
0 0 60px color-mix(in srgb, var(--mass-accent) 10%, transparent);
white-space: nowrap;
animation: pry-glitch 8s infinite;
}
html.sl-theme-light .pry-brand {
text-shadow:
0 0 22px color-mix(in srgb, var(--mass-accent) 20%, transparent),
0 0 56px color-mix(in srgb, var(--mass-accent) 13%, transparent);
}
.pry-brand:hover {
color: var(--mass-accent);
text-decoration: none;
}
@keyframes pry-glitch {
0%, 74.9% {
opacity: 1;
transform: none;
}
75% {
opacity: 0.72;
transform: skewX(-5deg) translateX(-1px);
}
76.2% {
opacity: 1;
transform: none;
}
77% {
opacity: 0.82;
transform: skewX(3deg) translateX(1px);
}
78%, 100% {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.pry-brand {
animation: none;
}
}
.pry-nav {
display: flex;
align-items: center;
gap: 20px;
font-size: 14.5px;
}
.pry-nav a {
color: var(--mass-text-muted);
padding-block: 4px;
border-bottom: 2px solid transparent;
}
.pry-nav a:hover {
color: var(--mass-text);
text-decoration: none;
}
.pry-nav a[aria-current="page"] {
color: var(--mass-text);
border-bottom-color: var(--mass-accent);
}
.pry-themes {
display: flex;
gap: 7px;
align-items: center;
}
.pry-swatch {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--sw);
border: var(--pry-border);
display: block;
}
.pry-swatch:hover {
border-color: var(--mass-text-muted);
}
.pry-swatch[aria-current="true"] {
outline: 2px solid var(--mass-accent);
outline-offset: 2px;
}
.pry-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--pry-radius-sm);
border: 1px solid transparent;
font-size: 14.5px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
background: none;
color: var(--mass-text);
white-space: nowrap;
}
.pry-btn:hover {
text-decoration: none;
}
.pry-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
}
.pry-btn-primary:disabled:hover {
background: var(--mass-accent-fill);
}
.pry-btn-ghost:disabled:hover {
border-color: var(--mass-border);
color: var(--mass-text-muted);
}
.pry-btn-sm {
padding: 5px 11px;
font-size: 13.5px;
}
.pry-btn-icon {
padding: 0;
width: 32px;
height: 32px;
flex: none;
}
.pry-btn-icon[aria-current] {
background: var(--mass-accent);
border-color: var(--mass-accent);
color: var(--mass-bg-base);
box-shadow: var(--mass-glow-primary, none);
}
.pry-btn-icon[aria-current]:hover {
background: var(--mass-accent);
color: var(--mass-bg-base);
}
.pry-btn-primary {
background: var(--mass-accent-fill);
color: var(--mass-fill-text);
box-shadow: var(--mass-glow-primary, none);
}
.pry-btn-primary:hover {
background: color-mix(in srgb, var(--mass-accent-fill) 86%, #000);
}
.pry-btn-ghost {
border-color: var(--mass-border);
color: var(--mass-text-muted);
}
.pry-btn-ghost:hover {
border-color: var(--mass-accent);
color: var(--mass-text);
background: var(--mass-bg-hover);
}
.pry-btn-danger {
border-color: var(--mass-border);
color: var(--mass-danger);
}
.pry-btn-danger:hover {
border-color: var(--mass-danger);
background: var(--mass-danger-soft);
}
.pry-inline-form {
display: inline-flex;
}
.pry-offscreen {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.pry-title {
font-size: 30px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.025em;
margin: 0 0 20px;
color: var(--mass-text);
}
.pry-lede {
color: var(--mass-text-muted);
font-size: 15px;
margin: -12px 0 22px;
}
.pry-list {
display: flex;
flex-direction: column;
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}
.pry-feed {
display: flex;
flex-direction: column;
gap: 12px;
}
.pry-posts {
display: flex;
flex-direction: column;
gap: 24px;
}
.pry-featured {
display: flex;
flex-direction: column;
gap: 12px;
}
.pry-section-title {
margin: 0;
font-size: 12px;
font-weight: 650;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mass-text-faint);
}
.pry-featured .pry-card {
border-color: color-mix(in srgb, var(--mass-accent) 28%, var(--mass-border));
}
#post-list:empty {
display: none;
}
.pry-more {
display: flex;
justify-content: center;
padding-block: 8px;
}
.pry-main:has(.pry-more:not(:empty)) {
padding-bottom: 24px;
}
#post-more:empty,
.pry-more:empty {
display: none;
}
.pry-card {
position: relative;
background: var(--mass-bg-panel);
border: var(--pry-border);
border-radius: var(--pry-radius);
padding: 20px 22px;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.pry-card:hover {
border-color: color-mix(in srgb, var(--mass-accent) 55%, transparent);
transform: translateY(-1px);
}
.pry-card-title {
font-size: 20px;
font-weight: 650;
line-height: 1.3;
letter-spacing: -0.015em;
margin: 0 0 8px;
}
.pry-card-title a {
color: var(--mass-text);
}
.pry-card-title a::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.pry-card .pry-tag,
.pry-article-header .pry-tag {
position: relative;
z-index: 1;
padding: 1px 8px;
font-size: 11.5px;
background: transparent;
border-color: var(--mass-border);
color: var(--mass-text-faint);
}
.pry-card .pry-tag:hover,
.pry-article-header .pry-tag:hover {
border-color: var(--mass-accent);
color: var(--mass-accent);
}
.pry-card:hover .pry-card-title a,
.pry-card-title a:hover {
color: var(--mass-accent);
text-decoration: none;
}
.pry-card:has(.pry-card-title a:focus-visible) {
outline: 2px solid var(--mass-accent);
outline-offset: 2px;
}
.pry-card-title a:focus-visible {
outline: none;
}
.pry-card-summary {
margin: 10px 0 0;
color: var(--mass-text-muted);
font-size: 14.5px;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pry-meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
color: var(--mass-text-faint);
font-size: 13px;
}
.pry-meta .pry-sep {
opacity: 0.5;
}
.pry-meta-series {
margin-left: auto;
display: inline-flex;
align-items: baseline;
gap: 10px;
color: var(--mass-text-muted);
}
@media (max-width: 32rem) {
.pry-meta-series {
margin-left: 0;
}
}
.pry-time {
position: relative;
text-decoration: underline dotted currentColor;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
opacity: 0.85;
}
@media (hover: hover) {
.pry-time::after {
content: attr(data-full);
position: absolute;
left: 0;
top: calc(100% + 7px);
z-index: 3;
padding: 5px 9px;
border: var(--pry-border);
border-radius: var(--pry-radius-sm);
background: var(--mass-bg-panel);
box-shadow: 0 4px 14px rgb(0 0 0 / 0.28);
color: var(--mass-text);
font-size: 12.5px;
line-height: 1.3;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 120ms ease, visibility 120ms;
}
.pry-time:hover::after {
opacity: 1;
visibility: visible;
}
}
.pry-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.pry-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 10px;
border-radius: 999px;
background: var(--mass-badge-bg);
color: var(--mass-badge-text);
font-size: 12.5px;
border: 1px solid transparent;
}
.pry-tag:hover {
border-color: var(--mass-accent);
color: var(--mass-accent);
text-decoration: none;
}
.pry-tag-count {
color: var(--mass-text-faint);
font-variant-numeric: tabular-nums;
}
.pry-filter {
display: flex;
gap: 7px;
flex-wrap: wrap;
margin: 0 0 22px;
}
.pry-filter .pry-tag {
font-size: 13.5px;
padding: 4px 13px;
}
.pry-filter .pry-tag[aria-current] {
background: var(--mass-accent);
color: var(--mass-bg-base);
box-shadow: var(--mass-glow-primary, none);
}
.pry-filter .pry-tag[aria-current] .pry-tag-count {
color: inherit;
opacity: 0.75;
}
.pry-filter:not(:has(.pry-filter-more[open])) {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.pry-filter-head {
display: contents;
}
.pry-filter:not(:has(.pry-filter-more[open])) .pry-filter-more {
grid-area: 1 / 2;
}
.pry-filter:not(:has(.pry-filter-more[open])) .pry-filter-head {
grid-area: 1 / 1;
display: flex;
gap: 7px;
overflow-x: auto;
scrollbar-width: none;
padding-block: 2px;
padding-inline-end: 18px;
}
.pry-filter:not(:has(.pry-filter-more[open]))::after {
content: "";
grid-area: 1 / 1;
justify-self: end;
align-self: stretch;
width: 22px;
pointer-events: none;
position: relative;
z-index: 1;
background: linear-gradient(to right, transparent, var(--mass-bg-base));
}
.pry-filter-head > * {
flex: none;
}
.pry-filter-more {
order: 1;
}
.pry-filter-more > summary {
display: inline-flex;
align-items: center;
padding: 4px 13px;
border-radius: 999px;
border: 1px dashed var(--mass-border);
color: var(--mass-text-faint);
font-size: 13.5px;
cursor: pointer;
list-style: none;
}
.pry-filter-more > summary::-webkit-details-marker {
display: none;
}
.pry-filter-more > summary:hover {
border-color: var(--mass-accent);
color: var(--mass-accent);
}
.pry-filter-more > summary:focus-visible {
outline: 2px solid var(--mass-accent);
outline-offset: 2px;
}
.pry-filter-more > summary .pry-more-close,
.pry-filter-more[open] > summary .pry-more-open {
display: none;
}
.pry-filter-more[open] > summary .pry-more-close {
display: inline;
}
.pry-article-header {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: var(--pry-border);
}
.pry-article-title {
font-size: clamp(30px, 4.4vw, 42px);
font-weight: 750;
line-height: 1.12;
letter-spacing: -0.03em;
margin: 0 0 14px;
color: var(--mass-text);
}
.pry-series {
margin-top: 40px;
padding-top: 24px;
border-top: var(--pry-border);
}
.pry-series-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.pry-series-next {
grid-column: 2;
text-align: right;
}
.pry-series-link {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: var(--mass-bg-panel);
border: var(--pry-border);
border-radius: var(--pry-radius);
transition: border-color 0.15s ease;
}
.pry-series-link:hover {
border-color: color-mix(in srgb, var(--mass-accent) 55%, transparent);
text-decoration: none;
}
.pry-series-dir {
font-size: 11.5px;
color: var(--mass-text-faint);
}
.pry-series-prev .pry-series-dir::before {
content: "← ";
}
.pry-series-next .pry-series-dir::after {
content: " →";
}
.pry-series-title {
font-size: 15px;
font-weight: 600;
line-height: 1.35;
color: var(--mass-text);
}
.pry-series-link:hover .pry-series-title {
color: var(--mass-accent);
}
@media (max-width: 32rem) {
.pry-series-links {
grid-template-columns: minmax(0, 1fr);
}
.pry-series-next {
grid-column: 1;
text-align: left;
}
}
.pry-prose {
font-size: 17px;
line-height: 1.72;
color: var(--mass-text);
}
.pry-prose h1,
.pry-prose h2,
.pry-prose h3,
.pry-prose h4,
.pry-prose h5,
.pry-prose h6 {
color: var(--mass-text);
letter-spacing: -0.02em;
line-height: 1.25;
font-weight: 700;
margin: 2em 0 0.6em;
}
.pry-prose > :first-child {
margin-top: 0;
}
.pry-prose h1 { font-size: 28px; }
.pry-prose h2 { font-size: 24px; }
.pry-prose h3 { font-size: 20px; }
.pry-prose h4 { font-size: 17.5px; }
.pry-prose h5,
.pry-prose h6 { font-size: 16px; }
.pry-prose p {
margin: 0 0 1.15em;
}
.pry-prose ul,
.pry-prose ol {
margin: 0 0 1.15em;
padding-left: 1.4em;
}
.pry-prose li {
margin-bottom: 0.35em;
}
.pry-prose li::marker {
color: var(--mass-text-faint);
}
.pry-prose strong {
font-weight: 680;
color: var(--mass-text);
}
.pry-prose img {
max-width: 100%;
height: auto;
border-radius: var(--pry-radius);
display: block;
margin-block: 1.5em;
}
.pry-prose blockquote {
margin: 1.5em 0;
padding: 2px 0 2px 18px;
border-left: 3px solid var(--mass-accent);
color: var(--mass-text-muted);
font-style: italic;
}
.pry-prose blockquote p:last-child {
margin-bottom: 0;
}
.pry-prose hr {
border: 0;
border-top: var(--pry-border);
margin-block: 2.5em;
}
.pry-prose a {
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--mass-accent) 40%, transparent);
text-underline-offset: 3px;
}
.pry-prose code {
font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.88em;
background: var(--mass-bg-active);
padding: 0.15em 0.4em;
border-radius: 5px;
}
.pry-prose pre {
background: var(--mass-bg-panel);
border: var(--pry-border);
border-radius: var(--pry-radius);
padding: 16px 18px;
overflow-x: auto;
margin: 0 0 1.4em;
font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13.5px;
line-height: 1.7;
}
.pry-prose pre code {
background: none;
padding: 0;
font-size: inherit;
line-height: inherit;
}
.pry-code {
position: relative;
margin: 0 0 1.4em;
}
.pry-code pre {
margin: 0;
}
.pry-copy {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
padding: 5px;
border: var(--pry-border);
border-radius: var(--pry-radius-sm);
background: var(--mass-bg-base);
color: var(--mass-text-muted);
font-size: 11.5px;
font-family: inherit;
line-height: 1.6;
cursor: pointer;
opacity: 0;
transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}
.pry-code:hover .pry-copy,
.pry-copy:focus {
opacity: 1;
}
@media (hover: none) {
.pry-copy {
opacity: 1;
}
}
.pry-copy:hover {
color: var(--mass-accent);
border-color: var(--mass-accent);
}
.pry-copy:focus-visible {
outline: 2px solid var(--mass-accent);
outline-offset: 2px;
}
.pry-copy[data-state="done"] {
color: var(--mass-success);
border-color: color-mix(in srgb, var(--mass-success) 45%, transparent);
}
.pry-copy[data-state="failed"] {
color: var(--mass-warning);
border-color: color-mix(in srgb, var(--mass-warning) 45%, transparent);
padding: 3px 9px;
}
.pry-copy-mark {
display: flex;
}
.pry-prose .pry-table-scroll,
.pry-prose table {
margin: 0 0 1.4em;
}
.pry-prose table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
border: var(--pry-border);
border-radius: var(--pry-radius);
overflow: hidden;
}
.pry-prose th,
.pry-prose td {
border-bottom: var(--pry-border);
padding: 9px 14px;
text-align: left;
}
.pry-prose tr:last-child td {
border-bottom: 0;
}
.pry-prose th {
background: var(--mass-bg-panel);
font-weight: 650;
color: var(--mass-text);
}
.pry-prose input[type="checkbox"] {
accent-color: var(--mass-accent);
margin-right: 6px;
vertical-align: -1px;
}
.pry-prose .footnotes {
margin-top: 3em;
padding-top: 1.5em;
border-top: var(--pry-border);
font-size: 14.5px;
color: var(--mass-text-muted);
}
.pry-prose .footnotes hr {
display: none;
}
.pry-search-form {
display: flex;
gap: 10px;
margin-bottom: 16px;
}
.pry-search-form .pry-input {
flex: 1;
padding: 10px 13px;
font-size: 15px;
}
.pry-search-form .pry-input::-webkit-search-cancel-button {
appearance: none;
}
.pry-snippet {
color: var(--mass-text-muted);
font-size: 14.5px;
line-height: 1.6;
margin: 10px 0 0;
}
.pry-snippet mark {
background: var(--mass-accent-soft);
color: var(--mass-accent);
border-radius: 3px;
padding: 0 3px;
font-weight: 600;
}
.pry-row-actions {
display: flex;
gap: 6px;
align-items: center;
}
.pry-metrics {
margin-bottom: 34px;
}
.pry-metrics-title {
margin: 0 0 12px;
font-size: 17px;
font-weight: 650;
color: var(--mass-text);
}
.pry-table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
border: var(--pry-border);
border-radius: var(--pry-radius);
overflow: hidden;
}
.pry-table th,
.pry-table td {
border-bottom: var(--pry-border);
padding: 9px 14px;
text-align: left;
}
.pry-table tr:last-child td {
border-bottom: 0;
}
.pry-table th {
background: var(--mass-bg-panel);
font-weight: 650;
color: var(--mass-text);
}
.pry-num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
width: 8ch;
}
.pry-header-actions {
display: flex;
gap: 8px;
align-items: center;
}
.pry-post-actions {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
margin-top: 16px;
padding-top: 14px;
border-top: var(--pry-border);
}
.pry-post-actions .pry-status {
margin: 0 auto 0 0;
}
.pry-state {
font-size: 11px;
font-weight: 650;
text-transform: uppercase;
letter-spacing: 0.07em;
padding: 3px 9px;
border-radius: 999px;
background: var(--mass-warning-soft);
color: var(--mass-warning);
}
.pry-card .pry-state,
.pry-post-actions {
position: relative;
z-index: 1;
}
.pry-confirm-actions {
display: flex;
gap: 8px;
align-items: center;
margin-top: 20px;
}
.pry-shell:has(.pry-editor-page) {
min-height: 100dvh;
}
.pry-main:has(.pry-editor-page) {
padding-block: 24px 19px;
}
.pry-shell:has(.pry-editor-page) .pry-main > .pry-wrap {
max-width: calc(var(--pry-pane) * 2 + 14px + var(--pry-gutter) * 2);
}
.pry-editor-page {
display: grid;
grid-template-rows: auto auto;
gap: 19px;
}
.pry-editor {
display: grid;
grid-template-rows: auto auto;
gap: 14px;
}
.pry-editor-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
position: sticky;
bottom: 0;
z-index: 10;
padding-block: 10px;
border-top: var(--pry-border);
background: color-mix(in srgb, var(--mass-bg-base) 88%, transparent);
backdrop-filter: blur(8px);
}
.pry-editor-bar-actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
}
.pry-editor-meta {
display: grid;
grid-template-columns: minmax(9rem, 1fr) minmax(15rem, 2fr);
gap: 14px;
align-items: end;
}
.pry-field {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.pry-editor-meta .pry-field-part {
max-width: 8rem;
}
.pry-field-label {
font-size: 11px;
font-weight: 650;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mass-text-faint);
}
.pry-input {
width: 100%;
background: var(--mass-bg-panel);
color: var(--mass-text);
border: var(--pry-border);
border-radius: var(--pry-radius-sm);
padding: 8px 11px;
font: inherit;
font-size: 14px;
}
.pry-input::placeholder {
color: var(--mass-text-faint);
}
.pry-input:focus,
.pry-source:focus {
outline: none;
border-color: var(--mass-accent);
box-shadow: 0 0 0 3px var(--mass-accent-soft);
}
.pry-editor-panes {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, var(--pry-pane));
gap: 14px;
min-height: 0;
}
.pry-pane {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background: var(--mass-bg-panel);
border: var(--pry-border);
border-radius: var(--pry-radius);
padding: 12px 14px 14px;
}
.pry-pane-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
flex-shrink: 0;
}
.pry-pane-title {
margin: 0;
margin-right: auto;
font-size: 11px;
font-weight: 650;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--mass-text-faint);
}
.pry-pane-link {
background: none;
border: 0;
padding: 0;
font: inherit;
font-size: 11px;
font-weight: 650;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--mass-text-faint);
cursor: pointer;
}
.pry-pane-link:hover {
color: var(--mass-accent);
text-decoration: none;
}
.pry-source.pry-dropping {
border-color: var(--mass-accent);
box-shadow: 0 0 0 3px var(--mass-accent-soft);
}
.pry-source {
flex: 1 1 auto;
field-sizing: content;
min-height: 24rem;
width: 100%;
resize: none;
display: block;
background: var(--mass-bg-base);
color: var(--mass-text);
border: var(--pry-border);
border-radius: var(--pry-radius-sm);
padding: 12px 14px;
font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13.5px;
line-height: 1.7;
tab-size: 4;
}
.pry-preview-body {
flex: 1 1 auto;
padding-right: 4px;
}
.pry-busy {
opacity: 0.5;
transition: opacity 0.12s ease;
}
.pry-status {
font-size: 13px;
color: var(--mass-text-muted);
white-space: nowrap;
}
@media (max-width: 77rem) {
.pry-editor-meta {
grid-template-columns: 1fr;
}
.pry-editor-panes {
grid-template-columns: minmax(0, var(--pry-pane));
justify-content: center;
}
.pry-editor-bar-actions {
width: 100%;
justify-content: center;
}
.pry-source {
min-height: 20rem;
}
.pry-preview-body {
min-height: 10rem;
}
}
.pry-status[data-variant="error"] {
color: var(--mass-danger);
}
.pry-status[data-variant="success"] {
color: var(--mass-success);
}
.pry-login {
max-width: 21rem;
margin: 8vh auto 0;
display: flex;
flex-direction: column;
gap: 16px;
background: var(--mass-bg-panel);
border: var(--pry-border);
border-radius: var(--pry-radius);
padding: 28px;
}
.pry-login .pry-input {
padding: 10px 13px;
font-size: 15px;
}
.pry-login .pry-title {
margin-bottom: 0;
font-size: 22px;
}
.pry-upload-form {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 12px;
}
.pry-upload-form .pry-input {
width: auto;
flex: 1;
min-width: 14rem;
padding: 6px 8px;
}
.pry-upload-form .pry-input::file-selector-button {
margin-right: 10px;
background: var(--mass-bg-base);
color: var(--mass-text);
border: var(--pry-border);
border-radius: var(--pry-radius-sm);
padding: 5px 12px;
font: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.pry-upload-form .pry-input::file-selector-button:hover {
border-color: var(--mass-accent);
color: var(--mass-accent);
}
.pry-upload-list {
display: flex;
flex-direction: column;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.pry-upload {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
background: var(--mass-bg-panel);
border: var(--pry-border);
border-radius: var(--pry-radius);
padding: 12px 16px;
}
.pry-upload-thumb {
flex-shrink: 0;
width: 72px;
height: 72px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: var(--pry-radius-sm);
border: var(--pry-border);
background-color: var(--mass-bg-base);
background-image:
linear-gradient(45deg, var(--mass-border) 25%, transparent 25%),
linear-gradient(-45deg, var(--mass-border) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--mass-border) 75%),
linear-gradient(-45deg, transparent 75%, var(--mass-border) 75%);
background-size: 12px 12px;
background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.pry-upload-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.pry-upload-main {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.pry-upload-name {
margin: 0;
font-weight: 620;
font-size: 15px;
color: var(--mass-text);
overflow-wrap: anywhere;
}
.pry-upload-snippet {
user-select: all;
display: inline-block;
max-width: 100%;
overflow-wrap: anywhere;
background: var(--mass-bg-base);
border: var(--pry-border);
border-radius: var(--pry-radius-sm);
padding: 5px 9px;
font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12.5px;
color: var(--mass-text-muted);
}
.pry-upload-preview {
max-width: 100%;
max-height: 40vh;
border-radius: var(--pry-radius);
border: var(--pry-border);
}
.pry-empty {
color: var(--mass-text-faint);
text-align: center;
padding: 56px 16px;
border: 1px dashed var(--mass-border);
border-radius: var(--pry-radius);
font-size: 15px;
}
.pry-error {
text-align: center;
padding: 8vh 0;
}
.pry-error-detail {
margin: -4px 0 24px;
color: var(--mass-text-faint);
font-size: 15px;
}
.pry-error-code {
font-size: 64px;
font-weight: 750;
letter-spacing: -0.03em;
line-height: 1;
margin: 0 0 12px;
color: var(--mass-text-faint);
}
.pry-footer {
border-top: var(--pry-border);
color: var(--mass-text-faint);
font-size: 13.5px;
padding-block: 20px;
}
.pry-footer-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
.pry-footer-auth {
justify-self: end;
}
.pry-footer-inner:not(:has(.pry-footer-auth)) .pry-colophon {
grid-column: 3;
justify-self: end;
}
.pry-colophon {
color: var(--mass-text-faint);
font-size: 12.5px;
}
.pry-colophon a {
color: inherit;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
text-underline-offset: 2px;
}
.pry-colophon a:hover {
color: var(--mass-accent);
text-decoration-color: currentColor;
}
.pry-footer-owner {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.pry-social {
display: flex;
align-items: center;
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}
.pry-social-link {
display: flex;
color: var(--mass-text-faint);
border-radius: var(--pry-radius-sm);
}
.pry-social-link:hover {
color: var(--mass-accent);
text-decoration: none;
}
.pry-social-link:focus-visible {
outline: 2px solid var(--mass-accent);
outline-offset: 3px;
}
.pry-about-open {
color: inherit;
text-decoration: underline dotted;
text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
text-underline-offset: 3px;
}
.pry-about-open:hover {
color: var(--mass-accent);
text-decoration-color: currentColor;
}
.pry-about {
display: none;
position: fixed;
inset: 0;
z-index: 60;
place-items: center;
padding: var(--pry-gutter);
}
.pry-about:target {
display: grid;
}
.pry-about-scrim {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--mass-bg-base) 72%, transparent);
backdrop-filter: blur(3px);
}
.pry-about-panel {
position: relative;
width: min(var(--pry-measure), 100%);
max-height: min(80dvh, 40rem);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--mass-bg-panel);
border: var(--pry-border);
border-radius: var(--pry-radius);
padding: 26px 28px;
}
.pry-about-close {
position: sticky;
top: 0;
float: right;
margin: -8px -8px 0 12px;
width: 28px;
height: 28px;
display: grid;
place-items: center;
color: var(--mass-text-faint);
border-radius: var(--pry-radius-sm);
font-size: 20px;
line-height: 1;
}
.pry-about-close:hover {
color: var(--mass-text);
background: var(--mass-bg-hover);
text-decoration: none;
}
.pry-about-close:focus-visible {
outline: 2px solid var(--mass-accent);
outline-offset: 2px;
}
.pry-about-panel .pry-prose > :first-child {
margin-top: 0;
}
@media (max-width: 40rem) {
.pry-wrap {
padding-inline: 16px;
}
.pry-header-inner {
grid-template-columns: 1fr auto;
gap: 12px;
min-height: 62px;
}
.pry-header-right {
display: contents;
}
.pry-brand {
grid-area: 1 / 1;
justify-self: start;
font-size: 22px;
}
.pry-themes {
grid-area: 1 / 2;
justify-self: end;
}
.pry-header-actions {
grid-area: 2 / 1 / auto / -1;
justify-self: center;
}
.pry-header-inner:has(.pry-header-actions) {
padding-block: 10px;
min-height: 0;
}
.pry-nav {
gap: 14px;
font-size: 14px;
}
.pry-main {
padding-block: 28px 48px;
}
.pry-footer-inner {
grid-template-columns: 1fr;
justify-items: center;
gap: 12px;
}
.pry-footer-inner > * {
grid-column: auto;
justify-self: center;
}
}
html.sl-theme-dark {
.chroma-bg { color: #f8f8f2; background-color: #282a36; }
.chroma-chroma { color: #f8f8f2; background-color: #282a36; }
.chroma-chroma .chroma-lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.chroma-chroma .chroma-lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
.chroma-chroma .chroma-hl { background-color: #3d3f4a }
.chroma-chroma .chroma-lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
.chroma-chroma .chroma-ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
.chroma-chroma .chroma-line { display: flex; }
.chroma-chroma .chroma-k { color: #ff79c6 }
.chroma-chroma .chroma-kc { color: #ff79c6 }
.chroma-chroma .chroma-kd { color: #8be9fd; font-style: italic }
.chroma-chroma .chroma-kn { color: #ff79c6 }
.chroma-chroma .chroma-kp { color: #ff79c6 }
.chroma-chroma .chroma-kr { color: #ff79c6 }
.chroma-chroma .chroma-kt { color: #8be9fd }
.chroma-chroma .chroma-na { color: #50fa7b }
.chroma-chroma .chroma-nb { color: #8be9fd; font-style: italic }
.chroma-chroma .chroma-nc { color: #50fa7b }
.chroma-chroma .chroma-nf { color: #50fa7b }
.chroma-chroma .chroma-nl { color: #8be9fd; font-style: italic }
.chroma-chroma .chroma-nt { color: #ff79c6 }
.chroma-chroma .chroma-nv { color: #8be9fd; font-style: italic }
.chroma-chroma .chroma-vc { color: #8be9fd; font-style: italic }
.chroma-chroma .chroma-vg { color: #8be9fd; font-style: italic }
.chroma-chroma .chroma-vi { color: #8be9fd; font-style: italic }
.chroma-chroma .chroma-s { color: #f1fa8c }
.chroma-chroma .chroma-sa { color: #f1fa8c }
.chroma-chroma .chroma-sb { color: #f1fa8c }
.chroma-chroma .chroma-sc { color: #f1fa8c }
.chroma-chroma .chroma-dl { color: #f1fa8c }
.chroma-chroma .chroma-sd { color: #f1fa8c }
.chroma-chroma .chroma-s2 { color: #f1fa8c }
.chroma-chroma .chroma-se { color: #f1fa8c }
.chroma-chroma .chroma-sh { color: #f1fa8c }
.chroma-chroma .chroma-si { color: #f1fa8c }
.chroma-chroma .chroma-sx { color: #f1fa8c }
.chroma-chroma .chroma-sr { color: #f1fa8c }
.chroma-chroma .chroma-s1 { color: #f1fa8c }
.chroma-chroma .chroma-ss { color: #f1fa8c }
.chroma-chroma .chroma-m { color: #bd93f9 }
.chroma-chroma .chroma-mb { color: #bd93f9 }
.chroma-chroma .chroma-mf { color: #bd93f9 }
.chroma-chroma .chroma-mh { color: #bd93f9 }
.chroma-chroma .chroma-mi { color: #bd93f9 }
.chroma-chroma .chroma-il { color: #bd93f9 }
.chroma-chroma .chroma-mo { color: #bd93f9 }
.chroma-chroma .chroma-o { color: #ff79c6 }
.chroma-chroma .chroma-ow { color: #ff79c6 }
.chroma-chroma .chroma-c { color: #6272a4 }
.chroma-chroma .chroma-ch { color: #6272a4 }
.chroma-chroma .chroma-cm { color: #6272a4 }
.chroma-chroma .chroma-c1 { color: #6272a4 }
.chroma-chroma .chroma-cs { color: #6272a4 }
.chroma-chroma .chroma-cp { color: #ff79c6 }
.chroma-chroma .chroma-cpf { color: #ff79c6 }
.chroma-chroma .chroma-gd { color: #ff5555 }
.chroma-chroma .chroma-ge { text-decoration: underline }
.chroma-chroma .chroma-gh { font-weight: bold }
.chroma-chroma .chroma-gi { color: #50fa7b; font-weight: bold }
.chroma-chroma .chroma-go { color: #44475a }
.chroma-chroma .chroma-gu { font-weight: bold }
.chroma-chroma .chroma-gl { text-decoration: underline }
.chroma-chroma { background: transparent; }
}
html.sl-theme-light {
.chroma-bg { background-color: #f8f8f8; }
.chroma-chroma { background-color: #f8f8f8; }
.chroma-chroma .chroma-x { color: #000000 }
.chroma-chroma .chroma-err { color: #a40000 }
.chroma-chroma .chroma-lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
.chroma-chroma .chroma-lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
.chroma-chroma .chroma-hl { background-color: #dfdfdf }
.chroma-chroma .chroma-lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
.chroma-chroma .chroma-ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
.chroma-chroma .chroma-line { display: flex; }
.chroma-chroma .chroma-k { color: #204a87; font-weight: bold }
.chroma-chroma .chroma-kc { color: #204a87; font-weight: bold }
.chroma-chroma .chroma-kd { color: #204a87; font-weight: bold }
.chroma-chroma .chroma-kn { color: #204a87; font-weight: bold }
.chroma-chroma .chroma-kp { color: #204a87; font-weight: bold }
.chroma-chroma .chroma-kr { color: #204a87; font-weight: bold }
.chroma-chroma .chroma-kt { color: #204a87; font-weight: bold }
.chroma-chroma .chroma-n { color: #000000 }
.chroma-chroma .chroma-na { color: #c4a000 }
.chroma-chroma .chroma-nb { color: #204a87 }
.chroma-chroma .chroma-bp { color: #3465a4 }
.chroma-chroma .chroma-nc { color: #000000 }
.chroma-chroma .chroma-no { color: #000000 }
.chroma-chroma .chroma-nd { color: #5c35cc; font-weight: bold }
.chroma-chroma .chroma-ni { color: #ce5c00 }
.chroma-chroma .chroma-ne { color: #cc0000; font-weight: bold }
.chroma-chroma .chroma-nf { color: #000000 }
.chroma-chroma .chroma-fm { color: #000000 }
.chroma-chroma .chroma-nl { color: #f57900 }
.chroma-chroma .chroma-nn { color: #000000 }
.chroma-chroma .chroma-nx { color: #000000 }
.chroma-chroma .chroma-py { color: #000000 }
.chroma-chroma .chroma-nt { color: #204a87; font-weight: bold }
.chroma-chroma .chroma-nv { color: #000000 }
.chroma-chroma .chroma-vc { color: #000000 }
.chroma-chroma .chroma-vg { color: #000000 }
.chroma-chroma .chroma-vi { color: #000000 }
.chroma-chroma .chroma-vm { color: #000000 }
.chroma-chroma .chroma-l { color: #000000 }
.chroma-chroma .chroma-ld { color: #000000 }
.chroma-chroma .chroma-s { color: #4e9a06 }
.chroma-chroma .chroma-sa { color: #4e9a06 }
.chroma-chroma .chroma-sb { color: #4e9a06 }
.chroma-chroma .chroma-sc { color: #4e9a06 }
.chroma-chroma .chroma-dl { color: #4e9a06 }
.chroma-chroma .chroma-sd { color: #8f5902; font-style: italic }
.chroma-chroma .chroma-s2 { color: #4e9a06 }
.chroma-chroma .chroma-se { color: #4e9a06 }
.chroma-chroma .chroma-sh { color: #4e9a06 }
.chroma-chroma .chroma-si { color: #4e9a06 }
.chroma-chroma .chroma-sx { color: #4e9a06 }
.chroma-chroma .chroma-sr { color: #4e9a06 }
.chroma-chroma .chroma-s1 { color: #4e9a06 }
.chroma-chroma .chroma-ss { color: #4e9a06 }
.chroma-chroma .chroma-m { color: #0000cf; font-weight: bold }
.chroma-chroma .chroma-mb { color: #0000cf; font-weight: bold }
.chroma-chroma .chroma-mf { color: #0000cf; font-weight: bold }
.chroma-chroma .chroma-mh { color: #0000cf; font-weight: bold }
.chroma-chroma .chroma-mi { color: #0000cf; font-weight: bold }
.chroma-chroma .chroma-il { color: #0000cf; font-weight: bold }
.chroma-chroma .chroma-mo { color: #0000cf; font-weight: bold }
.chroma-chroma .chroma-o { color: #ce5c00; font-weight: bold }
.chroma-chroma .chroma-ow { color: #204a87; font-weight: bold }
.chroma-chroma .chroma-p { color: #000000; font-weight: bold }
.chroma-chroma .chroma-c { color: #8f5902; font-style: italic }
.chroma-chroma .chroma-ch { color: #8f5902; font-style: italic }
.chroma-chroma .chroma-cm { color: #8f5902; font-style: italic }
.chroma-chroma .chroma-c1 { color: #8f5902; font-style: italic }
.chroma-chroma .chroma-cs { color: #8f5902; font-style: italic }
.chroma-chroma .chroma-cp { color: #8f5902; font-style: italic }
.chroma-chroma .chroma-cpf { color: #8f5902; font-style: italic }
.chroma-chroma .chroma-g { color: #000000 }
.chroma-chroma .chroma-gd { color: #a40000 }
.chroma-chroma .chroma-ge { color: #000000; font-style: italic }
.chroma-chroma .chroma-gr { color: #ef2929 }
.chroma-chroma .chroma-gh { color: #000080; font-weight: bold }
.chroma-chroma .chroma-gi { color: #00a000 }
.chroma-chroma .chroma-go { color: #000000; font-style: italic }
.chroma-chroma .chroma-gp { color: #8f5902 }
.chroma-chroma .chroma-gs { color: #000000; font-weight: bold }
.chroma-chroma .chroma-gu { color: #800080; font-weight: bold }
.chroma-chroma .chroma-gt { color: #a40000; font-weight: bold }
.chroma-chroma .chroma-gl { color: #000000; text-decoration: underline }
.chroma-chroma .chroma-w { color: #f8f8f8; text-decoration: underline }
.chroma-chroma { background: transparent; }
}