@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-latin.woff2) format('woff2');
  unicode-range: U+0020-007E,U+00BF,U+00C9,U+00D6,U+00DC,U+00DF-00E5,U+00E7-00EA,U+00EC-00ED,U+00F2-00F4,U+00F6,U+00FA,U+00FC,U+0103,U+0105,U+0107,U+0110-0111,U+0119,U+011F,U+0130-0131,U+0141-0142,U+015B,U+015F,U+017C,U+01A1,U+01B0,U+1EA1,U+1EA3,U+1EA5,U+1EA7,U+1EAB,U+1EAD,U+1EB7,U+1EBD,U+1EBF,U+1EC1,U+1EC3,U+1EC9,U+1ECD,U+1ECF,U+1ED1,U+1ED3,U+1ED7,U+1ED9,U+1EDB,U+1EDD,U+1EDF,U+1EE3,U+1EE7,U+1EE9,U+1EED,U+1EEF,U+1EF3,U+2014,U+2026;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-cyrillic.woff2) format('woff2');
  unicode-range: U+0410-0412,U+0414-0418,U+041A,U+041C-0425,U+0427,U+0429,U+042D,U+042F-0448,U+044A-044F,U+0451,U+0456-0457,U+0493,U+049B,U+04A3,U+04AE-04AF,U+04B1,U+04B3,U+04B7,U+04D8-04D9,U+04E3,U+04E9,U+04EF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-hangul.woff2) format('woff2');
  unicode-range: U+AC00,U+AC04,U+AC70,U+AC8C,U+ACBC,U+ACC4,U+ACE0,U+ACE8,U+AD1C,U+AD6C,U+ADF8,U+ADFC,U+AE30,U+AE4A,U+AE4C,U+AE50,U+B098,U+B09C,U+B0B4,U+B124,U+B155,U+B204,U+B294,U+B298,U+B2C8,U+B2E4,U+B2EC,U+B2F9,U+B300,U+B3CC,U+B3D9,U+B3FC,U+B420,U+B480,U+B4E0,U+B4E4,U+B560,U+B77C,U+B78C,U+B791,U+B7A8,U+B7EC,U+B807-B808,U+B85C,U+B978,U+B97C,U+B9AC-B9AD,U+B9B0,U+B9C8,U+B9CC,U+B9CE,U+B9D0,U+B9DE,U+BA3C,U+BA74,U+BAA8,U+BABB,U+BB38,U+BB3C,U+BB50,U+BC14,U+BC29,U+BC84,U+BC88,U+BCF4,U+BD10,U+BD80,U+BD88,U+C0AC,U+C0B4,U+C0C1,U+C0DD,U+C11C,U+C138,U+C18D,U+C2B5,U+C2DC,U+C2E0,U+C2F6,U+C544,U+C548,U+C560,U+C57C,U+C5B4-C5B5,U+C5C8,U+C5D0,U+C5EC,U+C5F4,U+C624,U+C654,U+C694,U+C6B0,U+C73C,U+C740,U+C744,U+C74C,U+C751,U+C758,U+C774,U+C778,U+C77D,U+C788,U+C790,U+C7A0,U+C7A5,U+C800,U+C804,U+C815,U+C81C,U+C838,U+C911,U+C918,U+C9C0-C9C1,U+CABD,U+CC2E,U+CC3E,U+CD5C,U+CE90,U+D0ED,U+D130,U+D154,U+D558,U+D55C,U+D574,U+D588,U+D5D8,U+D65C;
}
@font-face {
  font-family: 'Fraunces JA';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-japanese.woff2) format('woff2');
  unicode-range: U+3001-3002,U+3042,U+3044,U+3046,U+3048,U+304A-304D,U+304F-3051,U+3053-3054,U+3057,U+3059-305D,U+305F-3061,U+3063-3064,U+3066-306B,U+306D-3070,U+3076,U+307B,U+307E-307F,U+3082-3084,U+3088-308D,U+3092-3093,U+30A4,U+30AD,U+30AF,U+30B8,U+30BF,U+30C3,U+30D7,U+30DA,U+30DE,U+30E3,U+30E9,U+30FC,U+4E00,U+4E0D,U+4E2D,U+4ECA,U+5206,U+52D5,U+53BB,U+53D6,U+5728,U+5834,U+58F0,U+5973,U+5E2D,U+5F7C,U+5F85,U+601D,U+623B,U+63CF,U+6587,U+65E5,U+66F8,U+6700,U+751F,U+771F,U+81EA,U+899A,U+8A00,U+8A66,U+8A71,U+8AB0,U+958B,U+9762,U+FF1F;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-han.woff2) format('woff2');
  unicode-range: U+3001-3002,U+4E00,U+4E09-4E0B,U+4E0D,U+4E2A,U+4E2D,U+4E48,U+4E86,U+4EBA,U+4EC0,U+4ECA,U+4ED6,U+4EE5,U+4EEC,U+4EFB,U+4F4D,U+4F55,U+4F60,U+4F7F,U+4F86,U+500B,U+513F,U+5148,U+5165,U+5168,U+51FA-51FB,U+5206,U+5229,U+522B,U+5230,U+52A0,U+52D5,U+53BB,U+53D6,U+53D8,U+53E5,U+53EA,U+53EF,U+5408,U+5417,U+5427,U+554F,U+559C,U+55E8,U+55EF,U+56DE,U+5728,U+573A,U+5834,U+58F0,U+591A,U+5929,U+5973,U+597D,U+59FF,U+5B50,U+5B57,U+5BEB,U+5C31,U+5C4B,U+5DF1,U+5E2D,U+5E33,U+5E6B,U+5F00,U+5F7C,U+5F85,U+5F97,U+601D,U+60F3,U+6162,U+6210-6211,U+6236-6237,U+623B,U+623F,U+6253,U+627E,U+6311,U+63CF,U+6587,U+65E5,U+65F6,U+662F,U+6642,U+666F,U+66F8,U+6700,U+6709,U+6765,U+6837,U+6B21-6B22,U+6B61,U+6BCF,U+6C92,U+6CA1,U+6D3B,U+6DF1,U+70B9-70BA,U+7248,U+751F,U+7528,U+7559,U+767A,U+7684,U+76F4,U+770B,U+771F,U+7740,U+78B0,U+79BB,U+7B49,U+7ED9,U+7F6E,U+805E,U+81EA,U+8272,U+8457,U+884C,U+88E1,U+898B,U+899A,U+89C1,U+89D2,U+89E6,U+8A00,U+8A18,U+8A31,U+8A66,U+8A71,U+8AAA,U+8AAD,U+8AB0,U+8BB0,U+8BD5,U+8BDD,U+8BF4,U+8C01,U+8C61,U+8D26,U+8DDF,U+8F09,U+8F7D,U+8FBC,U+8FD1,U+8FD9,U+8FF0,U+9055,U+9078,U+90A3,U+90E8,U+90FD,U+914D,U+91CC,U+958B,U+9593,U+95EE,U+95F4,U+9762,U+984C,U+9898,U+9EBC,U+9EDE,U+FF0C,U+FF1F;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-arabic.woff2) format('woff2');
  unicode-range: U+060C,U+061F,U+0621-0624,U+0626-063A,U+0641-064F,U+0651,U+0679,U+067E,U+0686,U+0688,U+06A9,U+06AF,U+06BA,U+06BE,U+06C1,U+06CC,U+06D2,U+06D4;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-hebrew.woff2) format('woff2');
  unicode-range: U+05D0-05E2,U+05E4,U+05E6-05EA;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-devanagari.woff2) format('woff2');
  unicode-range: U+0901-0902,U+0905-0908,U+090A,U+090F,U+0913-0917,U+091A-091D,U+091F-0921,U+0923-0928,U+092A-0930,U+0932-0933,U+0935,U+0938-0939,U+093C,U+093E-0942,U+0947-0948,U+094B-094D,U+0964;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-bengali.woff2) format('woff2');
  unicode-range: U+0981-0982,U+0985-0987,U+0989,U+098F,U+0993,U+0995-099C,U+099E-099F,U+09A1,U+09A3-09A8,U+09AA-09B0,U+09B2,U+09B6-09B9,U+09BC,U+09BE-09C1,U+09C3,U+09C7,U+09CB,U+09CD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-thai.woff2) format('woff2');
  unicode-range: U+0E01-0E02,U+0E04,U+0E07-0E0A,U+0E0D,U+0E13-0E1C,U+0E1E-0E1F,U+0E21-0E23,U+0E25,U+0E27,U+0E2A-0E2B,U+0E2D,U+0E30-0E39,U+0E40-0E44,U+0E46-0E49,U+0E4B;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-ethiopic.woff2) format('woff2');
  unicode-range: U+1201,U+1205-1206,U+1208-1209,U+120D,U+1215,U+1218,U+121A,U+121D,U+1228,U+122A,U+122D,U+122F-1230,U+1233-1235,U+123B,U+123D,U+1240,U+1243,U+1245,U+1260,U+1262-1263,U+1265-1266,U+1270,U+1273,U+1275,U+127B,U+127D,U+1290,U+1293-1296,U+1298-1299,U+129D,U+12A0,U+12A5,U+12A9,U+12C8,U+12CD-12CE,U+12D3,U+12DC,U+12E4,U+12E8,U+12EB,U+12ED,U+12F2,U+12F5,U+1308,U+130A,U+130D,U+1320,U+1325,U+132B,U+1338,U+133F,U+1348,U+134D,U+1362-1363;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-tamil.woff2) format('woff2');
  unicode-range: U+0B85,U+0B87,U+0B89,U+0B8E-0B8F,U+0B92,U+0B95,U+0B99-0B9A,U+0B9F,U+0BA3-0BA4,U+0BA8-0BAA,U+0BAE-0BB5,U+0BBE-0BC1,U+0BC6-0BC8,U+0BCA-0BCB,U+0BCD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-telugu.woff2) format('woff2');
  unicode-range: U+0C02,U+0C05,U+0C07,U+0C09-0C0A,U+0C0E-0C0F,U+0C12,U+0C15-0C17,U+0C1A,U+0C1C,U+0C1F,U+0C21,U+0C23-0C24,U+0C26,U+0C28,U+0C2A,U+0C2E-0C30,U+0C32,U+0C35,U+0C37-0C39,U+0C3E-0C42,U+0C46-0C47,U+0C4A-0C4B,U+0C4D;
}
@font-face {
  font-family: 'Fraunces TC';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/display-han-tc.woff2) format('woff2');
  unicode-range: U+3001-3002,U+4E00,U+4E09-4E0B,U+4E0D,U+4E2D,U+4E86,U+4EBA,U+4EC0,U+4ECA,U+4ED6,U+4EE5,U+4EFB,U+4F4D,U+4F55,U+4F60,U+4F86,U+500B,U+5148,U+5168,U+51FA,U+5206,U+5229,U+5230,U+52A0,U+52D5,U+53BB,U+53D6,U+53E5,U+53EA,U+53EF,U+5408,U+5427,U+554F,U+559C,U+56DE,U+5728,U+5834,U+591A,U+5929,U+597D,U+5B50,U+5B57,U+5BEB,U+5C31,U+5DF1,U+5E33,U+5E6B,U+5F97,U+60F3,U+6162,U+6210-6211,U+623F,U+6253,U+6311,U+6587,U+662F,U+6642,U+666F,U+6700,U+6709,U+6B21,U+6B61,U+6BCF,U+6C92,U+6D3B,U+70BA,U+7248,U+751F,U+7528,U+7559,U+7684,U+76F4,U+770B,U+771F,U+7B49,U+81EA,U+8272,U+8457,U+884C,U+88E1,U+898B,U+89D2,U+8A00,U+8A18,U+8A31,U+8A66,U+8A71,U+8AAA,U+8AB0,U+8DDF,U+8F09,U+8FD1,U+9078,U+90A3,U+90E8,U+90FD,U+914D,U+958B,U+9593,U+9762,U+984C,U+9EBC,U+9EDE,U+FF0C,U+FF1F;
}

