html, body, #root { margin: 0; min-height: 100%; }
body { background: #fff8d6; }
.rb { max-width: 760px; margin: 0 auto; padding: 16px 16px 60px; font-family: "Helvetica Neue", Arial, sans-serif; color: #111; }
.rb * { box-sizing: border-box; }
.rb-hero { position: relative; padding: 26px 22px; border-radius: 24px; background: linear-gradient(135deg, #ff9a3d, #ff3d6e 60%, #8b5cf6); border: 4px solid #111; box-shadow: 8px 8px 0 #111; color: #fff; overflow: hidden; }
.rb-hero h1 { margin: 0; font: 900 clamp(46px, 13vw, 92px)/0.9 "Arial Black", Impact, sans-serif; letter-spacing: -0.03em; text-shadow: 4px 4px 0 #111; }
.rb-hero p { margin: 14px 0 0; font-weight: 700; font-size: 17px; max-width: 380px; text-shadow: 1px 1px 0 #111; }
.rb-flame { position: absolute; right: 14px; top: 8px; font-size: clamp(70px, 20vw, 130px); transform: rotate(10deg); }
.rb-lbl { margin: 26px 0 10px; font-weight: 800; font-size: 13px; letter-spacing: .12em; color: #555; }
.rb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
@media (max-width: 520px) { .rb-grid { grid-template-columns: 1fr; } }
.rb-f { display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #444; }
.rb-f input { font-weight: 600; font-size: 17px; font-family: inherit; padding: 12px 14px; border: 3px solid #111; border-radius: 14px; background: #fff; color: #111; width: 100%; text-transform: none; letter-spacing: 0; }
.rb-f input:focus { outline: none; box-shadow: 4px 4px 0 #111; }
.rb-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.rb-split { justify-content: space-between; }
.rb-chip, .rb-pill, .rb-segb { font-weight: 800; font-size: 15px; font-family: inherit; padding: 10px 16px; border: 3px solid #111; border-radius: 999px; background: #fff; color: #111; cursor: pointer; }
.rb-pills { display: flex; gap: 8px; }
.rb-pill.on, .rb-segb.on { background: #111; color: #fff; }
.rb-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; background: #ffe9a0; border: 3px solid #111; border-radius: 18px; }
.rb-segb { border: 0; background: transparent; border-radius: 12px; padding: 14px 4px; font-size: 16px; }
.rb-go { width: 100%; margin-top: 16px; padding: 16px; font-weight: 900; font-size: 18px; font-family: inherit; color: #fff; background: linear-gradient(90deg, #8b5cf6, #ff3d6e); border: 4px solid #111; border-radius: 18px; box-shadow: 5px 5px 0 #111; cursor: pointer; }
.rb-go:disabled { opacity: .55; cursor: default; }
.rb-cardwrap { margin-top: 12px; background: repeating-linear-gradient(45deg, #fdeea0, #fdeea0 12px, #ffe680 12px, #ffe680 24px); border: 3px solid #111; border-radius: 24px; padding: 18px; display: flex; justify-content: center; }
.rb-cardwrap canvas { width: 100%; max-width: 420px; height: auto; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.rb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
@media (max-width: 520px) { .rb-actions { grid-template-columns: 1fr; } }
.rb-btn { font-weight: 900; font-size: 17px; font-family: inherit; padding: 16px; border: 4px solid #111; border-radius: 16px; background: #ff3d6e; color: #fff; box-shadow: 4px 4px 0 #111; cursor: pointer; }
.rb-btn.alt { background: #fff; color: #111; }
.rb-btn:disabled { opacity: .5; }
.rb-note { min-height: 20px; margin-top: 10px; font-size: 14px; font-weight: 700; color: #7a1d3a; }

@media (max-width: 520px) { .rb-flame { opacity: .20; z-index: 0; } .rb-hero h1, .rb-hero p { position: relative; z-index: 1; } }