@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/nunito-v32-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/nunito-v32-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  color-scheme:dark;
  --sq-bg:#10142a; --sq-panel:#161c36; --sq-raised:#232b4d;
  --sq-line:#2e3760; --sq-line-hi:#454f80;
  --sq-text:#f2f4fb; --sq-muted:#b8bfd9; --sq-faint:#9aa3c7;
  --sq-link:#22d3ee; --sq-focus:#22d3ee;
  --sq-brand-500:#9966ff; --sq-brand-600:#855cd6; --sq-brand-700:#774dcb; --sq-brand-800:#5b3aa0;
  --sq-menu-a:#6d4ae0; --sq-menu-b:#8a4fd8;
  --sq-on-brand:#ffffff; --sq-stage:#1d1846;
  --sq-top-tint:rgba(0,0,0,.18); --sq-top-tint-hi:rgba(0,0,0,.28); --sq-top-edge:rgba(255,255,255,.6);
  --sq-top-shadow:rgba(0,0,0,.18); --sq-top-ring:rgba(255,255,255,.55); --sq-top-line:rgba(255,255,255,.7); --sq-top-solid-hi:#efecf9;
  --sq-peer-0:#e8505b; --sq-peer-1:#d9700a; --sq-peer-2:#b88700; --sq-peer-3:#5f9e1b;
  --sq-peer-4:#1f9d55; --sq-peer-5:#0f9488; --sq-peer-6:#0e8fb3; --sq-peer-7:#3f82e3;
  --sq-peer-8:#5b5fe8; --sq-peer-9:#9152e0; --sq-peer-10:#c94fb5; --sq-peer-11:#e0457b;
  --sq-peer-ink:#10142a; --sq-peer-ink-light:#ffffff;
  --sq-success:#2fbf71; --sq-warn:#ffb020; --sq-danger:#ff5a6e; --sq-info:#22d3ee;
  --sq-tint:rgba(153,102,255,.14);
  --sq-scrim:rgba(6,8,18,.74);
  --sq-shadow-1:none; --sq-shadow-2:0 12px 32px -14px rgba(0,0,0,.7); --sq-shadow-3:0 22px 50px -16px rgba(0,0,0,.8);

  --sq-font:Nunito,ui-rounded,"SF Pro Rounded","Segoe UI Variable",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sq-r-chip:4px; --sq-r-panel:10px; --sq-r-card:16px; --sq-r-pill:999px;
  --sq-hit:36px;
  --sq-dur:140ms; --sq-dur-sheet:240ms; --sq-ease:cubic-bezier(0,0,.2,1);

  --bg:var(--sq-bg); --bg2:var(--sq-bg);
  --card:var(--sq-panel); --card-hi:var(--sq-raised);
  --line:var(--sq-line); --line-hi:var(--sq-line-hi);
  --ink:var(--sq-text); --dim:var(--sq-muted); --faint:var(--sq-faint);
  --violet:var(--sq-brand-500); --accent:var(--sq-brand-600); --indigo:var(--sq-brand-700); --blue:#3b82f6;
  --accent2:var(--sq-link); --pink:#d946a8;
  --good:var(--sq-success); --bad:var(--sq-danger); --love:var(--sq-danger); --warn:var(--sq-warn); --badge:#e11d48;
  --r:var(--sq-r-card);
  --shadow:var(--sq-shadow-3);
  --glow:none;
  --ease:var(--sq-ease);
  --pop:cubic-bezier(.2,1.3,.4,1);
  --col:1180px;
}