:lang(ja) #app { --wordmark: 'Fraunces JA', 'Noto Serif','Songti SC','Source Han Serif SC','Hiragino Mincho ProN','Yu Mincho','Apple SD Gothic Neo','Malgun Gothic','Noto Serif KR','Times New Roman',Georgia,serif; }

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/ui-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: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/ui-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;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/ui-cyrillic.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/ui-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/ui-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

#app {
  
  --fb-bg: #ffffff;
  --fb-text: #000000;
  --fb-hint: #999999;
  --fb-link: #2481cc;
  --fb-btn: #2481cc;
  --fb-btn-text: #ffffff;
  --fb-bg2: #efeff4;
  --fb-header: #ffffff;
  --fb-accent: #168acd;
  --fb-section: #ffffff;
  --fb-sechead: #6d6d72;
  --fb-subtitle: #999999;
  --fb-destructive: #cc2929;
  --fb-separator: #c8c7cc;
  --fb-bottombar: #f1f1f1;
}

#app[data-scheme="dark"] {
  --fb-bg: #17212b;
  --fb-text: #f5f5f5;
  --fb-hint: #708499;
  --fb-link: #6ab3f3;
  --fb-btn: #5288c1;
  --fb-btn-text: #ffffff;
  --fb-bg2: #232e3c;
  --fb-header: #17212b;
  --fb-accent: #6ab2f2;
  --fb-section: #17212b;
  --fb-sechead: #6ab3f3;
  --fb-subtitle: #708499;
  --fb-destructive: #ec3942;
  --fb-separator: #101921;
  --fb-bottombar: #17212b;
}

#app[data-host="none"] {
  --fb-bg: #0a0c14;
  --fb-text: #eef1fb;
  --fb-hint: #7d87a9;
  --fb-link: #8aa8ff;
  --fb-btn: #6c8cff;
  --fb-btn-text: #ffffff;
  --fb-bg2: #0d1020;
  --fb-header: #0a0c14;
  --fb-accent: #9a6cff;
  --fb-section: #141826;
  --fb-sechead: #abb4d2;
  --fb-subtitle: #abb4d2;
  --fb-destructive: #e0576b;
  --fb-separator: rgba(120, 140, 200, .16);
  --fb-bottombar: #0d1020;
}

#app {
  
  --bg:          var(--tg-theme-bg-color,                  var(--fb-bg));
  --text:        var(--tg-theme-text-color,                var(--fb-text));
  --hint:        var(--tg-theme-hint-color,                var(--fb-hint));
  --link:        var(--tg-theme-link-color,                var(--fb-link));
  --btn:         var(--tg-theme-button-color,              var(--fb-btn));
  --btn-text:    var(--tg-theme-button-text-color,         var(--fb-btn-text));
  --bg2:         var(--tg-theme-secondary-bg-color,        var(--fb-bg2));
  --header:      var(--tg-theme-header-bg-color,           var(--fb-header));
  --accent:      var(--tg-theme-accent-text-color,         var(--fb-accent));
  --section:     var(--tg-theme-section-bg-color,          var(--fb-section));
  --sechead:     var(--tg-theme-section-header-text-color, var(--fb-sechead));
  --subtitle:    var(--tg-theme-subtitle-text-color,       var(--fb-subtitle));
  --destructive: var(--tg-theme-destructive-text-color,    var(--fb-destructive));
  --separator:   var(--tg-theme-section-separator-color,   var(--fb-separator));
  --bottombar:   var(--tg-theme-bottom-bar-bg-color,       var(--fb-bottombar));

  
  --fill:  rgba(127, 127, 127, .08);
  --fill2: rgba(127, 127, 127, .14);
  --press: rgba(127, 127, 127, .18);
  --skel:  rgba(127, 127, 127, .10);
  --skel2: rgba(127, 127, 127, .17);
  --scrim: rgba(0, 0, 0, .34);

  
  --brand-a-lit: #6c8cff;
  --brand-b-lit: #9a6cff;
  --brand-c-lit: #ff5db1;
  
  --brand-a-ink: #4b62d6;
  --brand-b-ink: #7a45d6;
  --brand-c-ink: #c02f78;
  --ok: #35c98a;
  --star: #f2a73b;

  --grad-angle: 100deg;
  --grad-cta: linear-gradient(var(--grad-angle),
      var(--brand-a-ink), var(--brand-b-ink) 55%, var(--brand-c-ink));
  --grad-word: linear-gradient(var(--grad-angle), #8aa8ff, #b78cff);
  --mono-l1: 56%;
  --mono-l2: 42%;
  --mono-l3: 52%;
  --grad-plate: linear-gradient(150deg,
      hsl(var(--h, 214) 62% var(--mono-l1)),
      hsl(calc(var(--h, 214) + 40) 58% var(--mono-l2)) 58%,
      hsl(calc(var(--h, 214) + 78) 62% var(--mono-l3)));

  
  
  --ui: 'Onest', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  
  --display: Georgia, "Times New Roman", "Noto Serif", serif;
  
  --wordmark: 'Fraunces', 'Noto Serif','Songti SC','Source Han Serif SC','Hiragino Mincho ProN','Yu Mincho','Apple SD Gothic Neo','Malgun Gothic','Noto Serif KR','Times New Roman',Georgia,serif;
  --t-2xs: 11px;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-md: 15px;
  --t-body: 17px;
  --t-lg: 20px;
  --t-xl: 24px;
  --t-2xl: 28px;

  
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --gutter: 14px;

  
  --disc: 44px;
  --disc-inset: var(--s3);
  
  --disc-rail: calc(var(--disc-inset) + var(--disc) + var(--s2));

  
  --art-anchor: 8%;

  --r-chip: 999px;
  --r-thumb: 10px;
  --r-plate: 12px;
  --r-section: 12px;
  --r-tile: 14px;
  --r-sheet: 16px;
  --r-btn: 12px;

  
  --edge-swipe: 20px;

  --sh-rail: 0 .5px 0 var(--separator);
  --sh-sheet: 0 -12px 40px -18px rgba(0, 0, 0, .45);

  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-in: cubic-bezier(.22, .7, .27, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);
  --d-tap: 110ms;
  --d-state: 160ms;
  --d-rail: 180ms;
  --d-pop: 210ms;
  --d-push: 250ms;
  --d-sheet: 270ms;

  
  --inset-top: 0px;
  --inset-bottom: 0px;
  --inset-start: 0px;
  --inset-end: 0px;
  --vh: 100%;
}

@supports (color: color-mix(in srgb, red, blue)) {
  #app {
    --fill:  color-mix(in srgb, var(--text)  6%, transparent);
    --fill2: color-mix(in srgb, var(--text) 11%, transparent);
    --press: color-mix(in srgb, var(--text) 16%, transparent);
    --skel:  color-mix(in srgb, var(--text)  8%, transparent);
    --skel2: color-mix(in srgb, var(--text) 14%, transparent);
  }
}

#app[data-scheme="light"] {
  --mono-l1: 52%;
  --mono-l2: 38%;
  --mono-l3: 48%;
  --grad-word: var(--grad-cta);
}

[dir="rtl"] #app { --grad-angle: 80deg; }

#app[data-motion="reduced"] {
  --d-tap: 0ms;
  --d-state: 0ms;
  --d-rail: 0ms;
  --d-pop: 1ms;
  --d-push: 1ms;
  --d-sheet: 1ms;
  --ease: linear;
}

#app[data-perf="low"] .blurred {
  backdrop-filter: none !important;
  background: var(--bg) !important;
}

#app[data-perf="low"] * {
  box-shadow: none !important;
  animation-duration: .001ms !important;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  
  height: var(--vh, 100%);
  padding-inline: var(--inset-start) var(--inset-end);
  
  padding-top: var(--inset-top);
  padding-top: max(var(--inset-top), env(safe-area-inset-top, 0px));
  background: var(--bg2);
  color: var(--text);
  font: var(--t-body)/1.294 var(--ui);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: hidden;
  isolation: isolate;
}

#app *,
#app *::before,
#app *::after { box-sizing: border-box; }

:where(#app button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

:where(#app input) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  min-width: 0;
}

#app .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tabs {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  padding: 6px var(--s2) 6px;
  padding-bottom: calc(6px + var(--inset-bottom));
  padding-bottom: max(calc(6px + var(--inset-bottom)),
                      calc(6px + env(safe-area-inset-bottom, 0px)));
  background: var(--bg);
  box-shadow: 0 -.5px 0 var(--separator);
}

@supports ((backdrop-filter: blur(1px)) and (color: color-mix(in srgb, red, blue))) {
  .tabs {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
  }
  #app[data-perf="low"] .tabs {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.tabs .tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px 3px;
  border-radius: 12px;
  font: 600 var(--t-2xs)/1.2 var(--ui);
  color: var(--hint);
  white-space: nowrap;
  transition: color var(--d-state) var(--ease-std), transform var(--d-tap) var(--ease);
}

.tabs .tab:active { transform: scale(.94); }

.tabs .tab .ticon {
  display: grid;
  place-items: center;
  width: 52px;
  max-width: 100%;
  height: 28px;
  border-radius: var(--r-chip);
  line-height: 0;
  background: transparent;
  transition: background-color var(--d-state) var(--ease-std);
}
.tabs .tab .ticon svg { display: block; }

