/* Lace Bench (allchinabuyfind.net) - written for this site, prefix lbn- */
:root {
  --ink: #20252b; --paper: #f6f8fa; --card: #ffffff; --ox: #7a2331; --ox-deep: #5c1824; --tan: #8a5261;
  --muted: #52606b; --line: #d9e0e5; --slat: #eaf0f4; --ok: #18753c; --focus: #1f5fa8;
  --serif: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.62 var(--sans); }
img { max-width: 100%; }
a { color: var(--ox); text-underline-offset: 2px; }
a:hover { color: var(--ox-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2 { font-family: var(--serif); font-weight: 700; line-height: 1.18; letter-spacing: -0.005em; }
h1 { font-size: clamp(30px, 4.2vw, 46px); margin: 0 0 18px; }
h2 { font-size: clamp(23px, 2.5vw, 30px); margin: 0 0 14px; }
p { margin: 0 0 14px; }
ul, ol { padding-left: 1.2em; margin: 0 0 14px; }
li { margin: 0 0 8px; }
.lbn-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lbn-skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: var(--paper); padding: 10px 16px; z-index: 10; }
.lbn-skip:focus { top: 10px; color: var(--paper); }
.lbn-mono { font-family: Consolas, "Courier New", monospace; font-size: 15px; }

/* header: a strip of bench slats underneath */
.lbn-top { background: var(--card); border-bottom: 1px solid var(--line); }
.lbn-top__in { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.lbn-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); }
.lbn-brand img { width: 40px; height: 40px; border-radius: 4px; }
.lbn-brand__name { font-family: var(--serif); font-weight: 700; font-size: 18px; line-height: 1.2; }
.lbn-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 2px; }
.lbn-nav li { margin: 0; }
.lbn-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; border-radius: 4px; white-space: nowrap; }
.lbn-nav a:hover, .lbn-nav a[aria-current="page"] { background: var(--slat); color: var(--ox); }

/* hero */
.lbn-hero { background: var(--card); border-bottom: 1px solid var(--line); }
.lbn-hero__in { max-width: var(--wrap); margin: 0 auto; padding: 46px 20px 34px; }
.lbn-hero--home .lbn-hero__in { padding-top: 54px; padding-bottom: 40px; }
.lbn-lede { font-size: 19px; max-width: 760px; color: var(--ink); }
.lbn-search { display: flex; gap: 0; width: 100%; max-width: 860px; margin: 22px 0 14px; background: var(--card); border: 2px solid var(--ox); border-radius: 3px; overflow: hidden; }
.lbn-search input[type=search] { flex: 1 1 auto; min-width: 0; border: 0; padding: 18px 18px; font: 19px var(--sans); color: var(--ink); background: transparent; min-height: 64px; }
.lbn-search input[type=search]::placeholder { color: #6e645b; }
.lbn-search button { border: 0; background: var(--ox); color: #fff; font: 700 18px var(--sans); padding: 0 28px; min-height: 64px; cursor: pointer; }
.lbn-search button:hover { background: var(--ox-deep); }
.lbn-subnav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.lbn-subnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 15px; font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--tan); }
.lbn-hero--lost { min-height: 50vh; }

