*, *::before, *::after { box-sizing: border-box; }

html:has(body.tools-page) { overflow-x: hidden; }
/* No overflow-x here - html:has(body.tools-page) above already clips it
   site-wide. Any non-visible `overflow` on body breaks position: sticky for
   descendants (e.g. the navbar) once scrolled past body's own box - see the
   .home-page fix in main.css for the full explanation. */
body.tools-page { width: 100%; max-width: 100vw; margin: 0; min-height: 100vh; box-shadow: none; }
.tools-page:has(.tools-nav__group:nth-child(1) a.is-active) { --accent-color: #4da3ff; --secondary-color: #3979e8; }
.tools-page:has(.tools-nav__group:nth-child(2) a.is-active) { --accent-color: #f59e42; --secondary-color: #df7626; }
.tools-page:has(.tools-nav__group:nth-child(3) a.is-active) { --accent-color: #31c48d; --secondary-color: #169b71; }
.tools-page:has(.tools-nav__group:nth-child(4) a.is-active) { --accent-color: #f05fa6; --secondary-color: #d9468d; }
.tools-page:has(.tools-nav__group:nth-child(5) a.is-active) { --accent-color: #a875ff; --secondary-color: #7c52e6; }
.tools-page:has(.tools-nav__group:nth-child(6) a.is-active) { --accent-color: #5865f2; --secondary-color: #4752c4; }
/* #site-navbar is display: contents (see navbar.css) and has no stacking
   context of its own to raise - target .navbar directly. */
.tools-page .navbar { z-index: 1001; }
.tools-page .site-shell { gap: 0; padding: var(--space-7) 0 var(--space-10); }
.tools-page .site-hero-row { padding-bottom: 0; }
.tools-page [data-tools-landing] { padding-top: var(--space-8); }
.tools-page [data-tools-landing] { view-transition-name: tools-launcher; }
.tools-page [data-tools-landing-copy][hidden] { display: none; }
.tools-launcher-card { gap: var(--space-9); }

.tools-search { --tools-search-height: 50px; position: relative; display: flex; align-items: center; width: 100%; max-width: 440px; height: var(--tools-search-height); margin: 0 auto; padding: 0 var(--space-6); border: 1px solid color-mix(in srgb, var(--secondary-color) 26%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--background-color) 74%, transparent); box-shadow: var(--shadow-sm); transition: border-color var(--transition-duration) var(--transition-easing), box-shadow var(--transition-duration) var(--transition-easing); }
.tools-search:focus-within { border-color: color-mix(in srgb, var(--accent-color) 45%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 14%, transparent); }
.tools-search i { flex: 0 0 auto; margin-right: var(--space-4); font-size: .95em; color: color-mix(in srgb, var(--text-color) 55%, transparent); }
.tools-search input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; color: var(--text-color); background: transparent; font: inherit; font-size: .92rem; font-weight: 650; }
.tools-search input:focus { outline: none; }
.tools-search input::-webkit-search-cancel-button { display: none; }
.tools-search__kbd { flex: 0 0 auto; padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--secondary-color) 28%, transparent); border-radius: var(--radius-sm); color: color-mix(in srgb, var(--text-color) 55%, transparent); font-size: .72rem; font-weight: 750; }
.tools-search:focus-within .tools-search__kbd { display: none; }

.tools-search__empty { margin: 0; color: color-mix(in srgb, var(--text-color) 58%, transparent); font-size: .84rem; font-weight: 650; text-align: center; }

.tools-nav-toggle { display: inline-flex; align-items: center; gap: var(--space-3); margin: var(--space-5) auto 0; padding: 8px 18px; border: 1px solid color-mix(in srgb, var(--secondary-color) 26%, transparent); border-radius: var(--radius-pill); color: color-mix(in srgb, var(--text-color) 80%, transparent); background: color-mix(in srgb, var(--primary-color) 7%, transparent); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: border-color var(--transition-duration) var(--transition-easing), background var(--transition-duration) var(--transition-easing), color var(--transition-duration) var(--transition-easing); }
.tools-nav-toggle[hidden] { display: none; }
.tools-nav-toggle i { font-size: 1em; transition: transform var(--transition-duration) var(--transition-easing); }
.tools-nav-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
html:not([data-hover-effects="off"]) .tools-nav-toggle:hover, .tools-nav-toggle:focus-visible { border-color: color-mix(in srgb, var(--accent-color) 28%, transparent); color: var(--text-color); background: color-mix(in srgb, var(--accent-color) 10%, transparent); }
.tools-nav-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-color) 55%, transparent); outline-offset: 2px; }

/* With a tool open, the launcher collapses to search + "All tools" toggle so
   the tool panel sits right under the navbar instead of a full page of links. */
[data-tools-landing].is-collapsed .tools-nav { display: none; }
[data-tools-landing].is-collapsed .tools-launcher-card { gap: 0; }
.tools-page [data-tools-landing].is-collapsed { padding-top: var(--space-5); }

.tools-page .tools-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; gap: var(--space-5); width: min(var(--site-layout-max), 100%); margin: var(--space-8) auto 0; padding-top: var(--space-8); border-top: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent); overflow: visible; scrollbar-width: none; }
.tools-page .tools-nav::-webkit-scrollbar { display: none; }
.tools-nav__group { min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--space-2); text-align: left; }
.tools-nav__label { flex: 0 0 100%; margin-bottom: var(--space-2); color: color-mix(in srgb, var(--accent-color) 75%, var(--text-color)); font-size: .68rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.tools-nav__new, .tool-new-label { display: inline-flex; flex: 0 0 auto; align-items: center; padding: .18rem .4rem; border: 1px solid color-mix(in srgb, var(--accent-color) 36%, transparent); border-radius: var(--radius-pill); color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 12%, transparent); font-size: .58em; font-weight: 900; letter-spacing: .06em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.tools-nav__new { margin-left: auto; overflow: visible !important; }
.tool-new-label { margin-left: .45rem; vertical-align: middle; }
.tools-page .tools-nav a { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--space-3); min-height: 34px; min-width: max-content; padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-pill); color: color-mix(in srgb, var(--text-color) 78%, transparent); background: color-mix(in srgb, var(--primary-color) 7%, transparent); font-size: .78rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform var(--transition-duration) var(--transition-easing), border-color var(--transition-duration) var(--transition-easing), background var(--transition-duration) var(--transition-easing), color var(--transition-duration) var(--transition-easing); }
.tools-page .tools-nav a i { flex: 0 0 auto; width: 1em; color: color-mix(in srgb, var(--accent-color) 78%, var(--text-color)); font-size: 1em; text-align: center; }
html:not([data-hover-effects="off"]) .tools-page .tools-nav a:hover,
.tools-page .tools-nav a:focus-visible { transform: translateY(var(--motion-hover-lift-sm)); border-color: color-mix(in srgb, var(--accent-color) 28%, transparent); color: var(--text-color); background: color-mix(in srgb, var(--accent-color) 10%, transparent); }
.tools-page .tools-nav a.is-active, .tools-page .tools-nav a[aria-current="page"] { border-color: color-mix(in srgb, var(--accent-color) 40%, transparent); color: var(--text-color); background: color-mix(in srgb, var(--accent-color) 16%, transparent); }
.tools-nav__group[hidden] { display: none; }
.tools-page .tools-nav a[hidden] { display: none; }
.tools-workspace { padding-top: var(--space-8); padding-bottom: 0; }
.tools-workspace:has(.tool-card:not([hidden])) { padding-top: var(--space-8); }
.tools-grid { width: 100%; max-width: var(--site-layout-max); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }

/* Border/background/shadow come from the shared glass surface in glass.css,
   so tool cards match the cards on Home and the Discord hub. */
.tool-card { min-width: 0; display: flex; flex-direction: column; gap: var(--space-7); padding: clamp(20px, 3vw, 30px); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--navbar-height, 72px) + var(--space-6)); animation: tool-card-in .32s var(--transition-easing); }
.tool-intro { overflow: hidden; border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent); border-radius: var(--radius-md); color: var(--text-color); background: color-mix(in srgb, var(--ap-page-base) 55%, transparent); }
.tool-intro__summary { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; color: var(--text-color); font-size: .85rem; font-weight: 750; cursor: pointer; list-style: none; }
.tool-intro__summary::-webkit-details-marker { display: none; }
.tool-intro__summary > i:first-child { color: var(--accent-color); }
.tool-intro__chevron { margin-left: auto; color: color-mix(in srgb, var(--text-color) 55%, transparent); font-size: .7rem; transition: transform var(--transition-duration); }
.tool-intro[open] .tool-intro__chevron { transform: rotate(180deg); }
.tool-intro__summary:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
.tool-intro__body { display: grid; gap: .85rem; padding: 0 1rem 1rem; border-top: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent); }
.tool-intro__description { margin: .9rem 0 0; color: var(--text-color); font-size: .9rem; line-height: 1.5; }
.tool-intro__example { display: grid; grid-template-columns: auto 1fr; gap: .3rem .6rem; align-items: baseline; color: var(--text-color); font-size: .84rem; line-height: 1.5; }
.tool-intro__example strong { color: var(--accent-color); }
.tool-intro__example > span { min-width: 0; overflow-wrap: anywhere; }
.tool-intro__try { grid-column: 1 / -1; margin-top: .25rem; }
.tool-intro__controls { grid-column: 1 / -1; display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.tool-card .tool-intro__scope { flex: 1 1 10rem; gap: .3rem; font-size: .75rem; font-weight: 650; }
.tool-card .tool-intro__scope select { width: 100%; min-height: 2.65rem; }
.tool-card .tool-intro__controls .tool-intro__try { align-self: end; min-height: 2.65rem; margin: 0; }
.tool-intro__status { grid-column: 1 / -1; margin: .25rem 0 0; font-size: .8rem; line-height: 1.45; }
.tool-intro__status:empty { display: none; }
.tool-card .tool-intro__try:disabled { cursor: wait; opacity: .6; transform: none; }
@media (max-width: 480px) {
  .tool-intro__controls { flex-direction: column; align-items: stretch; }
  .tool-card .tool-intro__scope { flex-basis: auto; }
  .tool-card .tool-intro__controls .tool-intro__try { align-self: stretch; }
}
.tool-card[hidden] { display: none; }
.tool-card.is-active { view-transition-name: active-tool-panel; }
.tool-card--wide { grid-column: 1 / -1; }
.tool-card header { display: flex; align-items: flex-start; gap: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid color-mix(in srgb, var(--secondary-color) 16%, transparent); }
/* Labeled pill rather than a bare icon so sharing reads as a feature. The
   .tool-card button base is dark/filled; this keeps it accent-tinted. */
.tool-card .tool-panel-share { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--accent-color) 38%, transparent); color: color-mix(in srgb, var(--accent-color) 80%, var(--text-color)); background: color-mix(in srgb, var(--accent-color) 12%, transparent); font-size: .8rem; white-space: nowrap; }
html:not([data-hover-effects="off"]) .tool-card .tool-panel-share:hover { opacity: 1; background: color-mix(in srgb, var(--accent-color) 20%, transparent); }
.tool-card .tool-panel-share[data-state="copied"] { border-color: color-mix(in srgb, #16a34a 45%, transparent); color: color-mix(in srgb, #16a34a 80%, var(--text-color)); background: color-mix(in srgb, #16a34a 14%, transparent); }
.tool-card .tool-panel-share[data-state="failed"] { border-color: color-mix(in srgb, #dc2626 45%, transparent); color: color-mix(in srgb, #dc2626 80%, var(--text-color)); background: color-mix(in srgb, #dc2626 12%, transparent); }
.tool-card .tool-panel-share.is-nudged { animation: tool-share-nudge 1.4s var(--transition-easing) 2; }
@keyframes tool-share-nudge {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-color) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .tool-card .tool-panel-share.is-nudged { animation: none; } }
.tool-shared-notice { display: flex; align-items: center; gap: .6rem; margin: calc(-1 * var(--space-3)) 0 0; padding: .6rem .9rem; border: 1px dashed color-mix(in srgb, var(--accent-color) 40%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-color) 7%, transparent); font-size: .82rem; line-height: 1.45; }
.tool-shared-notice > i { flex: 0 0 auto; color: var(--accent-color); }
.tool-card h2 { margin: 0 0 var(--space-2); font-size: clamp(1.2rem, 2vw, 1.55rem); }
.tool-card header p { margin: 0; opacity: .72; line-height: 1.5; }
.tool-icon { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 13%, transparent); font-size: 1.15rem; }

@keyframes tool-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tool-card { animation: none; } }
.tool-card form, .tool-card label { display: flex; flex-direction: column; gap: var(--space-3); }
.tool-card label { font-size: .84rem; font-weight: 750; }
.field-hint { font-weight: 500; opacity: .6; }
.tool-split, .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.tool-card input:not([type="checkbox"]):not([type="range"]), .tool-card textarea { width: 100%; border: 1px solid color-mix(in srgb, var(--secondary-color) 28%, transparent); border-radius: var(--radius-sm); padding: 11px 13px; color: var(--text-color); background: color-mix(in srgb, var(--background-color) 76%, transparent); font: inherit; }
.tool-card textarea { resize: vertical; line-height: 1.45; }
.tool-card input:focus, .tool-card textarea:focus, .tool-card select:focus { outline: 2px solid color-mix(in srgb, var(--accent-color) 55%, transparent); outline-offset: 2px; }
.tool-card button { align-self: flex-start; border: 0; border-radius: var(--radius-pill); padding: 10px 16px; color: var(--background-color); background: var(--text-color); font: inherit; font-size: .86rem; font-weight: 800; cursor: pointer; transition: transform var(--transition-duration), opacity var(--transition-duration); }
html:not([data-hover-effects="off"]) .tool-card button:hover { transform: translateY(var(--motion-hover-lift-sm)); opacity: .88; }
.tool-card button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-color) 65%, transparent); outline-offset: 2px; }
.tool-card button:active { transform: translateY(0); }
.tool-card input:disabled, .tool-card textarea:disabled, .tool-card select:disabled, .tool-card button:disabled { opacity: .5; cursor: not-allowed; }
.tool-output { display: block; min-height: 48px; padding: 13px 15px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-color) 10%, transparent); font-family: var(--codeblock-font-family); overflow-wrap: anywhere; }
.tool-output:empty { display: none; }
.tool-output--big { display: grid; place-items: center; min-height: 76px; font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight: 850; text-align: center; }
.dice-result:empty { display: none; }
.dice-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.dice-die { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary-color) 12%, transparent); font-size: 1.1rem; font-weight: 850; }
.dice-total { margin: var(--space-5) 0 0; font-size: .92rem; }
.dice-total strong { font-size: 1.3rem; }
.tool-output--stack span { display: block; line-height: 1.65; }
.timezone-layout { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr); align-items: stretch; gap: var(--space-7); }
.timezone-controls { display: flex; flex-direction: column; justify-content: center; gap: var(--space-5); }
.timezone-controls button i { margin-right: var(--space-2); }
.tool-message { min-height: 1.2em; margin: 0; color: color-mix(in srgb, var(--accent-color) 78%, var(--text-color)); font-size: .8rem; font-weight: 700; }
.timezone-clock { display: flex; flex-direction: column; justify-content: center; min-height: 132px; padding: clamp(18px, 3vw, 28px); border-radius: var(--radius-lg); text-align: center; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 68%), color-mix(in srgb, var(--primary-color) 10%, transparent); }
.timezone-clock__time { font: 850 clamp(2rem, 6vw, 3.6rem)/1 var(--site-font); letter-spacing: -.04em; }
.timezone-clock__date { margin-top: var(--space-4); font-weight: 700; }
.timezone-clock__meta { margin-top: var(--space-2); font: .8rem var(--codeblock-font-family); opacity: .68; }
.timezone-clock.is-invalid .timezone-clock__time { font-size: 1rem; letter-spacing: 0; }
.timezone-watchlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.timezone-watchlist:empty { display: none; }
.timezone-watch { position: relative; min-width: 0; padding: var(--space-7); border: 1px solid color-mix(in srgb, var(--secondary-color) 20%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--primary-color) 8%, transparent); }
.timezone-watch__zone { display: block; padding-right: 30px; font: .76rem var(--codeblock-font-family); opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timezone-watch__time { display: block; margin-top: var(--space-3); font-size: 1.55rem; font-weight: 850; }
.timezone-watch__date { display: block; margin-top: var(--space-2); font-size: .78rem; opacity: .72; }
.tool-card .timezone-watch__remove { position: absolute; top: var(--space-4); right: var(--space-4); padding: 7px 9px; color: var(--text-color); background: transparent; }
.tournament-output { display: block; min-height: 0; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--primary-color) 10%, transparent); counter-reset: match; }
.tournament-output:empty { display: none; }
.tournament-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.tool-card select { width: 100%; border: 1px solid color-mix(in srgb, var(--secondary-color) 28%, transparent); border-radius: var(--radius-sm); padding: 11px 13px; color: var(--text-color); background: color-mix(in srgb, var(--background-color) 76%, transparent); font: inherit; }
.segmented-control { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; width: fit-content; padding: 4px; border: 1px solid color-mix(in srgb, var(--secondary-color) 24%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--background-color) 72%, transparent); }
.tool-card .segmented-control button { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; margin: 0; border-radius: var(--radius-pill); padding: 8px 16px; line-height: 1; font-weight: 700; color: color-mix(in srgb, var(--text-color) 78%, transparent); background: transparent; }
.field-row > .segmented-control, .tournament-settings > .segmented-control { align-self: end; }
.tool-card .segmented-control button[aria-pressed="true"] { color: var(--background-color); background: var(--text-color); }

.tool-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-5); border-bottom: 1px solid color-mix(in srgb, var(--secondary-color) 16%, transparent); }
.tool-card .tool-tabs button { margin: 0; border-radius: var(--radius-pill); padding: 8px 14px; font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--text-color) 70%, transparent); background: color-mix(in srgb, var(--primary-color) 7%, transparent); }
.tool-card .tool-tabs button i { margin-right: var(--space-2); font-size: .95em; }
html:not([data-hover-effects="off"]) .tool-card .tool-tabs button:hover { color: var(--text-color); background: color-mix(in srgb, var(--accent-color) 10%, transparent); }
.tool-card .tool-tabs button[aria-pressed="true"] { color: var(--background-color); background: var(--accent-color); }
.tool-card [data-math-section], .tool-card [data-random-game-section] { display: flex; flex-direction: column; gap: var(--space-6); }
.tool-card [data-math-section][hidden], .tool-card [data-random-game-section][hidden] { display: none; }
.tournament-match { position: relative; margin: 0; padding: var(--space-4) var(--space-7) var(--space-4) 48px; line-height: 1.5; counter-increment: match; }
.tournament-match::before { content: counter(match) "."; position: absolute; left: var(--space-7); font-weight: 850; color: var(--accent-color); }
.tournament-match + .tournament-match { border-top: 1px solid color-mix(in srgb, var(--secondary-color) 13%, transparent); }
.tournament-elimination { margin: 0; padding: 0 var(--space-7) var(--space-4) 48px; font-size: .82rem; font-weight: 700; opacity: .7; }
.tournament-elimination::before { content: "↳ "; }
.tournament-champion { margin: 0; padding: var(--space-6) var(--space-7); border-top: 1px solid color-mix(in srgb, var(--accent-color) 24%, transparent); font-size: 1.05rem; font-weight: 900; background: color-mix(in srgb, var(--accent-color) 9%, transparent); }
.tournament-champion i { margin-right: var(--space-3); color: var(--accent-color); }
.tournament-manual { padding: var(--space-7); }
.tournament-manual__label { margin: 0 0 var(--space-5); text-align: center; font-weight: 800; }
.tournament-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5); }
.tool-card .tournament-side { width: 100%; min-height: 62px; border-radius: var(--radius-md); color: var(--text-color); background: color-mix(in srgb, var(--accent-color) 12%, transparent); }
.tournament-side strong { display: block; font-size: 1.1rem; }
.tournament-side span { display: block; margin-top: 3px; font-size: .75rem; opacity: .7; }
.tournament-versus { font-size: .75rem; font-weight: 900; opacity: .55; }
.copy-output { display: flex; align-items: center; gap: var(--space-4); min-width: 0; padding: 12px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-color) 10%, transparent); }
.copy-output output { min-width: 0; flex: 1; font: .88rem var(--codeblock-font-family); overflow-wrap: anywhere; }
.tool-card .icon-button { flex: 0 0 auto; padding: 8px 10px; color: var(--text-color); background: transparent; }
.tool-card .tool-result-share { align-self: flex-end; margin-top: calc(-1 * var(--space-5)); }
.nl-help { margin-top: calc(-1 * var(--space-2)); border: 1px solid color-mix(in srgb, var(--secondary-color) 20%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-color) 6%, transparent); }
.nl-help summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); color: color-mix(in srgb, var(--accent-color) 80%, var(--text-color)); font-size: .8rem; font-weight: 750; cursor: pointer; list-style: none; }
.nl-help summary::-webkit-details-marker { display: none; }
.nl-help summary::before { content: "\f059"; font: var(--fa-font-solid); font-size: .85em; opacity: .85; }
.nl-help[open] summary { border-bottom: 1px solid color-mix(in srgb, var(--secondary-color) 16%, transparent); }
.nl-help ul { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-5) var(--space-6); list-style: none; font-size: .82rem; line-height: 1.55; opacity: .88; }
.nl-help li strong { color: var(--text-color); }
.nl-help li em { font-style: normal; padding: 1px 6px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary-color) 10%, transparent); font-family: var(--codeblock-font-family); font-size: .92em; }

