:root{
  --veil:rgba(255,255,255,.018);
  --mat-ctrl:rgba(255,255,255,.045);
  --veil-top:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.010) 44%,
    rgba(255,255,255,0) 60%,rgba(255,255,255,.020));
  --veil-ctrl:linear-gradient(180deg,rgba(255,255,255,.095),rgba(255,255,255,.020) 38%,
    rgba(255,255,255,0) 54%,rgba(255,255,255,.026));
  --g8:rgba(255,255,255,.048); --g12:rgba(255,255,255,.070);
  --bd:rgba(255,255,255,.10); --bd2:rgba(255,255,255,.18);
  --gold:#E4B863; --gold2:#F7E3B4;
  --goldbd:rgba(228,184,99,.34); --goldbd2:rgba(228,184,99,.54);
  --fg:#FFFFFF; --dim:rgba(255,255,255,.78); --dim2:rgba(255,255,255,.54); --dim3:rgba(255,255,255,.36);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.46,.64,1);
  --blur:blur(28px) saturate(1.48) brightness(.98) contrast(1.05);
  --blur-ctrl:blur(16px) saturate(1.45) brightness(.98) contrast(1.04);
  --rim-panel:
    inset 0 1px 0 rgba(255,241,224,.17),
    inset 1px 0 0 rgba(255,255,255,.055),
    inset -1px 0 0 rgba(255,255,255,.050),
    inset 0 -1px 0 rgba(188,214,255,.085),
    inset 0 0 16px -9px rgba(255,255,255,.20),
    0 1px 2px rgba(0,0,0,.24),
    0 12px 34px rgba(0,0,0,.26);
  --rim-ctrl:
    inset 0 1px 0 rgba(255,244,230,.22),
    inset 0 -1px 0 rgba(188,214,255,.07),
    inset 0 0 11px -6px rgba(255,255,255,.18),
    0 1px 2px rgba(0,0,0,.22),
    0 8px 20px rgba(0,0,0,.22);
  --sideW:232px; --sideW-collapsed:72px; --rq:14px; --r2:18px; --r3:20px;
  --sideNow:calc(var(--sideW) + 24px);
  --padR:24px;
  --bg-fit:cover;
  --ann-title:#FFFFFF;
  --ann-text:rgba(255,255,255,.78);
  --hero-title:#FFFFFF;
  --hero-sub:rgba(255,255,255,.54);
  color-scheme:dark;
}

html[data-theme="light"]{
  --veil:rgba(255,255,255,.52);
  --mat-ctrl:rgba(255,255,255,.62);
  --veil-top:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.34) 44%,
    rgba(255,255,255,.20) 60%,rgba(255,255,255,.42));
  --veil-ctrl:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.66) 38%,
    rgba(255,255,255,.54) 54%,rgba(255,255,255,.74));
  --g8:rgba(21,26,35,.048); --g12:rgba(21,26,35,.072);
  --bd:rgba(21,26,35,.10); --bd2:rgba(21,26,35,.18);
  --gold:#B07C22; --gold2:#7A5518;
  --goldbd:rgba(176,124,34,.36); --goldbd2:rgba(176,124,34,.58);
  --fg:#151A23; --dim:rgba(21,26,35,.80); --dim2:rgba(21,26,35,.60); --dim3:rgba(21,26,35,.44);
  --blur:blur(28px) saturate(1.7) brightness(1.06) contrast(1.02);
  --blur-ctrl:blur(16px) saturate(1.6) brightness(1.06) contrast(1.01);
  --rim-panel:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 1px 0 0 rgba(255,255,255,.60),
    inset -1px 0 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(255,255,255,.72),
    inset 0 0 16px -9px rgba(255,255,255,.75),
    0 1px 2px rgba(21,32,54,.06),
    0 12px 30px rgba(21,32,54,.10);
  --rim-ctrl:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.55),
    inset 0 0 11px -6px rgba(255,255,255,.70),
    0 1px 2px rgba(21,32,54,.06),
    0 1px 3px rgba(21,32,54,.08);
  --ann-title:#151A23;
  --ann-text:rgba(21,26,35,.80);
  --hero-title:#151A23;
  --hero-sub:rgba(21,26,35,.60);
  color-scheme:light;
}
html[data-theme="light"] body{background-color:#F0F4FB}
html[data-theme="light"] #bg{background:linear-gradient(180deg,#FFFFFF 0%,#F0F4FB 54%,#E7EDF7 100%)}
html[data-theme="light"] #bg .blob{mix-blend-mode:multiply;opacity:.30}
html[data-theme="light"] #bg-scrim{background:linear-gradient(180deg,
  rgba(238,243,250,var(--scrim,.55)) 0%,rgba(238,243,250,calc(var(--scrim,.55)*.7)) 45%,
  rgba(238,243,250,calc(var(--scrim,.55)*.9)) 100%)}

