/* ===================================================================
   Wordly — the free tools (/tools and /tools/<slug>)        v2, 2026-11-07

   Quiet on purpose: white ground, one hairline grey, ink-black primary
   buttons, the tool's accent used for ONE detail at a time (its logo,
   a focus ring, an active tab underline). No gradients, no glows, no
   pill badges. The navbar and footer stay the site's own.

   Inherits written.css's token reset on .wp (light text on the dark
   shell otherwise), and overrides it with .wp.tl.

   ⚠️ The controls use their OWN classes (.tl-input, .tl-btn …), never
   .form-control: body.site-public paints .form-control for the DARK shell.
   =================================================================== */

body.site-public.wp-light.tl-page { background: #fff; }

.wp.tl {
    --ink: #111418; --text: #111418; --text-2: #3d434a; --text-3: #6a7079; --muted: #6a7079;
    --line: #e7e9ec; --line-2: #d3d7dc; --soft: #f7f8f9; --ground: #fff;
    --a1: #111418;                         /* the tool's accent, set by tool-shell.js */
    --logo: var(--a1);
    background: #fff; color: var(--text); padding-bottom: 5rem;
    font-feature-settings: 'cv11', 'ss01';
}
.tl .hidden { display: none !important; }
.tl h1, .tl h2, .tl h3 { color: var(--ink); letter-spacing: -0.02em; }
.tl p { color: var(--text-2); }
.wp.tl a:not(.tl-card):not(.tl-btn) { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.wp.tl a:not(.tl-card):not(.tl-btn):hover { text-decoration-color: var(--ink); }

/* ── The tile a logo sits in ── */
.tl-logo {
    flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--logo) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--logo) 16%, #fff);
}
.tl-logo svg { width: 34px; height: 34px; }
.tl-logo-lg { width: 60px; height: 60px; border-radius: 15px; }
.tl-logo-lg svg { width: 42px; height: 42px; }

/* ── Tool page header ── */
.tl-head { padding: 2.5rem 0 1.75rem; border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; }
.tl-crumbs { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: var(--text-3); margin-bottom: 1.25rem; }
.wp.tl .tl-crumbs a { color: var(--text-3); font-weight: 500; text-decoration: none; }
.wp.tl .tl-crumbs a:hover { color: var(--ink); }
.tl-head-row { display: flex; gap: 1.1rem; align-items: center; }
.tl-head h1, .tl-index-hero h1 { font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 700; margin: 0; line-height: 1.2; }
.tl-lead { font-size: 1rem; line-height: 1.65; max-width: 720px; margin: .9rem 0 0; color: var(--text-2); }
.tl-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .9rem 0 0; padding: 0; list-style: none; font-size: .85rem; color: var(--text-3); }
.tl-meta li { display: inline-flex; align-items: center; gap: .4rem; }
.tl-meta li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); }
.tl-meta li:first-child::before { background: var(--a1); }

/* ── Stage, notice, gate ── */
.tl-stage-inner { position: relative; }
.tl-root.is-locked { filter: blur(2px); opacity: .45; pointer-events: none; user-select: none; }
.tl-gate { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; padding: 3rem 1rem; z-index: 5; }
.tl-gate-card {
    position: sticky; top: 96px; width: min(420px, 100%); background: #fff; border: 1px solid var(--line);
    border-radius: 14px; padding: 1.75rem; box-shadow: 0 12px 40px rgba(17, 20, 24, .10);
}
.tl-gate-card h2 { margin: 1rem 0 .4rem; font-size: 1.2rem; font-weight: 700; }
.tl-gate-card p { margin: 0 0 1.35rem; line-height: 1.6; font-size: .95rem; }
.tl-gate-actions { display: grid; gap: .5rem; }
.tl-notice {
    display: flex; gap: .65rem; align-items: center; margin-bottom: 1.25rem; padding: .7rem .9rem;
    background: var(--soft); border: 1px solid var(--line); border-radius: 10px; font-size: .88rem; color: var(--text-2);
}
.tl-notice .icon { flex: none; width: 16px; height: 16px; color: var(--text-3); }
.tl-loading { color: var(--text-3); }