.url-parts-editor { display: grid; gap: var(--space-5); }
.url-parts-editor:empty { display: none; }
.url-parts-editor__section { border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-color) 7%, transparent); }
.url-parts-editor__section summary { padding: var(--space-4); font-size: .84rem; font-weight: 850; cursor: pointer; }
.url-parts-editor__grid, .url-parts-editor__query-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.url-parts-editor__grid, .url-parts-editor__group { padding: 0 var(--space-4) var(--space-4); }
.url-parts-editor__group { display: grid; gap: var(--space-3); }
.url-parts-editor__group .field-hint { margin: 0; }
.tool-card .url-parts-editor button { justify-self: start; margin-top: var(--space-2); }
.check-label { flex-direction: row !important; align-items: center; gap: var(--space-3) !important; cursor: pointer; }
.tool-card input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; appearance: none; border: 1px solid color-mix(in srgb, var(--secondary-color) 40%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--background-color) 76%, transparent); cursor: pointer; display: grid; place-items: center; transition: border-color var(--transition-duration) var(--transition-easing), background var(--transition-duration) var(--transition-easing); }
.tool-card input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); transform: scale(0); background: var(--background-color); transition: transform var(--transition-duration) var(--transition-easing); }
.tool-card input[type="checkbox"]:checked { border-color: transparent; background: var(--accent-color); }
.tool-card input[type="checkbox"]:checked::before { transform: scale(1); }
.tool-card input[type="checkbox"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-color) 55%, transparent); outline-offset: 2px; }
.regex-flags-row .check-label { padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--secondary-color) 24%, transparent); border-radius: var(--radius-pill); font-size: .8rem; font-weight: 700; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.stats-row span { padding: 13px; border-radius: var(--radius-md); text-align: center; background: color-mix(in srgb, var(--primary-color) 10%, transparent); font-size: .8rem; }
.stats-row strong { display: block; margin-bottom: 3px; font-size: 1.15rem; }