html[data-theme="light"] ::selection{background:rgba(176,124,34,.26)}

html[data-theme="light"] .glass::after{background:
  radial-gradient(150% 92% at var(--mx,50%) var(--my,0%),rgba(255,255,255,.50),rgba(255,255,255,0) 44%),
  radial-gradient(120% 58% at 42% -14%,rgba(255,255,255,.42),rgba(255,255,255,0) 62%),
  radial-gradient(126% 126% at 50% 50%,rgba(0,0,0,0) 74%,rgba(21,32,54,.05) 100%)}
html[data-theme="light"] .btn::after{background:
  radial-gradient(90px 90px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.72),rgba(255,255,255,0) 70%)}
html[data-theme="light"] .btn.pri::after{background:
  radial-gradient(90px 90px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.62),rgba(255,255,255,0) 70%)}

html[data-theme="light"] .logo{background:rgba(255,255,255,.55);border-color:rgba(21,26,35,.12);
  box-shadow:0 4px 14px rgba(21,32,54,.08),inset 0 1px 0 rgba(255,255,255,.90)}
html[data-theme="light"] .divider{background:rgba(21,26,35,.08)}
html[data-theme="light"] .nav-item.on{background:rgba(176,124,34,.14);border-color:var(--goldbd);color:var(--gold2)}

