/* #021 Bone Shape web-font / v1.0.98. Self-hosted; no CDN or URL query. */
@font-face {
  font-family: "Bone Shape";
  src: url("../font/shape/v1.0.98/bone-shape.woff2") format("woff2"),
       url("../font/shape/v1.0.98/BoneShape-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
.bf-shape-font {
  display: inline-block;
  font-family: "Bone Shape" !important;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  font-variant: normal;
  speak: none;
  color: inherit;
}
.bf-shape-font::selection { background: #a0ccff; }
/* Sample layout is scoped; it does not alter the #021 SVG Runtime or other UI. */
.bf-font-sample { --bg:#f1f5fa;--panel:#fff;--fg:#17314e;--line:#c6d5e6;--muted:#506782;--accent:#2570bf;--field:#e7f0fa; background:var(--bg); color:var(--fg); margin:0; font-family:Meiryo,"Yu Gothic",sans-serif; min-height:100vh; }
.bf-font-sample[data-theme="dark"] { --bg:#0c1522;--panel:#192a3c;--fg:#e6f3ff;--line:#415979;--muted:#a5c4e6;--accent:#72b9ff;--field:#12263a; }
.bf-font-sample[data-theme="neon"] { --bg:#050e17;--panel:#0b2030;--fg:#beffff;--line:#157a93;--muted:#80c6dc;--accent:#00e5f1;--field:#0a2939; }
.bf-font-sample * { box-sizing: border-box; }
.bf-font-sample header { padding:24px max(24px,4vw); border-bottom:1px solid var(--line); background:var(--panel); }
.bf-font-sample h1 { margin:0 0 9px; font-size:clamp(20px,3vw,28px); }
.bf-font-sample p { line-height:1.7; margin:5px 0; }
.bf-font-sample .muted { color:var(--muted); }
.bf-font-sample main { max-width:1280px; margin:auto; padding:20px; }
.bf-font-sample a,.bf-font-sample select { color:var(--accent); }
.bf-font-sample .toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px; background:var(--panel);border:1px solid var(--line); border-radius:10px; }
.bf-font-sample .toolbar a,.bf-font-sample select { display:inline-block; background:var(--field); border:1px solid var(--line); border-radius:6px; padding:8px 10px; font:inherit; }
.bf-font-sample section { margin-top:26px; }
.bf-font-sample .examples { display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px; }
.bf-font-sample .example,.bf-font-sample .item { border:1px solid var(--line); background:var(--panel); border-radius:9px; padding:14px; min-width:0; }
.bf-font-sample .example .bf-shape-font { font-size:50px; color:var(--accent); }
.bf-font-sample pre {white-space:pre-wrap;overflow-wrap:anywhere; padding:12px; background:var(--field); border-radius:7px; margin:8px 0 0; font-size:12px; }
.bf-font-sample .grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px; }
.bf-font-sample .item { display:flex; flex-direction:column;gap:5px; align-items:center;text-align:center; }
.bf-font-sample .glyph {width:100%;min-height:106px; display:flex;justify-content:center;align-items:center;color:var(--accent);background:var(--field);border-radius:6px;}
.bf-font-sample .glyph .bf-shape-font {font-size:76px;}
.bf-font-sample .name {font-size:14px;font-weight:700;}
.bf-font-sample .type {color:var(--muted);font-size:11px;overflow-wrap:anywhere;}
.bf-font-sample .codepoint {font-size:12px; color:var(--muted);}