Source

/* Paste. Shared look comes from /kit.css; this is the app's own layout. */
body.app-mode .landing-only { display: none !important; }
body:not(.app-mode) #app:empty { display: none; }
.page-pad { padding-block: 56px 80px; }
.narrow { max-width: 680px; }
.small { font-size: 14px; }
.pad { padding: 20px; }
.warn { color: var(--brick) !important; }
.message { display: grid; gap: 18px; justify-items: start; }

/* Landing hero: short copy, then the editor */
.app-hero { padding: 40px 0 64px; background: #faf6ee; border-bottom: 1px solid #f0ebe1; }
.hero-copy { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.hero-copy h1 { margin-top: 12px; }
.phrase { display: inline-block; }
.hero-copy .lede { margin-top: 14px; }
.hero-art { width: 210px; height: auto; flex: none; margin: -12px 0 -24px; }
@media (max-width: 760px) {
  .app-hero { padding: 24px 0 40px; }
  .hero-copy { margin-bottom: 20px; }
  .hero-art { display: none; }
}

/* Editor */
.editor { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.editor-placeholder { min-height: 572px; }
.editor-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.editor-title { flex: 1; min-width: 0; height: 44px; border: 0; outline: 0; background: transparent; font: 500 17px/1.3 var(--sans); color: var(--ink); }
.editor-title::placeholder { color: #9a9ea6; }
.editor-lang { width: auto; min-height: 44px; padding: 6px 30px 6px 10px; }
.editor-text { display: block; width: 100%; min-height: 380px; max-height: 70vh; padding: 16px 18px; border: 0; outline: 0; resize: vertical; background: #fffefb; color: var(--ink); font: 13.5px/1.6 var(--mono); tab-size: 4; white-space: pre; overflow: auto; }
.editor-text::placeholder { color: #9a9ea6; font-family: var(--sans); font-size: 15.5px; }
.editor-text[aria-invalid="true"] { background: #fffaf8; }
.editor:focus-within { border-color: #b5bdc8; }
.editor.dragging { border-color: var(--cobalt); box-shadow: 0 0 0 3px #2e5ec424; }
.editor.dragging .editor-text { background: var(--cobalt-wash); }
.editor-error { padding: 8px 18px 0; background: #fffefb; }
.editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); background: #fff; }
.editor-options { display: flex; align-items: center; gap: 10px 20px; flex-wrap: wrap; min-width: 0; }
.option { display: inline-flex; align-items: center; gap: 10px; font: var(--type-label); color: #33363c; }
.option .select { width: auto; min-height: 44px; padding: 6px 30px 6px 10px; }
.option-password .input { width: 200px; min-height: 44px; padding: 6px 12px; }
.editor-submit { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.size { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.editor > .field-error:not(.editor-error) { padding: 0 16px; }
.editor-notes { display: grid; gap: 6px; padding: 10px 16px 14px; font-size: 13.5px; color: #3a3e46; }
.editor-notes > p { animation: oa-enter var(--motion) var(--ease-out); }
.editor-notes .notice { margin: 4px 0; }
.editor-hint { color: var(--muted); }
@media (pointer: coarse) {
  /* 16px, so phones do not zoom in when the text box gets focus */
  .editor-text { font-size: 16px; }
  .editor-title { font-size: 17px; }
}
@media (max-width: 640px) {
  .editor-placeholder { min-height: 603px; }
  .editor-text { min-height: 280px; }
  .editor-options { width: 100%; }
  .option { flex: 1 1 140px; justify-content: space-between; }
  .option .select { flex: 1; max-width: 220px; }
  .option-password { flex-basis: 100%; }
  .option-password .input { width: 100%; }
  .editor-submit { width: 100%; justify-content: space-between; }
  .editor-submit .btn { flex: 1; max-width: 240px; }
}

/* Result */
.result { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 760px; margin-inline: auto; padding: 26px; scroll-margin-top: 84px; }
.result:focus { outline: none; }
@media (max-width: 520px) { .result { padding: 18px; } }
.link-row { display: flex; align-items: center; gap: 12px; }
.paste-link { flex: 1; min-width: 0; color: var(--ink-solid); font: 400 28px/1.15 var(--serif); letter-spacing: -.015em; overflow-wrap: anywhere; }
.paste-host { display: block; margin-bottom: 2px; font: 500 14px/1.3 var(--sans); letter-spacing: 0; color: var(--muted); }
.paste-link strong { font-weight: 560; }
.paste-secret { color: var(--faint); font-size: .7em; }
@media (hover: hover) { .paste-link:hover { color: var(--cobalt-ink); } }
.result-meta { margin-top: -6px; font-size: 14px; color: var(--muted); }
.edit-note { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius); background: var(--paper-warm); border: 1px solid #ece2cf; font-size: 14.5px; color: #3a3e46; }
.edit-note strong { color: var(--ink-solid); }
@media (max-width: 520px) { .link-row { flex-direction: column; align-items: stretch; } .paste-link { font-size: 24px; } }

/* Your pastes */
#mine:empty { display: none; }
.mine-list { list-style: none; padding: 0; margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.mine-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 12px 12px 16px; }
.mine-row + .mine-row { border-top: 1px solid var(--line); }
.mine-main { display: grid; gap: 2px; min-width: 0; }
.mine-title { color: var(--ink-solid); font: 600 15.5px/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-meta { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-actions { display: inline-flex; align-items: center; gap: 6px; }
.more { margin-top: 10px; }
@media (max-width: 560px) {
  .mine-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mine-actions .btn:not(.btn-icon) { flex: 1; }
}

/* Paste page */
.view-head { border-bottom: 1px solid var(--line); background: #faf6ee; }
.view-head .wrap { padding: 28px 0 22px; }
.view-title { font: 360 clamp(28px, 4vw, 42px)/1.12 var(--serif); letter-spacing: -.025em; overflow-wrap: anywhere; }
.view-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 14px; color: var(--muted); }
.view-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 18px; padding-bottom: 64px; }
.view-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 36px; }
.view-actions { gap: 6px; }
.view-toggles { gap: 16px; }
.view-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--muted); }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; }
.seg button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: var(--type-control); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out); }
.seg button[aria-pressed="true"] { background: var(--ink-solid); color: #fff; }
@media (pointer: coarse) { .seg button { position: relative; } .seg button::before { content: ""; position: absolute; inset: -6px 0; } }
.btn svg { flex: none; }
@media (max-width: 640px) {
  .view-bar { align-items: stretch; flex-direction: column; }
  .view-actions { flex-wrap: nowrap; }
  .view-actions > .btn { flex: 1; padding: 0 8px; }
  .view-actions > .btn svg { display: none; }
}
/* Paste pages fill the screen from the first paint, so the footer stays below and does not jump when the content arrives. */
html.app-route main { min-height: 100vh; min-height: 100dvh; }
.view-skel-title { width: min(420px, 70%); height: 40px; }
.view-skel-meta { width: min(300px, 60%); margin-top: 16px; }
.view-skel-bar { width: min(330px, 100%); height: 36px; }
.view-skel-code { display: grid; gap: 4px; padding: 18px 20px; }
.view-skel-code .skeleton-text:last-child { width: auto; }
.message-art { width: 180px; height: auto; margin-bottom: -6px; }
.unlock { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; width: min(460px, 100%); }
@media (max-width: 520px) { .unlock { grid-template-columns: minmax(0, 1fr); } }

/* Code with line numbers. Each line is a flex row; the number is a sticky element whose digits are CSS content, so they are never copied. */
.code-view { margin: 0; overflow: auto; max-height: none; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: 13.5px/1.6 var(--mono); color: #1f2329; tab-size: 4; }
.code-view code { display: block; min-width: max-content; padding: 12px 0; }
.code-view.wrapped code { min-width: 0; }
.code-view .ln { display: flex; min-height: 1.6em; }
.code-view .lnum { position: sticky; left: 0; flex: none; width: calc(var(--digits, 2) * 1ch + 30px); padding: 0 14px 0 8px; margin-right: 14px; border-right: 1px solid var(--line); background: #fbfaf7; color: #a3a7ae; text-align: right; text-decoration: none; -webkit-user-select: none; user-select: none; }
.code-view .lnum::before { content: attr(data-n); }
.code-view a.lnum { cursor: pointer; }
@media (hover: hover) { .code-view a.lnum:hover { color: var(--cobalt-ink); } }
.code-view .ln.marked { background: #fff4d1; }
.code-view .ln.marked .lnum { background: #fbe9b5; color: var(--ink-solid); }
.code-view .lc { white-space: pre; padding-right: 18px; }
.code-view.wrapped .lc { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) { .code-view { font-size: 12.5px; border-radius: 12px; } }
.ln { scroll-margin-top: 90px; }

/* highlight.js, in the kit's quiet colors */
.hljs-comment, .hljs-quote { color: #8a8e96; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag, .hljs-meta .hljs-keyword { color: #1f4597; }
.hljs-string, .hljs-regexp, .hljs-template-tag, .hljs-addition { color: #2f6a3f; }
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable.constant_, .hljs-link { color: #a8442c; }
.hljs-title, .hljs-title.function_, .hljs-section, .hljs-selector-id, .hljs-selector-class { color: #7a4e0e; }
.hljs-built_in, .hljs-type, .hljs-title.class_, .hljs-name { color: #6a3a8a; }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-template-variable, .hljs-variable { color: #8b5a14; }
.hljs-meta { color: #5d6169; }
.hljs-deletion { color: #a8442c; background: #f8e9e4; }
.hljs-addition { background: #e8f1ea; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-section { font-weight: 650; }

/* Rendered Markdown */
.md { max-width: none; padding: 28px 32px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; }
.md h1 { font: 380 34px/1.15 var(--serif); letter-spacing: -.025em; color: var(--ink-solid); }
.md pre { max-width: 100%; }
.md table { display: block; overflow-x: auto; }
.md hr { border: 0; border-top: 1px solid var(--line); }
.md-loading { display: grid; gap: 6px; }
@media (max-width: 640px) { .md { padding: 18px; font-size: 16.5px; } .md h1 { font-size: 28px; } }

/* Admin page */
.edit-head { border-bottom: 1px solid var(--line); background: #faf6ee; }
.edit-head-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px 0 24px; }
.edit-head-text { min-width: 0; }
.edit-title { margin-top: 10px; font: 360 clamp(28px, 4vw, 42px)/1.12 var(--serif); letter-spacing: -.025em; overflow-wrap: anywhere; }
.edit-link { margin-top: 6px; overflow-wrap: anywhere; }
.edit-head-actions { gap: 8px; }
.edit-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; padding-top: 28px; padding-bottom: 80px; }
.admin-fields { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 14px; }
.admin-text { min-height: 360px; font: 13.5px/1.6 var(--mono); white-space: pre; tab-size: 4; }
.admin-skel-text { height: 420px; }
.admin-side { display: grid; gap: 16px; }
.details { display: grid; gap: 12px; margin: 0; }
.details div { display: grid; gap: 2px; }
.details dt { font: var(--type-label); color: var(--muted); }
.details dd { margin: 0; font-size: 14.5px; }
.danger-zone { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; }
.danger-zone .btn-danger { justify-self: start; }
.edit-key { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.edit-key p { flex: 1 1 320px; }
@media (pointer: coarse) { .admin-text { font-size: 16px; } }
@media (max-width: 900px) {
  .edit-body { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  .edit-head-inner { padding: 22px 0 18px; }
  .edit-head-actions { width: 100%; }
  .edit-head-actions .btn { flex: 1; }
}
@media (max-width: 520px) { .admin-fields { grid-template-columns: minmax(0, 1fr); } .admin-text { min-height: 280px; } }

.toast-action { min-height: 32px; margin: -6px -8px -6px 12px; padding: 0 10px; border: 0; border-radius: 8px; background: #ffffff1f; color: #fff; font: var(--type-control); cursor: pointer; }
@media (hover: hover) { .toast-action:hover { background: #ffffff33; } }

/* Printing a paste prints only its title, details and text. */
@media print {
  .site-head, .site-foot, .view-bar, .view-foot, .notice, #bounded-widget-root, [class*="bounded-widget"] { display: none !important; }
  .view-head { background: none; }
  .view-head .wrap, .view-body { width: 100%; padding: 0; }
  .code-view { border: 0; overflow: visible; font-size: 11px; }
  .code-view code { min-width: 0; }
  .code-view .lc { white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; min-width: 0; }
  .code-view .lnum { position: static; background: none; }
  .md { border: 0; padding: 0; }
}

/* Landing sections */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 28px; padding: 0; counter-reset: step; }
.steps li { list-style: none; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%; background: var(--ink-solid); color: #fff; font: 650 15px var(--sans); }
.steps h3 { font: 600 18px/1.3 var(--sans); }
.steps p { margin-top: 8px; color: #4a4e56; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.api-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.api-grid .code { font-size: 12.5px; }
@media (max-width: 900px) { .api-grid { grid-template-columns: minmax(0, 1fr); } }
.more-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; list-style: none; padding: 0; margin-top: 22px; }
.more-apps a { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); }
.more-apps a:hover { border-color: var(--line-strong); box-shadow: var(--shadow); color: var(--ink); }
.more-apps strong { font: 400 22px/1.1 var(--serif); }
.more-apps span { color: var(--muted); font-size: 14px; }
.compare td:first-child { font-weight: 600; }
.compare { min-width: 760px; }
/* On phones the feature names stay put while the vendor columns scroll sideways. */
@media (max-width: 760px) {
  .compare { min-width: 620px; border-collapse: separate; border-spacing: 0; }
  .compare :is(th, td):first-child { position: sticky; left: 0; z-index: 1; width: 128px; background: #fff; box-shadow: inset -1px 0 0 var(--line); }
}