.tabs .tab .tlabel {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tabs .tab[aria-selected="true"] { color: var(--accent); }

.tabs .tab[aria-selected="true"] .ticon { background: var(--fill2); }

@supports (color: color-mix(in srgb, red, blue)) {
  .tabs .tab[aria-selected="true"] .ticon {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
  }
}

.tabs .tab[aria-selected="true"] .ticon svg { stroke-width: 2; }

.tabs .tab[aria-selected="true"] .ticon svg path,
.tabs .tab[aria-selected="true"] .ticon svg rect { fill: currentColor; fill-opacity: .18; }
.tabs .tab[aria-selected="true"] .ticon svg circle[fill="currentColor"] { fill-opacity: 1; }

.tabs .tab .tlabel { font: 600 var(--t-2xs)/1.2 var(--ui); letter-spacing: .02em; }

.tabs.single { display: none; }

#app[data-tabs="off"] .tabs { display: none; }

#app[data-tabs="off"] .scroller {
  padding-bottom: calc(var(--s3) + var(--inset-bottom));
  padding-bottom: max(calc(var(--s3) + var(--inset-bottom)),
                      calc(var(--s3) + env(safe-area-inset-bottom, 0px)));
}

#app[data-tabs="off"] .actionbar {
  padding-bottom: calc(var(--s2) + var(--inset-bottom));
  padding-bottom: max(calc(var(--s2) + var(--inset-bottom)),
                      calc(var(--s2) + env(safe-area-inset-bottom, 0px)));
}

#app[data-tabs="off"] .toast {
  bottom: calc(var(--s3) + var(--inset-bottom));
  bottom: max(calc(var(--s3) + var(--inset-bottom)),
              calc(var(--s3) + env(safe-area-inset-bottom, 0px)));
}

.host {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  overflow: hidden;
  
  isolation: isolate;
}

.screen[data-kind="root"] { z-index: 1; }
.screen[data-kind="push"] { z-index: 2; }
.screen[data-kind="sheet"] { z-index: 4; }

.screen[data-kind="push"].enter { animation: pushIn var(--d-push) var(--ease) both; }
.screen[data-kind="push"].leave { animation: pushOut var(--d-pop) var(--ease) both; }

@keyframes pushIn  { from { transform: translate3d(100%, 0, 0); } to { transform: none; } }
@keyframes pushOut { from { transform: none; } to { transform: translate3d(100%, 0, 0); } }

[dir="rtl"] .screen[data-kind="push"].enter { animation-name: pushInR; }
[dir="rtl"] .screen[data-kind="push"].leave { animation-name: pushOutR; }

@keyframes pushInR  { from { transform: translate3d(-100%, 0, 0); } to { transform: none; } }
@keyframes pushOutR { from { transform: none; } to { transform: translate3d(-100%, 0, 0); } }

.screen[data-kind="sheet"] {
  top: auto;
  height: min(92%, var(--vh));
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--sh-sheet);
  background: var(--bg2);
}

.screen[data-kind="sheet"].enter { animation: sheetIn var(--d-sheet) var(--ease) both; }
.screen[data-kind="sheet"].leave { animation: sheetOut var(--d-sheet) var(--ease) both; }

@keyframes sheetIn  { from { transform: translate3d(0, 100%, 0); } to { transform: none; } }
@keyframes sheetOut { from { transform: none; } to { transform: translate3d(0, 100%, 0); } }

.veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--scrim);
  opacity: 0;
  transition: opacity var(--d-sheet) var(--ease);
}

.veil.on { opacity: 1; }

.scroller {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding-bottom: var(--inset-bottom);
  padding-bottom: max(var(--inset-bottom), env(safe-area-inset-bottom, 0px));
}

.backrow { display: none; }

.screen[data-kind="push"] .backrow,
.screen[data-kind="root"].dived .backrow,
#app[data-noback="1"] .backrow {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px var(--s2);
  font: 600 var(--t-md)/1.2 var(--ui);
  color: var(--link);
}

.backbtn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 40px;
  padding: 0 var(--s3) 0 var(--s1);
  border-radius: var(--r-chip);
  font: 600 var(--t-md)/1.2 var(--ui);
  color: var(--link);
  white-space: nowrap;
}

.backbtn:active { background: var(--press); }

.backbtn .chev.back { display: inline-grid; place-items: center; line-height: 0; color: inherit; }
.backbtn .chev.back svg { display: block; }
[dir="rtl"] .backbtn .chev.back svg { transform: scaleX(-1); }

.screen.searching .backrow { display: none; }

.actionbar {
  flex: 0 0 auto;
  display: flex;
  gap: var(--s2);
  padding: var(--s2) var(--gutter);
  background: var(--bg);
  box-shadow: 0 -.5px 0 var(--separator);
}

@supports ((backdrop-filter: blur(1px)) and (color: color-mix(in srgb, red, blue))) {
  .actionbar {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
  }
  #app[data-perf="low"] .actionbar {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.actionbar .cta {
  flex: 1 1 auto;
  min-height: 46px;
  border-radius: var(--r-btn);
  background: var(--grad-cta);
  color: #fff;
  font: 600 var(--t-md)/1.2 var(--ui);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--s4);
  text-align: center;
}

.actionbar .cta.ghost {
  flex: 0 0 auto;
  background: var(--fill);
  color: var(--text);
}

.actionbar .cta:active { opacity: .82; }

.brandrow {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s4) var(--gutter) var(--s2);
}

.brand {
  font: 700 var(--t-xl)/1.15 var(--wordmark);
  font-variation-settings: "opsz" 60, "SOFT" 50, "WONK" 0;
  letter-spacing: -.022em;
  background: var(--grad-word);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brandrow .sub {
  font: 400 var(--t-sm)/1.4 var(--ui);
  color: var(--subtitle);
  unicode-bidi: plaintext;
}

.shelf {
  display: flex;
  gap: var(--s2);
  margin-inline: var(--edge-swipe);
  padding-block: var(--s1) var(--s3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}

[dir="rtl"] .shelf {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent);
}

.shelfwrap .eyebrow { padding-inline: var(--edge-swipe); }

.shelf::-webkit-scrollbar { display: none; }

.shelf .tile {
  flex: 0 0 auto;
  width: 148px;
  scroll-snap-align: start;
  transition: transform var(--d-tap) var(--ease);
}

.shelf .tile:active { transform: scale(.96); }

.shelf .tile .name {
  display: block;
  margin-top: 6px;
  font: 600 var(--t-sm)/1.3 var(--ui);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.shelf .tile .blurb {
  display: block;
  font: 400 var(--t-xs)/1.3 var(--ui);
  color: var(--subtitle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.eyebrow {
  padding: var(--s3) var(--gutter) var(--s1);
  font: 700 var(--t-2xs)/1.25 var(--ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sechead);
}

.recswrap { display: none; }
.recswrap.on { display: block; }
.screen.searching .recswrap,
.screen.dived .recswrap { display: none; }

.recshead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s2);
}

.recshead .eyebrow {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: var(--edge-swipe) 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recsrefresh {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  margin-inline-end: var(--s3);
  padding: 0 var(--s2);
  border: 0;
  border-radius: var(--r-chip);
  background: transparent;
  font: 600 var(--t-xs)/1.2 var(--ui);
  color: var(--link);
  white-space: nowrap;
}

.recsrefresh .ic { display: inline-grid; place-items: center; line-height: 0; }
.recsrefresh .ic svg { display: block; }
.recsrefresh:active { background: var(--press); }
.recsrefresh[disabled] { opacity: .5; }

.grid.recs[data-density="grid"],
.grid.sim[data-density="grid"] {
  display: flex;
  grid-template-columns: none;
  gap: 10px;
  margin: 0;
  padding: var(--s1) var(--edge-swipe) var(--s3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge-swipe);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}

[dir="rtl"] .grid.recs[data-density="grid"],
[dir="rtl"] .grid.sim[data-density="grid"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent);
}

.grid.recs::-webkit-scrollbar,
.grid.sim::-webkit-scrollbar { display: none; }

.grid.recs[data-density="grid"] .card,
.grid.sim[data-density="grid"] .card {
  flex: 0 0 calc((100% + var(--edge-swipe) - 20px) / 2.6);
  min-width: 0;
  scroll-snap-align: start;
}

@keyframes simin { from { opacity: 0; } to { opacity: 1; } }

.simwrap {
  display: none;
  margin-block-start: var(--s3);
  padding-block: var(--s3) var(--s2);
  border-top: 1px solid var(--separator);
}

.simwrap.on {
  display: block;
  animation: simin var(--d-rail) var(--ease-std) both;
}

.rail {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  box-shadow: var(--sh-rail);
  padding-top: var(--s2);
}

.railtop {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  padding: 0 var(--gutter) var(--s2);
}

.searchbox {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding-inline: 10px;
  border-radius: var(--r-chip);
  background: var(--fill);
}

.searchbox .glyph {
  flex: 0 0 auto;
  color: var(--hint);
  font-size: var(--t-sm);
}

.searchbox input {
  flex: 1 1 0%;
  width: 0;
  min-width: 0;
  font: 400 var(--t-md)/1.2 var(--ui);
  unicode-bidi: plaintext;
}

.searchbox input::placeholder { color: var(--hint); }

.searchbox input::-webkit-search-cancel-button,
.searchbox input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

.searchbox .clear {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--hint);
}

.cancel {
  display: none;
  flex: 0 0 auto;
  margin-inline-start: calc(var(--s1) * -1);
}

.screen.searching .cancel { display: inline-flex; }
.screen.searching .sortrow,
.screen.searching .tagcloud,
.screen.searching .chiprow { display: none; }

.sortcap {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-inline: var(--gutter);
  color: var(--subtitle);
  font: 400 var(--t-xs)/1.35 var(--ui);
  unicode-bidi: plaintext;
  transition: max-height var(--d-rail) var(--ease-std),
              opacity var(--d-rail) var(--ease-std);
}

.sortcap.on {
  max-height: 40px;
  opacity: 1;
  padding-block: 0 var(--s2);
}

.rail.collapsed .sortcap,
.screen.searching .sortcap {
  max-height: 0;
  opacity: 0;
  padding-block: 0;
}

.rail.collapsed .sortrow,
.rail.collapsed .tagcloud,
.rail.collapsed .chiprow {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-block: 0;
  transition: max-height var(--d-rail) var(--ease-std),
              opacity var(--d-rail) var(--ease-std);
}

.chiprow,
.sortrow {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  max-height: 44px;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  transition: max-height var(--d-rail) var(--ease-std),
              opacity var(--d-rail) var(--ease-std);
}

[dir="rtl"] .chiprow,
[dir="rtl"] .sortrow {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
}

.chiprow::-webkit-scrollbar,
.sortrow::-webkit-scrollbar { display: none; }

.tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 var(--gutter) var(--s2);
  transition: max-height var(--d-rail) var(--ease-std),
              opacity var(--d-rail) var(--ease-std);
}

