/* Explore 2.0: Art browsing (lane L16, js/browse.js + js/browse-ui.js). DESIGN-SYSTEM tokens only: serif for words,
   mono only for counts and codes, opaque controls (no glass), hairlines instead of boxes, 44px targets. */

.xb-screen{--xbstick:0px}
.xb-band{padding-bottom:6px}
.xb-band .p-dek{margin-bottom:0}

/* ---------- the color row ---------- */
.xb-pick{display:flex;align-items:flex-start;gap:10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;margin:18px calc(-1 * var(--g)) 0;padding:2px var(--g) 8px;scrollbar-width:none}
.xb-pick::-webkit-scrollbar{display:none}
.xb-tool{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:58px;color:var(--ink)}
.xb-tool>svg,.xb-tool>.xb-ring{width:46px;height:46px;padding:12px;border-radius:50%;background:var(--surface-2);border:1px solid rgba(236,232,223,.14);box-sizing:border-box;transition:transform .2s var(--spring)}
.xb-tool:active>svg,.xb-tool:active>.xb-ring{transform:scale(.92)}
.xb-tool span{font:italic 400 17px/1.1 var(--serif);color:var(--soft);white-space:nowrap}
.xb-ring{display:block;position:relative}
.xb-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:conic-gradient(from 90deg,#E0534A,#E5A23A,#D9CF45,#5DBB63,#3FB3B0,#4A7FD8,#8A5BD0,#D45BA9,#E0534A)}
.xb-ring::after{content:"";position:absolute;inset:15px;border-radius:50%;background:var(--surface-2)}
.xb-sep{flex:none;width:1px;height:34px;margin:6px 2px 0;background:var(--rule)}
.xb-bub{flex:none;width:46px;height:46px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.14);transition:transform .2s var(--spring)}
.xb-bub:active{transform:scale(.92)}
.xb-bub.on{box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--ink)}

/* ---------- facet chips ---------- */
.xb-facets{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;margin:10px calc(-1 * var(--g)) 0;padding:4px var(--g);scrollbar-width:none}
.xb-facets::-webkit-scrollbar{display:none}
.xb-fc{flex:none;display:flex;align-items:center;gap:7px;height:40px;padding:0 12px 0 14px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid rgba(236,232,223,.12);color:var(--ink);font:400 17px/1 var(--serif);max-width:220px}
.xb-fc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xb-fc svg{flex:none;color:var(--faint)}
.xb-fc i{flex:none;width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.2)}
.xb-fc.on{background:var(--paper);color:var(--paper-ink);border-color:var(--paper)}
.xb-fc.on svg{color:var(--paper-soft)}
.xb-fc:active{transform:scale(.96)}

