.is-tools-page .home-header, .is-tools-page .home-footer { display: none; }
.is-tools-page .home-section {
  position: relative; display: flex; flex-direction: column; width: 100%; margin: 0;
  padding: clamp(32px, 4.5dvh, 56px) clamp(20px, 3.5vw, 66px) 16px; overflow-y: auto; overflow-x: hidden;
}
.is-tools-page #homeSectionTitle { flex: none; margin: 5px 0 0; text-align: center; font-size: clamp(28px, 2.8vw, 48px); font-weight: 500; letter-spacing: .3em; line-height: 1.4; }
.is-tools-page #homeSectionTitle::first-letter { color: var(--home-red); }
.is-tools-page .home-back { position: absolute; right: clamp(20px, 3vw, 48px); top: 24px; transform: none; direction: ltr; unicode-bidi: isolate; writing-mode: horizontal-tb; color: #6b7080; border-color: transparent; font-size: clamp(14px, 1.3vw, 21px); letter-spacing: .15em; text-shadow: 0 2px 3px rgb(43 46 56 / 18%); }
.is-tools-page .home-back:hover { color: var(--home-red); border-color: currentColor; }
.tools-page { --tools-ink: #2a2d38; --tools-sub: #6b7080; --tools-copper: #a07850; --tools-icon-unit: clamp(9px, 1vw, 16px); flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0; color: var(--tools-ink); }
.tools-subtitle { margin: 9px 0 0; text-align: center; color: var(--tools-sub); font-size: clamp(12px, 1.1vw, 18px); letter-spacing: .2em; }
.tools-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: clamp(22px, 2.5vw, 48px); align-items: stretch; margin: clamp(28px, 2.5vw, 42px) 0 24px; }
.tools-catalog { min-width: 0; }
.tools-filters { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 32px); margin-bottom: clamp(16px, 1.8vw, 28px); }
.tools-filter { border: 0; border-bottom: 1px solid transparent; padding: 0 0 5px; background: transparent; color: var(--tools-sub); font-family: inherit; font-size: clamp(13px, 1.1vw, 18px); letter-spacing: .2em; }
.tools-filter.is-selected, .tools-filter:hover { color: var(--home-red); border-bottom-color: currentColor; }
.tools-shelf { height: clamp(490px, 39vw, 670px); border: clamp(4px, .5vw, 9px) solid var(--tools-ink); border-radius: 4px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(4px, .5vw, 9px); background: var(--tools-ink); box-shadow: 0 12px 30px rgb(0 0 0 / 18%); }
.tools-cell { position: relative; min-width: 0; min-height: 0; border: 0; padding: 18px 7px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, .55vw, 9px); background: linear-gradient(180deg, #e7e9ec, #d6d9de); color: inherit; font-family: inherit; text-align: center; overflow: hidden; transition: background .3s, opacity .3s; }
.tools-cell::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: 10%; height: 7px; border-radius: 50%; background: rgb(0 0 0 / 12%); filter: blur(4px); }
.tools-cell b { position: relative; z-index: 1; font-size: clamp(11px, 1vw, 16px); font-weight: 500; letter-spacing: .06em; line-height: 1.35; overflow-wrap: anywhere; }
.tools-cell small { position: relative; z-index: 1; font-size: clamp(9px, .78vw, 13px); color: var(--tools-sub); line-height: 1.4; }
.tools-cell:not(.is-empty):not(:disabled):hover { background: linear-gradient(180deg, #f1f2f4, #dfe2e6); }
.tools-cell:not(:disabled):hover .tools-object { transform: translateY(-7px); }
.tools-cell.is-selected { background: linear-gradient(180deg, #fbfbfc, #e6e8eb); }
.tools-cell.is-selected b { color: var(--home-red); }
.tools-cell.is-selected::before { content: ''; position: absolute; inset: 0; border: 2px solid var(--home-red); z-index: 2; pointer-events: none; }
.tools-cell.is-dim { opacity: .22; cursor: default; }
.tools-cell.is-empty { background: linear-gradient(180deg, #dfe1e5, #d0d3d8); color: #9a9fab; font-size: clamp(12px, .95vw, 16px); letter-spacing: .25em; }
.tools-cell.is-empty::after { display: none; }
.tools-cell.has-preview { isolation: isolate; justify-content: flex-end; }
.tools-preview-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.tools-preview-image.is-ready { object-fit: contain; transform: scale(var(--tools-preview-zoom, 1)); transition: transform .45s cubic-bezier(.3, .8, .3, 1); }
.tools-cell:not(:disabled):focus-visible .tools-preview-image.is-ready { transform: scale(1); }
@media (hover: hover) {
  .tools-cell:not(:disabled):hover .tools-preview-image.is-ready { transform: scale(1); }
}
.tools-cell.has-preview::after { inset: 0; height: auto; border-radius: 0; filter: none; background: linear-gradient(transparent 32%, rgb(0 0 0 / 85%)); pointer-events: none; }
.tools-cell.has-preview .tools-object { display: none; }
.tools-cell.has-preview b, .tools-cell.has-preview small { color: #fff; text-shadow: 0 1px 3px #000; }
.tools-cell.has-preview .tools-type { background: rgb(255 255 255 / 90%); }
.tools-type { position: absolute; top: 6px; z-index: 1; font-size: clamp(9px, .72vw, 12px); line-height: 1.4; border-radius: 2px; padding: 0 4px; }
.tools-type { right: 6px; color: var(--home-red); border: 1px solid currentColor; }
.tools-object { position: relative; display: block; flex: none; z-index: 1; font-size: var(--tools-icon-unit); transition: transform .35s cubic-bezier(.3, .8, .3, 1); }
.tools-cell.is-big .tools-object { font-size: calc(var(--tools-icon-unit) * 1.6); margin: 10px 0; }
.tools-icon-web { width: 5em; height: 3.5em; border: .2em solid var(--tools-ink); border-radius: .35em; background: white; }
.tools-icon-web::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .75em; background: var(--tools-ink); }
.tools-icon-web::after { content: ''; position: absolute; left: .6em; right: .6em; top: 1.35em; height: 1.5em; background: repeating-linear-gradient(#2a2d3833 0 .22em, transparent .22em .52em); }
.tools-icon-plg { width: 3.6em; height: 3.6em; }
.tools-icon-plg::before { content: ''; position: absolute; inset: .7em 0 0 .7em; background: var(--tools-copper); border-radius: .3em; }
.tools-icon-plg::after { content: ''; position: absolute; left: 1.5em; top: 0; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--tools-copper); box-shadow: -1.5em 1.5em 0 var(--tools-copper); }
.tools-icon-desk { width: 4.6em; height: 3.4em; }
.tools-icon-desk::before { content: ''; position: absolute; left: 0; top: 0; width: 2em; height: .8em; background: var(--tools-copper); border-radius: .25em .25em 0 0; }
.tools-icon-desk::after { content: ''; position: absolute; left: 0; right: 0; top: .6em; bottom: 0; background: linear-gradient(160deg, #c89a5c, #a07850); border-radius: 0 .3em .3em .3em; }
.tools-icon-planet { width: 3.6em; height: 3.6em; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #9dbdb2, #527c94 50%, #303c5b); }
.tools-detail { --detail-pad-y: clamp(20px, 1.9vw, 32px); --detail-pad-x: clamp(18px, 2.1vw, 36px); --detail-inset: 6px; --detail-rx: 0deg; --detail-ry: 0deg; --detail-px: 50%; --detail-py: 50%; --detail-band-x: 50%; --detail-band-y: 50%; --detail-light: 0; --detail-reach: 0; min-width: 0; padding: 0; display: flex; flex-direction: column; border-radius: 20px; perspective: 1000px; touch-action: pan-y pinch-zoom; scroll-margin-top: 20px; }
.tools-detail-frame { position: relative; isolation: isolate; flex: 1; min-width: 0; min-height: 0; padding: var(--detail-pad-y) var(--detail-pad-x); display: flex; flex-direction: column; border-radius: inherit; background: rgb(240 240 243 / 80%); box-shadow: 0 22px 44px -22px rgb(24 24 27 / 30%), 0 6px 16px -10px rgb(24 24 27 / 16%); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); transform: rotateX(var(--detail-rx)) rotateY(var(--detail-ry)); }
.tools-detail-frame::before, .tools-detail-frame::after, .tools-detail-foil, .tools-detail-glare, .tools-detail-shade { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.tools-detail-frame::before { content: ''; inset: var(--detail-inset); border-radius: calc(20px - var(--detail-inset)); background: linear-gradient(180deg, rgb(255 255 255 / 88%), rgb(246 246 248 / 82%)); box-shadow: inset 0 0 0 1px rgb(24 24 27 / 8%), inset 0 1px 0 #fff, 0 4px 10px -5px rgb(24 24 27 / 18%); }
.tools-detail-foil { inset: var(--detail-inset); border-radius: calc(20px - var(--detail-inset)); background-image: repeating-linear-gradient(0deg, #f4b1ad 5%, #f2d6a6 10%, #c7dbb9 15%, #b7dedb 20%, #bfc9e4 25%, #d6c1e0 30%, #f4b1ad 35%), repeating-linear-gradient(-45deg, #edf0f5 0%, #aabfc0 3.8%, #c9dfdd 4.5%, #aabfc0 5.2%, #edf0f5 10%, #edf0f5 12%); background-size: 500% 500%, 300% 300%; background-position: 0 var(--detail-band-y), var(--detail-band-x) var(--detail-band-y); background-blend-mode: color, hard-light; mix-blend-mode: multiply; opacity: calc(.035 + var(--detail-light) * .14); }
.tools-detail-glare { z-index: 2; background: radial-gradient(farthest-corner circle at var(--detail-px) var(--detail-py), rgb(255 255 255 / 80%), rgb(255 255 255 / 36%) 20%, transparent 60%); mix-blend-mode: overlay; opacity: calc(var(--detail-light) * .5); }
.tools-detail-shade { z-index: 2; background: radial-gradient(farthest-corner circle at var(--detail-px) var(--detail-py), transparent 30%, rgb(24 24 27 / 14%) 100%); opacity: calc(var(--detail-light) * var(--detail-reach) * .5); }
.tools-detail-frame::after { content: ''; z-index: 3; box-shadow: inset 0 0 0 1px rgb(24 24 27 / 7%), inset 0 1px 0 rgb(255 255 255 / 95%); }
#toolsDetailContent, .tools-actions, .tools-link-note { position: relative; z-index: 1; }
.tools-detail-body { animation: tools-detail-in .2s ease-out; }
@keyframes tools-detail-in { from { opacity: .3; } to { opacity: 1; } }
.tools-detail-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--home-red); font-size: clamp(11px, .92vw, 15px); line-height: 1.6; letter-spacing: .15em; }
.tools-detail-meta span:last-child { color: var(--tools-copper); letter-spacing: .05em; text-align: right; }
.tools-detail h3 { margin: 12px 0 8px; font-size: clamp(24px, 2vw, 34px); font-weight: 500; letter-spacing: .12em; line-height: 1.3; overflow-wrap: anywhere; }
.tools-summary { margin: 0; padding-bottom: 16px; border-bottom: 1px solid #2a2d3822; font-size: clamp(14px, 1.05vw, 18px); line-height: 1.7; }
.tools-detail-rows { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px 12px; margin: 18px 0 24px; font-size: clamp(13px, .98vw, 17px); line-height: 1.7; }
.tools-detail-rows dt { align-self: start; padding-top: 2px; border-top: 1px solid var(--home-red); letter-spacing: .15em; }
.tools-detail-rows dd { min-width: 0; margin: 0; color: #4c5160; overflow-wrap: anywhere; }
.tools-tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tools-tags li { font-size: clamp(12px, .85vw, 15px); line-height: 1.4; padding: 2px 9px; border: 1px solid #2a2d3855; border-radius: 20px; }
.tools-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: auto; }
.tools-actions.has-single-link { grid-template-columns: minmax(0, 1fr); }
.tools-actions :is(button, a) { display: block; padding: 12px 6px; border: 1px solid var(--tools-ink); border-radius: 6px; background: transparent; font-family: inherit; font-size: clamp(13px, 1vw, 17px); letter-spacing: .15em; text-decoration: none; text-align: center; }
.tools-actions a { box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), 0 4px 10px -5px rgb(24 24 27 / 25%); transition: background .2s, color .2s, transform .2s, filter .2s; }
.tools-actions a[aria-disabled="false"]:active { transform: scale(.97); filter: brightness(.92); }
.tools-actions :first-child { background: var(--tools-ink); color: #fff; }
.tools-actions button:not(:disabled):hover, .tools-actions a[aria-disabled="false"]:hover { color: white; background: var(--home-red); border-color: var(--home-red); }
.tools-actions button:disabled, .tools-actions a[aria-disabled="true"] { opacity: .35; cursor: default; }
.tools-actions a:focus-visible { outline: 2px solid var(--home-red); outline-offset: 4px; }
.tools-link-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--tools-sub); }
.home-scene .tools-cell:focus-visible { outline-offset: -4px; }
@media (min-width: 601px) and (min-height: 600px) {
  /* 桌面按窗口剩余高度分配格架与详情，不再由窗口宽度撑高整页。 */
  .is-tools-page .home-section { padding-top: clamp(18px, 2.4dvh, 32px); padding-bottom: 12px; }
  .is-tools-page #homeSectionTitle { font-size: clamp(26px, min(2.8vw, 5dvh), 44px); }
  .tools-page { --tools-icon-unit: clamp(7px, min(.85vw, 1.3dvh), 14px); flex: 1 1 0; }
  .tools-subtitle { flex: none; font-size: clamp(12px, min(1.1vw, 2dvh), 18px); }
  .tools-layout { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); margin: clamp(14px, 2dvh, 24px) 0 14px; }
  .tools-catalog { display: flex; flex-direction: column; min-height: 0; }
  .tools-filters { flex: none; margin-bottom: clamp(10px, 1.6dvh, 18px); }
  .tools-shelf { flex: 1; height: auto; min-height: 0; }
  .tools-cell { padding: 16px 6px 6px; gap: clamp(3px, .6dvh, 7px); }
  .tools-cell b { font-size: clamp(11px, .85vw, 14px); }
  .tools-cell small { font-size: clamp(9px, .72vw, 12px); }
  .tools-cell.is-small { padding: 18px 4px 4px; gap: 3px; }
  .tools-cell.is-small .tools-object { font-size: calc(var(--tools-icon-unit) * .75); }
  .tools-cell.is-small b { font-size: clamp(9px, .85vw, 12px); letter-spacing: 0; }
  .tools-cell.is-small small { font-size: clamp(8px, .65vw, 10px); }
  .tools-detail { min-height: 0; --detail-pad-y: clamp(16px, 2dvh, 28px); --detail-pad-x: clamp(16px, 1.6vw, 28px); }
  #toolsDetailContent { min-height: 0; overflow-y: auto; }
  .tools-detail-meta { font-size: clamp(11px, min(.92vw, 2dvh), 15px); }
  .tools-detail h3 { font-size: clamp(22px, 2vw, 30px); margin: 10px 0 6px; }
  .tools-summary { font-size: clamp(13px, min(.95vw, 2.2dvh), 16px); line-height: 1.55; padding-bottom: 12px; }
  .tools-detail-rows { grid-template-columns: 38px minmax(0, 1fr); gap: clamp(9px, 1.4dvh, 16px) 10px; margin: 12px 0 16px; font-size: clamp(12px, min(.9vw, 2dvh), 15px); line-height: 1.55; }
  .tools-tags { gap: 5px; }
  .tools-tags li { font-size: clamp(11px, .8vw, 13px); padding: 2px 7px; }
  .tools-actions { flex: none; gap: 10px; }
  .tools-actions :is(button, a) { padding: 9px 6px; }
  .tools-link-note { flex: none; margin-top: 6px; font-size: 11px; }
}
@media (min-width: 601px) and (max-width: 1100px) {
  .tools-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); }
  .tools-cell b { font-size: clamp(9px, 1.15vw, 12px); }
  .tools-cell small { font-size: clamp(8px, 1vw, 11px); }
  .tools-detail { --detail-pad-x: 14px; }
  .tools-detail-rows { grid-template-columns: 32px minmax(0, 1fr); gap: 10px 8px; }
}
@media (max-width: 600px) {
  .is-tools-page .home-section { padding: 30px 12px 12px; }
  .is-tools-page #homeSectionTitle { font-size: clamp(23px, 5.8vw, 32px); letter-spacing: .1em; }
  .tools-page { --tools-icon-unit: clamp(2.5px, .8vw, 4px); flex: 1 1 0; min-height: 0; }
  .tools-subtitle { flex: none; margin-top: 5px; font-size: 10px; letter-spacing: .04em; }
  .tools-layout { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 6px; margin: 8px 0 6px; align-items: stretch; }
  .tools-catalog { display: contents; }
  .tools-filters { grid-column: 1 / -1; grid-row: 1; margin: 0; gap: clamp(6px, 2vw, 12px); }
  .tools-filter { font-size: clamp(9px, 2.4vw, 12px); letter-spacing: .04em; }
  .tools-shelf { grid-column: 1; grid-row: 2; height: clamp(144px, min(62vw, 28dvh), 210px); border-width: 3px; gap: 3px; }
  .tools-cell { padding: 9px 2px 1px; gap: 1px; justify-content: flex-end; }
  .tools-cell.is-big { justify-content: center; }
  .tools-cell.has-preview { justify-content: flex-end; }
  .tools-cell b { font-size: clamp(5px, 1.5vw, 7px); line-height: 1.15; letter-spacing: 0; }
  .tools-cell.is-big b { font-size: clamp(7px, 1.8vw, 10px); }
  .tools-cell small { font-size: clamp(4.5px, 1.2vw, 6px); line-height: 1.2; }
  .tools-cell.is-big .tools-object { margin: 1px 0; }
  .tools-cell:not(.is-big) .tools-object { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); opacity: .18; }
  .tools-cell:not(.is-big):hover .tools-object { transform: translate(-50%, -50%); }
  .tools-type { top: 1px; font-size: clamp(4.5px, 1vw, 6px); line-height: 1.2; padding: 0 1px; }
  .tools-type { right: 1px; }
  .tools-cell.is-empty { font-size: 6px; letter-spacing: 0; }
  .tools-detail { grid-column: 1; grid-row: 3; position: static; min-height: 0; max-height: none; --detail-pad-y: 8px; --detail-pad-x: 10px; --detail-inset: 3px; border-radius: 12px; }
  .tools-detail-frame::before, .tools-detail-foil { border-radius: 9px; }
  #toolsDetailContent { min-height: 0; overflow-y: auto; }
  .tools-detail-meta { flex-wrap: wrap; gap: 2px 4px; font-size: 8px; line-height: 1.4; letter-spacing: 0; }
  .tools-detail h3 { margin: 4px 0; font-size: clamp(14px, 3.6vw, 18px); line-height: 1.2; letter-spacing: .04em; }
  .tools-summary { padding-bottom: 6px; font-size: 10px; line-height: 1.4; }
  .tools-detail-rows { grid-template-columns: 20px minmax(0, 1fr); gap: 6px 4px; margin: 8px 0; font-size: 9.5px; line-height: 1.45; }
  .tools-tags { gap: 3px; }
  .tools-tags li { padding: 1px 4px; font-size: 8.5px; }
  .tools-actions { flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
  .tools-actions :is(button, a) { padding: 6px 3px; font-size: 10px; letter-spacing: .04em; }
  .tools-link-note { flex: none; margin-top: 4px; font-size: 8px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .tools-cell, .tools-object, .tools-preview-image.is-ready { transition: none; }
  .tools-cell:hover .tools-object { transform: none; }
  .tools-detail-body { animation: none; }
  .tools-detail-frame { transform: none; }
  .tools-detail-foil, .tools-detail-glare, .tools-detail-shade { display: none; }
  .tools-actions a { transition: none; }
  .tools-actions a[aria-disabled="false"]:active { transform: none; }
}