.tool-card{position:relative;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.tool-card:hover{transform:translateY(-3px);border-color:#2d5068;box-shadow:0 8px 20px #0004}
.site-header nav a:hover,.all-tools-link:hover{border-color:transparent}
.tool-icon{width:62px;height:62px;margin-bottom:20px;border:1px solid #2e6578;border-radius:16px;background:linear-gradient(145deg,#1b4357,#122b3d);box-shadow:0 8px 18px #0004;color:var(--cyan);font-size:31px;line-height:1;font-weight:800}
.tool-icon img{display:block;width:34px;height:34px;object-fit:contain}
.keyboard-icon{color:#62d4ff;background:linear-gradient(145deg,#153b52,#142d43) url('../images/icon-keyboard.svg') center/34px no-repeat;font-size:0}
.speaker-icon{color:#5fdfaa;background:linear-gradient(145deg,#16473e,#15352f) url('../images/icon-speaker.svg') center/34px no-repeat;font-size:0}
.microphone-icon{color:#c2a5ff;background:linear-gradient(145deg,#332955,#24213f) url('../images/icon-microphone.svg') center/34px no-repeat;font-size:0}
.battery-icon{color:#f4b62c;background:linear-gradient(145deg,#4a3a1b,#302b1d) url('../images/icon-battery.svg') center/34px no-repeat;font-size:0}
.camera-icon{color:#62d4ff;background:linear-gradient(145deg,#153b52,#142d43) url('../images/icon-camera.svg') center/34px no-repeat;font-size:0}
.tool-icon:before{font-size:30px;line-height:1}.keyboard-icon:before{content:'⌨'}.speaker-icon:before{content:'◖◗'}.microphone-icon:before{content:'♩'}.battery-icon:before{content:'▣'}.camera-icon:before{content:'▣'}
.tool-icon:before{content:'';display:none}.keyboard-icon,.speaker-icon,.microphone-icon,.battery-icon,.camera-icon{background-repeat:no-repeat;background-position:center;background-size:34px}
.keyboard-icon{background-image:url('../images/icon-keyboard.svg');background-color:#153b52}.speaker-icon{background-image:url('../images/icon-speaker.svg');background-color:#16473e}.microphone-icon{background-image:url('../images/icon-microphone.svg');background-color:#332955}.battery-icon{background-image:url('../images/icon-battery.svg');background-color:#4a3a1b}.camera-icon{background-image:url('../images/icon-camera.svg');background-color:#153b52}
.home-information article>span{display:grid;place-items:center;width:52px;height:52px;flex:0 0 52px;border:1px solid #2e6578;border-radius:15px;background:#15384d;color:var(--cyan);font-size:25px;box-shadow:0 7px 16px #0003}
@media (max-width:700px){.tool-icon{width:56px;height:56px;font-size:28px}.home-information article>span{width:46px;height:46px;flex-basis:46px}}
.breadcrumbs{display:flex;align-items:center;gap:10px;min-height:24px;margin-bottom:4px;color:var(--muted);font-size:.9rem;line-height:1.4}
.breadcrumbs a{color:var(--muted);text-decoration:none;transition:color .18s ease}.breadcrumbs a:hover{color:var(--cyan)}.breadcrumbs span[aria-hidden="true"]{color:#5e7b8e;font-size:1.1em}.breadcrumbs [aria-current="page"]{color:var(--text);font-weight:600}
.tools-menu>div a{display:flex!important;align-items:center;gap:9px}.tools-menu>div a:before{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border-radius:7px;background:#15384d;color:var(--cyan);font-size:14px;line-height:1}.tools-menu>div a[href*="keyboard"]:before{content:'⌨'}.tools-menu>div a[href*="speaker"]:before{content:'◖◗';color:#5fdfaa}.tools-menu>div a[href*="microphone"]:before{content:'♩';color:#c2a5ff}.tools-menu>div a[href*="camera"]:before{content:'◉';color:#62d4ff}.tools-menu>div a[href*="battery"]:before{content:'▣';color:#f4b62c}
.tools-menu>div a:after{content:none!important;display:none!important}
.tools-menu>div a:before{content:none!important;display:none!important}.menu-icon{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;border:1px solid #2e6578;border-radius:8px;background:#15384d;line-height:1}.menu-icon img{display:block;width:18px;height:18px;object-fit:contain}.menu-icon-speaker{background:#16473e}.menu-icon-microphone{background:#332955}.menu-icon-battery{background:#4a3a1b}.menu-icon-camera{background:#153b52}

/* Mouse Tester uses the same SVG icon treatment as every other tool. */
.tools-menu>div a[href="/tools/mouse-test"] .menu-icon{font-size:0;background:#15384d url("/assets/images/icon-mouse.svg") center/18px 18px no-repeat}
.site-header nav>a,.tools-menu summary,.all-tools-link{font-weight:650}.tools-menu>div a{font-weight:600}
.site-header a,.breadcrumbs a,.tool-card a,.home-hero-actions a,.home-information a{text-decoration:none!important}
a{text-decoration:none!important}
@media(max-width:560px){.breadcrumbs{gap:7px;font-size:.82rem;white-space:nowrap;overflow:auto;padding-bottom:2px}}