.tz-search {
--tzs-card:var(--card,#0b1620);
--tzs-hover:#0f1d28;
--tzs-border:var(--border,#1c2b3a);
--tzs-text:var(--text,#b8c7d6);
--tzs-hi:var(--text-hi,#e8f1f8);
--tzs-muted:var(--muted,#6f8296);
--tzs-green:var(--green,#0f8);
--tzs-cyan:var(--cyan,#00d4ff);
--tzs-trans:var(--trans,.25s ease);
margin:0 0 2rem
}

.tz-sr {
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
border:0
}

.tz-search .tz-search-form {
margin:0 0 1.25rem
}

.tz-search .tz-search-bar {
display:flex;
align-items:center;
gap:.5rem;
box-sizing:border-box;
padding:.5rem;
background:var(--tzs-card);
border:1px solid var(--tzs-border);
border-radius:12px;
transition:border-color var(--tzs-trans),box-shadow var(--tzs-trans)
}

.tz-search .tz-search-bar:focus-within {
border-color:var(--tzs-green);
box-shadow:0 0 0 3px #00ff881f 0 0 24px #00ff8814
}

.tz-search .tz-search-prompt {
flex:0 0 auto;
padding:0 0 0 .6rem;
font-family:'Courier New',Courier,monospace;
font-size:1.1rem;
font-weight:700;
line-height:1;
color:var(--tzs-green);
user-select:none
}

.tz-search .tz-search-bar input[type="search"] {
flex:1 1 0;
width:auto;
min-width:0;
height:auto;
margin:0;
padding:.7rem .6rem;
box-sizing:border-box;
font:inherit;
font-size:1rem;
letter-spacing:normal;
text-transform:none;
color:var(--tzs-hi);
-webkit-text-fill-color:var(--tzs-hi);
caret-color:var(--tzs-green);
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
outline:0;
-webkit-appearance:none;
appearance:none
}

.tz-search .tz-search-bar input[type="search"]::placeholder {
color:var(--tzs-muted);
-webkit-text-fill-color:var(--tzs-muted);
opacity:1
}

.tz-search .tz-search-bar input[type="search"]::-webkit-search-cancel-button,.tz-search .tz-search-bar input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none;
appearance:none
}

.tz-search .tz-search-btn {
flex:0 0 auto;
width:auto;
min-width:0;
margin:0;
padding:.65rem 1.3rem;
box-sizing:border-box;
font:inherit;
font-size:.8rem;
font-weight:600;
letter-spacing:.08em;
line-height:1.2;
color:var(--tzs-green);
background:transparent;
border:1px solid var(--tzs-green);
border-radius:8px;
cursor:pointer;
transition:background var(--tzs-trans),color var(--tzs-trans)
}

.tz-search .tz-search-btn:hover,.tz-search .tz-search-btn:focus-visible {
color:#04120b;
background:var(--tzs-green)
}

.tz-search .tz-search-btn:focus-visible {
outline:2px solid var(--tzs-cyan);
outline-offset:2px
}

.tz-search .tz-search-hint {
margin:.5rem .25rem 0;
font-size:.72rem;
color:var(--tzs-muted)
}

.tz-search-status {
margin:0 0 .75rem;
font-size:.8rem;
color:var(--tzs-text)
}

.tz-search-status strong {
color:var(--tzs-hi);
word-break:break-word
}

.tz-search-clear {
margin-left:.5rem;
font-size:.72rem;
color:var(--tzs-muted);
text-decoration:underline;
text-underline-offset:3px;
transition:color var(--tzs-trans)
}

.tz-search-clear:hover,.tz-search-clear:focus-visible {
color:var(--tzs-green)
}

.tz-search-note {
margin:0 0 .75rem;
padding:.6rem .9rem;
font-size:.75rem;
color:var(--tzs-muted);
background:var(--tzs-card);
border:1px solid var(--tzs-border);
border-left:3px solid var(--tzs-cyan);
border-radius:0 8px 8px 0
}

.tz-search-empty {
padding:1.25rem 1.5rem;
font-size:.85rem;
color:var(--tzs-text);
background:var(--tzs-card);
border:1px solid var(--tzs-border);
border-radius:12px
}

.tz-search-empty p {
margin:0
}

.tz-search-empty em {
font-style:normal;
color:var(--tzs-hi)
}

.tz-search-list {
display:flex;
flex-direction:column;
gap:1px;
background:var(--tzs-border);
border:1px solid var(--tzs-border);
border-radius:12px;
overflow:hidden
}

.tz-search-result {
position:relative;
display:block;
box-sizing:border-box;
padding:1.25rem 3rem 1.1rem 1.5rem;
color:var(--tzs-text);
text-decoration:none;
background:var(--tzs-card);
border-left:3px solid transparent;
transition:background var(--tzs-trans),border-color var(--tzs-trans)
}

.tz-search-result::after {
content:'→';
position:absolute;
right:1.5rem;
top:50%;
font-size:.8rem;
color:var(--tzs-muted);
opacity:0;
transform:translate(-6px,-50%);
transition:opacity var(--tzs-trans),transform var(--tzs-trans),color var(--tzs-trans)
}

.tz-search-result:hover,.tz-search-result:focus-visible {
background:var(--tzs-hover);
border-left-color:var(--tzs-green)
}

.tz-search-result:hover::after,.tz-search-result:focus-visible::after {
opacity:1;
color:var(--tzs-green);
transform:translate(0,-50%)
}

.tz-search-result:focus-visible {
outline:2px solid var(--tzs-cyan);
outline-offset:-2px
}

.tz-search-title {
margin:0 0 .4rem;
font-size:.95rem;
font-weight:600;
line-height:1.35;
color:var(--tzs-hi);
transition:color var(--tzs-trans)
}

.tz-search-result:hover .tz-search-title,.tz-search-result:focus-visible .tz-search-title {
color:var(--tzs-green)
}

.tz-search-desc {
margin:0 0 .25rem;
font-size:.8rem;
line-height:1.55;
color:var(--tzs-text)
}

.tz-search-snippet {
margin:.6rem 0 0;
padding-left:.8rem;
font-size:.75rem;
line-height:1.6;
color:var(--tzs-muted);
border-left:1px solid var(--tzs-border);
overflow-wrap:anywhere
}

.tz-search mark {
padding:0 .18em;
color:var(--tzs-hi);
background:#00ff8829;
border-radius:3px;
box-shadow:inset 0 -1px 0 #00ff888c
}

.tz-search-meta {
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:.4rem 1rem;
margin:.7rem 0 0;
font-size:.7rem;
letter-spacing:.05em;
color:var(--tzs-muted)
}

.tz-search-rel {
display:inline-flex;
align-items:center;
gap:.5rem
}

.tz-search-pips {
display:inline-flex;
gap:3px
}

.tz-search-pips i {
display:block;
width:14px;
height:4px;
background:var(--tzs-border);
border-radius:2px;
transition:background var(--tzs-trans)
}

.tz-rel-1 .tz-search-pips i:nth-child(-n+1),.tz-rel-2 .tz-search-pips i:nth-child(-n+2),.tz-rel-3 .tz-search-pips i:nth-child(-n+3),.tz-rel-4 .tz-search-pips i:nth-child(-n+4),.tz-rel-5 .tz-search-pips i:nth-child(-n+5) {
background:var(--tzs-green)
}

.tz-rel-1 .tz-search-pips i:nth-child(-n+1),.tz-rel-2 .tz-search-pips i:nth-child(-n+2) {
opacity:.55
}

@media (max-width: 600px) {
.tz-search .tz-search-bar {
padding:.4rem;
gap:.35rem
}

.tz-search .tz-search-prompt {
padding-left:.45rem
}

.tz-search .tz-search-btn {
padding:.6rem 1rem
}

.tz-search-result {
padding:1rem 2.25rem 1rem 1.1rem
}

.tz-search-result::after {
right:1rem
}
}

@media (prefers-reduced-motion: reduce) {
.tz-search .tz-search-bar,.tz-search .tz-search-btn,.tz-search-result,.tz-search-result::after,.tz-search-title,.tz-search-pips i {
transition:none
}
}
