/* 독립 방송 도구 페이지도 대시보드의 팔레트와 공용 버튼을 사용한다. */
:root {
    color-scheme: light;
    --db-bg: #f4f4f2;
    --db-surface: #fff;
    --db-surface-2: #fafaf9;
    --db-surface-3: #f4f4f2;
    --db-band: #faf3e6;
    --db-band-border: #eddfc2;
    --db-border: #e4e2dd;
    --db-border-soft: #eeece8;
    --db-border-strong: #d6d3cd;
    --db-text-strong: #18181b;
    --db-text: #1f1f22;
    --db-text-sub: #52525b;
    --db-text-mute: #6b6b74;
    --db-accent: #46311d;
    --db-accent-hover: #2f2115;
    --db-caramel: #b07a2d;
    --db-ico: #0f766e;
    --db-btn-fg: #fff;
    --db-btn-bg: #1c1917;
    --db-focus: #18181b;
    --db-focus-ring: rgba(24, 24, 27, .12);
    --db-toast-bg: #1c1917;
    --db-toast-fg: #fff;
}
.dark {
    color-scheme: dark;
    --db-bg: #0e0e10;
    --db-surface: #18181b;
    --db-surface-2: #1b1b1f;
    --db-surface-3: #2d2d2d;
    --db-band: #1e1e21;
    --db-band-border: #333;
    --db-border: #2d2d2d;
    --db-border-soft: rgba(255, 255, 255, .07);
    --db-border-strong: #3f3f43;
    --db-text-strong: #fff;
    --db-text: #f1f1f1;
    --db-text-sub: #cdcdcd;
    --db-text-mute: #b5b5b5;
    --db-accent: #e0ac60;
    --db-accent-hover: #ecc487;
    --db-caramel: #d9a441;
    --db-ico: #2dd4bf;
    --db-btn-fg: #1f1f1f;
    --db-btn-bg: #f1f1f1;
    --db-focus: #f1f1f1;
    --db-focus-ring: rgba(255, 255, 255, .14);
    --db-toast-bg: #2d2d2d;
    --db-toast-fg: #f1f1f1;
}
.tools-page { background: var(--db-bg); color: var(--db-text); }
.tool-icon { width: 20px; height: 20px; flex-shrink: 0; }
.tools-skip { position: fixed; top: -60px; left: 16px; z-index: 60; padding: 10px 16px; border-radius: 8px; background: var(--db-btn-bg); color: var(--db-btn-fg); }
.tools-skip:focus { top: 12px; }
.tools-container { width: 100%; max-width: 1152px; margin: auto; padding: 32px 24px 0; }
.tools-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.tools-page-heading h1 { color: var(--db-text-strong); font-size: 28px; font-weight: 800; letter-spacing: -.045em; line-height: 1.3; }
.tools-page-heading .tools-kicker { margin: 0 0 10px; color: var(--db-accent); font-size: 15px; font-weight: 700; line-height: 1.5; }
.tools-page-heading .tools-hub-title { margin-bottom: 8px; font-size: 36px; letter-spacing: -.04em; }
.tools-page .db-card { background: var(--db-surface); border: 1px solid var(--db-border); border-radius: 16px; box-shadow: 0 1px 2px rgba(0, 0, 0, .025); min-width: 0; }
.tools-page .db-card-header { background: transparent; padding: 16px 20px; border-bottom: 1px solid var(--db-border-soft); color: var(--db-text-strong); gap: 12px; }
.tools-page .db-card-body { padding: 20px; }
.tools-card-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 750; }
.tools-card-title > .tool-icon { color: var(--db-ico); width: 18px; height: 18px; }
.tools-card-note { color: var(--db-text-mute); font-size: 11px; font-weight: 500; }

