:is(#html-entity-reference, #spinners-and-loaders) { color:var(--frame-ink); background:linear-gradient(90deg,rgba(250,252,255,.1),rgba(250,252,255,.5) 24%,rgba(250,252,255,.5) 78%,rgba(250,252,255,.1)) rgba(237,243,250,.32); letter-spacing:0; }
.reference-tool *, .reference-tool *::before, .reference-tool *::after { box-sizing:border-box; }
.reference-tool [hidden] { display:none!important; }
.reference-header { padding:40px 54px 30px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--frame-line); }
:is(#html-entity-reference, #spinners-and-loaders) .reference-header h1 { margin:8px 0 0; font:500 36px/1.2 var(--font-ui); letter-spacing:0; overflow-wrap:anywhere; }
.reference-header .section-index { margin:0; }
.reference-header a { color:inherit; }
.reference-count { font:12px/1.6 var(--font-code); }
.reference-toolbar { display:flex; align-items:flex-end; flex-wrap:wrap; gap:20px; padding:24px 36px; border-bottom:1px solid var(--frame-line); background:rgba(255,255,255,.65); }
.reference-tool label { display:block; color:var(--frame-ink); font:500 12px/1.5 var(--font-ui); }
.reference-search { flex:1 1 280px; }
.reference-toolbar > label:not(.reference-search) { flex:0 1 230px; }
:is(#html-entity-reference, #spinners-and-loaders) :is(input[type="search"],select) { display:block; width:100%; min-width:0; height:44px; margin:8px 0 0; padding:10px 12px; border:0; border-bottom:1px solid #222; border-radius:0; background:rgba(255,255,255,.6); color:#25282a; font:14px/1.5 var(--font-ui); box-shadow:none; }
.reference-segments { display:flex; min-width:0; padding:0; margin:0; border:0; background:none; box-shadow:none; gap:0; }
.reference-segments legend { margin-bottom:8px; font-size:12px; }
.reference-segments label { position:relative; }
.reference-segments input { position:absolute; opacity:0; width:1px; height:1px; }
.reference-segments span { display:grid; place-items:center; min-width:62px; height:44px; border:1px solid #b7bcbf; background:#f5f6f7; }
.reference-segments input:checked + span { background:#fff; border-bottom:3px solid #e34c35; }
.reference-segments input:focus-visible + span { outline:2px solid #e34c35; outline-offset:2px; }
.reference-results { padding:24px 36px 36px; }
.reference-result-heading { display:flex; align-items:center; gap:12px; min-height:36px; margin-bottom:20px; }
.reference-result-heading p { margin:0; font-size:13px; }
:is(#html-entity-reference, #spinners-and-loaders) button { box-shadow:none; filter:none; backdrop-filter:none; transform:none; cursor:pointer; font-family:var(--font-ui); letter-spacing:0; }
:is(#html-entity-reference, #spinners-and-loaders) .reference-icon { width:40px; height:40px; flex:0 0 40px; min-height:40px; display:inline-grid; place-items:center; padding:0; border:1px solid #d6dadd; border-radius:4px; background:#fff; color:#d23d28; font-size:21px; }
:is(#html-entity-reference, #spinners-and-loaders) .reference-command { display:inline-flex; gap:8px; align-items:center; justify-content:center; min-height:42px; padding:10px 16px; border:1px solid #c6412f; border-radius:4px; color:#fff; background:#e34c35; font:600 13px/1.5 var(--font-ui); }
:is(#html-entity-reference, #spinners-and-loaders) .reference-command:hover { background:#c63925; }
.reference-command i { font-size:20px; }
:is(#html-entity-reference, #spinners-and-loaders) button:disabled { opacity:.4; cursor:not-allowed; }
:is(#html-entity-reference, #spinners-and-loaders) :is(button,a,input,select,textarea):focus-visible { outline:2px solid #c83723; outline-offset:3px; }
.entity-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.entity-card { position:relative; min-width:0; border:1px solid #d0d5d9; border-top:2px solid #f5e9ce; border-radius:6px; background:#fff; }
:is(#html-entity-reference, #spinners-and-loaders) .entity-open { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; min-height:196px; padding:20px 14px 16px; background:none; color:#25282a; border:0; text-align:center; }
.entity-glyph { display:grid; place-items:center; width:100%; height:64px; font:42px/1.2 Arial,"Apple Symbols","Segoe UI Symbol",sans-serif; }
.entity-open strong { font-size:12px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; }
.entity-open code { font:11px/1.4 var(--font-code); padding:0; background:none; color:#9d2a19; overflow-wrap:anywhere; }
:is(#html-entity-reference, #spinners-and-loaders) .entity-card .entity-favourite { position:absolute; right:3px; top:3px; width:30px; height:30px; min-height:30px; border:0; background:transparent; font-size:21px; }
.entity-favourite[aria-pressed="true"] { color:#ac301e!important; }
.entity-glyph.is-spacing { font:15px/1.4 var(--font-code); overflow-wrap:anywhere; padding:10px; }
.entity-table-wrap { max-width:100%; overflow:auto; }
.entity-table-wrap table { width:100%; min-width:700px; border-collapse:collapse; background:#fff; font-size:13px; }
.entity-table-wrap :is(td,th) { padding:12px; border-bottom:1px solid #d9dddf; text-align:left; color:#25282a; }
.entity-table-wrap thead th { background:#edf0f2; font:500 12px/1.5 var(--font-code); }
.entity-table-wrap tbody tr:nth-child(even) { background:#f6f7f8; }
.entity-table-wrap td:nth-child(n+3) { font-family:var(--font-code); }
:is(#html-entity-reference, #spinners-and-loaders) .entity-table-open { padding:0; border:0; background:none; color:#25282a; text-align:left; text-decoration:underline; text-underline-offset:3px; font-size:13px; }
.reference-pagination { display:flex; justify-content:center; align-items:center; gap:18px; margin:24px 0; font-size:13px; }
.reference-credit { margin:24px 0 0; color:#4c5155; font-size:12px; line-height:1.7; }
.reference-credit a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
:is(#html-entity-reference, #spinners-and-loaders) .reference-dialog { position:fixed; inset:0; width:min(680px,calc(100% - 32px)); max-height:calc(100dvh - 40px); margin:auto; padding:24px; overflow:auto; border:1px solid #cbd1d7; border-top:3px solid #f3e6c7; border-radius:7px; background:#fff; color:#25282a; box-shadow:0 18px 60px #0004; }
.reference-dialog::backdrop { background:rgba(30,34,38,.6); }
.reference-dialog > header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:20px; }
:is(#html-entity-reference, #spinners-and-loaders) .reference-dialog h2 { margin:0; font:600 22px/1.3 var(--font-ui); letter-spacing:0; overflow-wrap:anywhere; }
.entity-detail-symbol { display:grid; place-items:center; min-height:100px; font:64px/1.3 Arial,"Apple Symbols","Segoe UI Symbol",sans-serif; background:#f1f3f5; border-radius:4px; margin-bottom:20px; }
.entity-detail-symbol.is-spacing { font:22px/1.5 var(--font-code); overflow-wrap:anywhere; }
.entity-code-row { display:grid; grid-template-columns:108px minmax(0,1fr) 40px; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #dde1e4; }
.entity-code-row > span { font-size:12px; }
.entity-code-row code { color:#25282a; padding:0; background:none; font:13px/1.6 var(--font-code); white-space:pre-wrap; overflow-wrap:anywhere; user-select:all; }
.reference-note { font-size:12px; line-height:1.7; overflow-wrap:anywhere; margin-top:16px; }
.reference-copy-status { min-height:22px; margin:16px 0 0; font-size:13px; line-height:1.7; }
.loader-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
:is(#html-entity-reference, #spinners-and-loaders) .loader-card { display:block; padding:0; min-width:0; border:1px solid #ced4d9; border-top:3px solid #f5e9ce; border-radius:6px; background:#fff; color:#25282a; text-align:left; overflow:hidden; }
.loader-card-preview { display:block; height:180px; pointer-events:none; }
.loader-card-label { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; font-size:13px; }
.loader-card-label i { font-size:24px; color:#e34c35; }
:is(#html-entity-reference, #spinners-and-loaders) .loader-dialog { width:min(1080px,calc(100% - 32px)); }
.loader-editor { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:26px; }
.loader-editor > div { min-width:0; }
.loader-selected-preview { height:260px; border:1px solid #d9dfe3; margin-bottom:20px; }
.loader-colours { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:22px; }
.reference-tool .loader-colours label { display:flex; flex-direction:column; justify-content:flex-end; min-width:0; overflow-wrap:anywhere; }
:is(#html-entity-reference, #spinners-and-loaders) .loader-colours input { display:block; width:100%; height:36px; padding:3px; margin:7px 0 0; border:1px solid #aeb6bc; border-radius:4px; background:#fff; cursor:pointer; }
.loader-customise > label { margin-bottom:18px; }
.loader-customise output { float:right; }
:is(#html-entity-reference, #spinners-and-loaders) .loader-customise input[type="range"] { display:block; width:100%; height:22px; margin-top:8px; padding:0; background:none; border:0; box-shadow:none; accent-color:#e34c35; }
.reference-actions { display:flex; align-items:center; gap:12px; }
.reference-tabs { display:flex; border-bottom:1px solid #d0d5da; margin-bottom:14px; }
:is(#html-entity-reference, #spinners-and-loaders) .reference-tabs button { flex:1; min-height:42px; padding:10px; background:#eef1f3; border:0; border-bottom:3px solid transparent; color:#25282a; border-radius:0; }
:is(#html-entity-reference, #spinners-and-loaders) .reference-tabs button[aria-selected="true"] { background:#fff; border-bottom-color:#e34c35; }
:is(#html-entity-reference, #spinners-and-loaders) .loader-code textarea { display:block; width:100%; height:390px; min-height:180px; padding:16px; margin:0 0 14px; resize:vertical; border:1px solid #cdd4da; border-radius:4px; background:#f5f7f8; color:#25282a; box-shadow:none; font:12px/1.7 var(--font-code); white-space:pre; overflow:auto; }
@media(max-width:900px) { .reference-header{flex-wrap:wrap;padding:32px;} .reference-toolbar,.reference-results{padding:24px;} .loader-editor{grid-template-columns:minmax(0,1fr);} .loader-code textarea{height:250px;} }
@media(max-width:600px) { .reference-header{padding:28px 20px;gap:14px;} :is(#html-entity-reference, #spinners-and-loaders) .reference-header h1{font-size:28px;} .reference-toolbar,.reference-results{padding:20px;} .reference-toolbar{gap:16px;} .reference-search{flex-basis:100%;} .reference-toolbar>label:not(.reference-search){flex:1 1 140px;} .reference-segments span{min-width:52px;} .entity-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} :is(#html-entity-reference, #spinners-and-loaders) .entity-open{min-height:205px;padding-inline:10px;} .entity-glyph{font-size:36px;} .entity-glyph.is-spacing{font-size:12px;} :is(#html-entity-reference, #spinners-and-loaders) .reference-dialog{padding:16px;width:calc(100% - 20px);} .entity-code-row{grid-template-columns:82px minmax(0,1fr) 36px;gap:8px;} .entity-code-row code{font-size:12px;} :is(#html-entity-reference, #spinners-and-loaders) .entity-code-row .reference-icon{width:36px;height:36px;min-height:36px;} .loader-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .loader-card-preview{height:150px;} .loader-card-label{padding:10px;font-size:12px;} .loader-selected-preview{height:220px;} .loader-colours{gap:10px;} }
@media(prefers-reduced-transparency:reduce) { :is(#html-entity-reference, #spinners-and-loaders){background:#eef0f2;} }
@media print { .reference-toolbar,.reference-pagination,.reference-dialog,.entity-favourite{display:none!important;} :is(#html-entity-reference, #spinners-and-loaders){background:#fff;} }