@font-face { font-family: 'Bebas Neue'; src: url(fonts/BebasNeue-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: block; }
@font-face { font-family: 'Bebas Neue'; src: url(fonts/BebasNeue-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: block; }
@font-face { font-family: 'Anton'; src: url(fonts/Anton-latin.woff2) format('woff2'); font-display: block; }

:root {
  --ui-bg: #f3f2ef; --ui-panel: #ffffff; --ui-text: #1d1c1a; --ui-muted: #6b6862; --ui-line: #e2dfd8;
  --ui-accent: #2f6fde; --ui-accent-soft: #e5eefc; --ui-danger: #c23b2a;
}
/* always light, whatever the phone or computer is set to */
:root, :root[data-theme="dark"] { color-scheme: light only; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--ui-bg); color: var(--ui-text); font: 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overflow: hidden; }
button, select, input, textarea { font: inherit; color: inherit; }

/* ---------- app layout ---------- */
.app { display: grid; grid-template-columns: 196px 1fr 300px; grid-template-rows: 52px 1fr 26px; height: 100%; }
.appfoot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--ui-muted); border-top: 1px solid var(--ui-line); background: var(--ui-panel); }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--ui-line); background: var(--ui-panel); overflow-x: auto; overflow-y: visible; position: relative; z-index: 20; }
.topbar h1 { font-size: 15px; font-weight: 650; margin: 0 10px 0 4px; white-space: nowrap; }
.topbar .sp { flex: 1; }
.btn { border: 1px solid var(--ui-line); background: var(--ui-panel); border-radius: 8px; padding: 6px 11px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--ui-muted); }
.btn.primary { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.btn.on { background: var(--ui-accent-soft); border-color: var(--ui-accent); }
.btn.danger { color: var(--ui-danger); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sm { padding: 3px 8px; font-size: 12.5px; border-radius: 6px; }
.sep { width: 1px; height: 24px; background: var(--ui-line); margin: 0 2px; }

.thumbs { overflow-y: auto; padding: 12px; border-right: 1px solid var(--ui-line); background: var(--ui-panel); }
.thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 12px; border-radius: 6px; overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; cursor: pointer; background: #ddd; }
.thumb.active { outline-color: var(--ui-accent); }
.thumb .slide { pointer-events: none; }
.thumb .num { position: absolute; left: 5px; top: 4px; font-size: 11px; color: #fff; background: rgba(0,0,0,.45); padding: 0 5px; border-radius: 4px; z-index: 2; }

.stagewrap { overflow: hidden; display: flex; align-items: center; justify-content: center; }
.stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; box-shadow: 0 6px 28px rgba(0,0,0,.18); }
.hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: rgba(20,20,20,.82); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 13px; pointer-events: none; white-space: nowrap; z-index: 5; }

.inspector { overflow-y: auto; border-left: 1px solid var(--ui-line); background: var(--ui-panel); padding: 14px; }
.inspector h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ui-muted); margin: 18px 0 8px; font-weight: 600; }
.inspector h2:first-child { margin-top: 0; }
.inspector p.note { color: var(--ui-muted); margin: 0 0 10px; font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field > span { font-size: 12px; color: var(--ui-muted); }
.row { display: flex; gap: 8px; }
.row > .field { flex: 1; min-width: 0; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--ui-line); border-radius: 7px; padding: 6px 8px; background: var(--ui-bg); }
.field textarea { resize: vertical; min-height: 64px; font-family: inherit; }
.btnrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.connlist { display: flex; flex-direction: column; gap: 8px; }
.connrow { border: 1px solid var(--ui-line); border-radius: 8px; padding: 8px; }
.connrow.sel { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.connrow .t { font-weight: 600; font-size: 13px; margin-bottom: 6px; cursor: pointer; }
.connrow .row .field { margin-bottom: 4px; }
.iconpick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.iconpick button { aspect-ratio: 1; border: 1px solid var(--ui-line); border-radius: 6px; background: #555; padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }
.iconpick button.on { outline: 2px solid var(--ui-accent); }
.iconpick svg { width: 100%; height: 100%; fill: #fff; }
.imgpick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.imgpick button { aspect-ratio: 1; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; padding: 3px; cursor: pointer; }
.imgpick img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- slides ---------- */
.slide { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; background: #fff; transform-origin: 0 0; }
.slide > img, .slide .bgimg, .slide .titleimg { position: absolute; display: block; }
.svgtext { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.leveltext { font-family: 'Anton', Impact, 'Haettenschweiler', 'Arial Narrow Bold', sans-serif; font-size: 234px; fill: #fff; }

.card { position: absolute; width: 1000px; height: 1004.3px; transform-origin: 0 0; border-radius: 88.6px / 70.9px; overflow: hidden; background: #fff; }
.chead, .cfoot { position: relative; background: var(--band); color: #fcfdff; }
.chead { height: 194.5px; }
.cfoot { height: 171.4px; }
.cbody { position: relative; height: 638.4px; background: #fff; }
.hicon { position: absolute; fill: #fcfdff; color: #fcfdff; }
.htitle { position: absolute; font-family: 'Bebas Neue', sans-serif; line-height: 1.2; white-space: nowrap; }
.ftitle { position: absolute; left: 0; right: 0; top: calc(122.2px - 0.9 * 120.4px); text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 120.4px; line-height: 1.2; white-space: nowrap; color: #fff; }

.conns, .connui, .guides { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.conn .line { fill: none; stroke: #4a494a; stroke-linecap: butt; }
.conn.arrow .line { stroke: #f9d641; stroke-dasharray: none; }
.conn .head { fill: #f9d641; }
.conn .hit { fill: none; stroke: transparent; stroke-width: 14; }

.item { position: absolute; }
.item.image img { width: 100%; height: 100%; display: block; object-fit: fill; pointer-events: none; }
.item.circle { border-radius: 50%; }
.item.frame { border: 8px solid #e0d5e8; border-radius: 16px; }
.node { background: var(--base); overflow: hidden; }
.node::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--light), var(--base)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 15%); }
.node .nicon { position: absolute; fill: #fcfdff; overflow: visible; }
.nlabel { position: absolute; font-family: 'Bebas Neue', sans-serif; color: #fcfdff; white-space: nowrap; }
.ntag { position: absolute; font-family: 'Bebas Neue', sans-serif; color: #fcfdff; background: rgba(110, 205, 255, .55); border-radius: 5px; white-space: nowrap; }

/* ---------- editing affordances ---------- */
.editing .cbody .item { cursor: grab; }
.editing .cbody .item:hover { outline: 2px dashed rgba(47, 111, 222, .55); outline-offset: 3px; }
.editing .cbody .item.sel { outline: 3px solid #2f6fde; outline-offset: 3px; }
.editing .cbody .item.target { outline: 3px solid #e3a21a; outline-offset: 3px; }
.editing .conn { cursor: pointer; }
.editing .conn .hit { pointer-events: stroke; }
.editing .conn.sel .line { stroke: #2f6fde; }
.editing .conn:hover .line { stroke: #2f6fde; }
.handle { position: absolute; width: 22px; height: 22px; background: #fff; border: 3px solid #2f6fde; border-radius: 50%; cursor: nwse-resize; z-index: 3; }
.midhandle { fill: #fff; stroke: #2f6fde; stroke-width: 3; cursor: move; pointer-events: all; }
.dragging, .dragging * { cursor: grabbing !important; }

/* ---------- viewer mode (?view=1) ---------- */
.viewer { position: fixed; inset: 0; background: #111; display: flex; align-items: center; justify-content: center; }
.viewer .stage { box-shadow: none; }
.viewer .nav { z-index: 10; position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; color: #fff; background: rgba(0,0,0,.5); padding: 6px 10px; border-radius: 10px; font-size: 13px; }
.viewer .nav button { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 7px; padding: 4px 10px; cursor: pointer; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 52px 92px 1fr 40vh 26px; }
  .thumbs { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--ui-line); padding: 8px 16px; }
  .thumb { flex: 0 0 auto; width: 128px; margin: 0; }
  .inspector { border-left: 0; border-top: 1px solid var(--ui-line); }
}
.guides line { stroke: #e0389b; stroke-width: 2; }
.savestate { font-size: 12.5px; color: var(--ui-muted); white-space: nowrap; }
[hidden] { display: none !important; }
.confirmbox { border: 1px solid var(--ui-danger); border-radius: 8px; padding: 8px; margin-top: 6px; font-size: 13px; }

.dlwrap { position: static; }
.dlmenu { position: fixed; top: 48px; right: 12px; z-index: 50; width: 268px; max-height: calc(100% - 60px); overflow-y: auto; background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; }
.dlgroup + .dlgroup { border-top: 1px solid var(--ui-line); margin-top: 4px; padding-top: 4px; }
.dlhead { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ui-muted); padding: 6px 8px 2px; }
.dlmenu button { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 10px; text-align: left; border: 0; background: transparent; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.dlmenu button:hover, .dlmenu button:focus-visible { background: var(--ui-accent-soft); outline: none; }
.dlmenu small { color: var(--ui-muted); font-size: 12px; white-space: nowrap; }

.buildname { position: absolute; left: 0; right: 0; text-align: center; font-family: 'Bebas Neue', sans-serif; line-height: 1.2; color: #fff; white-space: nowrap; letter-spacing: .01em; }

/* ---------- build your own ---------- */
.btn.build { background: linear-gradient(90deg, #f5881f, #00a6ca, #3f9249, #6a4795); border: 0; color: #fff; font-weight: 600; padding: 7px 12px; }
.btn.build:hover { filter: brightness(1.08); }
.builder { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: minmax(330px, 410px) 1fr; grid-template-rows: 52px 1fr; background: var(--ui-bg); --bar: #ebebed; --barText: #24231f; }
:root[data-theme="dark"] .builder { --bar: #2d2d2a; --barText: #eeece6; }
.btop { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--ui-line); background: var(--ui-panel); position: relative; z-index: 2; }
.btop h1 { font-size: 15px; font-weight: 650; margin: 0 6px 0 4px; white-space: nowrap; }
.btop .sp { flex: 1; }
.bpanel { overflow-y: auto; background: var(--ui-panel); border-right: 1px solid var(--ui-line); padding: 14px 14px 28px; scroll-behavior: smooth; }
.bwrap { position: relative; overflow: hidden; min-width: 0; }
.bstage { box-shadow: 0 10px 40px rgba(0,0,0,.2); border-radius: 4px; overflow: hidden; }
.bhead { position: sticky; top: -14px; z-index: 3; background: var(--ui-panel); margin: -14px -14px 6px; padding: 14px 14px 10px; border-bottom: 1px solid var(--ui-line); }
.bname { display: flex; flex-direction: column; gap: 4px; }
.bname > span { font-size: 12px; color: var(--ui-muted); }
.bname input { font-size: 17px; font-weight: 600; border: 1px solid var(--ui-line); border-radius: 9px; padding: 9px 11px; background: var(--ui-bg); transition: border-color .2s, box-shadow .2s; }
.bname input:focus { outline: none; border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.bview { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.bview button { border: 1px solid var(--ui-line); background: var(--ui-bg); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s; }
.bview button:active { transform: scale(.95); }
.bview button[aria-checked="true"] { background: var(--qc, var(--ui-text)); border-color: var(--qc, var(--ui-text)); color: #fff; }
:root:not([data-theme="light"]) .bview button[data-show="all"][aria-checked="true"] { color: var(--ui-panel); }
.bgrp { margin-top: 16px; }
.bgtitle { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; margin: 0 2px 8px; }
.bgtitle .sp { flex: 1; }
.bdot { width: 10px; height: 10px; border-radius: 50%; background: var(--qc); }
.bcount { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--qc); color: #fff; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0; }
.bcount:empty { display: none; }
.bcount.bump { animation: bpop .4s ease; }
.blink { border: 0; background: none; color: var(--ui-muted); font-size: 12px; cursor: pointer; padding: 2px 4px; border-radius: 5px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.blink:hover { color: var(--qc); background: var(--ui-accent-soft); }
.brow { margin-bottom: 7px; }
.bbar { display: flex; align-items: center; background: var(--bar); border-radius: 11px; overflow: hidden; transition: background .25s, box-shadow .25s, transform .15s; }
.bbar:active { transform: scale(.985); }
.brow.on > .bbar { background: color-mix(in srgb, var(--qc) 16%, var(--bar)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--qc) 55%, transparent); }
.brow.flash > .bbar { animation: bflash 1.1s ease; }
.bline { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; user-select: none; }
.bline input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.btab { align-self: stretch; width: 46px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, var(--ql), var(--qc)); }
.bbox { position: relative; width: 28px; height: 28px; border-radius: 7px; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.bbox svg { width: 20px; height: 20px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bbox .g { stroke: #d2d2d6; stroke-width: 2; }
.bbox .d { stroke: var(--qc); stroke-width: 3.2; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .3s cubic-bezier(.6,0,.2,1) .06s; }
.bbox::after { content: ''; position: absolute; inset: -2px; border-radius: 9px; border: 2px solid #fff; opacity: 0; pointer-events: none; }
.bline input:checked + .btab .bbox, .bline input:checked + .bbox { animation: bpop .38s ease; }
.bline input:checked + .btab .bbox .d, .bline input:checked + .bbox .d { stroke-dashoffset: 0; }
.bline input:checked + .btab .bbox::after, .bline input:checked + .bbox::after { animation: bring .5s ease-out; }
.bline input:focus-visible + .btab .bbox, .bline input:focus-visible + .bbox { box-shadow: 0 0 0 3px var(--ui-accent); }
.blabel { padding: 13px 12px 13px 0; font-size: 15px; font-weight: 550; color: var(--barText); line-height: 1.25; min-width: 0; }
.blabel small { color: var(--ui-muted); font-weight: 400; font-size: 12.5px; }
.bmoney { display: flex; align-items: baseline; gap: 2px; margin-right: 12px; color: var(--ui-muted); font-size: 13px; white-space: nowrap; }
.bmoney input { width: 92px; border: 0; border-bottom: 1.5px solid currentColor; background: transparent; padding: 2px 2px; font-size: 14px; color: var(--ui-text); transition: border-color .2s, width .25s; }
.bmoney input:focus { outline: none; border-bottom-color: var(--qc); width: 112px; }
.bsubs { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .32s cubic-bezier(.3,.7,.3,1), opacity .25s; }
.brow.on > .bsubs { grid-template-rows: 1fr; opacity: 1; }
.bsubsin { overflow: hidden; min-height: 0; padding-left: 58px; display: flex; flex-direction: column; }
.bsubsin.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 6px; padding-right: 4px; }
.bsub { display: flex; align-items: center; gap: 6px; padding: 5px 0; min-width: 0; }
.bsub:first-child { padding-top: 9px; }
.bsubsin.grid .bsub { padding-top: 9px; flex-wrap: wrap; }
.bsub .bline { gap: 8px; flex: 0 1 auto; }
.bsub .blabel { padding: 0; font-size: 13.5px; font-weight: 450; color: var(--ui-muted); }
.bsub input:checked ~ .blabel { color: var(--ui-text); }
.bbox.sm { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid #cfcfd4; background: var(--ui-panel); transition: background .2s, border-color .2s; }
.bbox.sm svg { width: 15px; height: 15px; }
.bbox.sm .g { stroke: transparent; }
.bline input:checked + .bbox.sm { background: var(--qc); border-color: var(--qc); }
.bline input:checked + .bbox.sm .d { stroke: #fff; }
.bsub .bmoney { margin: 0 0 0 auto; }
.bsubsin.grid .bmoney { margin: 0; }
.bsubsin.grid .bmoney input { width: 64px; }
.bsubsin.grid .bmoney input:focus { width: 70px; }
.bsub.nocheck .bmoney { margin: 0; }
.brow.on > .bsubs .bsub { animation: bsubin .34s cubic-bezier(.2,.9,.3,1.2) both; }
.brow.on > .bsubs .bsub:nth-child(2) { animation-delay: .04s; } .brow.on > .bsubs .bsub:nth-child(3) { animation-delay: .08s; }
.brow.on > .bsubs .bsub:nth-child(4) { animation-delay: .12s; } .brow.on > .bsubs .bsub:nth-child(n+5) { animation-delay: .16s; }
.bfoot { margin-top: 18px; display: flex; justify-content: center; }
#bdlmenu { top: 48px; }

/* the design, live */
.bstage .cbody > .item { transition: box-shadow .18s, transform .18s; }
.bstage .cbody > .item { cursor: pointer; }
.bstage .item.b-in { animation: bin .6s cubic-bezier(.2,1.3,.4,1) both; }
.bstage .item.b-in.sub { animation-name: binsub; animation-duration: .45s; }
.bstage .item.b-out { animation: bout .2s ease-in both; }
.bstage .item.b-move { transition: left .5s cubic-bezier(.2,.8,.2,1), top .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1); }
.bstage .item.b-hl { box-shadow: 0 0 0 6px #fff, 0 0 0 12px var(--base); transform: scale(1.03); z-index: 2; }
.bstage .conn.b-out { animation: fadeout .18s ease-in both; }
.bstage .conn.b-fade { animation: fadein .3s ease .4s both; }
.bstage .bdraw { animation: bdraw .5s cubic-bezier(.4,0,.2,1) forwards; }
.bstage .card.b-glide { transition: left .5s cubic-bezier(.2,.8,.2,1), top .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); }
.bstage .slide.b-swap .card { animation: bswap .5s cubic-bezier(.2,.9,.3,1) both; }
.bstage .slide.b-swap .card:nth-of-type(2) { animation-delay: .05s; } .bstage .slide.b-swap .card:nth-of-type(3) { animation-delay: .1s; } .bstage .slide.b-swap .card:nth-of-type(4) { animation-delay: .15s; }
.bstage .buildname.b-namein { animation: bname .55s cubic-bezier(.2,.9,.3,1) both; }
.b-empty { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; font-family: 'Bebas Neue', sans-serif; color: #bdb9b1; text-align: center; pointer-events: none; animation: fadein .4s ease both; }
.b-empty b { font-weight: 400; font-size: 72px; line-height: 1; color: var(--light); }
.b-empty span { font-size: 40px; line-height: 1.15; }
.bfly { position: fixed; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; z-index: 100; pointer-events: none; box-shadow: 0 0 0 4px rgba(255,255,255,.65), 0 4px 14px rgba(0,0,0,.25); }

@keyframes bpop { 0% { transform: scale(1); } 35% { transform: scale(.78); } 70% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes bring { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes bflash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 25%, 60% { box-shadow: 0 0 0 3px var(--qc); } }
@keyframes bsubin { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes bin { 0% { opacity: 0; transform: translateY(26px) scale(.55); box-shadow: 0 0 0 0 var(--base); } 55% { opacity: 1; transform: translateY(-4px) scale(1.06); } 80% { box-shadow: 0 0 0 26px transparent; } 100% { transform: none; box-shadow: 0 0 0 0 transparent; } }
@keyframes binsub { 0% { opacity: 0; transform: translateY(-14px) scale(.7); } 70% { opacity: 1; transform: translateY(2px) scale(1.04); } 100% { transform: none; } }
@keyframes bout { to { opacity: 0; transform: scale(.6); } }
@keyframes fadeout { to { opacity: 0; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes bdraw { to { stroke-dashoffset: 0; } }
@keyframes bswap { from { opacity: 0; translate: 0 40px; } }
@keyframes bname { from { opacity: 0; letter-spacing: .25em; transform: translateY(-24px); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .builder *, .builder *::before, .builder *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }



/* copyright on every slide and on a quadrant downloaded alone */
.slide > .copyright { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 500 19px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: rgba(255,255,255,.88); letter-spacing: .02em; pointer-events: none; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.ccopy { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 500 20px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: rgba(255,255,255,.9); }
.bcopy { text-align: center; color: var(--ui-muted); font-size: 12px; margin: 14px 0 0; }

/* rename, belongs to, add your own */
.bpen { display: none; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ui-muted); cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.bpen svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.brow.on > .bbar .bpen { display: flex; animation: fadein .25s ease; }
.bpen:hover, .brow.editing .bpen { background: color-mix(in srgb, var(--qc) 18%, transparent); color: var(--qc); }
.bpen:active { transform: scale(.9); }
.bedit { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s cubic-bezier(.3,.7,.3,1), opacity .25s; }
.brow.on.editing > .bedit { grid-template-rows: 1fr; opacity: 1; }
.beditin { overflow: hidden; min-height: 0; margin-left: 58px; }
.brow.on.editing .beditin { padding: 10px 0 4px; }
.bfield { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.bfield > span { font-size: 11.5px; color: var(--ui-muted); text-transform: uppercase; letter-spacing: .05em; }
.bfield input, .bfield select { width: 100%; border: 1px solid var(--ui-line); border-radius: 8px; padding: 7px 9px; background: var(--ui-bg); font-size: 14px; transition: border-color .2s, box-shadow .2s; }
.bfield input:focus, .bfield select:focus { outline: none; border-color: var(--qc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc) 22%, transparent); }
.bsubnames { display: grid; gap: 6px; }
.bsubnames.two { grid-template-columns: 1fr 1fr; }
.bicons { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; padding: 4px; }
.bicons button { position: relative; min-width: 0; height: 0; padding: 0 0 100%; border: 0; border-radius: 9px; background: var(--qc); opacity: .55; cursor: pointer; transition: opacity .15s, transform .15s; }
.bicons button.on { opacity: 1; box-shadow: 0 0 0 2px var(--ui-panel), 0 0 0 4px var(--qc); }
.bicons button:hover { opacity: .85; transform: scale(1.06); }
.bicons svg { position: absolute; inset: 17%; width: 66%; height: 66%; fill: #fff; }
.brep { display: flex; gap: 6px; padding: 6px 0 2px; grid-column: 1 / -1; }
.brep .add { color: var(--qc); font-weight: 600; }
.blink:disabled { opacity: .4; cursor: default; }
.badd { display: flex; gap: 6px; margin: 4px 0 0; }
.badd input { flex: 1; min-width: 0; border: 1.5px dashed var(--ui-line); border-radius: 10px; padding: 9px 11px; background: transparent; font-size: 14px; transition: border-color .2s, background .2s; }
.badd input:focus { outline: none; border-style: solid; border-color: var(--qc); background: var(--ui-bg); }
.badd input.nudge { animation: bshake .35s ease; }
.badd .btn { border-color: var(--qc); color: var(--qc); font-weight: 600; }
.brow.arriving { animation: barrive .45s cubic-bezier(.2,1.2,.4,1) both; }
.brow.leaving { animation: bleave .25s ease-in both; }
@keyframes barrive { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes bleave { to { opacity: 0; transform: translateX(-16px); } }
@keyframes bshake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* pictures on the quadrant */
.bstage .bpic { cursor: grab; touch-action: none; transition: filter .2s; }
.bstage .bpic:hover { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 14px rgba(0,0,0,.18)); outline: 3px dashed color-mix(in srgb, var(--base) 60%, transparent); outline-offset: 6px; border-radius: 12px; }
.bstage .bpic.picked { outline: 4px solid var(--base); outline-offset: 8px; border-radius: 12px; }
.bstage .bpic.dragging { cursor: grabbing; filter: drop-shadow(0 18px 24px rgba(0,0,0,.28)); transform: scale(1.04); transition: transform .12s, filter .12s; z-index: 3; }
.bpictool { position: absolute; z-index: 4; display: flex; gap: 2px; padding: 4px; background: var(--ui-panel); border: 1px solid var(--ui-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: fadein .18s ease; }
.bpictool button { border: 0; background: transparent; border-radius: 7px; padding: 5px 9px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.bpictool button:hover { background: var(--ui-accent-soft); }
.bpictool button[data-pic="smaller"], .bpictool button[data-pic="bigger"] { font-size: 16px; font-weight: 700; width: 30px; padding: 3px 0; }

/* the type under a renamed box */
.nnote { position: absolute; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9); white-space: nowrap; }

/* main navigation: Build your own, Level 1, 2, 3 */
.bhomebtn { flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, transform .15s; }
.bhomebtn:hover { background: var(--ui-accent-soft); }
.bhomebtn:active { transform: scale(.92); }
.q4 { display: grid; grid-template-columns: 9px 9px; gap: 2.5px; }
.q4 i { width: 9px; height: 9px; border-radius: 2.5px; background: #f5881f; }
.q4 i:nth-child(2) { background: #00a6ca; } .q4 i:nth-child(3) { background: #3f9249; } .q4 i:nth-child(4) { background: #6a4795; }
.bnav { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--ui-bg); border: 1px solid var(--ui-line); min-width: 0; }
.bnav button { border: 0; background: transparent; border-radius: 9px; padding: 6px 14px 4px; font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: .04em; line-height: 1.1; color: var(--ui-muted); cursor: pointer; white-space: nowrap; transition: background .25s, color .25s, transform .15s; }
.bnav button:hover { color: var(--ui-text); }
.bnav button:active { transform: scale(.95); }
.bnav button[aria-current="true"] { background: var(--ui-text); color: var(--ui-panel); }
.bnav button[data-mode="build"][aria-current="true"] { background: linear-gradient(90deg, #f5881f, #00a6ca, #3f9249, #6a4795); color: #fff; }
.bdlbtn { display: inline-flex; align-items: center; gap: 6px; }
.bdlbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Andrew's levels: what's complete */
.lvhead .lvtop { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.lvkick { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ui-muted); }
.lvname { font-family: 'Bebas Neue', sans-serif; font-size: 40px; line-height: 1; margin-top: 2px; }
.lvreplay { display: inline-flex; align-items: center; gap: 5px; }
.lvreplay svg { width: 14px; height: 14px; fill: currentColor; }
.lvbar { height: 8px; border-radius: 4px; background: var(--bar); overflow: hidden; margin-top: 12px; }
.lvbar i { display: block; height: 100%; width: var(--p); border-radius: 4px; background: linear-gradient(90deg, #f5881f, #00a6ca, #3f9249, #6a4795); background-size: 400px 100%; animation: lvfill 1s cubic-bezier(.3,.8,.3,1) .15s both; }
.lvsum { font-size: 13px; color: var(--ui-muted); margin-top: 6px; }
.lvsum b { color: var(--ui-text); }
.lvcount { font-size: 11.5px; font-weight: 600; color: var(--qc); letter-spacing: .02em; text-transform: none; margin-left: auto; }
.lvrow .bbar { cursor: default; }
.lvrow .bbar:active { transform: none; }
.lvrow .bline { cursor: default; }
.lvrow.todo { opacity: .5; }
.lvrow.todo .btab { background: var(--ui-line); }
.lvrow.done > .bbar { background: color-mix(in srgb, var(--qc) 14%, var(--bar)); }
.lvrow.done .bbox { animation: bpop .38s ease both; animation-delay: var(--d); }
.lvrow.done .bbox .d { animation: lvcheck .3s cubic-bezier(.6,0,.2,1) both; animation-delay: calc(var(--d) + 60ms); }
.lvtxt { position: relative; display: inline; }
.lvrow.done .lvtxt { background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 100% 2px; animation: lvstrike .45s cubic-bezier(.5,0,.2,1) both; animation-delay: calc(var(--d) + 140ms); }
.lvrow.done .blabel { color: color-mix(in srgb, var(--barText) 78%, transparent); }
.lvsub { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ui-muted); margin: 12px 2px 7px; }
.bstage .svgtext.b-lvin { animation: fadein .8s ease .2s both; }
@keyframes lvfill { from { width: 0; } }
@keyframes lvcheck { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
@keyframes lvstrike { from { background-size: 0 2px; } to { background-size: 100% 2px; } }

/* a phone shows one card at a time */
.slide.pslide { width: 1000px; height: auto; background: transparent; overflow: visible; }
.pslide .card { box-shadow: 0 18px 50px rgba(0,0,0,.22); }
.pname { top: 6px; color: var(--ui-text); }
.pcopy { position: absolute; left: 0; right: 0; top: calc(120px + 1004.3px + 16px); text-align: center; font: 500 28px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--ui-muted); }
.bstage .slide.pslide.b-swap .card { animation: bswap .45s cubic-bezier(.2,.9,.3,1) both; }
.builder.phone .bstage { box-shadow: none; border-radius: 0; overflow: visible; }

@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  .builder { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(250px, min(50vh, 104vw)) minmax(0, 1fr); }
  .btop { flex-wrap: wrap; padding: 8px 10px; row-gap: 8px; }
  .bnav { order: 5; flex: 1 0 100%; }
  .bnav button { flex: 1; padding: 9px 4px 7px; font-size: 18px; min-height: 42px; }
  .bnav button[data-mode="build"] { flex: 1.6; }
  .bdlbtn { min-height: 36px; }
  #bback { min-height: 36px; padding: 6px 10px; }
  .bwrap { grid-row: 2; border-bottom: 1px solid var(--ui-line); touch-action: pan-y; background: var(--ui-bg); }
  .bpanel { grid-row: 3; border-right: 0; padding: 12px 12px 30px; -webkit-overflow-scrolling: touch; }
  .bhead { top: -12px; margin: -12px -12px 6px; padding: 12px 12px 10px; }
  .builder.phone .bgrp { display: none; margin-top: 10px; }
  .builder.phone .bgrp.cur { display: block; animation: fadein .3s ease; }
  .bview { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bview::-webkit-scrollbar { display: none; }
  .bview button { flex: 1 0 auto; padding: 8px 12px; font-size: 13.5px; min-height: 38px; }
  .bname input { font-size: 16px; }
  .blabel { font-size: 15px; padding: 14px 10px 14px 0; }
  .bpen { width: 40px; height: 40px; }
  .bfield input, .bfield select, .badd input { font-size: 16px; }
  .blink { padding: 8px 6px; font-size: 13px; }
  .bgtitle { flex-wrap: wrap; row-gap: 2px; }
  .bmoney input { width: 84px; font-size: 16px; }
  .lvname { font-size: 34px; }
  .bstage { box-shadow: none; }
  .dlmenu, #bdlmenu { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 72vh; border-radius: 14px; padding: 8px; }
  .dlmenu button { padding: 12px 10px; }
  .bpictool button { min-height: 40px; min-width: 40px; }
}
@media (max-width: 420px) {
  .bdlbtn span { display: none; }
  .bdlbtn { padding: 6px 10px; }
}

/* ---------- home ---------- */
.bhome { position: absolute; inset: 0; z-index: 20; overflow: hidden; background: #171522; color: #fff; --k: 1; }
.builder.athome .btop, .builder.athome .bpanel, .builder.athome .bwrap { visibility: hidden; }
.hbg { position: absolute; inset: -4%; background: url(assets/bg-gradient.jpg) center / cover no-repeat; }
.hbg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 72% 45%, rgba(10,8,20,0) 0%, rgba(10,8,20,.35) 55%, rgba(10,8,20,.78) 100%), linear-gradient(90deg, rgba(10,8,20,.55) 0%, rgba(10,8,20,.1) 55%, rgba(10,8,20,0) 100%); }
.hfloat { position: absolute; inset: 0; pointer-events: none; }
.hcard { position: absolute; left: var(--x); top: var(--y); width: 1000px; height: 1004.3px; margin: -502px 0 0 -500px; transform: scale(calc(var(--s) * var(--k))) rotate(var(--r)); will-change: transform; }
.hcard > .card { position: absolute; box-shadow: 0 30px 80px rgba(0,0,0,.35); animation: hfloat var(--t) ease-in-out var(--dl) infinite alternate; }
.hcard.far { z-index: 1; filter: blur(22px); opacity: .55; }
.hcard.near { z-index: 3; }
.bhome.hin .hcard { animation: hcardin 1.2s cubic-bezier(.2,.8,.2,1) var(--in) both; }
.hphoto { position: absolute; z-index: 2; bottom: 0; left: 70%; height: min(94%, 1100px); max-width: 64vw; object-fit: contain; object-position: bottom; transform: translateX(-50%); filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); pointer-events: none; user-select: none; }
.bhome.hin .hphoto { animation: hphoto 1.1s cubic-bezier(.2,.8,.2,1) both; }
.hcopy { position: absolute; z-index: 4; left: max(5vw, 32px); top: 50%; transform: translateY(-50%); width: min(40vw, 560px); display: flex; flex-direction: column; align-items: flex-start; }
.hlogo { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 24px rgba(0,0,0,.35)); }
.hby { margin: 14px 0 0; font-family: 'Bebas Neue', sans-serif; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: .14em; color: rgba(255,255,255,.88); }
.hnav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: clamp(22px, 4vh, 40px); }
.hbtn { font-family: 'Bebas Neue', sans-serif; font-size: clamp(22px, 1.8vw, 28px); letter-spacing: .05em; line-height: 1; padding: 15px 10px 12px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.12); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, transform .15s, border-color .2s, box-shadow .2s; }
.hbtn:hover { background: rgba(255,255,255,.24); border-color: #fff; }
.hbtn:active { transform: scale(.96); }
.hbtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hbtn.main { grid-column: 1 / -1; font-size: clamp(28px, 2.4vw, 36px); padding: 19px 10px 15px; border: 0; background: linear-gradient(90deg, #f5881f, #00a6ca 38%, #3f9249 68%, #6a4795); box-shadow: 0 12px 34px rgba(0,0,0,.3); }
.hbtn.main:hover { filter: brightness(1.08); box-shadow: 0 16px 40px rgba(0,0,0,.36); }
.bhome.hin .hlogo, .bhome.hin .hby, .bhome.hin .hbtn { animation: hup .8s cubic-bezier(.2,.8,.2,1) both; }
.bhome.hin .hby { animation-delay: .12s; }
.bhome.hin .hbtn.main { animation-delay: .22s; } .bhome.hin .hbtn:nth-child(2) { animation-delay: .3s; } .bhome.hin .hbtn:nth-child(3) { animation-delay: .36s; } .bhome.hin .hbtn:nth-child(4) { animation-delay: .42s; }
.hedit { position: absolute; z-index: 5; top: 14px; right: 14px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.25); color: #fff; border-radius: 9px; padding: 7px 12px; font-size: 13px; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hedit:hover { background: rgba(0,0,0,.4); }
.hcopyr { position: absolute; z-index: 5; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.82); text-shadow: 0 1px 3px rgba(0,0,0,.5); pointer-events: none; }
@keyframes hfloat { from { translate: 0 -18px; rotate: -1.5deg; } to { translate: 0 18px; rotate: 1.5deg; } }
@keyframes hcardin { from { opacity: 0; translate: 0 60px; } }
@keyframes hphoto { from { opacity: 0; translate: -50% 40px; transform: none; } to { opacity: 1; } }
@keyframes hup { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .bhome *, .bhome { animation: none !important; } }

@media (max-width: 820px) {
  .hbg::after { background: linear-gradient(180deg, rgba(10,8,20,.35) 0%, rgba(10,8,20,0) 30%, rgba(10,8,20,0) 52%, rgba(10,8,20,.82) 78%, rgba(10,8,20,.95) 100%); }
  .hphoto { left: 50%; height: auto; width: min(118vw, 560px); max-width: none; max-height: 70%; bottom: 0; }
  .hcopy { left: 16px; right: 16px; top: auto; bottom: 34px; transform: none; width: auto; align-items: stretch; }
  .hcopy .hlogo { width: min(78vw, 360px); align-self: center; }
  .hcopy { top: max(18px, env(safe-area-inset-top)); bottom: max(30px, env(safe-area-inset-bottom)); justify-content: flex-start; }
  .hcopy .hnav { margin-top: auto; }
  .hcard { left: var(--px); top: var(--py); }
  .hby { align-self: center; margin-top: 8px; font-size: 21px; }
  .hnav { margin-top: 0; gap: 8px; }
  .hbtn { font-size: 22px; padding: 15px 4px 12px; min-height: 52px; }
  .hbtn.main { font-size: 27px; padding: 17px 8px 14px; }
  .hcard.wide { display: none; }
  .hcard.far { filter: blur(16px); opacity: .5; }
  .hedit { top: auto; bottom: 64px; right: 12px; display: none; }
  .hcopyr { bottom: max(8px, env(safe-area-inset-bottom)); font-size: 11.5px; }
}
@media (max-width: 820px) and (max-height: 640px) {
  .hphoto { max-height: 58%; }
  .hbtn { padding: 12px 4px 9px; min-height: 46px; }
  .hbtn.main { padding: 14px 8px 11px; }
}

/* the slide editor on a phone: the bar scrolls sideways inside itself, never the page */
@media (max-width: 900px) {
  .topbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar .btn { flex: none; min-height: 38px; }
  .topbar .savestate { display: none; }
}
@media (max-width: 560px) {
  .topbar h1 { display: none; }
}

/* v6: each quadrant colours the screen, a clear name step, all four on phones */
@property --cq { syntax: '<color>'; inherits: true; initial-value: #f5881f; }
.builder { --cq: #f5881f; transition: --cq .7s ease; }
.btop { box-shadow: inset 0 -3px 0 var(--cq); }
.bwrap { background: radial-gradient(120% 95% at 50% 38%, color-mix(in srgb, var(--cq) 24%, var(--ui-bg)) 0%, color-mix(in srgb, var(--cq) 9%, var(--ui-bg)) 100%); }
.bpanel { background: color-mix(in srgb, var(--cq) 7%, var(--ui-panel)); }
.bhead { position: static; background: transparent; border-bottom: 0; margin: -14px -14px 0; padding: 14px 14px 12px; }
.bchips { position: sticky; top: -14px; z-index: 3; margin: 0 -14px 2px; padding: 10px 14px; background: color-mix(in srgb, var(--cq) 7%, var(--ui-panel)); border-bottom: 1px solid color-mix(in srgb, var(--cq) 25%, var(--ui-line)); }
.bchips .bview { margin-top: 0; }
.bview .q4 { display: inline-grid; grid-template-columns: 5px 5px; gap: 1.5px; margin-right: 6px; vertical-align: -1px; }
.bview .q4 i { width: 5px; height: 5px; border-radius: 1.5px; background: #f5881f; }
.bview .q4 i:nth-child(2) { background: #00a6ca; } .bview .q4 i:nth-child(3) { background: #3f9249; } .bview .q4 i:nth-child(4) { background: #6a4795; }
.bview button[data-show="all"][aria-checked="true"] .q4 i { background: #fff; }

.bgrp { margin-top: 14px; border-radius: 18px; padding: 0 10px 6px; background: color-mix(in srgb, var(--qc) 9%, var(--ui-panel)); border: 1px solid color-mix(in srgb, var(--qc) 30%, transparent); overflow: clip; --bar: color-mix(in srgb, var(--qc) 4%, var(--ui-panel)); }
.bgtitle { margin: 0 -10px 10px; padding: 11px 12px; background: var(--qc); color: #fff; font-size: 14px; }
.bgtitle .bdot { background: #fff; }
.bgtitle .bcount { background: #fff; color: var(--qc); }
.bgtitle .blink { color: rgba(255,255,255,.92); }
.bgtitle .blink:hover { color: #fff; background: rgba(255,255,255,.2); }
.bgtitle .lvcount { color: #fff; }
.bgrp .bfield > span, .bgrp .lvsub { color: color-mix(in srgb, var(--qc) 55%, var(--ui-muted)); }

.bname { gap: 7px; padding: 12px; border-radius: 14px; background: var(--ui-panel); border: 1.5px solid color-mix(in srgb, var(--cq) 45%, var(--ui-line)); }
.bstep, .bname > .bstep { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: var(--ui-text); }
.bstep b { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--cq); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.bname input { font-size: 19px; padding: 12px 13px; }
.bname small { font-size: 12px; color: var(--ui-muted); }
.bname.empty input { border-color: var(--cq); animation: bnudge 2.4s ease-in-out infinite; }
@keyframes bnudge { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--cq) 24%, transparent); } }
.bstep2 { margin: 14px 2px 0; }

.bpen { width: auto; gap: 5px; padding: 0 10px 0 8px; font-size: 12.5px; font-weight: 600; color: var(--qc); background: color-mix(in srgb, var(--qc) 12%, transparent); }
.bpen svg { width: 15px; height: 15px; }

.bnav button { padding: 4px 14px 3px; }
.bnav button small { display: block; font: 600 9px/1.1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; opacity: .75; }
.lvtag { position: absolute; top: 12px; left: 12px; z-index: 2; display: none; padding: 6px 12px; border-radius: 999px; background: var(--cq); color: #fff; font: 700 11.5px/1.2 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: none; }
.builder.lvmode .lvtag { display: block; animation: fadein .4s ease; }
.bzoom { display: none; }
.bcopy { line-height: 1.5; }
.ccopy { font-size: 15px; }

/* home: lighter scene, buttons a little higher */
.bhome { background: #3a3458; }
.hbg::after { background: radial-gradient(120% 90% at 72% 45%, rgba(10,8,20,0) 0%, rgba(10,8,20,.1) 55%, rgba(10,8,20,.32) 100%), linear-gradient(90deg, rgba(10,8,20,.32) 0%, rgba(10,8,20,.04) 55%, rgba(10,8,20,0) 100%); }
.hcopy { top: 45%; }
.hbtn small { display: block; margin-top: 5px; font: 600 10.5px/1.1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .82; }
.hbtn:not(.main) { background: rgba(24,18,48,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hcopyr span { display: block; margin-top: 2px; opacity: .9; }

@media (max-width: 820px) {
  .builder { grid-template-rows: auto clamp(170px, 31vh, 290px) minmax(0, 1fr); transition: --cq .7s ease, grid-template-rows .35s ease; }
  .builder.pbig { grid-template-rows: auto min(64vh, 118vw) minmax(0, 1fr); }
  .bhead { margin: -12px -12px 0; padding: 12px 12px 10px; }
  .bchips { top: -12px; margin: 0 -12px 2px; padding: 8px 12px; }
  .builder.phone.pall .bgrp { display: block; }
  .bnav button small { display: none; }
  .bnav button { padding: 9px 4px 7px; }
  .bzoom { display: inline-flex; align-items: center; position: absolute; right: 8px; top: 8px; z-index: 2; min-height: 32px; padding: 0 13px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: #222; font-size: 12.5px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; }
  .lvtag { top: 8px; left: 8px; font-size: 10.5px; padding: 5px 10px; }
  .bpen { height: 34px; }
  .hbg::after { background: linear-gradient(180deg, rgba(10,8,20,.22) 0%, rgba(10,8,20,0) 28%, rgba(10,8,20,0) 52%, rgba(10,8,20,.38) 76%, rgba(10,8,20,.58) 100%); }
  .hcopy { top: max(18px, env(safe-area-inset-top)); bottom: max(78px, calc(env(safe-area-inset-bottom) + 60px)); }
  .hbtn small { font-size: 9.5px; margin-top: 4px; }
  .hcopyr { font-size: 11px; }
}
@media (max-width: 820px) and (max-height: 700px) {
  .hcopy { bottom: max(60px, calc(env(safe-area-inset-bottom) + 50px)); }
}
@media (max-width: 820px) {
  .bgtitle { gap: 4px; font-size: 13px; letter-spacing: .03em; }
  .bgtitle .blink { font-size: 11.5px; padding: 3px 4px; }
}

/* v7: Build your own as a guided flow, softer colour */
.bwrap { background: radial-gradient(120% 95% at 50% 38%, color-mix(in srgb, var(--cq) 11%, var(--ui-bg)) 0%, color-mix(in srgb, var(--cq) 4%, var(--ui-bg)) 100%); }
.bpanel, .bchips { background: color-mix(in srgb, var(--cq) 3.5%, var(--ui-panel)); }
.bgrp { background: color-mix(in srgb, var(--qc) 4.5%, var(--ui-panel)); border-color: color-mix(in srgb, var(--qc) 18%, transparent); --bar: color-mix(in srgb, var(--qc) 2.5%, var(--ui-panel)); }
.brow:not(.on) > .bbar .bmoney { display: none; }
.bpen { color: var(--ui-muted); background: transparent; border: 1px solid var(--ui-line); height: 28px; font-size: 12px; font-weight: 500; }
.bpen svg { fill: currentColor; stroke: none; width: 16px; height: 16px; }
.bpen:hover, .brow.editing .bpen { color: var(--qc); border-color: color-mix(in srgb, var(--qc) 45%, transparent); background: color-mix(in srgb, var(--qc) 8%, transparent); }
.builder.flow #bdl, .builder.flow .bzoom, .builder.flow .lvtag { display: none; }

.fkick { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ui-muted); }
.fttl { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 50px; line-height: 1; margin: 6px 0 0; color: var(--ui-text); }
.fhelp { margin: 10px 0 0; font-size: 14px; color: var(--ui-muted); }
.fhelp b { color: var(--ui-text); font-weight: 650; }
.fnext { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border: 0; border-radius: 14px; font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: .05em; color: #fff; background: var(--cq); cursor: pointer; box-shadow: 0 8px 22px color-mix(in srgb, var(--cq) 30%, transparent); transition: transform .15s, filter .2s; }
.fnext:hover { filter: brightness(1.07); }
.fnext:active { transform: scale(.97); }
.fnext svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.builder.flow[data-step="0"] { grid-template-columns: minmax(0, 1fr); }
.builder.flow[data-step="0"] .bwrap { display: none; }
.builder.flow[data-step="0"] .bpanel { display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 0; }
.fname { width: min(560px, 100%); text-align: center; margin: auto 0 0; animation: fadein .4s ease; }
.fname .fttl { font-size: clamp(44px, 6vw, 68px); }
.fname input { display: block; width: 100%; margin-top: 22px; font-size: 26px; font-weight: 600; text-align: center; padding: 16px 18px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--cq) 40%, var(--ui-line)); background: var(--ui-bg); color: var(--ui-text); transition: border-color .2s, box-shadow .2s; }
.fname input:focus { outline: none; border-color: var(--cq); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cq) 18%, transparent); }
.fname .fnext { width: 100%; margin-top: 22px; background: linear-gradient(90deg, #f5881f, #00a6ca 38%, #3f9249 68%, #6a4795); box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.fskip { display: inline-block; margin-top: 10px; font-size: 13px; }
.builder.flow[data-step="0"] .bcopy { margin-top: auto; padding-top: 24px; }

.fhead { margin: 0 0 12px; }
.fprog { display: flex; gap: 6px; }
.fprog button { flex: 1; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.fprog button::before { content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 6px; border-radius: 3px; background: var(--ui-line); transition: background .4s; }
.fprog button.past::before { background: color-mix(in srgb, var(--qc) 55%, var(--ui-line)); }
.fprog button.now::before { background: var(--qc); }
.fmeta { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ui-muted); margin-top: 2px; }
.fmeta span:first-child { font-weight: 650; color: var(--ui-text); }
.fgrp { margin-top: 0; animation: fadein .35s ease; }
.fsub { font-size: 11px; font-weight: 600; opacity: .85; letter-spacing: .06em; }
.fhint { margin: 0 2px 10px; font-size: 12.5px; color: var(--ui-muted); }
.ftools { display: flex; justify-content: center; gap: 4px; margin: 8px 0 2px; }
.ftools .blink { color: var(--ui-muted); }
.fnav { position: sticky; bottom: -28px; z-index: 3; display: flex; gap: 10px; margin: 14px -14px 0; padding: 12px 14px 16px; background: color-mix(in srgb, var(--cq) 3.5%, var(--ui-panel)); border-top: 1px solid var(--ui-line); }
.fback { flex: none; min-height: 50px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--ui-line); background: var(--ui-panel); color: var(--ui-text); font-size: 15px; font-weight: 600; cursor: pointer; }
.fback:active { transform: scale(.97); }
.fnav .fnext { flex: 1; font-size: 21px; padding: 0 12px; }

.fdone { padding: 10px 2px 0; animation: fadein .4s ease; }
.fdone .fttl { font-size: 44px; }
.fdl { width: 100%; margin-top: 20px; background: #2f6fde; box-shadow: 0 10px 24px rgba(47,111,222,.28); font-size: 26px; min-height: 56px; }
.fedit { margin-top: 22px; }
.fedit > span { display: block; font-size: 12px; color: var(--ui-muted); margin-bottom: 7px; }
.fedit > div { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { border: 1.5px solid color-mix(in srgb, var(--qc) 55%, transparent); color: var(--qc); background: color-mix(in srgb, var(--qc) 7%, var(--ui-panel)); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; }
.fchip:hover { background: color-mix(in srgb, var(--qc) 15%, var(--ui-panel)); }
.frow { display: flex; gap: 10px; margin-top: 16px; }

@media (max-width: 820px) {
  /* the preview stays on top, the list scrolls under it */
  .builder.flow { grid-template-rows: auto clamp(150px, 27vh, 230px) minmax(0, 1fr); }
  .builder.flow .bpanel { grid-row: 3; }
  .builder.flow .bwrap { grid-row: 2; border-top: 0; border-bottom: 1px solid var(--ui-line); }
  .builder.flow[data-step="0"] { grid-template-rows: auto minmax(0, 1fr); }
  .builder.flow[data-step="0"] .bpanel { grid-row: 2; }
  .builder.flow[data-step="0"] .bpanel { padding: 20px 18px 16px; }
  .fname .fnext { min-height: 56px; }
  .builder.flow[data-step="5"] { grid-template-rows: auto minmax(0, 1fr) auto; }
  .builder.flow[data-step="5"] .bwrap { grid-row: 2; border-top: 0; border-bottom: 1px solid var(--ui-line); }
  .builder.flow[data-step="5"] .bpanel { grid-row: 3; max-height: 52vh; padding-bottom: 14px; }
  .fdone { padding-top: 2px; }
  .fdone .fttl { font-size: 34px; }
  .fdl { margin-top: 14px; }
  .fedit { margin-top: 14px; }
  .fnav { bottom: -30px; margin: 12px -12px 0; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
  .fhead { margin-bottom: 10px; }
}
@media (max-width: 820px) and (max-height: 720px) {
  .builder.flow { grid-template-rows: auto clamp(118px, 21vh, 180px) minmax(0, 1fr); }
  .fhint { display: none; }
  .fhead { margin-bottom: 8px; }
  .fnav .fnext, .fback { min-height: 44px; }
  .fnav .fnext { font-size: 19px; }
  .fnav { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}

/* v8: Andrew's levels as a summary */
.lvchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 2px 4px; }
.lvchip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; font-size: 13px; font-weight: 550; line-height: 1.2; color: color-mix(in srgb, var(--qc) 70%, var(--ui-text)); background: color-mix(in srgb, var(--qc) 10%, var(--ui-panel)); border: 1px solid color-mix(in srgb, var(--qc) 25%, transparent); animation: lvchip .4s cubic-bezier(.2,.9,.3,1.2) var(--d) both; }
.lvchip b { font-weight: 700; font-size: 11.5px; color: #fff; background: var(--qc); border-radius: 999px; padding: 1px 6px; }
.lvnone { font-size: 13px; color: var(--ui-muted); padding: 4px 2px; }
.lvfoot { font-size: 12px; color: var(--ui-muted); margin: 8px 2px 4px; }
.lvhead .lvsum { margin-top: 8px; }
@keyframes lvchip { from { opacity: 0; transform: translateY(6px) scale(.92); } }
.bview button[data-show="all"] { display: inline-flex; align-items: center; gap: 6px; }
.bview .q4i { width: 14px; height: 14px; flex: none; display: block; }
.bview button[data-show="all"][aria-checked="true"] .q4i rect { stroke: rgba(255,255,255,.9); stroke-width: .8; }

/* v9: the dollar amount on its own line, in the light type-line font */
.namt { font-weight: 400; letter-spacing: .04em; color: #fff; }

/* every ticked box and smaller box can take an amount; it only shows once ticked */
.bsub:not(.on):not(.nocheck) .bmoney { display: none; }
.bsub.on .bmoney { animation: bsubin .3s cubic-bezier(.2,.9,.3,1.2) both; }

/* ================= v9 polish: calmer, one type system ================= */
@font-face { font-family: 'Inter'; src: url(fonts/Inter-latin-var.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
/* Bebas for headings and the main buttons; Inter for everything else in three sizes */
.builder { --fs-s: 13px; --fs-m: 15px; --fs-h: 30px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: var(--fs-m); }
.builder button, .builder input, .builder select { font-family: inherit; }
.builder .fnext, .builder .bnav button, .builder .hbtn, .builder .fttl { font-family: 'Bebas Neue', sans-serif; }
.builder .bpanel { padding: 22px 22px 32px; }

/* the quadrant section: no frame, a quiet coloured heading */
.builder .fgrp { background: none; border: 0; padding: 0; overflow: visible; margin-top: 0; }
.builder .fgrp > .bgtitle { margin: 6px 0 4px; padding: 0; background: none; color: var(--qc); font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: var(--fs-h); letter-spacing: .03em; line-height: 1.05; gap: 10px; text-transform: none; }
.builder .fgrp > .bgtitle .bdot { display: none; }
.builder .fgrp > .bgtitle .bcount { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; height: 22px; min-width: 22px; background: var(--qc); color: #fff; }
.builder .fgrp > .bgtitle .fsub { font-family: 'Inter', sans-serif; font-size: var(--fs-s); font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--ui-muted); opacity: 1; }
.builder .fhint { font-size: var(--fs-s); margin: 0 0 18px; line-height: 1.45; }
.builder .fhead { margin-bottom: 20px; }
.builder .fmeta { font-size: var(--fs-s); }

/* rows: soft fills, no outlines, more air */
.builder .fgrp .brow { margin-bottom: 10px; }
.builder .fgrp .bbar { background: color-mix(in srgb, var(--qc) 4%, var(--ui-panel)); border-radius: 14px; box-shadow: none; }
.builder .fgrp .brow.on > .bbar { background: color-mix(in srgb, var(--qc) 11%, var(--ui-panel)); box-shadow: none; }
.builder .fgrp .btab { background: none; width: 52px; }
.builder .fgrp .btab .bbox { width: 24px; height: 24px; border-radius: 7px; background: var(--ui-panel); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--qc) 40%, var(--ui-line)); transition: background .2s, box-shadow .2s; }
.builder .fgrp .btab .bbox svg { width: 16px; height: 16px; }
.builder .fgrp .btab .bbox .g { stroke: transparent; }
.builder .fgrp .bline input:checked + .btab .bbox { background: var(--qc); box-shadow: none; }
.builder .fgrp .bline input:checked + .btab .bbox .d { stroke: #fff; }
.builder .fgrp .bbox::after { border-color: var(--qc); }
.builder .fgrp .blabel { font-size: var(--fs-m); font-weight: 500; color: var(--ui-text); padding: 16px 10px 16px 0; }
.builder .fgrp .blabel small { font-size: var(--fs-s); }

/* quiet controls: the edit button is just an icon, shown on hover or once a box is open */
.builder .bpen, .builder .fgrp .bpen { width: 34px; height: 34px; padding: 0; gap: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ui-muted); opacity: 0; transition: opacity .2s, background .2s, color .2s; }
.builder .bpen span { display: none; }
.builder .bpen svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.builder .brow.on:hover > .bbar .bpen, .builder .brow.editing > .bbar .bpen, .builder .bpen:focus-visible { opacity: 1; }
.builder .brow.editing > .bbar .bpen { color: var(--qc); background: color-mix(in srgb, var(--qc) 12%, transparent); }
@media (hover: none) { .builder .brow.on > .bbar .bpen { opacity: .75; } }

/* the amount field, soft and filled instead of underlined */
.builder .bmoney { font-size: var(--fs-s); gap: 4px; align-items: center; margin-right: 6px; }
.builder .bmoney input { width: 96px; border: 0; border-radius: 9px; padding: 7px 9px; background: color-mix(in srgb, var(--qc) 9%, var(--ui-panel)); font-size: var(--fs-m); }
.builder .bmoney input:focus { width: 110px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--qc) 45%, transparent); }
.builder .bsubsin.grid .bmoney input { width: 74px; }

/* what opens under a ticked box */
.builder .beditin { margin-left: 52px; }
.builder .brow.on.editing .beditin { padding: 14px 0 8px; }
.builder .bfield { gap: 6px; margin-bottom: 12px; }
.builder .bfield > span, .builder .bgrp .bfield > span { font-size: var(--fs-s); text-transform: none; letter-spacing: 0; color: var(--ui-muted); }
.builder .bfield input, .builder .bfield select { border: 0; border-radius: 10px; padding: 10px 12px; font-size: var(--fs-m); background: color-mix(in srgb, var(--qc) 6%, var(--ui-bg)); }
.builder .bsubsin { padding-left: 52px; }
.builder .bsub { padding: 7px 0; }
.builder .bsub .blabel { font-size: var(--fs-m); }
.builder .bsub .bbox.sm { border-width: 2px; border-color: color-mix(in srgb, var(--qc) 40%, var(--ui-line)); }

.builder .badd input { border: 0; background: color-mix(in srgb, var(--qc) 4%, var(--ui-panel)); border-radius: 14px; padding: 13px 14px; font-size: var(--fs-m); }
.builder .badd .btn { border: 0; background: color-mix(in srgb, var(--qc) 12%, var(--ui-panel)); border-radius: 12px; padding: 0 16px; }
.builder .blink, .builder .ftools .blink { font-size: var(--fs-s); }
.builder .ftools { margin: 14px 0 4px; }
.builder .fchip { font-size: var(--fs-s); border-width: 0; background: color-mix(in srgb, var(--qc) 12%, var(--ui-panel)); padding: 8px 14px; }
.builder .fedit > span, .builder .fkick { font-size: var(--fs-s); }
.builder .fhelp { font-size: var(--fs-m); }
.builder .fttl { font-size: 44px; }
.builder .fdone .fttl { font-size: 40px; }

/* bottom bar: Back, where they are, Next */
.builder .fnav { border-top: 0; align-items: center; background: color-mix(in srgb, var(--ui-panel) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -12px 24px -14px rgba(0,0,0,.18); }
.builder .fback { display: inline-flex; align-items: center; gap: 4px; border: 0; background: color-mix(in srgb, var(--qc, var(--cq)) 8%, var(--ui-panel)); font-size: var(--fs-m); font-weight: 600; padding: 0 16px 0 10px; }
.builder .fback svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fstep { display: none; flex-direction: column; align-items: center; gap: 5px; flex: none; min-width: 58px; }
.fdots { display: flex; gap: 4px; }
.fdots i { width: 7px; height: 7px; border-radius: 4px; background: var(--ui-line); transition: width .3s, background .3s; }
.fdots i.past { background: color-mix(in srgb, var(--qc) 55%, var(--ui-line)); }
.fdots i.now { width: 20px; background: var(--qc); }
.fstep small { font-size: 12px; font-weight: 600; color: var(--ui-muted); }
@media (max-width: 820px) {
  .builder { --fs-m: 16px; --fs-h: 28px; }
  .builder .bpanel { padding: 16px 16px 30px; }
  .builder .fhead .fprog, .builder .fhead .fmeta span:first-child { display: none; }
  .builder .fhead { margin-bottom: 8px; }
  .builder .fstep { display: flex; }
  .builder .fback { width: 48px; padding: 0; justify-content: center; }
  .builder .fback span { display: none; }
  .builder .fnav { margin: 14px -16px 0; padding-left: 16px; padding-right: 16px; bottom: -30px; }
  .builder .fnav .fnext { font-size: 20px; }
  .builder .beditin, .builder .bsubsin { margin-left: 0; padding-left: 0; }
  .builder .beditin { margin-left: 14px; }
  .builder .bsubsin { padding-left: 52px; }
  .builder .fttl { font-size: 40px; }
  .builder .fdone .fttl { font-size: 34px; }
}

/* finish moment: the four quadrants fly in and settle together, then the download screen rises */
.builder.assemble #bstage .card { animation: qassemble .95s cubic-bezier(.2,.9,.25,1.12) both; }
.builder.assemble #bstage .card.q-personal { --fx: -320px; --fy: -220px; --fr: -9deg; }
.builder.assemble #bstage .card.q-business { --fx: 320px; --fy: -220px; --fr: 8deg; animation-delay: .07s; }
.builder.assemble #bstage .card.q-retirement { --fx: -320px; --fy: 260px; --fr: 7deg; animation-delay: .14s; }
.builder.assemble #bstage .card.q-legacy { --fx: 320px; --fy: 260px; --fr: -8deg; animation-delay: .21s; }
.builder.assemble #bstage .slide { animation: qsettle 1.4s ease both; }
.builder.assemble .fdone > * { animation: qrise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: .75s; }
.builder.assemble .fdone > :nth-child(2) { animation-delay: .82s; }
.builder.assemble .fdone > :nth-child(3) { animation-delay: .89s; }
.builder.assemble .fdone > :nth-child(n+4) { animation-delay: .96s; }
@keyframes qassemble { from { translate: var(--fx) var(--fy); rotate: var(--fr); opacity: 0; } 55% { opacity: 1; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }
@keyframes qsettle { 0%, 62% { filter: none; } 78% { filter: brightness(1.12); } 100% { filter: none; } }
@keyframes qrise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .builder.assemble #bstage .card, .builder.assemble .fdone > *, .builder.assemble #bstage .slide { animation: none; } }

/* v9.1: a smaller box's name field sits right under it once ticked */
.builder .bsub { flex-wrap: wrap; }
.builder .bsubname { flex: 1 0 100%; display: none; padding: 6px 0 2px 28px; }
.builder .bsub.on .bsubname, .builder .bsub.nocheck .bsubname { display: block; animation: bsubin .3s cubic-bezier(.2,.9,.3,1.2) both; }
.builder .bsubname input { width: 100%; border: 0; border-radius: 10px; padding: 9px 12px; font-size: var(--fs-m); background: color-mix(in srgb, var(--qc) 6%, var(--ui-bg)); color: var(--ui-text); }
.builder .bsubname input:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--qc) 45%, transparent); }
.builder .bsub.nocheck .bsubname { padding-left: 0; }
.builder .bsub .blabel small { color: var(--ui-muted); font-weight: 400; font-size: var(--fs-s); }
.builder .bsubsin.grid .bsubname { padding-left: 0; }
/* name and amount share the line under a ticked smaller box */
.builder .bsubfill { flex: 1 0 100%; display: none; align-items: center; gap: 8px; padding: 6px 0 2px 28px; }
.builder .bsub.on .bsubfill { display: flex; animation: bsubin .3s cubic-bezier(.2,.9,.3,1.2) both; }
.builder .bsubfill .bsubname { display: block; flex: 1; min-width: 0; padding: 0; animation: none; }
.builder .bsubfill .bmoney { margin: 0; flex: none; }
.builder .bsubfill .bmoney input, .builder .bsubsin.grid .bsubfill .bmoney input { width: 92px; }
.builder .bsubsin.grid .bsubfill { padding-left: 0; }

/* ================= v9.1 header: one calm row ================= */
.builder .btop { gap: 12px; padding: 8px 16px; min-height: 60px; }
.builder .bnav { margin: 0 auto; background: transparent; border: 0; gap: 2px; padding: 0; }
.builder .bnav button { font-size: 17px; letter-spacing: .05em; padding: 6px 14px 4px; color: color-mix(in srgb, var(--ui-muted) 85%, transparent); border-radius: 999px; }
.builder .bnav button:hover { color: var(--ui-text); background: color-mix(in srgb, var(--ui-text) 5%, transparent); }
.builder .bnav button small { font-size: 8.5px; font-weight: 500; opacity: .7; }
.builder .bnav button[aria-current="true"], .builder .bnav button[data-mode="build"][aria-current="true"] { background: color-mix(in srgb, var(--cq) 15%, var(--ui-panel)); color: var(--cq); }
.builder .btop .sp { display: none; }
.builder .btn.primary.bdlbtn { background: var(--ui-text); border-color: var(--ui-text); color: var(--ui-panel); border-radius: 999px; padding: 8px 16px; font-weight: 600; }
.builder .btn.primary.bdlbtn:hover { filter: none; opacity: .88; }
.builder.lvmode .lvtag, .builder .lvtag { display: none; }
/* bigger preview: a small expand icon in the preview's corner */
.builder .bzoom { top: auto; bottom: 10px; right: 10px; width: 38px; height: 38px; min-height: 0; padding: 0; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--ui-panel) 90%, transparent); box-shadow: 0 3px 12px rgba(0,0,0,.16); }
.builder .bzoom span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.builder .bzoom::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--zi) center / contain no-repeat; mask: var(--zi) center / contain no-repeat; --zi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E"); }
.builder .bzoom[aria-pressed="true"]::before { --zi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10h-6V4M4 14h6v6M14 10l6.5-6.5M10 14l-6.5 6.5'/%3E%3C/svg%3E"); }
@media (max-width: 820px) {
  .builder .btop { flex-wrap: nowrap; padding: 8px 10px; gap: 6px; min-height: 0; }
  .builder .bnav { order: 0; flex: 1 1 auto; margin: 0; }
  .builder .bnav button { flex: 1 1 auto; font-size: 15px; padding: 7px 6px 5px; min-height: 38px; letter-spacing: .03em; }
  .builder .bnav button[data-mode="build"] { flex: 1.4 1 auto; }
  /* the active level keeps a small "Andrew's version" under its name */
  .builder .bnav button[aria-current="true"] small { display: block; font-size: 7.5px; letter-spacing: .05em; margin-top: 1px; }
  .builder .bhomebtn { width: 30px; height: 30px; }
  .builder .btn.primary.bdlbtn { width: 38px; height: 38px; min-height: 0; padding: 0; justify-content: center; }
  .builder #bback { display: none; }
}
@media (max-width: 370px) {
  .builder .bnav button { font-size: 13.5px; padding: 7px 4px 5px; }
}
@media (max-width: 820px) {
  /* the active tab already reads "Level 3, Andrew's version", so the panel skips repeating it */
  .builder .lvhead .lvtop { display: none; }
}

/* inside Build your own the header stays focused: home, the title, nothing else to jump to */
.bflowttl { display: none; }
.builder.flow .bnav { display: none; }
.builder.flow .bflowttl { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .06em; color: var(--ui-text); margin-right: auto; }

/* a Download button at the bottom of each level too */
.builder .lvfoot2 { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; }
.builder .lvfoot2 .btn { align-self: center; }
.builder .fdl, .builder .lvdl { background: var(--ui-text); color: var(--ui-panel); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.builder .lvdl { width: 100%; margin-top: 0; font-size: 22px; min-height: 52px; }
/* the download menu lives in the header, so the header sits above the sticky chips in the list */
.builder .btop { z-index: 10; }

/* ================= v12: one Download button style everywhere; clear Home and Back ================= */
.builder .dlbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ui-text); color: var(--ui-panel); font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; cursor: pointer; box-shadow: none; transition: opacity .2s, transform .15s; white-space: nowrap; }
.builder .dlbtn:hover { opacity: .88; filter: none; }
.builder .dlbtn:active { transform: scale(.97); }
.builder .dlbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.builder .dlbtn.dlwide { width: 100%; height: 52px; margin-top: 18px; font-size: 16px; }
.builder .lvfoot2 .dlbtn.dlwide { margin-top: 0; }
@media (max-width: 820px) {
  .builder .bdlbtn.dlbtn { width: auto; height: 38px; padding: 0 12px; gap: 6px; font-size: 14px; }
  .builder .bdlbtn.dlbtn span { display: inline; }
}
/* Home: a house with its word; Back only inside Build your own */
.builder .bhomebtn { width: auto; height: 38px; padding: 0 12px 0 10px; gap: 6px; border-radius: 999px; color: var(--ui-text); font-size: 14px; font-weight: 600; background: color-mix(in srgb, var(--ui-text) 6%, transparent); }
.builder .bhomebtn svg, .builder .bbackbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.builder .bhomebtn:hover { background: color-mix(in srgb, var(--ui-text) 11%, transparent); }
.bbackbtn { display: none; }
.builder.flow .bbackbtn { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--cq) 12%, var(--ui-panel)); color: var(--ui-text); font-size: 14px; font-weight: 600; cursor: pointer; }
.builder.flow .bflowttl { margin: 0 auto; }
.builder.flow .bhomebtn { order: 3; }
@media (max-width: 820px) {
  /* in the levels the tabs need the room, so Home is the house alone */
  .builder:not(.flow) .bhomebtn { width: 38px; padding: 0; justify-content: center; }
  .builder:not(.flow) .bhomebtn span { display: none; }
  .builder:not(.flow) .bdlbtn.dlbtn { width: 38px; padding: 0; }
  .builder:not(.flow) .bdlbtn.dlbtn span { display: none; }
  .builder.flow .bflowttl { font-size: 18px; }
}

/* v12 Andrew's levels: the preview fills the screen, a level slider under it, the checklist in a sheet */
.builder .lvnav, .builder .lvscrim { display: none; }
.builder.lvmode { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.builder.lvmode .bwrap { grid-column: 1; grid-row: 2; border-bottom: 0; }
.builder.lvmode .bzoom { display: none; }
/* the checklist slides in over the preview */
.builder.lvmode .bpanel { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(420px, 92vw); border-right: 1px solid var(--ui-line); box-shadow: 0 0 60px rgba(0,0,0,.22); transform: translateX(-104%); visibility: hidden; transition: transform .35s cubic-bezier(.3,.7,.3,1), visibility 0s .35s; }
.builder.lvmode.lvsheet .bpanel { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.3,.7,.3,1); }
.builder.lvmode .lvscrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(20,18,16,.38); animation: fadein .25s ease; }
.builder.lvmode .lvscrim[hidden] { display: none; }
.builder.lvmode .lvhead .lvtop { display: flex; align-items: flex-start; }
.lvclose { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ui-line); background: var(--ui-panel); color: var(--ui-text); display: grid; place-items: center; cursor: pointer; }
.lvclose svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* changing level slides the new one in from the side it came from */
@keyframes lvinN { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes lvinP { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
.bwrap.lvin-n #bstage > * { animation: lvinN .42s cubic-bezier(.25,.8,.3,1); }
.bwrap.lvin-p #bstage > * { animation: lvinP .42s cubic-bezier(.25,.8,.3,1); }
@media (max-width: 820px) {
  .builder.lvmode { grid-template-rows: auto minmax(0, 1fr) auto; }
  .builder.lvmode .bpanel { top: auto; left: 0; right: 0; width: auto; max-height: 82vh; border-right: 0; border-radius: 20px 20px 0 0; transform: translateY(104%); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
.builder.lvmode.phone .bgrp { display: block; animation: none; }
@media (min-width: 821px) {
}
@media (max-width: 380px) {
}
.builder.lvmode .bwrap { touch-action: pan-y; }
/* Duplicate: a quiet copy icon beside the ⋯, and a text button inside More */
.builder .bdup { display: none; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ui-muted); cursor: pointer; opacity: 0; transition: opacity .2s, background .2s, color .2s, transform .15s; }
.builder .bdup svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.builder .brow.on > .bbar .bdup { display: flex; }
.builder .brow.on:hover > .bbar .bdup, .builder .brow.editing > .bbar .bdup, .builder .bdup:focus-visible { opacity: 1; }
.builder .bdup:hover { color: var(--qc); background: color-mix(in srgb, var(--qc) 12%, transparent); }
.builder .bdup:active { transform: scale(.9); }
@media (hover: none) { .builder .brow.on > .bbar .bdup { opacity: .6; } }
.builder .bacts { display: flex; flex-wrap: wrap; gap: 8px; }
.builder .bacts .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; margin-right: 6px; vertical-align: -3px; }
/* v13 Andrew's levels get the same header as Build your own: Back, the title, Home */
.builder.lvmode .bnav, .builder.lvmode #bdl { display: none; }
.builder.lvmode .bflowttl { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .06em; color: var(--ui-text); margin: 0 auto; }
.builder.lvmode .bbackbtn { display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--cq) 12%, var(--ui-panel)); color: var(--ui-text); font-size: 14px; font-weight: 600; cursor: pointer; }
.builder.lvmode .bhomebtn { order: 3; }
@media (max-width: 820px) {
  .builder.lvmode .bhomebtn { width: auto; padding: 0 12px 0 10px; }
  .builder.lvmode .bhomebtn span { display: inline; }
  .builder.lvmode .bflowttl { font-size: 18px; }
}
/* v13 a single quadrant sits on its own colour with the blueprint, like the slides */
.builder.qsolo .bwrap { background: var(--qbg) url(assets/blueprint.svg) center / cover no-repeat; transition: background-color .5s ease; }
.builder.qsolo .pcopy, .builder.qsolo .pname { color: rgba(255,255,255,.88); }
/* v14 a box's own name sits under the asset in the list too; the $ field is lighter */
.builder .blabel small.bnm { display: block; margin-top: 1px; color: var(--ui-text); opacity: .62; font-weight: 500; }
.builder .bmoney input { background: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 16%, transparent); }
.builder .bmoney input:focus { background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--qc) 40%, transparent); }
.builder .bmoney > span { opacity: .75; }

/* v17 levels: one floating frosted capsule. Level 1 2 3 between round Checklist and Download buttons, the quadrants underneath. */
.builder.lvmode .bwrap { grid-row: 2 / 4; }
.builder.lvmode .lvnav { display: flex; justify-content: center; grid-column: 1; grid-row: 3; position: relative; z-index: 3; padding: 0 14px calc(16px + env(safe-area-inset-bottom)); pointer-events: none; font-family: Inter, system-ui, sans-serif; }
.lvcap { pointer-events: auto; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 6px; padding: 7px; border-radius: 28px; background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 50px -12px rgba(10,20,40,.35), 0 4px 14px rgba(10,20,40,.08); }
.lvtoprow { display: flex; align-items: center; gap: 6px; }
.lvicon { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 999px; background: rgba(20,22,30,.06); color: var(--ui-text); font: 600 14px/1 Inter, system-ui, sans-serif; letter-spacing: -.005em; cursor: pointer; transition: background .2s, transform .15s, color .2s; }
.lvicon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lvicon span { display: none; }
.lvicon:hover { background: rgba(20,22,30,.1); }
.lvicon:active { transform: scale(.94); }
.lvicon.lvnavdl, .lvicon.lvcheck[aria-expanded="true"] { background: #16181f; color: #fff; }
.lvicon.lvnavdl:hover { background: #2a2d37; }
.lvseg { position: relative; flex: 1; min-width: 0; display: flex; padding: 3px; border-radius: 999px; background: rgba(20,22,30,.06); }
.lvseg button { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; height: 36px; padding: 0 6px; border: 0; border-radius: 999px; background: none; color: rgba(22,24,31,.6); font: 600 14px/1 Inter, system-ui, sans-serif; letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color .25s; }
.lvseg button:hover { color: #16181f; }
.lvseg button[aria-checked="true"] { color: #16181f; }
.lvseg .lvind { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(10,20,40,.12), 0 3px 10px rgba(10,20,40,.08); transition: transform .38s cubic-bezier(.3,.8,.25,1), width .38s cubic-bezier(.3,.8,.25,1), background .3s; }
.lvqs { flex: none; }
.lvqs .lvind { background: var(--ind); box-shadow: 0 2px 8px color-mix(in srgb, var(--ind) 40%, transparent); }
.lvqs button[aria-checked="true"] { color: #fff; }
.lvqs button.lvall { flex: 0 0 44px; display: grid; place-items: center; }
.lvqs .q4i { width: 15px; height: 15px; }
.lvseg button:focus-visible, .lvicon:focus-visible { outline: 2px solid var(--cq); outline-offset: 2px; }
@media (min-width: 821px) {
  .builder.lvmode .lvnav { padding-bottom: 22px; }
  .lvcap { max-width: 640px; padding: 8px; }
  .lvicon { width: auto; padding: 0 16px 0 13px; height: 44px; }
  .lvicon span { display: inline; }
  .lvseg button { height: 38px; }
}
@media (max-width: 380px) {
  .lvseg button { font-size: 12.5px; padding: 0 3px; }
  .lvqs button.lvall { flex-basis: 36px; }
  .lvcap { padding: 6px; }
}
.lvqs button:not(.lvall) { flex: 1 1 auto; padding: 0 8px; }
@media (max-width: 820px) { .lvqs button:not(.lvall) { font-size: 13.5px; padding: 0 4px; letter-spacing: -.01em; } }
@media (max-width: 380px) { .lvqs button:not(.lvall) { font-size: 12.5px; padding: 0 2px; } }

/* v18 one premium look everywhere: frosted floating surfaces, soft shadows, pill buttons, one control type size (Inter 14 to 16, weight 600) */
:root {
  --glass: rgba(255,255,255,.8);
  --glass-line: rgba(255,255,255,.7);
  --glass-blur: blur(22px) saturate(1.7);
  --float: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 50px -12px rgba(10,20,40,.35), 0 4px 14px rgba(10,20,40,.08);
  --soft: rgba(20,22,30,.06);
  --soft-2: rgba(20,22,30,.1);
  --ink: #16181f;
}
/* header: near-white (a backdrop blur here would trap the fixed download menu inside it), a hairline instead of the coloured rule, Back and Home as matching soft pills */
.builder .btop { background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(20,22,30,.07); box-shadow: 0 6px 24px -18px rgba(10,20,40,.35); }
.builder .bbackbtn, .builder.lvmode .bbackbtn, .builder .bhomebtn { height: 40px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font: 600 14px/1 Inter, system-ui, sans-serif; letter-spacing: -.005em; transition: background .2s, transform .15s; }
.builder .bbackbtn { padding: 0 15px 0 10px; }
.builder .bhomebtn { width: auto; padding: 0 15px 0 12px; gap: 6px; }
.builder .bbackbtn:hover, .builder .bhomebtn:hover { background: var(--soft-2); }
.builder .bbackbtn:active, .builder .bhomebtn:active { transform: scale(.95); }
.builder .bflowttl { color: var(--ink); }
/* round icon buttons and dark pills share one shape */
.builder .dlbtn { background: var(--ink); color: #fff; box-shadow: 0 8px 22px -8px rgba(10,20,40,.45); font: 600 15px/1 Inter, system-ui, sans-serif; }
.builder .dlbtn:hover { background: #2a2d37; opacity: 1; }
.builder .fdl, .builder .dlbtn.dlwide { height: 52px; border-radius: 999px; font-size: 16px; }
/* Build your own: the step bar becomes the same floating capsule as the levels */
.builder .fnav { bottom: -14px; margin: 18px -4px 0; padding: 7px; gap: 6px; align-items: center; border: 1px solid var(--glass-line); border-radius: 28px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--float); }
.builder .fback { width: 44px; min-height: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 999px; background: var(--soft); color: var(--ink); }
.builder .fback span { display: none; }
.builder .fback:hover { background: var(--soft-2); }
.builder .fstep { display: flex; min-width: 56px; }
.builder .fstep small { font: 600 12px/1 Inter, system-ui, sans-serif; color: rgba(22,24,31,.55); }
.builder .fnext { font: 600 16px/1 Inter, system-ui, sans-serif; letter-spacing: -.005em; text-transform: none; border-radius: 999px; gap: 6px; }
.builder .fnext svg { width: 18px; height: 18px; margin-right: -4px; }
.builder .fnav .fnext { min-height: 44px; height: 44px; font-size: 15px; box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--cq) 70%, transparent); }
/* name step: a soft white field and a pill button */
.builder .fname input { border: 0; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(20,22,30,.08), 0 14px 40px -16px rgba(10,20,40,.3); font: 600 24px/1.2 Inter, system-ui, sans-serif; letter-spacing: -.01em; }
.builder .fname input:focus { box-shadow: 0 0 0 2px var(--cq), 0 14px 40px -16px rgba(10,20,40,.3); }
.builder .fname input::placeholder { color: rgba(22,24,31,.32); }
.builder .fname .fnext { min-height: 56px; font-size: 17px; box-shadow: 0 16px 34px -14px rgba(10,20,40,.45); }
.builder .fskip { font: 600 14px/1 Inter, system-ui, sans-serif; color: rgba(22,24,31,.55); }
/* fields inside a ticked box: white with a soft ring, matching the $ field */
.builder .bfield input, .builder .bfield select, .builder .bsubname input { border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc, #16181f) 16%, rgba(20,22,30,.08)); color: var(--ink); }
.builder .bfield input:focus, .builder .bfield select:focus, .builder .bsubname input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--qc, var(--ink)); }
.builder .bacts { margin-top: 6px; }
.builder .bacts .btn { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font: 600 13px/1 Inter, system-ui, sans-serif; box-shadow: none; }
.builder .bacts .btn:hover { background: var(--soft-2); }
.builder .bacts .btn.danger { color: #c0392b; background: rgba(192,57,43,.08); }
/* last step: the quadrants as one segmented track, the links as soft pills */
.builder .fedit > div { display: flex; flex-wrap: nowrap; gap: 0; padding: 3px; border-radius: 999px; background: var(--soft); }
.builder .fchip { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--qc); font: 600 13.5px/1 Inter, system-ui, sans-serif; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.builder .fchip:hover { background: var(--qc); color: #fff; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--qc) 60%, transparent); }
.builder .frow { gap: 8px; }
.builder .frow .blink { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--soft); color: var(--ink); font: 600 13px/1 Inter, system-ui, sans-serif; text-decoration: none; }
.builder .frow .blink:hover { background: var(--soft-2); }
/* download menu and sheet: frosted, rounder, roomier rows */
.dlmenu, #bdlmenu { border: 1px solid var(--glass-line); border-radius: 22px; padding: 8px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--float); }
.dlmenu button { padding: 11px 12px; border-radius: 14px; font: 600 14.5px/1.2 Inter, system-ui, sans-serif; color: var(--ink); align-items: center; }
.dlmenu button:hover, .dlmenu button:focus-visible { background: var(--soft); }
.dlmenu small { font: 500 12px/1.2 Inter, system-ui, sans-serif; color: rgba(22,24,31,.5); }
.dlhead { font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; color: rgba(22,24,31,.45); padding: 10px 12px 6px; }
.dlgroup + .dlgroup { border-top: 1px solid rgba(20,22,30,.07); margin-top: 6px; padding-top: 6px; }
@media (max-width: 820px) {
  .dlmenu, #bdlmenu { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 26px; padding: 10px 8px; }
  .dlmenu button { padding: 13px 12px; }
}
/* small floating pieces: picture tools, toasts, the checklist sheet */
.builder .bpictool { gap: 3px; padding: 5px; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--float); }
.builder .bpictool button { border-radius: 999px; padding: 7px 12px; font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--ink); }
.builder .bpictool button:hover { background: var(--soft); }
.builder .hint { background: rgba(22,24,31,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 999px; padding: 10px 16px; font: 600 13px/1.2 Inter, system-ui, sans-serif; box-shadow: 0 12px 30px -10px rgba(10,20,40,.45); }
.builder.lvmode .bpanel { border: 0; box-shadow: 0 0 70px rgba(10,20,40,.25); }
@media (min-width: 821px) { .builder.lvmode .bpanel { border-radius: 0 28px 28px 0; } }
@media (max-width: 820px) { .builder.lvmode .bpanel { border-radius: 28px 28px 0 0; } }
.lvclose { border: 0; background: var(--soft); color: var(--ink); }
.lvclose:hover { background: var(--soft-2); }
/* home: Level 1 2 3 sit in one frosted capsule under the gradient pill */
.bhome .hbtn.main { border-radius: 999px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.55); }
.bhome .hlevels { grid-column: 1 / -1; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); }
.bhome .hlevels .hbtn { flex: 1; min-width: 0; border: 0; border-radius: 999px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.bhome .hlevels .hbtn:hover { background: rgba(255,255,255,.2); }
.bhome.hin .hlevels { animation: hup .8s cubic-bezier(.2,.8,.2,1) .3s both; }
.bhome.hin .hlevels .hbtn { animation: none; }
/* v19 building on a phone: a round expand button on the preview opens it full screen */
@media (max-width: 820px) {
  .builder.flow.phone:not([data-step="0"]) .bzoom { display: inline-flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; bottom: auto; z-index: 6; width: 40px; height: 40px; padding: 0; border: 1px solid var(--glass-line); border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); color: var(--ink); box-shadow: 0 6px 18px -6px rgba(10,20,40,.35); transition: transform .15s; }
  .builder.flow.phone .bzoom:active { transform: scale(.92); }
  .builder.phone.pfull .bwrap { position: fixed; inset: 0; z-index: 60; border: 0; animation: pfullin .28s cubic-bezier(.25,.8,.3,1); }
  .builder.phone.pfull .bzoom { top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px; }
}
@keyframes pfullin { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- v21: compare with Andrew, box cards, videos, have-it checks, quadrant names, print ---------- */
.bstage .slide.cmpslide { background: transparent; overflow: visible; font: 500 32px/1.35 Inter, system-ui, sans-serif; color: var(--ink); }
.cmpcol { position: absolute; top: 0; }
.cmpcol .card { box-shadow: 0 18px 50px rgba(0,0,0,.18); }
.cmpcap { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: .7em; }
.cmpcap small { font-size: .82em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(22,24,31,.5); }
.cmpcap b { font-size: 2em; line-height: 1.12; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmpref .cmpcap b { color: #6a4795; }
.cmpdesc { position: absolute; left: 0; right: 0; margin: 0; color: rgba(22,24,31,.72); }
.cmpref .card { cursor: help; }
.bstage .item.node { cursor: pointer; }
.bstage .bpic { cursor: grab; }

.fextra { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; }
.fhow { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.fhow:hover { background: var(--soft-2); }
.fhow svg, .babout .blink svg, .bivid svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.fname .fhow { margin-top: 14px; }
.fcmp { margin: 0 0 16px; padding: 4px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,22,30,.08); }
.fcmp.on { box-shadow: inset 0 0 0 1.5px #6a4795; }
.fcmpbtn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.fcmpbtn b { display: block; font-size: 14.5px; font-weight: 700; }
.fcmpbtn small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ui-muted); line-height: 1.35; }
.fsw { position: relative; flex: none; width: 42px; height: 26px; border-radius: 999px; background: rgba(20,22,30,.16); transition: background .2s; }
.fsw i { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.3,.7,.3,1); }
.fcmp.on .fsw { background: #6a4795; }
.fcmp.on .fsw i { transform: translateX(16px); }
.fcmplv { display: flex; gap: 3px; margin: 0 8px 8px; padding: 3px; border-radius: 999px; background: var(--soft); }
.fcmplv button { flex: 1; height: 32px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.fcmplv button[aria-checked="true"] { background: #fff; color: #6a4795; box-shadow: 0 1px 4px rgba(0,0,0,.12); }

.bqname { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.bqren { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.22); color: inherit; cursor: pointer; flex: none; }
.bqren svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.bqren:hover { background: rgba(255,255,255,.36); }
.bqin { width: 150px; max-width: 46vw; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: #fff; color: var(--ink); font: 700 15px/1 Inter, system-ui, sans-serif; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.bqin:focus { outline: none; }

.bhavef { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; cursor: pointer; font-size: var(--fs-s, 13px); color: var(--ink); }
.bhavef input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bhsw { position: relative; flex: none; width: 36px; height: 22px; border-radius: 999px; background: rgba(20,22,30,.16); transition: background .2s; }
.bhsw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .22s; }
.bhavef input:checked + .bhsw { background: #2e9e57; }
.bhavef input:checked + .bhsw::after { transform: translateX(14px); }
.bhavef input:focus-visible + .bhsw { box-shadow: 0 0 0 3px rgba(46,158,87,.3); }
.brow.have > .bbar .blabel::after { content: 'Have it'; display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(46,158,87,.12); color: #23824a; font: 700 11px/1.5 Inter, system-ui, sans-serif; vertical-align: 2px; }
.babout { margin: 2px 0 6px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--qc, #16181f) 6%, #fff); }
.babout p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: rgba(22,24,31,.78); }
.babout .blink { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; color: var(--qc, var(--ink)); font-weight: 600; font-size: 13px; }

.binfo { position: fixed; z-index: 80; width: 330px; max-width: calc(100vw - 16px); padding: 16px; border-radius: 22px; background: rgba(255,255,255,.96); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--float); color: var(--ink); font-family: Inter, system-ui, sans-serif; animation: biin .18s ease both; }
@keyframes biin { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.binfo.peek { width: 330px; }
.binfo.sheet { left: 10px !important; right: 10px; top: auto !important; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: 78vh; overflow-y: auto; border-radius: 26px; padding: 18px 18px 16px; animation: bisheet .32s cubic-bezier(.2,.9,.3,1) both; }
@keyframes bisheet { from { transform: translateY(110%); } }
.bihead { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.bidot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; }
.bihtx { flex: 1; min-width: 0; }
.bikick { font-size: 11.5px; font-weight: 600; color: var(--ui-muted); letter-spacing: .02em; }
.bittl { font-size: 18px; font-weight: 800; line-height: 1.2; margin-top: 2px; }
.biclose { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); cursor: pointer; }
.biclose svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bifield { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; font-size: 12.5px; color: var(--ui-muted); }
.bifield input { height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,22,30,.14); color: var(--ink); font: 500 16px/1 Inter, system-ui, sans-serif; }
.bifield input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--qc); }
.bihave { display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; margin-bottom: 12px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--soft); color: var(--ink); font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer; text-align: left; transition: background .2s, color .2s; }
.bick { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(20,22,30,.25); }
.bick svg { width: 14px; height: 14px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bick svg .g { stroke: transparent; } .bick svg .d { stroke: transparent; }
.bihave[aria-pressed="true"] { background: rgba(46,158,87,.12); color: #1f7a44; }
.bihave[aria-pressed="true"] .bick { background: #2e9e57; box-shadow: none; }
.bihave[aria-pressed="true"] .bick svg .d { stroke: #fff; }
.bidl { margin: 0 0 12px; }
.bidl dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--qc); margin-top: 8px; }
.bidl dt:first-child { margin-top: 0; }
.bidl dd { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: rgba(22,24,31,.86); }
.bidesc { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: rgba(22,24,31,.8); }
.bivid { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 600 14.5px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.bivid:hover { background: #2a2d38; }
.bitip { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--qc); }
.binote { margin: 10px 0 0; font-size: 11px; color: var(--ui-muted); text-align: center; }
.binfo.peek .binote { display: none; }

.bvideo { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,12,18,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .2s; }
.bvideo.in { opacity: 1; }
.bvbox { width: min(880px, 100%); border-radius: 24px; background: #fff; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.4); transform: translateY(10px) scale(.98); transition: transform .3s cubic-bezier(.2,.9,.3,1); font-family: Inter, system-ui, sans-serif; }
.bvideo.in .bvbox { transform: none; }
.bvhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 12px 20px; }
.bvhead small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ui-muted); }
.bvhead b { display: block; font-size: 17px; color: var(--ink); }
.bvplayer { position: relative; aspect-ratio: 16 / 9; background: #0d0f14; }
.bvplayer iframe, .bvplayer video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bvsoon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-align: center; padding: 20px; }
.bvsoon span { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.14); }
.bvsoon span svg { width: 26px; height: 26px; fill: #fff; margin-left: 4px; }
.bvsoon b { font-size: 17px; }
.bvsoon small { font-size: 13px; color: rgba(255,255,255,.7); }

.fdlrow { display: flex; gap: 10px; align-items: stretch; margin-top: 18px; }
.fdlrow .fdl { flex: 1; margin-top: 0; }
.fprint { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; min-height: 56px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font: 600 15px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.fprint:hover { background: var(--soft-2); }
.fprint svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.fhave { margin-top: 6px; }
.fdone .fcmp { margin-top: 16px; }

#bprint { display: none; }
@media print {
  @page { size: letter portrait; margin: 0.5in; }
  body.printing > *:not(#bprint) { display: none !important; }
  body.printing { background: #fff !important; }
  body.printing #bprint { display: block; color: #16181f; font-family: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .prhead h1 { margin: 0; font-size: 24pt; font-weight: 800; }
  .prhead p { margin: 2pt 0 10pt; font-size: 10pt; color: #555; }
  .prslide { position: relative; width: 7.5in; height: 4.21875in; overflow: hidden; border-radius: 8pt; }
  .prslide .slide { transform: scale(0.375); transform-origin: 0 0; }
  .prline { font-size: 10pt; color: #444; margin: 8pt 0 4pt; }
  .prq { break-inside: avoid; margin-top: 12pt; }
  .prq h2 { display: flex; align-items: center; gap: 6pt; margin: 0 0 4pt; font-size: 13pt; }
  .prq h2 i { width: 9pt; height: 9pt; border-radius: 50%; background: var(--qc); }
  .prq h2 small { font-size: 9pt; font-weight: 600; color: #777; margin-left: 4pt; }
  .prq table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .prq th { text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; color: #777; border-bottom: 1pt solid #ccc; padding: 2pt 4pt; }
  .prq td { padding: 3pt 4pt; border-bottom: .5pt solid #e3e3e3; vertical-align: top; }
  .prq td small { display: block; color: #666; font-size: 8.5pt; }
  .prq tr.prsub td:first-child { padding-left: 16pt; color: #444; }
  .prq td:nth-child(2) { width: 1.1in; } .prq td:nth-child(3) { width: 0.9in; }
  .prhave { color: #1f7a44; font-weight: 700; }
  .prnone { font-size: 10pt; color: #777; margin: 0; }
  .prcopy { margin-top: 14pt; font-size: 8pt; color: #888; text-align: center; }
}
.builder.cmping .bstage { box-shadow: none; border-radius: 0; overflow: visible; }
.builder.qsolo .cmpslide { color: #fff; }
.builder.qsolo .cmpcap small { color: rgba(255,255,255,.78); }
.builder.qsolo .cmpref .cmpcap b { color: #fff; }
.builder.qsolo .cmpdesc { color: rgba(255,255,255,.92); }
.fdlrow .fdl, .fdlrow .fprint { height: 56px; min-height: 56px; margin-top: 0; }

/* v22: the box card does more right where it opens: a video thumbnail, Add to my side, and renaming */
.binfo { max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.binfo.peek .bifield, .binfo.peek .bihave, .binfo.peek .biadd { animation: none; }
.bithumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 12px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; color: #fff; text-align: left;
  background: radial-gradient(120% 90% at 85% 10%, rgba(255,255,255,.28), transparent 55%), linear-gradient(140deg, var(--qc), color-mix(in srgb, var(--qc) 55%, #10121a)); box-shadow: 0 6px 18px rgba(16,18,26,.18); }
@supports not (aspect-ratio: 1) { .bithumb { height: 0; padding-bottom: 56.25%; } }
.bithumb img, .bithumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bithumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55)); pointer-events: none; }
.bitbg { position: absolute; right: -6%; top: 50%; width: 46%; transform: translateY(-50%); opacity: .2; }
.bitbg svg { display: block; width: 100%; height: auto; fill: #fff; }
.bitplay { position: absolute; left: 50%; top: 42%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .2s; }
.bitplay svg { width: 22px; height: 22px; margin-left: 3px; fill: var(--ink); }
.bithumb:hover .bitplay { transform: scale(1.08); }
.bithumb:focus-visible { outline: 3px solid var(--qc); outline-offset: 2px; }
.bitcap { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.bitcap small { font: 600 11px/1.2 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.bitcap b { font: 700 14.5px/1.25 Inter, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biadd { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin: 0 0 10px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--qc); color: #fff; font: 700 15px/1 Inter, system-ui, sans-serif; cursor: pointer; text-align: left; transition: filter .15s, background .2s, color .2s; }
.biadd:hover { filter: brightness(1.07); }
.biaddic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.25); }
.biaddic svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.biaddic svg .g { stroke: transparent; }
.biadd small { margin-left: auto; font: 500 12px/1 Inter, system-ui, sans-serif; opacity: .75; }
.biadd[aria-pressed="true"] { background: rgba(46,158,87,.12); color: #1f7a44; }
.biadd[aria-pressed="true"] .biaddic { background: #2e9e57; }
.biadd[aria-pressed="true"] small { color: var(--ui-muted); opacity: 1; }

/* v22: Reset, in the top bar of Build your own, with a confirm and a few seconds to undo */
.bresetbtn { display: none; }
.builder.flow:not(.lvmode) .bresetbtn { order: 2; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 15px 0 12px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background .2s, transform .15s; }
.builder.flow:not(.lvmode) .bresetbtn:hover { background: var(--soft-2); }
.builder.flow:not(.lvmode) .bresetbtn:active { transform: scale(.95); }
.bresetbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .builder.flow:not(.lvmode) .bresetbtn { width: 40px; padding: 0; justify-content: center; } .builder.flow:not(.lvmode) .bresetbtn span { display: none; } }
.bconfirm { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(14,16,22,.42); opacity: 0; transition: opacity .18s; }
.bconfirm.in { opacity: 1; }
.bconfirm[hidden] { display: none; }
.bcfbox { width: 380px; max-width: 100%; padding: 24px 22px 18px; border-radius: 26px; background: #fff; box-shadow: var(--float); color: var(--ink); font-family: Inter, system-ui, sans-serif; text-align: center; transform: translateY(8px) scale(.98); transition: transform .2s cubic-bezier(.2,.9,.3,1); }
.bconfirm.in .bcfbox { transform: none; }
.bcfic { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 10px; border-radius: 50%; background: rgba(214,58,47,.1); color: #c4382d; }
.bcfic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bcfbox b { display: block; font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.bcfbox p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: rgba(22,24,31,.75); }
.bcfrow { display: flex; gap: 10px; }
.bcfrow button { flex: 1; height: 48px; border: 0; border-radius: 999px; font: 700 15px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.bcfno { background: var(--soft); color: var(--ink); }
.bcfno:hover { background: var(--soft-2); }
.bcfyes { background: #d63a2f; color: #fff; }
.bcfyes:hover { background: #bf2f25; }
.bundo { position: fixed; left: 50%; bottom: calc(118px + env(safe-area-inset-bottom)); z-index: 90; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(20,22,30,.92); color: #fff; box-shadow: var(--float); font: 600 14px/1 Inter, system-ui, sans-serif; white-space: nowrap; animation: biin .2s ease both; }
.bundo[hidden] { display: none; }
.bundo button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 700 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
/* v23: Add to my side as a glossy button */
.biadd { isolation: isolate; overflow: hidden; min-height: 50px; border: 1px solid color-mix(in srgb, var(--qc) 70%, #000); text-shadow: 0 1px 1px rgba(0,0,0,.25);
  background: linear-gradient(180deg, color-mix(in srgb, var(--qc) 72%, #fff) 0%, var(--qc) 48%, color-mix(in srgb, var(--qc) 82%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,0,0,.18), 0 8px 20px -6px color-mix(in srgb, var(--qc) 70%, transparent), 0 2px 4px rgba(16,18,26,.12);
  transition: transform .15s, box-shadow .2s, filter .2s; }
.biadd::before { content: ''; position: absolute; left: 6px; right: 6px; top: 2px; height: 46%; z-index: -1; border-radius: 999px 999px 40% 40% / 999px 999px 18px 18px; background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.08)); pointer-events: none; }
.biadd::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.biadd:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,0,0,.18), 0 12px 24px -6px color-mix(in srgb, var(--qc) 75%, transparent), 0 2px 4px rgba(16,18,26,.12); }
.biadd:hover::after { left: 120%; }
.biadd:active { transform: translateY(1px) scale(.99); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 2px 8px rgba(0,0,0,.25), 0 3px 8px -4px color-mix(in srgb, var(--qc) 70%, transparent); }
.biadd:focus-visible { outline: 3px solid color-mix(in srgb, var(--qc) 45%, #fff); outline-offset: 2px; }
.biaddic { background: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.15); }
.biadd[aria-pressed="true"] { color: #fff; border-color: #1f7a44;
  background: linear-gradient(180deg, #6fd394 0%, #2e9e57 48%, #23814a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,0,0,.18), 0 8px 20px -6px rgba(46,158,87,.6), 0 2px 4px rgba(16,18,26,.12); }
.biadd[aria-pressed="true"] .biaddic { background: rgba(255,255,255,.3); }
.biadd[aria-pressed="true"] small { color: #fff; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .biadd::after { display: none; } .biadd:hover { transform: none; } }
/* v23: the checklist folds into a dropdown, so Andrew's comparison leads */
.builder .fcmphint { margin: -6px 2px 14px; }
.fcheck { margin: 0 0 14px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,22,30,.08); }
.fcheck > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 14px 8px 10px; border-radius: 18px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.fcheck > summary::-webkit-details-marker { display: none; }
.fcheck > summary:hover { background: color-mix(in srgb, var(--qc) 6%, transparent); }
.fcheck > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--qc) 45%, #fff); outline-offset: 2px; }
.fckic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--qc) 14%, #fff); color: var(--qc); }
.fckic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fcktx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fcktx b { font-size: 15px; font-weight: 700; color: var(--ink); }
.fcktx small { font-size: 12.5px; line-height: 1.35; color: var(--ui-muted); }
.fckchev { flex: none; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: var(--soft); transition: transform .25s; }
.fckchev svg { width: 15px; height: 15px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); }
.fcheck[open] > summary .fckchev { transform: rotate(180deg); }
.fcheck[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: inset 0 -1px 0 rgba(20,22,30,.07); }
.fckbody { padding: 12px 8px 6px; }
.fckbody .fhint { display: block; margin: 0 4px 12px; }
.fcheck[open] .fckbody { animation: fckin .22s ease both; }
@keyframes fckin { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .fcheck[open] .fckbody { animation: none; } .fckchev { transition: none; } }
/* v23: no checklist. Their structures, plus one glossy Add structure button */
.gloss { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border: 1px solid color-mix(in srgb, var(--qc) 70%, #000); border-radius: 999px; color: #fff; font: 700 15.5px/1 Inter, system-ui, sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.25); cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--qc) 72%, #fff) 0%, var(--qc) 48%, color-mix(in srgb, var(--qc) 82%, #000) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 6px rgba(0,0,0,.18), 0 8px 20px -6px color-mix(in srgb, var(--qc) 70%, transparent), 0 2px 4px rgba(16,18,26,.12); transition: transform .15s, box-shadow .2s, filter .2s; }
.gloss::before { content: ''; position: absolute; left: 6px; right: 6px; top: 2px; height: 46%; z-index: -1; border-radius: 999px 999px 40% 40% / 999px 999px 18px 18px; background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.08)); pointer-events: none; }
.gloss::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.gloss:hover { filter: brightness(1.05) saturate(1.05); transform: translateY(-1px); }
.gloss:hover::after { left: 120%; }
.gloss:active { transform: translateY(1px) scale(.99); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 2px 8px rgba(0,0,0,.25); }
.gloss:focus-visible { outline: 3px solid color-mix(in srgb, var(--qc) 45%, #fff); outline-offset: 2px; }
.glic { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.15); }
.glic svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .gloss::after { display: none; } .gloss:hover { transform: none; } }
.fstructs { margin: 0 0 14px; }
.fsthead { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; }
.fsthead b { font-size: 15px; font-weight: 700; color: var(--ink); }
.fstructs .brows:empty { display: none; }
.fstructs .bline { pointer-events: none; }
.fstructs .bline .bchk, .fstructs .bline .btab { display: none; }
.fstructs .bline .blabel { padding-left: 4px; }
.fstructs .brow > .bbar .blabel::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: var(--qc); vertical-align: 1px; }
.fempty { margin: 0 0 12px; padding: 18px 16px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--qc) 35%, transparent); color: var(--ui-muted); font-size: 13.5px; line-height: 1.45; text-align: center; }
.fempty[hidden] { display: none; }
.faddst { width: 100%; margin-top: 4px; }
.faddst[hidden] { display: none; }
.fstructs .ftools { margin-top: 10px; }
.fcompose[hidden] { display: none; }
.fcomp { margin: 4px 0 6px; padding: 14px 14px 12px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--qc) 55%, transparent), 0 10px 26px -12px rgba(16,18,26,.25); animation: fckin .22s ease both; }
.fcomphead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.fcomphead b { font-size: 16px; font-weight: 800; color: var(--ink); }
.fcomp .bfield { margin-bottom: 10px; }
.fcomp select, .fcomp input { width: 100%; height: 46px; padding: 0 12px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,22,30,.16); color: var(--ink); font: 500 16px/1 Inter, system-ui, sans-serif; }
.fcomp select:focus, .fcomp input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--qc); }
.fcomp .nudge { animation: bshake .35s ease; box-shadow: inset 0 0 0 2px #d63a2f; }
.fcompval { position: relative; display: block; }
.fcompval i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 600; color: var(--ui-muted); pointer-events: none; }
.fcompval input { padding-left: 26px; }
.fcompabout { margin: -4px 2px 10px; font-size: 13px; line-height: 1.45; color: var(--ui-muted); }
.fcompabout[hidden] { display: none; }
.fcompacts { display: flex; gap: 10px; margin-top: 4px; }
.fcompacts .btn { flex: 1; height: 50px; border-radius: 999px; }
.fcompacts .faddgo { flex: 1.4; }
/* v23: Andrew's photo is the video thumbnail */
.bithumb .bitbg { display: none; }
.bithumb img.bitdef { object-position: 50% 30%; }
.bithumb.soon::after { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.62)); }
.bvsoon { z-index: 0; background: #1a1c24; }
.bvsoon img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(.55); }
.bvsoon span { background: rgba(255,255,255,.92); }
.bvsoon span svg { fill: var(--ink); }
.bvsoon b, .bvsoon small { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.fstructs .brow:not(.editing) > .bsubs { display: none; }

/* ---------- v24: no side panel, everything happens on the boxes ---------- */
.builder.flow.stageonly, .builder.flow.stageonly[data-step="5"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.builder.flow.stageonly .btop { display: none; }
.builder.flow.stageonly .bpanel { display: none; }
.builder.flow.stageonly .bwrap, .builder.flow.stageonly[data-step="5"] .bwrap { grid-column: 1; grid-row: 1; border: 0; }
.builder.flow.stageonly .cmpdesc, .builder.flow.stageonly .bzoom { display: none !important; }
/* v27: floating controls, no bars */
.bfloat { position: absolute; inset: 0; z-index: 7; pointer-events: none; font-family: Inter, system-ui, sans-serif; --gl: rgba(255,255,255,.84); --glsh: 0 8px 26px -10px rgba(10,20,40,.4), inset 0 0 0 1px rgba(20,22,30,.07); }
.bfloat[hidden] { display: none; }
.bftop { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 14px; right: 14px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; pointer-events: none; }
.bftop > *, .bfright > * { pointer-events: auto; }
.bfpill { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 15px; border: 0; border-radius: 999px; background: var(--gl); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: var(--glsh); color: var(--ink); font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: transform .15s, background .2s; }
.bfpill:active { transform: scale(.95); }
.bfpill svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bfback { justify-self: start; padding: 0 16px 0 11px; }
.bftitle { justify-self: center; display: inline-flex; align-items: center; gap: 8px; max-width: min(46vw, 520px); padding: 6px 12px; border: 0; border-radius: 12px; background: none; color: #fff; font: 750 clamp(17px, 2.2vw, 24px)/1.15 Inter, system-ui, sans-serif; letter-spacing: -.01em; text-shadow: 0 1px 14px rgba(0,0,0,.35); cursor: pointer; transition: background .2s; }
.bftitle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bftitle svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.bftitle:hover { background: rgba(255,255,255,.14); }
.bftitle:hover svg { opacity: 1; }
.bfright { justify-self: end; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.bfwrap { position: relative; }
.bfchip { padding: 0 12px 0 6px; }
.bfchip .bfav { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #e9e5f1; color: #6a4795; font: 800 13px/1 Inter, system-ui, sans-serif; }
.bfchip.on .bfav { background: #6a4795; color: #fff; }
.bfchip i { font-style: normal; opacity: .45; margin: 0 1px; }
.bfchip svg { width: 15px; height: 15px; opacity: .55; }
.bfmenu { width: 42px; padding: 0; justify-content: center; }
.bfmenu svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.bfpop { position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 18px 44px -14px rgba(10,20,40,.45), inset 0 0 0 1px rgba(20,22,30,.08); z-index: 3; transform-origin: top right; animation: bfpop .18s cubic-bezier(.2,.9,.3,1.2); }
.bfpop[hidden] { display: none; }
@keyframes bfpop { from { opacity: 0; transform: scale(.94) translateY(-4px); } }
.bfpophd { padding: 8px 10px 6px; color: var(--ui-muted); font: 650 11.5px/1.2 Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.bfpop button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 600 14px/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.bfpop button:hover { background: var(--soft, #f2f2f4); }
.bfpop button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--ui-muted); }
.bfpop button[data-video] svg { fill: currentColor; stroke: none; }
.bfradio { width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px #c9c7cf; transition: box-shadow .15s; }
.bfpop button[aria-checked="true"] .bfradio { box-shadow: inset 0 0 0 5.5px #6a4795; }
.bfpop button[aria-checked="true"] { color: #6a4795; }
.bfbot { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; }
.bfdock { pointer-events: auto; display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px; border-radius: 999px; background: var(--gl); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 14px 36px -12px rgba(10,20,40,.45), inset 0 0 0 1px rgba(20,22,30,.07); }
.bfsep { width: 1px; height: 28px; flex: none; background: rgba(20,22,30,.12); margin: 0 2px; }
.bfdots { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bfdots::-webkit-scrollbar { display: none; }
.bfdots button { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ui-muted); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.bfdots button i { width: 10px; height: 10px; border-radius: 50%; background: var(--qc); }
.bfdots button .q4i { width: 15px; height: 15px; }
.bfdots button:hover { background: var(--soft); color: var(--ink); }
.bfdots button.now { background: color-mix(in srgb, var(--qc, #2a2d38) 14%, #fff); color: var(--ink); }
.bfdots button.all.now { background: var(--soft); }
.bfdots button:not(.now) span { display: none; }
.bfdots button:not(.now) { padding: 0 11px; }
.bfdock .bfadd { flex: none; height: 46px; min-height: 0; min-width: 0; padding: 0 20px 0 14px; font-size: 15px; }
.bfdock .bfadd svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bfico { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(20,22,30,.05); color: var(--ink); cursor: pointer; transition: background .2s, transform .15s; }
.bfico:hover { background: rgba(20,22,30,.1); }
.bfico:active { transform: scale(.92); }
.bfico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bficotx { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 6px 10px; border-radius: 8px; background: #22242c; color: #fff; font: 600 12px/1 Inter, system-ui, sans-serif; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.bfico:hover .bficotx, .bfico:focus-visible .bficotx { opacity: 1; transform: translateX(-50%); }
@media (max-width: 760px) {
  .bftop { left: 10px; right: 10px; gap: 6px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .bfback { width: 42px; padding: 0; justify-content: center; }
  .bfback span { display: none; }
  .bftitle { max-width: 100%; min-width: 0; font-size: 17px; padding: 6px 6px; }
  .bftitle svg { width: 14px; height: 14px; }
  .bfright { gap: 6px; }
  .bfchip { padding: 0 9px 0 5px; font-size: 13px; gap: 5px; }
  .bfchip .bfav { width: 28px; height: 28px; }
  .bfchip .bfchiptx { max-width: 74px; overflow: hidden; text-overflow: ellipsis; }
  .bfchip svg { display: none; }
  .bfbot { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .bfdock { gap: 4px; padding: 5px; }
  .bfdots button { height: 42px; padding: 0 10px; }
  .bfdots button:not(.now) { padding: 0 9px; }
  .bfdots button.now span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
  .bfdock .bfadd { height: 44px; padding: 0 14px 0 10px; font-size: 14px; }
  .bfico { width: 44px; height: 44px; }
  .bficotx { display: none; }
}
@media (max-width: 400px) {
  .bfdots button.now span { display: none; }
  .bfdots button.now { padding: 0 11px; }
  .bfdock .bfadd span:last-child { white-space: nowrap; }
}
/* the box being edited stands out; the rest invite a tap */
.bstage .card:not(.cref) .item.node { transition: box-shadow .2s, filter .2s; }
.builder.flow .bstage .card:not(.cref) .item.node:hover { filter: brightness(1.04); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cq, #6a4795) 45%, transparent), 0 10px 24px -8px rgba(0,0,0,.35); }
.bstage .item.node.nediting { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--cq, #6a4795), 0 14px 30px -8px rgba(0,0,0,.4) !important; z-index: 3; }
.bstage .item.node.nadded { animation: nadded .9s cubic-bezier(.2,.9,.3,1); }
@keyframes nadded { 0% { box-shadow: 0 0 0 0 rgba(46,158,87,.7); } 100% { box-shadow: 0 0 0 22px rgba(46,158,87,0); } }
.builder.flow .bstage .card:not(.cref) .chead { cursor: pointer; }
/* card fields */
.bifield select { height: 42px; padding: 0 34px 0 12px; border: 0; border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316181f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; box-shadow: inset 0 0 0 1px rgba(20,22,30,.14); color: var(--ink); font: 500 15px/1 Inter, system-ui, sans-serif; -webkit-appearance: none; appearance: none; }
.bifield select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--qc); }
.bifield select:disabled { opacity: .55; }
.bimoney { position: relative; display: block; }
.bimoney i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 600; color: var(--ui-muted); font-size: 16px; }
.bimoney input { width: 100%; padding-left: 26px; box-sizing: border-box; }
.bifield input { width: 100%; box-sizing: border-box; }
.biabout { margin: -4px 0 10px; font-size: 13px; line-height: 1.4; color: var(--ui-muted); }
.bichips { display: flex; flex-wrap: wrap; gap: 6px; }
.bichip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font: 600 13px/1.1 Inter, system-ui, sans-serif; cursor: pointer; text-align: left; }
.bichip .bick { width: 18px; height: 18px; }
.bichip[aria-pressed="true"] { background: color-mix(in srgb, var(--qc) 16%, #fff); }
.bichip[aria-pressed="true"] .bick { background: var(--qc); box-shadow: none; }
.bichip[aria-pressed="true"] .bick svg .d { stroke: #fff; }
.bichip.add { padding: 0 13px; background: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--qc) 50%, transparent); color: var(--qc); }
.biacts { display: flex; gap: 8px; margin-top: 4px; }
.biacts > * { flex: 1; }
.biacts .btn { height: 46px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.biacts .biok { height: 46px; }
.biacts.sm { margin-bottom: 10px; }
.biacts.sm .btn { height: 38px; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.biacts.sm .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn.danger { color: #c4372c; }

/* softer blueprint lines behind a single quadrant */
.builder.qsolo .bwrap { background: var(--qbg); }
.builder.qsolo .bwrap::before { content: ''; position: absolute; inset: 0; background: url(assets/blueprint.svg) center / cover no-repeat; opacity: .3; pointer-events: none; }
/* Andrew's levels, all four: the background fills the whole view, no frame around the slide */
.builder.lvmode:not(.qsolo) .bwrap { background: #5b45b5 url(assets/bg-soft.jpg) center / cover no-repeat; }
.builder.lvmode:not(.qsolo) .bwrap::before { content: ''; position: absolute; inset: 0; background: url(assets/blueprint.svg) center / cover no-repeat; opacity: .2; pointer-events: none; }
.builder.lvmode #bstage { box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
.builder.lvmode #bstage .slide { background: transparent !important; overflow: visible; }
.builder.lvmode #bstage .slide > .bgimg { display: none; }

/* the learning part of a box card folds away */
.biedu { margin: 4px -4px 0; padding: 0 4px; border-top: 1px solid rgba(20,22,30,.08); }
.bihead + .biedu { border-top: 0; margin-top: 0; }
.biedutog { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 42px; padding: 8px 0; border: 0; background: none; color: var(--qc); font: 700 11.5px/1 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-align: left; }
.biedutog span { flex: 1; }
.biedutog b { font-weight: 600; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--ui-muted); }
.biedutog svg { width: 16px; height: 16px; fill: none; stroke: var(--ui-muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(180deg); transition: transform .25s; }
.biedu.shut .biedutog svg { transform: none; }
.biedu.shut .biedubody { display: none; }
.biedubody { animation: biedu .22s ease both; }
@keyframes biedu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* boxes can be dragged */
.builder.stageonly .bstage .card:not(.cref) .item.node { touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; }
.builder.bdragging, .builder.bdragging * { cursor: grabbing !important; }
.bstage .item.node.dragging { z-index: 5; filter: drop-shadow(0 10px 18px rgba(0,0,0,.3)); transition: none !important; }
.biback { margin: 0 0 12px; }

/* Copy Andrew's sits beside Add structure */
/* gray until owned and filled in */
.bstage .card:not(.cref) .item.node.ntodo { filter: grayscale(1) brightness(1.22) contrast(.82); opacity: 1; }
.builder.flow .bstage .card:not(.cref) .item.node.ntodo:hover { filter: grayscale(1) brightness(1.15) contrast(.9); opacity: 1; }
.bstage .item.node.ntodo.nediting, .bstage .item.node.ntodo.dragging { opacity: 1; }
.builder.stageonly .bundo { bottom: calc(150px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) {
  .bundo { left: 12px !important; right: 12px; transform: none !important; max-width: none; width: auto; white-space: normal; }
  .bundo span { flex: 1; min-width: 0; line-height: 1.3; }
  .bundo { border-radius: 20px; }
  .builder.stageonly .bundo { bottom: calc(146px + env(safe-area-inset-bottom)); }
}
/* the learning part now leads the card, with the fields under it */
.bihead + .biedu { border-top: 0; margin-top: 0; padding-bottom: 4px; border-bottom: 1px solid rgba(20,22,30,.08); margin-bottom: 12px; }
.bihead + .biedu .bithumb { margin-bottom: 8px; }

/* v26: a soft gradient with a white glow in the middle, behind every view; no frame around the slide */
.builder.qsolo .bwrap {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.6) 0, rgba(255,255,255,.3) 20%, rgba(255,255,255,.1) 38%, rgba(255,255,255,0) 54%),
    linear-gradient(160deg, color-mix(in srgb, var(--qbg) 70%, #fff) 0%, var(--qbg) 50%, color-mix(in srgb, var(--qbg) 72%, #000) 100%);
}
.builder.lvmode:not(.qsolo) .bwrap, .builder.flow:not(.lvmode):not(.qsolo):not([data-step="0"]) .bwrap {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.42) 0, rgba(255,255,255,.2) 20%, rgba(255,255,255,0) 50%),
    #5b45b5 url(assets/bg-soft.jpg) center / cover no-repeat;
}
.builder.flow:not(.lvmode):not(.qsolo):not([data-step="0"]) .bwrap::before { content: ''; position: absolute; inset: 0; background: url(assets/blueprint.svg) center / cover no-repeat; opacity: .2; pointer-events: none; }
.builder.flow #bstage { box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
.builder.flow #bstage .slide { background: transparent !important; overflow: visible; }
.builder.flow #bstage .slide > .bgimg { display: none; }
.builder.flow:not(.qsolo) .bstage .buildname { color: #fff; }
.builder.flow:not(.lvmode):not([data-step="0"]) .cmpslide { color: #fff; }
.builder.flow:not(.lvmode):not([data-step="0"]) .cmpcap small { color: rgba(255,255,255,.78); }
.builder.flow:not(.lvmode):not([data-step="0"]) .cmpref .cmpcap b { color: #fff; }

/* "I already have this": the big confirm that brings a box's color back */
.bihavebig { --qc: #2e9e57; display: flex; width: 100%; min-height: 54px; margin: 0 0 12px; justify-content: flex-start; padding: 0 16px 0 10px; font-size: 16px; }
.bihavebig .glic { width: 34px; height: 34px; }
.bihavebig .glic svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bihavebig .glic svg .g { display: none; }
.bihavebig small { margin-left: auto; font: 500 12px/1 Inter, system-ui, sans-serif; opacity: .8; text-shadow: none; }
.bihavebig[aria-pressed="true"] { background: rgba(46,158,87,.12); border-color: rgba(46,158,87,.35); color: #1f7a44; text-shadow: none; box-shadow: none; }
.bihavebig[aria-pressed="true"]::before, .bihavebig[aria-pressed="true"]::after { display: none; }
.bihavebig[aria-pressed="true"] .glic { background: #2e9e57; box-shadow: none; }
.bihavebig[aria-pressed="true"] small { color: #1f7a44; opacity: .75; }
.bundo { z-index: 79; }
/* v27: About this structure reads as a button */
.binfo .biedu { border-top: 0; }
.binfo .biedutog { gap: 10px; min-height: 48px; margin: 2px 0 8px; padding: 0 12px 0 8px; border: 1.5px solid color-mix(in srgb, var(--qc) 40%, #fff); border-radius: 14px; background: color-mix(in srgb, var(--qc) 9%, #fff); color: color-mix(in srgb, var(--qc) 80%, #000); font: 700 14px/1.1 Inter, system-ui, sans-serif; letter-spacing: 0; text-transform: none; box-shadow: 0 2px 6px -3px color-mix(in srgb, var(--qc) 50%, transparent); transition: background .2s, transform .12s, box-shadow .2s; }
.binfo .biedutog:hover { background: color-mix(in srgb, var(--qc) 15%, #fff); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--qc) 60%, transparent); }
.binfo .biedutog:active { transform: scale(.985); }
.binfo .biedutog:focus-visible { outline: 3px solid color-mix(in srgb, var(--qc) 40%, #fff); outline-offset: 2px; }
.binfo .biedutog .biedui { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--qc); }
.biedui svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.3; stroke-linecap: round; transform: none !important; }
.binfo .biedutog .bieduttl { flex: 1; }
.binfo .biedutog b { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--qc); color: #fff; font: 700 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0; }
.binfo .biedutog .biedch { width: 18px; height: 18px; stroke: var(--qc); stroke-width: 2.6; }
.binfo .biedu.shut .biedutog { margin-bottom: 4px; }
.binfo .bihead + .biedu { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
/* v27: once it's on their side, a quiet check, not a big button */
.binfo .biadd[aria-pressed="true"] { min-height: 38px; margin: 0 0 8px; padding: 0 4px; border: 0; border-radius: 10px; background: none; box-shadow: none; color: #1f7a44; text-shadow: none; font-size: 14px; }
.binfo .biadd[aria-pressed="true"]::before, .binfo .biadd[aria-pressed="true"]::after { display: none; }
.binfo .biadd[aria-pressed="true"]:hover { transform: none; filter: none; box-shadow: none; background: rgba(46,158,87,.07); }
.binfo .biadd[aria-pressed="true"] .biaddic { width: 22px; height: 22px; background: #2e9e57; box-shadow: none; }
.binfo .biadd[aria-pressed="true"] .biaddic svg { width: 13px; height: 13px; }
.binfo .biadd[aria-pressed="true"] small { color: var(--ui-muted); opacity: 1; text-decoration: underline; text-underline-offset: 2px; }
/* v27: Remove is a glossy red button */
.bired { --qc: #d63a2f; min-height: 40px; padding: 0 16px 0 12px; font-size: 14px; gap: 7px; background: linear-gradient(180deg, #f2766b 0%, #d63a2f 50%, #b72a21 100%); border-color: #9e2219; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 6px rgba(0,0,0,.18), 0 6px 14px -6px rgba(214,58,47,.7); }
.bired svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bired:hover { filter: brightness(1.06); }
.biacts.sm { align-items: center; }
/* v27: Andrew's photo where it means "Andrew" */
img.bfav { display: block; object-fit: cover; object-position: 50% 18%; background: #e9e5f1; box-shadow: 0 0 0 2px #fff; }
.bfchip:not(.on) img.bfav { filter: grayscale(.6); opacity: .8; }
.bfcopy { overflow: visible; }
.bfcopyav { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; box-shadow: 0 0 0 2px #fff; }
.bfcopybadge { position: absolute; right: 1px; bottom: 1px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #22242c; box-shadow: 0 0 0 2px #fff; }
.bfcopybadge svg { width: 12px !important; height: 12px !important; stroke: #fff !important; stroke-width: 2.4 !important; }
.cmpcap small .cmpav { width: 1.9em; height: 1.9em; margin-right: .5em; border-radius: 50%; object-fit: cover; object-position: 50% 18%; vertical-align: middle; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
.cmpcap small { display: inline-flex; align-items: center; }
@media (max-width: 760px) { .bfchip .bfnm { display: none; } .bfchip .bfchiptx { max-width: none; } }
.cmpstack .cmpdesc { display: none; }
/* v27b: Copy Andrew's matches Add structure */
.bfbtns { display: flex; align-items: center; gap: 6px; flex: none; }
.bfdock .bfcopy { overflow: hidden; }
.bfcopyic { position: relative; overflow: visible; background: none; box-shadow: none; }
.bfdock .bfcopy .bfcopyav { width: 28px; height: 28px; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.bfdock .bfcopy .bfcopybadge { right: -5px; bottom: -4px; width: 16px; height: 16px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.bfdock .bfcopy .bfcopybadge svg { width: 10px !important; height: 10px !important; stroke: #6a4795 !important; stroke-width: 2.6 !important; }
@media (max-width: 760px) {
  .bfdock { flex-wrap: wrap; justify-content: center; border-radius: 26px; row-gap: 4px; }
  .bfdock .bfsep { display: none; }
  .bfdock .bfdots { width: 100%; justify-content: center; }
  .bfdock .bfdots button { height: 38px; }
  .bfbtns { width: 100%; }
  .bfbtns .bfadd { flex: 1 1 0; padding: 0 12px 0 8px; justify-content: center; }
  .bfbtns .bfico { margin-left: 2px; }
}
.bfdock .bfcopy.done { opacity: .62; filter: saturate(.55); cursor: default; box-shadow: none; transform: none; }
.bfdock .bfcopy.done::after { display: none; }
.bfdock .bfcopy.done .bfcopybadge svg .g { stroke: transparent; }
/* v29: Andrew's side card: training video, explanations, Add to my side */
.biref { margin: 2px 0 12px; }
.biref .bithumb { margin: 0 0 12px; }
.biref .bidl { margin: 0; }
/* v29: circle buttons instead of a menu */
.bfcirc { width: 42px; padding: 0; justify-content: center; }
.bfcirc svg { width: 19px; height: 19px; }
.bfcirc[data-video] svg { fill: currentColor; stroke: none; margin-left: 2px; width: 16px; height: 16px; }
.bflvs { display: none; }
@media (max-width: 760px) {
  .bfright { gap: 5px; }
  .bfcirc { width: 38px; height: 38px; }
  .bfcirc svg { width: 17px; height: 17px; }
  .bfchip { height: 38px; padding: 0 9px 0 4px; }
  .bfchip .bflvl, .bfchip .bfnm { display: none; }
  .bfchip .bflvs { display: inline; }
  .bfback { width: 38px; height: 38px; }
  .bftitle { font-size: 15px; padding: 6px 2px; }
}
/* v29: solid white, nothing see-through */
.bfloat { --gl: #fff; }
.bfpill, .bfdock { -webkit-backdrop-filter: none; backdrop-filter: none; }
.bfpop { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.binfo { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bfchip:not(.on) img.bfav { opacity: 1; filter: grayscale(1); }
.bfdock .bfcopy.done { opacity: 1; filter: none; background: #e9e5f1; border-color: #d6cfe6; color: #6a4795; text-shadow: none; }
.bfdock .bfcopy.done::before { display: none; }
.bfdock .bfcopy.done .bfcopyic { background: none; }
.bfico { background: #f1f1f3; }
/* v29: the name page gets the same color background */
.builder.flow[data-step="0"] .bpanel { position: relative; isolation: isolate;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.42) 0, rgba(255,255,255,.2) 22%, rgba(255,255,255,0) 52%), #5b45b5 url(assets/bg-soft.jpg) center / cover no-repeat; }
.builder.flow[data-step="0"] .bpanel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(assets/blueprint.svg) center / cover no-repeat; opacity: .2; pointer-events: none; }
.builder.flow[data-step="0"] .fname { padding: 34px 32px 24px; border-radius: 28px; background: #fff; box-shadow: 0 30px 70px -24px rgba(20,10,60,.55); }
.builder.flow[data-step="0"] .bcopy, .builder.flow[data-step="0"] .bcopy * { color: rgba(255,255,255,.9); }
@media (max-width: 760px) { .builder.flow[data-step="0"] .fname { padding: 26px 20px 18px; border-radius: 24px; } }
/* v29: undo and redo beside Back */
.bfleft { justify-self: start; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.bfleft > * { pointer-events: auto; }
.bfur { display: flex; height: 42px; padding: 0 3px; border-radius: 999px; background: #fff; box-shadow: var(--glsh); }
.bfur button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 42px; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 999px; transition: background .15s, transform .12s; }
.bfur button:hover:not(:disabled) { background: #f1f1f3; }
.bfur button:active:not(:disabled) { transform: scale(.9); }
.bfur button:disabled { color: #c4c4ca; cursor: default; }
.bfur button + button { box-shadow: inset 1px 0 0 #ececef; border-radius: 0 999px 999px 0; }
.bfur button:first-child { border-radius: 999px 0 0 999px; }
.bfur svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* v29: Done closes the card */
.bidone { width: 100%; min-height: 48px; margin-top: 12px; }
@media (max-width: 760px) {
  .bftop { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; row-gap: 8px; }
  .bftop .bfleft { grid-column: 1; grid-row: 1; gap: 5px; }
  .bftop .bfright { grid-column: 3; grid-row: 1; }
  .bftop .bftitle { grid-column: 1 / -1; grid-row: 2; justify-self: center; max-width: 92%; font-size: 17px; padding: 2px 8px; }
  .bfur { height: 38px; padding: 0 2px; }
  .bfur button { width: 34px; height: 38px; }
  .bfur svg { width: 17px; height: 17px; }
}

/* v30: hide or show Andrew's side */
.bfeye { color: #6a4795; padding: 0 14px 0 12px; }
.bfeye svg.bfeyeic { width: 19px; height: 19px; }
.bfeye.show { background: #6a4795; color: #fff; padding: 0 15px 0 5px; box-shadow: 0 6px 18px rgba(106,71,149,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.bfeye.show img.bfav { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.bfeye.show .bfeyeic { display: none; }
@media (max-width: 760px) {
  .bfeye { height: 38px; padding: 0 11px 0 10px; font-size: 13px; gap: 5px; }
  .bfeye.show { padding: 0 11px 0 4px; }
  .bfeye.show img.bfav { width: 28px; height: 28px; }
  .bfeye.show span::before { content: "Show"; }
  .bfeye.show span { font-size: 0; }
  .bfeye.show span::before { font-size: 13px; }
}
@media (max-width: 760px) {
  .bfeye:not(.show) { width: 38px; padding: 0; justify-content: center; }
  .bfeye:not(.show) span { display: none; }
}
@media (max-width: 380px) {
  .bftop { left: 8px; right: 8px; }
  .bfright, .bftop .bfleft { gap: 4px; }
  .bfcirc, .bfeye:not(.show), .bfback { width: 36px; height: 36px; }
  .bfchip, .bfeye.show { height: 36px; }
}
/* v30: Andrew's boxes that are already on their structure turn green */
.bstage .card.cref .item.node.got { background: #2f9e5b !important; box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(47,158,91,.45); }
.bstage .card.cref .item.node.got .nlabel, .bstage .card.cref .item.node.got .nnote { color: #fff; }
.bstage .card.cref .item.node .gotck { position: absolute; top: calc(var(--gs) * -.32); right: calc(var(--gs) * -.32); width: var(--gs); height: var(--gs); border-radius: 50%; background: #fff; color: #2f9e5b; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); z-index: 2; }
.bstage .card.cref .item.node .gotck svg { width: 66%; height: 66%; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.bstage .card.cref .item.node.got { overflow: visible; }
.bstage .card.cref .item.node.got::before { background: linear-gradient(180deg, #43b872, #2f9e5b); }
/* v30: the download menu sits above the floating bars */
#bdlmenu { z-index: 90; }

/* ===================== v31: review fixes and one button system ===================== */
/* All four: an empty card opens its quadrant */
.b-empty.go { pointer-events: auto; cursor: pointer; inset: 0; bottom: 0; align-items: flex-end; padding-bottom: 34px; }
.b-empty.go span { font-size: 46px; color: color-mix(in srgb, var(--base) 75%, #555); }
.b-empty.go:hover span, .b-empty.go:focus-visible span { color: var(--base); text-decoration: underline; text-underline-offset: 6px; }
.b-empty.go:focus-visible { outline: 6px solid var(--base); outline-offset: -10px; border-radius: 30px; }
/* Download menu: solid white, every row reads in full */
.dlmenu, #bdlmenu { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 1px solid rgba(20,22,30,.08); box-shadow: 0 18px 50px -14px rgba(10,20,40,.45); }
#bdlmenu button { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-height: 48px; padding: 9px 14px; }
#bdlmenu button span { font: 600 15px/1.2 Inter, system-ui, sans-serif; color: #16181f; }
#bdlmenu button small { font: 500 12.5px/1.3 Inter, system-ui, sans-serif; color: #6b6e75; white-space: normal; }
#bdlmenu .dlhead { color: #6b6e75; }

/* ---- Sizes: hero 56, regular 48, small 44. Nothing to tap is smaller than 44. ---- */
.gloss { min-height: 48px; }
.gloss.hero { min-height: 56px; height: 56px; padding: 0 28px; font-size: 17px; }
.gloss.hero svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bfdock .bfadd { height: 48px; }
.bfico { width: 48px; height: 48px; }
.bfpill { height: 44px; }
.bfcirc { width: 44px; height: 44px; }
.bfur button { width: 44px; height: 44px; }
.biclose, .lvclose { width: 44px !important; height: 44px !important; flex: none; }

/* ---- Secondary: one white pill with a hairline ring, as tall as the main button beside it ---- */
.binfo .biacts .btn, .binfo .biacts .btn.sm, .fcompacts .btn, .binfo .biacts .bired {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 48px; min-height: 48px; padding: 0 18px;
  border: 0; border-radius: 999px; background: #fff; color: #16181f; font: 600 15px/1 Inter, system-ui, sans-serif; text-shadow: none;
  box-shadow: 0 0 0 1px rgba(20,22,30,.13), 0 2px 8px -3px rgba(10,20,40,.18); cursor: pointer; transition: background .15s, transform .15s; }
.binfo .biacts .btn:hover, .fcompacts .btn:hover { background: #f6f6f8; }
.binfo .biacts .btn:active, .fcompacts .btn:active { transform: scale(.98); }
.binfo .biacts .btn svg { width: 16px; height: 16px; margin: 0; }
.binfo .biacts .bired { color: #c62828; box-shadow: 0 0 0 1.5px rgba(198,40,40,.5), 0 2px 8px -3px rgba(198,40,40,.25); }
.binfo .biacts .bired::before, .binfo .biacts .bired::after { display: none; }
.binfo .biacts .bired:hover { background: #fff4f4; }
.binfo .biacts .bired svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.binfo .biacts { gap: 10px; }
.binfo .biacts > * { flex: 1 1 0; }
.binfo .biacts .gloss, .fcompacts .gloss { height: 48px; min-height: 48px; }

/* ---- Name step: one hero button, two quiet links ---- */
.fname .fnextg { display: flex; width: 100%; margin-top: 22px; }
.fquietrow { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.fquiet { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: #4a4d57; font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.fquiet svg { width: 13px; height: 13px; fill: currentColor; }
.fquiet:hover { color: #16181f; text-decoration: underline; text-underline-offset: 3px; }
.fquiet:focus-visible { outline: 2px solid #6a4795; outline-offset: 1px; }
.fqsep { width: 1px; height: 16px; background: rgba(22,24,31,.18); }

/* ---- Home: the main button is the same glossy pill ---- */
.hbtn.main.gloss { font: 700 18px/1 Inter, system-ui, sans-serif; letter-spacing: 0; padding: 0 28px; border: 1px solid color-mix(in srgb, var(--qc) 70%, #000); -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--qc) 72%, #fff) 0%, var(--qc) 48%, color-mix(in srgb, var(--qc) 82%, #000) 100%); }
.hbtn.main.gloss:hover { filter: brightness(1.05) saturate(1.05); }
.hlevels .hbtn, .hnav > .hbtn:not(.main) { min-height: 48px; }

/* ---- Box card: Done is the one glossy button; on/off choices are switch rows ---- */
.biswitch { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0 0 10px; padding: 9px 12px 9px 14px; border: 0; border-radius: 16px; background: #f4f4f6; color: #16181f; text-align: left; cursor: pointer; transition: background .2s; font-family: Inter, system-ui, sans-serif; }
.biswitch:hover { background: #ececf0; }
.biswitch[aria-checked="true"] { background: rgba(46,158,87,.11); }
.biswitch[aria-checked="true"]:hover { background: rgba(46,158,87,.16); }
.biswtx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.biswtx b { font: 650 15px/1.2 Inter, system-ui, sans-serif; }
.biswitch[aria-checked="true"] .biswtx b { color: #1c7a43; }
.biswtx small { font: 500 12.5px/1.25 Inter, system-ui, sans-serif; color: #6b6e75; }
.bisw { position: relative; flex: none; width: 48px; height: 28px; border-radius: 999px; background: #c9cad0; transition: background .2s; }
.bisw i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .22s cubic-bezier(.3,.8,.3,1); }
.biswitch[aria-checked="true"] .bisw { background: #2e9e57; }
.biswitch[aria-checked="true"] .bisw i { transform: translateX(20px); }
.biswitch:focus-visible { outline: 2px solid #2e9e57; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bisw, .bisw i { transition: none; } }
.binfo .bidone { width: 100%; height: 48px; min-height: 48px; margin-top: 4px; }
/* the training row stays quiet: a tinted row, its Watch label on a darker shade so small white text reads */
.binfo .biedutog { min-height: 48px; }
.binfo .biedutog b { background: color-mix(in srgb, var(--qc) 66%, #000); }
.binote { font-size: 12px !important; }

/* ---- Levels: drawer button, capsule clear of the drawer, one main button style ---- */
.lvstart { width: 100%; height: 48px; margin: 6px 0 12px; font-size: 15px; }
.lvicon { height: 44px; min-width: 44px; }
.lvicon.lvnavdl.gloss { color: #fff; border: 1px solid color-mix(in srgb, var(--qc) 70%, #000);
  background: linear-gradient(180deg, color-mix(in srgb, var(--qc) 72%, #fff) 0%, var(--qc) 48%, color-mix(in srgb, var(--qc) 82%, #000) 100%); }
.lvicon.lvnavdl.gloss:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--qc) 72%, #fff) 0%, var(--qc) 48%, color-mix(in srgb, var(--qc) 82%, #000) 100%); filter: brightness(1.05); }
.lvicon.lvcheck[aria-expanded="true"] { background: #6a4795; color: #fff; }
.lvseg button { height: 44px; }
.lvqs button.lvall { flex-basis: 48px; }
@media (min-width: 821px) {
  .builder.lvmode.lvsheet .lvnav { padding-left: calc(min(420px, 92vw) + 24px); z-index: 41; }
}
/* small white text on orange gets a darker orange */
.lvgrp[data-q="personal"] .bgtitle { background: #b45309; }
.builder.lvmode .pcopy, .builder.lvmode .lvcopy { color: rgba(255,255,255,.85); }

/* ---- Floating white pills on the name page and Andrew's levels too ---- */
.builder.flow[data-step="0"] .btop, .builder.lvmode .btop {
  position: absolute; top: 0; left: 0; right: 0; z-index: 12; min-height: 0; display: flex; align-items: center; gap: 8px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 0; background: transparent !important; border: 0 !important; box-shadow: none !important; pointer-events: none; }
.builder.flow[data-step="0"] .btop > *, .builder.lvmode .btop > * { pointer-events: auto; }
.builder.flow[data-step="0"] .btop .bbackbtn, .builder.lvmode .btop .bbackbtn,
.builder.flow[data-step="0"] .btop .bresetbtn, .builder.lvmode .btop .bresetbtn,
.builder.flow[data-step="0"] .btop .bhomebtn, .builder.lvmode .btop .bhomebtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; margin: 0; padding: 0 16px 0 11px; border: 0; border-radius: 999px;
  background: #fff; color: #16181f; font: 600 14px/1 Inter, system-ui, sans-serif; box-shadow: 0 8px 26px -10px rgba(10,20,40,.4), inset 0 0 0 1px rgba(20,22,30,.07); cursor: pointer; }
.builder.flow[data-step="0"] .btop .bbackbtn svg, .builder.lvmode .btop .bbackbtn svg, .builder.flow[data-step="0"] .btop .bresetbtn svg, .builder.lvmode .btop .bresetbtn svg, .builder.flow[data-step="0"] .btop .bhomebtn svg, .builder.lvmode .btop .bhomebtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.builder.flow[data-step="0"] .btop .bresetbtn, .builder.lvmode .btop .bresetbtn,
.builder.flow[data-step="0"] .btop .bhomebtn, .builder.lvmode .btop .bhomebtn { width: 44px; padding: 0; order: 5; }
.builder.flow[data-step="0"] .btop .bresetbtn, .builder.lvmode .btop .bresetbtn { order: 4; margin-left: auto; }
.builder.lvmode .btop .bhomebtn { margin-left: auto; }
.builder.flow[data-step="0"] .btop .bresetbtn span, .builder.lvmode .btop .bresetbtn span, .builder.flow[data-step="0"] .btop .bhomebtn span, .builder.lvmode .btop .bhomebtn span { display: none !important; }
.builder.flow[data-step="0"] .btop .bflowttl, .builder.lvmode .btop .bflowttl {
  position: absolute; left: 50%; top: calc(12px + env(safe-area-inset-top)); transform: translateX(-50%); margin: 0; line-height: 44px; pointer-events: none;
  font: 400 24px/44px 'Bebas Neue', sans-serif; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.25); white-space: nowrap; }
.builder.flow[data-step="0"] .btop .sp, .builder.lvmode .btop .sp { display: none; }
/* pills float over the page, so the page takes the whole height */
.builder.flow[data-step="0"] { grid-template-rows: 0 minmax(0, 1fr) !important; }
.builder.flow[data-step="0"] .bpanel { grid-row: 2 !important; padding-top: calc(72px + env(safe-area-inset-top)); }
.builder.flow[data-step="0"] .btop .bflowttl { display: none; }
.builder.lvmode .btop .bresetbtn { display: none !important; }
.builder.lvmode { grid-template-rows: 0 minmax(0, 1fr) auto !important; }
.lvicon.lvnavdl.gloss { min-height: 44px; width: 44px; padding: 0; }
@media (min-width: 821px) { .lvicon.lvnavdl.gloss { width: auto; padding: 0 18px 0 15px; } }
/* phone: back, Andrew, eye, video, reset and home on the first row; undo and redo beside the name on the second */
@media (max-width: 760px) {
  .bftop { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 44px auto; row-gap: 8px; column-gap: 6px; }
  .bftop .bfleft { display: contents; }
  .bftop .bfback { grid-column: 1; grid-row: 1; }
  .bftop .bfur { grid-column: 1; grid-row: 2; height: 44px; padding: 0 2px; justify-self: start; }
  .bftop .bfur button { width: 44px; height: 44px; }
  .bftop .bfright { grid-column: 3; grid-row: 1; gap: 6px; }
  .bftop .bftitle { grid-column: 2 / -1; grid-row: 2; justify-self: center; align-self: center; max-width: 100%; font-size: 17px; }
  .bfpill, .bfeye, .bfchip { height: 44px; }
  .bfcirc { width: 44px; height: 44px; }
  .bfdock .bfdots button { min-width: 44px; height: 44px; }
}
@media (max-width: 380px) { .bftop .bfright { gap: 4px; } .bftop { column-gap: 4px; } }
/* one font system: Bebas for display headings, Inter for everything else; both column headers match */
.cmpcap small { height: 1.7em; font-size: .82em; font-weight: 700; letter-spacing: .12em; }
.cmpcap small .cmpav { width: 1.5em; height: 1.5em; margin-right: .45em; }
.cmpcap b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 2.5em; line-height: 1; letter-spacing: .03em; text-transform: uppercase; margin-top: .08em; }
.bftop .bftitle, .bftop .bftitle span { font-family: 'Bebas Neue', sans-serif !important; font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: .04em; text-transform: uppercase; line-height: 1; padding: 7px 12px 5px; }
.bftop .bftitle span { padding: 0; font-size: inherit; }
@media (max-width: 760px) { .bftop .bftitle { font-size: 22px; } }

/* Mobile navigation: consistent rows, reachable controls, and no off-screen pills. */
@media (max-width: 820px) {
  .bftop { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); grid-template-columns: 88px minmax(58px, 1fr) 44px 44px 44px; grid-template-rows: 44px 44px; gap: 6px 4px; }
  .bftop .bfleft, .bftop .bfright { display: contents; }
  .bftop .bfback { grid-column: 1; grid-row: 1; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .bftop .bfback span { display: none; }
  .bftop .bftitle { grid-column: 1 / -1; grid-row: 1; width: calc(100% - 104px); height: 44px; min-width: 0; max-width: 100%; justify-self: center; justify-content: center; padding: 4px; font-size: 20px; }
  .bftop .bfur { grid-column: 1; grid-row: 2; width: 88px; height: 44px; padding: 0; }
  .bftop .bfur button { width: 44px; height: 44px; }
  .bftop .bfwrap { grid-column: 2; grid-row: 2; justify-self: center; min-width: 0; }
  .bftop .bfchip { height: 44px; min-width: 58px; padding: 0 6px; gap: 4px; justify-content: center; }
  .bftop .bfchip .bfnm, .bftop .bfchip .bflvl, .bftop .bfchip > svg { display: none; }
  .bftop .bfchip .bflvs { display: inline; }
  .bftop .bfchip .bfav { width: 26px; height: 26px; }
  .bftop .bfeye { grid-column: 3; grid-row: 2; width: 44px; height: 44px; padding: 0; justify-content: center; }
  .bftop .bfeye span, .bftop .bfeye.show img { display: none; }
  .bftop .bfeye.show .bfeyeic { display: block; }
  .bftop [data-video] { grid-column: 4; grid-row: 2; width: 44px; height: 44px; }
  .bftop [data-freset] { grid-column: 5; grid-row: 2; width: 44px; height: 44px; }
  .bftop [data-fhome] { grid-column: 5; grid-row: 1; width: 44px; height: 44px; }
  .bftop .bfcmppop { position: fixed; top: calc(112px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; min-width: 0; max-height: calc(100dvh - 132px); overflow-y: auto; }
  .bfbot { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(8px + env(safe-area-inset-bottom)); }
  .bfdock { display: flex; flex-direction: column; width: 100%; max-width: 520px; padding: 6px; gap: 6px; border-radius: 24px; box-sizing: border-box; }
  .bfdock .bfsep { display: none; }
  .bfdock .bfdots { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; gap: 2px; overflow: visible; }
  .bfdock .bfdots button, .bfdock .bfdots button:not(.now) { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; width: 100%; height: 44px; padding: 3px 1px; font-size: 10px; }
  .bfdock .bfdots button span, .bfdock .bfdots button:not(.now) span, .bfdock .bfdots button.now span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bfdock .bfbtns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 6px; }
  .bfdock .bfadd { width: 100%; min-width: 0; height: 44px; padding: 0 7px; gap: 5px; justify-content: center; font-size: 12px; }
  .bfdock .bfadd .glic, .bfdock .bfcopy .bfcopyav { width: 24px; height: 24px; flex-shrink: 0; }
  .bfdock .bfadd span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bfdock .bfprint { width: 100%; height: 44px; border-radius: 22px; }
  .builder.lvmode .lvnav { padding: 0 8px calc(8px + env(safe-area-inset-bottom)); }
  .lvcap { padding: 6px; gap: 4px; }
  .lvtoprow { gap: 4px; }
  .lvicon { width: 44px; height: 44px; flex: 0 0 44px; }
  .lvseg button { height: 44px; }
  .lvqs button:not(.lvall) { font-size: 11px; padding: 0 2px; }
  .lvqs button.lvall { flex-basis: 44px; }
  .builder.lvmode .btop .bflowttl { max-width: calc(100% - 120px); overflow: hidden; text-overflow: ellipsis; font-size: 20px; }
}
@media (max-width: 820px) {
  .builder.lvmode .btop, .builder.flow[data-step="0"] .btop { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  .builder.lvmode .btop .bbackbtn, .builder.flow[data-step="0"] .btop .bbackbtn { width: 44px; padding: 0; }
  .builder.lvmode .btop .bbackbtn span, .builder.flow[data-step="0"] .btop .bbackbtn span { display: none; }
}

/* One field at a time inside the existing box editor; the diagram stays unchanged. */
.binfo.fieldflow .fieldstep[hidden], .binfo.fieldflow > [hidden] { display:none !important; }
.fieldnav { margin-top:18px; padding-top:12px; border-top:1px solid #dedbe3; }
.fieldprogress { margin:0 0 10px; font:12px/1.4 Inter,sans-serif; color:#666; }
.fieldnav > div { display:flex; justify-content:space-between; gap:12px; }
.fieldnav button { border:0; border-radius:20px; min-height:44px; min-width:80px; padding:10px 20px; color:#493263; background:#f0edf5; font:600 14px Inter,sans-serif; cursor:pointer; }
.fieldnav button:last-child { background:#62448a; color:white; }
.fieldnav button:disabled { opacity:.4; cursor:default; }
.binfo.fieldflow .bifield { margin-top:16px; }
.binfo.fieldflow .bifield > input, .binfo.fieldflow .bifield select { min-height:44px; }
@media(max-width:820px) { .binfo.fieldflow.sheet { max-height:68dvh; } }
.cmpcap { align-items:center; text-align:center; justify-content:center; padding-bottom:0; }
.cmpcap b { font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:3.8em; line-height:1.05; white-space:normal; margin:0; width:100%; }
.cmpcap b { font-size:3em; flex-shrink:0; overflow:visible; }