:root[data-theme=day]{
  color-scheme:light;
  --sq-bg:#f7f6fc; --sq-panel:#ffffff; --sq-raised:#efecf9;
  --sq-line:#d9d5ea; --sq-line-hi:#b9b2d6;
  --sq-text:#1b1f3a; --sq-muted:#4f5677; --sq-faint:#646a8a;
  --sq-link:#5b3aa0; --sq-focus:#5b3aa0;
  --sq-success:#1a7f4b; --sq-warn:#9a5b00; --sq-danger:#c62839; --sq-info:#0b7f99;
  --sq-tint:rgba(119,77,203,.09);
  --sq-scrim:rgba(27,31,58,.45);
  --sq-shadow-1:0 1px 2px rgba(27,31,58,.06),0 2px 8px -2px rgba(27,31,58,.08);
  --sq-shadow-2:0 10px 28px -12px rgba(27,31,58,.22);
  --sq-shadow-3:0 22px 48px -18px rgba(27,31,58,.3);
}
@media (prefers-color-scheme:light){
  :root[data-theme=auto]{
    color-scheme:light;
    --sq-bg:#f7f6fc; --sq-panel:#ffffff; --sq-raised:#efecf9;
    --sq-line:#d9d5ea; --sq-line-hi:#b9b2d6;
    --sq-text:#1b1f3a; --sq-muted:#4f5677; --sq-faint:#646a8a;
    --sq-link:#5b3aa0; --sq-focus:#5b3aa0;
    --sq-success:#1a7f4b; --sq-warn:#9a5b00; --sq-danger:#c62839; --sq-info:#0b7f99;
    --sq-tint:rgba(119,77,203,.09);
    --sq-scrim:rgba(27,31,58,.45);
    --sq-shadow-1:0 1px 2px rgba(27,31,58,.06),0 2px 8px -2px rgba(27,31,58,.08);
    --sq-shadow-2:0 10px 28px -12px rgba(27,31,58,.22);
    --sq-shadow-3:0 22px 48px -18px rgba(27,31,58,.3);
  }
}

*{box-sizing:border-box}
html,body{margin:0; min-height:100%}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  background:var(--sq-bg);
  color:var(--sq-text);
  overflow-x:hidden;
  font:16px/1.55 var(--sq-font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:rgba(153,102,255,.18);
}

.aura{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:radial-gradient(120% 60% at 50% -10%,rgba(109,74,224,.22),transparent 60%),var(--sq-bg)}
.aura b{display:none}

