/* Bead Portraits: a cream pegboard studio and outlined text on a transparent stage. */
html.tt-shell .gift-copy small { display:block; color:var(--muted); font-size:14px; margin-top:5px; }
.source-page #bp-stage { position:absolute; width:1080px; height:1920px; transform-origin:top left; color:#fff; font-family:system-ui, sans-serif; font-weight:900; -webkit-text-stroke:8px #25263e; paint-order:stroke fill; stroke-linejoin:round; text-shadow:none; }
.source-page #bp-stage * { box-sizing:border-box; paint-order:stroke fill; stroke-linejoin:round; }
html.source-page[data-transparent="0"] body { background:#16181b; }
#bp-stage [hidden] { display:none; }
.bp-top { position:absolute; left:48px; right:48px; top:38px; display:flex; justify-content:space-between; align-items:flex-start; }
.bp-brand { color:#ffd43b; font-size:26px; letter-spacing:5px; margin:0 0 8px; }
.bp-top h1 { font-size:96px; line-height:1; margin:0; letter-spacing:-4px; }
.bp-top h1 span { color:#ffd43b; }
.bp-count { text-align:right; font-variant-numeric:tabular-nums; }
.bp-count strong { display:block; font-size:78px; line-height:1.05; color:#ffd43b; }
.bp-count span { font-size:24px; display:block; margin-top:6px; letter-spacing:2px; }
.bp-prompt { position:absolute; top:196px; left:48px; right:48px; margin:0; text-align:center; font-size:40px; color:#ffd43b; }
.bp-studio { position:absolute; top:262px; left:240px; width:600px; text-align:center; }
.bp-board { position:relative; width:600px; height:600px; border-radius:48px; overflow:hidden; border:8px solid #25263e; background:#f4e3c3; }
.bp-photo, .bp-photo img, .bp-fallback { position:absolute; inset:0; width:100%; height:100%; }
.bp-photo img { object-fit:cover; display:block; }
.bp-fallback { display:flex; align-items:center; justify-content:center; font-size:300px; color:#fff; background:radial-gradient(circle at 30% 30%, #ff4f79 0 18%, transparent 19%), radial-gradient(circle at 70% 65%, #4cc9f0 0 22%, transparent 23%), #ffd43b; }
.bp-holes { position:absolute; inset:0; width:100%; height:100%; }
.bp-iron { position:absolute; left:0; right:0; height:80px; background:linear-gradient(#ffd43b, #ff9f1c); border-top:6px solid #25263e; border-bottom:6px solid #25263e; opacity:.85; }
.bp-maker { font-size:46px; margin:18px -200px 0; line-height:1.1; overflow-wrap:anywhere; }
.bp-progress { font-size:30px; margin:8px -200px 0; color:#ffd43b; }
.bp-legend { position:absolute; top:1010px; left:60px; right:60px; text-align:center; background:transparent; }
.bp-legend h2 { font-size:42px; color:#ffd43b; margin:0; line-height:1.1; }
.bp-sub { font-size:30px; margin:12px 0 18px; }
#legend-rows { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bp-row { display:grid; grid-template-columns:64px 1fr; align-items:center; gap:12px; border:4px solid #ffd43b; border-radius:24px; padding:10px 14px; text-align:left; }
.bp-row .icon { width:60px; height:60px; display:flex; align-items:center; justify-content:center; font-size:40px; }
.bp-row .icon img { width:58px; height:58px; object-fit:contain; }
.bp-row b { display:block; font-size:28px; line-height:1.05; }
.bp-row i { display:block; font-style:normal; font-size:22px; line-height:1.2; margin-top:4px; }
.bp-quick { position:absolute; left:60px; right:60px; top:1010px; display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; text-align:center; }
.bp-quick span { font-size:23px; color:#ffd43b; }
.bp-line { position:absolute; left:48px; right:48px; top:1100px; margin:0; text-align:center; font-size:32px; overflow-wrap:anywhere; }
.bp-legend:not([hidden]) ~ .bp-line { display:none; }
.bp-shelf-wrap { position:absolute; left:48px; right:48px; top:1400px; text-align:center; background:transparent; }
.bp-shelf-title { font-size:28px; letter-spacing:6px; color:#ffd43b; margin:0 0 10px; }
.bp-shelf { display:grid; grid-template-columns:repeat(6, 1fr); gap:10px 18px; border-top:10px solid #c98b4e; padding-top:14px; }
.bp-charm { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.bp-charm .bp-board { width:104px; height:104px; border-width:4px; border-radius:22px; }
.bp-charm .bp-fallback { font-size:56px; -webkit-text-stroke:4px #25263e; }
.bp-charm b { font-size:18px; -webkit-text-stroke:4px #25263e; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bp-charm i { font-style:normal; font-size:16px; color:#ffd43b; -webkit-text-stroke:4px #25263e; }
.bp-callout { position:absolute; left:60px; right:60px; top:1736px; margin:0; text-align:center; color:#ffd43b; font-size:40px; line-height:1.15; overflow-wrap:anywhere; }
.bp-mode { position:absolute; top:1790px; left:40px; right:40px; font-size:24px; letter-spacing:3px; text-align:center; color:#ffd43b; }
.bp-recent { position:absolute; top:1822px; left:65px; right:65px; display:flex; align-items:center; justify-content:center; gap:14px; font-size:24px; text-align:center; margin:0; }
.bp-recent .tt-core-avatar { background:transparent; border:2px solid #ffd43b; flex:none; }
.bp-footer { position:absolute; left:20px; right:20px; top:1880px; font-size:21px; text-align:center; margin:0; -webkit-text-stroke:5px #25263e; }
.bp-callout:empty, .bp-recent:empty, .bp-line:empty, .bp-mode:empty, .bp-progress:empty { display:none; }
.source-page #bp-stage .tt-core-overlay-status { position:absolute; left:48px; top:1690px; width:984px; max-width:none; transform:none; margin:0; z-index:4; background:transparent; border:0; }
.source-page #bp-stage .tt-core-notice { font-size:28px; font-weight:900; padding:12px; background:transparent; border:0; box-shadow:none; }
.source-page #bp-stage .tt-core-notice strong { font-size:30px; }
#bp-stage:has(.tt-core-status[data-mode="live"][data-connected="false"]) :is(.bp-callout, .bp-mode, .bp-recent) { display:none; }
html[data-reduced-motion="1"] .bp-iron { display:none; }