/* rows: text beside a figure, both stretched to the same height */
main > section { max-width: var(--wrap); margin: 0 auto; padding: 46px 20px; }
main > section + section { border-top: 1px solid var(--line); }
main > section.lbn-hero { max-width: none; padding: 0; }
.lbn-row { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: stretch; }
.lbn-row--fl { grid-template-columns: 400px minmax(0, 1fr); }
.lbn-row--fl > .lbn-fig { order: -1; }
.lbn-row__text { min-width: 0; }
.lbn-row__text > :last-child { margin-bottom: 0; }
.lbn-wide .lbn-row__after { min-width: 0; margin-top: 8px; }
.lbn-fig { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.lbn-fig__box { position: relative; flex: 1 1 auto; min-height: 280px; background: var(--slat); border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.lbn-fig__box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lbn-fig--contain .lbn-fig__box { background: #f7f3ec; }
.lbn-fig--contain .lbn-fig__box img { object-fit: contain; padding: 10px; }
.lbn-fig figcaption { flex: 0 0 auto; font-size: 14px; line-height: 1.45; color: var(--muted); padding-top: 8px; }

/* home tool entry */
.lbn-chiplinks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lbn-chiplinks li { margin: 0; }
.lbn-chiplinks a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 600; }
.lbn-chiplinks a:hover { border-color: var(--ox); }
.lbn-dot { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); display: inline-block; }

/* category wall */
.lbn-wall__grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lbn-wall__grid li { margin: 0; }
.lbn-tile { display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; text-decoration: none; color: var(--ink); }
.lbn-tile:hover { border-color: var(--ox); }
.lbn-tile img { width: 100%; max-width: 400px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.lbn-tile__name { font-family: var(--serif); font-weight: 700; font-size: 19px; padding: 10px 12px 2px; }
.lbn-tile__line { font-size: 14px; line-height: 1.45; color: var(--muted); padding: 0 12px 8px; flex: 1 1 auto; }
.lbn-tile__kind { align-self: flex-start; margin: 0 12px 12px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ox); border: 1px solid var(--ox); border-radius: 3px; padding: 1px 6px; }

/* cards */
.lbn-cards { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 24px; }
.lbn-card { margin: 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0 0 16px; display: flex; flex-direction: column; min-width: 0; }
.lbn-card__link { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); }
.lbn-card__img { width: 100%; max-width: none; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 0; display: block; background: var(--slat); }
.lbn-card__title { font-weight: 700; font-size: 16px; line-height: 1.3; }
.lbn-card__link:hover .lbn-card__title { color: var(--ox); text-decoration: underline; }
.lbn-card__desc { font-size: 14.5px; line-height: 1.45; margin: 8px 0 6px; color: var(--ink); flex: 1 1 auto; }
.lbn-card__meta { font-size: 13px; color: var(--muted); margin: 6px 0 6px; }
.lbn-card__sw { display: flex; gap: 4px; margin: 0; }
.lbn-card__sw span { width: 18px; height: 18px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .2); display: inline-block; }
.lbn-card__band { font-size: 13px; font-weight: 700; margin: 8px 0 0; min-height: 1.2em; color: var(--ox); }
.lbn-card__band:empty { display: none; }
.lbn-card__band .lbn-dot { width: 16px; height: 16px; flex-basis: 16px; vertical-align: -3px; margin-right: 6px; }

/* status line */
.lbn-status { border-left: 5px solid var(--ok); background: var(--card); padding: 12px 14px; margin: 16px 0 0; border-radius: 0 6px 6px 0; }
.lbn-status p { margin: 0; font-size: 15.5px; }