html[data-theme="light"] .btn:hover{background-color:var(--g12);border-color:var(--bd2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 11px -6px rgba(255,255,255,.80),
    0 2px 6px rgba(21,32,54,.08),0 14px 30px rgba(21,32,54,.12)}
html[data-theme="light"] .btn.pri{background-color:rgba(228,184,99,.18);background-image:linear-gradient(180deg,
    rgba(255,255,255,.78),rgba(255,255,255,.40) 52%,rgba(255,255,255,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 0 11px -6px rgba(255,255,255,.70),
    0 1px 2px rgba(21,32,54,.08),0 8px 20px rgba(176,124,34,.12)}
html[data-theme="light"] .btn.pri:hover{background-color:rgba(228,184,99,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 11px -6px rgba(255,255,255,.75),
    0 2px 6px rgba(21,32,54,.10),0 14px 30px rgba(176,124,34,.18)}
html[data-theme="light"] .tool-grid .btn.soon{background-color:rgba(21,26,35,.03);border-color:rgba(21,26,35,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.60)}
html[data-theme="light"] .tool-grid .btn.soon:hover{background-color:rgba(21,26,35,.03);border-color:rgba(21,26,35,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.60)}

html[data-theme="light"] .inp{background:rgba(255,255,255,.72);border-color:rgba(21,26,35,.12);
  box-shadow:inset 0 2px 6px rgba(21,32,54,.05)}
html[data-theme="light"] .inp:focus{border-color:var(--goldbd);
  box-shadow:inset 0 2px 6px rgba(21,32,54,.05),0 0 0 3px rgba(176,124,34,.14)}
html[data-theme="light"] .verify{background:rgba(255,255,255,.66);border-color:rgba(21,26,35,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80)}
html[data-theme="light"] .verify:hover{background:rgba(255,255,255,.82);border-color:var(--bd2)}
html[data-theme="light"] .verify:focus-visible{border-color:var(--goldbd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80),0 0 0 3px rgba(176,124,34,.14)}
html[data-theme="light"] .verify .vbox{border-color:rgba(21,26,35,.28)}
html[data-theme="light"] .verify[data-state="busy"]:hover{background:rgba(255,255,255,.66);border-color:rgba(21,26,35,.12)}
html[data-theme="light"] .verify[data-state="busy"] .vbox{border-color:rgba(21,26,35,.14);border-top-color:var(--gold)}
html[data-theme="light"] .verify[data-state="ok"]{background:rgba(59,108,180,.10);border-color:rgba(59,108,180,.42)}
html[data-theme="light"] .verify[data-state="ok"]:hover{background:rgba(59,108,180,.10);border-color:rgba(59,108,180,.42)}
html[data-theme="light"] .verify[data-state="ok"] .vbox{background:rgba(59,108,180,.92);border-color:rgba(59,108,180,.92);color:#FFFFFF}
html[data-theme="light"] .verify[data-state="ok"] .vtxt{color:#2C5FA8}
html[data-theme="light"] .verify[data-state="err"]{background:rgba(192,84,78,.09);border-color:rgba(192,84,78,.45)}
html[data-theme="light"] .verify[data-state="err"] .vbox{border-color:rgba(192,84,78,.70)}
html[data-theme="light"] .verify[data-state="err"] .vtxt{color:#B3463F}
html[data-theme="light"] .msg-tip.ok{color:#2C5FA8}
html[data-theme="light"] .msg-tip.err{color:#B3463F}

html[data-theme="light"] .ann .panel-head{background-image:linear-gradient(90deg,
  rgba(21,26,35,.14),rgba(21,26,35,.03) 72%,transparent)}
html[data-theme="light"] .ann-list li:hover{background:rgba(21,26,35,.035)}

html[data-theme="light"] .ann-list{scrollbar-color:rgba(21,26,35,.18) transparent}
html[data-theme="light"] .ann-list::-webkit-scrollbar-thumb{background:rgba(21,26,35,.16)}
html[data-theme="light"] .ann-list::-webkit-scrollbar-thumb:hover{background:rgba(21,26,35,.26)}
html[data-theme="light"] textarea.inp{scrollbar-color:rgba(21,26,35,.18) transparent}
html[data-theme="light"] textarea.inp::-webkit-scrollbar-thumb{background:rgba(21,26,35,.16)}
html[data-theme="light"] textarea.inp::-webkit-scrollbar-thumb:hover{background:rgba(21,26,35,.26)}
html[data-theme="light"] .modal-body{scrollbar-color:rgba(21,26,35,.18) transparent}
html[data-theme="light"] .modal-body::-webkit-scrollbar-thumb{background:rgba(21,26,35,.16)}
html[data-theme="light"] .modal-body::-webkit-scrollbar-thumb:hover{background:rgba(21,26,35,.26)}

html[data-theme="light"] .modal-mask{background:rgba(24,32,46,.34)}
html[data-theme="light"] .modal-card{box-shadow:var(--rim-panel),0 30px 76px rgba(21,32,54,.24)}
html[data-theme="light"] .modal-head,html[data-theme="light"] .modal-foot{border-color:rgba(21,26,35,.08)}
html[data-theme="light"] #about-disclaimer{background:rgba(21,26,35,.045);border-color:rgba(21,26,35,.08);
  box-shadow:inset 0 2px 6px rgba(21,32,54,.05)}
html[data-theme="light"] .about-repo{background:rgba(176,124,34,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80)}
html[data-theme="light"] .about-repo:hover{background:rgba(176,124,34,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 24px rgba(176,124,34,.16)}
html[data-theme="light"] .about-repo.no-link{background:rgba(21,26,35,.05)}

.theme-btn svg{width:16px;height:16px;flex:0 0 auto}
.theme-btn .i-sun{display:none}
html[data-theme="light"] .theme-btn .i-sun{display:block}
html[data-theme="light"] .theme-btn .i-moon{display:none}
body.side-collapsed .theme-btn{padding:0 18px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
html,body{margin:0;padding:0;color:var(--fg);
  font:14px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
::selection{background:rgba(228,184,99,.34)}
a{text-decoration:none;color:inherit}

#bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,#0A1120 0%,#060A14 54%,#03050A 100%)}
#bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--bg-fit,cover);
  transform:translateZ(0);filter:blur(var(--bg-blur,0px))}
#bg-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(3,5,10,var(--scrim,.55)) 0%,rgba(3,5,10,calc(var(--scrim,.55)*.7)) 45%,rgba(3,5,10,calc(var(--scrim,.55)*.9)) 100%)}
#bg .blob{position:absolute;border-radius:50%;filter:blur(52px);opacity:.42;
  will-change:transform;mix-blend-mode:screen}
#bg .b1{width:46vw;height:46vw;min-width:320px;min-height:320px;left:62%;top:-16%;
  background:radial-gradient(circle at 50% 50%,rgba(150,190,246,.92),rgba(150,190,246,0) 60%);
  animation:drift1 34s ease-in-out infinite alternate}
#bg .b2{width:44vw;height:44vw;min-width:320px;min-height:320px;left:6%;bottom:-20%;
  background:radial-gradient(circle at 50% 50%,rgba(240,190,104,.72),rgba(240,190,104,0) 58%);
  animation:drift2 41s ease-in-out infinite alternate}
#bg .b3{width:40vw;height:40vw;min-width:280px;min-height:280px;left:28%;top:38%;
  background:radial-gradient(circle at 50% 50%,rgba(168,132,246,.58),rgba(168,132,246,0) 60%);
  animation:drift3 47s ease-in-out infinite alternate}
@keyframes drift1{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-10%,8%,0) scale(1.22)}}
@keyframes drift2{0%{transform:translate3d(0,0,0) scale(1.08)}100%{transform:translate3d(12%,-9%,0) scale(1)}}
@keyframes drift3{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(8%,-12%,0) scale(1.28)}}

.glass{position:relative;background-color:var(--veil);background-image:var(--veil-top);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--bd);border-radius:var(--r3);
  box-shadow:var(--rim-panel);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease),border-color .55s var(--ease)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:
    radial-gradient(150% 92% at var(--mx,50%) var(--my,0%),rgba(255,255,255,.085),rgba(255,255,255,0) 44%),
    radial-gradient(120% 58% at 42% -14%,rgba(255,255,255,.075),rgba(255,255,255,0) 62%),
    radial-gradient(126% 126% at 50% 50%,rgba(0,0,0,0) 74%,rgba(0,0,0,.10) 100%)}
.glass>*{position:relative;z-index:2}

body{min-height:100dvh;display:flex;background-color:#060A14}

#side{position:fixed;left:0;top:0;bottom:0;width:var(--sideW);z-index:60;
  display:flex;flex-direction:column;gap:4px;padding:24px 14px 20px;
  border-radius:0;border-left:0;border-top:0;border-bottom:0;
  animation:sideIn .7s var(--ease) both;
  transition:width .48s var(--ease-soft),padding .48s var(--ease-soft)}
@keyframes sideIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.brand{display:flex;align-items:center;gap:11px;padding:2px 6px 14px;
  transition:gap .48s var(--ease-soft),padding .48s var(--ease-soft)}
.logo{width:46px;height:46px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);border-radius:14px;
  box-shadow:0 4px 14px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .55s var(--spring),width .48s var(--ease-soft),height .48s var(--ease-soft)}
