:root{
--nav-h: 56px;
--nav-bg: rgba(11, 11, 22, 0.72);
--nav-bg-fallback: #0b0b16;
--nav-border: rgba(255, 255, 255, 0.06);
--nav-text: #c8cfe6;
--nav-text-strong: #f1f3fb;
--nav-text-dim: #6a7388;
--nav-hover-bg: rgba(255, 255, 255, 0.04);
--nav-active-bg: rgba(124, 58, 237, 0.14);
--nav-active-fg: #d6c0ff;
--nav-grad: linear-gradient(135deg, #e94560 0%, #7c3aed 50%, #22d3ee 100%);
}
header.sia-banner{
position:sticky;top:0;z-index:100;
}
nav.sia-nav{
height:var(--nav-h);
display:flex;align-items:center;gap:6px;padding:0 20px;
background:var(--nav-bg);background-color:var(--nav-bg-fallback);
-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
border-bottom:1px solid var(--nav-border);
font-family:'Inter','Space Grotesk',system-ui,-apple-system,sans-serif;
font-feature-settings:"cv11","ss01","cv02";
}
nav.sia-nav::before{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg,transparent 0%,rgba(124,58,237,.35) 35%,rgba(34,211,238,.35) 65%,transparent 100%);
opacity:.55;pointer-events:none;
}
.sia-brand{
display:flex;align-items:center;gap:9px;text-decoration:none;
padding:0 9px 0 6px;margin-right:6px;height:42px;border-radius:8px;
}
.sia-brand:hover{background:var(--nav-hover-bg);}
.sia-brand-mark{
position:relative;
display:flex;align-items:center;justify-content:center;
width:26px;height:26px;flex:0 0 auto;color:#fff;
background:linear-gradient(135deg,#e94560 0%,#7c3aed 35%,#22d3ee 70%,#7c3aed 100%);
background-size:240% 240%;background-position:0% 0%;
border-radius:7px;overflow:visible;
box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 4px 14px rgba(124,58,237,.28);
transition:transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease;
animation:siaBrandSheen 14s linear infinite;
}
@keyframes siaBrandSheen{
0%  {background-position:0%   0%;}
50% {background-position:100% 100%;}
100%{background-position:0%   0%;}
}
.sia-brand-mark::before{
content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 65%);
opacity:0;transform:scale(.45);
transition:opacity .18s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.sia-brand:hover .sia-brand-mark::before{opacity:1;transform:scale(1.08);transition-duration:.18s,.5s;}
.sia-brand-mark::after{
content:"";position:absolute;top:3px;right:3px;
width:4px;height:4px;border-radius:50%;
background:#4ade80;
box-shadow:0 0 0 0 rgba(74,222,128,.7), 0 0 4px rgba(74,222,128,.6);
animation:siaBrandLed 2.2s ease-in-out infinite;
}
@keyframes siaBrandLed{
0%,100%{box-shadow:0 0 0 0   rgba(74,222,128,.55), 0 0 4px rgba(74,222,128,.6);opacity:1;}
50%   {box-shadow:0 0 0 4px rgba(74,222,128,0),    0 0 4px rgba(74,222,128,.4);opacity:.85;}
}
.sia-brand-mark svg{
position:relative;z-index:1;
width:14px;height:14px;
filter:drop-shadow(0 1px 0 rgba(0,0,0,.18));
stroke-dasharray:24;stroke-dashoffset:0;
animation:siaCheckIn .55s cubic-bezier(.6,0,.3,1) .2s both;
}
@keyframes siaCheckIn{
from{stroke-dashoffset:24;opacity:0;}
to  {stroke-dashoffset:0; opacity:1;}
}
.sia-brand:hover .sia-brand-mark{
transform:scale(1.06);
box-shadow:0 1px 0 rgba(255,255,255,.24) inset, 0 8px 22px rgba(124,58,237,.46);
}
.sia-brand:hover .sia-brand-mark svg{
animation:siaCheckIn .35s cubic-bezier(.6,0,.3,1);
}
@media (prefers-reduced-motion: reduce){
.sia-brand-mark{animation:none;background-position:50% 50%;}
.sia-brand-mark::before,.sia-brand-mark::after{animation:none;}
.sia-brand-mark svg{animation:none;stroke-dashoffset:0;}
}
.sia-brand-text{
display:flex;flex-direction:column;justify-content:center;
line-height:1;gap:2px;
}
.sia-brand .wm{
font-family:'JetBrains Mono','SF Mono',monospace;
font-weight:700;font-size:13.5px;letter-spacing:-0.02em;line-height:1.05;
background:var(--nav-grad);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.sia-brand .by{
font-family:'Inter','Space Grotesk',system-ui,sans-serif;
font-weight:400;font-size:9.5px;line-height:1.1;
color:var(--nav-text-dim);letter-spacing:.06em;
text-transform:lowercase;
}
.sia-brand .by b{
font-weight:600;color:var(--nav-text);letter-spacing:0;text-transform:none;
}
.sia-brand:hover .by{color:var(--nav-text);}
@media(max-width:540px){
.sia-brand .by{display:none;}
.sia-brand{height:38px;}
}
.sia-link{
position:relative;display:inline-flex;align-items:center;gap:7px;
height:32px;padding:0 11px;border-radius:8px;
color:var(--nav-text);text-decoration:none;
font-size:13px;font-weight:500;letter-spacing:-0.005em;
transition:background .14s ease, color .14s ease, transform .14s ease;
white-space:nowrap;
}
.sia-link:hover{background:var(--nav-hover-bg);color:var(--nav-text-strong);}
.sia-link:active{transform:scale(.97);}
.sia-link.is-active{background:var(--nav-active-bg);color:#f1f3fb;
box-shadow:inset 0 0 0 1px rgba(124,58,237,.22),
inset 0 -2px 0 0 rgba(124,58,237,.55);
font-weight:600;}
.sia-link svg{width:15px;height:15px;flex:0 0 auto;stroke-width:1.6;}
.sia-link .kbd{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:var(--nav-text-dim);
margin-left:2px;padding:1px 5px;border:1px solid var(--nav-border);border-radius:4px;line-height:1;}
.sia-link.is-active .kbd{border-color:rgba(124,58,237,.35);color:#a78bfa;}
.sia-right{display:flex;align-items:center;gap:6px;margin-left:auto;}
.sia-iconbtn{
display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
border-radius:8px;border:none;background:transparent;color:var(--nav-text);cursor:pointer;
transition:background .14s ease, color .14s ease;
}
.sia-iconbtn:hover{background:var(--nav-hover-bg);color:var(--nav-text-strong);}
.sia-iconbtn svg{width:15px;height:15px;stroke-width:1.6;}
.sia-logout-form{display:contents;}
.sia-signin{
display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;
border-radius:8px;text-decoration:none;font-size:12.5px;font-weight:600;
color:#fff;letter-spacing:-0.005em;
background:linear-gradient(135deg,#e94560 0%,#7c3aed 50%,#22d3ee 100%);
background-size:160% 160%;background-position:0% 0%;
box-shadow:0 4px 14px rgba(124,58,237,.28);
transition:transform .14s ease, box-shadow .14s ease, background-position .4s ease;
}
.sia-signin:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(124,58,237,.42);background-position:100% 100%;}
.sia-signin:active{transform:translateY(0) scale(.98);}
.sia-signin svg{width:14px;height:14px;stroke-width:1.8;}
@media(max-width:540px){.sia-signin span{display:none;}.sia-signin{padding:0 9px;}}
.sia-pricing{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;color:var(--nav-text);border-radius:8px;
font-weight:500;font-size:.86em;text-decoration:none;margin-right:4px;white-space:nowrap;
transition:background .14s ease,color .14s ease;}
.sia-pricing:hover{background:var(--nav-hover-bg);color:var(--nav-text-strong);}
.sia-signup{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:#7c3aed;color:#fff;border-radius:8px;
font-weight:600;font-size:.86em;text-decoration:none;margin-right:8px;white-space:nowrap;
box-shadow:0 1px 4px rgba(124,58,237,.32);}
.sia-su-short{display:none;}
@media(max-width:540px){.sia-su-long{display:none;}.sia-su-short{display:inline;}}
@media(max-width:540px){
nav.sia-nav{padding:0 12px;gap:4px;}
.sia-right{gap:2px;}
.sia-kbd-help{display:none;}
.sia-pricing{padding:7px 8px;margin-right:0;}
.sia-pricing-ic{display:none;}
.sia-signup{padding:7px 11px;margin-right:4px;}
}
@media(max-width:360px){
nav.sia-nav{padding:0 8px;}
.sia-right{gap:0;}
.sia-pricing{padding:7px 6px;}
.sia-signup{padding:7px 9px;margin-right:2px;}
}
@media(max-width:1100px){
.sia-link span:not(.kbd){display:none;}
}
@media(max-width:840px){
.sia-link{height:36px;padding:0 12px;}
.sia-link span:not(.kbd){display:inline;}
.sia-right{margin-left:auto;}
}
.sia-tip{
position:fixed;top:0;left:0;z-index:600;pointer-events:none;
opacity:0;transform:translate(0,-2px) scale(.98);transform-origin:top left;
transition:opacity .14s ease, transform .2s cubic-bezier(.22,1,.36,1);
background:rgba(16,18,32,.94);
-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
border:1px solid rgba(255,255,255,.08);border-radius:10px;
padding:10px 13px 11px;min-width:200px;max-width:320px;
font-family:'Inter','Space Grotesk',system-ui,sans-serif;
font-feature-settings:"cv11","ss01","cv02";
box-shadow:0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(124,58,237,.06);
will-change:opacity,transform;
}
.sia-tip.show{opacity:1;transform:translate(0,0) scale(1);pointer-events:none;}
.sia-tip::before{
content:"";position:absolute;left:10px;right:10px;top:0;height:1px;
background:linear-gradient(90deg,transparent 0%,rgba(124,58,237,.7) 30%,rgba(34,211,238,.7) 70%,transparent 100%);
opacity:.6;
}
.sia-tip::after{
content:"";position:absolute;top:-5px;left:var(--tip-arrow-x,18px);
width:9px;height:9px;
background:rgba(16,18,32,.94);
border-left:1px solid rgba(255,255,255,.08);
border-top:1px solid rgba(255,255,255,.08);
transform:rotate(45deg);
-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
}
.sia-tip .tip-head{
display:flex;align-items:center;gap:8px;margin-bottom:4px;
}
.sia-tip .tip-pulse{
width:6px;height:6px;border-radius:50%;flex:0 0 auto;
background:linear-gradient(135deg,#7c3aed,#22d3ee);
position:relative;
}
.sia-tip .tip-pulse::after{
content:"";position:absolute;inset:-2px;border-radius:50%;
background:rgba(124,58,237,.5);
animation:tipPulseRing 1.6s ease-in-out infinite;
}
@keyframes tipPulseRing{
0%  {transform:scale(.6);opacity:.7;}
100%{transform:scale(2.6);opacity:0;}
}
.sia-tip .tip-title{
font-weight:600;font-size:13px;letter-spacing:-0.005em;color:#f1f3fb;line-height:1.25;
}
.sia-tip .tip-desc{
color:#aab1c6;font-size:11.5px;line-height:1.55;letter-spacing:.01em;
}
.sia-tip .tip-meta{
display:inline-flex;align-items:center;gap:4px;margin-top:6px;
font-family:'JetBrains Mono','SF Mono',monospace;font-size:10px;font-weight:600;
color:#7c3aed;letter-spacing:.06em;text-transform:uppercase;
padding:2px 6px;border:1px solid rgba(124,58,237,.3);border-radius:4px;
background:rgba(124,58,237,.08);
}
.sia-tip.show .tip-desc{
animation:tipDescIn .35s cubic-bezier(.5,0,.2,1) both;
}
@keyframes tipDescIn{
from{clip-path:inset(0 100% 0 0);}
to  {clip-path:inset(0 0     0 0);}
}
body.light .sia-tip{
background:rgba(255,255,255,.96);
border-color:rgba(0,0,0,.08);
box-shadow:0 12px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(124,58,237,.05);
}
body.light .sia-tip::after{background:rgba(255,255,255,.96);border-color:rgba(0,0,0,.08);}
body.light .sia-tip .tip-title{color:#0e1018;}
body.light .sia-tip .tip-desc{color:#5a637a;}
body.light .sia-tip .tip-meta{color:#7c3aed;background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.22);}
body.light{
--nav-bg: rgba(255,255,255,0.78);
--nav-bg-fallback: #f8f8fc;
--nav-border: rgba(0,0,0,0.07);
--nav-text: #46506a;
--nav-text-strong: #0a0a14;
--nav-text-dim: #8b95a8;
--nav-hover-bg: rgba(0,0,0,0.04);
--nav-active-bg: rgba(124,58,237,.10);
--nav-active-fg: #6d28d9;
}
body.light nav.sia-nav::before{opacity:.4;}
.sia-shortcuts-card{
width:min(620px, 100%);
max-height:88vh;
background:#10101e;
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(124,58,237,.12);
overflow:hidden;
font-family:'Inter','Space Grotesk',system-ui,sans-serif;
display:flex;
flex-direction:column;
}
.sia-shortcuts-head{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 18px;
border-bottom:1px solid rgba(255,255,255,.08);
background:rgba(124,58,237,.08);
}
.sia-shortcuts-title{
font-size:.85em;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:#a78bfa;
font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
}
.sia-shortcuts-close{
background:transparent;
border:0;
color:#94a3b8;
font-size:1.4em;
line-height:1;
cursor:pointer;
width:28px;
height:28px;
border-radius:6px;
transition:background .12s, color .12s;
}
.sia-shortcuts-close:hover{
background:rgba(255,255,255,.08);
color:#e2e8f0;
}
.sia-shortcuts-body{
padding:14px 18px 18px;
overflow-y:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:18px 28px;
}
.sia-shortcuts-section{display:flex;flex-direction:column;gap:6px;}
.sia-shortcuts-section-h{
font-size:.72em;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:rgba(255,255,255,.5);
margin-bottom:4px;
font-family:'JetBrains Mono',monospace;
}
.sia-shortcuts-row{
display:flex;
align-items:center;
gap:8px;
font-size:.86em;
color:#cbd5e1;
flex-wrap:wrap;
}
.sia-shortcuts-row kbd{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:22px;
height:22px;
padding:0 6px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.16);
border-bottom-width:2px;
border-radius:4px;
font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
font-size:.78em;
font-weight:600;
color:#e2e8f0;
line-height:1;
}
.sia-shortcuts-row-sep{font-size:.78em;color:rgba(255,255,255,.4);}
.sia-shortcuts-row-d{
flex:1 1 100%;
margin-left:4px;
color:rgba(255,255,255,.6);
font-size:.92em;
}
.sia-shortcuts-foot{
padding:10px 18px 14px;
border-top:1px solid rgba(255,255,255,.06);
font-size:.75em;
color:rgba(255,255,255,.45);
text-align:center;
font-family:'Inter',system-ui,sans-serif;
}
.sia-shortcuts-foot kbd{
display:inline-block;
padding:0 4px;
background:rgba(255,255,255,.08);
border-radius:3px;
font-family:'JetBrains Mono',monospace;
font-size:.92em;
color:#e2e8f0;
}
body.light .sia-shortcuts-card,
body.light.light .sia-shortcuts-card{
background:#fdfcf8;
border-color:#d8d2c4;
box-shadow:0 24px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(124,58,237,.10);
}
body.light .sia-shortcuts-head,
body.light.light .sia-shortcuts-head{
background:#fbf9f3;
border-bottom-color:#e5dfd0;
}
body.light .sia-shortcuts-title,
body.light.light .sia-shortcuts-title{color:#5b21b6;}
body.light .sia-shortcuts-close,
body.light.light .sia-shortcuts-close{color:#7a7666;}
body.light .sia-shortcuts-close:hover,
body.light.light .sia-shortcuts-close:hover{
background:#f0e7d2;
color:#0f0f14;
}
body.light .sia-shortcuts-section-h,
body.light.light .sia-shortcuts-section-h{color:#7a7666;}
body.light .sia-shortcuts-row,
body.light.light .sia-shortcuts-row{color:#1a1a26;}
body.light .sia-shortcuts-row kbd,
body.light.light .sia-shortcuts-row kbd{
background:#fff;
border-color:#d8d2c4;
color:#0f0f14;
}
body.light .sia-shortcuts-row-d,
body.light.light .sia-shortcuts-row-d{color:#5e5b54;}
body.light .sia-shortcuts-foot,
body.light.light .sia-shortcuts-foot{
color:#7a7666;
border-top-color:#e5dfd0;
}
body.light .sia-shortcuts-foot kbd,
body.light.light .sia-shortcuts-foot kbd{
background:#fff;
color:#0f0f14;
}
@media (max-width: 600px){
.sia-shortcuts-body{grid-template-columns:1fr;}
}
.sia-cp-bk{position:fixed;inset:0;background:rgba(8,8,18,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:14vh 20px 0;}
.sia-cp-bk.open{display:flex;animation:siaCpFade .12s ease;}
.sia-cp-input{flex:1;background:transparent;border:none;outline:none;color:var(--nav-text-strong);
font-size:15px;font-weight:500;font-family:inherit;}
.sia-cp-input::placeholder{color:var(--nav-text-dim);}
.sia-cp-hint{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:var(--nav-text-dim);
padding:2px 6px;border:1px solid rgba(255,255,255,.08);border-radius:4px;}
body.light .sia-cp-hint{border-color:rgba(0,0,0,.1);}
.sia-cp-list{max-height:55vh;overflow-y:auto;padding:6px;}
.sia-cp-group-label{font-size:10.5px;font-weight:700;color:var(--nav-text-dim);
text-transform:uppercase;letter-spacing:1.5px;padding:10px 12px 4px;}
.sia-cp-item{
display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;cursor:pointer;
color:var(--nav-text);text-decoration:none;font-size:13.5px;font-weight:500;transition:background .1s;
}
.sia-cp-item:hover,.sia-cp-item.active{background:rgba(124,58,237,.14);color:var(--nav-text-strong);}
.sia-cp-item svg{width:16px;height:16px;flex:0 0 auto;stroke-width:1.6;color:var(--nav-text-dim);}
.sia-cp-item.active svg,.sia-cp-item:hover svg{color:#a78bfa;}
.sia-cp-item .label{flex:1;}
.sia-cp-item .desc{font-size:11.5px;color:var(--nav-text-dim);font-weight:400;margin-left:4px;}
.sia-cp-item .arrow{font-size:12px;color:var(--nav-text-dim);opacity:0;}
.sia-cp-item:hover .arrow,.sia-cp-item.active .arrow{opacity:1;}
.sia-cp-empty{padding:24px;text-align:center;color:var(--nav-text-dim);font-size:13px;}
@keyframes siaCpFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}