.tool-page{max-width:640px;margin:0 auto;padding:100px var(--page-gutter, 24px) 120px}.tool-back{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-sans);font-size:.78rem;font-weight:300;color:var(--stone);text-decoration:none;min-height:44px;margin-bottom:24px;transition:color .2s ease;letter-spacing:.02em}.tool-back:hover{color:var(--crimson)}.tool-back:before{content:"←"}.tool-page .page-label{font-family:var(--font-sans);margin-bottom:var(--space-sm, 12px)}.tool-page .page-h1{font-size:clamp(1.75rem,3.5vw,2.4rem);margin-bottom:16px}.tool-tagline{font-family:var(--font-sans);font-size:var(--text-base);font-weight:300;color:var(--stone);line-height:1.9;margin:0 0 20px}.tool-meta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.tool-meta-stack{font-family:var(--font-sans);font-size:.68rem;font-weight:300;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}.tool-meta-year{font-family:var(--font-sans);font-size:.68rem;font-weight:300;letter-spacing:.1em;color:var(--stone);opacity:.6}.tool-page .divider{margin:40px 0 44px}.tool-section{margin-bottom:44px}.tool-section-h2{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.15rem,1.5vw,1.3rem);font-weight:400;color:var(--ink);margin:0 0 14px}.tool-body{font-family:var(--font-sans);font-size:var(--text-base);font-weight:300;color:var(--stone);line-height:1.9;margin:0 0 24px}.tool-body code{font-family:monospace;font-size:.85em;background:#7f1f120f;color:var(--crimson-text, #7f1f12);padding:1px 5px;border-radius:3px}.tool-media{width:100%;aspect-ratio:16 / 9;background:var(--surface, #f7f3f1);border:1px dashed var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;margin-top:4px;overflow:hidden}.tool-media img,.tool-media video{width:100%;height:100%;object-fit:cover;border-radius:5px}.tool-media-placeholder{font-family:var(--font-sans);font-size:.72rem;font-weight:300;color:var(--stone);opacity:.45;letter-spacing:.08em;text-align:center}.tool-hero-media{margin-top:28px}.tool-video-block{position:relative;cursor:pointer;border-radius:6px;overflow:hidden;margin-top:4px;width:100%}.tool-video-block img{width:100%;height:auto;display:block;transition:opacity .4s ease}.tool-video-block .case-hover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease;pointer-events:none}.tool-video-block:hover .case-hover-video{opacity:1}.tool-video-block .case-hover-hint{position:absolute;bottom:14px;right:16px;font-family:var(--font-sans);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#ffffff8c;pointer-events:none;opacity:1;transition:opacity .3s ease;z-index:2}.tool-video-block:hover .case-hover-hint{opacity:0}.tool-video-block .case-play-btn{position:absolute;inset:0;width:100%;height:100%;background:none;border:none;cursor:pointer;display:none;align-items:center;justify-content:center;z-index:3}.tool-video-block .case-play-btn:before{content:"";position:absolute;width:56px;height:56px;border-radius:50%;background:#ffffff2e;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .2s ease,background .2s ease}.tool-video-block .case-play-btn svg{position:relative;z-index:1;color:#fff}.tool-video-block .case-play-btn:active:before{background:#ffffff47;transform:scale(.94)}.tool-video-block.is-playing .case-play-btn{opacity:0;pointer-events:none}@media(max-width:767px){.tool-video-block .case-play-btn{display:flex}.tool-video-block .case-hover-hint{display:none}.tool-video-block.is-playing .case-hover-video{opacity:1}}.tool-github{background:var(--surface, #f7f3f1);border:1px solid var(--border);border-left:3px solid var(--crimson);border-radius:6px;padding:22px 24px;display:flex;flex-direction:column;gap:6px;margin-top:8px}.tool-github-label{font-family:var(--font-sans);font-size:.6rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);margin:0}.tool-github-name{font-family:var(--font-serif);font-style:italic;font-size:1rem;color:var(--ink);margin:0;line-height:1.3}.tool-github-desc{font-family:var(--font-sans);font-size:.78rem;font-weight:300;color:var(--stone);line-height:1.7;margin:4px 0 8px}.tool-github-link{font-family:var(--font-serif);font-style:italic;font-size:.88rem;color:var(--crimson);text-decoration:none;display:inline-flex;align-items:center;gap:5px;border-bottom:1px solid var(--border-crimson, rgba(127,31,18,.25));padding-bottom:1px;width:fit-content;transition:color .2s ease,border-color .2s ease,gap .2s ease}.tool-github-link:hover{color:var(--crimson-text, #7f1f12);border-color:var(--crimson);gap:8px}.tool-back--foot{margin-top:52px;margin-bottom:0}