.tools-app{position:relative;isolation:isolate;display:flex;min-height:100svh;flex-direction:column;overflow-x:hidden;background:transparent}
.tools-app::before,.tools-app::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transition:opacity .4s ease}
.tools-app::before{background:radial-gradient(circle at 50% 32%,rgba(121,208,201,.2),transparent 34%),linear-gradient(145deg,var(--page-start),var(--page-end));opacity:1}
.tools-app::after{background:radial-gradient(circle at 50% 32%,rgba(240,182,111,.11),transparent 34%),linear-gradient(145deg,#152a2d,#0b1314);opacity:0}
.tools-app.dark-mode::before{opacity:0}.tools-app.dark-mode::after{opacity:1}
.tools-page{display:flex;flex:1;width:min(92vw,980px);margin:auto;flex-direction:column;align-items:center;justify-content:center;padding:clamp(34px,7vh,74px) 0 28px}
.tools-domains{display:flex;gap:14px;margin-bottom:14px;color:var(--muted);font-size:18px;font-weight:400;text-align:center;transition:transform .72s cubic-bezier(.22,.72,.2,1)}
.tools-hero{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:clamp(26px,5vh,42px);text-align:left;transition:transform .72s cubic-bezier(.22,.72,.2,1)}
.tools-logo-button{position:relative;display:flex;padding:0;overflow:visible;border:0;border-radius:25%;background:transparent;cursor:pointer;transition:transform .28s ease,filter .28s ease}
.tools-logo{box-sizing:content-box;width:clamp(74px,9vw,106px);height:clamp(74px,9vw,106px);margin:-36px;padding:36px;filter:drop-shadow(0 10px 18px rgba(var(--shadow-rgb),.16));transition:opacity .28s ease,transform .35s ease}
.tools-logo-bubbles{position:absolute;inset:0;opacity:0;transform:scale(.78);transition:opacity .28s ease,transform .35s ease}
.tools-logo-bubbles span{position:absolute;border-radius:50%;background:rgba(48,119,116,.78);box-shadow:0 5px 12px rgba(4,21,24,.15)}
.tools-logo-bubbles span:nth-child(1){left:2%;top:10%;width:54%;height:54%}
.tools-logo-bubbles span:nth-child(2){right:1%;bottom:0;width:66%;height:66%;background:rgba(39,146,141,.7)}
.tools-logo-bubbles span:nth-child(3){right:4%;top:0;width:27%;height:27%;background:rgba(177,109,68,.72)}
.tools-logo-button:hover,.tools-logo-button:focus-visible,.tools-logo-button[aria-pressed="true"]{border-color:transparent;background:transparent;box-shadow:none;transform:scale(1.06) rotate(-3deg)}
.tools-logo-button:hover .tools-logo,.tools-logo-button:focus-visible .tools-logo,.tools-logo-button[aria-pressed="true"] .tools-logo{filter:drop-shadow(0 10px 18px rgba(var(--shadow-rgb),.16)) drop-shadow(0 0 10px rgba(61,170,164,.38))}
.tools-logo-button:hover .tools-logo,.tools-logo-button:focus-visible .tools-logo,.tools-logo-button[aria-pressed="true"] .tools-logo{opacity:.34;transform:scale(.9)}
.tools-logo-button:hover .tools-logo-bubbles,.tools-logo-button:focus-visible .tools-logo-bubbles,.tools-logo-button[aria-pressed="true"] .tools-logo-bubbles{opacity:1;transform:scale(1)}
.tools-logo-button[aria-pressed="true"]:hover .tools-logo,.tools-logo-button[aria-pressed="true"]:focus-visible .tools-logo{opacity:1;transform:scale(1)}
.tools-logo-button[aria-pressed="true"]:hover .tools-logo-bubbles,.tools-logo-button[aria-pressed="true"]:focus-visible .tools-logo-bubbles{opacity:.18;transform:scale(.86)}
.tools-hero h1{margin:0;color:var(--accent);font-size:clamp(44px,7vw,70px);font-weight:780;line-height:.95;letter-spacing:-.025em}
.tools-hero p{max-width:none;margin:10px 0 0;color:var(--muted);font-size:clamp(16px,2vw,20px);font-weight:560;line-height:1.35;white-space:nowrap}
.tools-hub{display:grid;width:min(100%,650px);gap:12px}
.tools-link{position:relative;display:flex;align-items:center;justify-content:center;min-height:64px;padding:0 24px;overflow:hidden;border-radius:999px;background:rgba(48,119,116,.96);color:#f7fffb;text-align:center;text-decoration:none;box-shadow:0 8px 20px rgba(4,21,24,.15);transform-origin:center;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.tools-link strong{font-size:clamp(24px,3vw,32px);font-weight:780;line-height:1;transition:opacity .18s ease,transform .2s ease}
.tools-link span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 24px;color:#f7fffb;font-size:15px;font-weight:750;line-height:1.2;text-align:center;opacity:0;transform:scale(.97);transition:opacity .18s ease,transform .2s ease}
.tools-link:hover,.tools-link:focus-visible,.tools-link.is-touch-preview{background:rgba(39,175,166,.99);box-shadow:0 0 0 3px rgba(126,255,242,.42),0 10px 24px rgba(16,124,119,.24);transform:scale(1.018)}
.tools-link:hover strong,.tools-link:focus-visible strong,.tools-link.is-touch-preview strong{opacity:0;transform:scale(.96)}
.tools-link:hover span,.tools-link:focus-visible span,.tools-link.is-touch-preview span{opacity:1;transform:scale(1)}
.tools-link.is-touch-preview span{padding-right:58px;padding-left:58px}
.tools-link.is-touch-preview::after{content:"";position:absolute;right:24px;width:10px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg width='10' height='14' viewBox='0 0 10 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L7 7L2 12' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg width='10' height='14' viewBox='0 0 10 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L7 7L2 12' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat}
.tools-link:active{background:rgba(33,137,132,.99);transform:scale(.985)}
.tools-link.is-touch-preview:active{background:rgba(39,175,166,.99);transform:scale(1.018)}
.tools-app .footer{width:min(92vw,980px);margin:0 auto}
.tools-app.bubble-mode .tools-page{position:relative}
.tools-app.bubble-mode .tools-hub{position:fixed;inset:0;z-index:3;width:auto;pointer-events:none}
.tools-app.bubble-mode .tools-link{position:fixed;left:var(--bubble-x);top:var(--bubble-y);width:var(--bubble-size);height:var(--bubble-size);min-height:0;padding:14px;border-radius:50%;background:var(--bubble-color);box-shadow:0 8px 24px rgba(4,21,24,var(--bubble-shadow-opacity));backdrop-filter:blur(var(--bubble-blur));pointer-events:auto;transform:translate(-50%,-50%);transition:left 1.35s cubic-bezier(.22,.72,.2,1),top 1.35s cubic-bezier(.22,.72,.2,1),width 1.35s cubic-bezier(.22,.72,.2,1),height 1.35s cubic-bezier(.22,.72,.2,1),background 1.35s ease,backdrop-filter 1.35s ease,transform .2s ease,box-shadow .2s ease;animation:bubbleFloat var(--bubble-float-duration) ease-in-out var(--bubble-float-delay) infinite alternate}
.tools-app.bubble-mode .tools-link strong{font-size:var(--bubble-font-size);line-height:1.02;text-align:center;text-wrap:balance}
.tools-app.bubble-mode .tools-link span{display:none}
.tools-app.bubble-mode .tools-link:hover,.tools-app.bubble-mode .tools-link:focus-visible{transform:translate(-50%,-50%) scale(1.07)}
.tools-app.bubble-mode .tools-link:hover strong,.tools-app.bubble-mode .tools-link:focus-visible strong{opacity:1;transform:none}
.tools-app.bubble-mode .footer{position:relative;z-index:4}
@keyframes bubbleFloat{from{margin-left:calc(var(--bubble-float-x) * -1);margin-top:calc(var(--bubble-float-y) * -1)}to{margin-left:var(--bubble-float-x);margin-top:var(--bubble-float-y)}}
@media(max-width:720px){
  .tools-logo-button{pointer-events:none}
  .tools-page{width:min(92vw,620px);justify-content:flex-start;padding:26px 0 18px}
  .tools-domains{gap:11px;margin-bottom:12px;font-size:15px}
  .tools-hero{gap:13px;margin-bottom:24px;align-self:flex-start}
  .tools-logo{width:62px;height:62px}
  .tools-hero h1{font-size:clamp(33px,10vw,46px)}
  .tools-hero p{margin-top:6px;font-size:14px;line-height:1.3;white-space:normal}
  .tools-hub{gap:10px}
  .tools-link{min-height:62px;padding:12px 18px;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .tools-link strong{font-size:clamp(24px,7vw,30px)}
  .tools-link span{position:static;display:block;margin-top:4px;padding:0;font-size:12px;font-weight:650;line-height:1.2;opacity:.78;transform:none}
  .tools-link:hover,.tools-link:focus-visible{box-shadow:0 0 0 2px rgba(126,255,242,.28),0 7px 16px rgba(4,21,24,.17);transform:scale(.992)}
  .tools-link:hover strong,.tools-link:focus-visible strong{opacity:1;transform:none}
  .tools-link:hover span,.tools-link:focus-visible span{opacity:.9;transform:none}
  .tools-link:active{transform:scale(.975)}
}