@tailwind base;
@tailwind components;
@tailwind utilities;

:focus-visible{outline:none}

.navlink{display:inline-flex;align-items:center;gap:.5rem;color:rgba(226,232,240,.9);font-weight:600;letter-spacing:.01em;transition:transform .2s ease,opacity .2s ease,color .2s ease}
.navlink:hover{color:#18F2E6;opacity:1;transform:translateY(-1px)}
.navlink:focus-visible{border-radius:12px;box-shadow:0 0 0 2px rgba(24,242,230,.55)}

.mobilelink{display:block;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1.5rem;line-height:2rem;padding:.75rem 1rem;border-radius:1rem;color:rgba(241,245,249,.95);border:1px solid rgba(24,242,230,.16);background:rgba(7,11,20,.55);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.mobilelink:hover{transform:translateY(-2px);background:rgba(7,11,20,.8);border-color:rgba(24,242,230,.32)}
.mobilelink:focus-visible{box-shadow:0 0 0 2px rgba(24,242,230,.55)}

.link{color:rgba(226,232,240,.95);text-decoration:underline;text-decoration-color:rgba(24,242,230,.35);text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease,opacity .2s ease}
.link:hover{color:#18F2E6;text-decoration-color:rgba(24,242,230,.7)}
.link:focus-visible{border-radius:10px;box-shadow:0 0 0 2px rgba(24,242,230,.55)}

.card{position:relative;overflow:hidden;border-radius:1rem;border:1px solid rgba(24,242,230,.15);background:rgba(7,11,20,.55);padding:1.25rem;box-shadow:0 0 0 1px rgba(24,242,230,.1),0 12px 30px rgba(0,0,0,.5);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-2px);border-color:rgba(24,242,230,.28);box-shadow:0 0 0 1px rgba(24,242,230,.22),0 16px 40px rgba(0,0,0,.58)}
.card:focus-within{border-color:rgba(24,242,230,.35);box-shadow:0 0 0 2px rgba(24,242,230,.35),0 16px 40px rgba(0,0,0,.58)}

.cardHead{display:flex;align-items:flex-start;gap:.75rem}
.cardTitle{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1rem;line-height:1.5rem;color:rgba(248,250,252,.96)}
.cardText{margin-top:.75rem;font-size:.95rem;line-height:1.45rem;color:rgba(203,213,225,.9)}

.tipBtn{margin-top:1rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.9rem;border:1px solid rgba(24,242,230,.22);background:rgba(7,11,20,.55);padding:.5rem .75rem;font-weight:700;color:rgba(241,245,249,.95);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.tipBtn:hover{transform:translateY(-1px);border-color:rgba(24,242,230,.34);background:rgba(7,11,20,.78)}
.tipBtn:focus-visible{box-shadow:0 0 0 2px rgba(24,242,230,.55)}

.card2{border-radius:1rem;border:1px solid rgba(24,242,230,.15);background:rgba(7,11,20,.45);padding:1.25rem;box-shadow:0 0 0 1px rgba(24,242,230,.08),0 12px 30px rgba(0,0,0,.5);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card2:hover{transform:translateY(-2px) scale(1.01);border-color:rgba(24,242,230,.28);box-shadow:0 0 0 1px rgba(24,242,230,.18),0 16px 40px rgba(0,0,0,.58)}
.card2:focus-within{border-color:rgba(24,242,230,.35);box-shadow:0 0 0 2px rgba(24,242,230,.35),0 16px 40px rgba(0,0,0,.58)}

.infoDot{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;transition:transform .2s ease,opacity .2s ease}
.infoDot:hover{transform:translateY(-1px)}
.infoDot:focus-visible{box-shadow:0 0 0 2px rgba(24,242,230,.55);border-radius:9999px}

.tag{display:inline-flex;align-items:center;border-radius:9999px;border:1px solid rgba(24,242,230,.18);background:rgba(7,11,20,.6);padding:.3rem .65rem;font-size:.8rem;color:rgba(226,232,240,.92)}

.kw{position:relative;transition:color .2s ease,background-color .2s ease,box-shadow .2s ease}
.kw.kw-on{color:#18F2E6;text-shadow:0 0 18px rgba(24,242,230,.28)}
.kw.kw-on::after{content:"";position:absolute;inset:-2px -4px;border-radius:9999px;background:rgba(24,242,230,.1);z-index:-1;box-shadow:0 0 0 1px rgba(24,242,230,.14)}

.reveal{opacity:0;transform:translateY(12px)}
.reveal.is-in{opacity:1;transform:translateY(0);transition:opacity .7s ease,transform .7s ease}

.label{display:block;font-size:.85rem;color:rgba(148,163,184,.95);margin-bottom:.35rem}
.input{width:100%;border-radius:.9rem;border:1px solid rgba(24,242,230,.18);background:rgba(7,11,20,.62);padding:.7rem .85rem;color:rgba(241,245,249,.95);box-shadow:0 0 0 1px rgba(0,0,0,.2);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.input:focus{border-color:rgba(24,242,230,.5);box-shadow:0 0 0 2px rgba(24,242,230,.25);background:rgba(7,11,20,.78)}
.input::placeholder{color:rgba(148,163,184,.8)}

.cardcheck{display:flex;align-items:flex-start;gap:.75rem;border-radius:1rem;border:1px solid rgba(24,242,230,.14);background:rgba(7,11,20,.45);padding:.85rem;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.cardcheck:hover{transform:translateY(-1px);border-color:rgba(24,242,230,.26);background:rgba(7,11,20,.62)}
.cardcheck input{position:absolute;opacity:0;pointer-events:none}
.cardcheckBox{height:1.25rem;width:1.25rem;border-radius:.5rem;border:1px solid rgba(24,242,230,.28);background:rgba(7,11,20,.7);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);transition:background .2s ease,border-color .2s ease,box-shadow .2s ease}
.cardcheck .peer:checked + .cardcheckBox{background:rgba(24,242,230,.22);border-color:rgba(24,242,230,.65);box-shadow:0 0 0 2px rgba(24,242,230,.18)}
.cardcheck:focus-within{box-shadow:0 0 0 2px rgba(24,242,230,.25)}

.tabBtn{border-radius:.9rem;border:1px solid rgba(24,242,230,.14);background:rgba(7,11,20,.55);padding:.55rem .9rem;font-weight:700;color:rgba(241,245,249,.92);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.tabBtn:hover{transform:translateY(-1px);background:rgba(7,11,20,.78);border-color:rgba(24,242,230,.3)}
.tabBtn[aria-selected="true"]{background:rgba(24,242,230,.14);border-color:rgba(24,242,230,.45);color:rgba(248,250,252,.98)}
.tabBtn:focus-visible{box-shadow:0 0 0 2px rgba(24,242,230,.55)}

.accItem{border-radius:1rem;border:1px solid rgba(24,242,230,.15);background:rgba(7,11,20,.45);box-shadow:0 10px 26px rgba(0,0,0,.45);overflow:hidden}
.accBtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;font-weight:800;color:rgba(248,250,252,.95);background:transparent;transition:background .2s ease}
.accBtn:hover{background:rgba(7,11,20,.65)}
.accBtn:focus-visible{box-shadow:0 0 0 2px rgba(24,242,230,.55);border-radius:1rem}
.accIcon{height:1.25rem;width:1.25rem;color:#18F2E6;transition:transform .2s ease}
.accItem[data-open="true"] .accIcon{transform:rotate(180deg)}
.accPanel{padding:0 1.1rem 1.1rem}
.accText{font-size:.95rem;line-height:1.5rem;color:rgba(203,213,225,.92)}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal.is-in,.card,.card2,.navlink,.tabBtn,.tipBtn,.mobilelink{transition:none;transform:none}
}