.brand:hover .logo{transform:scale(1.05) rotate(-2deg)}
.logo img{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}
.logo[hidden]{display:none}
.brand-txt h1{margin:0;font-size:15px;font-weight:600;letter-spacing:.3px}
.brand-txt .sub{font-size:10px;color:var(--dim3);letter-spacing:.5px}
.brand-txt{white-space:nowrap;overflow:hidden;min-width:0;max-width:170px;
  transition:opacity .3s var(--ease),max-width .48s var(--ease-soft)}
.divider{height:1px;background:rgba(255,255,255,.08);margin:2px 2px}
#side nav{display:flex;flex-direction:column;gap:4px}
.nav-item{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px;
  border-radius:12px;color:var(--dim);font-size:13px;border:1px solid transparent;
  background:transparent;cursor:pointer;font:inherit;width:100%;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),
    color .3s var(--ease),transform .5s var(--spring),
    padding .48s var(--ease-soft),gap .48s var(--ease-soft)}
.nav-item svg{width:16px;height:16px;flex:0 0 auto;opacity:.8}
.nav-item span{white-space:nowrap;display:block;min-width:0;max-width:64px;overflow:hidden;
  transition:opacity .3s var(--ease),max-width .48s var(--ease-soft)}
.nav-item:hover{background:var(--g8);border-color:var(--bd);color:var(--fg);transform:translateX(2px)}
.nav-item.on{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--gold2)}
.nav-item.on svg{opacity:1}
.side-flex{flex:1 1 auto}

.collapse-btn{height:40px;font-size:12px;color:var(--dim3)}
.collapse-btn:hover{color:var(--fg);background:var(--g8);border-color:var(--bd)}
.collapse-btn .ico-chev{transition:transform .45s var(--spring)}

body.side-collapsed{--sideNow:calc(var(--sideW-collapsed) + 24px)}
body.side-collapsed #side{width:var(--sideW-collapsed);padding:20px 10px}
body.side-collapsed .brand{gap:0;padding:2px 4px 14px}
body.side-collapsed .brand-txt{opacity:0;max-width:0;pointer-events:none}
body.side-collapsed .logo{width:44px;height:44px}
body.side-collapsed .nav-item{padding:0 18px;gap:0}
body.side-collapsed .nav-item span{opacity:0;max-width:0;pointer-events:none}
body.side-collapsed .ico-chev{transform:rotate(180deg)}
body.side-collapsed #main{padding-left:var(--sideNow)}

