:root{--rcn-paper: #fcf7f0;--rcn-panel: #ffffff;--rcn-line: #eadfce;--rcn-ink: #2b2118;--rcn-muted: #6f6253;--rcn-ginger: #c2541b;--rcn-ginger-dark: #9a3f12;--rcn-cream: #f6ecdd;--rcn-gold: #e0a100;--rcn-radius: 18px;--primary: #c2541b;--primary-dark: #9a3f12;--border: #eadfce;--surface: #ffffff;--shadow-soft: 0 10px 26px rgba(43, 33, 24, 0.07);--surface-muted: #f8f1e7;--text-main: #2b2118;--text-muted: #6f6253;}
.rcn-sprite{position: absolute;width: 0;height: 0;overflow: hidden;}
[data-style]{--tone: #c2541b;--tone-soft: #fbe6d8;--tone-ink: #9a3f12;}
[data-style="sweet"]{--tone: #c2416b;--tone-soft: #fbe3ea;--tone-ink: #922a4d;}
[data-style="classic"]{--tone: #3b5b92;--tone-soft: #e3eaf6;--tone-ink: #27406b;}
[data-style="nature"]{--tone: #3f7d3a;--tone-soft: #e2f0df;--tone-ink: #2b5a27;}
[data-style="legend"]{--tone: #6b4fa0;--tone-soft: #ece6f7;--tone-ink: #4c3577;}
.rcn-board{background: var(--rcn-paper);border: 1px solid var(--rcn-line);border-radius: 26px;padding: 22px;margin: 8px 0 56px;color: var(--rcn-ink);box-shadow: 0 20px 44px rgba(43, 33, 24, 0.06);display: flex;flex-direction: column;gap: 18px;}
.rcn-bar{background: var(--rcn-panel);border: 1px solid var(--rcn-line);border-radius: var(--rcn-radius);padding: 16px 18px;}
.rcn-bar-head{display: flex;justify-content: flex-end;margin-bottom: 10px;}
.rcn-byline{display: flex;flex-wrap: wrap;gap: 4px 14px;font-size: 12px;color: var(--rcn-muted);}
.rcn-byline .author-link{color: var(--rcn-ginger-dark);font-weight: 600;text-decoration: none;}
.rcn-byline .author-link:hover{text-decoration: underline;}
.rcn-group{border: 0;margin: 0;padding: 0;min-width: 0;}
.rcn-group legend{font-size: 12px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;color: var(--rcn-muted);margin-bottom: 8px;float: none;width: auto;padding: 0;}
.rcn-group-style{margin-bottom: 16px;}
.rcn-style input,.rcn-seg input{position: absolute;opacity: 0;pointer-events: none;}
.rcn-styles{display: grid;grid-template-columns: repeat(6, minmax(0, 1fr));gap: 8px;}
.rcn-style{margin: 0;}
.rcn-style span{display: flex;flex-direction: column;gap: 2px;height: 100%;padding: 10px 12px;border: 1px solid var(--rcn-line);border-left: 4px solid var(--tone, var(--rcn-ink));border-radius: 12px;background: var(--rcn-paper);cursor: pointer;transition: background 0.15s, border-color 0.15s, color 0.15s;}
.rcn-style b{font-size: 15px;font-weight: 700;}
.rcn-style small{font-size: 12px;color: var(--rcn-muted);line-height: 1.3;}
.rcn-style:hover span{border-color: var(--tone, var(--rcn-ink));}
.rcn-style input:checked + span{background: var(--tone-soft, var(--rcn-cream));border-color: var(--tone, var(--rcn-ink));color: var(--tone-ink, var(--rcn-ink));box-shadow: inset 0 0 0 1px var(--tone, var(--rcn-ink));}
.rcn-style input:checked + span small{color: var(--tone-ink, var(--rcn-ink));}
.rcn-row{display: grid;grid-template-columns: auto auto 1fr;gap: 16px;align-items: end;}
.rcn-seg{display: inline-flex;flex-wrap: wrap;background: var(--rcn-cream);border-radius: 12px;padding: 4px;gap: 2px;}
.rcn-seg label{margin: 0;}
.rcn-seg span{display: block;padding: 8px 14px;border-radius: 9px;font-size: 14px;font-weight: 600;color: var(--rcn-muted);cursor: pointer;white-space: nowrap;}
.rcn-seg span small{font-weight: 500;font-size: 11px;}
.rcn-seg input:checked + span{background: #fff;color: var(--rcn-ink);box-shadow: 0 2px 6px rgba(43, 33, 24, 0.12);}
.rcn-style input:focus-visible + span,.rcn-seg input:focus-visible + span{outline: 3px solid var(--rcn-ginger);outline-offset: 2px;}
.rcn-go{display: flex;justify-content: flex-end;}
.rcn-draw{display: inline-flex;align-items: center;justify-content: center;gap: 10px;min-width: 220px;padding: 13px 22px;border: 0;border-radius: 14px;background: var(--rcn-ginger);color: #fff;font-size: 16px;font-weight: 700;cursor: pointer;transition: background 0.15s, transform 0.1s;}
.rcn-draw svg{width: 20px;height: 20px;fill: none;stroke: currentColor;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;}
.rcn-draw:hover{background: var(--rcn-ginger-dark);}
.rcn-draw:active{transform: translateY(1px);}
.rcn-draw:focus-visible{outline: 3px solid var(--rcn-ink);outline-offset: 2px;}
.rcn-draw:disabled{opacity: 0.7;cursor: wait;}
.rcn-draw.is-busy svg{animation: rcn-spin 0.6s linear infinite;}
.rcn-status{font-size: 13px;color: var(--rcn-muted);margin: 12px 0 0;min-height: 20px;}
.rcn-status.is-error{color: #b42318;font-weight: 600;}
.rcn-grid{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 14px;}
.rcn-tile{position: relative;background: var(--rcn-panel);border: 1px solid var(--rcn-line);border-radius: var(--rcn-radius);padding: 16px 18px 14px;display: flex;flex-direction: column;gap: 8px;overflow: hidden;transition: border-color 0.15s, box-shadow 0.15s;}
.rcn-tile::before{content: "";position: absolute;inset: 0 0 auto 0;height: 5px;background: var(--tone);}
.rcn-tile:hover{box-shadow: 0 8px 20px rgba(43, 33, 24, 0.08);}
.rcn-tile.is-kept{border-color: var(--rcn-gold);box-shadow: 0 0 0 1px var(--rcn-gold);}
.rcn-tile.is-new{animation: rcn-in 0.35s ease-out both;}
.rcn-tile-top{display: flex;align-items: center;justify-content: space-between;gap: 8px;}
.rcn-tag{display: inline-flex;padding: 3px 10px;border-radius: 999px;background: var(--tone-soft);color: var(--tone-ink);font-size: 12px;font-weight: 700;}
.rcn-keep{display: inline-flex;align-items: center;justify-content: center;width: 36px;height: 36px;border: 1px solid var(--rcn-line);border-radius: 50%;background: var(--rcn-panel);color: var(--rcn-muted);cursor: pointer;transition: background 0.15s, color 0.15s, border-color 0.15s;}
.rcn-keep svg{width: 18px;height: 18px;fill: none;stroke: currentColor;stroke-width: 1.8;stroke-linejoin: round;}
.rcn-keep:hover{border-color: var(--rcn-gold);color: #a87400;}
.rcn-keep[aria-pressed="true"]{background: #fff4d6;border-color: var(--rcn-gold);color: #a87400;}
.rcn-keep[aria-pressed="true"] svg{fill: var(--rcn-gold);}
.rcn-keep:focus-visible,.rcn-say:focus-visible{outline: 3px solid var(--rcn-ginger);outline-offset: 2px;}
.rcn-name{font-size: 28px;font-weight: 800;line-height: 1.15;margin: 2px 0 0;color: var(--rcn-ink);letter-spacing: -0.01em;overflow-wrap: anywhere;}
.rcn-pills{display: flex;flex-wrap: wrap;gap: 6px;margin: 0;}
.rcn-pills span{padding: 2px 9px;border-radius: 999px;background: var(--rcn-cream);font-size: 12px;font-weight: 600;color: var(--rcn-muted);}
.rcn-pills .rcn-coat{background: var(--rcn-ink);color: #fff;}
.rcn-note{margin: 0;font-size: 14px;line-height: 1.55;color: var(--rcn-ink);flex: 1;}
.rcn-say{align-self: flex-start;display: inline-flex;align-items: center;gap: 6px;padding: 5px 10px;margin-top: 2px;border: 0;border-radius: 8px;background: transparent;color: var(--tone-ink);font-size: 13px;font-weight: 700;cursor: pointer;}
.rcn-say svg{width: 16px;height: 16px;fill: none;stroke: currentColor;stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round;}
.rcn-say:hover{background: var(--tone-soft);}
.rcn-say.is-speaking{background: var(--tone-soft);}
.rcn-shelf{background: var(--rcn-panel);border: 1px dashed #d9c7ad;border-radius: var(--rcn-radius);padding: 14px 18px;}
.rcn-shelf-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 10px;}
.rcn-shelf-head h2{display: inline-flex;align-items: center;gap: 8px;font-size: 17px;font-weight: 800;margin: 0;}
.rcn-shelf-head h2 svg{width: 18px;height: 18px;fill: var(--rcn-gold);}
.rcn-shelf-head h2 span{display: inline-flex;align-items: center;justify-content: center;min-width: 24px;height: 24px;padding: 0 7px;border-radius: 999px;background: var(--rcn-cream);font-size: 13px;}
.rcn-shelf-tools{display: flex;gap: 8px;}
.rcn-ghost{display: inline-flex;align-items: center;gap: 8px;padding: 8px 13px;border: 1px solid var(--rcn-line);border-radius: 12px;background: var(--rcn-panel);color: var(--rcn-ink);font-weight: 600;font-size: 14px;cursor: pointer;}
.rcn-ghost svg{width: 16px;height: 16px;fill: none;stroke: currentColor;stroke-width: 2;}
.rcn-ghost:hover:not(:disabled){border-color: var(--rcn-ginger);}
.rcn-ghost:disabled{opacity: 0.5;cursor: default;}
.rcn-ghost.is-done{background: var(--rcn-ink);color: #fff;border-color: var(--rcn-ink);}
.rcn-ghost-quiet{color: var(--rcn-muted);}
.rcn-shelf-list{display: flex;flex-wrap: wrap;gap: 8px;list-style: none;margin: 12px 0 0;padding: 0;}
.rcn-shelf-list:empty{display: none;}
.rcn-kept{display: inline-flex;align-items: center;gap: 4px;padding: 5px 6px 5px 12px;border-radius: 999px;background: var(--tone-soft);color: var(--tone-ink);font-size: 14px;font-weight: 700;}
.rcn-kept button{display: inline-flex;align-items: center;justify-content: center;width: 22px;height: 22px;border: 0;border-radius: 50%;background: transparent;color: inherit;cursor: pointer;}
.rcn-kept button:hover{background: rgba(255, 255, 255, 0.7);}
.rcn-kept svg{width: 12px;height: 12px;fill: none;stroke: currentColor;stroke-width: 2.6;stroke-linecap: round;}
.rcn-shelf-empty{font-size: 13px;color: var(--rcn-muted);margin: 10px 0 0;}
.rcn-read,.rcn-limits{margin: 0 auto 48px;color: var(--rcn-ink);}
.rcn-read h2,.rcn-limits h2{font-size: 26px;font-weight: 800;margin-bottom: 12px;letter-spacing: -0.01em;}
.rcn-read p{font-size: 16px;line-height: 1.7;color: var(--rcn-ink);}
.rcn-steps{list-style: none;counter-reset: rcn-step;margin: 20px 0 0;padding: 0;display: flex;flex-direction: column;gap: 12px;}
.rcn-steps li{counter-increment: rcn-step;display: grid;grid-template-columns: 44px 1fr;column-gap: 14px;background: var(--rcn-paper);border: 1px solid var(--rcn-line);border-radius: 14px;padding: 14px 16px;}
.rcn-steps li::before{content: counter(rcn-step);grid-row: span 2;display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;border-radius: 50%;background: var(--rcn-ginger);color: #fff;font-size: 18px;font-weight: 800;}
.rcn-steps h3{font-size: 17px;font-weight: 800;margin: 2px 0 4px;}
.rcn-steps p{margin: 0;font-size: 15px;line-height: 1.6;}
.rcn-sci-grid{display: grid;grid-template-columns: 260px 1fr;gap: 22px;align-items: start;}
.rcn-sci-card{background: var(--rcn-ink);color: #fff;border-radius: 18px;padding: 22px;}
.rcn-sci-card svg{width: 34px;height: 34px;fill: none;stroke: #f3b27a;stroke-width: 1.8;stroke-linecap: round;stroke-linejoin: round;margin-bottom: 10px;}
.rcn-read .rcn-sci-fact{font-size: 19px;font-weight: 800;line-height: 1.35;color: #fff;margin: 0 0 12px;}
.rcn-read .rcn-sci-src{font-size: 13px;color: #d9c9b5;margin: 0;}
.rcn-sci-body p:last-child{margin-bottom: 0;}
.rcn-style-cards{display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 12px;margin-top: 16px;}
.rcn-style-card{background: var(--rcn-panel);border: 1px solid var(--rcn-line);border-top: 5px solid var(--tone);border-radius: 14px;padding: 14px 16px;}
.rcn-style-card h3{display: flex;align-items: baseline;justify-content: space-between;gap: 8px;font-size: 19px;font-weight: 800;margin: 0;color: var(--tone-ink);}
.rcn-style-card h3 span{font-size: 12px;font-weight: 700;color: var(--rcn-muted);}
.rcn-read .rcn-style-hint{font-size: 13px;color: var(--rcn-muted);margin: 0 0 8px;}
.rcn-style-card p{font-size: 15px;line-height: 1.6;margin: 0 0 10px;}
.rcn-read .rcn-style-eg{font-size: 14px;font-weight: 600;color: var(--tone-ink);background: var(--tone-soft);border-radius: 10px;padding: 8px 10px;margin: 0;}
.rcn-coats{display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 10px;margin: 16px 0 0;}
.rcn-coats div{display: flex;flex-direction: column;gap: 4px;background: var(--rcn-paper);border: 1px solid var(--rcn-line);border-radius: 14px;padding: 12px 14px 12px 44px;position: relative;}
.rcn-coats div::before{content: "";position: absolute;left: 14px;top: 14px;width: 20px;height: 20px;border-radius: 50%;border: 1px solid rgba(43, 33, 24, 0.25);background: var(--swatch);}
.rcn-coats [data-coat="black"]{--swatch: #1f1b18;}
.rcn-coats [data-coat="white"]{--swatch: #ffffff;}
.rcn-coats [data-coat="ginger"]{--swatch: #d9772f;}
.rcn-coats [data-coat="grey"]{--swatch: #8c8c94;}
.rcn-coats [data-coat="tabby"]{--swatch: repeating-linear-gradient(45deg, #7a5a3a 0 4px, #b89470 4px 8px);}
.rcn-coats [data-coat="calico"]{--swatch: conic-gradient(#fff 0 33%, #d9772f 0 66%, #1f1b18 0);}
.rcn-coats [data-coat="tuxedo"]{--swatch: linear-gradient(180deg, #1f1b18 55%, #fff 0);}
.rcn-coats [data-coat="cream"]{--swatch: #ecd3a6;}
.rcn-coats dt{font-size: 15px;font-weight: 800;}
.rcn-coats dd{margin: 0;font-size: 14px;line-height: 1.6;color: var(--rcn-muted);}
.rcn-skips{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 12px;margin-top: 16px;}
.rcn-skip{background: #fff6e5;border: 1px solid #f3d9a4;border-radius: 14px;padding: 14px 16px;}
.rcn-skip h3{font-size: 17px;font-weight: 800;margin: 0 0 6px;color: #6b4500;}
.rcn-read .rcn-skip p{font-size: 15px;line-height: 1.6;margin: 0;}
.rcn-limits{background: var(--rcn-paper);border: 1px solid var(--rcn-line);border-radius: 18px;padding: 22px 26px;}
.rcn-limits ul{margin: 0;padding-left: 20px;}
.rcn-limits li{font-size: 15px;line-height: 1.65;margin-bottom: 8px;}
@keyframes rcn-in{from{opacity: 0;transform: translateY(8px);}to{opacity: 1;transform: none;}}
@keyframes rcn-spin{to{transform: rotate(360deg);}}
@media (max-width: 1199px){.rcn-styles{grid-template-columns: repeat(3, minmax(0, 1fr));}}
@media (max-width: 991px){.rcn-board{padding: 16px;}.rcn-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}.rcn-row{grid-template-columns: 1fr 1fr;}.rcn-go{grid-column: 1 / -1;}.rcn-draw{width: 100%;}.rcn-sci-grid{grid-template-columns: 1fr;}}
@media (max-width: 575px){.rcn-board{padding: 12px;border-radius: 20px;}.rcn-bar{padding: 14px;}.rcn-bar-head{justify-content: flex-start;}.rcn-styles{grid-template-columns: repeat(2, minmax(0, 1fr));}.rcn-row{grid-template-columns: 1fr;}.rcn-seg{display: flex;}.rcn-seg label{flex: 1;}.rcn-seg span{text-align: center;padding: 8px 6px;}.rcn-seg span small{display: none;}.rcn-grid{grid-template-columns: 1fr;}.rcn-name{font-size: 25px;}.rcn-read h2,.rcn-limits h2{font-size: 22px;}.rcn-limits{padding: 18px;}.rcn-steps li{grid-template-columns: 36px 1fr;}.rcn-steps li::before{width: 36px;height: 36px;font-size: 16px;}}
@media (prefers-reduced-motion: reduce){.rcn-tile.is-new,.rcn-draw.is-busy svg{animation: none;}}