.tagcloud.folded {
  flex-wrap: nowrap;
  align-items: center;
  max-height: 44px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}

[dir="rtl"] .tagcloud.folded {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent);
}

.tagcloud.folded::-webkit-scrollbar { display: none; }

.tagcloud.open { max-height: 340px; }

.rail.collapsed .tagcloud {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-block: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 32px;
  padding-inline: 12px;
  border-radius: var(--r-chip);
  background: var(--fill);
  color: var(--text);
  font: 600 var(--t-sm)/1 var(--ui);
  white-space: nowrap;
}

.chip .cnt {
  font: 700 var(--t-2xs)/1 var(--ui);
  color: var(--hint);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.chip[aria-pressed="true"] {
  background: var(--grad-cta);
  color: #fff;
}

.chip[aria-pressed="true"] .cnt { color: rgba(255, 255, 255, .82); }
.chip:active { background: var(--press); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chip.botchip {
  padding-inline: 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(154, 108, 255, .38);
}

.chip.botchip .ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--brand-b-lit);
  opacity: 1;
}

.chip.botchip .ic svg { width: 17px; height: 17px; display: block; }

.chip.botchip[aria-pressed="true"] {
  box-shadow: none;
}

.chip.botchip[aria-pressed="true"] .ic { color: #fff; }

.chipsep {
  flex: 0 0 auto;
  align-self: center;
  width: 1px;
  height: 18px;
  margin-inline: 2px;
  background: var(--separator);
}

.seg {
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 9px;
  background: var(--fill);
}

.seg button {
  position: relative;
  z-index: 1;
  min-width: 44px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--hint);
  font-size: var(--t-md);
  transition: color var(--d-state) var(--ease-std);
}

.seg button[aria-pressed="true"] { color: #fff; }

.seg .ink {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  inset-inline-start: 2px;
  width: 44px;
  border-radius: 7px;
  background: var(--grad-cta);
  transition: transform var(--d-state) var(--ease-std);
}

.thread {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--d-state) linear;
}

.thread.on { opacity: 1; }

.thread::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 40%;
  background: var(--grad-cta);
  animation: thread 900ms linear infinite;
}

@keyframes thread {
  from { transform: translate3d(-100%, 0, 0); }
  to   { transform: translate3d(350%, 0, 0); }
}

#app[data-motion="reduced"] .thread::before { animation: none; width: 100%; opacity: .5; }

.notice {
  margin: var(--s2) var(--gutter) 0;
  padding: 10px var(--s3);
  border-radius: var(--r-section);
  background: var(--fill);
  color: var(--subtitle);
  font: 400 var(--t-sm)/1.4 var(--ui);
}

.grid {
  display: grid;
  gap: 10px;
  padding: var(--s3) var(--gutter);
}

.grid[data-density="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.grid[data-density="rows"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  background: var(--section);
  border-radius: var(--r-section);
  margin: var(--s3) var(--gutter);
  padding: 0;
  overflow: hidden;
}

.card {
  display: block;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--separator);
  border-radius: var(--r-tile);
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: auto 305px;
}

.card:active { background: var(--press); }

.card .meat { padding: var(--s2) 10px 10px; }

.card .name {
  display: block;
  font: 600 var(--t-md)/1.25 var(--ui);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.card .blurb {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  min-height: 2.8em;
  font: 400 var(--t-sm)/1.4 var(--ui);
  color: var(--subtitle);
  unicode-bidi: plaintext;
}

.card .metarow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: 6px;
  font: 600 var(--t-xs)/1.3 var(--ui);
  color: var(--hint);
}

.card .metarow .tag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 68px;
  padding: 10px var(--s3);
  background: var(--section);
  content-visibility: auto;
  contain-intrinsic-size: auto 68px;
}

.row + .row { box-shadow: inset 0 .5px 0 var(--separator); }
.row:active { background: var(--press); }

.row .plate {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--r-thumb);
}

.row .body { flex: 1 1 auto; min-width: 0; }

.row .name {
  display: block;
  font: 600 var(--t-body)/1.25 var(--ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.row .sub {
  display: block;
  margin-top: 2px;
  font: 400 var(--t-sm)/1.35 var(--ui);
  color: var(--subtitle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.row .side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s1);
  color: var(--hint);
  font: 600 var(--t-xs)/1 var(--ui);
}

.row .side .num.pending,
.stats .num.pending { color: var(--hint); }

.plate {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-plate);
  overflow: hidden;
  background: var(--grad-plate);
  isolation: isolate;
}

.plate.sq { aspect-ratio: 1 / 1; }

.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(58deg,
      rgba(255, 255, 255, .06) 0 2px, transparent 2px 10px);
}

.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 8, 18, 0) 42%, rgba(6, 8, 18, .55));
}

#app[data-perf="low"] .plate::before { display: none; }

.plate .mono {
  position: absolute;
  inset-inline-start: -.05em;
  bottom: -.22em;
  font: 900 clamp(54px, 22vw, 96px)/.78 var(--display);
  color: rgba(255, 255, 255, .34);
  letter-spacing: -.045em;
  user-select: none;
  -webkit-user-select: none;
}

.row .plate .mono,
.plate.tiny .mono { font-size: 30px; }

.plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% var(--art-anchor);
  opacity: 0;
  transition: opacity .38s var(--ease-in);
  z-index: 1;
}

.plate img.on { opacity: 1; }

.plate .foot,
.plate .tagpill,
.plate .rank,
.plate .fav { z-index: 2; }

.plate .foot {
  position: absolute;
  inset-inline: var(--s2);
  bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font: 700 var(--t-2xs)/1.25 var(--ui);
  color: #fff;
}

.plate .foot .rating {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.plate .foot .rating.pending {
  padding: 2px 6px;
  border-radius: var(--r-chip);
  background: rgba(0, 0, 0, .38);
  letter-spacing: .04em;
  text-shadow: none;
}

.plate .foot .langpill {
  padding: 2px 6px;
  border-radius: var(--r-chip);
  background: rgba(0, 0, 0, .38);
  letter-spacing: .06em;
  text-transform: uppercase;
  unicode-bidi: isolate;
}

.plate .tagpills {
  position: absolute;
  inset-inline-start: var(--s2);
  top: var(--s2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 2;
}

.plate .tagpill {
  padding: 2px 7px;
  border-radius: var(--r-chip);
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(10, 12, 20, .22);
  color: rgba(255, 255, 255, .92);
  font: 700 var(--t-2xs)/1.35 var(--ui);
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plate .rank {
  position: absolute;
  inset-inline-start: var(--s2);
  top: var(--s2);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-b-ink);
  color: #fff;
  font: 700 var(--t-2xs)/1 var(--ui);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.plate .rank ~ .tagpills { top: 32px; }

.hero .plate .tagpills {
  inset-inline-start: var(--disc-rail);
  max-inline-size: calc(100% - var(--disc-rail) - var(--disc-rail));
}

.hero .plate .tagpill { max-width: 100%; }

.hero:not(:has(> .backdisc)) .plate .tagpills {
  inset-inline-start: var(--s2);
  max-inline-size: calc(100% - var(--s2) - var(--disc-rail));
}

.fav {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.fav.on { transform: none; }
.fav.pop { animation: pop 340ms var(--ease-in); }
.fav.shake { animation: shake 340ms var(--ease-std); }

@keyframes pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(-3px, 0, 0); }
  75%      { transform: translate3d(3px, 0, 0); }
}

.sk-plate {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-plate);
  background: var(--skel);
  background-image: linear-gradient(90deg, transparent, var(--skel2), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}

.row .sk-plate { width: 56px; height: 56px; aspect-ratio: auto; border-radius: var(--r-thumb); }

.sk-line {
  height: var(--h, 13px);
  border-radius: 4px;
  background: var(--skel);
  margin-top: 8px;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

[dir="rtl"] .sk-plate { animation-name: shimmerR; }

@keyframes shimmerR {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

#app[data-perf="low"] .sk-plate,
#app[data-motion="reduced"] .sk-plate { animation: none; }

.tail { padding: 0 var(--gutter) var(--s10); }

.endcap {
  padding: var(--s6) 0 var(--s4);
  text-align: center;
  font: 600 var(--t-xs)/1.3 var(--ui);
  color: var(--hint);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.botmark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--brand-b-lit);
  opacity: .92;
}

.botmark svg { width: 15px; height: 15px; display: block; }

.card .metarow .botmark { margin-inline-start: auto; }

.row .side .botmark svg { width: 16px; height: 16px; }

.grid[data-density="grid"] { gap: 12px; }

.grid[data-density="grid"] .card {
  position: relative;
  border: 0;
  border-radius: 18px;
  background: transparent;
  transition: transform var(--d-tap) var(--ease);
  contain-intrinsic-size: auto 252px;
}

.grid[data-density="grid"] .card:active {
  background: transparent;
  transform: scale(.965);
}

.grid[data-density="grid"] .card .plate {
  aspect-ratio: 3 / 4;
  border-radius: 18px;
}

.grid[data-density="grid"] .card .plate::after {
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(6, 8, 18, 0) 26%,
      rgba(6, 8, 18, .46) 52%,
      rgba(6, 8, 18, .82) 74%,
      rgba(6, 8, 18, .94));
}

.grid[data-density="grid"] .card .meat {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--s2) var(--s3) 26px;
  pointer-events: none;
}

.grid[data-density="grid"] .card .name {
  color: #fff;
  font: 700 var(--t-md)/1.2 var(--ui);
  letter-spacing: -.01em;
  
  text-shadow: 0 1px 4px rgba(0, 0, 0, .58);
}

.grid[data-density="grid"] .card .blurb {
  min-height: 0;
  margin-top: 3px;
  font: 400 var(--t-xs)/1.35 var(--ui);
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .52);
}

.grid[data-density="grid"] .card .metarow {
  margin-top: 4px;
  color: rgba(255, 255, 255, .62);
}

.grid[data-density="grid"] .card .tagrow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  overflow: hidden;
}

.grid[data-density="grid"] .card .tagrow .tag {
  min-width: 0;
  flex: 0 1 auto;
  padding: 1px 7px;
  border-radius: var(--r-chip);
  background: rgba(8, 10, 20, .46);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .9);
  font: 700 var(--t-2xs)/1.5 var(--ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s10) var(--s5);
  text-align: center;
}

.state .glyph {
  font-size: 48px;
  line-height: 1;
  opacity: .5;
  color: var(--hint);
}

.state h2 {
  margin: var(--s2) 0 0;
  font: 700 var(--t-2xl)/1.1 var(--wordmark);
  color: var(--text);
}

.state p {
  margin: 0;
  max-width: 30ch;
  font: 400 var(--t-sm)/1.45 var(--ui);
  color: var(--subtitle);
}

.state .acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s3);
}