#main{position:relative;z-index:10;flex:1 1 auto;margin-left:0;min-width:0;min-height:100dvh;height:100dvh;
  display:grid;grid-template-columns:1fr 448px;grid-template-rows:1fr auto auto;
  gap:24px;padding:24px var(--padR) 6px var(--sideNow);
  transition:padding-left .48s var(--ease-soft);
  align-items:start}

.hero{grid-column:1;grid-row:1;align-self:start;padding-right:40px;max-width:760px;
  animation:heroIn .9s var(--ease) both .1s}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-title{margin:0 0 10px;font-size:46px;font-weight:700;letter-spacing:3px;line-height:1.15;
  color:var(--hero-title,#FFFFFF);text-shadow:0 0 30px rgba(255,255,255,.12)}
.hero-sub{margin:0;font-size:14px;color:var(--hero-sub,var(--dim2));letter-spacing:.5px;max-width:620px;line-height:1.7}

.ann{grid-column:2;grid-row:1;align-self:start;animation:popIn .6s var(--spring) both .15s}

.toolbar{grid-column:1;grid-row:2;justify-self:start;align-self:start;width:360px;min-width:0;
  height:160px;overflow:hidden;display:flex;flex-direction:column;
  animation:popIn .6s var(--spring) both .25s}

.feedback{grid-column:2;grid-row:2;justify-self:stretch;align-self:start;min-width:0;
  height:160px;display:flex;flex-direction:column;overflow:hidden;
  animation:popIn .6s var(--spring) both .2s}

@keyframes popIn{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:none}}
.panel-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.panel-head h3{margin:0;font-size:15px;font-weight:600}
.panel-ico{width:18px;height:18px;color:var(--gold)}
.panel-sub{font-size:11px;color:var(--dim3)}
.tag-new{margin-left:auto;display:inline-flex;align-items:center;height:20px;padding:0 9px;
  border-radius:10px;font-size:10px;font-weight:600;letter-spacing:1px;color:var(--gold2);
  background:rgba(228,184,99,.14);border:1px solid rgba(228,184,99,.34)}

.ann{padding:16px}.toolbar{padding:12px 16px}.feedback{padding:12px 16px}

.ann{position:relative;flex:0 0 auto;height:auto;max-height:60%;display:flex;flex-direction:column;
  overflow:hidden}
.ann .panel-head{flex:0 0 auto;margin-bottom:0;padding-bottom:10px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 72%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%}
.ann-list{list-style:none;margin:0;padding:12px 0 6px;display:flex;flex-direction:column;gap:2px;
  flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.20) transparent;
  --fadeT:0px;
  --fadeB:0px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--fadeT),
    #000 calc(100% - var(--fadeB)),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 var(--fadeT),
    #000 calc(100% - var(--fadeB)),transparent 100%)}
.ann.has-top .ann-list{--fadeT:16px}
.ann.has-more .ann-list{--fadeB:16px}
.ann-list::-webkit-scrollbar{width:6px}
.ann-list::-webkit-scrollbar-track{background:transparent}
.ann-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.ann-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
.ann-list li{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:12px;
  font-size:12.5px;color:var(--ann-text);line-height:1.5;
  transition:background .4s var(--ease)}
.ann-txt{flex:1 1 auto;min-width:0;white-space:pre-line;overflow-wrap:anywhere;word-break:break-word}
.ann-list li:hover{background:rgba(255,255,255,.035)}
.ann-list li::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:3px;margin-top:7px;
  background:var(--ann-item,var(--gold))}
.ann-list li:nth-child(2)::before{background:var(--ann-item,rgba(156,193,238,.9))}
.ann-list li:nth-child(3)::before{background:var(--ann-item,rgba(168,132,246,.9))}
.ann-date{margin-left:auto;flex:0 0 auto;font-size:10.5px;color:var(--dim3)}
.ann .panel-head h3{color:var(--ann-title)}

.toolbar{flex:0 0 auto}
.toolbar .panel-head{margin-bottom:0}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:8px;
  flex:1 1 auto;min-height:0;margin-top:8px}
.tool-grid .btn{width:100%;height:100%;min-height:0;padding:0 6px;font-size:11.5px}

.tool-grid .btn.soon{background-color:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07);
  color:var(--dim3);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);cursor:default}