a{color:var(--sq-link); text-decoration:none}
a:hover{text-decoration:underline}
p a:not(.btn){text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
h1,h2,h3{margin:0; letter-spacing:-.015em; font-weight:800}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,textarea,select{font:inherit; color:inherit}

:focus-visible{outline:2px solid var(--sq-focus); outline-offset:2px; border-radius:6px}

.wrap{max-width:var(--col); margin:0 auto;
  padding:0 max(20px,env(safe-area-inset-right)) calc(90px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.wrap.flush{padding-bottom:0}
.hidden{display:none !important}
.spacer{flex:1}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.top{position:sticky; top:0; z-index:40; padding-top:env(safe-area-inset-top);
  background:linear-gradient(90deg,var(--sq-menu-a),var(--sq-menu-b)); color:var(--sq-on-brand);
  box-shadow:0 1px 0 var(--sq-top-shadow)}
.top .inner{max-width:var(--col); margin:0 auto; min-height:56px;
  padding:8px max(20px,env(safe-area-inset-right)) 8px max(20px,env(safe-area-inset-left));
  display:flex; align-items:center; gap:14px}
.top .inner > *{min-width:0}
.top a:focus-visible,.top button:focus-visible{outline-color:var(--sq-on-brand)}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px;
  letter-spacing:-.02em; color:var(--sq-on-brand); min-height:var(--sq-hit)}
.brand:hover{text-decoration:none}
.top .brand{flex:none}
.brand svg,.brand img{display:block; flex:none; border-radius:8px; box-shadow:0 0 0 1.5px var(--sq-top-ring)}
.navlink{color:var(--sq-on-brand); font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:inline-flex; align-items:center; min-height:var(--sq-hit); padding:0 4px;
  border-bottom:2px solid transparent}
.navlink:hover{text-decoration:none; border-bottom-color:var(--sq-top-line)}
.navlink.on{border-bottom-color:var(--sq-on-brand)}
.navlink.msgs{position:relative; gap:7px; overflow:visible; flex:none}
.msgs svg{width:18px; height:18px; fill:currentColor; flex:none}
.mbadge{min-width:22px; height:22px; padding:0 6px; border-radius:99px; background:var(--badge); color:var(--sq-on-brand);
  font-size:14px; font-weight:800; line-height:22px; text-align:center; font-variant-numeric:tabular-nums}
.topbtn{display:inline-flex; align-items:center; justify-content:center; min-height:var(--sq-hit);
  padding:0 16px; border-radius:var(--sq-r-panel); font-weight:800; font-size:15px; white-space:nowrap;
  color:var(--sq-on-brand); background:var(--sq-top-tint); border:1.5px solid var(--sq-top-edge);
  transition:background var(--sq-dur) var(--sq-ease)}
.topbtn:hover{background:var(--sq-top-tint-hi); text-decoration:none}
.topbtn.solid{background:var(--sq-on-brand); color:var(--sq-brand-800); border-color:var(--sq-on-brand)}
.topbtn.solid:hover{background:var(--sq-top-solid-hi)}
.topbtn.make svg{display:none; width:18px; height:18px; fill:currentColor; flex:none; margin:0 5px 0 -3px}

.bell{position:relative; width:var(--sq-hit); height:var(--sq-hit); border-radius:var(--sq-r-panel); display:grid; place-items:center; flex:none;
  color:var(--sq-on-brand); background:var(--sq-top-tint); border:1.5px solid var(--sq-top-edge); transition:background var(--sq-dur) var(--sq-ease)}
.bell:hover{background:var(--sq-top-tint-hi); text-decoration:none}
.bell svg{width:18px; height:18px; fill:var(--sq-on-brand)}
.bell .mbadge{position:absolute; top:-8px; right:-8px; border:2px solid var(--sq-menu-b)}
.chip{display:flex; align-items:center; gap:9px; min-height:var(--sq-hit); padding:3px 12px 3px 4px; border-radius:var(--sq-r-pill);
  color:var(--sq-on-brand); background:var(--sq-top-tint); border:1.5px solid var(--sq-top-edge);
  transition:background var(--sq-dur) var(--sq-ease)}
.chip:hover{background:var(--sq-top-tint-hi); text-decoration:none}
.chip .nm{font-weight:800; font-size:14px; max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip .avatar{width:28px; height:28px; border-radius:50%; display:grid; place-items:center; flex:none;
  font-weight:800; font-size:14px; box-shadow:0 0 0 2px var(--sq-on-brand)}
.menubtn{display:none}
.menubtn:hover{background:var(--sq-top-tint-hi)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--sq-hit);
  padding:0 18px; border-radius:var(--sq-r-panel); font-weight:800; font-size:15px; line-height:1.2;
  color:var(--sq-text); background:var(--sq-panel); border:1.5px solid var(--sq-line); box-shadow:var(--sq-shadow-1);
  transition:background var(--sq-dur) var(--sq-ease),border-color var(--sq-dur) var(--sq-ease),transform var(--sq-dur) var(--sq-ease)}
.btn:hover{background:var(--sq-raised); border-color:var(--sq-line-hi); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--sq-brand-700); border-color:var(--sq-brand-700); color:var(--sq-on-brand)}
.btn.primary:hover{background:var(--sq-brand-800); border-color:var(--sq-brand-800)}
.btn.ghost{background:none; box-shadow:none}
.btn.sm{padding:0 14px; font-size:15px}
.btn.lg{min-height:52px; padding:0 26px; font-size:17px; border-radius:12px}
.btn.danger{color:var(--sq-danger)}
.btn.danger:hover{border-color:var(--sq-danger)}
.btn.danger.solid{background:var(--sq-danger); border-color:var(--sq-danger); color:var(--sq-on-brand)}
.btn:disabled{opacity:.55; cursor:default; transform:none}
.btn svg{width:20px; height:20px; flex:none}

.pill{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:800; line-height:1.3;
  padding:3px 10px; border-radius:var(--sq-r-pill); color:var(--sq-text); background:var(--sq-raised)}
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--sq-success); flex:none}
.count{font-size:14px; font-weight:800; color:var(--sq-muted); background:var(--sq-panel); padding:2px 10px;
  border-radius:var(--sq-r-pill); border:1px solid var(--sq-line); font-variant-numeric:tabular-nums; white-space:nowrap}