/* sorter */
.lbn-sorter__controls { background: var(--slat); border: 0; border-radius: 0; padding: 18px; margin: 22px 0; }
.lbn-sorter__chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.lbn-sorter__chips li { margin: 0; }
.lbn-chip { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; font: 600 14px var(--sans); color: var(--ink); cursor: pointer; text-align: left; }
.lbn-chip[aria-pressed="true"] { border: 2px solid var(--ox); background: #fff; }
.lbn-sorter__own { margin: 12px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.lbn-sorter__own input[type=color] { width: 64px; height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 2px; background: #fff; cursor: pointer; }
.lbn-sorter__status { font-weight: 600; }

/* table, glossary, faq, sign-up */
.lbn-tablewrap { overflow-x: auto; margin: 20px 0 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
.lbn-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 15px; }
.lbn-table caption { text-align: left; padding: 12px 14px; font-weight: 700; }
.lbn-table th, .lbn-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-top: 1px solid var(--line); }
.lbn-table thead th { background: var(--slat); }
.lbn-table tbody th { color: var(--ox); white-space: nowrap; }
.lbn-src { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }
.lbn-gloss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 20px 0 0; }
.lbn-gloss div { border-top: 2px solid var(--slat); padding-top: 8px; }
.lbn-gloss dt { font-weight: 700; color: var(--ox); }
.lbn-gloss dd { margin: 2px 0 0; font-size: 15.5px; }
.lbn-faq { margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.lbn-faq details { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 0 14px; }
.lbn-faq summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.lbn-faq details p { font-size: 15.5px; }
.lbn-signup { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lbn-signup li { margin: 0; }
.lbn-signup a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-weight: 600; }
.lbn-catlist li { margin-bottom: 10px; }

/* footer */
.lbn-foot { background: var(--ink); color: #efe7dc; margin-top: 20px; }
.lbn-foot__in { max-width: var(--wrap); margin: 0 auto; padding: 34px 20px 40px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; }
.lbn-foot a { color: #f2d7b4; }
.lbn-foot p { font-size: 14.5px; }
.lbn-foot__name { font-family: var(--serif); font-size: 20px !important; font-weight: 700; color: #fff; }
.lbn-foot__label { font-weight: 700; color: #fff; margin-bottom: 4px; }
.lbn-foot ul { list-style: none; padding: 0; margin: 0; }
.lbn-foot li { margin: 0; }
.lbn-foot li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 15px; }

/* in-text list links get a comfortable target on touch screens */
.lbn-row__text ul:not(.lbn-chiplinks):not(.lbn-signup) > li > a:first-child { display: inline-block; padding: 10px 0; margin: -10px 0; min-width: 44px; }

@media (max-width: 1180px) {
  .lbn-top__in { justify-content: center; }
  .lbn-nav a { padding: 0 8px; font-size: 14.5px; }
}
@media (max-width: 1000px) {
  .lbn-sorter__chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lbn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lbn-wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lbn-nav ul { flex-wrap: wrap; justify-content: center; }
  .lbn-row, .lbn-row--fl { display: block; }
  .lbn-fig { max-width: 560px; margin-top: 22px; }
  .lbn-fig__box { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .lbn-fig--contain .lbn-fig__box { aspect-ratio: 5 / 4; }
  .lbn-row__text { max-width: 640px; }
  .lbn-gloss, .lbn-faq { grid-template-columns: minmax(0, 1fr); }
  .lbn-foot__in { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  main > section { padding: 34px 16px; }
  .lbn-hero__in { padding: 32px 16px 26px; }
  .lbn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .lbn-card { padding: 8px; }
  .lbn-chiplinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lbn-sorter__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lbn-wall__grid { gap: 12px; }
  .lbn-search input[type=search] { font-size: 17px; padding: 14px 12px; }
  .lbn-search button { padding: 0 16px; }
  .lbn-signup { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (prefers-color-scheme: dark) {
  :root { --ink: #f1ebe3; --paper: #1b1714; --card: #26201c; --ox: #f0a0ab; --ox-deep: #ffc3cb; --muted: #c9bdb0; --line: #3d342e; --slat: #2e2723; --ok: #5cc48a; --focus: #8ab8ff; }
  .lbn-search button, .lbn-search button:hover { background: #9c3243; }
  .lbn-chip[aria-pressed="true"] { background: #33291f; }
  .lbn-sorter__own input[type=color] { background: #26201c; }
  .lbn-search input[type=search]::placeholder { color: #b5a99c; }
  .lbn-foot { background: #110e0c; }
}

/* Local review, 21 October 2026: category navigation and readable guide media. */
.complete-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px;margin:28px 0}.complete-category-grid>a{display:flex;min-width:0;flex-direction:column;text-decoration:none;color:inherit}.complete-category-grid img{display:block;width:100%;height:auto;aspect-ratio:6/5;object-fit:contain;background:#fff}.complete-category-grid span{display:block;padding:12px 0}.complete-category-grid strong{display:block;font-size:1.05rem;line-height:1.35}.complete-category-grid small{display:block;line-height:1.55;margin-top:6px;font-size:.9rem}.complete-category-grid a:hover strong{text-decoration:underline}.reading-extension{width:min(calc(100% - 40px),1120px);margin:0 auto;padding:44px 0}.reading-extension p,.reading-extension li{max-width:78ch;line-height:1.75}.reading-extension h3{margin-top:28px}.reading-extension table{border-collapse:collapse;width:100%;margin:22px 0}.reading-extension th,.reading-extension td{padding:14px;text-align:left;border-bottom:1px solid #b9b4a9;vertical-align:top}.reading-extension .table-scroll{overflow:auto}.guide-original{display:block}.guide-original img{height:auto!important;object-fit:contain!important}.guide-original:focus-visible{outline:3px solid currentColor;outline-offset:4px}.guide-original-note{display:block;font-size:.8rem;margin-top:5px}.flow-diagram{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px 0}.flow-diagram>div{padding:16px;border:1px solid #b9b4a9}.flow-diagram b{display:block;margin-bottom:8px}.reading-extension details{padding:18px 0;border-bottom:1px solid #b9b4a9}.reading-extension summary{cursor:pointer;font-weight:700;min-height:44px}.reading-extension blockquote{margin:20px 0;padding:18px 22px;border-left:3px solid currentColor;background:#ffffff55}.reading-extension img{max-width:100%;height:auto}@media(max-width:700px){.complete-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}.complete-category-grid small{font-size:.85rem}.reading-extension{padding:32px 0}.reading-extension table{min-width:540px}.flow-diagram{grid-template-columns:1fr}}

.home-summary{width:min(calc(100% - 40px),1120px);margin:0 auto}.home-summary p{max-width:75ch}.home-summary+figure{width:min(calc(100% - 40px),850px);margin:24px auto}.home-summary+figure img{height:auto;object-fit:contain}.lbn-row>.home-summary,.htr-sec>.home-summary{width:100%}@media(max-width:700px){.lgr-hero h1,.lbn-hero h1,.hdt-hero h1,.htr-hero h1{font-size:1.8rem;line-height:1.2}.lbn-hero{padding-top:24px;padding-bottom:28px}.complete-category-grid small{line-height:1.45}}

/* Verified archived tutorial figures: retain the complete original frame. */
.tutorial-source{margin:1.5rem 0 2rem}.tutorial-source img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;background:#fff}.tutorial-source figcaption{font-size:.875rem;line-height:1.6;margin-top:.65rem}.tutorial-step{margin-block:2.25rem}.tutorial-step h3{line-height:1.35}.tutorial-context{max-width:78ch}.tutorial-source a:focus-visible{outline:3px solid currentColor;outline-offset:4px}

/* 21 October 2026: site-specific visual refinement. */
.lbn-hero h1{max-width:25ch;letter-spacing:-.035em;font-weight:750}
.lbn-hero--home .lbn-hero__in{padding-top:48px;padding-bottom:32px}
.lbn-brand__name{font-size:16px;letter-spacing:-.015em}
.lbn-subnav a{padding-inline:0;margin-right:16px;border-bottom:0;text-decoration:underline;text-underline-offset:5px}
.lbn-tile{border:0;border-radius:0;background:transparent}.lbn-tile img{max-width:none;background:var(--card)}
.lbn-tile__name,.lbn-tile__line{padding-left:0}.lbn-tile__kind{margin-left:0;border:0;padding:0}
.complete-category-grid{gap:32px 24px}.complete-category-grid img{aspect-ratio:1;object-fit:contain}
.complete-category-grid strong{font-weight:700;letter-spacing:-.015em}.complete-category-grid small{color:var(--muted)}
.lbn-chiplinks a{border-radius:3px}.lbn-faq details{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.lbn-status{border-radius:0;border-left-width:3px}.lbn-fig__box{border:0;border-radius:0;background:var(--card)}
.reading-extension{max-width:1080px}.reading-extension p,.reading-extension li{max-width:74ch}
.tutorial-step h3{font-family:var(--serif);padding-left:14px;border-left:3px solid var(--ox)}.tutorial-source{margin-block:24px 38px}
.lbn-foot{background:#20252b}.lbn-foot a{color:#e2e7ed}
@media(max-width:1180px){.lbn-top__in{justify-content:flex-start;gap:6px 18px}.lbn-nav{width:100%;overflow-x:auto}.lbn-nav ul{flex-wrap:nowrap;justify-content:flex-start}}
@media(max-width:600px){.lbn-top__in{padding:8px 16px}.lbn-brand img{width:32px;height:32px}.lbn-brand__name{max-width:265px}.lbn-hero--home .lbn-hero__in{padding-top:26px}.lbn-hero h1{font-size:32px;line-height:1.12}.lbn-lede{font-size:17px}.lbn-search input[type=search],.lbn-search button{min-height:54px}.lbn-card{padding:0 0 12px}.complete-category-grid{gap:24px 16px}.lbn-sorter__controls{padding:12px}.lbn-sorter__chips{gap:6px}}
@media(prefers-color-scheme:dark){:root{--paper:#171c22;--card:#20272f;--ink:#edf1f5;--muted:#b9c5d0;--line:#36424e;--slat:#26313d}.lbn-chip[aria-pressed="true"]{background:#342a32}.lbn-fig--contain .lbn-fig__box{background:var(--card)}}