.tool-grid .btn.soon:hover,.tool-grid .btn.soon:active{transform:none;
  background-color:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.tool-grid .btn.soon::after{display:none}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background-color:var(--mat-ctrl);background-image:var(--veil-ctrl);
  color:var(--fg);border:1px solid var(--bd);
  -webkit-backdrop-filter:var(--blur-ctrl);backdrop-filter:var(--blur-ctrl);
  border-radius:var(--rq);padding:9px 14px;font:inherit;font-size:12.5px;cursor:pointer;
  box-shadow:var(--rim-ctrl);
  user-select:none;white-space:nowrap;min-height:38px;
  transition:transform .5s var(--spring),background-color .5s var(--ease),
    box-shadow .5s var(--ease),border-color .5s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(90px 90px at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),rgba(255,255,255,0) 70%);
  opacity:0;transition:opacity .5s var(--ease)}
@media (pointer:fine){ .btn:hover::after{opacity:1} }
.btn:hover{background-color:var(--g12);border-color:var(--bd2);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,244,230,.30),inset 0 0 11px -6px rgba(255,255,255,.22),
    0 2px 6px rgba(0,0,0,.26),0 16px 34px rgba(0,0,0,.34)}
.btn:active{transform:scale(.955);transition-duration:.12s}
.btn small{color:var(--dim2);font-size:11px}
.btn.pri{background-color:rgba(228,184,99,.13);background-image:linear-gradient(180deg,
    rgba(255,255,255,.10),rgba(255,255,255,.01) 52%,rgba(255,255,255,.03));
  border-color:var(--goldbd);color:var(--gold2);
  box-shadow:inset 0 1px 0 rgba(247,227,180,.32),inset 0 0 11px -6px rgba(247,227,180,.22),
    0 1px 2px rgba(0,0,0,.22),0 10px 24px rgba(228,184,99,.14)}
.btn.pri:hover{background-color:rgba(228,184,99,.20);border-color:var(--goldbd2);
  box-shadow:inset 0 1px 0 rgba(247,227,180,.40),inset 0 0 11px -6px rgba(247,227,180,.26),
    0 2px 6px rgba(0,0,0,.24),0 16px 36px rgba(228,184,99,.20)}
.btn.pri::after{background:radial-gradient(90px 90px at var(--mx,50%) var(--my,50%),
  rgba(247,227,180,.22),rgba(247,227,180,0) 70%)}