/* ---------- the color's two sliders ---------- */
.xb-tune:empty{display:none}
.xb-tune{margin-top:18px;padding:16px 0 4px;border-top:1px solid var(--rule)}
.xb-tune-head{display:flex;align-items:center;gap:14px}
.xb-tune-sw{flex:none;width:48px;height:48px;border-radius:var(--r-1);background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.xb-tune-set{display:flex;flex:none;height:48px;width:96px;border-radius:var(--r-1);overflow:hidden}
.xb-tune-set button{flex:1;background:var(--c)}
.xb-tune-head>span{display:flex;flex-direction:column;gap:4px;min-width:0}
.xb-tune-head b{font:400 26px/1 var(--serif);letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xb-tune-head em{font:400 13px/1 var(--mono);color:var(--soft);font-style:normal}
.xb-tune-head em:not(.mono){font:italic 400 17px/1.2 var(--serif)}
.xb-sl{margin-top:16px}
.xb-sl-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.xb-sl-top span{font:italic 400 17px/1.2 var(--serif);color:var(--soft)}
.xb-sl-top b{font:400 17px/1.2 var(--serif);color:var(--ink);text-align:right}
.xb-tr{position:relative;height:44px;touch-action:pan-y;cursor:pointer;outline:none}
.xb-tr-line,.xb-tr-ramp{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:rgba(236,232,223,.16)}
.xb-tr-ramp{height:10px;margin-top:-5px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.xb-tr-fill{position:absolute;left:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:var(--ink);opacity:.85}
.xb-tr-ramp~.xb-tr-fill{display:none}
.xb-tr i{position:absolute;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--faint)}
.xb-tr-ramp~i{background:rgba(14,13,11,.55)}
.xb-kn{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--paper);box-shadow:0 2px 10px rgba(0,0,0,.5);transition:left .12s var(--ease),transform .15s var(--spring)}
.xb-tr.drag .xb-kn{transition:none;transform:scale(1.12)}
.xb-tr:focus-visible .xb-kn{box-shadow:0 0 0 3px var(--ground),0 0 0 5px var(--ink)}
.xb-sl-ends{display:flex;justify-content:space-between;margin-top:-6px;font:italic 400 17px/1 var(--serif);color:var(--faint)}
.xb-presets{display:flex;gap:6px;margin-top:16px}
.xb-presets button{flex:1 1 auto;height:36px;padding:0 6px;white-space:nowrap;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid rgba(236,232,223,.12);font:400 16px/1 var(--serif);color:var(--ink)}
.xb-presets button.on{background:var(--paper);color:var(--paper-ink);border-color:var(--paper)}
.xb-tune-sum{margin:14px 0 0;font:italic 400 17px/1.35 var(--serif);color:var(--soft);text-wrap:pretty}

/* ---------- the sticky bar: breadcrumb + count, always visible ---------- */
.xb-bar{position:sticky;top:0;z-index:6;margin:16px calc(-1 * var(--g)) 0;padding:calc(var(--top) * 0) var(--g) 8px;background:var(--ground);border-bottom:1px solid var(--rule)}
.xb-roomname{margin:10px 0 0;font:400 24px/1.05 var(--serif);letter-spacing:-.015em}
.xb-roomname em{font:italic 400 17px/1 var(--serif);color:var(--soft)}
.xb-crumbs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--g));padding:10px var(--g) 0}
.xb-crumbs::-webkit-scrollbar{display:none}
.xb-cr{flex:none;display:flex;align-items:center;height:34px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid rgba(236,232,223,.12)}
.xb-cr>button:first-child{display:flex;align-items:center;gap:6px;height:100%;padding:0 4px 0 12px;font:400 15px/1 var(--serif);color:var(--ink);white-space:nowrap}
.xb-cr i{width:13px;height:13px;border-radius:50%;background:var(--c)}
.xb-crx{display:grid;place-items:center;width:34px;height:34px;color:var(--soft)}
.xb-crx svg{width:11px;height:11px}
.xb-count{display:flex;align-items:baseline;gap:6px;margin:8px 0 0;min-height:30px;flex-wrap:wrap}
.xb-count>b{font:500 16px/1 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.xb-count>b:not([data-xbn]){font:400 22px/1 var(--serif)}
.xb-count>span:not(.xb-acts){font:italic 400 17px/1 var(--serif);color:var(--soft)}
.xb-acts{margin-left:auto;display:flex;gap:16px}
.xb-link{min-height:30px;font:italic 400 17px/1 var(--serif);color:var(--soft);text-decoration:underline;text-decoration-color:rgba(236,232,223,.3);text-underline-offset:4px}
.xb-link:active{color:var(--ink)}

/* ---------- rooms ---------- */
.xb-rooms:empty{display:none}
.xb-h{margin-top:28px}
.xb-roomrail{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;margin:14px calc(-1 * var(--g)) 0;padding:0 var(--g) 6px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--g)}
.xb-roomrail::-webkit-scrollbar{display:none}
.xb-room{flex:none;width:156px;display:flex;flex-direction:column;align-items:stretch;text-align:left;scroll-snap-align:start}
.xb-room-im{display:flex;height:116px;border-radius:var(--r-2) var(--r-2) 0 0;overflow:hidden;background:var(--surface-2)}
.xb-room-im img{flex:1;min-width:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.xb-room-im img.ld{opacity:1}
.xb-room-im img.two{border-left:2px solid var(--ground)}
.xb-room-im.flat i{flex:1;background:var(--c)}
.xb-room-band{display:flex;height:8px;border-radius:0 0 var(--r-1) var(--r-1);overflow:hidden;background:var(--surface-2)}
.xb-room-band i{background:var(--c)}
.xb-room b{margin-top:10px;font:400 19px/1.08 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.xb-room small{margin-top:4px;font:400 13px/1.35 var(--sans);color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xb-room em{margin-top:6px;font:400 13px/1 var(--mono);color:var(--faint);font-style:normal;min-height:12px}
.xb-room:active .xb-room-im{transform:scale(.98)}

/* ---------- views + sort ---------- */
.xb-views:empty{display:none}
.xb-views{display:flex;align-items:center;justify-content:space-between;gap:4px 10px;flex-wrap:wrap;margin-top:24px}
.xb-seg{display:flex;padding:3px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid rgba(236,232,223,.1)}
.xb-seg button{height:36px;padding:0 12px;border-radius:var(--r-pill);font:400 16px/1 var(--serif);color:var(--soft);transition:background .2s,color .2s}
.xb-seg button.on{background:var(--paper);color:var(--paper-ink)}
.xb-sortbtn{display:flex;align-items:center;gap:4px;min-height:44px;font:italic 400 17px/1 var(--serif);color:var(--soft);white-space:nowrap}
@media (max-width:374px){.xb-seg button{padding:0 9px;font-size:15px}.xb-sortbtn{font-size:15px}}

/* ---------- the result set's own colors + actions ---------- */
.xb-body{margin-top:18px;min-height:40vh}
.xb-set{margin:0 0 18px}
.xb-set-strip{display:flex;height:30px;border-radius:var(--r-1);overflow:hidden}
.xb-set-strip button{background:var(--c);min-width:6px}
.xb-set-cap{margin:8px 0 0;font:italic 400 17px/1.35 var(--serif);color:var(--soft);text-wrap:pretty}
.xb-set .cs-acts{margin-top:10px}

/* ---------- Grid ---------- */
.xb-sec{margin-top:6px}
.xb-sec-h{position:sticky;top:var(--xbstick);z-index:4;display:flex;justify-content:space-between;align-items:baseline;margin:0 calc(-1 * var(--g));padding:12px var(--g) 8px;background:var(--ground)}
.xb-sec-h b{font:400 22px/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:44px}
.xb-sec-h span{font:400 13px/1 var(--mono);color:var(--faint);margin-right:30px}
.xb-tiles{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:4px;align-content:start;padding-right:0}
.xb-t{position:relative;display:block;aspect-ratio:1;background:var(--c);border-radius:2px;overflow:hidden}
.xb-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s}
.xb-t img.ld{opacity:1}
.xb-t-pal{position:absolute;left:0;right:0;bottom:0;height:5px;display:flex}
.xb-t-pal i{background:var(--c)}
.xb-t em{position:absolute;left:5px;top:5px;padding:3px 6px;border-radius:var(--r-pill);background:rgba(14,13,11,.78);font:400 13px/1 var(--mono);color:var(--ink);font-style:normal}
.xb-t:active{transform:scale(.97)}
.xb-sec-more{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 0 10px}
.xb-sec-more .xb-link{min-height:40px}
.xb-left{font:400 13px/1 var(--mono);color:var(--faint)}
.xb-sec-more .xb-link[data-xbonly]{margin-left:auto}
.xb-skel{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.xb-skel i{aspect-ratio:1;background:var(--surface-2);border-radius:2px;animation:xbPulse 1.6s ease-in-out infinite}
@keyframes xbPulse{50%{opacity:.55}}
.xb-poems{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.xb-poems .pm-q{width:100%;text-align:left}

/* the jump bar, iOS-style, on the right edge */
.xb-jump{position:fixed;right:max(2px,calc((100vw - 540px) / 2 + 2px));top:50%;transform:translateY(-50%);z-index:9;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 3px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid rgba(236,232,223,.12);touch-action:none;max-height:72dvh}
.xb-jump[hidden]{display:none}
.xb-jump span{display:block;min-width:24px;padding:2px 2px;text-align:center;font:500 13px/1.25 var(--mono);color:var(--soft);font-variant-numeric:tabular-nums}
.xb-jump.on{background:var(--surface-3)}
.xb-jump.on span{color:var(--ink)}
.xb-jump-bub{position:absolute;right:42px;transform:translateY(-50%);padding:8px 14px;border-radius:var(--r-2);background:var(--paper);color:var(--paper-ink);font:400 30px/1 var(--serif);white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.5);pointer-events:none}
.xb-jump-bub[hidden]{display:none}

/* ---------- empty + loosening ---------- */
.xb-empty{padding:28px 0 8px}
.xb-empty>b{display:block;font:400 28px/1.05 var(--serif);letter-spacing:-.02em}
.xb-empty>p{margin:10px 0 14px;font:italic 400 17px/1.3 var(--serif);color:var(--soft)}
.xb-loosen{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:56px;border-bottom:1px solid var(--rule);font:400 20px/1.1 var(--serif);color:var(--ink);text-align:left}
.xb-loosen em{font:400 13px/1 var(--mono);color:var(--soft);font-style:normal}
.xb-none{font:italic 400 17px/1.3 var(--serif);color:var(--soft);margin:14px 0}

/* ---------- River ---------- */
.xb-river{position:relative;touch-action:pan-y;cursor:ew-resize;user-select:none}
.xb-river svg{display:block;overflow:visible}
.xb-river text{font:400 10px var(--mono);fill:var(--faint)}
.xb-rv-line{stroke:var(--paper);stroke-width:1.5}
.xb-rv-knob{position:absolute;top:82px;width:26px;height:26px;margin-left:-13px;border-radius:50%;background:var(--paper);box-shadow:0 2px 12px rgba(0,0,0,.55);pointer-events:none;transition:left .1s var(--ease)}
.xb-river.drag .xb-rv-knob{transition:none;transform:scale(1.12)}
.xb-rv-hint{margin:6px 0 0;font:italic 400 17px/1.3 var(--serif);color:var(--faint)}
.xb-rv-panel{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule)}
.xb-rv-head{display:flex;align-items:baseline;justify-content:space-between}
.xb-rv-head b{font:400 44px/.95 var(--serif);letter-spacing:-.03em}
.xb-rv-head span{font:italic 400 17px/1 var(--serif);color:var(--soft)}
.xb-rv-mk{margin:8px 0 0;font:italic 400 17px/1.35 var(--serif);color:var(--soft)}
.xb-rv-sub{margin:16px 0 8px;font:italic 400 17px/1.3 var(--serif);color:var(--soft)}
.xb-rv-cols{display:flex;flex-wrap:wrap;gap:8px}
.xb-chip{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px 0 6px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid rgba(236,232,223,.12);color:var(--ink);font:400 16px/1 var(--serif)}
.xb-chip i{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.xb-chip em{font:400 13px/1 var(--mono);color:var(--soft);font-style:normal}
.xb-rail{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;margin:16px calc(-1 * var(--g)) 4px;padding:0 var(--g);scrollbar-width:none}
.xb-rail::-webkit-scrollbar{display:none}
.xb-rail .xb-t{flex:none;width:96px}

/* ---------- Painters ---------- */
.xb-pr-lead{margin:0 0 6px;font:italic 400 17px/1.38 var(--serif);color:var(--soft);text-wrap:pretty}
.xb-pr{display:grid;grid-template-columns:1fr 20px;grid-template-rows:auto auto;column-gap:8px;width:100%;padding:16px 0 14px;border-bottom:1px solid var(--rule);text-align:left;align-items:center}
.xb-strip{grid-column:1 / -1;width:100%;height:40px;border-radius:var(--r-1);background:var(--surface-2);margin-bottom:10px}
.xb-pr-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.xb-pr-t b{font:400 21px/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.xb-pr-t small{font:400 13px/1.35 var(--sans);color:var(--soft)}
.xb-pr>svg{color:var(--faint)}
.xb-pr:active{background:var(--surface-1)}
.xb-more-rows{display:block;margin:14px 0 0;min-height:44px}

/* ---------- Wall ---------- */
.xb-wall-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.xb-wall-head p{margin:0;font:italic 400 17px/1.35 var(--serif);color:var(--soft)}
.xb-wall-head .xb-link{flex:none}
.xb-wall{position:relative;border-radius:var(--r-1);overflow:hidden;cursor:zoom-in}
.xb-wall canvas{position:absolute;left:0;width:100%;display:block}

/* ---------- Twins, the unpainted ---------- */
.xb-twins{display:flex;flex-direction:column;gap:26px;margin-top:16px}
.xb-twin-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.xb-twin-yrs{display:flex;align-items:baseline;justify-content:space-between;margin-top:8px}
.xb-twin-yrs b{font:400 34px/1 var(--serif);letter-spacing:-.02em}
.xb-twin-yrs span{font:400 13px/1 var(--mono);color:var(--soft)}
.xb-unp{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:16px}
.xb-unp-t{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:118px;padding:12px;border-radius:var(--r-1);background:var(--c);text-align:left}
.xb-unp-t b{font:400 20px/1.05 var(--serif)}
.xb-unp-t small{font:400 13px/1.3 var(--sans)}
.xb-unp-t[data-ink="dark"]{color:var(--paper-ink)}
.xb-unp-t[data-ink="light"]{color:#fff}

/* ---------- sheets ---------- */
.xb-sh-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
.xb-sh-top b{font:400 32px/1 var(--serif);letter-spacing:-.02em}
.xb-sh-top span{font:italic 400 17px/1 var(--serif);color:var(--soft)}
.xb-sh{margin-bottom:14px}
.xb-sh-go{margin-top:6px}
.xb-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:54px;border-bottom:1px solid var(--rule);text-align:left;color:var(--ink)}
.xb-opt>span{display:flex;align-items:center;gap:10px;font:400 20px/1.1 var(--serif);min-width:0}
.xb-opt>span i{flex:none;width:26px;height:26px;border-radius:var(--r-1);background:var(--c)}
.xb-opt>em{flex:none;font:400 13px/1 var(--mono);color:var(--soft);font-style:normal}
.xb-opt>em:not(.mono){font:italic 400 17px/1.2 var(--serif)}
.xb-opt.on>span::after{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--paper);margin-left:2px}
.xb-opt.zero{opacity:.42}
.xb-optrow{margin-top:14px}
.xb-optrow>p{margin:0 0 8px;font:italic 400 17px/1 var(--serif);color:var(--soft)}
.xb-optrow>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.xb-optrow .xb-opt{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:62px;padding:8px 12px;border:1px solid rgba(236,232,223,.12);border-radius:var(--r-2);background:var(--surface-2)}
.xb-optrow .xb-opt.on{background:var(--paper);border-color:var(--paper)}
.xb-optrow .xb-opt.on>span{color:var(--paper-ink)}
.xb-optrow .xb-opt.on>span::after{display:none}
.xb-optrow .xb-opt.on>em{color:var(--paper-soft)}
.xb-optrow .xb-recipes{grid-template-columns:1fr 1fr}
.xb-recipes .xb-opt>span{font-size:18px}
.xb-namefield input{font-size:22px}
.xb-when-v{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 14px}
.xb-when-v b{font:400 30px/1 var(--serif);letter-spacing:-.02em}
.xb-when-v span{font:italic 400 17px/1 var(--serif);color:var(--soft)}
.xb-hist{position:relative;display:flex;align-items:flex-end;gap:1px;height:110px;touch-action:none;cursor:ew-resize}
.xb-hist i{flex:1;min-width:1px;background:rgba(236,232,223,.16);border-radius:1px 1px 0 0}
.xb-hist i.in{background:var(--paper)}
.xb-hk{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--paper)}
.xb-hk::after{content:"";position:absolute;bottom:-10px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.xb-hist-ax{display:flex;justify-content:space-between;margin-top:20px;font:400 13px/1 var(--mono);color:var(--faint)}
.xb-cents{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.xb-cents button{height:36px;padding:0 13px;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid rgba(236,232,223,.12);font:400 16px/1 var(--serif);color:var(--ink)}
.xb-cents button.on{background:var(--paper);color:var(--paper-ink)}

/* the dial */
.xb-dial-top{display:flex;align-items:center;gap:14px}
.xb-dial-sw{flex:none;width:64px;height:64px;border-radius:var(--r-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.xb-dial-top>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.xb-dial-top b{font:400 28px/1.02 var(--serif);letter-spacing:-.02em}
.xb-dial-top em{font:400 13px/1 var(--mono);color:var(--soft);font-style:normal}
.xb-dial{position:relative;margin:18px auto 0;touch-action:none;cursor:crosshair}
.xb-dial canvas{position:absolute;left:0;top:0;display:block}
.xb-dk{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:3px solid var(--paper);box-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none}
.xb-dial-help{margin:12px 0 16px;text-align:center;font:italic 400 17px/1.3 var(--serif);color:var(--faint)}
.xb-dial-q{margin-top:16px}
.xb-qn{margin:10px 0 2px;font:400 13px/1 var(--mono);color:var(--faint)}
.xb-qr{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;width:100%;padding:9px 0;border-bottom:1px solid var(--rule);text-align:left}
.xb-qr i{grid-row:1 / 3;width:30px;height:30px;border-radius:var(--r-1);background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.xb-qr b{font:400 19px/1.1 var(--serif);color:var(--ink)}
.xb-qr small{font:400 13px/1.3 var(--sans);color:var(--soft)}
.xb-qr small:empty{display:none}
.xb-dial-src{display:flex;gap:18px;margin:20px 0 4px}
.xb-dial-src .xb-tool{width:auto;flex-direction:row;gap:10px}
.xb-dial-src .xb-tool span{font-size:16px;color:var(--ink);font-style:normal}
.xb-dial-row{margin-top:18px}
.xb-dial-row>p{margin:0 0 8px;font:italic 400 17px/1 var(--serif);color:var(--soft)}
.xb-dial-chips{display:flex;flex-wrap:wrap;gap:6px}
.xb-chip-pie{display:grid;grid-template-columns:1fr 1fr;width:26px;height:26px;border-radius:50%;overflow:hidden}
.xb-chip-pie i{width:auto;height:auto;border-radius:0;box-shadow:none}
.xb-photo img{display:block;max-width:100%;max-height:200px;margin:4px auto 10px;border-radius:var(--r-2)}
.xb-photo-pal{display:flex;height:40px;border-radius:var(--r-1);overflow:hidden;margin-bottom:6px}
.xb-photo-pal button{background:var(--c)}
.xb-sh .fine{margin-top:14px}