.act {
  min-height: 40px;
  padding: 0 var(--s4);
  border-radius: var(--r-btn);
  background: var(--fill);
  color: var(--text);
  font: 600 var(--t-sm)/1.2 var(--ui);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.act.primary { background: var(--grad-cta); color: #fff; }
.act:active { opacity: .82; }

.toast {
  position: absolute;
  inset-inline: var(--gutter);
  
  bottom: var(--s3);
  z-index: 9;
  padding: 10px var(--s3);
  border-radius: var(--r-btn);
  background: var(--bg);
  box-shadow: var(--sh-sheet);
  border: 1px solid var(--separator);
  color: var(--text);
  font: 400 var(--t-sm)/1.35 var(--ui);
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity var(--d-state) var(--ease-std),
              transform var(--d-state) var(--ease-std);
  pointer-events: none;
}

.toast.on { opacity: 1; transform: none; }
.toast.bad { color: var(--destructive); }

.banner {
  flex: 0 0 auto;
  padding: 8px var(--gutter);
  background: var(--fill);
  color: var(--subtitle);
  font: 400 var(--t-xs)/1.35 var(--ui);
  text-align: center;
}

.hero { position: relative; }
.hero .plate { border-radius: 0; }

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  pointer-events: none;
}

.hero::before {
  top: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(6, 8, 18, .42), rgba(6, 8, 18, 0));
}

.hero::after {
  bottom: 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(6, 8, 18, 0) 0%, rgba(6, 8, 18, .52) 52%, rgba(6, 8, 18, .88) 100%);
}

.hero .overlay {
  position: absolute;
  inset-inline: var(--gutter);
  bottom: var(--s4);
  z-index: 2;
  color: #fff;
}

.hero .overlay h1 {
  margin: 0;
  font: 700 var(--t-2xl)/1.1 var(--ui);
  letter-spacing: -.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
  overflow-wrap: break-word;
}

.hero .overlay .by {
  display: block;
  margin-top: 4px;
  font: 400 var(--t-sm)/1.35 var(--ui);
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  unicode-bidi: plaintext;
}

.backdisc,
.hero .plate .fav {
  position: absolute;
  top: var(--disc-inset);
  z-index: 3;
  width: var(--disc);
  height: var(--disc);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(10, 12, 24, .42);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  line-height: 0;
  text-shadow: none;
  transition: background-color var(--d-tap) var(--ease-std), transform var(--d-tap) var(--ease);
}

.backdisc { inset-inline-start: var(--disc-inset); }
.backdisc svg { display: block; }
[dir="rtl"] .backdisc svg { transform: scaleX(-1); }
.backdisc:active,
.hero .plate .fav:active { background: rgba(10, 12, 24, .64); transform: scale(.94); }

.hero .plate .fav {
  inset-inline-end: var(--disc-inset);
  font-size: 20px;
  line-height: 1;
}

.hero .plate .fav.on { color: var(--brand-c-lit); }

#app[data-perf="low"] .backdisc,
#app[data-perf="low"] .hero .plate .fav,
#app[data-perf="low"] .hero .overlay .by.tap,
#app[data-perf="low"] .hero .overlay .badge { backdrop-filter: none; -webkit-backdrop-filter: none; }

.badge {
  display: inline-block;
  margin-inline-start: var(--s2);
  padding: 2px 8px;
  border-radius: var(--r-chip);
  background: var(--fill2);
  color: var(--text);
  font: 700 var(--t-2xs)/1.4 var(--ui);
  vertical-align: middle;
}

.hero .overlay .badge {
  position: relative;
  top: -3px;
  padding: 3px 9px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  letter-spacing: .02em;
  text-shadow: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
  padding: var(--s3) var(--gutter) 0;
}

.stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stats .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 64px;
  padding: 10px 6px;
  border-radius: var(--r-section);
  background: var(--section);
  text-align: center;
  transition: background-color var(--d-tap) var(--ease-std), transform var(--d-tap) var(--ease);
}

.stats button.stat:active { background: var(--press); transform: scale(.97); }

.stats .num {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font: 700 var(--t-lg)/1.2 var(--ui);
  font-variant-numeric: proportional-nums;
  letter-spacing: -.01em;
  unicode-bidi: isolate;
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats .num .glyph {
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  transform-origin: 50% 55%;
}

.stats .num .cnt.zero { display: none; }
.stats .num:has(.cnt.zero) .glyph { color: var(--hint); }

.stats .num.pending {
  font: 700 var(--t-xs)/1.5 var(--ui);
  padding: 2px 9px;
  border-radius: var(--r-chip);
  background: var(--fill2);
  color: var(--subtitle);
}

.stats .lbl {
  font: 600 var(--t-2xs)/1.25 var(--ui);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hint);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats .favstat.on .glyph { color: var(--brand-c-lit); }
.stats .favstat.on { box-shadow: inset 0 0 0 1px rgba(255, 93, 177, .45); }
.stats .glyph.pop { animation: pop 340ms var(--ease-in); }
.stats .glyph.shake { animation: shake 340ms var(--ease-std); }

.alsobots {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s2) var(--gutter) 0;
}

.alsobots:empty { display: none; }

.alsobot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 56px;
  padding: 8px var(--s3);
  border-radius: var(--r-section);
  background: var(--section);
  text-align: start;
}

.alsobot:active { background: var(--press); }

.alsobot .ic {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--fill2);
  color: var(--accent);
  line-height: 0;
}

.alsobot .ic svg { width: 22px; height: 22px; display: block; }

.crallslot:empty { display: none; }
.tail .alsobots.crall { padding-inline: 0; padding-top: var(--s3); }

.alsobot .body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.alsobot .k {
  font: 400 var(--t-xs)/1.3 var(--ui);
  color: var(--subtitle);
  unicode-bidi: plaintext;
}

.alsobot .v {
  font: 600 var(--t-md)/1.3 var(--ui);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.chev {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  line-height: 0;
  color: var(--hint);
}

.chev svg { display: block; }
[dir="rtl"] .chev svg { transform: scaleX(-1); }

.section {
  margin: var(--s3) var(--gutter);
  padding: var(--s3);
  background: var(--section);
  border-radius: var(--r-section);
}

.prose {
  font: 400 var(--t-body)/1.45 var(--ui);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  unicode-bidi: plaintext;
  opacity: 1;
  transition: opacity var(--d-state) var(--ease-std);
}

.prose.partial { opacity: .45; }

.prosebox.folded .prose {
  max-height: 200px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
}

.prosebox .more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: var(--s1);
  min-height: 36px;
  color: var(--link);
  font: 600 var(--t-sm)/1.2 var(--ui);
}

.prosebox .more .chev { color: inherit; }
.prosebox .more .chev svg { transform: rotate(90deg); }
[dir="rtl"] .prosebox .more .chev svg { transform: rotate(90deg); }

.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--s3) var(--gutter) 0;
}

.taglist:empty { display: none; }

.cardfoot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s3) var(--gutter) var(--s4);
}

.cardfoot .cta {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 0 var(--s3);
  border-radius: var(--r-btn);
  background: var(--grad-cta);
  color: #fff;
  font: 600 var(--t-md)/1.2 var(--ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardfoot .cta.ghost {
  flex: 0 1 auto;
  padding: 0 var(--s4);
  background: var(--fill2);
  color: var(--text);
}

.cardfoot .cta.ghost .glyph { color: var(--subtitle); }

.cardfoot .cta.icon {
  flex: 0 0 48px;
  width: 48px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

.cardfoot .cta.icon.on { color: var(--brand-c-lit); }

.cardfoot .cta.favwide {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--fill2);
  color: var(--text);
  transition: color var(--d-tap) var(--ease-std), box-shadow var(--d-tap) var(--ease-std);
}

.cardfoot .cta.favwide .glyph {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--subtitle);
}

.cardfoot .cta.favwide .txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cardfoot .cta.favwide.on {
  color: var(--brand-c-lit);
  box-shadow: inset 0 0 0 1px rgba(255, 93, 177, .45);
}

.cardfoot .cta.favwide.on .glyph { color: var(--brand-c-lit); }

.cardfoot .cta.start { flex: 1 0 100%; }

.cardfoot .cta.wide { flex: 1 0 100%; }

.cardfoot .cta.contbot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  gap: var(--s2);
  color: #fff;
  
  background:
    linear-gradient(var(--grad-angle),
      var(--brand-a-lit), var(--brand-b-lit) 52%, var(--brand-c-lit));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .18) inset,
    0 1px 0 rgba(255, 255, 255, .28) inset,
    0 6px 18px -4px rgba(154, 108, 255, .55),
    0 0 24px -2px rgba(255, 93, 177, .40);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
  animation: contbotGlow 3.2s ease-in-out infinite;
}

.cardfoot .cta.contbot::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 22% 30%, rgba(255, 255, 255, .34), transparent 70%),
    radial-gradient(closest-side at 80% 80%, rgba(255, 236, 250, .22), transparent 70%);
}

.cardfoot .cta.contbot::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -60%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 0%, rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, 0) 70%, transparent 100%);
  transform: skewX(-18deg);
  animation: contbotSheen 3.2s ease-in-out infinite;
}

.cardfoot .cta.contbot:active {
  opacity: 1;
  filter: brightness(.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .18) inset,
    0 3px 10px -3px rgba(154, 108, 255, .5);
}

@keyframes contbotGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .18) inset,
      0 1px 0 rgba(255, 255, 255, .28) inset,
      0 6px 18px -4px rgba(154, 108, 255, .55),
      0 0 24px -2px rgba(255, 93, 177, .40);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, .22) inset,
      0 1px 0 rgba(255, 255, 255, .32) inset,
      0 8px 24px -4px rgba(154, 108, 255, .70),
      0 0 34px 0 rgba(255, 93, 177, .55);
  }
}

@keyframes contbotSheen {
  0%       { left: -60%; }
  45%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .cardfoot .cta.contbot { animation: none; }
  .cardfoot .cta.contbot::after { display: none; }
}

.cardfoot .cta.contbot .ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .55));
}

.cardfoot .cta.contbot .ic svg { width: 20px; height: 20px; display: block; }

.cardfoot .cta.contbot .txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
}

.cardfoot .cta:active { opacity: .82; }

.rate {
  margin: var(--s3) var(--gutter);
  padding: var(--s3);
  background: var(--section);
  border-radius: var(--r-section);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.rate .lbl {
  font: 600 var(--t-sm)/1.3 var(--ui);
  color: var(--sechead);
}

.ratingline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s1);
  row-gap: 2px;
  margin: var(--s2) var(--gutter) 0;
  font: 500 var(--t-sm)/1.35 var(--ui);
  font-variant-numeric: tabular-nums;
}

.ratingline .agg {
  color: var(--subtitle);
  unicode-bidi: isolate;
}

.ratingline .sep { color: var(--hint); }

