.rnb{--rnb-ink:#1d1d1b;--rnb-soft:#6f6a63;--rnb-line:#e6e1da;--rnb-bg:#faf8f5;--rnb-accent:#1d1d1b;padding:40px 0 64px;color:var(--rnb-ink)}
.rnb__wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start}
.rnb__preview{position:sticky;top:24px}
.rnb__stage{position:relative;background:var(--rnb-bg);border-radius:4px;aspect-ratio:1/1;display:flex;align-items:flex-start;justify-content:center;overflow:hidden}
.rnb__svg{width:100%;height:auto}
.rnb__svg .rnb-hang{cursor:pointer;transition:transform .25s ease}
.rnb__svg .rnb-hang:hover{opacity:.75}
.rnb__empty{position:absolute;bottom:18%;left:0;right:0;text-align:center;color:var(--rnb-soft);font-size:14px;margin:0}
.rnb__hint{font-size:13px;color:var(--rnb-soft);text-align:center;margin:10px 0 0}
.rnb__title{margin:0 0 8px}
.rnb__intro{color:var(--rnb-soft);margin-bottom:8px}
.rnb__step{border-top:1px solid var(--rnb-line);padding:22px 0}
.rnb__label{font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;display:flex;gap:6px;align-items:baseline}
.rnb__label em{font-style:normal;color:var(--rnb-soft);letter-spacing:0;text-transform:none;margin-left:auto;font-size:13px}
.rnb__metals{display:flex;gap:10px;flex-wrap:wrap}
.rnb__metal{display:flex;align-items:center;gap:10px;border:1px solid var(--rnb-line);background:#fff;padding:10px 14px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;color:inherit}
.rnb__metal[aria-checked="true"]{border-color:var(--rnb-accent);box-shadow:inset 0 0 0 1px var(--rnb-accent)}
.rnb__dot{width:18px;height:18px;border-radius:50%;flex:none}
.rnb__metal small{color:var(--rnb-soft)}
.rnb__tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:14px;scrollbar-width:none}
.rnb__tab{background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;font:inherit;font-size:14px;color:var(--rnb-soft);cursor:pointer;white-space:nowrap}
.rnb__tab[aria-selected="true"]{color:var(--rnb-ink);border-bottom-color:var(--rnb-ink)}
.rnb__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px}
.rnb__grid.is-letters{grid-template-columns:repeat(auto-fill,minmax(54px,1fr))}
.rnb__charm{background:#fff;border:1px solid var(--rnb-line);border-radius:4px;padding:10px 6px 8px;cursor:pointer;font:inherit;color:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;position:relative}
.rnb__charm:hover{border-color:#bdb5aa}
.rnb__charm:disabled{opacity:.4;cursor:not-allowed}
.rnb__charm img,.rnb__charm svg{width:58px;height:58px;object-fit:contain}
.is-letters .rnb__charm img,.is-letters .rnb__charm svg{width:44px;height:44px}
.rnb__charm b{font-weight:500;font-size:12.5px;line-height:1.25}
.rnb__charm span{font-size:11.5px;color:var(--rnb-soft)}
.rnb__charm em{font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--rnb-soft);margin-top:2px}
.rnb__charm i{position:absolute;top:4px;right:6px;font-style:normal;font-size:11px;background:var(--rnb-ink);color:#fff;border-radius:999px;min-width:16px;height:16px;line-height:16px;display:none}
.rnb__charm.has-count i{display:block}
.rnb__lines{list-style:none;margin:0 0 14px;padding:0;font-size:14px}
.rnb__lines li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--rnb-line)}
.rnb__lines button{background:none;border:0;color:var(--rnb-soft);cursor:pointer;font:inherit;font-size:12px;text-decoration:underline;padding:0 0 0 8px}
.rnb__total{display:flex;justify-content:space-between;font-size:18px;margin-bottom:16px}
.rnb__add{width:100%}
.rnb__add[disabled]{opacity:.5;cursor:not-allowed}
.rnb__msg{font-size:13px;color:#a12c2c;min-height:1em;margin:10px 0 0}
.rnb__note{font-size:13px;color:var(--rnb-soft);margin:6px 0 0}
@media (max-width:860px){
  .rnb__wrap{grid-template-columns:1fr;gap:20px}
  .rnb__preview{position:relative;top:0}
  .rnb__stage{aspect-ratio:4/3}
}