body:has(#tools-home) { background: var(--tools-paper, #f6f5ef); color: var(--tools-ink, #292c27); }
#main-content:has(#tools-home) { width: min(960px, calc(100% - 64px)); max-width: none; }
#tools-home { padding: 1.5rem 0; }
#tools-home * { box-sizing: border-box; }
#tools-home .tools-eyebrow { display: flex; align-items: center; gap: 0.6rem; color: var(--tools-muted, #697261); font: 500 0.72rem/1.4 var(--reader-code-font); letter-spacing: 0.12em; }
#tools-home .tools-eyebrow > span { width: 7px; height: 7px; background: var(--tools-accent, #70845c); border-radius: 50%; }
#tools-home .tools-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(310px, auto); gap: 1rem; align-items: stretch; }
#tools-home .tool-card { display: flex; flex-direction: column; min-width: 0; padding: 1.25rem; border: 1px solid var(--tools-line, #dce0d5); border-radius: 1.5rem; background: var(--tools-surface, #eeeee5); color: inherit; text-align: left; text-decoration: none; box-shadow: var(--tools-raised); background-image: linear-gradient(145deg, #ffffff20, transparent 65%); transition: transform 250ms, box-shadow 250ms, border-color 250ms; cursor: pointer; font: inherit; }
#tools-home .tool-card:hover { transform: translateY(-5px); box-shadow: var(--tools-floating), 0 14px 30px var(--tools-shadow); border-color: var(--tools-line, #a1b080); }
#tools-home .tool-card:focus-visible { outline: 3px solid var(--tools-line, #6f814e); outline-offset: 4px; }
#tools-home .tool-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font: 500 0.64rem/1.6 var(--reader-code-font); color: var(--tools-muted, #6a745e); letter-spacing: 0.04em; }
#tools-home .tool-dictionary { grid-column: span 3; background: var(--tools-featured, #e7edcf); border-color: var(--tools-line, #d6dfba); }
#tools-home .tool-live { display: flex; gap: 0.4rem; align-items: center; color: var(--tools-accent, #536936); }
#tools-home .tool-live i { width: 6px; height: 6px; background: var(--tools-accent, #768d45); border-radius: 50%; }
#tools-home .tool-soon { opacity: 0.7; font-size: 0.6rem; }
#tools-home .dictionary-art { position: relative; display: flex; align-items: center; flex: 1; min-height: 110px; gap: 1.5rem; padding: 0 0.5rem; }
#tools-home .dictionary-art > span:first-child { font-size: 6rem; line-height: 1; letter-spacing: -0.11em; color: var(--tools-accent, #455b36); font-weight: 600; }
#tools-home .art-phonetic { color: var(--tools-muted, #67764e); font-size: 1rem; }
#tools-home .art-note, #tools-home .dictionary-art > i { display: none; }
#tools-home .tool-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: auto; }
#tools-home h2 { margin: 0 0 0.35rem; font-size: 1.3rem; font-weight: 650; letter-spacing: -0.02em; }
#tools-home h2 span { margin-left: 0.5rem; font-size: 0.8rem; font-weight: 400; color: var(--tools-muted, #6a745e); letter-spacing: 0; }
#tools-home .tool-card p { margin: 0; font-size: 0.82rem; line-height: 1.7; color: var(--tools-ink); opacity: 0.8; }
#tools-home .tool-open { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--tools-line); border-radius: var(--tools-radius, 14px); background: var(--tools-tint); color: var(--tools-ink); box-shadow: var(--tools-raised); font-weight: 600; font-size: 1.3rem; transition: transform 200ms; }
#tools-home .tool-card:hover .tool-open { transform: rotate(45deg); }
#tools-home .tool-card-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; padding-top: 0.65rem; border-top: 1px solid var(--tools-line, #cad4b1); font-size: 0.65rem; color: var(--tools-muted, #6d765d); }
#tools-home .tool-calculator { grid-column: span 2; border-radius: 1.8rem; }
#tools-home .calculator-art { display: flex; flex-direction: column; justify-content: center; flex: 1; min-height: 120px; margin: 0.75rem 0; color: var(--tools-muted, #777765); font-size: 2rem; letter-spacing: -0.05em; }
#tools-home .art-operator { padding: 0 1.25rem; opacity: 0.5; }
#tools-home .calculator-art > div { display: flex; align-items: center; justify-content: space-between; width: 90%; border-top: 1px solid var(--tools-line, #d3d4c4); font-size: 3.5rem; color: var(--tools-muted, #b1b69b); }
#tools-home .calculator-art i { font-size: 2rem; font-style: normal; }
#tools-home .tool-map { grid-column: span 4; background: var(--tools-surface, #e9ede5); border-radius: 1.25rem; }
#tools-home .tool-resume { grid-column: span 3; background: var(--tools-tint); border-radius: 1.75rem; }
#tools-home .resume-art { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 1rem; min-height: 145px; margin: 0.75rem 0; }
#tools-home .resume-art-sheet { display: flex; flex-shrink: 0; width: 110px; height: 140px; padding: 12px; background: var(--tools-paper); box-shadow: 0 6px 20px var(--tools-shadow); transform: rotate(-6deg); border-radius: 3px; color: var(--tools-accent); }
#tools-home .resume-art-sheet aside { width: 26%; padding-right: 7px; border-right: 1px solid var(--tools-line); }
#tools-home .resume-art-sheet section { flex: 1; min-width: 0; padding-left: 9px; }
#tools-home .resume-art-sheet strong { font-size: 10px; letter-spacing: -.04em; white-space: nowrap; }
#tools-home .resume-art-sheet p { font-size: 4px; margin-top: 3px; }
#tools-home .resume-art-sheet hr { border: 0; border-top: 1px solid var(--tools-line); margin: 10px 0; }
#tools-home .resume-art-sheet hr::before, #tools-home .resume-art-sheet hr::after { display: none; }
#tools-home .resume-art-sheet b,#tools-home .resume-art-sheet i { display: block; height: 3px; margin-top: 6px; background: var(--tools-line); }
#tools-home .resume-art-sheet b { width: 65%; margin-top: 15px; background: var(--tools-accent); opacity: .5; }
#tools-home .resume-art > span { color: var(--tools-accent); font-size: 1.15rem; letter-spacing: -.03em; line-height: 1.3; }
#tools-home .map-art { position: relative; flex: 1; min-height: 130px; margin: 0.75rem 0; overflow: hidden; color: var(--tools-muted, #d1dac8); }
#tools-home .map-art svg { width: 100%; height: 130px; }
#tools-home .map-art span { position: absolute; bottom: 0; left: 0; font: 0.55rem var(--reader-code-font); letter-spacing: 0.1em; color: var(--tools-muted, #8c9983); }
#tools-home .tools-outro { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; font-size: 0.72rem; color: var(--tools-muted, #8c9184); }
#tool-pending { position: fixed; inset: 0; width: min(420px, calc(100vw - 32px)); margin: auto; padding: 2.5rem; border: 1px solid var(--tools-line, #d6ddc7); border-radius: 1rem; background: var(--tools-paper, #f6f5ef); color: var(--tools-ink, #30372b); box-shadow: 0 2rem 8rem var(--tools-shadow, #17200c30); }
#tool-pending::backdrop { background: var(--tools-backdrop, #17200c40); backdrop-filter: blur(4px); }
#tool-pending .pending-close { position: absolute; top: 0.8rem; right: 1rem; border: 0; background: none; color: inherit; font-size: 1.5rem; cursor: pointer; }
#tool-pending .pending-icon { font-size: 4rem; color: var(--tools-muted, #94a773); }
#tool-pending h2 { font-size: 1.35rem; letter-spacing: 0; }
#tool-pending > p:not(.tools-eyebrow) { color: var(--tools-muted, #747d69); font-size: 0.9rem; }
#tool-pending .pending-dismiss { display: flex; justify-content: space-between; width: 100%; margin-top: 2rem; padding: 0.8rem 1rem; background: var(--tools-featured, #e3eacb); border: 0; border-radius: 0.5rem; color: var(--tools-accent, #465934); cursor: pointer; }

/* Every row is filled; shared row heights keep the mosaic tightly joined. */
#tools-home .tool-demo { grid-column: span 2; }
#tools-home .tool-demo-label { padding: .15rem .4rem; border-radius: .4rem; background: var(--tools-tint); color: var(--tools-ink); font-size: .58rem; font-weight: 600; }
#tools-home .demo-art { display: grid; place-items: center; flex: 1; min-height: 135px; padding: 1rem 0; color: var(--tools-accent); }
#tools-home .tool-demo h2 { font-size: 1.2rem; }
#tools-home .tool-demo h2 span { display: block; margin: .2rem 0 .35rem; }
#tools-home .palette-art { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 8px; }
#tools-home .palette-art i { display: block; width: 25%; height: 100px; border-radius: 18px; background: #f6b56b; transform: rotate(-9deg); box-shadow: 0 5px 12px #59351918; }
#tools-home .palette-art i + i { margin-left: -10px; }
#tools-home .palette-art i:nth-child(2) { background: #ef7951; transform: rotate(-3deg); }
#tools-home .palette-art i:nth-child(3) { background: #8b9a72; transform: rotate(4deg); }
#tools-home .palette-art i:nth-child(4) { background: #d4b7d5; transform: rotate(11deg); }
#tools-home .focus-art { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 122px; height: 122px; border: 7px solid var(--tools-tint); border-top-color: var(--tools-accent); border-right-color: var(--tools-accent); border-radius: 50%; }
#tools-home .focus-art > span { font-size: 1.8rem; font-weight: 600; }
#tools-home .focus-art small { font: .42rem var(--reader-code-font); color: var(--tools-muted); }
#tools-home .notes-art { width: 78%; padding: 16px; border-radius: 12px; background: var(--tools-tint); transform: rotate(-5deg); box-shadow: var(--tools-raised); }
#tools-home .notes-art > span { font-size: .8rem; font-weight: 600; }
#tools-home .notes-art i { display: block; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--tools-line); }
#tools-home .notes-art i:last-child { width: 65%; }
#tools-home .convert-art { display: flex; align-items: center; gap: .65rem; font-size: 2rem; font-weight: 600; }
#tools-home .convert-art small { font-size: .85rem; font-weight: 400; color: var(--tools-muted); }
#tools-home .convert-art i { font-size: 1.3rem; font-style: normal; color: var(--tools-muted); }
#tools-home .time-art { text-align: center; }
#tools-home .time-art > span { display: block; font: 500 2rem var(--reader-code-font); letter-spacing: -.08em; }
#tools-home .time-art > span > span { opacity: .4; }
#tools-home .time-art small { display: block; margin-top: .6rem; font-size: .75rem; color: var(--tools-muted); }
#tools-home .json-art { width: 100%; padding: 12px; border-radius: 12px; background: var(--tools-tint); font: .75rem/1.8 var(--reader-code-font); }
#tools-home .json-art b, #tools-home .json-art > span { display: block; }
#tools-home .json-art b { font-size: 1.2rem; }
#tools-home .json-art em { color: var(--tools-muted); font-style: normal; }
@media (min-width: 701px) and (max-width: 900px) {
    #tools-home .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #tools-home .tool-card { grid-column: span 1; }
    #tools-home .tool-card-top { font-size: .58rem; letter-spacing: 0; }
    #tools-home .resume-art > span { font-size: 1rem; }
}
@media (max-width: 700px) {
    #main-content:has(#tools-home) { width: calc(100% - 32px); }
    #tools-home { padding-top: 1rem; }
    #tools-home .tools-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0.85rem; }
    #tools-home .tool-card { grid-column: 1; aspect-ratio: auto; min-height: 280px; padding: 1.2rem; }
    #tools-home .tool-card { width: 100%; justify-self: stretch; }
    #tools-home .tool-demo { min-height: 260px; }
    #tools-home .dictionary-art { padding: 0; gap: 1rem; }
    #tools-home .dictionary-art > span:first-child { font-size: 5.5rem; }
    #tools-home .art-phonetic { font-size: 0.9rem; }
    #tools-home .art-note, #tools-home .dictionary-art > i { display: none; }
    #tools-home .tools-outro { flex-direction: column; gap: 0.4rem; }
}
@media (max-width: 360px) {
    #tools-home .resume-art { min-height: 130px; gap: 0.6rem; }
    #tools-home .resume-art-sheet { width: 95px; height: 120px; padding: 10px; }
    #tools-home .resume-art > span { font-size: 0.95rem; }
    #tools-home .tool-card-top { font-size: 0.58rem; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) { #tools-home .tool-card, #tools-home .tool-open { transition: none; } }