.pill.good{background:none; box-shadow:inset 0 0 0 1.5px var(--sq-success)}

.skel{border-radius:var(--sq-r-card); background:var(--sq-panel); border:1px solid var(--sq-line); position:relative; overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .skel::after{content:''; position:absolute; inset:0;
    background:linear-gradient(100deg,transparent 30%,var(--sq-tint) 50%,transparent 70%);
    background-size:200% 100%; animation:sh 1.3s linear infinite}
}
@keyframes sh{from{background-position:100% 0} to{background-position:-100% 0}}

@media (max-width:640px), (pointer:coarse){
  .brand{min-height:44px}
  .navlink{min-height:44px; max-width:100%}
  .topbtn{min-height:44px}
  .btn{min-height:44px}
  .bell{width:44px; height:44px}
  .chip{min-height:44px}
  input,textarea,select{font-size:16px}
}
@media (max-width:640px){
  .wrap{padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right))}
  .top .inner{gap:10px; min-height:56px; padding:6px max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left))}
  .brand{font-size:18px}
  .navlink{font-size:14px; padding:0 2px}
  .top .msgs{display:inline-flex; justify-content:center; min-width:44px; min-height:44px}
  .msgs .ml{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .msgs .mbadge{position:absolute; top:3px; right:-3px; border:2px solid var(--sq-menu-b)}
  .top .navlink.opt,.top .topbtn.opt{display:none}
  body[data-session=in] .top .topbtn.make{position:relative; min-height:36px; padding:0 10px}
  body[data-session=in] .top .topbtn.make::after{content:""; position:absolute; left:0; right:0; top:-5px; bottom:-5px}
  body[data-session=in] .top .topbtn.make svg{display:block}
  body[data-session=in] .top .brand{min-width:44px; justify-content:center}
  body[data-session=in] .top .topbtn.make .long,
  body[data-session=in] .top .brand .wm{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .topbtn{padding:0 12px}
  .chip{padding:3px; gap:0; justify-content:center}
  .top .chip{min-width:44px}
  .chip .nm{display:none}
  .chip .avatar{width:34px; height:34px}
  .menubtn{display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:12px; color:var(--sq-on-brand);
    background:var(--sq-top-tint); border:1.5px solid var(--sq-top-edge)}
  .menubtn svg{width:20px; height:20px; fill:var(--sq-on-brand)}
}

.gtile{position:relative; display:flex; flex-direction:column; height:100%; border-radius:var(--sq-r-card); overflow:hidden;
  color:var(--sq-text); text-align:left; background:var(--sq-panel); border:1px solid var(--sq-line); box-shadow:var(--sq-shadow-1);
  transition:transform var(--sq-dur) var(--sq-ease),border-color var(--sq-dur) var(--sq-ease)}
.gtile:hover{transform:translateY(-2px); border-color:var(--sq-line-hi); text-decoration:none}
.gtile .pic{display:grid; place-items:center; aspect-ratio:4/3; font-size:44px; line-height:1;
  background:var(--sq-stage) center/cover no-repeat}
.gtile .pic.blank{background:var(--sq-raised)}
.gtile .meta{display:flex; align-items:center; gap:12px; padding:12px 14px 14px}
.gtile .txt{display:block; min-width:0; flex:1}
.gtile .nm{display:block; width:100%; padding:0; font-weight:800; font-size:16px; text-align:left; color:inherit;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gtile .by{display:flex; align-items:center; gap:8px; margin-top:4px; color:var(--sq-muted); font-size:14px; min-width:0}
.gtile .by .who{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gtile .nums{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; color:var(--sq-muted); font-size:14px;
  font-variant-numeric:tabular-nums}
.gtile .nums > span{display:inline-flex; align-items:center; gap:5px}
.gtile .nums svg{width:14px; height:14px; fill:currentColor}
.gtile .foot{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px}
.gtile .go{flex:none; pointer-events:none}
.gtile .go svg{width:14px; height:14px; fill:currentColor}
.gtile:hover .go{background:var(--sq-raised); border-color:var(--sq-line-hi)}
.gtile .stretch::after{content:""; position:absolute; inset:0; border-radius:inherit}
.gtile .stretch:hover{text-decoration:none}
.gtile .stretch:focus-visible{outline:none}
.gtile:has(.stretch:focus-visible){outline:2px solid var(--sq-focus); outline-offset:2px}
.peer{width:22px; height:22px; flex:none; display:block}
.peer svg{display:block; width:100%; height:100%; overflow:visible}
@media (hover:none){
  .gtile:hover{transform:none}
}

.menu{display:flex; flex-direction:column; gap:2px; margin:0 -6px}
.mi{display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:0 14px;
  border-radius:12px; font-weight:800; font-size:16px; color:var(--sq-text); text-align:left}
.mi:hover{background:var(--sq-raised); text-decoration:none}
.mi[aria-current=page]{background:var(--sq-raised); box-shadow:inset 3px 0 0 var(--sq-brand-500)}
.mi[aria-current=page] svg{fill:var(--sq-text)}
.mi svg{width:20px; height:20px; fill:var(--sq-muted); flex:none}
.mi.out{color:var(--sq-danger); margin-top:6px; border-top:1px solid var(--sq-line); border-radius:0 0 12px 12px}
.mi.out svg{fill:var(--sq-danger)}
.sheet{width:calc(100% - 40px); max-width:400px; max-height:88vh; padding:20px; border-radius:20px; color:var(--sq-text);
  background:var(--sq-panel); border:1px solid var(--sq-line); box-shadow:var(--sq-shadow-3)}
.sheet::backdrop{background:var(--sq-scrim)}
.sheet h2{font-size:20px; margin:0 0 10px}
.sheet .lede{color:var(--sq-muted); font-size:15px; margin:-6px 0 12px}
.sheet .btn{width:100%; margin-top:14px; min-height:48px}
@media (prefers-reduced-motion:no-preference){
  .sheet[open]{animation:sheetin var(--sq-dur) var(--sq-ease)}
}
@keyframes sheetin{
  from{opacity:0; transform:translateY(12px)}
  to{opacity:1; transform:none}
}
@media (max-width:640px){
  .sheet{width:100%; max-width:none; margin:auto 0 0; border-radius:22px 22px 0 0; border-bottom:0;
    padding:18px 18px calc(20px + env(safe-area-inset-bottom))}
}

.site-foot{margin-top:72px; border-top:1px solid var(--sq-line); padding:28px 0 8px; color:var(--sq-muted); font-size:14px}
.site-foot .row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px}
.site-foot nav{display:flex; flex-wrap:wrap; gap:4px 20px}
.site-foot nav a{color:var(--sq-text); font-weight:700; display:inline-flex; align-items:center; min-height:var(--sq-hit)}
.site-foot p{margin:14px 0 0; line-height:1.7}
.site-foot p a{color:var(--sq-link); text-decoration:underline; text-underline-offset:2px}
.themepick{display:inline-flex; gap:2px; padding:3px; margin-left:auto; border-radius:var(--sq-r-panel);
  background:var(--sq-panel); border:1px solid var(--sq-line)}
.themepick button{min-height:var(--sq-hit); padding:0 14px; border-radius:7px; font-size:14px; font-weight:800; color:var(--sq-muted)}
.themepick button[aria-pressed=true]{background:var(--sq-raised); color:var(--sq-text)}
@media (max-width:640px), (pointer:coarse){
  .site-foot nav a{min-height:44px}
  .themepick{margin-left:0}
  .themepick button{min-height:44px; padding:0 16px}
}

@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise var(--sq-dur) var(--sq-ease) both}
}
@keyframes rise{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:none}
}

@media (prefers-reduced-motion:reduce){
  .rise,.sheet[open]{animation:none}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}
select option,select optgroup{background:var(--sq-panel); color:var(--sq-text)}