.ratingline .mine {
  color: var(--hint);
  unicode-bidi: isolate;
}

.ratestars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s2);
  margin: 2px var(--gutter) 0;
}

.ratestars .stars {
  display: inline-flex;
  gap: 2px;
}

.ratestars .stars button {
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--hint);
  cursor: pointer;
}

.ratestars .stars button.lit { color: var(--star); }

.ratestars .stars[aria-disabled="true"] button { opacity: .6; }

.ratestars .cap {
  font: 500 var(--t-sm)/1.3 var(--ui);
  color: var(--hint);
}

.rate .agg {
  font: 600 var(--t-sm)/1.3 var(--ui);
  color: var(--subtitle);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.rate .agg.empty { display: none; }

.rate .agg.modpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 9px;
  border-radius: var(--r-chip);
  background: var(--fill2);
  color: var(--subtitle);
  font: 600 var(--t-xs)/1.4 var(--ui);
  unicode-bidi: plaintext;
}

.rate .agg.modpill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hint);
  flex: 0 0 auto;
}

.rate .agg.modpill[data-state="catalog"]::before { background: var(--ok); }
.rate .agg.modpill[data-state="linkonly"]::before { background: var(--star); }
.rate .agg.modpill[data-state="pending"]::before { background: var(--accent); }
.rate .agg.modpill[data-state="blocked"]::before { background: var(--destructive); }

.modbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s3);
  border-radius: var(--r-btn);
  border: 1px solid var(--separator);
  background: transparent;
  color: var(--text);
  font: 600 var(--t-md)/1.2 var(--ui);
  text-align: center;
  transition: background-color var(--d-tap) var(--ease-std);
}

.modbtn .glyph { font-size: 18px; line-height: 1; }
.modbtn:active { background: var(--press); }
.modbtn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.modbtn.danger {
  color: var(--destructive);
  border-color: var(--destructive);
}

@supports (color: color-mix(in srgb, red, blue)) {
  .modbtn.danger { border-color: color-mix(in srgb, var(--destructive) 55%, transparent); }
  .modrow .modbtn.danger { background: color-mix(in srgb, var(--destructive) 12%, transparent); }
}

.modask {
  font: 400 var(--t-md)/1.35 var(--ui);
  color: var(--text);
  unicode-bidi: plaintext;
}

.modrow { display: flex; gap: var(--s2); }
.modrow .modbtn { flex: 1 1 0; min-width: 0; }

.rate .agg.modhint {
  font: 400 var(--t-xs)/1.4 var(--ui);
  color: var(--hint);
  unicode-bidi: plaintext;
}

.modbtn.plain { color: var(--text); }

.delsheet {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: var(--s2) var(--gutter) var(--s5);
}

.delsheet .delcard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s3);
  border-radius: var(--r-section);
  background: var(--section);
}

.delsheet .deltarget {
  font: 700 var(--t-lg)/1.25 var(--ui);
  color: var(--text);
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}

.delsheet .delid {
  font: 500 var(--t-xs)/1.35 var(--ui);
  color: var(--hint);
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

.delsheet p {
  margin: 0;
  font: 400 var(--t-md)/1.4 var(--ui);
  color: var(--subtitle);
  unicode-bidi: plaintext;
}

.delsheet p.delwarn {
  font-weight: 600;
  color: var(--destructive);
}

.delsheet .delask {
  font: 600 var(--t-md)/1.35 var(--ui);
  color: var(--text);
  unicode-bidi: plaintext;
}

.delsheet .delask bdi {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.delsheet .delrow { display: flex; }

.delfield {
  inline-size: 6.5em;
  min-height: 44px;
  padding-inline: var(--s3);
  border: 1px solid var(--separator);
  border-radius: var(--r-btn);
  background: var(--fill);
  color: var(--text);
  font: 600 var(--t-lg)/1.2 var(--ui);
  font-variant-numeric: tabular-nums;
  text-align: center;
  unicode-bidi: isolate;
}

.delfield[readonly] { opacity: .6; }

.delsheet .delnote {
  font: 500 var(--t-sm)/1.35 var(--ui);
  color: var(--subtitle);
  unicode-bidi: plaintext;
}

.delsheet .delnote.bad { color: var(--destructive); }

.group {
  margin: var(--s3) var(--gutter);
  background: var(--section);
  border-radius: var(--r-section);
  overflow: hidden;
}

.lrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 48px;
  padding: 10px var(--s3);
  text-align: start;
}

.lrow + .lrow { box-shadow: inset 0 .5px 0 var(--separator); }
.lrow:active { background: var(--press); }

.lrow .k {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 var(--t-body)/1.3 var(--ui);
  color: var(--text);
  unicode-bidi: plaintext;
}

.lrow .v {
  flex: 0 0 auto;
  font: 600 var(--t-md)/1.3 var(--ui);
  color: var(--hint);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.lrow .chev {
  flex: 0 0 auto;
  color: var(--hint);
  font-size: var(--t-md);
}

[dir="rtl"] .lrow .chev { transform: scaleX(-1); }

.wallet {
  margin: var(--s3) var(--gutter);
  padding: var(--s4);
  background: var(--section);
  border-radius: var(--r-section);
}

.wallet .amount {
  font: 700 var(--t-2xl)/1.1 var(--ui);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  color: var(--text);
}

.wallet .lbl {
  display: block;
  font: 600 var(--t-2xs)/1.25 var(--ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sechead);
  margin-bottom: 4px;
}

.mehead {
  padding: var(--s5) var(--gutter) 0;
}

.mehead h1 {
  margin: 0;
  font: 700 var(--t-xl)/1.15 var(--ui);
  unicode-bidi: plaintext;
}

.mehead .meta {
  margin-top: 2px;
  font: 400 var(--t-sm)/1.4 var(--ui);
  color: var(--subtitle);
  unicode-bidi: plaintext;
}

.day {
  padding: var(--s3);
  box-shadow: inset 0 .5px 0 var(--separator);
}

.day:first-child { box-shadow: none; }

.day .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  font: 600 var(--t-md)/1.3 var(--ui);
}

.day .date { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }

.day .sums {
  font: 600 var(--t-sm)/1.3 var(--ui);
  color: var(--subtitle);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.day .bks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.bk {
  padding: 2px 8px;
  border-radius: var(--r-chip);
  background: var(--fill);
  color: var(--hint);
  font: 600 var(--t-2xs)/1.5 var(--ui);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.lane {
  margin: var(--s3) var(--gutter);
  padding: var(--s5) var(--s4);
  border: 1px dashed var(--separator);
  border-radius: var(--r-section);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  color: var(--subtitle);
}

.lane .t {
  font: 600 var(--t-body)/1.3 var(--ui);
  color: var(--text);
}

.lane .soon {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: var(--r-chip);
  background: var(--fill);
  color: var(--hint);
  font: 700 var(--t-2xs)/1.5 var(--ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sheethead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--gutter) var(--s2);
}

.sheethead .t {
  flex: 1 1 auto;
  min-width: 0;
  font: 700 var(--t-lg)/1.2 var(--ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheethead .backbtn { margin-inline-start: calc(var(--s1) * -1); }

.radio {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 48px;
  padding: 10px var(--s3);
  text-align: start;
}

.radio + .radio { box-shadow: inset 0 .5px 0 var(--separator); }
.radio .k {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 400 var(--t-body)/1.3 var(--ui);
}

.radio .k .cap {
  font: 400 var(--t-xs)/1.35 var(--ui);
  color: var(--subtitle);
  unicode-bidi: plaintext;
}
.radio .mark { flex: 0 0 auto; color: var(--accent); font-size: var(--t-md); opacity: 0; }
.radio[aria-checked="true"] .mark { opacity: 1; }

.row .side .fav {
  position: static;
  width: 32px;
  height: 32px;
  font-size: 17px;
  color: inherit;
  text-shadow: none;
}

.recentrow { display: none; }
.screen.searching .recentrow { display: flex; }
.chip.ghost {
  background: transparent;
  border: 1px solid var(--separator);
  color: var(--subtitle);
  font-weight: 400;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 30px;
}

.crhead {
  padding: var(--s4) var(--gutter) 0;
}

.crhead .top {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.crhead .plate {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--r-plate);
}

.crhead .who {
  flex: 1 1 auto;
  min-width: 0;
}

.crhead h1 {
  margin: 0;
  font: 700 var(--t-xl)/1.15 var(--ui);
  overflow-wrap: break-word;
  unicode-bidi: plaintext;
}

.crbadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.crbadge {
  padding: 2px 8px;
  border-radius: var(--r-chip);
  background: var(--fill2);
  color: var(--text);
  font: 700 var(--t-2xs)/1.5 var(--ui);
  unicode-bidi: plaintext;
}

.crstats {
  margin-top: 4px;
  font: 400 var(--t-sm)/1.4 var(--ui);
  color: var(--subtitle);
  font-variant-numeric: tabular-nums;
  unicode-bidi: plaintext;
}

.crbio {
  margin: var(--s3) 0 0;
  padding: var(--s3);
  background: var(--section);
  border-radius: var(--r-section);
  font: 400 var(--t-md)/1.45 var(--ui);
  color: var(--text);
  
  white-space: pre-wrap;
  overflow-wrap: break-word;
  unicode-bidi: plaintext;
}

.crtopbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--s2);
  padding: 6px var(--s3);
}

.crtopspacer { display: block; }

.crtitle {
  min-width: 0;                 
  text-align: center;
  font: 700 var(--t-md)/1.2 var(--ui);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
  opacity: 0;
  transition: opacity var(--d-rail) var(--ease-std);
}

.crtitle.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .crtitle { transition: none; }
}

.crtopbar .backdisc {
  position: static;
  width: 44px;
  height: 44px;
  background: var(--fill2);
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--link);
}

.crtopbar .backdisc:active { background: var(--press); transform: scale(.94); }

.crlinks { display: block; }
.crlinks:empty { display: none; }

.crexits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  padding: var(--s2) var(--gutter) 0;
}

.crexit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 56px;
  padding: 10px var(--s3) 12px;
  border-radius: var(--r-section);
  background: var(--section);
  text-align: start;
}

.crexit:active { background: var(--press); }

.crexit .ic {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--fill2);
  color: var(--accent);
  line-height: 0;
}

.crexit .ic svg { width: 19px; height: 19px; display: block; }

.crexit .v {
  min-width: 0;
  font: 600 var(--t-sm)/1.3 var(--ui);
  color: var(--text);
  overflow-wrap: break-word;
  unicode-bidi: plaintext;
}

.crcontrols {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-top: var(--s3);
}

.crsearchrow {
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
}

.sortrow.crshelfsort {
  height: auto;
  max-height: none;
  padding-block: 2px var(--s1);
}