/* 도구 상세 */
.tools-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px; color: var(--db-text-sub); font-size: 14px; font-weight: 600; }
.tools-back .tool-icon { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .15s; }
.tools-back:hover { color: var(--db-text-strong); }
.tools-back:hover .tool-icon { transform: rotate(180deg) translateX(3px); }
.tool-hero { position: relative; overflow: hidden; min-height: 400px; padding: 52px 56px 48px; border-radius: 24px; background: var(--tool-bg); color: var(--tool-fg); }
.tool-hero-copy { position: relative; z-index: 1; max-width: 560px; }
.tool-hero-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tool-hero-name { margin-right: 4px; font-size: 15px; font-weight: 800; }
.tool-hero .tool-card-tag { gap: 5px; }
.tool-hero .tool-card-tag .tool-icon { width: 14px; height: 14px; }
.tool-hero h1 { margin-top: 18px; font-size: 40px; font-weight: 800; line-height: 1.25; letter-spacing: -.045em; }
.tool-hero-desc { margin-top: 16px; font-size: 16px; line-height: 1.75; opacity: .8; word-break: keep-all; }
.tool-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.tool-hero-note { margin-top: 12px; font-size: 13px; opacity: .7; }
.tool-hero .tool-hero-scene { right: 64px; bottom: 56px; transform: scale(1.5); transform-origin: right bottom; }
.tools-block { margin-top: 72px; }
.tools-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.tools-block-kicker { margin-bottom: 8px; color: var(--db-accent); font-size: 15px; font-weight: 700; }
.tools-block-head h2 { color: var(--db-text-strong); font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.3; word-break: keep-all; }
.tools-block-caption { margin-top: 8px; color: var(--db-text-sub); font-size: 15px; line-height: 1.7; word-break: keep-all; }
.tools-block-head > .btn { flex-shrink: 0; }
.tools-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tools-items-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tools-item { display: flex; gap: 16px; height: 100%; padding: 22px; background: var(--db-surface); border: 1px solid var(--db-border); border-radius: 16px; }
.tools-item-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--db-surface-3); color: var(--db-ico); }
.tools-item-icon .tool-icon { width: 22px; height: 22px; }
.tools-item h3 { color: var(--db-text-strong); font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.tools-item p { margin-top: 6px; color: var(--db-text-sub); font-size: 14.5px; line-height: 1.65; word-break: keep-all; }
.tools-item-tag { display: inline-flex; margin-top: 12px; padding: 3px 10px; border-radius: 9999px; background: var(--db-surface-3); color: var(--db-text-sub); font-size: 12px; font-weight: 700; }
.tools-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.tools-steps li { padding: 28px 26px; background: var(--db-surface); border: 1px solid var(--db-border); border-radius: 16px; }
.tools-steps li > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px; background: var(--db-btn-bg); color: var(--db-btn-fg); font-size: 15px; font-weight: 800; }
.tools-steps h3 { margin-top: 20px; color: var(--db-text-strong); font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.tools-steps p { margin-top: 8px; color: var(--db-text-sub); font-size: 15px; line-height: 1.7; word-break: keep-all; }
.tools-note { margin-top: 16px; color: var(--db-text-sub); font-size: 14.5px; line-height: 1.7; }
.tools-note a { color: var(--db-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.tools-flow { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 20px; padding: 32px; background: var(--db-surface); border: 1px solid var(--db-border); border-radius: 20px; }
.tools-flow h3 { color: var(--db-text-strong); font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.tools-flow p { margin-top: 6px; color: var(--db-text-sub); font-size: 14.5px; line-height: 1.6; }
.tools-flow .tools-flow-label { margin: 0 0 12px; color: var(--db-text-mute); font-size: 13px; font-weight: 700; }
.tools-event-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tools-event-chips span { padding: 6px 12px; border-radius: 9999px; background: var(--db-surface-3); color: var(--db-text); font-size: 14px; font-weight: 600; }
.tools-flow-arrow { color: var(--db-text-mute); }
.tools-flow-center { display: flex; align-items: center; gap: 14px; padding: 22px; border-radius: 16px; background: var(--tool-bg); color: var(--tool-fg); }
.tools-flow-center > .tool-icon { width: 30px; height: 30px; }
.tools-flow-center h3, .tools-flow-center p { color: inherit; }
.tools-flow-center p { opacity: .8; }
.tools-promo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 72px; padding: 28px 32px; border-radius: 20px; background: var(--tool-bg); color: var(--tool-fg); -webkit-user-drag: none; user-select: none; transition: background-color .15s; }
.tools-promo:hover { background: var(--tool-bg-hover); }
.tools-promo h2 { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.tools-promo p { margin-top: 6px; font-size: 15px; opacity: .8; }
.tools-promo-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; }
.tools-promo-link .tool-icon { width: 16px; height: 16px; transition: transform .15s; }
.tools-promo:hover .tools-promo-link .tool-icon { transform: translateX(4px); }
.tool-hero, .tools-block, .tools-back, .ca-section-nav { user-select: none; }
.tools-back, :is(.tool-hero, .tools-block, .ca-section-nav, #ca-form) :is(a, img) { -webkit-user-drag: none; }
.tools-page > footer { background: var(--db-surface); border-color: var(--db-border); margin-top: 48px; }
.tools-page > footer .text-gray-400, .tools-page > footer .text-gray-500 { color: var(--db-text-mute); }
.tools-page > footer a:hover { color: var(--db-accent); }
.tools-page a:focus-visible { outline: 2px solid var(--db-focus); outline-offset: 3px; }

/* 채팅 아바타 설정 */
.ca-section-nav { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px; margin: 32px 0 28px; border: 1px solid var(--db-border); border-radius: 16px; background: var(--db-surface); }
.ca-section-nav a { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 9999px; color: var(--db-text-sub); font-size: 14px; font-weight: 700; }
.ca-section-nav a:hover { background: var(--db-surface-3); color: var(--db-text); }
.ca-section-nav .tool-icon { width: 16px; height: 16px; color: var(--db-ico); }
#ca-form > .grid { gap: 20px; }
#ca-form section, .ca-section-heading { scroll-margin-top: 130px; }
.ca-section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 18px; }
.ca-section-heading h2 { color: var(--db-text-strong); font-size: 22px; font-weight: 800; letter-spacing: -.035em; }
.ca-section-heading p { color: var(--db-text-sub); font-size: 14px; }
.ca-lbl { display: block; font-size: 12px; font-weight: 650; color: var(--db-text-sub); margin-bottom: 7px; }
.ca-num, .ca-text, .ca-sel, #overlay-url {
    width: 100%; min-width: 0; min-height: 38px; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--db-border);
    background: var(--db-surface-2); color: var(--db-text); font-size: 13px; outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.ca-num { text-align: right; }
.ca-sel { cursor: pointer; }
.ca-text::placeholder { color: var(--db-text-mute); opacity: .85; }
.ca-num:focus, .ca-text:focus, .ca-sel:focus, #overlay-url:focus { border-color: var(--db-focus); box-shadow: 0 0 0 3px var(--db-focus-ring); }
.ca-color { width: 100%; height: 38px; padding: 4px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-surface-2); cursor: pointer; }
.ca-color:focus-visible { outline: 2px solid var(--db-focus); outline-offset: 2px; }
#overlay-url { font-size: 12px; }
.ca-num:disabled { opacity: .45; cursor: not-allowed; }
#overlay-url { color: var(--db-text-sub); }
#ca-form input[type="checkbox"] {
    appearance: none; width: 32px; height: 18px; flex-shrink: 0; border: 1px solid var(--db-border-strong);
    border-radius: 999px; background: var(--db-surface-3); cursor: pointer; position: relative; transition: background .15s;
}
#ca-form input[type="checkbox"]::before { content: ''; position: absolute; width: 12px; height: 12px; top: 2px; left: 2px; border-radius: 50%; background: var(--db-text-mute); transition: transform .15s; }
#ca-form input[type="checkbox"]:checked { background: var(--db-caramel); border-color: var(--db-caramel); }
#ca-form input[type="checkbox"]:checked::before { transform: translateX(14px); background: #fff; }
#ca-form input[type="checkbox"]:focus-visible { outline: 2px solid var(--db-focus); outline-offset: 3px; }
#ca-form .text-gray-400, #ca-form .text-gray-500 { color: var(--db-text-mute); }
#ca-form .text-gray-600, #ca-form .text-gray-700 { color: var(--db-text-sub); }
#ca-form .text-gray-800 { color: var(--db-text); }
#ca-form .text-gray-300 { color: var(--db-text-mute); }
#ca-form code { background: var(--db-surface-3); color: var(--db-text-sub); overflow-wrap: anywhere; }
#ca-form .text-red-500 { color: var(--btn-danger); }
#ca-form .db-card-header > span { min-width: 0; }
#ca-form .db-card-header .tools-card-note { text-align: right; }
#ca-form .db-card-body > p { line-height: 1.8; }
.ca-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ca-platform { padding: 16px; border: 1px solid var(--db-border); border-radius: 10px; background: var(--db-surface-2); }
.ca-platform label { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 13px; font-weight: 700; }
.ca-platform p { color: var(--db-text-mute); font-size: 11px; line-height: 1.7; margin-top: 7px; }
.ca-overlay { padding-top: 16px; border-top: 1px solid var(--db-border-soft); }
.ca-overlay-label { display: flex; align-items: center; gap: 6px; color: var(--db-text-sub); font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.ca-overlay-label .tool-icon { width: 15px; height: 15px; }
.ca-url-row { display: flex; align-items: center; gap: 8px; }
.ca-url-row input { flex: 1; }
.ca-url-row .btn { flex-shrink: 0; }
.ca-count { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 6px; background: var(--db-surface-3); font-size: 11px; color: var(--db-text-mute); }
.cc-row { padding: 16px; background: var(--db-surface-2); border: 1px solid var(--db-border); border-radius: 10px; }
.ca-assignment-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--db-border); border-radius: 8px; background: var(--db-surface-2); overflow-wrap: anywhere; }
.ca-savebar { position: sticky; bottom: 16px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding: 14px 18px; background: var(--db-surface); border: 1px solid var(--db-border-strong); border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, .08); }
.ca-savebar p { font-size: 12px; color: var(--db-text-mute); }
.ca-savebar strong { display: block; color: var(--db-text); font-size: 13px; font-weight: 700; margin-bottom: 3px; }
/* 커스텀 아바타 편집기 (목록 + 상세) */
.av-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.av-side { display: flex; flex-direction: column; gap: 10px; }
.av-list { display: flex; flex-direction: column; gap: 4px; }
.av-list-empty { padding: 24px 8px; text-align: center; color: var(--db-text-mute); font-size: 12px; line-height: 1.7; }
.av-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; text-align: left; cursor: pointer; transition: background .12s; }
.av-item:hover { background: var(--db-surface-3); }
.av-item.active { background: var(--db-band); border-color: var(--db-caramel); }
.av-item:focus-visible { outline: 2px solid var(--db-focus); outline-offset: 2px; }
.av-item-text { display: flex; flex-direction: column; min-width: 0; }
.av-item-text b { color: var(--db-text); font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.av-item.active .av-item-text b { color: var(--db-accent); }
.av-item-text small { color: var(--db-text-mute); font-size: 11px; }
.av-item-text small.off { text-decoration: line-through; }
.av-thumb { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--db-border); background: var(--db-surface-2); overflow: hidden; }
.av-thumb.sm { width: 28px; height: 28px; border-radius: 6px; }
.av-thumb img { width: 100%; height: 100%; object-fit: contain; }
.av-detail { min-height: 300px; padding: 20px; border: 1px solid var(--db-border); border-radius: 12px; background: var(--db-surface-2); }
.av-empty { display: flex; align-items: center; justify-content: center; min-height: 260px; color: var(--db-text-mute); font-size: 13px; text-align: center; }
.av-detail-head { display: flex; align-items: flex-end; gap: 16px; }
.av-name { flex: 1; max-width: 320px; }
.av-active { display: flex; align-items: center; gap: 8px; height: 38px; font-size: 13px; font-weight: 700; color: var(--db-text-sub); cursor: pointer; }
.av-hint { margin: 12px 0 14px; color: var(--db-text-mute); font-size: 11px; line-height: 1.7; }
.av-sub { margin: 20px 0 10px; color: var(--db-text-sub); font-size: 13px; font-weight: 700; }
.av-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.av-slot { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--db-border); border-radius: 10px; background: var(--db-surface); }
.av-slot.need { border-color: var(--btn-danger-line, #f1aeae); }
.av-slot.busy { opacity: .55; pointer-events: none; }
.av-slot-head { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.av-slot-head b { color: var(--db-text); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.av-slot-head small { color: var(--db-text-mute); font-size: 11px; }
.av-slot-img { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border: 1px dashed var(--db-border-strong); border-radius: 8px; background: var(--db-surface-2); cursor: pointer; overflow: hidden; transition: border-color .12s; }
.av-slot-img:hover { border-color: var(--db-caramel); }
.av-slot-img:focus-visible { outline: 2px solid var(--db-focus); outline-offset: 2px; }
.av-slot-img img { max-width: 88%; max-height: 88%; object-fit: contain; }
.av-slot-img img.flipped { transform: scaleX(-1); }
.av-slot-img img.fallback { opacity: .3; }
.av-slot-img em { position: absolute; bottom: 6px; left: 0; right: 0; font-style: normal; font-size: 11px; color: var(--db-text-mute); }
.av-slot-plus { color: var(--db-text-mute); font-size: 28px; font-weight: 300; }
.av-slot-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.av-detail-foot { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--db-border-soft); }
.cc-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 110px auto; gap: 10px; align-items: end; }
.cc-tools { display: flex; align-items: center; gap: 8px; height: 38px; }
.cc-switch { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--db-text-sub); cursor: pointer; }
.cc-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--db-border-soft); }
.cc-opts-title { color: var(--db-text-mute); font-size: 12px; font-weight: 700; }
.cc-opt { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; color: var(--db-text-sub); cursor: pointer; }
.cc-opt .ca-num { width: 76px; }
.cc-opt small { color: var(--db-text-mute); font-size: 11px; font-weight: 500; }
@media (max-width: 760px) {
    .av-layout { grid-template-columns: 1fr; }
    .av-list { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .av-item { width: auto; flex-shrink: 0; }
    .av-detail { padding: 14px; }
    .av-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cc-main { grid-template-columns: 1fr 1fr; }
}
#toast { background: var(--db-toast-bg); color: var(--db-toast-fg); max-width: calc(100vw - 32px); bottom: 100px; text-align: center; }

@media (max-width: 1100px) {
    .tool-hero { padding: 44px 40px 40px; }
    .tool-hero-copy { max-width: 470px; }
    .tool-hero .tool-hero-scene { right: 40px; bottom: 40px; transform: scale(1.15); }
}
@media (max-width: 1023px) {
    .tools-page-heading { flex-direction: column; gap: 14px; }
    .tools-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tools-flow { gap: 12px; padding: 24px; }
    .tools-flow-center { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
    .tools-container { padding: 24px 16px 0; }
    .tools-page-heading h1 { font-size: 25px; }
    .tools-page-heading .tools-hub-title { font-size: 30px; }
    .tool-hero { min-height: 0; padding: 32px 24px 230px; border-radius: 20px; }
    .tool-hero h1 { font-size: 32px; }
    .tool-hero-desc { font-size: 15px; }
    .tool-hero .tool-hero-scene { right: 24px; bottom: 28px; transform: scale(1.05); }
    .tools-block { margin-top: 56px; }
    .tools-block-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .tools-block-head h2 { font-size: 24px; }
    .tools-items, .tools-items-2, .tools-steps { grid-template-columns: 1fr; }
    .tools-flow { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
    .tools-flow-arrow { transform: rotate(90deg); justify-self: center; }
    .tools-flow-center { flex-direction: row; align-items: center; }
    .tools-promo { margin-top: 56px; padding: 24px; }
    .ca-section-nav { gap: 2px; }
    .ca-section-nav a { padding: 8px 10px; font-size: 13px; gap: 5px; }
    .ca-section-heading { flex-direction: column; gap: 4px; }
    .ca-savebar { bottom: 10px; padding: 12px; }
    .ca-savebar p { font-size: 11px; }
    .ca-savebar strong { font-size: 12px; }
}
@media (max-width: 420px) {
    .tools-page-heading .tools-hub-title { font-size: 27px; }
    .tool-hero { padding: 28px 20px 210px; }
    .tool-hero h1 { font-size: 28px; }
    .tool-hero .tool-hero-scene { right: 16px; transform: scale(.95); }
    .tools-page .db-card-header, .tools-page .db-card-body { padding: 16px; }
    .ca-platforms { grid-template-columns: 1fr; }
    .ca-section-nav a { flex: 1 1 40%; }
    #ca-form .db-card-header { flex-wrap: wrap; }
    #ca-form .db-card-header .tools-card-note { text-align: left; }
}