/* ── Building blocks every tool uses ── */
.tl-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; min-width: 0; }
.tl-panel h3 { font-size: .95rem; font-weight: 650; margin: 0 0 .9rem; }
.tl-panel-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.tl-panel-head h3 { margin: 0; }
.tl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.tl-split-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 900px) { .tl-split, .tl-split-wide { grid-template-columns: minmax(0, 1fr); } }

.tl-label { display: block; font-size: .8rem; font-weight: 600; color: var(--text-2); margin: 0 0 .4rem; }
.tl-field { margin-bottom: .9rem; min-width: 0; }
.tl-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.tl-input, .tl-select, .tl-textarea {
    width: 100%; box-sizing: border-box; font: inherit; font-size: .93rem; color: var(--ink);
    background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: .55rem .7rem; min-height: 40px;
    transition: border-color .12s, box-shadow .12s;
}
.tl-input::placeholder, .tl-textarea::placeholder { color: #9aa0a8; }
.tl-textarea { min-height: 240px; resize: vertical; line-height: 1.6; }
.tl-mono { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .85rem; tab-size: 2; }
.tl-input:focus, .tl-select:focus, .tl-textarea:focus {
    outline: none; border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 14%, transparent);
}
.tl-check { display: inline-flex; gap: .45rem; align-items: center; font-size: .88rem; color: var(--text-2); cursor: pointer; margin-right: 1rem; }
.tl-check input { accent-color: var(--ink); }

.tl-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .9rem; }
.tl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; padding: .45rem .9rem;
    border-radius: 8px; border: 1px solid var(--line-2); background: #fff; color: var(--ink);
    font: inherit; font-weight: 600; font-size: .86rem; cursor: pointer; text-decoration: none;
    transition: background .12s, border-color .12s;
}
.tl-btn:hover { background: var(--soft); border-color: #c4c9cf; }
.tl-btn:active { transform: translateY(.5px); }
.tl-btn:disabled { opacity: .45; cursor: not-allowed; }
.tl-btn .icon { width: 15px; height: 15px; }
.tl-btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.tl-btn-primary:hover { background: #2b3036; border-color: #2b3036; }
.wp.tl a.tl-btn { text-decoration: none; }
.wp.tl a.tl-btn-primary { color: #fff; }
/* written.css colours every .wp link with the accent at (0,3,1); a button-link is ink. */
.wp.tl a.tl-btn:not(.tl-btn-primary) { color: var(--ink); font-weight: 600; }
.tl-btn-lg { min-height: 44px; padding: .6rem 1.1rem; font-size: .93rem; }
.tl-small-btn { min-height: 30px; padding: .2rem .65rem; font-size: .78rem; }

/* Segmented control: a quiet track, the chosen one white and raised. */
.tl-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--soft); border: 1px solid var(--line); border-radius: 9px; }
.tl-seg button {
    border: 0; background: transparent; font: inherit; font-size: .83rem; font-weight: 600; color: var(--text-3);
    padding: .38rem .75rem; border-radius: 6px; cursor: pointer; min-height: 32px;
}
.tl-seg button:hover { color: var(--ink); }
.tl-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(17,20,24,.08), 0 0 0 1px var(--line); }

/* Tabs: an underline, for switching what a panel IS (table / describe). */
.tl-tabs { display: flex; gap: 1.25rem; border-bottom: 1px solid var(--line); margin: -.25rem 0 1rem; }
.tl-tabs button {
    border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 600; color: var(--text-3);
    padding: .55rem 0; margin-bottom: -1px; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; gap: .4rem; align-items: center;
}
.tl-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.tl-tag {
    display: inline-flex; align-items: center; height: 18px; padding: 0 .4rem; border-radius: 4px;
    font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--a1);
    background: color-mix(in srgb, var(--a1) 9%, #fff);
}