.hero .overlay .by.tap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  margin-top: 6px;
  min-height: 32px;
  padding: 0 6px 0 11px;
  border-radius: var(--r-chip);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #fff;
  font: 500 var(--t-sm)/1.3 var(--ui);
  text-align: start;
  text-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--d-tap) var(--ease-std);
}

[dir="rtl"] .hero .overlay .by.tap { padding: 0 11px 0 6px; }

.hero .overlay .by.tap.pic { padding-inline-start: 5px; }
.hero .overlay .by.tap .ava {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  
  object-position: 50% var(--art-anchor);
  margin-inline-end: 6px;
  opacity: 0;
  transition: opacity var(--d-fade, .2s) var(--ease-std, ease);
}
.hero .overlay .by.tap .ava.on { opacity: 1; }
.hero .overlay .by.tap .ava:not(.on) { width: 0; margin-inline-end: 0; }

.hero .overlay .by.tap .txt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.hero .overlay .by.tap .chev { color: rgba(255, 255, 255, .8); }
.hero .overlay .by.tap .chev svg { width: 14px; height: 14px; }
.hero .overlay .by.tap:active { background: rgba(255, 255, 255, .3); }

.crshead { padding: var(--s5) var(--gutter) 0; }

.crshead h1 {
  margin: 0;
  font: 700 var(--t-xl)/1.15 var(--ui);
  unicode-bidi: plaintext;
}

.crsortrow { padding: 0 var(--gutter) var(--s2); }

.screen.searching .crsortrow { display: none; }

.seg.text { display: flex; width: 100%; }

.seg.text button {
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  padding-inline: 8px;
  font: 600 var(--t-sm)/1.2 var(--ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.seg.text .ink { width: calc((100% - 4px) / 3); }

.mdisc {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad-plate);
  color: rgba(255, 255, 255, .92);
  font: 700 var(--t-lg)/1 var(--display);
  user-select: none;
  -webkit-user-select: none;
}

.mdisc.big { width: 64px; height: 64px; font-size: var(--t-2xl); }

.mdisc { position: relative; overflow: hidden; }
.mdisc img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  
  object-position: 50% var(--art-anchor);
  opacity: 0;
  transition: opacity var(--d-fade, .2s) var(--ease-std, ease);
}
.mdisc img.on { opacity: 1; }

.crlist { margin-top: 0; }

.crrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 60px;
  padding: 8px var(--s3);
  text-align: start;
  transition: background-color var(--d-tap) var(--ease-std);
}

.crrow + .crrow { box-shadow: inset 0 .5px 0 var(--separator); }
button.crrow:active { background: var(--press); }
.crrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.crrow .body { flex: 1 1 auto; min-width: 0; }

.crrow .name {
  display: block;
  font: 600 var(--t-body)/1.25 var(--ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.crrow .sub {
  display: block;
  margin-top: 2px;
  font: 400 var(--t-sm)/1.35 var(--ui);
  color: var(--subtitle);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.crrow .side {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.crrow .side .badge { margin-inline-start: 0; }

@supports (color: color-mix(in srgb, red, blue)) {
  .crrow .side .badge {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--accent);
  }
}

.crrow .sk-plate {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  aspect-ratio: auto;
  border-radius: 50%;
}

.crrow.sk .sk-line:first-child { margin-top: 0; }

.botrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 68px;
  padding: 10px var(--s3);
  text-align: start;
}

.botrow + .botrow { box-shadow: inset 0 .5px 0 var(--separator); }
.botrow:active { background: var(--press); }

.botrow .plate {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--r-thumb);
}

.botrow .body { flex: 1 1 auto; min-width: 0; }

.botrow .name {
  display: block;
  font: 600 var(--t-body)/1.25 var(--ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}

.botrow .sub {
  display: block;
  margin-top: 2px;
  font: 400 var(--t-sm)/1.35 var(--ui);
  color: var(--subtitle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.botrow .side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s1);
}

.reach {
  padding: 2px 8px;
  border-radius: var(--r-chip);
  background: var(--fill);
  color: var(--hint);
  font: 600 var(--t-2xs)/1.5 var(--ui);
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.botrow .side .langpill {
  padding: 2px 6px;
  border-radius: var(--r-chip);
  background: var(--fill);
  color: var(--hint);
  font: 600 var(--t-2xs)/1.5 var(--ui);
  letter-spacing: .06em;
  unicode-bidi: isolate;
}

.invite {
  margin: var(--s5) var(--gutter);
}

.invite h1 {
  margin: 0;
  font: 700 var(--t-xl)/1.15 var(--ui);
  unicode-bidi: plaintext;
}

.invite p {
  margin: var(--s2) 0 0;
  font: 400 var(--t-md)/1.45 var(--ui);
  color: var(--subtitle);
  unicode-bidi: plaintext;
}

.linkfield {
  display: block;
  width: 100%;
  margin-top: var(--s4);
  padding: 12px var(--s3);
  border: 1px solid var(--separator);
  border-radius: var(--r-btn);
  background: var(--section);
  color: var(--text);
  font: 400 var(--t-sm)/1.4 var(--ui);
  text-overflow: ellipsis;
  
  unicode-bidi: isolate;
}

.invite .acts {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
}

.invite .notice { margin-inline: 0; }

.tail > .act {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: var(--s3);
}

.foot { margin: 18px 0 6px; text-align: center; font-size: 12px; color: var(--hint); }
.foot a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

.sitefoot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 6px 18px;
  margin: 28px 16px 0;
  padding: 15px 0 22px;
  border-top: 1px solid var(--fill);
  font: 400 var(--t-sm)/1.5 var(--ui);
  color: var(--hint);
}
.sitefoot a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  max-width: 100%;
}
.sitefoot a:hover,
.sitefoot a:focus-visible { color: var(--text); }
.character-layout > .sitefoot { grid-column: 1 / -1; }

.language-switch {
  margin-inline-start: auto;
  flex: 0 0 auto;
  padding: 9px 12px;
  min-height: 44px;
  border-radius: var(--r-chip);
  background: var(--fill);
  color: var(--text);
  font: 500 var(--t-sm)/1.2 var(--ui);
  cursor: pointer;
}
.brandrow { flex-wrap: wrap; gap: 8px; }
.character-content { min-width: 0; }
:where(button, a, input):focus-visible { outline: 2px solid var(--link, #9575ff); outline-offset: 3px; }
@media (min-width: 640px) {
  .grid[data-density="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero .plate.sq { max-height: 480px; aspect-ratio: auto; height: 480px; }
  .screen[data-kind="sheet"] { max-width: 560px; margin-inline: auto; }
}
@media (min-width: 960px) {
  #app { max-width: 1320px; margin-inline: auto; border-inline: 1px solid var(--fill); }
  .grid[data-density="grid"] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .grid.recs[data-density="grid"] .card,
  .grid.sim[data-density="grid"] .card { flex-basis: 180px; }
  .character-layout {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    padding: 24px;
  }
  .character-layout .hero { position: sticky; top: 0; border-radius: 24px; overflow: hidden; }
  .character-layout .hero .plate.sq { height: auto; max-height: none; aspect-ratio: 3 / 4; }
  .character-content > .stats { margin-top: 0; }
  .character-content .prose { max-width: 70ch; }
}
@media (min-width: 1200px) {
  .grid[data-density="grid"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .screen.enter, .screen.leave { animation-duration: 1ms !important; }
}
.catalog-language {
  min-width: 0;
  max-width: 200px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--fill2);
  border-radius: var(--r-chip);
  background: var(--section);
  color: var(--text);
  font: 500 var(--t-sm)/1.2 var(--ui);
  cursor: pointer;
}
@media (max-width: 639px) {
  .brandrow .sub { order: 3; flex-basis: 100%; }
}
html, body { background: #0e1020; }

#app[data-noback="1"] .screen[data-kind="root"]:not(.dived) > .backrow { display: none; }
.chip[hidden] { display: none; }

.author-entry { border: 1px solid var(--separator); border-radius: 999px; padding: 9px 14px;
  background: var(--section); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.own-characters { padding: 24px clamp(16px, 3vw, 36px) 40px; }
.own-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.own-head h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); }
.own-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 24px 0 12px; }
.own-search, .own-select select { min-height: 44px; border: 1px solid var(--separator); border-radius: 12px;
  color: var(--text); background: var(--section); padding: 10px 12px; font: inherit; width: 100%; }
.own-search { flex: 1 1 240px; width: auto; min-width: 0; }
.own-select { display: grid; gap: 5px; flex: 0 1 200px; min-width: 130px; font-size: 13px; }
.own-count { color: var(--hint); font-size: 13px; min-height: 24px; margin-bottom: 12px; }
.own-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,340px),1fr)); gap: 16px; }
.own-card { min-width: 0; padding: 16px; border: 1px solid var(--separator); border-radius: 18px;
  background: var(--section); display: flex; flex-direction: column; gap: 12px; }
.own-preview { display: flex; gap: 14px; text-align: start; width: 100%; border: 0; padding: 0;
  background: transparent; color: inherit; font: inherit; cursor: pointer; }
.own-preview .plate { width: 72px; height: 88px; flex: 0 0 72px; border-radius: 12px; aspect-ratio: auto; }
.own-info { min-width: 0; }
.own-info h2 { margin: 0 0 5px; font-size: 17px; overflow-wrap: anywhere; }
.own-description { margin: 0 0 6px; font-size: 13px; color: var(--hint); display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.own-id { font-size: 12px; color: var(--hint); }
.own-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.own-badges .badge { padding: 4px 8px; border-radius: 8px; background: var(--bg); font-size: 12px; }
.own-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.own-actions button { flex: 1; min-height: 42px; font-size: 13px; }
@media (max-width: 520px) {
  .own-select { flex: 1 1 130px; }
  .own-head > button { width: 100%; }
  .author-entry { padding: 8px 10px; }
}

#app .grid.recs[data-density="grid"] .card {
  display: flex; flex-direction: column; background: var(--section);
  content-visibility: visible; contain-intrinsic-size: none;
}
#app .grid.recs[data-density="grid"] .card .plate { width: 100%; flex: none; aspect-ratio: 1 / 1; }
#app .grid.recs[data-density="grid"] .card .meat {
  position: static; padding: 10px 10px 12px; text-align: start;
}
#app .grid.recs[data-density="grid"] .card .name { color: var(--text); text-shadow: none; font-size: 14px; }
#app .grid.recs[data-density="grid"] .card .blurb {
  color: var(--subtitle); text-shadow: none; font-size: 12px; -webkit-line-clamp: 2;
}
#app .grid.recs[data-density="grid"] .card .metarow { color: var(--hint); }
#app .grid.recs[data-density="grid"] .card .tagrow { display: none; }
#app .plate .foot { margin: 0; min-height: 20px; bottom: 8px; }
#app .grid:not(.recs)[data-density="grid"] .card .meat { padding-bottom: 36px; }
#app .simwrap { margin-top: 16px; padding-top: 12px; }
#app .simwrap .recshead .eyebrow { padding-block: 0 6px; }
#app .simwrap .grid.sim { padding-top: 0; align-items: stretch; }