.tool-output--pre { white-space: pre-wrap; font-size: .82rem; }
.tool-output.is-invalid { color: color-mix(in srgb, #e5484d 82%, var(--text-color)); }
.social-preview { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-5); min-width: 0; }
.social-preview__card, .social-preview__code { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--ap-panel-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent-color) 7%, var(--ap-page-base)); }
.social-preview__image { aspect-ratio: 1.91 / 1; overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 16%, transparent); background: color-mix(in srgb, var(--primary-color) 10%, transparent); }
.social-preview__image[hidden] { display: none; }
.social-preview__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.social-preview__image.has-error { display: none; }
.social-preview__content { display: grid; gap: .4rem; padding: var(--space-6); font-family: var(--font-family); }
.social-preview__site { overflow: hidden; color: color-mix(in srgb, var(--text-color) 62%, transparent); font-size: .72rem; font-weight: 800; letter-spacing: .055em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.social-preview__content strong { overflow-wrap: anywhere; font-size: clamp(1.05rem, 2.5vw, 1.35rem); line-height: 1.25; }
.social-preview__content p { display: -webkit-box; margin: 0; overflow: hidden; color: color-mix(in srgb, var(--text-color) 72%, transparent); font-size: .88rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.social-preview__code { align-self: stretch; }
.social-preview__code-header { display: flex; align-items: center; justify-content: space-between; min-height: 3.1rem; padding: .45rem .55rem .45rem var(--space-5); border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 14%, transparent); font-family: var(--font-family); font-size: .75rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.tool-card .social-preview__code-header button { margin: 0; }
.social-preview__code pre { max-width: 100%; margin: 0; padding: var(--space-5); overflow: auto; font-size: .76rem; line-height: 1.55; white-space: pre; }
.social-preview__code code { font: inherit; }
.color-swatch-row { display: flex; align-items: center; gap: var(--space-5); }
.color-swatch-row input[type="color"] { flex: 0 0 46px; width: 46px; height: 46px; padding: 0; border: 1px solid color-mix(in srgb, var(--secondary-color) 28%, transparent); border-radius: var(--radius-sm); background: none; cursor: pointer; }
.color-preview { flex: 1; min-height: 46px; border-radius: var(--radius-sm); border: 1px solid color-mix(in srgb, var(--secondary-color) 28%, transparent); }
.color-fields, .color-info { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.color-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.color-stat { padding: 12px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-color) 10%, transparent); text-align: center; }
.color-stat span { display: block; margin-bottom: 3px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .6; }
.color-stat strong { font-size: .88rem; font-family: var(--codeblock-font-family); }
.color-contrast-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.color-contrast { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 62px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); }
.color-contrast span { font-size: .74rem; font-weight: 700; opacity: .85; }
.color-contrast strong { font-size: .9rem; }
.color-section { display: flex; flex-direction: column; gap: var(--space-4); }
.color-ramp { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.color-swatch { flex: 1 1 90px; min-width: 90px; min-height: 52px; border: 1px solid color-mix(in srgb, white 14%, transparent); border-radius: var(--radius-sm); cursor: pointer; transition: transform var(--transition-duration) var(--transition-easing); }
html:not([data-hover-effects="off"]) .color-swatch:hover,
.color-swatch:focus-visible { transform: translateY(var(--motion-hover-lift)); }
.color-swatch span { display: block; padding: var(--space-2) var(--space-3); border-radius: 0 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px); background: color-mix(in srgb, black 55%, transparent); color: #fff; font-size: .68rem; font-weight: 750; font-family: var(--codeblock-font-family); text-align: left; opacity: 0; transition: opacity var(--transition-duration) var(--transition-easing); }
html:not([data-hover-effects="off"]) .color-swatch:hover span, .color-swatch:focus-visible span { opacity: 1; }
.color-gradients { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.color-gradient { min-height: 68px; padding: 0; border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: flex-end; }
.color-gradient span { width: 100%; padding: var(--space-3) var(--space-4); border-radius: 0 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px); background: color-mix(in srgb, black 45%, transparent); color: #fff; font-size: .78rem; font-weight: 750; text-align: left; }

.oembed-frame { display: block; width: 100%; min-height: 180px; margin-top: var(--space-4); border: 1px solid color-mix(in srgb, var(--secondary-color) 22%, transparent); border-radius: var(--radius-md); background: #fff; }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip-row button { border-radius: var(--radius-pill); padding: 8px 14px; font-size: .78rem; }
.hash-list, .hash-rows { display: flex; flex-direction: column; gap: var(--space-4); }
.hash-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: var(--space-4); row-gap: 4px; min-width: 0; padding: 12px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-color) 10%, transparent); }
.hash-row__label { grid-column: 1 / -1; grid-row: 1; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .62; }
.hash-row__value { grid-column: 1; grid-row: 2; min-width: 0; overflow-wrap: anywhere; font: .84rem var(--codeblock-font-family); }
.hash-row .icon-button { grid-column: 2; grid-row: 2; }
.qr-canvas { display: block; width: 100%; max-width: 264px; height: auto; margin: 0 auto; border-radius: var(--radius-md); background: #fff; }
.diff-output { display: flex; flex-direction: column; gap: 2px; font-family: var(--codeblock-font-family); font-size: .82rem; }
.diff-line { padding: 4px 10px; border-radius: var(--radius-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.diff-line--add { background: color-mix(in srgb, #2dd4bf 22%, transparent); }
.diff-line--remove { background: color-mix(in srgb, #e5484d 22%, transparent); text-decoration: line-through; opacity: .8; }
.diff-line--same { opacity: .7; }
.markdown-preview { display: block; min-height: 220px; }
.markdown-preview :first-child { margin-top: 0; }
.markdown-preview pre { padding: var(--space-4); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--primary-color) 14%, transparent); overflow-x: auto; }
.markdown-preview code { padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb, var(--primary-color) 16%, transparent); font-family: var(--codeblock-font-family); }
.markdown-preview blockquote { margin: 0; padding-left: var(--space-5); border-left: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent); opacity: .82; }
/* Discord's own font (gg sans) is proprietary, so we name it first for anyone who has it
   installed and otherwise fall back to Discord's exact fallback chain. */
.markdown-preview--discord { --discord-font: "gg sans", "ABC Ginto Normal", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #dbdee1; background: #313338; font-family: var(--discord-font); }
.markdown-preview--discord a { color: #00a8fc; }
.markdown-preview--discord h1, .markdown-preview--discord h2, .markdown-preview--discord h3, .markdown-preview--discord p { margin: 0 0 .35rem; }
.markdown-preview--discord .discord-subtext { color: #949ba4; font-size: .82rem; }
.markdown-preview--discord .discord-token { display: inline-block; padding: 0 4px; border-radius: 3px; color: #dee0fc; background: rgba(88, 101, 242, .3); font-weight: 600; }
.markdown-preview--discord .discord-token--channel, .markdown-preview--discord .discord-token--command { color: #c9cdfb; }
.markdown-preview--discord .discord-token--timestamp, .markdown-preview--discord .discord-token--guild-nav { color: #dbdee1; background: rgba(78, 80, 88, .48); }
.markdown-preview--discord .discord-custom-emoji { width: 1.375em; height: 1.375em; vertical-align: -.35em; object-fit: contain; }
.markdown-preview--discord .discord-inline-code { padding: 2px 4px; border-radius: 3px; color: #dbdee1; background: #1e1f22; font-family: var(--codeblock-font-family); font-size: .86em; }
.markdown-preview--discord .discord-code-block { margin: .45rem 0; padding: .65rem .8rem; border-radius: 4px; color: #dbdee1; background: #2b2d31; font-family: var(--codeblock-font-family); font-size: .86rem; line-height: 1.5; overflow-x: auto; }
.markdown-preview--discord .discord-code-block code { display: block; padding: 0; background: transparent; white-space: pre; }
.markdown-preview--discord .discord-code-language { margin-bottom: .35rem; color: #f2c95c; font-family: var(--discord-font); font-size: .78rem; font-weight: 800; text-transform: capitalize; }
/* highlight.js theme - Discord block uses the GitHub-dark palette to match its dark chrome. */
.markdown-preview--discord .discord-code-block .hljs-comment,
.markdown-preview--discord .discord-code-block .hljs-quote { color: #8b949e; font-style: italic; }
.markdown-preview--discord .discord-code-block .hljs-keyword,
.markdown-preview--discord .discord-code-block .hljs-selector-tag,
.markdown-preview--discord .discord-code-block .hljs-literal,
.markdown-preview--discord .discord-code-block .hljs-doctag,
.markdown-preview--discord .discord-code-block .hljs-name { color: #ff7b72; }
.markdown-preview--discord .discord-code-block .hljs-string,
.markdown-preview--discord .discord-code-block .hljs-regexp,
.markdown-preview--discord .discord-code-block .hljs-meta .hljs-string { color: #a5d6ff; }
.markdown-preview--discord .discord-code-block .hljs-number,
.markdown-preview--discord .discord-code-block .hljs-variable,
.markdown-preview--discord .discord-code-block .hljs-template-variable,
.markdown-preview--discord .discord-code-block .hljs-attr,
.markdown-preview--discord .discord-code-block .hljs-attribute,
.markdown-preview--discord .discord-code-block .hljs-symbol,
.markdown-preview--discord .discord-code-block .hljs-bullet { color: #79c0ff; }
.markdown-preview--discord .discord-code-block .hljs-title,
.markdown-preview--discord .discord-code-block .hljs-title.function_,
.markdown-preview--discord .discord-code-block .hljs-section { color: #d2a8ff; }
.markdown-preview--discord .discord-code-block .hljs-built_in,
.markdown-preview--discord .discord-code-block .hljs-type,
.markdown-preview--discord .discord-code-block .hljs-class .hljs-title { color: #ffa657; }
.markdown-preview--discord .discord-code-block .hljs-tag { color: #7ee787; }
.markdown-preview--discord .discord-code-block .hljs-meta { color: #8b949e; }
.markdown-preview--discord .discord-code-block .hljs-emphasis { font-style: italic; }
.markdown-preview--discord .discord-code-block .hljs-strong { font-weight: 700; }

/* Standard preview code uses theme variables so it reads in both light and dark modes. */
.markdown-preview pre code { padding: 0; background: transparent; white-space: pre; }
.markdown-preview .hljs-comment, .markdown-preview .hljs-quote { color: color-mix(in srgb, var(--text-color) 55%, transparent); font-style: italic; }
.markdown-preview .hljs-keyword, .markdown-preview .hljs-selector-tag, .markdown-preview .hljs-literal, .markdown-preview .hljs-doctag, .markdown-preview .hljs-name { color: #d73a49; }
.markdown-preview .hljs-string, .markdown-preview .hljs-regexp, .markdown-preview .hljs-meta .hljs-string { color: #22863a; }
.markdown-preview .hljs-number, .markdown-preview .hljs-variable, .markdown-preview .hljs-template-variable, .markdown-preview .hljs-attr, .markdown-preview .hljs-attribute, .markdown-preview .hljs-symbol, .markdown-preview .hljs-bullet { color: #005cc5; }
.markdown-preview .hljs-title, .markdown-preview .hljs-title.function_, .markdown-preview .hljs-section { color: #6f42c1; }
.markdown-preview .hljs-built_in, .markdown-preview .hljs-type, .markdown-preview .hljs-class .hljs-title { color: #e36209; }
.markdown-preview .hljs-tag { color: #22863a; }
.markdown-preview .hljs-emphasis { font-style: italic; }
.markdown-preview .hljs-strong { font-weight: 700; }
html[data-theme-mode="dark"] .markdown-preview .hljs-keyword, html[data-theme-mode="dark"] .markdown-preview .hljs-selector-tag, html[data-theme-mode="dark"] .markdown-preview .hljs-literal, html[data-theme-mode="dark"] .markdown-preview .hljs-doctag, html[data-theme-mode="dark"] .markdown-preview .hljs-name { color: #ff7b72; }
html[data-theme-mode="dark"] .markdown-preview .hljs-string, html[data-theme-mode="dark"] .markdown-preview .hljs-regexp, html[data-theme-mode="dark"] .markdown-preview .hljs-meta .hljs-string { color: #a5d6ff; }
html[data-theme-mode="dark"] .markdown-preview .hljs-number, html[data-theme-mode="dark"] .markdown-preview .hljs-variable, html[data-theme-mode="dark"] .markdown-preview .hljs-template-variable, html[data-theme-mode="dark"] .markdown-preview .hljs-attr, html[data-theme-mode="dark"] .markdown-preview .hljs-attribute, html[data-theme-mode="dark"] .markdown-preview .hljs-symbol, html[data-theme-mode="dark"] .markdown-preview .hljs-bullet { color: #79c0ff; }
html[data-theme-mode="dark"] .markdown-preview .hljs-title, html[data-theme-mode="dark"] .markdown-preview .hljs-title.function_, html[data-theme-mode="dark"] .markdown-preview .hljs-section { color: #d2a8ff; }
html[data-theme-mode="dark"] .markdown-preview .hljs-built_in, html[data-theme-mode="dark"] .markdown-preview .hljs-type, html[data-theme-mode="dark"] .markdown-preview .hljs-class .hljs-title { color: #ffa657; }
html[data-theme-mode="dark"] .markdown-preview .hljs-tag { color: #7ee787; }
.regex-flags-row { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.regex-highlight { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--codeblock-font-family); }
.regex-highlight mark { border-radius: 3px; padding: 0 2px; color: var(--text-color); background: color-mix(in srgb, var(--accent-color) 40%, transparent); }
.sql-row { display: grid; grid-template-columns: 70px 1fr 130px 1fr 40px; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.sql-row select, .sql-row input { margin: 0; }
.sql-joiner { font-size: .78rem; }
.sql-disclaimer { display: block; margin-top: var(--space-2); font-size: .74rem; font-weight: 700; opacity: .65; }

@media (max-width: 1180px) { .tools-page .tools-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tools-page [data-tools-landing] { padding-top: var(--space-5); } .tools-page .tools-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tools-page .tools-nav a { min-height: 32px; } }
@media (max-width: 400px) { .tools-page .tools-nav { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .tools-grid, .tool-split, .timezone-layout, .tournament-settings { grid-template-columns: 1fr; }
  .tool-card--wide { grid-column: auto; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .sql-row { grid-template-columns: 1fr; }
  .tools-workspace { padding-top: var(--space-6); }
  .tools-grid { gap: var(--space-5); }
  .tool-card { gap: var(--space-5); padding: var(--space-6); }
  .tool-card header { gap: var(--space-4); padding-bottom: var(--space-4); }
  .tool-icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 1rem; }
  .timezone-watch { padding: var(--space-5); }
}
@media (max-width: 420px) { .field-row { grid-template-columns: 1fr; } }

/* ── Tools workspace redesign ─────────────────────────────────────────── */
.tools-page .site-shell {
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-top: 0;
}

.tools-launcher-card {
  position: relative;
  isolation: isolate;
  gap: 0;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
  border-radius: var(--radius-3xl);
  background:
    radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--secondary-color) 24%, transparent), transparent 30%),
    radial-gradient(circle at 4% 104%, color-mix(in srgb, var(--accent-color) 20%, transparent), transparent 38%),
    var(--site-surface-background);
}

.tools-launcher-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--text-color) 8%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent 20%, black);
  opacity: .3;
}

/* Nothing here is load-bearing - it's decoration on a hero. Stopping it when
   the tab is backgrounded or motion is unwanted keeps idle CPU at zero. */

.tools-command-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100%, 760px);
  margin-inline: auto;
  padding: .55rem;
  border: 1px solid var(--ap-panel-border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--ap-page-base) 44%, transparent);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--primary-color) 10%, transparent), inset 0 1px rgba(255,255,255,.12);
  backdrop-filter: blur(22px) saturate(1.35);
}

.tools-command-bar .tools-search {
  flex: 1;
  max-width: none;
  height: 3.25rem;
  margin: 0;
  padding: 0 .75rem 0 .35rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tools-search__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.45rem;
  height: 2.45rem;
  margin-right: .5rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--accent-color), var(--secondary-color));
}
.tools-search__icon i { margin: 0; color: inherit; }
.tools-command-bar .tools-search input { background: transparent; box-shadow: none; }
.tools-command-bar__hint { flex: none; padding-right: .75rem; font-size: .68rem; font-weight: 700; opacity: .5; }
.tools-command-bar__hint i { margin-right: .3rem; }

/* Category cards make the collection scannable instead of one long chip wall. */

.tools-page .tools-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .8rem;
  margin-top: .8rem;
  padding-top: 0;
  border-top: 0;
}

.tools-nav__group {
  --group-color: var(--accent-color);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: .35rem;
  padding: .8rem;
  border: 1px solid color-mix(in srgb, var(--group-color) 14%, var(--ap-panel-border));
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, color-mix(in srgb, var(--group-color) 8%, transparent), transparent 52%);
}
.tools-nav__group:nth-child(1) { --group-color: #4da3ff; }
.tools-nav__group:nth-child(2) { --group-color: #f59e42; }
.tools-nav__group:nth-child(3) { --group-color: #31c48d; }
.tools-nav__group:nth-child(4) { --group-color: #f05fa6; }
.tools-nav__group:nth-child(5) { --group-color: #a875ff; }
.tools-nav__group { animation: tools-group-in .45s var(--transition-easing) backwards; }
.tools-nav__group:nth-child(2) { animation-delay: .05s; }
.tools-nav__group:nth-child(3) { animation-delay: .1s; }
.tools-nav__group:nth-child(4) { animation-delay: .15s; }
.tools-nav__group:nth-child(5) { animation-delay: .2s; }

.tools-nav__label {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .35rem;
  padding: .2rem .3rem .55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--group-color) 14%, transparent);
  color: var(--group-color);
  font-size: .68rem;
}
.tools-nav__label::before { content: ""; width: .48rem; height: .48rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, var(--group-color) 10%, transparent); }

.tools-page .tools-nav a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  justify-content: stretch;
  min-width: 0;
  min-height: 2.65rem;
  padding: .35rem .5rem;
  border-radius: .9rem;
  background: transparent;
  white-space: normal;
}
.tools-page .tools-nav a i {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .7rem;
  color: var(--group-color);
  background: color-mix(in srgb, var(--group-color) 10%, transparent);
  transition: transform .24s var(--transition-easing), background .24s var(--transition-easing), box-shadow .24s var(--transition-easing);
}
.tools-page .tools-nav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:not([data-hover-effects="off"]) .tools-page .tools-nav a:hover,
.tools-page .tools-nav a:focus-visible {
  border-color: color-mix(in srgb, var(--group-color) 20%, transparent);
  background: color-mix(in srgb, var(--group-color) 8%, transparent);
  transform: translateX(2px);
}
html:not([data-hover-effects="off"]) .tools-page .tools-nav a:hover i,
.tools-page .tools-nav a:focus-visible i {
  transform: rotate(-5deg) scale(1.08);
  background: color-mix(in srgb, var(--group-color) 16%, transparent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--group-color) 14%, transparent);
}
.tools-page .tools-nav a.is-active,
.tools-page .tools-nav a[aria-current="page"] {
  border-color: color-mix(in srgb, var(--group-color) 32%, transparent);
  background: color-mix(in srgb, var(--group-color) 13%, transparent);
}

/* Open tools feel like focused mini-apps. */
.tool-card {
  position: relative;
  gap: clamp(1rem, 2.5vw, 1.6rem);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent-color) 11%, transparent), transparent 30%),
    var(--site-surface-background);
}
.tools-page .tool-card.is-active {
  border: 1px solid color-mix(in srgb, var(--accent-color) 34%, var(--ap-panel-border));
  background:
    radial-gradient(circle at 94% 0, color-mix(in srgb, var(--accent-color) 30%, transparent), transparent 34%),
    radial-gradient(circle at 5% 105%, color-mix(in srgb, var(--secondary-color) 17%, transparent), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent 48%),
    var(--ap-panel);
  box-shadow:
    0 30px 72px color-mix(in srgb, var(--accent-color) 16%, transparent),
    0 12px 30px color-mix(in srgb, var(--secondary-color) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 16%, transparent);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
}
.tools-page .tool-card.is-active::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 14% auto;
  height: 3px;
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--accent-color), var(--secondary-color), transparent);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--accent-color) 35%, transparent);
}
.tool-card::after { content: ""; position: absolute; width: 12rem; height: 12rem; right: -6rem; top: -6rem; border: 2.4rem solid color-mix(in srgb, var(--accent-color) 7%, transparent); border-radius: 50%; pointer-events: none; }
.tool-card > * { position: relative; z-index: 1; }
.tool-card header { align-items: center; padding-bottom: clamp(1rem, 2.5vw, 1.5rem); }
.tool-card.is-active header {
  margin: calc(-1 * clamp(1.25rem, 3.5vw, 2.5rem)) calc(-1 * clamp(1.25rem, 3.5vw, 2.5rem)) 0;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 65%);
}
.tool-icon { flex-basis: 3.4rem; width: 3.4rem; height: 3.4rem; border-radius: 1.1rem; color: #fff; background: linear-gradient(145deg, var(--accent-color), var(--secondary-color)); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent-color) 25%, transparent); }
.tool-card h2 { font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.025em; }
.tool-card input:not([type="checkbox"]):not([type="range"]),
.tool-card textarea,
.tool-card select { border-radius: var(--radius-md); background: color-mix(in srgb, var(--ap-page-base) 46%, transparent); }
.tool-card button:not(.icon-button) { min-height: 2.65rem; padding-inline: 1.15rem; background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 72%, var(--secondary-color))); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 20%, transparent); }
.tool-card > .segmented-control[aria-label="Mode"] { display: flex; width: 100%; max-width: 100%; box-sizing: border-box; padding: 6px; border-radius: var(--radius-lg); overflow: hidden; }
.tool-card > .segmented-control[aria-label="Mode"] button:not(.icon-button) { min-height: 2.5rem; padding-inline: 1rem; color: color-mix(in srgb, var(--text-color) 78%, transparent); background: transparent; box-shadow: none; }
.tool-card > .segmented-control[aria-label="Mode"] button[aria-pressed="true"] { color: var(--background-color); background: var(--text-color); }
.tool-card :is(.emoji-view-bar, .emoji-content-filter) .segmented-control { max-width: 100%; box-sizing: border-box; overflow: hidden; }
.tool-card :is(.emoji-view-bar, .emoji-content-filter) .segmented-control button:not(.icon-button) { min-height: 2.35rem; color: color-mix(in srgb, var(--text-color) 78%, transparent); background: transparent; box-shadow: none; }
.tool-card :is(.emoji-view-bar, .emoji-content-filter) .segmented-control button[aria-pressed="true"] { color: var(--background-color); background: var(--text-color); }
.tool-output { border: 1px solid color-mix(in srgb, var(--accent-color) 12%, var(--ap-panel-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent-color) 7%, transparent); }

/* Discord chat renderer */
.discord-chat-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.discord-chat-toolbar__quiet { border: 1px solid color-mix(in srgb, var(--text-color) 16%, transparent); border-radius: var(--radius-md); padding: .65rem .85rem; color: var(--text-color); background: color-mix(in srgb, var(--text-color) 6%, transparent); font: inherit; font-weight: 700; cursor: pointer; }
.tool-card .discord-chat-toolbar__quiet { min-height: 0; box-shadow: none; }
.discord-chat-toolbar__upload { display: inline-flex; align-items: center; }
.discord-chat-toolbar__upload input { width: 0; height: 0; opacity: 0; position: absolute; }
.discord-chat-layout { display: grid; grid-template-columns: minmax(19rem, .85fr) minmax(0, 1.35fr); gap: 1.25rem; align-items: start; }
.discord-chat-editor { min-width: 0; padding: 1rem; border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--ap-page-base) 52%, transparent); }
.discord-chat-tabs { display: flex; gap: .35rem; margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent); }
.discord-chat-tabs button { min-height: 0; padding: .45rem .7rem; border: 0; border-radius: .45rem; color: color-mix(in srgb, var(--text-color) 65%, transparent); background: transparent; font: inherit; font-weight: 750; cursor: pointer; }
.discord-chat-tabs button[aria-selected="true"] { color: var(--text-color); background: color-mix(in srgb, var(--accent-color) 15%, transparent); }
.discord-chat-tabs span { display: inline-grid; place-items: center; min-width: 1.2rem; border-radius: 1rem; background: color-mix(in srgb, var(--text-color) 13%, transparent); font-size: .7rem; }
.discord-chat-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.discord-chat-editor > div > label, .discord-chat-message-editor label { margin-top: .75rem; font-size: .78rem; font-weight: 750; }
.discord-chat-editor input, .discord-chat-editor textarea { width: 100%; }
.discord-chat-switch { flex-direction: row !important; align-items: center; font-weight: 700; cursor: pointer; }
.discord-chat-switch input { width: auto; }
.discord-chat-message-list { display: grid; gap: .85rem; }
.discord-chat-message-editor { padding: .85rem; border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--ap-panel) 82%, transparent); }
.discord-chat-message-editor__heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.discord-chat-message-editor__heading span { display: flex; gap: .25rem; }
.discord-chat-message-editor__heading button { width: 1.8rem; height: 1.8rem; padding: 0; border: 0; border-radius: .4rem; color: var(--text-color); background: color-mix(in srgb, var(--text-color) 9%, transparent); font: inherit; cursor: pointer; }
.discord-chat-empty { margin: 0; color: color-mix(in srgb, var(--text-color) 63%, transparent); }
.discord-chat-preview-wrap { position: sticky; top: calc(var(--navbar-height, 72px) + 1rem); min-width: 0; }
.discord-chat-preview { overflow: hidden; border: 1px solid #1e1f22; border-radius: .85rem; color: #dbdee1; background: #313338; font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; box-shadow: 0 14px 32px rgb(0 0 0 / .2); }
.discord-chat-preview__top { display: flex; gap: .8rem; align-items: center; min-height: 3.2rem; padding: .7rem 1rem; border-bottom: 1px solid #1f2023; background: #313338; }
.discord-chat-preview__top strong { color: #f2f3f5; }
.discord-chat-preview__top span { overflow: hidden; color: #949ba4; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.discord-chat-preview__body { min-height: 22rem; padding: .8rem 0 1.5rem; background: #313338; }
.discord-chat-rendered-message { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; padding: .25rem 1rem; }
.discord-chat-rendered-message:hover { background: #2e3035; }
.discord-chat-preview__body.is-compact .discord-chat-rendered-message { padding-block: .05rem; }
.discord-chat-avatar { width: 2.5rem; height: 2.5rem; margin-top: .15rem; border-radius: 50%; object-fit: cover; }
.discord-chat-rendered-message__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; min-height: 1.25rem; }
.discord-chat-rendered-message__meta strong { font-size: .93rem; }
.discord-chat-rendered-message__meta strong.font-classic { font-family: Georgia, serif; font-weight: 700; }
.discord-chat-rendered-message__meta strong.font-rounded { font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; font-weight: 800; }
.discord-chat-rendered-message__meta strong.font-journal { font-family: "Segoe Print", "Bradley Hand", cursive; font-weight: 700; }
.discord-chat-rendered-message__meta strong.font-gothic { font-family: "Old English Text MT", "Lucida Blackletter", Georgia, serif; font-weight: 800; }
.discord-chat-rendered-message__meta strong.font-pixel { font-family: "Courier New", monospace; font-weight: 900; letter-spacing: -.08em; }
.discord-chat-rendered-message__meta strong.font-serif { font-family: Georgia, serif; }
.discord-chat-rendered-message__meta strong.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.discord-chat-rendered-message__meta strong.font-wide { font-family: Impact, "Arial Narrow", sans-serif; letter-spacing: .06em; }
.discord-chat-rendered-message__meta strong.font-script { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.1rem; }
.discord-chat-rendered-message__meta strong.font-small-caps { font-variant: small-caps; letter-spacing: .05em; }
.discord-chat-rendered-message__meta strong.font-slanted { font-style: italic; transform: skewX(-10deg); }
.discord-chat-rendered-message__meta strong.effect-gradient,
.discord-chat-rendered-message__meta strong.effect-prism { color: transparent !important; background: linear-gradient(90deg, var(--discord-name-start), var(--discord-name-end)); background-clip: text; -webkit-background-clip: text; }
.discord-chat-rendered-message__meta strong.effect-neon { text-shadow: 0 0 4px var(--discord-name-start), 0 0 9px var(--discord-name-start), 0 0 16px color-mix(in srgb, var(--discord-name-start) 72%, transparent); }
.discord-chat-rendered-message__meta strong.effect-toon { text-shadow: 1px 1px 0 #17181b, 2px 2px 0 color-mix(in srgb, var(--discord-name-start) 44%, #17181b); }
.discord-chat-rendered-message__meta strong.effect-pop { text-shadow: 2px 2px 0 color-mix(in srgb, var(--discord-name-start) 62%, #17181b), 3px 3px 4px rgb(0 0 0 / .35); transform: scale(1.07); transform-origin: left; }
.discord-chat-rendered-message__meta strong.effect-glow { color: transparent !important; background: linear-gradient(90deg, var(--discord-name-start), var(--discord-name-end)); background-clip: text; -webkit-background-clip: text; }
.discord-chat-rendered-message__meta strong.effect-gummy { color: var(--discord-name-start); text-shadow: 1px 1px 0 var(--discord-name-end), -1px -1px 0 var(--discord-name-color-3), 2px 0 2px var(--discord-name-color-4); }
.discord-chat-rendered-message__meta strong.effect-prism { background: linear-gradient(100deg, var(--discord-name-start), var(--discord-name-end), var(--discord-name-color-3), var(--discord-name-color-4), var(--discord-name-color-5), var(--discord-name-start)); background-size: 220% 100%; }
.discord-chat-rendered-message time { color: #949ba4; font-size: .7rem; }
.discord-chat-app-badge { padding: .1rem .25rem; border-radius: .22rem; color: #fff; background: #5865f2; font-size: .58rem; font-weight: 800; }
.discord-chat-server-tag { padding: .08rem .28rem; border-radius: .25rem; color: #fff; background: var(--discord-tag-color); font-size: .63rem; font-weight: 800; letter-spacing: .02em; }
.discord-chat-role-icon { width: 1rem; height: 1rem; object-fit: contain; }
.discord-chat-role-icon--text { width: auto; height: auto; font-size: .95rem; line-height: 1; }
.discord-chat-reply { display: flex; align-items: center; gap: .35rem; min-width: 0; margin-bottom: .08rem; color: #949ba4; font-size: .76rem; white-space: nowrap; }
.discord-chat-reply::before { content: ""; width: 1.15rem; height: .72rem; margin-top: -.5rem; border-top: 2px solid #4e5058; border-left: 2px solid #4e5058; border-radius: .3rem 0 0 0; }
.discord-chat-reply img { width: 1rem; height: 1rem; border-radius: 50%; object-fit: cover; }
.discord-chat-reply strong { flex: 0 0 auto; color: #dbdee1; }
.discord-chat-reply span { overflow: hidden; text-overflow: ellipsis; }
.discord-chat-command { display: flex; flex-wrap: wrap; align-items: center; gap: .32rem; margin-bottom: .18rem; color: #b5bac1; font-size: .78rem; }
.discord-chat-command strong { color: #57f287; }
.discord-chat-command span { padding: .15rem .3rem; border-radius: .25rem; color: #6cb8ff; background: #1e2c55; font-weight: 750; }
.discord-chat-command em { color: #949ba4; font-style: normal; }
.discord-chat-edited { color: #949ba4; font-size: .68rem; }
.discord-chat-date-separator { display: flex; align-items: center; gap: .75rem; margin: 1rem; color: #949ba4; font-size: .72rem; font-weight: 650; text-align: center; }
.discord-chat-date-separator::before, .discord-chat-date-separator::after { content: ""; flex: 1; height: 1px; background: #3f4147; }
.discord-chat-rendered-message__text { color: #dbdee1; font-size: .92rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.discord-chat-attachment, .discord-chat-embed__image { display: block; max-width: min(100%, 28rem); max-height: 22rem; margin-top: .45rem; border-radius: .3rem; object-fit: contain; object-position: left top; }
.discord-chat-embed { max-width: 32rem; margin-top: .5rem; padding: .55rem .75rem; border-left: 4px solid var(--discord-embed-color); border-radius: .25rem; background: #2b2d31; }
.discord-chat-embed__title { display: block; color: #00a8fc; font-size: .9rem; font-weight: 750; text-decoration: none; }
.discord-chat-embed p { margin: .35rem 0 0; color: #dbdee1; font-size: .83rem; white-space: pre-wrap; }
@media (max-width: 800px) { .discord-chat-layout { grid-template-columns: minmax(0, 1fr); } .discord-chat-preview-wrap { position: static; } }

/* Private renderer workspace: intentionally denser and calmer than the public tool cards. */
.discord-render-page .tools-workspace { width: min(1500px, 100%); max-width: none; padding-inline: clamp(.7rem, 2vw, 1.5rem); }
.discord-render-page #discord-chat { gap: 1.15rem; padding: clamp(1rem, 2vw, 1.65rem); border-radius: 1.5rem; overflow: visible; }
.discord-chat-app-header { position: relative; align-items: center !important; gap: .9rem !important; padding-bottom: 1rem !important; }
.discord-chat-app-header__copy { min-width: 0; }
.discord-chat-eyebrow { display: block; margin-bottom: .18rem; color: var(--accent-color); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.discord-chat-local-badge { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; padding: .42rem .68rem; border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent); border-radius: 999px; color: color-mix(in srgb, var(--text-color) 72%, transparent); background: color-mix(in srgb, var(--accent-color) 8%, transparent); font-size: .7rem; font-weight: 750; white-space: nowrap; }
.discord-chat-toolbar { justify-content: space-between; padding: .65rem; border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--ap-page-base) 45%, transparent); }
.discord-chat-toolbar__exports { display: flex; flex-wrap: wrap; gap: .45rem; }
/* Mobile-only chrome: the screen switcher, the app-bar overflow menu, the
   channel entry row, and the drill-in back headers. Desktop keeps its
   two-column editor/preview layout with the Channel/Messages tabs. */
.discord-chat-mobile-view, .discord-chat-app-header__menu, .discord-chat-channel-entry, .discord-chat-sheet-header, .discord-chat-message-editor__back { display: none; }
.discord-chat-toolbar__primary, .discord-chat-toolbar__quiet { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; }
.tool-card .discord-chat-toolbar__primary { min-height: 2.35rem; }
.discord-chat-toolbar__quiet { min-height: 2.35rem !important; padding: .52rem .72rem; }
.discord-chat-layout { grid-template-columns: minmax(25rem, 1fr) minmax(25rem, 1.1fr); gap: 1rem; }
.discord-chat-editor, .discord-chat-preview-wrap { border: 1px solid color-mix(in srgb, var(--text-color) 11%, transparent); border-radius: 1.15rem; background: color-mix(in srgb, var(--ap-page-base) 52%, transparent); }
.discord-chat-editor { padding: .9rem; }
.discord-chat-preview-wrap { top: calc(var(--navbar-height, 72px) + .75rem); overflow: hidden; }
.discord-chat-pane-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .15rem .2rem .8rem; }
.discord-chat-pane-heading > div { display: grid; gap: .1rem; }
.discord-chat-pane-heading strong { font-size: .9rem; }
.discord-chat-pane-heading span { color: color-mix(in srgb, var(--text-color) 56%, transparent); font-size: .7rem; }
.discord-chat-pane-heading--preview { padding: .85rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent); }
.discord-chat-pane-heading--preview > span { display: inline-flex; align-items: center; gap: .35rem; color: #23a55a; font-weight: 750; }
.discord-chat-pane-heading--preview > span i { font-size: .45rem; }
.discord-chat-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-bottom: .85rem; padding: .3rem; border: 0; border-radius: .75rem; background: color-mix(in srgb, var(--text-color) 7%, transparent); }
.discord-chat-tabs button { display: inline-flex; justify-content: center; align-items: center; gap: .42rem; min-height: 2.25rem; }
.discord-chat-tabs button[aria-selected="true"] { background: var(--ap-panel); box-shadow: 0 3px 10px rgb(0 0 0 / .1); }
.discord-chat-editor-help { margin: 0 0 .75rem; color: color-mix(in srgb, var(--text-color) 58%, transparent); font-size: .72rem; line-height: 1.45; }
.discord-chat-message-list { gap: .7rem; }
.discord-chat-message-picker { display: flex; gap: .4rem; padding: .1rem .05rem .25rem; overflow-x: auto; scrollbar-width: thin; }
.discord-chat-message-picker > span { flex: 0 0 auto; }
.discord-chat-message-picker button { display: grid; grid-template-columns: 1.35rem auto; align-items: center; gap: .38rem; min-height: 2.2rem !important; padding: .35rem .6rem .35rem .38rem !important; border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent); border-radius: .62rem; color: color-mix(in srgb, var(--text-color) 68%, transparent) !important; background: color-mix(in srgb, var(--text-color) 5%, transparent) !important; box-shadow: none !important; white-space: nowrap; }
.discord-chat-message-picker button strong { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: .35rem; background: color-mix(in srgb, var(--text-color) 9%, transparent); font-size: .65rem; }
.discord-chat-message-picker button span { max-width: 7rem; overflow: hidden; font-size: .68rem; font-weight: 700; text-overflow: ellipsis; }
.discord-chat-message-picker__copy { display: contents; }
.discord-chat-message-picker__snippet, .discord-chat-message-picker__chevron { display: none; }
.discord-chat-message-picker button.is-active { border-color: color-mix(in srgb, var(--accent-color) 48%, transparent); color: var(--accent-color) !important; background: color-mix(in srgb, var(--accent-color) 10%, transparent) !important; }
.discord-chat-message-picker button.is-active strong { color: white; background: var(--accent-color); }
.discord-chat-message-editor { padding: 0; border-radius: .9rem; overflow: hidden; }
.discord-chat-message-editor__heading { padding: .72rem .8rem; border-bottom: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent); background: color-mix(in srgb, var(--accent-color) 7%, transparent); }
.discord-chat-message-editor__heading > strong { font-size: .82rem; }
.discord-chat-message-editor__title { display: flex; align-items: center; gap: .45rem; }
.discord-chat-message-editor__title > strong { font-size: .82rem; }
.discord-chat-message-editor__title > span { padding: .16rem .38rem; border-radius: 999px; color: color-mix(in srgb, var(--text-color) 60%, transparent); background: color-mix(in srgb, var(--text-color) 8%, transparent); font-size: .58rem; font-weight: 800; }
.discord-chat-message-editor__title > span.is-v2 { color: #5865f2; background: color-mix(in srgb, #5865f2 13%, transparent); }
.discord-chat-message-editor__heading button, .discord-chat-sub-editor > div:first-child button { min-height: 0 !important; box-shadow: none !important; background: color-mix(in srgb, var(--text-color) 8%, transparent) !important; }
.discord-chat-section { border-bottom: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent); }
.discord-chat-section:last-child { border-bottom: 0; }
.discord-chat-section summary { display: flex; align-items: center; gap: .5rem; padding: .72rem .8rem; cursor: pointer; list-style: none; user-select: none; }
.discord-chat-section summary > i { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: .42rem; color: var(--discord-section-color, var(--accent-color)); background: color-mix(in srgb, var(--discord-section-color, var(--accent-color)) 12%, transparent); font: 800 .62rem/1 system-ui, sans-serif; }
.discord-chat-section--author { --discord-section-color: #f0a45d; }
.discord-chat-section--content { --discord-section-color: #57a8f2; }
.discord-chat-section--embeds { --discord-section-color: #a67af4; }
.discord-chat-section--attachments { --discord-section-color: #48b990; }
.discord-chat-section--legacy-components { --discord-section-color: #e879a8; }
.discord-chat-section--components-v2 { --discord-section-color: #5865f2; }
.discord-chat-section summary::-webkit-details-marker { display: none; }
.discord-chat-section summary::after { content: "›"; margin-left: auto; color: color-mix(in srgb, var(--text-color) 48%, transparent); font-size: 1.15rem; transform: rotate(90deg); transition: transform .18s ease; }
.discord-chat-section[open] summary::after { transform: rotate(-90deg); }
.discord-chat-section summary > strong { font-size: .76rem; }
.discord-chat-section summary > span { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding-inline: .25rem; border-radius: 999px; color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 12%, transparent); font-size: .62rem; font-weight: 800; }
.discord-chat-section.is-disabled summary { opacity: .58; }
.discord-chat-section__body { display: grid; gap: .65rem; padding: 0 .8rem .85rem; }
.discord-chat-section[open] > .discord-chat-section__body { animation: discord-chat-reveal .2s cubic-bezier(.2, .8, .2, 1); }
.discord-chat-subsection { overflow: hidden; border: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent); border-radius: .62rem; background: color-mix(in srgb, var(--text-color) 3%, transparent); }
.discord-chat-subsection summary { display: flex; align-items: center; min-height: 2.25rem; padding: .45rem .62rem; cursor: pointer; color: color-mix(in srgb, var(--text-color) 72%, transparent); font-size: .7rem; font-weight: 750; list-style: none; }
.discord-chat-subsection summary::-webkit-details-marker { display: none; }
.discord-chat-subsection summary::after { content: "Edit"; margin-left: auto; padding: .13rem .35rem; border-radius: 999px; color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 10%, transparent); font-size: .57rem; font-weight: 800; }
.discord-chat-subsection[open] summary { border-bottom: 1px solid color-mix(in srgb, var(--text-color) 8%, transparent); }
.discord-chat-subsection[open] summary::after { content: "Done"; color: color-mix(in srgb, var(--text-color) 55%, transparent); background: color-mix(in srgb, var(--text-color) 7%, transparent); }
.discord-chat-subsection > .discord-chat-field-grid { padding: .62rem; }
.discord-chat-subsection > label { display: grid; gap: .32rem; margin: .62rem .62rem 0; }
.discord-chat-subsection > label:last-child { margin-bottom: .62rem; }
.discord-chat-section__body > label, .discord-chat-sub-editor label { margin-top: 0; }
.discord-chat-field-grid { gap: .58rem; }
.discord-chat-editor label { gap: .32rem; color: color-mix(in srgb, var(--text-color) 76%, transparent); font-size: .7rem; }
.discord-chat-editor input:not([type="checkbox"]), .discord-chat-editor textarea, .discord-chat-editor select { min-height: 2.35rem; padding: .58rem .65rem; border-radius: .58rem !important; font-size: .78rem; }
.discord-chat-editor textarea { min-height: 5.2rem; resize: vertical; }
.discord-chat-switch { min-height: 1.7rem; margin: 0 !important; }
.discord-chat-notice { margin: 0; padding: .62rem .7rem; border-left: 3px solid var(--accent-color); border-radius: .45rem; color: color-mix(in srgb, var(--text-color) 68%, transparent); background: color-mix(in srgb, var(--accent-color) 7%, transparent); font-size: .68rem; line-height: 1.45; }
.discord-chat-sub-editor { display: grid; gap: .65rem; padding: .7rem; border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent); border-radius: .7rem; background: color-mix(in srgb, var(--ap-panel) 80%, transparent); }
.discord-chat-sub-editor.is-nested { margin-left: .7rem; border-left: 3px solid color-mix(in srgb, var(--accent-color) 55%, transparent); }
.discord-chat-sub-editor > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.discord-chat-sub-editor > div:first-child strong { font-size: .72rem; }
.discord-chat-sub-editor > div:first-child button { width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: .35rem; color: var(--text-color) !important; }
:is(.discord-chat-section__body, .discord-chat-sub-editor) > button { justify-self: start; min-height: 2.15rem !important; padding: .45rem .7rem !important; border: 1px dashed color-mix(in srgb, var(--accent-color) 35%, transparent); background: color-mix(in srgb, var(--accent-color) 9%, transparent) !important; color: var(--accent-color) !important; box-shadow: none !important; font-size: .7rem; }
:is(.discord-chat-section__body, .discord-chat-sub-editor) > button:disabled { opacity: .45; cursor: not-allowed; }
.discord-chat-media-editor { background: color-mix(in srgb, var(--text-color) 3%, transparent); }
.discord-chat-preview { border: 0; border-radius: 0; box-shadow: none; }
.discord-chat-preview__body { min-height: 30rem; padding-block: 1rem 1.8rem; }

/* Components V2 and richer embed previews. */
.discord-chat-rendered-message__content { min-width: 0; }
.discord-chat-inline-code { padding: .08rem .25rem; border-radius: .2rem; color: #dbdee1; background: #1e1f22; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
.discord-chat-text-display :is(h1, h2, h3) { margin: .25rem 0 .35rem; color: #f2f3f5; line-height: 1.2; }
.discord-chat-text-display h1 { font-size: 1.35rem; } .discord-chat-text-display h2 { font-size: 1.12rem; } .discord-chat-text-display h3 { font-size: .95rem; }
.discord-chat-text-display pre { margin: .45rem 0; padding: .65rem .75rem; overflow: auto; border: 1px solid #3f4147; border-radius: .25rem; background: #2b2d31; }
.discord-chat-text-display pre code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; white-space: pre; }
.discord-chat-text-display blockquote { margin: .35rem 0; padding-left: .55rem; border-left: 3px solid #4e5058; }
.discord-chat-list-item { padding-left: .35rem; }
.discord-chat-embed { position: relative; min-height: 2.4rem; padding: .7rem .85rem; }
.discord-chat-embed > small { display: block; margin: .2rem 0; color: #b5bac1; font-size: .68rem; }
.discord-chat-embed__thumbnail { float: right; width: 5rem; height: 5rem; margin: 0 0 .5rem .8rem; border-radius: .3rem; object-fit: cover; }
.discord-chat-embed__fields { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .55rem; }
.discord-chat-embed__fields > div { flex: 1 1 100%; display: grid; gap: .15rem; min-width: 8rem; font-size: .76rem; }
.discord-chat-embed__fields > div.is-inline { flex-basis: 28%; }
.discord-chat-v2-container { display: grid; gap: .65rem; max-width: 34rem; margin-top: .5rem; padding: .85rem; border: 1px solid #3f4147; border-left: 4px solid var(--discord-container-accent); border-radius: .5rem; background: #2b2d31; }
.discord-chat-text-display { max-width: 34rem; margin-top: .42rem; color: #dbdee1; font-size: .86rem; line-height: 1.4; overflow-wrap: anywhere; }
.discord-chat-v2-container > .discord-chat-text-display { margin-top: 0; }
.discord-chat-v2-section { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .85rem; max-width: 34rem; margin-top: .5rem; padding: .72rem .8rem; border: 1px solid #3f4147; border-radius: .48rem; background: #2b2d31; }
.discord-chat-v2-section .discord-chat-text-display { margin: 0 0 .4rem; }
.discord-chat-v2-section > div { min-width: 0; }
.discord-chat-v2-section > img { width: 5.5rem; height: 5.5rem; border-radius: .45rem; object-fit: cover; }
.discord-chat-v2-separator { max-width: 34rem; }
.discord-chat-v2-separator.is-small { height: .8rem; }
.discord-chat-v2-separator.is-large { height: 1.5rem; }
.discord-chat-v2-separator.has-divider { height: 1px; margin-block: .8rem; background: #3f4147; }
.discord-chat-v2-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; max-width: 34rem; margin-top: .5rem; overflow: hidden; border-radius: .5rem; }
.discord-chat-v2-gallery figure { position: relative; min-width: 0; min-height: 8rem; margin: 0; overflow: hidden; background: #232428; }
.discord-chat-v2-gallery figure:only-child { grid-column: 1 / -1; }
.discord-chat-v2-gallery img { width: 100%; height: clamp(8rem, 22vw, 17rem); object-fit: cover; }
.discord-chat-v2-gallery .is-spoiler img, .discord-chat-v2-container.is-spoiler > :not(.discord-chat-spoiler-label), .discord-chat-file.is-spoiler > * { filter: blur(18px); opacity: .38; }
.discord-chat-spoiler-label { position: absolute; z-index: 2; inset: 50% auto auto 50%; translate: -50% -50%; padding: .3rem .55rem; border-radius: 999px; color: #fff; background: rgb(17 18 20 / .78); font-size: .68rem; font-weight: 800; }
.discord-chat-v2-container.is-spoiler, .discord-chat-file.is-spoiler { position: relative; overflow: hidden; }
.discord-chat-gallery-alt { position: absolute; left: .35rem; bottom: .35rem; padding: .18rem .28rem; border-radius: .2rem; color: #fff; background: rgb(17 18 20 / .72); font-size: .58rem; font-weight: 850; }
.discord-chat-action-row { display: flex; flex-wrap: wrap; gap: .45rem; max-width: 34rem; margin-top: .5rem; }
.tool-card .discord-chat-component-button { min-height: 2.1rem; padding: .45rem .72rem; border: 0; border-radius: .28rem; color: #fff; background: #5865f2; box-shadow: none; font: inherit; font-size: .75rem; font-weight: 650; }
.tool-card .discord-chat-component-button.is-secondary { background: #4e5058; }
.tool-card .discord-chat-component-button.is-success { background: #248046; }
.tool-card .discord-chat-component-button.is-danger { background: #da373c; }
.tool-card .discord-chat-component-button.is-link { color: #00a8fc; background: #4e5058; }
.discord-chat-select { display: flex; align-items: center; justify-content: space-between; max-width: 25rem; min-height: 2.5rem; margin-top: .5rem; padding: .55rem .7rem; border: 1px solid #1e1f22; border-radius: .28rem; color: #949ba4; background: #1e1f22; font-size: .78rem; }
.discord-chat-file { display: flex; align-items: center; gap: .55rem; max-width: 24rem; margin-top: .5rem; padding: .7rem .8rem; border: 1px solid #3f4147; border-radius: .42rem; color: #00a8fc; background: #2b2d31; font-size: .76rem; text-decoration: none; }
.discord-chat-file > span { font-size: 1.2rem; }

@keyframes discord-chat-reveal { from { opacity: 0; transform: translateY(-.25rem); } }

@media (max-width: 980px) { .discord-chat-layout { grid-template-columns: minmax(0, 1fr); } .discord-chat-preview-wrap { position: static; } }

@keyframes tools-group-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
}

[data-tools-landing].is-collapsed .tools-command-bar { width: min(100%, 680px); }
[data-tools-landing].is-collapsed .tools-launcher-card { padding: .7rem; }

@media (max-width: 1100px) {
  .tools-page .tools-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .tools-page [data-tools-landing] { padding: .7rem .7rem 0; }
  .tools-launcher-card { padding: 1.5rem; border-radius: 2.2rem; }
  
  
  .tools-command-bar { display: block; padding: .35rem; border-radius: 1.3rem; }
  .tools-command-bar .tools-search { height: 3rem; }
  .tools-command-bar__hint { display: none; }
  .tools-page .tools-nav { grid-template-columns: 1fr; gap: .7rem; }
  
  
  .tools-nav__group { border-radius: 1.5rem; }
  .tools-nav__group:not([hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-nav__label { grid-column: 1 / -1; }
  .tools-page .tools-nav a { min-height: 2.8rem; }
  .tools-workspace { padding: 1rem .7rem 0; }
  .tool-card { padding: 1.15rem; border-radius: 2rem; }
  .tool-card.is-active header { margin: -1.15rem -1.15rem 0; padding: 1.15rem; }
  .tool-card header { align-items: flex-start; }
  .tool-icon { flex-basis: 2.8rem; width: 2.8rem; height: 2.8rem; border-radius: .9rem; }
  .social-preview { grid-template-columns: minmax(0, 1fr); }
  .social-preview__content { padding: var(--space-5); }
}

@media (max-width: 430px) {
  .tools-page .tools-nav a { grid-template-columns: 1.75rem minmax(0, 1fr); padding-inline: .35rem; font-size: .72rem; }
  .tools-page .tools-nav a i { width: 1.75rem; height: 1.75rem; }
  
}

@media (prefers-reduced-motion: reduce) {
  .tools-nav__group { animation: none; }
  .tools-page .tools-nav a,
  .tools-page .tools-nav a i { transition-duration: .01ms; }
}

.tools-nav__group) {
  animation: none;
}

::view-transition-old(tools-launcher),
::view-transition-new(tools-launcher),
::view-transition-old(active-tool-panel),
::view-transition-new(active-tool-panel) {
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

::view-transition-old(tools-launcher) { animation-name: tools-view-fade-out; }
::view-transition-new(tools-launcher) { animation-name: tools-view-fade-in; }
@keyframes tools-view-fade-out { to { opacity: 0; transform: translateY(-8px) scale(.985); } }
@keyframes tools-view-fade-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }

/* Mobile app shell for the Discord renderer (<=760px). A distinct product
   layout, not a shrunk desktop form: exactly one screen is on-screen at a
   time - message list, channel settings, message editor, or preview - each
   in normal flow with its own header, so there are no fixed overlays or
   z-index fights with the site navbar. Kept last so the private renderer can
   override the shared tools-page mobile card treatment. */
@media (max-width: 760px) {
  .discord-render-page .site-shell { width: 100%; margin-top: .3rem; padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
  .discord-render-page .tools-workspace { justify-content: flex-start; width: 100%; max-width: none; padding: .35rem max(.55rem, env(safe-area-inset-right)) .7rem max(.55rem, env(safe-area-inset-left)); }
  .discord-render-page #discord-chat { width: 100%; min-height: calc(100svh - var(--navbar-current-h, 60px) - 2.4rem); gap: .6rem; padding: .7rem .7rem .9rem; border-radius: 1.1rem; }

  /* Compact app bar: icon + title, with export/import/reset behind its menu. */
  .discord-render-page #discord-chat > .discord-chat-app-header { align-items: center; gap: .6rem !important; padding: 0 0 .65rem !important; }
  .discord-render-page .discord-chat-app-header .tool-icon { flex-basis: 2.1rem; width: 2.1rem; height: 2.1rem; border-radius: .62rem; font-size: .82rem; }
  .discord-chat-app-header__copy { display: grid; gap: .05rem; min-width: 0; }
  .discord-chat-app-header__copy h2 { font-size: 1rem; line-height: 1.2; }
  .discord-chat-app-header__copy p, .discord-chat-eyebrow, .discord-chat-local-badge { display: none; }
  .tool-card button.discord-chat-app-header__menu { display: inline-grid; place-items: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; margin-left: auto; border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent); border-radius: .65rem; color: var(--text-color); background: color-mix(in srgb, var(--text-color) 5%, transparent); font-size: .9rem; }

  /* One prominent action; the rest live in the header menu. */
  .discord-chat-toolbar { position: relative; gap: 0; padding: 0; border: 0; background: none; }
  .discord-chat-toolbar__primary { width: 100%; border: 0; border-radius: .7rem; background: linear-gradient(115deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 62%, #ff8c69)) !important; box-shadow: 0 .3rem .8rem color-mix(in srgb, var(--accent-color) 22%, transparent) !important; }
  .tool-card .discord-chat-toolbar__primary { min-height: 2.9rem !important; font-size: .86rem; }
  .discord-chat-toolbar__exports { display: none; position: absolute; top: calc(100% + .4rem); right: 0; z-index: 5; flex-direction: column; gap: .15rem; width: 12rem; padding: .35rem; border: 1px solid color-mix(in srgb, var(--text-color) 14%, transparent); border-radius: .85rem; background: var(--background-color); box-shadow: 0 1rem 2rem rgb(0 0 0 / .3); }
  /* `.tool-card > *` puts the toolbar and the switcher below it in the same
     stacking context at z-index 1, so the later sibling would paint over
     this menu. Lift the toolbar only while the menu is open. */
  #discord-chat.discord-chat-more-open .discord-chat-toolbar { z-index: 5; }
  #discord-chat.discord-chat-more-open .discord-chat-toolbar__exports { display: flex; }
  .tool-card .discord-chat-toolbar__exports > :is(button, label) { display: flex; flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: flex-start; gap: .6rem; width: 100%; min-height: 2.7rem !important; margin: 0; padding: .5rem .65rem !important; border: 0; border-radius: .6rem; color: var(--text-color); background: none; box-shadow: none !important; font-size: .84rem; font-weight: 700; }
  .tool-card .discord-chat-toolbar__exports > :is(button, label):active { background: color-mix(in srgb, var(--text-color) 8%, transparent); }
  .discord-chat-toolbar__exports > * i { width: 1.1rem; color: var(--accent-color); text-align: center; }

  /* Segmented screen switcher. Deliberately quieter than "Add message" so the
     two accent-coloured controls do not compete. */
  .discord-chat-mobile-view { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .3rem; border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent); border-radius: .8rem; background: color-mix(in srgb, var(--text-color) 6%, transparent); }
  .tool-card .discord-chat-mobile-view button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.7rem; padding: .4rem .55rem; border: 0; border-radius: .6rem; color: color-mix(in srgb, var(--text-color) 60%, transparent); background: transparent; box-shadow: none; font: inherit; font-size: .8rem; font-weight: 800; }
  .tool-card .discord-chat-mobile-view button[aria-selected="true"] { color: var(--text-color); background: var(--ap-panel); box-shadow: 0 .15rem .5rem rgb(0 0 0 / .12); }
  .tool-card .discord-chat-mobile-view button[aria-selected="true"] i { color: var(--accent-color); }
  #discord-chat[data-discord-chat-mobile-view="messages"] .discord-chat-preview-wrap,
  #discord-chat[data-discord-chat-mobile-view="preview"] .discord-chat-editor { display: none; }

  .discord-chat-layout { display: block; gap: 0; }
  .discord-chat-editor { padding: 0; border: 0; background: none; border-radius: 0; }
  .discord-chat-pane-heading, .discord-chat-pane-heading--preview, .discord-chat-tabs { display: none; }
  .discord-chat-editor-help { display: none; }

  /* Drill-in screens: opening channel settings or a message editor replaces the
     list screen entirely, so the app bar and switcher step aside for the
     screen's own back header. */
  :is(#discord-chat[data-discord-chat-mobile-editing="true"],
      #discord-chat:has([data-discord-chat-tab-panel="channel"]:not([hidden])))
    > :is(.discord-chat-app-header, .discord-chat-toolbar, .discord-chat-mobile-view) { display: none; }
  #discord-chat[data-discord-chat-mobile-editing="true"] :is(.discord-chat-editor-help, .discord-chat-channel-entry, .discord-chat-message-picker, .discord-chat-empty) { display: none; }

  /* Channel entry row on the list screen. */
  .tool-card button.discord-chat-channel-entry { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 3.5rem; margin-bottom: .7rem; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--text-color) 10%, transparent); border-radius: .85rem; background: color-mix(in srgb, var(--text-color) 4%, transparent); text-align: left; font: inherit; color: var(--text-color); cursor: pointer; }
  .discord-chat-channel-entry__icon { display: grid; place-items: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: .62rem; color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 14%, transparent); }
  .discord-chat-channel-entry__copy { display: grid; gap: .1rem; min-width: 0; }
  .discord-chat-channel-entry__copy strong { font-size: .84rem; }
  .discord-chat-channel-entry__copy span { overflow: hidden; color: color-mix(in srgb, var(--text-color) 58%, transparent); font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
  .discord-chat-channel-entry > i:last-child { margin-left: auto; flex-shrink: 0; color: color-mix(in srgb, var(--text-color) 38%, transparent); }

  /* Back headers shared by the channel and message editor screens. */
  .discord-chat-sheet-header { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; padding: 0 0 .7rem; border-bottom: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent); }
  .discord-chat-sheet-header strong { font-size: .95rem; }
  .tool-card button.discord-chat-sheet-back, .tool-card button.discord-chat-message-editor__back { display: grid; place-items: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; border: 0; border-radius: .62rem; color: var(--text-color); background: color-mix(in srgb, var(--text-color) 8%, transparent); }

  /* Message list: full-width touch rows instead of a horizontal chip strip. */
  .discord-chat-message-list { gap: .55rem; }
  .discord-chat-message-picker { display: grid; gap: .5rem; overflow: visible; padding: 0; }
  .discord-chat-message-picker button { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; width: 100%; min-height: 3.8rem !important; padding: .6rem .75rem !important; border-radius: .85rem; }
  .discord-chat-message-picker button strong { width: 2.1rem; height: 2.1rem; border-radius: .55rem; font-size: .78rem; }
  .discord-chat-message-picker__copy { display: grid; gap: .12rem; min-width: 0; max-width: none; text-align: left; }
  .discord-chat-message-picker__author { max-width: none; overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
  .discord-chat-message-picker__snippet { display: block; overflow: hidden; color: color-mix(in srgb, var(--text-color) 55%, transparent); font-size: .74rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .discord-chat-message-picker__chevron { display: block; flex-shrink: 0; color: color-mix(in srgb, var(--text-color) 38%, transparent); font-size: .8rem; }

  /* Message editor screen. */
  .discord-chat-message-editor { display: none; }
  #discord-chat[data-discord-chat-mobile-editing="true"] .discord-chat-message-editor { display: block; padding: 0; border: 0; border-radius: 0; background: none; }
  .discord-chat-message-editor__heading { gap: .6rem; margin: 0 0 .8rem; padding: 0 0 .7rem; border-bottom: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent); background: none; }
  .discord-chat-message-editor__title { display: grid; gap: .15rem; flex: 1; min-width: 0; justify-items: start; }
  .discord-chat-message-editor__title > strong { font-size: .95rem; }
  .discord-chat-message-editor__heading > span { gap: .35rem; }
  .discord-chat-message-editor__heading button { width: 2.4rem; height: 2.4rem; border-radius: .62rem; font-size: .9rem; }

  /* Sections read as a settings list: closed rows, one open at a time. */
  .discord-chat-section { margin-bottom: .5rem; border: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent); border-radius: .85rem; background: color-mix(in srgb, var(--text-color) 3%, transparent); }
  .discord-chat-section:last-child { border-bottom: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent); }
  .discord-chat-section[open] { background: var(--ap-panel); }
  .discord-chat-section summary { gap: .6rem; min-height: 3.4rem; padding: .7rem .8rem; }
  .discord-chat-section summary > i { width: 1.8rem; height: 1.8rem; border-radius: .5rem; font-size: .72rem; }
  .discord-chat-section summary > strong { font-size: .88rem; }
  .discord-chat-section summary > span { min-width: 1.5rem; height: 1.5rem; font-size: .72rem; }
  .discord-chat-section[open] > summary::after { content: "Done"; padding: .25rem .6rem; border-radius: 999px; color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 13%, transparent); font-size: .68rem; font-weight: 800; transform: none; }
  .discord-chat-section__body { gap: .8rem; padding: .2rem .8rem 1rem; }

  .discord-chat-field-grid { grid-template-columns: minmax(0, 1fr); gap: .7rem; }
  .discord-chat-editor label { gap: .35rem; font-size: .82rem; }
  .discord-chat-editor input:not([type="checkbox"]), .discord-chat-editor textarea, .discord-chat-editor select { min-height: 2.9rem; padding: .7rem .8rem; border-radius: .62rem !important; font-size: 1rem; }
  .discord-chat-editor textarea { min-height: 7rem; }
  .discord-chat-switch { min-height: 2.4rem; font-size: .86rem !important; }
  .discord-chat-notice { padding: .7rem .75rem; font-size: .78rem; }
  .discord-chat-subsection summary { min-height: 2.9rem; padding: .6rem .7rem; font-size: .84rem; }
  .discord-chat-subsection > .discord-chat-field-grid { padding: .75rem; }
  .discord-chat-subsection > label { gap: .35rem; margin: .75rem .75rem 0; }
  .discord-chat-subsection > label:last-child { margin-bottom: .75rem; }
  .discord-chat-sub-editor { gap: .75rem; padding: .8rem; border-radius: .7rem; }
  .discord-chat-sub-editor.is-nested { margin-left: .4rem; }
  .discord-chat-sub-editor > div:first-child button { width: 2.2rem; height: 2.2rem; font-size: .9rem; }
  :is(.discord-chat-section__body, .discord-chat-sub-editor) > button { min-height: 2.7rem !important; padding: .55rem .8rem !important; font-size: .82rem; }

  /* Preview screen: a proper Discord canvas with a sensible viewport height. */
  .discord-chat-preview-wrap { position: static; border-radius: .9rem; }
  .discord-chat-preview { border-radius: .9rem; }
  .discord-chat-preview__body { min-height: calc(100svh - var(--navbar-current-h, 60px) - 13rem); padding: .9rem .35rem 1.2rem; }
  .discord-chat-rendered-message { gap: .6rem; padding-inline: .35rem; }

  .discord-render-page :is(button, summary, .discord-chat-toolbar__upload) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: transform .14s cubic-bezier(.2, .8, .2, 1), filter .14s ease, background-color .14s ease; }
  .discord-render-page :is(button, summary, .discord-chat-toolbar__upload):active { transform: scale(.985); filter: brightness(.97); }
}

@media (max-width: 380px) {
  .discord-chat-app-header__copy h2 { font-size: .92rem; }
  .discord-chat-message-picker__author { font-size: .82rem; }
  .discord-chat-toolbar__exports { width: 10.5rem; }
}

/* The renderer is an app-like workspace, so its site navigation becomes a
   compact dock rather than taking over the first mobile screen. */
@media (max-width: 620px) {
  html:has(body.discord-render-page) { --navbar-expanded-h: 58px; }
  .discord-render-page .navbar { width: calc(100vw - .7rem); max-width: none; margin-top: .35rem; gap: 0; }
  .discord-render-page .navbar__island--links { display: flex; align-items: center; gap: .2rem; padding: .28rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .discord-render-page .navbar__island--links::-webkit-scrollbar { display: none; }
  .discord-render-page .navbar__link, .discord-render-page .navbar__settings-toggle { flex: 0 0 2.35rem; width: 2.35rem; min-width: 2.35rem; min-height: 2.35rem; padding: 0; border-radius: .66rem; }
  .discord-render-page .navbar__link .navbar__label, .discord-render-page .navbar__settings-toggle .navbar__label, .discord-render-page .navbar__new-badge { display: none; }
  .discord-render-page .navbar__link i, .discord-render-page .navbar__settings-toggle i { margin: 0; font-size: .84rem; }
  .discord-render-page .navbar__dropdown-host { flex: 0 0 2.35rem; }
  .discord-render-page .navbar__dropdown-host .navbar__link { width: 2.35rem; }
  .discord-render-page .navbar__dropdown-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .discord-chat-section[open] > .discord-chat-section__body { animation: none; }
  .discord-render-page :is(button, summary, .discord-chat-toolbar__upload) { transition: none; }
}

/* ── Discord link preview builder ─────────────────────────────────────── */
/* Each setting is its own card, above a plain "Components" heading, so the
   delivery choice and the container accent never read as components. These
   two cards used to share a CSS grid row, so collapsing one left its column's
   row track as tall as the still-open sibling; switching to flex alone did
   not fix that, because two items on one flex line still share that line's
   height the same way a grid row does - nothing in CSS sizes same-line/row
   items independently of each other. :has() instead switches the whole row
   to a single column the instant either field is collapsed, which removes
   the shared line entirely. Expanding both again restores the side-by-side
   view. */
.dlp-setup { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-5); }
.dlp-setup:has(.dlp-field--collapsible.is-collapsed) { flex-direction: column; align-items: stretch; }
.dlp-setup:has(.dlp-field--collapsible.is-collapsed) .dlp-field { flex-basis: auto; }
.dlp-field { flex: 1 1 230px; display: grid; gap: .45rem; align-content: start; }
/* The import field contains a header and body, so it must remain one column;
   this explicit override also wins while a previously cached stylesheet ages out. */
.dlp-import { grid-template-columns: minmax(0, 1fr) !important; }
.tool-card :is(.dlp-import__file, .dlp-import__fetch, .dlp-import__paste) { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem; margin: 0; padding: .4rem .65rem; border: 1px solid color-mix(in srgb, var(--accent-color) 35%, var(--ap-panel-border)); border-radius: var(--radius-md); color: color-mix(in srgb, var(--accent-color) 58%, var(--text-color)); background: color-mix(in srgb, var(--accent-color) 6%, var(--ap-page-base)); box-shadow: none; font-size: .76rem; font-weight: 800; }
.tool-card .dlp-import__fetch:disabled { opacity: .55; cursor: wait; }
.tool-card .dlp-import textarea { font-family: Consolas, "Courier New", monospace; font-size: .78rem; }
.dlp-import__tabs { align-self: start; }
.dlp-import__pane { display: grid; gap: var(--space-4); }
/* The pane's own `display: grid` would otherwise outrank the [hidden]
   attribute's UA `display: none`, leaving every tab's pane visible at once. */
.dlp-import__pane[hidden] { display: none; }
.dlp-import__status { min-height: 1.1rem; color: color-mix(in srgb, var(--text-color) 65%, transparent); font-size: .72rem; font-weight: 650; line-height: 1.35; }
.dlp-import__status.is-error { color: #ef4444; }
.dlp-field__header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; }
.dlp-field__body { display: grid; gap: .45rem; }
.dlp-field--collapsible.is-collapsed { gap: 0; }
.dlp-field--collapsible.is-collapsed .dlp-field__body { display: none; }
/* The counts sit on their own line as chips, so the "Components" heading stays
   byte-for-byte the same as the other headings on the page. */
.dlp-counts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: -.1rem; }
.tool-card .dlp-count-pill { display: inline-flex; align-items: center; gap: .38rem; min-height: 2rem; margin: 0; padding: .3rem .62rem; border: 1px solid color-mix(in srgb, var(--accent-color) 24%, var(--ap-panel-border)); border-radius: var(--radius-pill); color: color-mix(in srgb, var(--text-color) 76%, transparent); background: color-mix(in srgb, var(--accent-color) 7%, var(--ap-page-base)); box-shadow: none; font-size: .72rem; font-weight: 800; line-height: 1; }
.dlp-count-pill > i:first-child { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: var(--dlp-accent-ink, #fff); background: var(--accent-color); font-size: .62rem; }
.dlp-count-pill--components { cursor: pointer; }
.tool-card .dlp-count-pill--components:hover { border-color: color-mix(in srgb, var(--accent-color) 60%, transparent); opacity: 1; }
.dlp-count-pill--components > i:last-child { margin-left: .08rem; font-size: .62rem; transition: transform .16s ease; }
.dlp-count-pill--components.is-expanded > i:last-child { transform: rotate(180deg); }
.dlp-count-pill--chars > i:first-child { background: color-mix(in srgb, var(--text-color) 48%, var(--accent-color)); }
.dlp-count-pill.is-over { border-color: color-mix(in srgb, #ef4444 45%, transparent); color: #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); }
.dlp-component-tree { padding: .6rem .75rem; border: 1px solid color-mix(in srgb, var(--accent-color) 20%, var(--ap-panel-border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-color) 5%, var(--ap-page-base)); font-size: .74rem; font-weight: 700; }
.dlp-component-tree[hidden] { display: none; }
.dlp-component-tree ul { display: grid; gap: .35rem; margin: 0; padding-left: 1rem; list-style: none; }
.dlp-component-tree > ul { padding-left: 0; }
.dlp-component-tree li { position: relative; color: color-mix(in srgb, var(--text-color) 76%, transparent); }
.dlp-component-tree li::before { position: absolute; left: -.85rem; color: color-mix(in srgb, var(--accent-color) 68%, var(--text-color)); content: "└"; }
.dlp-component-tree > ul > li::before { display: none; }
.dlp-component-tree__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.dlp-component-tree__remove { flex: 0 0 auto; padding: .15rem .35rem !important; color: color-mix(in srgb, #ef4444 75%, var(--text-color)) !important; background: transparent !important; box-shadow: none !important; font-size: .68rem !important; }
.dlp-heading { margin: 0; font-size: .74rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--text-color) 65%, transparent); }
/* The panel's own [hidden] toggles must win over the shared `label { display: … }`
   rule that would otherwise keep a hidden field on screen (dlp-href-field is
   a <label>). Scoped to #link-unfurl-builder (not .dlp-setup, which no
   longer wraps these fields after the layout was reordered - accent/spoiler
   and the collapsible fields now sit directly under .dlp-side/.dlp-build)
   so this still reaches every field regardless of where it ends up. */
#link-unfurl-builder [hidden] { display: none; }
/* One cohesive control - swatch, hex value and clear button share a height
   and a single outer border, rather than three separately-bordered fields
   sitting loose next to each other. */
.dlp-color { display: flex; align-items: stretch; gap: 0; width: 100%; height: 2.6rem; border: 1px solid color-mix(in srgb, var(--secondary-color) 28%, transparent); border-radius: var(--radius-md); overflow: hidden; background: color-mix(in srgb, var(--background-color) 76%, transparent); }
/* Native <input type="color"> swatches render at whatever size the UA feels
   like inside their own box (Chrome pads a tiny chip in the middle rather
   than filling it), so at this control's compact height the "swatch" was
   barely a visible dot. appearance: none plus a solid border removes that
   inner padding and lets the color genuinely fill the whole square. */
.dlp-color input[type="color"] { appearance: none; flex: 0 0 2.6rem; width: 2.6rem; min-width: 0; height: 100%; padding: 0; border: 0; border-right: 1px solid color-mix(in srgb, var(--secondary-color) 28%, transparent); border-radius: 0; cursor: pointer; }
.dlp-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.dlp-color input[type="color"]::-webkit-color-swatch { border: 0; }
.dlp-color input[type="color"]::-moz-color-swatch { border: 0; }
.dlp-color input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; border: 0; border-radius: 0; background: transparent; }
.dlp-color input[type="text"]:focus { outline-offset: -2px; }
/* Overrides .tool-card button:not(.icon-button)'s accent-gradient CTA look
   (meant for primary actions like "Add component") - a small reset action
   next to a color field shouldn't visually compete with it, and definitely
   shouldn't happen to tint itself with whatever accent colour is currently
   picked, which read as a warning/danger button on a dark red accent. */
.tool-card button.dlp-accent-clear:not(.icon-button) { flex: 0 0 auto; align-self: stretch; height: 100%; min-height: 0; margin: 0; padding: 0 .7rem; border: 0; border-left: 1px solid color-mix(in srgb, var(--secondary-color) 28%, transparent); border-radius: 0; color: color-mix(in srgb, var(--text-color) 68%, transparent); background: transparent; box-shadow: none; font-size: .7rem; font-weight: 700; white-space: nowrap; }
.tool-card button.dlp-accent-clear:not(.icon-button):hover { color: var(--text-color); background: color-mix(in srgb, var(--text-color) 8%, transparent); }
.dlp-accent-status { display: block; margin-top: .4rem; color: color-mix(in srgb, var(--text-color) 58%, transparent); font-size: .7rem; font-weight: 650; line-height: 1.35; }

/* Same :has() approach as .dlp-setup above, and for the same reason: .dlp-build
   (Components) and .dlp-side (Preview + code) sharing a flex line meant
   collapsing Components alone still left the row as tall as Preview/code.
   Collapsing any of the three - Components, Preview or code - drops the whole
   layout to one column, so the collapsed side's space actually clears instead
   of depending on what its neighbour happens to be doing. */
.dlp-layout { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: flex-start; }
.dlp-layout:has(.dlp-section.is-collapsed, .dlp-stage.is-collapsed, .dlp-panel.is-collapsed) { flex-direction: column; align-items: stretch; }
.dlp-layout:has(.dlp-section.is-collapsed, .dlp-stage.is-collapsed, .dlp-panel.is-collapsed) :is(.dlp-build, .dlp-side) { flex-basis: auto; }
.dlp-build, .dlp-side { flex: 1 1 320px; display: grid; gap: var(--space-4); min-width: 0; }
.dlp-section { display: grid; gap: var(--space-4); }
.dlp-section__header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; }
.dlp-section__actions { display: flex; align-items: center; gap: .25rem; }
.dlp-section__actions .icon-button:disabled { opacity: .35; cursor: not-allowed; }
.dlp-section__body { display: grid; gap: var(--space-4); }
.dlp-section.is-collapsed { gap: 0; }
.dlp-section.is-collapsed .dlp-section__body { display: none; }

.dlp-blocks { display: grid; gap: var(--space-4); }
.dlp-block { display: grid; gap: .6rem; padding: .75rem; border: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--ap-panel-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent-color) 5%, var(--ap-page-base)); }
.dlp-block__header { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .76rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.dlp-block__header > span:first-child { flex: 0 0 auto; }
.dlp-block__badge, .dlp-subcard__badge { margin-right: auto; }
.dlp-block__actions { display: flex; gap: .25rem; }
.dlp-block__actions .icon-button:disabled { opacity: .35; cursor: not-allowed; }
.dlp-block--incomplete { border-color: color-mix(in srgb, #ef4444 45%, transparent); background: color-mix(in srgb, #ef4444 6%, var(--ap-page-base)); }
.dlp-block__badge, .dlp-subcard__badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: var(--radius-pill); background: color-mix(in srgb, #ef4444 20%, transparent); color: #ef4444; font-size: .66rem; font-weight: 800; letter-spacing: .02em; text-transform: none; cursor: help; }
.dlp-subcard--incomplete { border-color: color-mix(in srgb, #ef4444 45%, transparent); }
.dlp-block__body { display: grid; gap: .55rem; }
.dlp-block.is-collapsed { gap: 0; }
.dlp-block.is-collapsed .dlp-block__body { display: none; }
.dlp-text-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; align-items: start; }
.dlp-text-row > .icon-button { margin-top: .2rem; }
.dlp-subcard { border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--text-color) 4%, transparent); }
.dlp-subcard__header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .35rem .35rem .6rem; border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 16%, transparent); font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.dlp-subcard__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .5rem; padding: .6rem; }
/* A button's third field (its optional emoji) runs the full row rather than
   leaving an empty cell next to it in the two-column grid above. */
.dlp-subcard__body > label:nth-child(3):last-child { grid-column: 1 / -1; }
.dlp-subcard__body--stacked { grid-template-columns: minmax(0, 1fr); }
.dlp-preview__spoiler { position: relative; display: block; overflow: hidden; border-radius: 4px; }
.dlp-preview__spoiler img { filter: blur(14px); }
/* The whole container blurs, not just its images, since Discord spoilers the
   entire embed rather than individual pieces of it. */
.dlp-preview__spoiler--container > .dlp-preview__container { filter: blur(6px); pointer-events: none; user-select: none; }
.dlp-preview__spoiler-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dlp-strong); }
/* Add buttons are tiles rather than pills: an icon chip plus the component's
   Discord name, sized for a thumb and readable at a glance in a long list. */
.dlp-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; }
/* Surfaces here are neutral rather than accent-tinted, and anything drawn on the
   accent uses --dlp-accent-ink: with a bright accent (a light green, say) an
   accent-on-accent tile and its icon vanished into the page background. */
.tool-card .dlp-add button { display: flex; align-items: center; justify-content: flex-start; gap: .55rem; min-height: 3.1rem; margin: 0; padding: .55rem .7rem; border: 1px solid color-mix(in srgb, var(--text-color) 16%, transparent); border-radius: var(--radius-lg); color: var(--text-color); background: color-mix(in srgb, var(--text-color) 6%, var(--ap-page-base)); box-shadow: none; font-size: .82rem; font-weight: 750; text-align: left; }
.tool-card .dlp-add button i { display: grid; place-items: center; flex: 0 0 1.9rem; width: 1.9rem; height: 1.9rem; border-radius: var(--radius-md); color: var(--dlp-accent-ink, #fff); background: var(--accent-color); font-size: .85rem; }
html:not([data-hover-effects="off"]) .tool-card .dlp-add button:hover { border-color: color-mix(in srgb, var(--accent-color) 60%, transparent); background: color-mix(in srgb, var(--text-color) 10%, var(--ap-page-base)); }

/* Adds that live inside a component read as a continuation of it, so they are
   outlined rather than filled. */
.tool-card button.dlp-inline-add { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 2.6rem; margin: 0; padding: .5rem .8rem; border: 1px dashed color-mix(in srgb, var(--accent-color) 55%, var(--text-color)); border-radius: var(--radius-md); color: color-mix(in srgb, var(--accent-color) 45%, var(--text-color)); background: transparent; box-shadow: none; font-size: .8rem; font-weight: 750; }
.tool-card button.dlp-inline-add:disabled { opacity: .45; cursor: not-allowed; }
html:not([data-hover-effects="off"]) .tool-card button.dlp-inline-add:hover { background: color-mix(in srgb, var(--accent-color) 10%, transparent); }
/* Sits at the top of the component list and is filled, not outlined: it is a
   correction prompt, so it has to be seen before the list it refers to. */
.tool-card button.dlp-clean { display: flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; min-height: 3rem; margin: 0; border: 0; border-radius: var(--radius-lg); color: #1b1205; background: linear-gradient(135deg, #f7b155, #f59e42); box-shadow: 0 6px 18px color-mix(in srgb, #f59e42 28%, transparent); font-size: .84rem; font-weight: 800; }
.tool-card button.dlp-clean i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: var(--radius-md); color: #1b1205; background: color-mix(in srgb, #1b1205 14%, transparent); font-size: .8rem; }
.tool-card button.dlp-clean[hidden] { display: none; }
html:not([data-hover-effects="off"]) .tool-card button.dlp-clean:hover { filter: brightness(1.05); }
/* Each component (Text Display, Section, ...) is a card whose header is a
   `role="button"` toggle for its own collapse, not a real <button> - so it
   still picked up the site-wide whole-card lift+scale hover
   (glass.css's shared button/[role="button"]/.home-card/... list) even after
   .tool-card was taken out of that list. That reads as the *component*
   itself reacting on hover, one step removed from any control the visitor
   actually meant to touch, so it is switched off here too. Buttons keep
   their own hover feedback (restored above) - only the card-level lift on
   the header goes. */
#link-unfurl-builder .dlp-block__header:hover { transform: none; }

.tool-card button.dlp-back-to-top { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.6rem; margin: 0; border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent); border-radius: var(--radius-md); color: color-mix(in srgb, var(--accent-color) 55%, var(--text-color)); background: transparent; box-shadow: none; font-size: .8rem; font-weight: 750; }
.tool-card button.dlp-back-to-top[hidden] { display: none; }
.dlp-history-toast { position: fixed; z-index: 20; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); max-width: min(26rem, calc(100vw - 2rem)); margin: 0; padding: .65rem .8rem; border: 1px solid color-mix(in srgb, var(--accent-color) 45%, var(--ap-panel-border)); border-radius: var(--radius-md); color: var(--text-color); background: color-mix(in srgb, var(--ap-page-base) 92%, var(--accent-color)); box-shadow: 0 10px 28px rgb(0 0 0 / .2); font-size: .78rem; font-weight: 700; }
.dlp-history-toast[hidden] { display: none; }
.dlp-first-use-tooltip { position: fixed; z-index: 100; max-width: min(18rem, calc(100vw - 1rem)); padding: .48rem .65rem; border: 1px solid color-mix(in srgb, var(--accent-color) 48%, var(--ap-panel-border)); border-radius: var(--radius-md); color: var(--text-color); background: var(--ap-panel); box-shadow: 0 8px 24px rgb(0 0 0 / .22); font-size: .74rem; font-weight: 700; line-height: 1.3; pointer-events: none; }
.dlp-first-use-tooltip[hidden] { display: none; }
.dlp-empty { margin: 0; color: color-mix(in srgb, var(--text-color) 58%, transparent); font-size: .84rem; }

.dlp-panel { min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--ap-panel-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent-color) 7%, var(--ap-page-base)); }
.dlp-panel__header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 3rem; padding: .45rem .55rem .45rem var(--space-5); border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 14%, transparent); font-size: .74rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.dlp-stats { font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--text-color) 60%, transparent); }
/* A fixed height, not max-height: the Embed/Fallbacks/oEmbed/All tabs produce
   wildly different code lengths, and on desktop this box sits in the sticky
   .dlp-side column - a height that tracked content would resize that column
   on every tab click, which reads as the page jumping under a scrolled-down
   visitor even though nothing actually called scrollTo. Short tabs just leave
   blank space at the bottom instead. */
.dlp-code { height: 22rem; margin: 0; padding: var(--space-4); overflow: auto; font-size: .76rem; line-height: 1.5; }
.dlp-code code { white-space: pre; }
/* Sits at the top of the panel, above everything, since a warning about the
   code is more useful before you scroll past the whole form than after. */
.dlp-warnings { display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: .7rem .85rem; border: 1px solid color-mix(in srgb, #ef4444 40%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, #ef4444 12%, transparent); font-size: .82rem; font-weight: 650; line-height: 1.4; }
.dlp-warnings::before { content: "\f071"; flex: 0 0 auto; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #ef4444; }

/* The preview deliberately drops the site's rounded-glass styling: it is a flat
   mock of the Discord client, so what you see is what Discord will render. All
   colours below are Discord's own, per theme, not site tokens. */
.dlp-stage { display: grid; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--ap-panel-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent-color) 7%, var(--ap-page-base)); }
/* The strip itself is a toggle target (see the click handler on it), not just
   the chevron button, so cursor: pointer applies to the whole bar. */
.dlp-stage__bar, .dlp-panel__header { cursor: pointer; }
.dlp-stage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .55rem .5rem var(--space-5); border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 14%, transparent); }
.dlp-stage__title { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.dlp-stage__controls { display: flex; gap: .35rem; }
.dlp-seg { display: inline-flex; padding: 2px; border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent-color) 8%, transparent); }
.tool-card .dlp-seg button { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; min-height: 2rem; padding: .25rem .6rem; border: 0; border-radius: var(--radius-pill); color: color-mix(in srgb, var(--text-color) 70%, transparent); background: transparent; font: inherit; font-size: .76rem; font-weight: 750; cursor: pointer; }
.tool-card .dlp-seg button { box-shadow: none; }
.tool-card .dlp-seg--tabs button { padding-inline: .5rem; font-size: .72rem; }
.dlp-code-note { margin: 0; padding: .5rem var(--space-5) 0; color: color-mix(in srgb, var(--text-color) 62%, transparent); font-size: .74rem; font-weight: 650; }
.tool-card .dlp-seg button.is-active { color: var(--dlp-accent-ink, #fff); background: var(--accent-color); }
.dlp-stage__viewport { display: flex; justify-content: center; padding: var(--space-4); background: color-mix(in srgb, var(--text-color) 6%, transparent); }
/* Accent colour and spoiler live here, in the same card as the preview they
   affect, rather than as a separate section below it - a setting that
   changes what you're about to look at reads better next to the thing it
   changes than after it. */
.dlp-stage__settings { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem var(--space-5); padding: .55rem var(--space-5); border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 14%, transparent); background: color-mix(in srgb, var(--text-color) 3%, transparent); }
.dlp-stage__settings .dlp-color { flex: 1 1 220px; height: 2.1rem; }
.dlp-stage__settings .dlp-color input[type="color"] { flex-basis: 2.1rem; width: 2.1rem; }
.dlp-stage__settings .dlp-check { flex: 0 0 auto; white-space: nowrap; }
.dlp-stage__settings .dlp-accent-status { flex-basis: 100%; margin-top: 0; }
.dlp-panel__actions { display: flex; align-items: center; gap: .1rem; }
.dlp-stage.is-collapsed .dlp-stage__viewport, .dlp-stage.is-collapsed .dlp-stage__foot, .dlp-stage.is-collapsed .dlp-stage__settings,
.dlp-panel.is-collapsed .dlp-code, .dlp-panel.is-collapsed .dlp-code-note { display: none; }
.dlp-stage.is-collapsed .dlp-stage__bar, .dlp-panel.is-collapsed .dlp-panel__header { border-bottom: 0; }
.tool-card .dlp-collapse { padding: 8px 9px; }
.dlp-stage__foot[hidden] { display: none; }
.dlp-stage__foot .is-over { color: #ef4444; }
.dlp-stage__foot { padding: .45rem var(--space-5); border-top: 1px solid color-mix(in srgb, var(--accent-color) 14%, transparent); color: color-mix(in srgb, var(--text-color) 60%, transparent); font-size: .7rem; font-weight: 700; }

.dlp-client { --dlp-bg: #313338; --dlp-header: #2b2d31; --dlp-embed: #2b2d31; --dlp-text: #dbdee1; --dlp-strong: #f2f3f5; --dlp-muted: #949ba4; --dlp-line: #3f4147; --dlp-code: #1e1f22; --dlp-btn: #4e5058; --dlp-btn-text: #fff;
  width: 100%; max-width: 100%; overflow: hidden; border-radius: 8px; background: var(--dlp-bg); color: var(--dlp-text); font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: .9rem; line-height: 1.375; transition: max-width .2s ease; }
.dlp-client[data-width="mobile"] { max-width: 380px; }
.dlp-client[data-theme="light"] { --dlp-bg: #fff; --dlp-header: #f2f3f5; --dlp-embed: #f2f3f5; --dlp-text: #313338; --dlp-strong: #060607; --dlp-muted: #5c5e66; --dlp-line: #e3e5e8; --dlp-code: #ebedef; --dlp-btn: #e3e5e8; --dlp-btn-text: #313338; }

.dlp-client__header { display: flex; align-items: center; gap: .4rem; padding: .6rem .85rem; border-bottom: 1px solid var(--dlp-line); background: var(--dlp-header); color: var(--dlp-strong); font-weight: 700; font-size: .85rem; }
.dlp-client__header i { color: var(--dlp-muted); }
.dlp-client__body { padding: .85rem; }
.dlp-msg { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .75rem; }
/* Default (logged-out) look is the gradient placeholder; a real avatar image
   simply overrides the background once it loads (see setup()'s auth probe). */
.dlp-msg__avatar { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(135deg, #5865f2, #eb459e); }
.dlp-msg__avatar img:not(.dlp-msg__decoration) { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dlp-msg__avatar img[hidden] { display: none; }
/* Discord's own decorations render ~26% larger than the avatar and centered
   over it, so the ring/charm overhangs the circular avatar underneath (see
   .profile-avatar-decoration in discord_profile.css for the same pattern).
   `inset` alone doesn't size a replaced element (an <img> with width/height:
   auto renders at its own natural pixel dimensions, ignoring inset's edges -
   decoration presets ship much bigger than this 2.5rem avatar, so most of it
   spilled outside the avatar/message row). Explicit width/height set
   alongside `inset` isn't enough either: per the CSS box model, width/height
   win over the opposing inset edges (right/bottom here), so the previous
   `width: 100%; height: 100%` just shifted the image up-left by 13% at 1:1
   size instead of growing it - same bug, different shape. calc(100% + X),
   like the profile page's version, grows the box symmetrically off all four
   edges regardless of inset. */
.dlp-msg__decoration { position: absolute; inset: -13%; width: calc(100% + 26%); height: calc(100% + 26%); border-radius: 0; pointer-events: none; }
.dlp-msg__main { min-width: 0; display: grid; gap: .25rem; }
.dlp-msg__meta { display: flex; align-items: baseline; gap: .45rem; }
.dlp-msg__meta strong { color: var(--dlp-strong); font-size: .95rem; }
.dlp-msg__meta span { color: var(--dlp-muted); font-size: .7rem; }
.dlp-msg__text { overflow-wrap: anywhere; }
.dlp-msg__text a { color: #00a8fc; text-decoration: none; }

.dlp-preview { max-width: 520px; margin-top: .25rem; }
.dlp-preview__placeholder { margin: 0; padding: .8rem; border-radius: 4px; background: var(--dlp-embed); color: var(--dlp-muted); font-size: .84rem; }
.dlp-preview__container { display: grid; gap: .5rem; padding: .7rem .8rem; border-left: 4px solid var(--dlp-accent, #5865f2); border-radius: 4px; background: var(--dlp-embed); }
.dlp-preview__text :is(p, h1, h2, h3) { margin: 0 0 .2rem; }
.dlp-preview__text :is(p, h1, h2, h3):last-child { margin-bottom: 0; }
.dlp-preview__text .dlp-preview__subtext { color: var(--dlp-muted); font-size: .78em; line-height: 1.35; }
.dlp-preview__text :is(h1, h2, h3) { color: var(--dlp-strong); font-weight: 700; }
.dlp-preview__text h1 { font-size: 1.25rem; }
.dlp-preview__text h2 { font-size: 1.1rem; }
.dlp-preview__text h3 { font-size: 1rem; }
.dlp-preview__text strong { color: var(--dlp-strong); }
.dlp-preview__text code { padding: .1rem .3rem; border-radius: 3px; background: var(--dlp-code); font-family: Consolas, "Courier New", monospace; font-size: .82em; }
.dlp-preview__bullet { margin-left: .4rem; }
.dlp-preview__section { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: start; }
.dlp-preview__thumb { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: 4px; background: var(--dlp-code); }
.dlp-preview__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
.dlp-preview__gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.dlp-preview__gallery img { width: 100%; max-height: 10rem; object-fit: cover; border-radius: 4px; background: var(--dlp-code); }
.dlp-preview__buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.dlp-preview__button { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: 3px; background: var(--dlp-btn); color: var(--dlp-btn-text); font-size: .8rem; font-weight: 500; }
.dlp-preview__emoji { display: inline-block; width: 1.1em; height: 1.1em; line-height: 1; font-size: 1.1em; vertical-align: -2px; object-fit: contain; }
.dlp-preview__button i { font-size: .7em; opacity: .7; }
.dlp-preview__separator { height: 1px; margin: .15rem 0; background: var(--dlp-line); }
.dlp-preview__separator[data-spacing="large"] { margin: .55rem 0; }
.dlp-preview__separator.is-invisible { background: transparent; }

/* /e share link callout - copies a self-contained URL that server-renders
   this exact embed for Discord's crawler (see ToolsController.embed_share),
   so it's called out on its own rather than folded into the code panel's
   copy-paste tabs, which assume you're hosting the tags yourself. */
.dlp-share-discord { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); padding: var(--space-6); border: 1px solid color-mix(in srgb, #5865f2 30%, var(--ap-panel-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, #5865f2 8%, transparent); }
.dlp-share-discord__icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); color: #5865f2; background: color-mix(in srgb, #5865f2 16%, transparent); font-size: 1.1rem; }
.dlp-share-discord__text { flex: 1 1 200px; min-width: 0; }
.dlp-share-discord__text strong { display: flex; align-items: center; gap: .35rem; font-size: .88rem; }
.dlp-share-discord__text p { margin: .2rem 0 0; font-size: .8rem; opacity: .78; line-height: 1.45; }
.dlp-share-discord__button { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; white-space: nowrap; background: #5865f2; }

/* A persistent (not first-use-only, unlike .dlp-first-use-tooltip) info
   popover explaining how the /e share link actually works - hover or
   keyboard focus reveals it, CSS-only so it doesn't need its own JS wiring
   like the first-use tooltip system does. */
.dlp-info { position: relative; display: inline-flex; color: color-mix(in srgb, #5865f2 70%, var(--text-color)); cursor: help; }
.dlp-info__bubble { position: absolute; z-index: 5; bottom: calc(100% + .5rem); left: 50%; transform: translateX(-50%) translateY(4px); width: max(16rem, 60vw); max-width: 20rem; padding: .6rem .75rem; border: 1px solid color-mix(in srgb, #5865f2 40%, var(--ap-panel-border)); border-radius: var(--radius-md); color: var(--text-color); background: var(--ap-panel); box-shadow: 0 10px 26px rgb(0 0 0 / .24); font-size: .74rem; font-weight: 600; line-height: 1.45; text-transform: none; letter-spacing: normal; opacity: 0; pointer-events: none; transition: opacity var(--transition-duration), transform var(--transition-duration); }
.dlp-info__bubble code { padding: .05rem .3rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text-color) 12%, transparent); font-size: .92em; }
.dlp-info:hover .dlp-info__bubble, .dlp-info:focus-visible .dlp-info__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 480px) { .dlp-info__bubble { left: 0; transform: translateX(0) translateY(4px); } .dlp-info:hover .dlp-info__bubble, .dlp-info:focus-visible .dlp-info__bubble { transform: translateX(0) translateY(0); } }

.dlp-details { border: 1px solid color-mix(in srgb, var(--accent-color) 16%, var(--ap-panel-border)); border-radius: var(--radius-lg); }
.dlp-details summary { padding: .7rem var(--space-5); font-size: .82rem; font-weight: 750; cursor: pointer; list-style: none; }
.dlp-details summary::-webkit-details-marker { display: none; }
.dlp-details summary::before { content: "\f0da"; display: inline-block; width: 1em; margin-right: .5rem; font-family: "Font Awesome 6 Free"; font-weight: 900; transition: transform var(--transition-duration); }
.dlp-details[open] summary::before { transform: rotate(90deg); }
.dlp-details__body { display: grid; gap: .55rem; padding: 0 var(--space-5) var(--space-5); }
/* Import and the self-hosting path are secondary to building components, so
   both start collapsed as plain disclosure widgets rather than always-on cards. */
.dlp-details--import .dlp-field, .dlp-details--advanced .dlp-field { margin: 0; }
.dlp-details--advanced .dlp-details__hint strong { display: block; margin-bottom: .2rem; font-size: .82rem; font-weight: 800; color: var(--text-color); }
.dlp-details--advanced .dlp-details__hint p { margin: 0; }
/* Visually set apart from the plain Import accordion above it - dashed border
   and a muted, slightly recessed background read as "opt-in, for people who
   need it" rather than another equally-weighted primary section. */
.dlp-details--advanced { border-style: dashed; border-color: color-mix(in srgb, var(--text-color) 22%, transparent); background: color-mix(in srgb, var(--text-color) 3%, transparent); }
.dlp-details--advanced summary { display: flex; align-items: center; gap: .5rem; color: color-mix(in srgb, var(--text-color) 78%, transparent); }
.dlp-details--advanced summary::after { content: "Optional"; margin-left: auto; padding: .15rem .5rem; border-radius: var(--radius-pill); color: color-mix(in srgb, var(--text-color) 60%, transparent); background: color-mix(in srgb, var(--text-color) 8%, transparent); font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.tool-card .dlp-check { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: .45rem; font-size: .82rem; }
.tool-card .dlp-check input { flex: 0 0 auto; width: auto; }

/* Desktop: the preview and code follow you while you edit blocks on the left. */
@media (min-width: 861px) {
  .dlp-side { position: sticky; top: calc(var(--navbar-current-h, 60px) + 1rem); }
}

@media (max-width: 860px) {
  .dlp-layout { flex-direction: column; }
  .dlp-stage__viewport { padding: .5rem; }
  .dlp-client { font-size: .84rem; }
  .dlp-client[data-width="mobile"] { max-width: 100%; }
  .dlp-msg { grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; }
  .dlp-msg__avatar { width: 2rem; height: 2rem; }
  /* Mobile reads as one flow: build, then look, then copy - the preview and code
     sit right under the blocks instead of competing for a second column. */
  .dlp-add { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dlp-subcard__body { grid-template-columns: minmax(0, 1fr); }
  .dlp-text-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dlp-button-row label:first-child { grid-column: 1 / -1; }
  .dlp-code { height: 16rem; font-size: .72rem; }
  .dlp-block__actions .icon-button { min-width: 2.4rem; min-height: 2.4rem; }
}

/* iOS Safari zooms the whole page in when a focused field's text is under 16px
   and never zooms back out, which is what makes this panel look blown up and
   half off-screen after tapping a field. Only applied on touch pointers so the
   desktop type scale is untouched. */
@media (pointer: coarse) {
  [data-tool-panel="link-unfurl-builder"] :is(input:not([type="checkbox"]):not([type="color"]), textarea, select) { font-size: 16px; }
}

/* /e landing page: a static product page for a share link, reusing the same
   .dlp-client/.dlp-msg/.dlp-preview mock the live builder uses so what a
   human sees here matches what Discord actually rendered from this link.
   margin-inline: auto centers the card itself within .site-shell - without
   it, the card's own max-width just left-aligns it inside that shell's much
   wider grid track instead of sitting in the middle of the page. */
.tools-embed-page { min-height: 100vh; background-image: radial-gradient(circle at 8% 6%, color-mix(in srgb, var(--accent-color, #5865f2) 15%, transparent), transparent 28rem), radial-gradient(circle at 94% 24%, color-mix(in srgb, #9b84ee 10%, transparent), transparent 24rem); background-attachment: fixed; }
.dlp-embed-shell { max-width: 680px; margin-top: clamp(1.5rem, 4vh, 3rem); padding: 0 var(--space-5) max(var(--space-9), env(safe-area-inset-bottom)); }
.dlp-embed-card { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-6); width: 100%; min-width: 0; margin-inline: auto; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid color-mix(in srgb, var(--accent-color) 18%, var(--ap-panel-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--ap-panel, #20232d) 92%, transparent); box-shadow: 0 12px 32px rgb(0 0 0 / .16); text-align: center; }
.dlp-embed-card > * { min-width: 0; max-width: 100%; }
.dlp-embed-eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: #5865f2; font-size: .78rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.dlp-embed-title { margin: 0; }
.dlp-embed-lede { max-width: 34rem; margin: 0; color: color-mix(in srgb, var(--text-color) 72%, transparent); font-size: .92rem; line-height: 1.5; }
/* The literal /e?d=... URL, shown so a visitor can see (and copy) exactly
   what was pasted into Discord - a single-line, non-wrapping readout (long
   links scroll horizontally inside their own box) rather than reflowing the
   page around an arbitrarily long querystring. */
.dlp-embed-url { display: flex; align-items: center; gap: .4rem; width: 100%; padding: .4rem .4rem .4rem .9rem; border: 1px solid color-mix(in srgb, var(--secondary-color) 28%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--background-color) 76%, transparent); }
.dlp-embed-url__value { flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; color: color-mix(in srgb, var(--text-color) 80%, transparent); font-size: .78rem; }
/* Preview / raw embed tag / decoded payload as tabs in one container, rather
   than three boxes stacked or side by side - keeps the card one fixed size
   regardless of how many views this page ends up offering. */
.dlp-embed-mock { width: 100%; min-width: 0; background: transparent; overflow: visible; }
.dlp-embed-mock__bar { position: relative; z-index: 1; width: fit-content; max-width: calc(100% - 1rem); justify-content: center; margin: .65rem auto; padding: 3px; border-color: color-mix(in srgb, var(--text-color) 22%, transparent); background: transparent; box-shadow: 0 .45rem 1.2rem rgb(0 0 0 / .16); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); }
/* .dlp-seg/.dlp-seg--tabs button styling elsewhere is scoped under
   .tool-card (the live builder panel's own wrapper class), which this
   standalone landing page doesn't have - restated here, unscoped, so the
   tab buttons aren't left with no styling at all. */
.dlp-embed-mock__bar button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.2rem; min-height: 2rem; padding: .25rem .7rem; border: 0; border-radius: var(--radius-pill); color: color-mix(in srgb, var(--text-color) 70%, transparent); background: transparent; box-shadow: none; font: inherit; font-size: .74rem; font-weight: 750; cursor: pointer; }
.dlp-embed-mock__bar button.is-active { color: var(--dlp-accent-ink, #fff); background: var(--accent-color); }
.dlp-embed-tab-panel { display: none; }
.dlp-embed-tab-panel.is-active { display: block; }
.dlp-embed-preview-controls { display: flex; width: fit-content; margin: 0 0 .35rem auto; }
.dlp-embed-preview-controls button { display: inline-flex; align-items: center; gap: .3rem; min-height: 1.8rem; padding: .2rem .55rem; border: 0; border-radius: var(--radius-pill); color: color-mix(in srgb, var(--text-color) 70%, transparent); background: transparent; box-shadow: none; font: inherit; font-size: .7rem; font-weight: 750; cursor: pointer; }
.dlp-embed-preview-controls button.is-active { color: var(--dlp-accent-ink, #fff); background: var(--accent-color); }
.dlp-embed-mock .dlp-msg__meta { flex-wrap: wrap; }
.dlp-embed-time-picker { display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .2rem; color: var(--dlp-muted); font-size: .7rem; }
.dlp-embed-time-picker[hidden] { display: none; }
.dlp-embed-time-picker input { width: 10.4rem; min-height: 1.4rem; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; color-scheme: dark; }
.dlp-client[data-theme="light"] .dlp-embed-time-picker input { color-scheme: light; }
.dlp-embed-editable[contenteditable="true"] { outline: 1px dashed color-mix(in srgb, var(--accent-color) 70%, transparent); outline-offset: 3px; cursor: text; }
.dlp-embed-mock .dlp-client { border-radius: var(--radius-lg); text-align: left; }
.dlp-embed-mock__avatar-icon { display: grid; place-items: center; width: 100%; height: 100%; color: #fff; font-size: 1rem; }
.dlp-embed-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-5); margin-top: var(--space-2); }
.dlp-embed-source__body { position: relative; padding: var(--space-5); text-align: left; }
.dlp-embed-source__copy { position: absolute; top: var(--space-4); right: var(--space-4); }
.dlp-embed-source__explanation { padding-right: 2.75rem; color: color-mix(in srgb, var(--text-color) 78%, transparent); font-size: .82rem; line-height: 1.5; }
.dlp-embed-source__explanation p { margin: 0; }
.dlp-embed-source__explanation p + p { margin-top: .45rem; }
.dlp-embed-source__explanation strong { color: var(--text-color); }
.dlp-embed-source__explanation code { padding: .08rem .3rem; border-radius: 3px; background: color-mix(in srgb, var(--text-color) 10%, transparent); font-family: var(--codeblock-font-family); font-size: .9em; }
.dlp-embed-source .dlp-code { height: min(28rem, 55vh); margin-top: .75rem; padding: 1rem 1.15rem; border: 1px solid color-mix(in srgb, var(--text-color) 12%, transparent); border-radius: var(--radius-md); color: var(--codeblock-text-color); background: var(--codeblock-bg, #171923); text-align: left; tab-size: 2; }
/* .dlp-code code's base white-space: pre (tools.css above) never wraps -
   fine for the live builder's own generated code, which is already
   line-broken JSON, but component_tag_source/decoded_payload_json here are
   Python's json.dumps reformatted with a 4-space indent, and long string
   values (a URL, a paragraph of text content) can still be one unbroken run
   within a line. Override to pre-wrap + break-all so those wrap at the
   panel's width instead of forcing horizontal scroll on what's meant to be
   a quick "here's proof" readout. */
.dlp-embed-source .dlp-code code { white-space: pre-wrap; word-break: break-all; }
.dlp-syntax-tag { color: #7ee787; }
.dlp-syntax-attr, .dlp-syntax-key { color: #79c0ff; }
.dlp-syntax-string { color: #a5d6ff; }
.dlp-syntax-number { color: #d2a8ff; }
.dlp-syntax-literal { color: #ff7b72; }
@media (max-width: 560px) { .dlp-embed-shell { margin-top: 4rem; padding-inline: var(--space-4); } .dlp-embed-card { padding: var(--space-5); } .dlp-embed-mock__bar { justify-content: flex-start; overflow-x: auto; border-radius: 0; } .dlp-embed-mock__bar button { flex: 0 0 auto; } }

/* ── Category tabs ───────────────────────────────────────────────────────
   The launcher shows one category at a time: a tab row under the search
   bar, and the selected group laid out as a grid of tools beneath it. A
   search swaps the tabs out for matches from every category (with their
   labels back, so it's clear where each came from). */
.tools-page .tools-launcher-card {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: var(--section-card-padding);
}
.tools-page .tools-launcher-card::after { display: none; }
.tools-page .tools-command-bar { width: 100%; max-width: none; margin: 0; }

.tools-tabs {
  display: flex;
  gap: .4rem;
  width: 100%;
  padding: .35rem;
  overflow-x: auto;
  border: 1px solid var(--site-container-border);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--text-color) 4%, transparent);
  scrollbar-width: none;
}
.tools-tabs::-webkit-scrollbar { display: none; }
.tools-tabs[hidden] { display: none; }

.tools-tab {
  --group-color: var(--accent-color);
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.6rem;
  padding: .45rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: color-mix(in srgb, var(--text-color) 68%, transparent);
  background: transparent;
  font: inherit;
  font-size: .85rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-duration) var(--transition-easing), background var(--transition-duration) var(--transition-easing), border-color var(--transition-duration) var(--transition-easing);
}
.tools-tab::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--group-color); }
.tools-tab:nth-child(1) { --group-color: #4da3ff; }
.tools-tab:nth-child(2) { --group-color: #f59e42; }
.tools-tab:nth-child(3) { --group-color: #31c48d; }
.tools-tab:nth-child(4) { --group-color: #f05fa6; }
.tools-tab:nth-child(5) { --group-color: #a875ff; }
.tools-tab:nth-child(6) { --group-color: #5865f2; }
.tools-tab__count { font-size: .72rem; font-variant-numeric: tabular-nums; opacity: .55; }
html:not([data-hover-effects="off"]) .tools-tab:hover { color: var(--text-color); background: color-mix(in srgb, var(--group-color) 8%, transparent); }
.tools-tab[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--group-color) 38%, transparent);
  color: var(--text-color);
  background: color-mix(in srgb, var(--group-color) 16%, transparent);
}
.tools-tab:focus-visible { outline: 2px solid color-mix(in srgb, var(--group-color) 60%, transparent); outline-offset: 2px; }

/* One category on screen at a time, so the nav is a single column of
   groups and each group lays its tools out across the card. */
.tools-page .tools-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 0; }
.tools-page .tools-nav .tools-nav__group {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: .5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  animation: none;
}
.tools-page .tools-nav .tools-nav__group[hidden] { display: none; }
.tools-page .tools-nav .tools-nav__label { display: none; grid-column: 1 / -1; }
.tools-page .is-searching .tools-nav .tools-nav__label { display: flex; }
.tools-page .tools-nav a {
  min-height: 3rem;
  padding: .45rem .6rem;
  border: 1px solid var(--site-container-border);
  border-radius: var(--surface-radius-inner);
  background: color-mix(in srgb, var(--text-color) 3%, transparent);
}

/* With a tool open the page header goes too, not just the tool list, so
   the tool sits right under the navbar. */
.tools-page .page-header-row:has(+ .tools-launcher-row.is-collapsed) { display: none; }
.tools-page [data-tools-landing].is-collapsed .tools-tabs { display: none; }
.tools-page [data-tools-landing].is-collapsed .tools-launcher-card { gap: 0; }

@media (max-width: 620px) {
  .tools-tab { flex: 0 0 auto; padding-inline: .85rem; }
  .tools-page .tools-nav .tools-nav__group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-page .tools-command-bar__hint { display: none; }
}
/* "New" sits at the end of the row so every tile is the same height. */
.tools-page .tools-nav a { grid-template-columns: 2rem minmax(0, 1fr) auto; }
@media (max-width: 620px) {
  /* Two tiles per row leaves no room for the "New" pill; a dot keeps the
     hint without truncating the tool name. */
  .tools-page .tools-nav .tools-nav__new { width: .5rem; height: .5rem; padding: 0; overflow: hidden !important; font-size: 0; background: var(--accent-color); }
}

/* Keep the launcher search as one clear control, including on narrow screens. */
.tools-page .tools-command-bar { width: min(100%, 760px); padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.tools-page .tools-command-bar .tools-search { width: 100%; height: 3.25rem; padding: 0 .9rem; border: 1px solid color-mix(in srgb, var(--secondary-color) 28%, var(--ap-panel-border)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--ap-page-base) 64%, var(--background-color)); box-shadow: var(--shadow-sm); }
.tools-page .tools-search__icon { width: 1.85rem; height: 1.85rem; margin-right: .65rem; border-radius: .55rem; color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 12%, transparent); box-shadow: none; }
.tools-page .tools-command-bar .tools-search input { min-width: 0; background: transparent !important; font-size: .95rem; }
.tools-page .tools-search__kbd { margin-left: .4rem; }
@media (max-width: 620px) { .tools-page .tools-command-bar .tools-search { height: 3.1rem; padding-inline: .7rem; } }

/* Categories are primary launcher actions, so show them as a button grid
   instead of an easy-to-miss horizontally scrolling strip. */
.tools-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
.tools-tabs { gap: .55rem; padding: 0; border: 0; border-radius: 0; background: transparent; }
.tools-tabs .tools-tab { display: inline-flex; flex: none; width: 100%; min-width: 0; min-height: 3.1rem; padding: .55rem .8rem; border: 1px solid var(--site-container-border); border-radius: var(--surface-radius-inner); background: color-mix(in srgb, var(--text-color) 4%, transparent); }
.tools-tabs .tools-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--group-color) 48%, var(--site-container-border)); background: color-mix(in srgb, var(--group-color) 14%, transparent); }
@media (max-width: 720px) {
  .tools-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-tab { justify-content: flex-start; }
  .tools-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Discord emojis */
.bitfield-inputs { align-items: end; }
.bitfield-inputs > label:first-child { flex: 1 1 15rem; }
.bitfield-inputs > label:last-child { flex: 0 1 9rem; }
.bitfield-summary { margin: 0; }
.bitfield-board { padding: var(--space-3); border: 1px solid var(--site-container-border); border-radius: var(--surface-radius-inner); background: color-mix(in srgb, var(--text-color) 3%, transparent); }
.bitfield-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; }
.tool-card button.bitfield-bit { display: grid; place-items: center; gap: 1px; min-height: 3.25rem; margin: 0; padding: 5px; border: 1px solid var(--site-container-border); border-radius: var(--radius-sm); color: color-mix(in srgb, var(--text-color) 64%, transparent); background: color-mix(in srgb, var(--text-color) 3%, transparent); box-shadow: none; font: inherit; cursor: pointer; }
.tool-card button.bitfield-bit strong { color: var(--text-color); font-size: .9rem; }.tool-card button.bitfield-bit span { font-size: .62rem; font-weight: 700; }
.tool-card button.bitfield-bit[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent-color) 54%, var(--site-container-border)); color: var(--background-color); background: var(--accent-color); }.tool-card button.bitfield-bit[aria-pressed="true"] strong { color: inherit; }
.tool-card button.bitfield-bit:hover, .tool-card button.bitfield-bit:focus-visible { transform: none; border-color: color-mix(in srgb, var(--accent-color) 54%, var(--site-container-border)); }
@media (max-width: 420px) { .bitfield-inputs > label { flex-basis: 100% !important; }.bitfield-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Discord permissions: a named picker keeps the common task readable, while
   raw bitfields and channel override inputs remain available for debugging. */
.discord-permissions-picker { display: grid; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--site-container-border); border-radius: var(--surface-radius-inner); background: color-mix(in srgb, var(--accent-color) 5%, transparent); }
.discord-permissions-picker h3 { margin: 0; font-size: .95rem; }.discord-permissions-picker p { margin: 3px 0 0; font-size: .8rem; opacity: .72; }
.discord-permissions-picker__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 6px; }
.discord-permissions-picker__grid label { display: flex; align-items: center; gap: .5rem; min-height: 2.3rem; padding: .45rem .55rem; border: 1px solid color-mix(in srgb, var(--secondary-color) 20%, transparent); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--text-color) 3%, transparent); font-size: .76rem; font-weight: 650; cursor: pointer; }
.discord-permissions-picker__grid label:has(input:checked) { border-color: color-mix(in srgb, var(--accent-color) 52%, var(--site-container-border)); background: color-mix(in srgb, var(--accent-color) 13%, transparent); }
.discord-permissions-picker__grid input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent-color); }
.discord-permissions-advanced { padding: 0 var(--space-5) var(--space-5); border: 1px solid var(--site-container-border); border-radius: var(--surface-radius-inner); }
.discord-permissions-advanced > summary { padding: var(--space-5) 0; font-size: .84rem; font-weight: 750; cursor: pointer; }.discord-permissions-advanced[open] > summary { margin-bottom: var(--space-3); border-bottom: 1px solid color-mix(in srgb, var(--secondary-color) 18%, transparent); }
.discord-permissions-advanced > p { margin: 0 0 var(--space-4); font-size: .8rem; opacity: .72; }
@media (max-width: 480px) { .discord-permissions-picker__grid { grid-template-columns: 1fr 1fr; }.discord-permissions-picker__grid label { font-size: .7rem; } }

.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.emoji-grid:empty { display: none; }
.emoji-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--secondary-color) 20%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-color) 8%, transparent); }
.emoji-card.is-missing { opacity: .6; }
.emoji-card__preview { display: grid; place-items: center; height: 140px; overflow: hidden; border-radius: var(--radius-sm); background: #313338; font-size: 2rem; color: #b5bac1; }
.emoji-card__preview.is-light { background: #fff; color: #4e5058; }
.emoji-card__preview.is-checker { background: repeating-conic-gradient(#c9ccd1 0% 25%, #f2f3f5 0% 50%) 50% / 16px 16px; color: #4e5058; }
.emoji-card__preview img { max-width: 100%; max-height: 128px; object-fit: contain; }
.emoji-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .8rem; overflow-wrap: anywhere; }
.emoji-card__meta span { opacity: .72; }
.emoji-card__unicode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: var(--space-2); border-top: 1px solid color-mix(in srgb, var(--secondary-color) 14%, transparent); font-size: .72rem; }
.emoji-card__unicode > span:first-child { flex: 0 0 100%; color: color-mix(in srgb, var(--text-color) 68%, transparent); font-weight: 700; }
.tool-card button.emoji-chip { display: inline-grid; place-items: center; min-width: 2rem; min-height: 2rem; margin: 0; padding: 4px; border: 1px solid color-mix(in srgb, var(--secondary-color) 24%, transparent); border-radius: var(--radius-sm); color: var(--text-color); background: color-mix(in srgb, var(--primary-color) 7%, transparent); box-shadow: none; }
.tool-card button.emoji-chip.is-copied { border-color: var(--accent-color); }
.emoji-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: auto; }
.tool-card :is(button, a).emoji-action { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.1rem; margin: 0; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--secondary-color) 24%, transparent); border-radius: var(--radius-pill); color: var(--text-color); background: transparent; box-shadow: none; font-size: .76rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
html:not([data-hover-effects="off"]) .tool-card :is(button, a).emoji-action:hover { border-color: color-mix(in srgb, var(--accent-color) 60%, transparent); background: color-mix(in srgb, var(--accent-color) 10%, transparent); }
.emoji-chip__char { font-size: 1.25rem; line-height: 1; }
.emoji-tab { display: flex; flex-direction: column; gap: var(--space-6); }
.emoji-tab[hidden] { display: none; }
.emoji-card { position: relative; }
.tool-card button.emoji-card__star { position: absolute; top: 18px; right: 18px; z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgb(0 0 0 / .45); box-shadow: none; font-size: .85rem; }
.tool-card button.emoji-card__star[aria-pressed="true"] { color: #f7c948; }
.emoji-card__lottie { font-size: .8rem; line-height: 1.4; text-align: center; }
.emoji-card__lottie i { font-size: 1.4rem; }
.emoji-card__meta > span:not(.field-hint) + span:not(.field-hint) { opacity: .72; }

.emoji-shelf { display: flex; flex-direction: column; gap: var(--space-3); }
.emoji-shelf[hidden], .emoji-shelf__row[hidden] { display: none; }
.emoji-content-filter { display: flex; justify-content: flex-start; }
.emoji-content-filter[hidden] { display: none; }
.tool-card .emoji-content-filter__controls { gap: 2px; padding: 2px; }
.tool-card .emoji-content-filter__controls button { min-width: 0; padding: 5px 8px; font-size: .72rem; }
.emoji-shelf__row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.emoji-shelf__label { flex: 0 0 auto; font-size: .76rem; font-weight: 750; opacity: .75; }
.emoji-shelf__items, .emoji-picks { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.emoji-shelf__items { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.tool-card button.emoji-pick { display: grid; place-items: center; flex: 0 0 auto; width: 2.6rem; height: 2.6rem; min-height: 0; margin: 0; padding: 4px; border: 1px solid color-mix(in srgb, var(--secondary-color) 22%, transparent); border-radius: var(--radius-sm); color: var(--text-color); background: color-mix(in srgb, var(--primary-color) 8%, transparent); box-shadow: none; }
.tool-card button.emoji-pick img { width: 100%; height: 100%; object-fit: contain; }
.tool-card button.emoji-pick.is-selected { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 16%, transparent); }

.emoji-zip-options { display: flex; flex-direction: column; gap: var(--space-4); padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--secondary-color) 20%, transparent); border-radius: var(--radius-md); }
.emoji-zip-options summary { cursor: pointer; font-size: .84rem; font-weight: 750; }
.emoji-zip-options[open] summary { margin-bottom: var(--space-4); }

.emoji-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid color-mix(in srgb, var(--secondary-color) 24%, transparent); border-radius: var(--radius-lg); color: var(--text-color); background: var(--background-color); box-shadow: 0 24px 60px rgb(0 0 0 / .45); }
/* `.tool-card > *` makes every panel child position: relative, which pulls a
   modal <dialog> out of its viewport-fixed spot - on a phone it opened at the
   very top of the page instead of over the card that was tapped. */
.tool-card > .emoji-dialog { position: fixed; inset: 0; margin: auto; }
.emoji-dialog::backdrop { background: rgb(0 0 0 / .55); backdrop-filter: blur(3px); }
.emoji-inspector { display: flex; flex-direction: column; gap: var(--space-6); padding: 18px; }
.emoji-inspector__header { display: flex; align-items: center; gap: var(--space-4); }
.emoji-inspector__header img { object-fit: contain; }
.emoji-inspector__header > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.emoji-inspector__header h3, .emoji-inspector__section h3 { margin: 0; font-size: 1rem; }
.emoji-inspector__section { display: flex; flex-direction: column; gap: var(--space-3); }
.emoji-inspector__section p { margin: 0; font-size: .84rem; }
.emoji-inspector__body { display: flex; flex-direction: column; gap: var(--space-3); }
.emoji-lottie { display: grid; place-items: center; width: 180px; height: 180px; border-radius: var(--radius-sm); background: #313338; }

.discord-mock-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.discord-mock { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); font-family: "gg sans", "Noto Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.375; }
.discord-mock.is-dark { color: #dbdee1; background: #313338; }
.discord-mock.is-light { color: #313338; background: #fff; border: 1px solid #e3e5e8; }
.discord-mock__message { display: flex; gap: 12px; }
.discord-mock__avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #5865f2, #eb459e); }
.discord-mock__author { margin-right: 6px; font-weight: 600; }
.discord-mock.is-dark .discord-mock__author { color: #f2f3f5; }
.discord-mock.is-light .discord-mock__author { color: #060607; }
.discord-mock__time { font-size: 12px; opacity: .6; }
.discord-mock__emoji { width: 1.375em; height: 1.375em; vertical-align: bottom; object-fit: contain; }
.discord-mock__emoji.is-jumbo { width: 48px; height: 48px; }
.discord-mock__sticker img { width: 160px; height: 160px; object-fit: contain; }
.discord-mock__reactions { display: flex; padding-left: 48px; }
.discord-mock__reaction { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 600; }
.discord-mock__reaction .discord-mock__emoji { width: 16px; height: 16px; }
.discord-mock.is-dark .discord-mock__reaction { background: rgb(88 101 242 / .15); border-color: #5865f2; color: #dee0fc; }
.discord-mock.is-light .discord-mock__reaction { background: rgb(88 101 242 / .1); border-color: #5865f2; color: #4752c4; }

.emoji-sizes { width: 100%; border-collapse: collapse; font-size: .82rem; }
.emoji-sizes th, .emoji-sizes td { padding: 6px 8px; border-bottom: 1px solid color-mix(in srgb, var(--secondary-color) 16%, transparent); text-align: left; }
.emoji-sizes th { font-weight: 650; }
.emoji-sizes__weight, .emoji-sizes__pixels { font-family: var(--codeblock-font-family); white-space: nowrap; }
.emoji-sizes td:last-child { text-align: right; }
.emoji-sizes tr.is-smallest th::after { content: " · lightest"; color: var(--accent-color); font-weight: 750; }
.emoji-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: .84rem; }
.emoji-facts dt { font-weight: 700; opacity: .75; }
.emoji-facts dd { margin: 0; overflow-wrap: anywhere; }
.emoji-owner { display: flex; align-items: center; gap: var(--space-4); font-size: .86rem; }
.emoji-owner img { flex: 0 0 auto; border-radius: 30%; }
.emoji-owner p { margin: 2px 0 0; }

.emoji-unicode-detail { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.emoji-unicode-detail > div { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; min-width: 220px; }

.emoji-upload { display: flex; flex-direction: column; gap: var(--space-4); }
.emoji-upload:empty { display: none; }
.emoji-upload__preview { max-width: 160px; max-height: 160px; object-fit: contain; border-radius: var(--radius-sm); background: repeating-conic-gradient(#c9ccd1 0% 25%, #f2f3f5 0% 50%) 50% / 16px 16px; }
.emoji-upload__verdict { margin: 0; font-weight: 750; }
.emoji-checks { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: .86rem; }
.emoji-checks li { display: flex; align-items: baseline; gap: 8px; }
.emoji-checks .is-ok i { color: #3ba55c; }
.emoji-checks .is-bad i { color: #ed4245; }

.emoji-view-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.tool-card .emoji-view-bar__size { flex-direction: row; align-items: center; gap: var(--space-3); }
.emoji-view-bar__size[hidden] { display: none; }
.emoji-view-bar__size select { width: auto; padding: 7px 10px; }
.emoji-grid.is-compact { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-3); }
.emoji-grid.is-discord { display: block; }
.emoji-card.is-highlighted, .emoji-tile.is-highlighted { animation: emoji-highlight 1.6s ease-out; }
@keyframes emoji-highlight { 0%, 40% { outline: 3px solid var(--accent-color); outline-offset: 2px; } 100% { outline: 3px solid transparent; outline-offset: 6px; } }

.emoji-tile { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid color-mix(in srgb, var(--secondary-color) 20%, transparent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--primary-color) 8%, transparent); overflow: hidden; }
.emoji-tile.is-missing { opacity: .55; }
.tool-card button.emoji-tile__open { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 0; margin: 0; padding: 10px 8px 8px; border: 0; border-radius: 0; color: var(--text-color); background: transparent; box-shadow: none; font-size: .72rem; font-weight: 650; }
.emoji-tile__open img, .emoji-tile__open > i { display: grid; place-items: center; width: 64px; height: 64px; object-fit: contain; font-size: 1.6rem; }
.emoji-tile__open.is-dark img, .emoji-tile__open.is-dark > i { background: #313338; border-radius: var(--radius-sm); }
.emoji-tile__open.is-light img, .emoji-tile__open.is-light > i { background: #fff; border-radius: var(--radius-sm); }
.emoji-tile__open.is-checker img, .emoji-tile__open.is-checker > i { background: repeating-conic-gradient(#c9ccd1 0% 25%, #f2f3f5 0% 50%) 50% / 12px 12px; border-radius: var(--radius-sm); }
.emoji-tile__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emoji-tile__quick { display: flex; justify-content: center; border-top: 1px solid color-mix(in srgb, var(--secondary-color) 16%, transparent); }
.tool-card .emoji-tile__quick .icon-button { flex: 1; min-height: 0; padding: 6px 0; border-radius: 0; font-size: .78rem; }
.tool-card .emoji-tile__quick .emoji-tile__star.is-on { color: #f7c948; }

.emoji-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.emoji-pager[hidden] { display: none; }
.tool-card .emoji-pager button { align-self: auto; min-width: 2.4rem; min-height: 2.2rem; margin: 0; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--secondary-color) 24%, transparent); color: var(--text-color); background: transparent; box-shadow: none; font-size: .8rem; }
.tool-card .emoji-pager button[aria-current="page"] { color: #fff; border-color: var(--accent-color); background: var(--accent-color); }
.emoji-pager__info { margin-left: var(--space-3); font-size: .78rem; opacity: .7; }

/* "In Discord": a Discord-like window with a channel and the emoji picker. */
.discord-window { display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: min(640px, 80vh); overflow: hidden; border-radius: var(--radius-md); font-family: "gg sans", "Noto Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.375; }
.discord-window.is-dark { --dw-bg: #313338; --dw-side: #2b2d31; --dw-input: #383a40; --dw-text: #dbdee1; --dw-strong: #f2f3f5; --dw-muted: #949ba4; --dw-line: #1f2023; --dw-hover: #404249; color: var(--dw-text); background: var(--dw-bg); }
.discord-window.is-light { --dw-bg: #fff; --dw-side: #f2f3f5; --dw-input: #ebedef; --dw-text: #313338; --dw-strong: #060607; --dw-muted: #5c5e66; --dw-line: #e3e5e8; --dw-hover: #e3e5e8; color: var(--dw-text); background: var(--dw-bg); border: 1px solid var(--dw-line); }
.discord-window__channel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.discord-window__header { display: flex; box-sizing: border-box; width: 100%; min-width: 0; align-items: center; gap: 8px; min-height: 52px; padding: 12px 16px; border-bottom: 1px solid var(--dw-line); color: var(--dw-muted); }
.discord-window__header strong { color: var(--dw-strong); }
.discord-window__topic { flex: 1; min-width: 0; overflow: hidden; padding-left: 10px; border-left: 1px solid var(--dw-line); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.discord-window__log { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.discord-window__message { display: flex; gap: 14px; }
.discord-window__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #5865f2, #eb459e); }
.discord-window__message:nth-child(3n + 2) .discord-window__avatar { background: linear-gradient(135deg, #23a55a, #00a8fc); }
.discord-window__body { min-width: 0; }
.discord-window__author { margin-right: 8px; color: var(--dw-strong); font-weight: 600; }
.discord-window__time { color: var(--dw-muted); font-size: 12px; }
.discord-window__text { overflow-wrap: anywhere; }
.discord-window__emoji { width: 1.375em; height: 1.375em; vertical-align: bottom; object-fit: contain; cursor: pointer; }
.discord-window__emoji.is-jumbo { width: 48px; height: 48px; margin: 2px 2px 0 0; }
.discord-window__reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tool-card button.discord-window__reaction { display: inline-flex; align-items: center; gap: 6px; min-height: 0; margin: 0; padding: 2px 6px; border: 1px solid transparent; border-radius: 8px; color: var(--dw-muted); background: var(--dw-side); box-shadow: none; font-size: 14px; font-weight: 600; }
.tool-card button.discord-window__reaction.is-mine { border-color: #5865f2; color: #5865f2; background: rgb(88 101 242 / .15); }
.discord-window__reaction .discord-window__emoji { width: 16px; height: 16px; }
.tool-card button.discord-window__sticker { display: block; width: 160px; height: 160px; min-height: 0; margin: 4px 0 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--dw-muted); }
.discord-window__sticker img { width: 160px; height: 160px; object-fit: contain; }
.discord-window__note { margin: 6px 0 0; color: var(--dw-muted); font-size: 12px; }
.discord-window__read-only { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px 16px; padding: 12px 16px; border: 1px solid var(--dw-line); border-radius: 12px; color: var(--dw-strong); background: var(--dw-side); font-size: 14px; font-weight: 600; }
.discord-window__read-only i { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; color: #fff; background: #5865f2; font-size: 14px; }
.discord-window__picker { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--dw-line); background: var(--dw-side); }
.discord-window__tabs { display: flex; gap: 4px; padding: 10px 10px 0; }
.tool-card .discord-window__tabs button { min-height: 0; margin: 0; padding: 4px 10px; border: 0; border-radius: 4px; color: var(--dw-muted); background: transparent; box-shadow: none; font-size: 14px; font-weight: 600; }
.tool-card .discord-window__tabs button.is-active { color: var(--dw-strong); background: var(--dw-hover); }
.tool-card .discord-window input.discord-window__search { margin: 10px; width: calc(100% - 20px); padding: 6px 10px; border: 0; border-radius: 4px; color: var(--dw-text); background: var(--dw-bg); font-size: 14px; }
.discord-window__grid { display: grid; grid-template-columns: repeat(auto-fill, 48px); align-content: start; gap: 0; flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 10px; }
.discord-window__grid.is-stickers { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.tool-card button.discord-window__cell { display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-height: 0; margin: 0; padding: 6px; border: 0; border-radius: 4px; color: var(--dw-muted); background: transparent; box-shadow: none; font-size: 11px; }
.tool-card button.discord-window__cell:hover, .tool-card button.discord-window__cell:focus-visible { background: var(--dw-hover); transform: none; opacity: 1; }
.discord-window__cell img { width: 100%; height: 100%; object-fit: contain; }
.discord-window__footer { padding: 10px 12px; border-top: 1px solid var(--dw-line); color: var(--dw-strong); font-size: 14px; font-weight: 600; background: var(--dw-bg); }
@media (max-width: 720px) {
  .discord-window { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 260px; height: 760px; }
  .discord-window__picker { border-left: 0; border-top: 1px solid var(--dw-line); }
}
/* A logged-in visitor's own avatar (and decoration ring) in the mock messages. */
.discord-mock__avatar.has-image, .discord-window__avatar.has-image { position: relative; background: none; }
.discord-mock__avatar.has-image img, .discord-window__avatar.has-image img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.discord-mock__avatar.has-image img.is-decoration, .discord-window__avatar.has-image img.is-decoration { position: absolute; inset: -10%; width: 120%; height: 120%; border-radius: 0; pointer-events: none; }
.emoji-my-servers { display: flex; flex-direction: column; gap: var(--space-3); }
.emoji-my-servers[hidden] { display: none; }
.emoji-my-servers p { margin: 0; }
.emoji-my-servers__list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.emoji-popular-servers { display: flex; flex-direction: column; gap: var(--space-3); padding: 14px; border: 1px solid color-mix(in srgb, var(--accent-color) 20%, var(--secondary-color)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-color) 5%, transparent); }
.emoji-popular-servers__header h3 { margin: 0; font-size: .98rem; }
.emoji-popular-servers__header h3 i { margin-right: 6px; color: var(--accent-color); }
.emoji-popular-servers__header p { margin: 3px 0 0; font-size: .8rem; opacity: .72; }
.emoji-popular-servers__items { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-card button.emoji-popular-server { min-height: 0; margin: 0; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--secondary-color) 20%, transparent); border-radius: var(--radius-pill); color: var(--text-color); background: color-mix(in srgb, var(--primary-color) 8%, transparent); box-shadow: none; font-size: .78rem; font-weight: 700; }
.tool-card .emoji-server-suggestion { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.tool-card .emoji-server-suggestion label { gap: 4px; font-size: .78rem; font-weight: 700; }
.tool-card .emoji-server-suggestion input { padding: 7px 10px; font-size: .84rem; }
.tool-card .emoji-server-suggestion button { min-height: 2.25rem; margin: 0; padding: 6px 10px; font-size: .8rem; white-space: nowrap; }
.emoji-server-suggestion + .field-hint { margin: 0; }
@media (max-width: 420px) { .tool-card .emoji-server-suggestion { grid-template-columns: 1fr; } .tool-card .emoji-server-suggestion button { width: 100%; } }
.tool-card button.emoji-server-pick { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 6px; width: 88px; min-height: 0; margin: 0; padding: 8px 4px; border: 1px solid color-mix(in srgb, var(--secondary-color) 20%, transparent); border-radius: var(--radius-md); color: var(--text-color); background: color-mix(in srgb, var(--primary-color) 8%, transparent); box-shadow: none; font-size: .7rem; font-weight: 650; }
.emoji-server-pick img, .emoji-server-pick__initials { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 30%; object-fit: cover; color: #fff; background: #5865f2; font-size: .9rem; font-weight: 700; }
.emoji-server-pick > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* /emoji/<id> and /sticker/<id> share pages. */
.emoji-share { display: flex; flex-direction: column; align-items: center; text-align: center; }
.emoji-share__stage { display: grid; place-items: center; width: min(280px, 100%); aspect-ratio: 1; margin: var(--space-6) 0; border-radius: var(--radius-lg); background: #313338; }
.emoji-share__stage img { width: 70%; height: 70%; object-fit: contain; }
.emoji-share__groups { display: grid; gap: var(--space-5); width: min(640px, 100%); margin: var(--space-6) 0; }
.emoji-share__group { width: 100%; text-align: left; }
.emoji-share__group h2 { margin: 0 0 var(--space-2); font-size: 1rem; color: #dbdee1; }
.emoji-share__group img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); }
.emoji-share__lottie { display: flex; flex-direction: column; gap: 8px; padding: 20px; color: #dbdee1; font-size: .9rem; }
.emoji-share__lottie i { font-size: 2rem; }
.emoji-share .profile-nav { justify-content: center; }
/* An odd last card action (e.g. Details after Share) spans the whole row. */
.emoji-card__actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.emoji-editor { display: flex; flex-direction: column; gap: var(--space-4); padding: 14px; border: 1px solid color-mix(in srgb, var(--secondary-color) 20%, transparent); border-radius: var(--radius-md); }
.emoji-editor h3 { margin: 0; font-size: 1rem; }
.emoji-editor p { margin: 0; }
.emoji-editor [hidden] { display: none; }
.emoji-editor__stage { display: grid; place-items: center; min-height: 140px; padding: 12px; border-radius: var(--radius-sm); background: repeating-conic-gradient(#c9ccd1 0% 25%, #f2f3f5 0% 50%) 50% / 16px 16px; }
.emoji-editor__canvas { max-width: 100%; max-height: 320px; image-rendering: auto; }
/* Thumbnail | title | close on top, the Share button under the title - so
   a long title never runs under the button on a narrow screen. */
.tool-card .emoji-inspector__header { display: grid; padding-bottom: 0; border-bottom: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.emoji-inspector__header > div { overflow-wrap: anywhere; }
.emoji-inspector__header > .emoji-action { grid-row: 2; grid-column: 2; justify-self: start; }
.emoji-inspector__header > .icon-button { grid-row: 1; grid-column: 3; }
.emoji-inspector__header > img { grid-row: 1 / span 2; }

/* Server tab: no empty gap under the Load button, and room between the
   server's header and its buttons. */
.emoji-tab [data-server-status]:empty { display: none; }
[data-server-result] { display: flex; flex-direction: column; gap: var(--space-4); }
[data-server-result]:empty { display: none; }
[data-server-result] .emoji-owner { align-items: flex-start; }
[data-server-result] .emoji-owner p { margin-top: 4px; }

/* The picker's rows get explicit heights: sized from `aspect-ratio` cells
   holding percentage-height images, Safari collapsed them and the cells
   spilled over one another. Fixed rows and fixed image boxes can't. */
.discord-window__grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); grid-auto-rows: 48px; }
.discord-window__grid.is-stickers { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-auto-rows: 104px; }
.tool-card button.discord-window__cell { width: 100%; height: 100%; aspect-ratio: auto; overflow: hidden; }
.discord-window__cell img { display: block; width: 36px; height: 36px; max-width: 100%; max-height: 100%; }
.discord-window__grid.is-stickers .discord-window__cell img { width: 92px; height: 92px; }
@media (max-width: 720px) {
  .discord-window { grid-template-rows: minmax(0, 1fr) 360px; height: 820px; }
}

/* Landing callout for the per-tool Share button. Hidden once a tool is open
   or a search is running, where it would only push results down. */
.tools-share-promo { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-6) var(--space-7); width: min(var(--site-layout-max), 100%); margin: var(--space-8) auto 0; padding: var(--space-6) var(--space-7); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent-color) 30%, var(--ap-panel-border)); border-radius: var(--surface-radius-inner, var(--radius-lg)); background: linear-gradient(110deg, color-mix(in srgb, var(--accent-color) 14%, transparent), color-mix(in srgb, var(--secondary-color) 8%, transparent) 60%, transparent); }
[data-tools-landing].is-collapsed .tools-share-promo, [data-tools-landing].is-searching .tools-share-promo { display: none; }
.tools-share-promo__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--accent-color), var(--secondary-color)); font-size: 1.1rem; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent-color) 30%, transparent); }
.tools-share-promo__text h2 { margin: 0 0 .25rem; font-size: 1rem; }
.tools-share-promo__text p { margin: 0; font-size: .84rem; line-height: 1.5; opacity: .8; }
.tools-share-promo__text strong { color: color-mix(in srgb, var(--accent-color) 80%, var(--text-color)); }
.tools-share-promo__demo { display: flex; align-items: center; gap: .6rem; font-size: .76rem; font-weight: 750; white-space: nowrap; }
.tools-share-promo__button { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: 7px 13px; font: inherit; cursor: pointer; border: 1px solid color-mix(in srgb, var(--accent-color) 38%, transparent); border-radius: var(--radius-pill); color: color-mix(in srgb, var(--accent-color) 80%, var(--text-color)); background: color-mix(in srgb, var(--accent-color) 14%, transparent); animation: tool-share-nudge 2.8s var(--transition-easing) infinite; }
.tools-share-promo__arrow { opacity: .45; }
.tools-share-promo__button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-color) 60%, transparent); outline-offset: 2px; }
.tools-share-promo__button[data-state="copied"] { border-color: color-mix(in srgb, #16a34a 45%, transparent); color: color-mix(in srgb, #16a34a 80%, var(--text-color)); background: color-mix(in srgb, #16a34a 14%, transparent); animation: none; }
/* Arrived via a shared share message: louder border, and the icon spins once. */
.tools-share-promo.is-meta { border-color: color-mix(in srgb, var(--accent-color) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 14%, transparent); }
.tools-share-promo.is-meta .tools-share-promo__icon { animation: tools-share-promo-spin .9s var(--transition-easing) 1; }
@keyframes tools-share-promo-spin { from { transform: rotate(0) scale(.6); } to { transform: rotate(360deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .tools-share-promo.is-meta .tools-share-promo__icon { animation: none; } }
.tools-share-promo__link { display: inline-flex; align-items: center; gap: .4rem; max-width: 17rem; padding: 7px 12px; overflow: hidden; border-radius: var(--radius-sm); font-family: var(--codeblock-font-family); font-weight: 500; text-overflow: ellipsis; background: color-mix(in srgb, var(--background-color) 70%, transparent); }
.tools-share-promo__link i { opacity: .55; }
.tools-share-promo__link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .tools-share-promo { grid-template-columns: auto minmax(0, 1fr); }
  .tools-share-promo__demo { grid-column: 1 / -1; min-width: 0; }
  .tools-share-promo__link { min-width: 0; }
}
@media (max-width: 480px) {
  .tools-share-promo { grid-template-columns: 1fr; padding: var(--space-6); }
  .tools-share-promo__arrow, .tools-share-promo__link { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tools-share-promo__button { animation: none; } }