.tl-error {
    background: #fef3f2; border: 1px solid #fcd5d1; color: #9b1c13; border-radius: 8px;
    padding: .6rem .8rem; font-size: .86rem; margin-top: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5;
}
.tl-ok { background: #f0fdf4; border: 1px solid #c6f0d4; color: #14532d; border-radius: 8px; padding: .6rem .8rem; font-size: .86rem; margin-top: .75rem; }
.tl-hint { font-size: .8rem; color: var(--text-3); margin: .5rem 0 0; line-height: 1.55; }
.tl-quota { font-size: .8rem; color: var(--text-3); }
.tl-quota b { color: var(--ink); }

.tl-canvas {
    background: #fff; border: 1px solid var(--line); border-radius: 10px; min-height: 360px;
    display: grid; place-items: center; overflow: auto; padding: 1rem;
    background-image: radial-gradient(circle, #e9ebee 1px, transparent 1px); background-size: 16px 16px;
}
.tl-canvas svg { max-width: 100%; height: auto; background: #fff; }
.tl-canvas-empty { color: var(--text-3); font-size: .88rem; text-align: center; background: #fff; padding: .4rem .7rem; }

.tl-drop {
    display: grid; place-items: center; text-align: center; gap: .35rem; padding: 2rem 1rem; cursor: pointer;
    border: 1.5px dashed var(--line-2); border-radius: 10px; background: var(--soft); transition: border-color .12s, background .12s;
}
.tl-drop:hover, .tl-drop.is-over { border-color: var(--ink); background: #fff; }
.tl-drop strong { font-size: .93rem; color: var(--ink); }
.tl-drop span { font-size: .82rem; color: var(--text-3); }
.tl-file { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: 10px; }
.tl-file b { font-size: .9rem; overflow-wrap: anywhere; }
.tl-file span { font-size: .8rem; color: var(--text-3); }
.tl-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.tl-chips button {
    font: inherit; font-size: .8rem; color: var(--text-2); background: #fff; border: 1px solid var(--line);
    border-radius: 6px; padding: .3rem .6rem; cursor: pointer; text-align: left;
}
.tl-chips button:hover { border-color: var(--line-2); color: var(--ink); background: var(--soft); }
.tl-spin { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: tl-spin .7s linear infinite; }
@keyframes tl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tl-spin { animation-duration: 2s; } }

/* Toasts */
.tl-toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: grid; gap: .4rem; }
.tl-toast { background: var(--ink, #111418); color: #fff; padding: .55rem .95rem; border-radius: 8px; font-size: .86rem; font-weight: 500;
    box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: opacity .25s, transform .25s; }
.tl-toast-error { background: #9b1c13; }
.tl-toast.is-out { opacity: 0; transform: translateY(6px); }

/* ── Index ── */
.tl-index-hero { padding: 3rem 0 1.5rem; }
.tl-index-hero .tl-lead { margin-top: .75rem; }
.tl-index-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
    padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; }
.tl-search { position: relative; flex: 0 1 300px; }
.tl-search .icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-3); }
.tl-search .tl-input { padding-left: 2.1rem; }
.tl-group { margin-top: 2rem; }
.tl-group:first-child { margin-top: 0; }
.tl-group h2, .tl-more h2 { font-size: .8rem; font-weight: 600; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 .85rem; }
.tl-more { padding-top: 3.5rem; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .85rem; }
.wp.tl a.tl-card {
    display: flex; gap: .95rem; align-items: flex-start; padding: 1.05rem; border: 1px solid var(--line); border-radius: 12px;
    background: #fff; color: var(--ink); text-decoration: none; font-weight: 400; transition: border-color .12s, box-shadow .12s;
}
.wp.tl a.tl-card:hover { border-color: var(--line-2); box-shadow: 0 4px 14px rgba(17,20,24,.06); }
.tl-card-text { display: grid; gap: .25rem; min-width: 0; }
.tl-card-text strong { font-size: .95rem; font-weight: 650; color: var(--ink); display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.tl-card-text span.tl-card-desc { font-size: .85rem; color: var(--text-3); line-height: 1.5; }
.tl-empty { color: var(--text-3); padding: 2rem 0; }

/* ── Word counter ── */
/* Hairlines between cells: the gaps show the grid's line-coloured background. */
.wc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wc-stat { padding: .8rem .95rem; background: #fff; }
.wc-stat b { display: block; font-size: 1.3rem; font-weight: 650; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.wc-stat span { font-size: .78rem; color: var(--text-3); }
.wc-stat-main { grid-column: 1 / -1; background: var(--soft); }
.wc-stat-main b { font-size: 2.2rem; }
.wc-goal { margin-top: 1rem; }
.wc-bar { height: 6px; background: var(--soft); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; margin-top: .5rem; }
.wc-bar i { display: block; height: 100%; background: var(--a1); width: 0; transition: width .2s; }
.wc-bar.is-over i { background: #b42318; }
.wc-words { list-style: none; padding: 0; margin: 0; }
.wc-words li { display: flex; justify-content: space-between; font-size: .86rem; color: var(--text-2); padding: .35rem 0; border-bottom: 1px solid var(--line); }
.wc-words li:last-child { border-bottom: 0; }
.wc-words b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Citations ── */
.ct-out { display: grid; gap: .75rem; }
.ct-style { border: 1px solid var(--line); border-radius: 10px; padding: .85rem .95rem; }
.ct-style header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.ct-style header b { font-size: .78rem; font-weight: 650; color: var(--text-3); }
.ct-ref { font-family: 'Times New Roman', Times, serif; font-size: 1.02rem; line-height: 1.6; color: var(--ink); padding-left: 2em; text-indent: -2em; overflow-wrap: anywhere; }
.ct-intext { font-size: .8rem; color: var(--text-3); margin-top: .4rem; }
.ct-authors { display: grid; gap: .5rem; }
.ct-author { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 38px; gap: .5rem; }
.ct-x { border: 1px solid var(--line-2); background: #fff; border-radius: 8px; cursor: pointer; color: var(--text-3); font-size: 1.05rem; }
.ct-x:hover { color: var(--ink); background: var(--soft); }
.ct-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ct-list li { border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; }
.ct-warn { font-size: .78rem; color: #93370d; margin-top: .4rem; }

/* ── JSON ── */
.js-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--text-3); margin-top: .6rem; }

/* ── Excel editor ── */
.xl-steps { display: grid; gap: 1.1rem; }
.xl-done { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.xl-done li { display: flex; gap: .55rem; font-size: .88rem; color: var(--text-2); line-height: 1.5; }
.xl-done li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
    background: color-mix(in srgb, var(--a1) 12%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%2315803d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.xl-done li.is-skip::before { background: #fef3f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' fill='none' stroke='%23b42318' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.xl-preview { overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: .9rem; }
.xl-preview table { border-collapse: collapse; font-size: .78rem; min-width: 100%; }
.xl-preview td { border: 1px solid #edeff1; padding: .3rem .5rem; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: #1f2328; }
.xl-preview tr td:first-child { background: var(--soft); color: var(--text-3); text-align: center; font-size: .7rem; }
.xl-result { border-top: 1px solid var(--line); padding-top: 1.1rem; }

/* ── PDF tools (pdf-kit.js and the eight tools) ── */
.pk-file-ico { flex: none; display: grid; place-items: center; width: 34px; height: 40px; border-radius: 6px;
    background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; font-size: .62rem; font-weight: 800; letter-spacing: .04em; }
.pk-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; }
.pk-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: grab; }
.pk-item:active { cursor: grabbing; }
.pk-grip { color: var(--text-3); font-size: .8rem; letter-spacing: -2px; user-select: none; }
.pk-item-text { flex: 1; min-width: 0; display: grid; }
.pk-item-text b { font-size: .9rem; overflow-wrap: anywhere; }
.pk-item-text span { font-size: .78rem; color: var(--text-3); }
.pk-item-actions { display: flex; gap: .3rem; }
.pk-item-actions .ct-x, .pk-page-bar .ct-x { width: 30px; height: 30px; font-size: .9rem; display: grid; place-items: center; padding: 0; }
.ct-x:disabled { opacity: .35; cursor: default; }
.pk-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: .8rem; margin-top: .9rem; }
.pk-page { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; cursor: grab; }
.pk-thumb-wrap { height: 170px; display: grid; place-items: center; background: var(--soft); padding: .5rem; }
.pk-thumb { display: grid; place-items: center; transition: transform .2s ease; }
.pk-thumb canvas, .pk-img { max-width: 100%; max-height: 154px; width: auto; height: auto; box-shadow: 0 1px 3px rgba(17,20,24,.18); background: #fff; }
.pk-img { object-fit: contain; }
.pk-page-bar { display: flex; align-items: center; gap: .25rem; padding: .35rem .4rem; border-top: 1px solid var(--line); }
.pk-page-bar span { flex: 1; font-size: .78rem; font-weight: 700; color: var(--text-2); padding-left: .2rem; }
.pk-result { display: flex; gap: .9rem; align-items: center; padding: .85rem; border: 1px solid #c6f0d4; background: #f0fdf4; border-radius: 12px; }
.pk-result-thumb { flex: none; width: 64px; min-height: 40px; }
.pk-result-thumb canvas { width: 64px; height: auto; box-shadow: 0 1px 3px rgba(17,20,24,.2); border-radius: 2px; }
.pk-result-body { display: grid; gap: .3rem; min-width: 0; }
.pk-result-body b { color: #14532d; }
.pk-result-body p { margin: 0; font-size: .82rem; color: #166534; }
.pk-result-body .tl-btn { justify-self: start; }
.pk-pad { width: 100%; height: auto; aspect-ratio: 560 / 200; border: 1.5px dashed var(--line-2); border-radius: 10px; background: #fff;
    touch-action: none; cursor: crosshair;
    background-image: linear-gradient(transparent calc(75% - 1px), #e5e7eb calc(75% - 1px), #e5e7eb 75%, transparent 75%); }
.pk-stage { min-height: 300px; display: grid; place-items: center; background: var(--soft); border: 1px solid var(--line); border-radius: 10px; padding: .8rem; }
.pk-stage-page { position: relative; width: 100%; max-width: 520px; box-shadow: 0 2px 10px rgba(17,20,24,.15); background: #fff; line-height: 0; }
.pk-sig { position: absolute; cursor: move; touch-action: none; outline: 1.5px dashed var(--a1); outline-offset: 2px; user-select: none; }

/* ── Diagram Generator guide (2026-11-07) ── */
.tl [data-pane][hidden] { display: none !important; }
.tl-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); font-weight: 600; text-decoration: underline;
    text-decoration-color: var(--line-2); text-underline-offset: 3px; cursor: pointer; }
.dg-guide { margin-top: .9rem; }
.dg-guide-what { margin: 0 0 .6rem; font-size: .9rem; }
.dg-guide-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.dg-guide-table td { padding: .45rem .5rem; border-top: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
.dg-guide-table td:first-child { width: 46%; }
.dg-guide-table code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .8rem; color: var(--ink);
    background: var(--soft); border: 1px solid var(--line); border-radius: 5px; padding: .1rem .35rem; overflow-wrap: anywhere; }
.dg-guide-ex { margin: 0 0 .6rem; padding: .7rem .8rem; background: var(--soft); border: 1px solid var(--line); border-radius: 8px;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── While the tool downloads (tool.html → tool-shell.js) ──────────────
   A panel the size of a typical tool, so "More free tools" below does
   not sit up under the header and then jump down when the tool mounts. */
.tl-skel {
    display: grid; place-items: center; align-content: center; gap: 0.6rem;
    min-height: 420px; padding: 2rem 1.5rem; text-align: center;
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.tl-skel-spin {
    width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid rgba(17, 20, 24, 0.10); border-top-color: var(--a1, #6d28d9);
    animation: tl-spin 0.8s linear infinite;
}
@keyframes tl-spin { to { transform: rotate(360deg); } }
.tl-skel-title { margin: 0.4rem 0 0; font-weight: 600; color: #111418; }
.tl-skel-slow { max-width: 420px; margin: 0; font-size: 0.88rem; line-height: 1.5; color: #5f6670; }
@media (max-width: 640px) { .tl-skel { min-height: 300px; } }
@media (prefers-reduced-motion: reduce) { .tl-skel-spin { animation-duration: 2.4s; } }