.feedback{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.feedback form{display:flex;flex-direction:column;gap:5px;flex:1 1 auto;min-height:0}
.feedback .panel-head{flex:0 0 auto;margin-bottom:5px}
.inp{width:100%;background:rgba(4,7,14,.5);border:1px solid rgba(255,255,255,.10);border-radius:12px;
  color:var(--fg);font:inherit;font-size:12.5px;padding:8px 12px;outline:none;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}
.inp::placeholder{color:var(--dim3)}
.inp:focus{border-color:var(--goldbd);box-shadow:inset 0 2px 6px rgba(0,0,0,.3),0 0 0 3px rgba(228,184,99,.10)}
textarea.inp{resize:none;flex:0 0 38px;line-height:1.5;min-height:38px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.20) transparent}
textarea.inp::-webkit-scrollbar{width:8px}
textarea.inp::-webkit-scrollbar-track{background:transparent}
textarea.inp::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:4px}
textarea.inp::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
.msg-row{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.msg-row .inp{flex:1 1 auto;min-height:26px}
.submit{flex:0 0 auto;width:100px;padding:0;font-size:11.5px;font-weight:600}
.feedback .submit:disabled{opacity:.45;cursor:default;transform:none}
.feedback .submit:disabled:hover{transform:none;box-shadow:none}
.msg-tip{margin:0;min-height:12px;font-size:10.5px;color:var(--dim3)}
.msg-tip.ok{color:#9CC1EE}
.msg-tip.err{color:#EC9B9B}

.vcard{width:min(360px,100%)}
.vcard-desc{margin:0 0 12px;font-size:12.5px;line-height:1.7;color:var(--dim2)}
.verify{width:100%;height:44px;display:flex;align-items:center;gap:9px;
  padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.10);
  background:rgba(4,7,14,.42);cursor:pointer;user-select:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .35s var(--ease),background-color .35s var(--ease),box-shadow .35s var(--ease)}
.verify:hover{border-color:var(--bd2);background:rgba(255,255,255,.045)}
.verify:focus-visible{outline:none;border-color:var(--goldbd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 3px rgba(228,184,99,.10)}
.verify .vbox{width:20px;height:20px;flex:0 0 auto;border-radius:6px;
  border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center;
  color:transparent;transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease)}
.verify .vbox svg{width:13px;height:13px}
.verify .vtxt{font-size:11.5px;letter-spacing:.3px;color:var(--dim2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.verify[data-state="busy"]{cursor:default}
.verify[data-state="busy"]:hover{border-color:rgba(255,255,255,.10);background:rgba(4,7,14,.42)}
.verify[data-state="busy"] .vbox{border-color:rgba(255,255,255,.14);
  border-top-color:var(--gold);animation:vspin .7s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}
.verify[data-state="ok"]{cursor:default;background:rgba(156,193,238,.10);border-color:rgba(156,193,238,.42)}
.verify[data-state="ok"]:hover{background:rgba(156,193,238,.10);border-color:rgba(156,193,238,.42)}
.verify[data-state="ok"] .vbox{background:rgba(156,193,238,.92);border-color:rgba(156,193,238,.92);color:#0b1220}
.verify[data-state="ok"] .vtxt{color:#9CC1EE}
.verify[data-state="err"]{background:rgba(236,155,155,.10);border-color:rgba(236,155,155,.45)}
.verify[data-state="err"] .vbox{border-color:rgba(236,155,155,.7)}
.verify[data-state="err"] .vbox svg{display:none}
.verify[data-state="err"] .vtxt{color:#EC9B9B}

.icp{grid-column:1 / 3;grid-row:3;justify-self:stretch;align-self:end;text-align:center;
  margin-left:calc(-1 * var(--sideNow));margin-right:calc(-1 * var(--padR));
  padding-top:4px;font-size:11px;letter-spacing:.5px;color:var(--dim3);white-space:nowrap;
  transition:opacity .45s var(--ease),margin-left .48s var(--ease-soft)}
.icp-row{display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.icp a{display:inline-flex;align-items:center;gap:3px;color:inherit;text-decoration:none;transition:color .2s var(--ease)}
.icp a[href]:hover{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.icp-sep{opacity:.65}
.police-ic{width:13px;height:14px;flex:0 0 auto;object-fit:contain}
.icp [hidden]{display:none!important}

#toast{position:fixed;top:24px;left:50%;z-index:99;
  padding:10px 18px;font-size:12.5px;border-radius:14px;
  transform:translateX(-50%) translateY(-9px) scale(.965);
  opacity:0;visibility:hidden;pointer-events:none;
  will-change:transform,opacity;
  transition:opacity .32s var(--ease),transform .52s var(--spring),
    visibility .32s linear}
#toast.on{opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0) scale(1)}
@media (prefers-reduced-motion:reduce){
  #toast{transform:translateX(-50%);transition:opacity .18s linear}
  #toast.on{transform:translateX(-50%)}
}

.modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:24px}
.modal[hidden]{display:none}
.modal-mask{position:absolute;inset:0;background:rgba(3,5,10,.60);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  animation:fadeIn .3s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.96)}
  to{opacity:1;transform:none}}
.modal-card{position:relative;width:min(560px,100%);max-height:min(74dvh,660px);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--rim-panel),0 30px 76px rgba(0,0,0,.56);
  animation:modalIn .46s var(--spring) both}
.modal-head{display:flex;align-items:center;gap:10px;padding:15px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.08)}
.modal-head h3{margin:0;font-size:15px;font-weight:600;letter-spacing:.8px;color:var(--fg)}
.modal-x{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:28px;height:28px;padding:0;border-radius:9px;cursor:pointer;
  color:var(--dim2);background:var(--g8);border:1px solid var(--bd);
  transition:color .28s var(--ease),background-color .28s var(--ease),
    border-color .28s var(--ease),transform .4s var(--spring)}
.modal-x svg{width:13px;height:13px}
.modal-x:hover{color:var(--fg);background:var(--g12);border-color:var(--bd2);
  transform:rotate(90deg)}
.modal-body{padding:16px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.20) transparent}
.modal-body::-webkit-scrollbar{width:6px}
.modal-body::-webkit-scrollbar-track{background:transparent}
.modal-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:3px}
.modal-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)}
.about-sec+.about-sec{margin-top:18px}
.about-sec h4{margin:0 0 9px;display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:1.6px;color:var(--gold)}
.about-sec h4::after{content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,rgba(228,184,99,.36),transparent)}
#about-disclaimer{margin:0;padding:12px 14px;border-radius:12px;
  font-size:12.5px;line-height:1.85;color:var(--dim);
  white-space:pre-wrap;overflow-wrap:anywhere;
  background:rgba(4,7,14,.42);border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.28)}
