/* Free tools (/free-tools/). From design/resources/clean/free-tools.css, scoped to .rs. */
.rs .fh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.rs .fh .mos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rs .fh .mos span{aspect-ratio:1;border-radius:20px;display:grid;place-items:center;background:color-mix(in srgb,var(--k) 13%,#fff);--ic-accent:var(--k);animation:rs-tin .7s var(--ease) both;animation-delay:calc(var(--i)*60ms)}
.rs .fh .mos span .sbi{width:36px;height:36px}
.rs .fh .mos span.w{background:#fff;border:1px solid var(--line)}
@keyframes rs-tin{from{opacity:0;transform:translateY(14px) scale(.9)}}

.rs .live{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:32px;overflow:hidden;border:1px solid var(--line)}
.rs .live .l{padding:36px;display:grid;gap:14px;align-content:start;background:color-mix(in srgb,var(--c-cus) 9%,#fff)}
.rs .live .l h2{max-width:14ch}
.rs .live .l .meta{font-size:13.5px}
.rs .live .r{padding:32px;display:grid;gap:20px;background:#fff}
.rs .live label{display:grid;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink)}
.rs .live .lv{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.rs .live output{font:750 20px var(--fd)}
.rs .live input[type=range]{width:100%;accent-color:var(--c-cus)}
.rs .ns-price{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
.rs .ns-f input,.rs .ns-f select{height:44px;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;font-size:15px;color:var(--ink);background:#fff;min-width:0;width:100%;font-weight:500}
.rs .ns-f input:focus,.rs .ns-f select:focus{border-color:var(--royal);box-shadow:0 0 0 4px var(--royal-soft);outline:0}
.rs .live .res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rs .live .res div{border-radius:18px;padding:16px 18px;background:var(--bg-alt);display:grid;gap:2px;min-width:0}
.rs .live .res b{font:800 clamp(22px,3vw,34px) var(--fd);letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rs .live .res .big{background:var(--c-cus);color:#fff}
.rs .live .res .big span{color:#FFE6DD}
.rs .live .res span{font-size:13.5px;color:var(--ink-2);font-weight:600}
.rs .ns-acts{display:flex;gap:10px;flex-wrap:wrap}

.rs .tpl{border-radius:24px;overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#fff;transition:transform .45s var(--ease),border-color .2s}
.rs .tpl:hover{transform:translateY(-3px);border-color:var(--ink);color:var(--ink)}
.rs .tpl .pv{aspect-ratio:4/3;background:color-mix(in srgb,var(--k) 11%,#fff);display:grid;place-items:end center;padding:22px 22px 0;overflow:hidden}
.rs .doc{width:78%;height:100%;background:#fff;border-radius:12px 12px 0 0;box-shadow:0 -10px 30px -18px rgba(12,22,56,.4);padding:14px;display:grid;gap:7px;align-content:start;transition:transform .5s var(--ease)}
.rs .tpl:hover .doc{transform:translateY(-6px)}
.rs .doc i{display:block;height:6px;border-radius:4px;background:var(--surface-2)}
.rs .doc i.h{height:10px;width:50%;background:var(--k)}
.rs .doc i.s{width:70%}
.rs .doc i.x{width:40%}
.rs .doc .rw{display:grid;grid-template-columns:2fr 1fr;gap:6px}
.rs .tpl .bdy{padding:16px 18px 18px;display:grid;gap:8px}
.rs .tpl h3{font-size:17px}
.rs .fmt{display:flex;gap:6px;flex-wrap:wrap}
.rs #all .g3,.rs #all .g4{margin-bottom:8px}
.rs .tpl-grp{margin-top:72px}
.rs .ns-half{margin:-8px 0 0;font-size:14px;color:var(--ink-2)}
.rs .ns-half b{color:#177A43}
.rs #all-tools .pager{margin-top:32px}
.rs #all-tools .empty .btn{margin-top:8px}

@media (max-width:900px){.rs .fh,.rs .live{grid-template-columns:minmax(0,1fr)}.rs .live .l,.rs .live .r{padding:26px}}
@media (max-width:560px){.rs .fh .mos{display:none}.rs .ns-price{grid-template-columns:minmax(0,1fr)}.rs .live .l,.rs .live .r{padding:22px}}
@media (prefers-reduced-motion:reduce){.rs .fh .mos span{animation:none}.rs .tpl,.rs .doc{transition:none}.rs .tpl:hover{transform:none}}
