:root{
  --bg:#e6e2d8;
  --card:#f4f1ea;
  --ink:#17150f;
  --red:#c0392b;
  --orange:#d99a2b;
  --green:#2f8f5a;
  --blue:#2f6f8a;
  --brown:#a5642a;
  --muted:#7a7568;
  --muted2:#8a8477;
  --faint:#a29b8c;
  --line:rgba(0,0,0,.12);
  --line-soft:rgba(0,0,0,.09);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  font-family:'Space Grotesk',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brown)}
input,select,button{font-family:inherit}
input:focus,select:focus{outline:2px solid var(--red);outline-offset:1px}
::selection{background:var(--red);color:#fff}
input[type=range]{accent-color:var(--red)}
button{font-family:inherit}

.rc-scroll::-webkit-scrollbar{height:9px;width:9px}
.rc-scroll::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:5px}

@keyframes rcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes rcDrawer{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
@keyframes rcSpin{to{transform:rotate(360deg)}}
.rc-spin{animation:rcSpin .8s linear infinite;display:inline-block}

.rc-page{min-height:100vh;padding:28px 20px 80px;display:flex;justify-content:center}
.rc-wrap{width:100%;max-width:1120px}

.rc-thumb{
  width:46px;height:34px;border-radius:6px;overflow:hidden;flex:none;
  border:1px solid rgba(0,0,0,.14);
  background:repeating-linear-gradient(135deg,#e8e3d8 0 6px,#ded8cb 6px 12px);
  display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;
}
.rc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rc-thumb-retry{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(23,21,15,.55);color:#f4f1ea;font-size:11px;opacity:0;transition:opacity .15s;
}
.rc-thumb:hover .rc-thumb-retry{opacity:1}
.rc-thumb.is-error .rc-thumb-retry{opacity:1;background:rgba(192,57,43,.6)}

.rc-feat-big{width:64px;flex:none}
.rc-feat-big img{width:64px;height:48px;border-radius:8px;object-fit:cover;display:block;border:1px solid rgba(0,0,0,.14)}

.rc-row-mobile{display:none}

@media (max-width: 720px){
  .rc-page{padding:16px 10px 60px}
  .rc-header{flex-direction:column;align-items:flex-start !important}

  /* Table: swap the wide grid for a stacked-card row layout so nothing
     needs horizontal scrolling on a phone. */
  .rc-thead{display:none !important}
  .rc-table-inner{min-width:0 !important}
  .rc-row-desktop{display:none !important}
  .rc-row-mobile{display:block}

  .rc-drawer{padding:18px 16px 32px !important}
}

@media (max-width: 380px){
  .rc-feat-big{width:52px}
  .rc-feat-big img{width:52px;height:40px}
}