.about-repos{display:flex;flex-direction:column;gap:8px}
.about-repo{display:flex;align-items:center;gap:9px;min-height:42px;padding:9px 14px;
  border-radius:12px;text-decoration:none;font-size:12.5px;font-weight:500;
  color:var(--gold2);background:rgba(228,184,99,.10);border:1px solid var(--goldbd);
  box-shadow:inset 0 1px 0 rgba(247,227,180,.22);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),
    transform .4s var(--spring),box-shadow .35s var(--ease)}
.about-repo svg{width:15px;height:15px;flex:0 0 auto;opacity:.9}
.about-repo span{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.about-repo svg.go{width:13px;height:13px;margin-left:auto;opacity:.55;
  transition:opacity .3s var(--ease),transform .35s var(--spring)}
.about-repo:hover{background:rgba(228,184,99,.18);border-color:var(--goldbd2);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(247,227,180,.32),0 10px 24px rgba(228,184,99,.16)}
.about-repo:hover svg.go{opacity:1;transform:translate(1px,-1px)}
.about-repo.no-link{pointer-events:none;color:var(--dim);
  background:rgba(255,255,255,.05);border-color:var(--bd);box-shadow:none}
.modal-foot{display:flex;justify-content:flex-end;padding:12px 16px 14px;
  border-top:1px solid rgba(255,255,255,.08)}
.modal-foot .btn{min-height:32px;height:32px;padding:0 20px;font-size:12.5px}

.toolbar .panel-head,.feedback .panel-head{
  padding-bottom:8px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 72%,transparent);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%}
.toolbar .panel-head{margin-bottom:0}
.toolbar .panel-head h3,.feedback .panel-head h3{
  font-size:14.5px;font-weight:600;letter-spacing:.8px;color:var(--fg)}
.toolbar .panel-sub,.feedback .panel-sub{
  margin-left:auto;min-width:0;font-size:10.5px;letter-spacing:.3px;color:var(--dim3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-grid .btn{font-weight:500;letter-spacing:.4px}
.tool-grid .btn.pri{font-weight:600;letter-spacing:.6px}
.feedback .inp{font-size:13px;line-height:1.6;letter-spacing:.2px}
.feedback textarea.inp{padding:7px 12px}
.feedback .msg-row .inp{font-size:12.5px}
.feedback .submit{font-size:12px;letter-spacing:1.2px}
.feedback .msg-tip{margin-top:auto;font-size:10px;line-height:1.2;letter-spacing:.2px}

@media (max-width:1180px){
  #main{grid-template-columns:minmax(0,1fr) 380px}
  .toolbar{max-width:100%}
  .hero{padding-right:28px}
}
@media (max-width:980px){
  #side{width:var(--sideW-collapsed);padding:20px 10px}
  .brand{padding:2px 4px 14px;gap:0}
  .brand-txt,.nav-item span{display:none}
  .nav-item{padding:0 18px;gap:0}
  .ico-chev{transform:rotate(180deg)}
  #main{height:auto;min-height:100dvh;--sideNow:calc(var(--sideW-collapsed) + 20px);
    padding-left:var(--sideNow);
    grid-template-columns:1fr;grid-template-rows:auto;gap:16px}
  .hero{grid-column:1;grid-row:auto;padding-right:0}
  .hero-title{font-size:34px}
  .ann{grid-column:1;grid-row:auto;align-self:auto;max-height:46vh}
  .feedback{grid-column:1;grid-row:auto;justify-self:stretch;align-self:auto;width:auto;height:auto;max-height:none}
  .toolbar{grid-column:1;grid-row:auto;justify-self:stretch;align-self:auto;width:auto;height:auto;
    max-width:none;max-height:none;overflow:visible;justify-content:flex-start}
  .toolbar .panel-head{margin-bottom:8px}
  .tool-grid{flex:0 0 auto;grid-auto-rows:auto;margin-top:10px}
  .tool-grid .btn{height:40px;min-height:40px}
  .icp{grid-column:1;grid-row:auto;width:calc(100% + var(--sideNow) + var(--padR))}
}
@media (max-width:640px){
  .msg-row{flex-direction:column;align-items:stretch}
  .submit{width:100%}
  .icp-row{flex-wrap:wrap;row-gap:2px;white-space:normal}
  .vcard{width:100%}
  .modal{padding:14px}
  .modal-card{max-height:82dvh}
}