@font-face{font-family:'F1';src:url('/assets/fonts/F1.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F2';src:url('/assets/fonts/F2.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F3';src:url('/assets/fonts/F3.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F4';src:url('/assets/fonts/F4.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F5';src:url('/assets/fonts/F5.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F6';src:url('/assets/fonts/F6.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F7';src:url('/assets/fonts/F7.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F8';src:url('/assets/fonts/F8.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F9';src:url('/assets/fonts/F9.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F10';src:url('/assets/fonts/F10.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F11';src:url('/assets/fonts/F11.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F12';src:url('/assets/fonts/F12.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F13';src:url('/assets/fonts/F13.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F14';src:url('/assets/fonts/F14.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F15';src:url('/assets/fonts/F15.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F16';src:url('/assets/fonts/F16.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F17';src:url('/assets/fonts/F17.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F18';src:url('/assets/fonts/F18.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F19';src:url('/assets/fonts/F19.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F20';src:url('/assets/fonts/F20.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F21';src:url('/assets/fonts/F21.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F22';src:url('/assets/fonts/F22.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F23';src:url('/assets/fonts/F23.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F24';src:url('/assets/fonts/F24.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F25';src:url('/assets/fonts/F25.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F26';src:url('/assets/fonts/F26.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F27';src:url('/assets/fonts/F27.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F28';src:url('/assets/fonts/F28.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F29';src:url('/assets/fonts/F29.woff2') format('woff2');font-display:swap}
@font-face{font-family:'F30';src:url('/assets/fonts/F30.woff2') format('woff2');font-display:swap}

#boneDesigner{--bone-ink:#101820;--bone-muted:#667085;--bone-line:#d9dde4;--bone-gold:#b58b3d;color:var(--bone-ink)}
#boneDesigner *{box-sizing:border-box}
.bone-builder-shell{margin-top:24px;border:1px solid var(--bone-line);border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 12px 34px rgba(16,24,32,.07)}
.bone-builder-title{display:flex;align-items:end;justify-content:space-between;gap:22px;padding:22px 24px;background:#111;color:#fff;border-bottom:4px solid var(--bone-gold)}
.bone-kicker{display:block;color:#e8c978;font-size:10px;font-weight:900;letter-spacing:.15em;margin-bottom:6px}
.bone-builder-title h2{margin:0;font-size:28px;line-height:1.06}
.bone-builder-title p{margin:7px 0 0;color:#cdd3d9;font-size:13px;max-width:720px}
.bone-size-chip{flex:0 0 auto;border:1px solid #454b52;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:900;color:#e8c978}

.bone-builder-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(370px,.94fr);gap:20px;padding:20px}
.bone-preview-card,.bone-panel{border:1px solid var(--bone-line);border-radius:16px;background:#fff}
.bone-preview-card{overflow:hidden;align-self:start;position:sticky;top:96px}
.bone-preview-head{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--bone-line)}
.bone-preview-head strong{font-size:17px}.bone-preview-head span{font-size:10px;color:var(--bone-muted);font-weight:700;text-align:right}
.bone-preview-zone{background:linear-gradient(180deg,#f5f6f8 0%,#e9edf1 100%);padding:18px 12px 20px;display:grid;gap:12px}
.bone-side{text-align:center}.bone-side-label{font-size:10px;letter-spacing:.17em;font-weight:900;color:#3a424b;margin-bottom:3px}

/* V6: real tag photograph + engraving artwork extracted from the real W01–W10 examples. */
.bone-stage{position:relative;width:min(100%,520px);aspect-ratio:600/340;margin:0 auto;isolation:isolate}
.bone-stage-reverse{width:min(100%,475px)}
.bone-real-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1;filter:drop-shadow(0 10px 8px rgba(0,0,0,.17));user-select:none;pointer-events:none}
.bone-pattern-image{position:absolute;left:50%;top:50%;width:100%;height:100%;object-fit:contain;display:block;z-index:2;pointer-events:none;user-select:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.22));transform:translate(-51.5%,-50%) scale(1)}
.bone-pattern-image.pattern-w01{transform:translate(-51.5%,-50%) scale(1)}
.bone-pattern-image.pattern-w02{transform:translate(-51.5%,-50%) scale(1)}
.bone-pattern-image.pattern-w03{transform:translate(-51.5%,-50%) scale(1)}
.bone-pattern-image.pattern-w04{transform:translate(-51.5%,-50%) scale(1)}
.bone-pattern-image.pattern-w05{transform:translate(-51.5%,-50%) scale(1)}
.bone-pattern-image.pattern-w06{transform:translate(-51.5%,-50%) scale(1)}
.bone-pattern-image.pattern-w07{transform:translate(-51.5%,-50%) scale(1)}
.bone-pattern-image.pattern-w08{transform:translate(-51.5%,-50%) scale(1)}
.bone-pattern-image.pattern-w09{transform:translate(-51.5%,-50%) scale(1)}
.bone-pattern-image.pattern-w10{transform:translate(-51.5%,-50%) scale(1)}
.bone-front-safe{position:absolute;left:18%;right:18%;top:36%;height:36%;display:flex;align-items:center;justify-content:center;overflow:visible;pointer-events:none;z-index:3}
.bone-engraved{color:#f7f8fa;text-shadow:0 1px 1px rgba(0,0,0,.62),0 -1px 0 rgba(255,255,255,.28);white-space:nowrap;text-align:center;line-height:.92}
.bone-front-name{width:100%;font-size:66px;font-weight:400;transform:scaleY(1.03);transform-origin:center;-webkit-text-stroke:.45px rgba(0,0,0,.34)}
.bone-front-name.pattern-w02{color:rgba(255,255,255,.06);-webkit-text-stroke:2px rgba(248,248,248,.98);text-shadow:0 1px 0 rgba(0,0,0,.24)}
.bone-front-name.pattern-w06{font-weight:900;letter-spacing:.01em;-webkit-text-stroke:1px rgba(0,0,0,.34);text-shadow:0 2px 1px rgba(0,0,0,.32)}
.bone-front-name.pattern-w08{color:var(--bone-selected-colour,#1d5fb8);-webkit-text-stroke:2px rgba(248,248,248,.98);text-shadow:0 1px 0 rgba(0,0,0,.26)}
.bone-back-safe{position:absolute;left:19%;right:19%;top:36%;height:38%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;overflow:hidden;z-index:2}
.bone-back-text{font-family:Arial,Helvetica,sans-serif;font-weight:800;width:100%;font-size:25px;line-height:1;overflow:hidden;text-overflow:clip}
.bone-note{font-size:10px;color:var(--bone-muted);margin-top:1px;max-width:500px;margin-inline:auto}

.bone-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;background:#fafbfc;border-top:1px solid var(--bone-line)}
.bone-summary-item{border:1px solid var(--bone-line);border-radius:10px;background:#fff;padding:9px 10px;min-width:0}.bone-summary-item span{display:block;color:var(--bone-muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.bone-summary-item b{display:block;margin-top:3px;font-size:12px;overflow-wrap:anywhere}
.bone-controls{display:grid;gap:12px;align-content:start}.bone-panel{padding:15px}.bone-panel h3{margin:0 0 10px;font-size:16px}.bone-label{display:block;font-size:12px;font-weight:800;margin:8px 0 5px}
#boneDesigner input[type="text"]{width:100%;border:1px solid #cbd2db;border-radius:9px;padding:10px 11px;font:inherit;background:#fff;color:#111;outline:none}#boneDesigner input:focus{border-color:#9b7838;box-shadow:0 0 0 3px rgba(181,139,61,.14)}
.bone-help{font-size:11px;color:var(--bone-muted);margin-top:6px}.bone-toggle-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.bone-toggle{border:1px solid #cbd2db;background:#fff;border-radius:9px;padding:10px;font-weight:800;cursor:pointer}.bone-toggle.active{background:#111;color:#fff;border-color:#111}

/* Actual tag photos are also used for the colour selector. */
.bone-colour-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.bone-colour-choice{border:1px solid #d1d6dc;background:#fff;border-radius:10px;padding:6px 4px 7px;cursor:pointer;min-width:0;transition:.15s ease}
.bone-colour-choice:hover{border-color:#9ea6b0;transform:translateY(-1px)}
.bone-colour-choice.active{border:2px solid #111;padding:5px 3px 6px;background:#f7f8f9}
.bone-colour-choice img{display:block;width:100%;height:34px;object-fit:contain;margin:0 auto}
.bone-colour-choice b{display:block;font-size:9px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Pattern selector uses the real W01–W10 artwork thumbnails. */
.bone-pattern-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bone-pattern-choice{display:grid;grid-template-columns:82px 1fr;gap:9px;align-items:center;text-align:left;border:1px solid #d1d6dc;background:#fff;border-radius:10px;padding:7px;cursor:pointer;min-height:62px;transition:.15s ease}
.bone-pattern-choice:hover{border-color:#9ea6b0;transform:translateY(-1px)}
.bone-pattern-choice.active{border:2px solid #111;background:#f7f8f9;padding:6px}
.bone-pattern-choice img{width:82px;height:47px;object-fit:contain;display:block;background:#eef1f4;border-radius:6px}
.bone-pattern-choice span{display:block;min-width:0}.bone-pattern-choice strong{display:block;font-size:10px;color:#8a6a30;line-height:1}.bone-pattern-choice b{display:block;font-size:11px;line-height:1.12;margin-top:3px}

.bone-font-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-height:285px;overflow:auto;padding:2px}.bone-font-choice{border:1px solid #d1d6dc;background:#fff;border-radius:8px;min-height:57px;padding:4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center}.bone-font-choice span{font-family:Arial,sans-serif;font-size:9px;font-weight:900;color:#4e5967}.bone-font-choice b{font-size:22px;font-weight:400;line-height:1.05;margin-top:2px}.bone-font-choice.active{border:2px solid #111;background:#f3f5f7;padding:3px}
.bone-back-option{border:1px solid #e0e4e9;border-radius:10px;padding:9px 10px;margin-top:8px;background:#fafbfc}.bone-back-option.off{opacity:.62}.bone-back-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}.bone-back-head strong{font-size:12px}.bone-check{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#3f4956}.bone-check input{width:auto}.bone-back-option input:disabled{background:#eef1f4;color:#9098a3}.bone-check-panel{background:#fffaf0;border-color:#ead9b8}.bone-confirm{display:flex;gap:10px;align-items:flex-start;cursor:pointer}.bone-confirm input{width:auto!important;margin-top:3px}.bone-confirm span{display:block}.bone-confirm strong,.bone-confirm small{display:block}.bone-confirm strong{font-size:12px}.bone-confirm small{font-size:10px;color:var(--bone-muted);margin-top:2px}.bone-order-preview{padding:10px 11px;background:#fafbfc;border:1px dashed #aeb7c2;border-radius:9px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;white-space:pre-wrap}.bone-error{display:none;margin:0 20px 20px;padding:12px 14px;border-left:5px solid #c72c41;background:#fff0f2;color:#711827;border-radius:7px}.bone-error.show{display:block}
.bone-product-info{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}.bone-reference-card{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}.bone-reference-card img{width:100%;height:auto}.bone-reference-copy{padding:16px}.bone-reference-copy h3{margin:0 0 5px;font-size:17px}.bone-reference-copy p{margin:0;color:var(--muted);font-size:12px}

@media(max-width:960px){.bone-builder-grid{grid-template-columns:1fr}.bone-preview-card{position:static}.bone-summary{grid-template-columns:repeat(2,1fr)}.bone-stage{width:min(100%,540px)}}
@media(max-width:620px){.bone-builder-title{align-items:flex-start;flex-direction:column}.bone-builder-grid{padding:11px}.bone-preview-zone{padding:12px 4px 14px}.bone-colour-grid{grid-template-columns:repeat(2,1fr)}.bone-colour-choice img{height:42px}.bone-pattern-grid{grid-template-columns:1fr}.bone-pattern-choice{grid-template-columns:95px 1fr}.bone-pattern-choice img{width:95px;height:54px}.bone-font-grid{grid-template-columns:repeat(4,1fr);max-height:340px}.bone-front-name{font-size:51px}.bone-back-text{font-size:19px}.bone-product-info{grid-template-columns:1fr}.bone-preview-head{align-items:flex-start;flex-direction:column;gap:3px}.bone-preview-head span{text-align:left}}