.own-bots-help { color: var(--hint); font-size: 14px; margin-block: 8px 20px; }
.own-bot-card h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.own-bot-card > .badge { align-self: flex-start; font-size: 12px; padding: 4px 8px; border-radius: 8px; background: var(--bg); }
.own-bot-character { margin: 0; color: var(--hint); overflow-wrap: anywhere; }

.crlinks .alsobot .v { white-space: normal; overflow: visible; }

.scroller.cp { padding-bottom: var(--s10); }
.cp-body { display: flex; flex-direction: column; padding: 0 0 var(--s6); }
.cp-body > .state { margin-top: var(--s6); }
.cp-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: var(--s2) var(--gutter) var(--s2);
}
.cp-hero h1 {
  margin: 6px 0 0; max-width: 100%;
  font: 700 var(--t-xl)/1.2 var(--ui); color: var(--text);
  overflow-wrap: anywhere; unicode-bidi: plaintext;
}
.cp-ava {
  position: relative; width: 96px; height: 96px; padding: 0; border-radius: 50%;
  background: none; line-height: 0;
}
.cp-ava .mdisc.big { width: 96px; height: 96px; font-size: 40px; }
.cp-ava:active .mdisc { opacity: .85; }
.cp-ava.busy .mdisc { opacity: .5; }
.cp-cam {
  position: absolute; inset-inline-end: 0; bottom: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--btn); color: var(--btn-text);
  box-shadow: 0 0 0 3px var(--bg2);
}
.cp-status { display: flex; gap: 6px; justify-content: center; }
.cp-pill {
  padding: 3px 10px; border-radius: var(--r-chip);
  background: var(--fill2); color: var(--hint);
  font: 600 var(--t-xs)/1.4 var(--ui);
}
.cp-pill.on { background: color-mix(in srgb, var(--ok, #34c759) 16%, transparent); color: var(--ok, #34c759); }
.cp-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2);
  width: 100%; max-width: 360px; margin-top: var(--s2);
}
.cp-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s2) var(--s2); border-radius: var(--r-section); background: var(--section);
}
.cp-stat b { font: 700 var(--t-lg)/1.15 var(--ui); color: var(--text); font-variant-numeric: tabular-nums; unicode-bidi: isolate; overflow-wrap: anywhere; max-width: 100%; }
.cp-stat span { font: 400 var(--t-xs)/1.3 var(--ui); color: var(--hint); }
.cp-link {
  margin-top: var(--s1); padding: 6px 10px; border-radius: var(--r-btn);
  background: none; color: var(--link); font: 600 var(--t-md)/1.2 var(--ui);
}
.cp-link:active { background: var(--press); }
.cp-center { text-align: center; max-width: 320px; }
.cp-eyebrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); padding-top: var(--s5); }
.cp-eyebrow-aside { letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--hint); font-variant-numeric: tabular-nums; }
.cp-group { margin-top: var(--s1); margin-bottom: 0; }
.cp-foot {
  margin: 6px var(--gutter) 0; padding: 0 var(--s3);
  font: 400 var(--t-xs)/1.4 var(--ui); color: var(--hint); unicode-bidi: plaintext;
}
.cp-shared { text-align: center; }
@media (min-width: 960px) {
  .cp-body { width: 100%; max-width: 960px; margin-inline: auto; }
  .cp-shared { max-width: 640px; margin-inline: auto; }
}
.cp-empty { margin: 0; padding: var(--s3); font: 400 var(--t-sm)/1.4 var(--ui); color: var(--hint); }
.cp-row { cursor: pointer; }
.cp-row .k { display: flex; flex-direction: column; gap: 2px; }
.cp-row.off { opacity: .45; }
.cp-row.off .cp-sw { pointer-events: none; }
.cp-help { font: 400 var(--t-xs)/1.35 var(--ui); color: var(--hint); unicode-bidi: plaintext; }
.cp-field { display: flex; flex-direction: column; gap: 6px; padding: 10px var(--s3); }
.cp-field + .cp-field, .lrow + .cp-field, .cp-field + .lrow { box-shadow: inset 0 .5px 0 var(--separator); }
.cp-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.cp-label { font: 600 var(--t-xs)/1.3 var(--ui); color: var(--hint); }
.cp-count { font: 400 var(--t-xs)/1.3 var(--ui); color: var(--hint); font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.cp-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border-radius: 10px; border: 1px solid transparent; background: var(--fill);
  color: var(--text); font: 400 var(--t-body)/1.35 var(--ui);
  -webkit-appearance: none; appearance: none;
}
.cp-input:focus { outline: none; border-color: var(--link); background: transparent; }
.cp-input::placeholder { color: var(--hint); opacity: .8; }
.cp-textarea { resize: vertical; min-height: 104px; }

.cp-sw {
  flex: 0 0 auto; position: relative; width: 51px; height: 31px; margin: 0;
  border-radius: 999px; background: var(--fill2); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background var(--d-state, .2s) var(--ease-std, ease);
}
.cp-sw::after {
  content: ''; position: absolute; top: 2px; inset-inline-start: 2px;
  width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  transition: transform var(--d-state, .2s) var(--ease-std, ease);
}
.cp-sw:checked { background: var(--btn); }
.cp-sw:checked::after { transform: translateX(20px); }
[dir="rtl"] .cp-sw:checked::after { transform: translateX(-20px); }
.cp-sw:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.cp-feat { gap: var(--s3); }
.cp-feat .k { font: 400 var(--t-md)/1.3 var(--ui); overflow: hidden; unicode-bidi: normal; }
.cp-feat .k bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-thumb {
  position: relative; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-thumb);
  overflow: hidden; display: grid; place-items: center;
  background: var(--grad-plate); color: rgba(255, 255, 255, .92);
  font: 700 var(--t-md)/1 var(--display);
}
.cp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cp-lang {
  flex: 0 0 auto; padding: 2px 6px; border-radius: var(--r-chip);
  background: var(--fill); color: var(--hint);
  font: 600 var(--t-2xs)/1.5 var(--ui); letter-spacing: .06em; unicode-bidi: isolate;
}
.cp-mark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px var(--fill2);
  font: 700 var(--t-sm)/1 var(--ui); color: var(--btn-text);
}
.cp-mark.on { background: var(--btn); box-shadow: none; }
.cp-danger .k { color: var(--destructive); font-weight: 500; }
.cp-doors { padding-top: var(--s5); }
.cp-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); margin: var(--s5) var(--gutter) 0; }
.cp-link-card {
  min-width: 0; padding: var(--s3); border: 1px solid var(--separator);
  border-radius: var(--r-section); background: var(--section);
  display: flex; flex-direction: column; align-items: stretch; gap: var(--s2);
}
.cp-link-head { display: flex; align-items: center; gap: var(--s2); }
.cp-link-head h2 { min-width: 0; margin: 0; font: 600 var(--t-md)/1.35 var(--ui); color: var(--text); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.cp-link-icon { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--link); background: var(--fill); font: 600 var(--t-lg)/1 var(--ui); }
.cp-link-help { margin: 0; color: var(--hint); font: 400 var(--t-xs)/1.5 var(--ui); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.cp-link-state, .cp-resource-value { font: 500 var(--t-xs)/1.5 var(--ui); color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.cp-link-card .cp-field { padding: var(--s1) 0; box-shadow: none; }
.cp-resource-status { align-self: flex-start; padding: 4px 9px; border-radius: var(--r-chip); font: 600 var(--t-xs)/1.4 var(--ui); color: var(--hint); background: var(--fill); overflow-wrap: anywhere; }
.cp-resource-status.approved { color: var(--ok, #34c759); background: color-mix(in srgb, var(--ok, #34c759) 12%, transparent); }
.cp-resource-status.rejected { color: var(--destructive); }
.cp-resource-private, .cp-resource-review { padding-inline-start: var(--s2); border-inline-start: 2px solid var(--separator); }
.cp-link-card .cp-link { align-self: flex-start; margin: 0; min-height: 44px; text-align: start; }
.cp-link-card .cp-danger { color: var(--destructive); }
.cp-link-card button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.cp-link-card button:disabled { opacity: .45; cursor: default; }
.cp-input[aria-invalid="true"] { border-color: var(--destructive); }
@media (min-width: 720px) { .cp-links { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.cp-skel { padding-top: var(--s4); }
.cp-skel-disc { width: 96px; height: 96px; border-radius: 50%; background: var(--skel, var(--fill2)); }
.cp-skel-line { width: 180px; height: 18px; border-radius: 6px; background: var(--skel, var(--fill2)); }
.cp-skel-line.short { width: 110px; }

.chip-adult {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: var(--r-chip);
  border: 1px solid var(--separator);
  background: var(--fill);
  color: var(--hint);
  font: 700 var(--t-2xs)/1.35 var(--ui);
  letter-spacing: .04em;
  white-space: nowrap;
  unicode-bidi: isolate;
}

.hero .overlay .badge.adult { letter-spacing: .04em; }

.tile .name .chip-adult { margin-inline-start: 4px; vertical-align: middle; }

.gatebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 6px var(--gutter);
  background: var(--fill);
  color: var(--subtitle);
  font: 400 var(--t-xs)/1.35 var(--ui);
}

.gatebar .txt {
  flex: 1 1 auto;
  min-width: 0;
  unicode-bidi: plaintext;
}

.gatebar .chip-adult.tap {
  min-height: 28px;
  padding-inline: 10px;
  color: var(--text);
  background: var(--fill2);
}

.gatebar .chip-adult.tap:active { background: var(--press); }

.gatesheet {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin: var(--s2) var(--gutter) var(--s5);
}

.gatesheet .gatetext {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gatesheet p {
  margin: 0;
  font: 400 var(--t-md)/1.45 var(--ui);
  color: var(--text);
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
}

.gatesheet p.gatenote {
  font: 500 var(--t-sm)/1.4 var(--ui);
  color: var(--subtitle);
}

.gaterow {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s2);
}

.gaterow .cta {
  min-height: 48px;
  padding: 0 var(--s3);
  border-radius: var(--r-btn);
  background: var(--grad-cta);
  color: #fff;
  font: 600 var(--t-md)/1.2 var(--ui);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.gaterow .cta.ghost {
  background: var(--fill2);
  color: var(--text);
}

.gaterow .cta[aria-disabled="true"] { opacity: .6; }
.gaterow .cta:active { opacity: .82; }

.gatestub { padding: 0 var(--gutter); }
.gatestub .state { padding: var(--s5) var(--s3); }