:root{color-scheme:dark;--bg:#151815;--panel:#1c201c;--line:#353c33;--muted:#a3ad9c;--ink:#f0f0e5;--accent:#d5ed76}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select,.drop{touch-action:manipulation}button{cursor:pointer;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:10px 14px}button:hover{border-color:var(--accent);color:var(--accent)}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid var(--line)}header>a:last-child{color:var(--muted);font-size:12px}.brand{display:flex;align-items:center;gap:7px;font-size:23px;letter-spacing:-1px}.brand strong{font-weight:500}.mark{display:grid;place-items:center;position:relative;background:var(--accent);color:#202619;font-size:24px;font-weight:700;width:36px;height:36px;margin-right:7px}.mark span{position:absolute;right:0;top:-6px;font-size:19px}.beta{font-size:9px;letter-spacing:1.7px;border:1px solid #52613e;border-radius:4px;color:var(--accent);padding:5px;margin-left:14px}main{max-width:1560px;margin:auto;padding:0 5%}.intro{display:flex;justify-content:space-between;align-items:center;padding:55px 0 44px;gap:35px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent)}h1{font:600 clamp(50px,5.6vw,78px)/.99 'Arial Narrow',sans-serif;letter-spacing:-1px;margin:20px 0}h1 span{color:#aeb8a3}p{color:var(--muted);line-height:1.65}.intro p{font-size:15px;margin-bottom:0}.hero-pattern{width:43%;height:240px;position:relative;background:#3b4632;border:1px solid var(--line);overflow:hidden;background-image:linear-gradient(105deg,transparent,#15181555);background-size:cover;background-position:center}.hero-pattern:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#15181599,transparent);border:14px solid #15181511}.hero-pattern span{position:absolute;bottom:20px;left:22px;font:10px/1.8 monospace;letter-spacing:2px;z-index:1;color:#fff}.workspace{border-top:1px solid var(--line);display:grid;grid-template-columns:265px 1fr;gap:36px;padding:32px 0 50px}aside{border-right:1px solid var(--line);padding-right:28px}h2{font:600 30px/1.1 'Arial Narrow',sans-serif;margin:12px 0}.drop{cursor:pointer;display:flex;align-items:center;text-align:center;flex-direction:column;gap:10px;border:1px dashed #64714c;border-radius:6px;padding:24px 10px;background:#d5ed7605;margin-top:22px}.drop.dragging{background:#d5ed7622;border-color:var(--accent)}.upload-icon{font-size:34px;color:var(--accent);line-height:1}.drop strong{font-size:13px}.drop span:not(.upload-icon){font-size:12px;color:var(--accent)}.drop small{font-size:10px;color:var(--muted)}#upload{position:absolute;width:1px;height:1px;opacity:0}.note{border-top:1px solid var(--line);padding-top:20px;margin-top:27px;font-size:11px}.note strong{color:#bec9b1;font-size:12px}.source-note{font:10px/1.7 monospace;color:#7c8973;margin-top:25px}.catalog-head{display:flex;align-items:center;justify-content:space-between}.count{color:var(--muted);font:11px monospace;border:1px solid var(--line);border-radius:20px;padding:8px 12px}#searchForm{display:flex;align-items:center;background:#22271f;border:1px solid #46513d;border-radius:6px;padding:0 15px;margin:22px 0 14px;gap:12px}#searchForm>span{font-size:26px;color:var(--accent)}input[type=search]{width:100%;border:0;background:transparent;color:var(--ink);height:50px;outline:none}input::placeholder{color:#85917d}kbd{border:1px solid #4c5845;border-radius:3px;color:var(--muted);padding:2px 6px}.filters{display:flex;gap:12px;align-items:end;flex-wrap:wrap}.filters label{color:#99a58f;font-size:10px;letter-spacing:.5px;flex:1}select{display:block;width:100%;background:var(--bg);color:#dde2d4;border:1px solid var(--line);border-radius:4px;padding:9px;margin-top:6px;min-width:115px}.text-button{border:0;color:var(--muted);padding:9px 3px;font-size:11px}.results-bar{display:flex;justify-content:space-between;align-items:center;min-height:52px;color:var(--muted);font-size:11px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.card{padding:0;text-align:left;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:5px;transition:transform .16s,border-color .16s;min-width:0}.card:hover{transform:translateY(-3px);color:var(--ink)}.art{height:150px;position:relative;display:flex;align-items:center;justify-content:center;background:#252b23;background-image:linear-gradient(45deg,#ffffff03 25%,transparent 25%,transparent 75%,#ffffff03 75%),linear-gradient(45deg,#ffffff03 25%,transparent 25%,transparent 75%,#ffffff03 75%);background-size:20px 20px;background-position:0 0,10px 10px}.art img{max-width:100%;max-height:100%;object-fit:contain}.card.camo .art img{width:100%;height:100%;object-fit:cover}.art .no-preview{font:12px monospace;color:#87937b}.badge{position:absolute;top:9px;left:9px;background:#151815d9;color:#d2dcbf;font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:5px 7px;border-radius:3px}.card-info{padding:13px}.card h3{font-size:13px;font-weight:500;margin:0 0 10px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-meta{display:flex;justify-content:space-between;font:10px monospace;color:#99a58f}.similarity{display:block;color:var(--accent);font:10px monospace;margin-top:10px}.pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:25px}.pagination span{font:11px monospace;color:var(--muted)}footer{max-width:1560px;margin:auto;border-top:1px solid var(--line);padding:24px 5%;display:flex;justify-content:space-between;gap:20px;color:#89947e;font-size:10px}footer b{color:var(--accent);padding:0 8px}canvas#crop{display:block;width:100%;margin-top:16px;cursor:crosshair;touch-action:none;border:1px solid var(--line)}.hint{font-size:10px}.two{display:flex;gap:8px}.two button{font-size:11px}.primary{background:var(--accent);color:#1c2512;border-color:var(--accent);font-weight:700}.primary:hover{color:#1c2512;background:#e0f59b}#matchStatus{font-size:11px;color:var(--accent)}#error{padding:20px;border:1px solid #bf7963;color:#e5a38e;border-radius:5px;margin-bottom:20px}dialog{max-width:800px;width:calc(100% - 32px);max-height:90vh;background:var(--panel);color:var(--ink);border:1px solid #63724e;border-radius:9px;padding:25px}dialog::backdrop{background:#050905cc;backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:center}.dialog-header button{font-size:24px;line-height:1;padding:3px 10px}.detail-art{display:flex;justify-content:center;height:240px;background:#282e25;margin:20px 0;border:1px solid var(--line)}.detail-art img{max-height:100%;max-width:100%;object-fit:contain}dialog h2{font-size:38px}dialog p{font-size:13px}dl{display:grid;grid-template-columns:135px 1fr;font-size:12px;line-height:1.6;margin-top:24px}dt,dd{padding:10px 0;border-top:1px solid var(--line);margin:0}dt{color:var(--muted)}dd{overflow-wrap:anywhere}dd code{font-size:11px}.palette-buttons{display:flex;gap:7px;flex-wrap:wrap}.palette-buttons button{padding:5px 9px;font-size:11px}.empty{grid-column:1/-1;text-align:center;padding:70px 15px;color:var(--muted)}@media(min-width:1400px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1000px){.workspace{grid-template-columns:220px 1fr;gap:22px}aside{padding-right:20px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){header{height:70px}.brand{font-size:20px}.beta{display:none}.intro{padding:35px 0}.hero-pattern{width:35%;height:210px}.intro p br{display:none}.workspace{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--line);padding:0 0 22px}.drop{padding:16px}.note,.source-note{display:none}.grid{gap:10px}.art{height:130px}footer{flex-direction:column}.filters{gap:8px}.filters label{min-width:100px}dl{grid-template-columns:100px 1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Compact WoT-inspired catalog: dark steel, muted gold, orange actions. */
:root{--bg:#171719;--panel:#202023;--line:#3b3b3e;--muted:#a3a3a5;--ink:#eeeeef;--accent:#d6bd87;color-scheme:dark}
body{background:#171719;font-family:Arial,Helvetica,sans-serif;font-size:13px}header{height:62px;background:#111113;padding:0 28px;border-bottom:2px solid #40372b}.brand{font-family:'Arial Narrow',Arial,sans-serif;font-size:25px;letter-spacing:.5px}.brand strong{font-weight:700}.mark{background:linear-gradient(#b5b4b0,#6c6a65);color:#181818;width:31px;height:34px;font-size:22px;clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%)}.mark span{display:none}.beta{color:#b0a796;border-color:#4f4637;font-family:Arial,sans-serif;font-size:9px}header>a:last-child{font-size:10px;letter-spacing:1px}main{max-width:1920px;padding:0 28px}.page-title{display:flex;align-items:baseline;gap:18px;padding:25px 0 18px}.page-title h1{font:700 35px/1 'Arial Narrow',Arial,sans-serif;letter-spacing:1px;margin:0}.page-title span{font-size:10px;color:#8f8d89;letter-spacing:1.5px}.workspace{grid-template-columns:210px 1fr;gap:24px;padding:21px 0 35px}.catalog-head h2{font:600 22px 'Arial Narrow',Arial,sans-serif;margin:0;text-transform:uppercase;letter-spacing:.6px}.count{font-size:10px;border:0;padding:0;color:#8e8e91}.eyebrow{font-size:9px;letter-spacing:1.3px;color:#b49c71}aside h2{font:600 21px 'Arial Narrow',Arial,sans-serif;margin:8px 0}.drop{border:1px dashed #57524a;background:#222222;border-radius:0;padding:16px 7px;margin-top:14px;gap:9px}.drop strong{font-size:11px;font-weight:400;color:#ddd5c7}.drop small{font-size:9px;color:#888}.upload-icon{font-size:28px;color:#ba9d69}.note{display:none}.source-note{font:9px/1.7 Arial,sans-serif;white-space:pre-line;color:#777}.hint{font-size:10px;color:#888}.category-tabs{display:flex;gap:0;border-bottom:1px solid #4b443a;margin-top:14px;overflow-x:auto;scrollbar-width:thin}.category-tabs button{white-space:nowrap;border:0;border-radius:0;border-bottom:3px solid transparent;padding:11px 13px;font-size:11px;color:#aaa}.category-tabs button:hover{color:#ddd;background:#ffffff05}.category-tabs button.active{color:#e3c28c;border-bottom-color:#e49a42;background:linear-gradient(transparent,#d19e4820)}#searchForm{margin:15px 0 12px;border-radius:0;background:#101012;border-color:#4b4841;padding:0 12px}#searchForm>span{color:#ac9163;font-size:25px}input[type=search]{height:42px;font-size:13px}input::placeholder{color:#77777c}kbd{font-size:10px;border-color:#444;color:#999}.filters{gap:12px}.filters label{flex:0 1 180px;color:#929295;font-size:9px;text-transform:uppercase;letter-spacing:.8px}select{border-radius:0;background:#202023;border-color:#3d3d40;margin-top:4px;padding:7px 9px;font-size:11px;min-width:135px;color:#c8c8cb}.results-bar{min-height:38px;font-size:10px;color:#89898e}.grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.card{border-radius:0;border-color:#353539;background:#202023}.card:hover{transform:none;border-color:#b18b50;background:#29282a;box-shadow:0 0 0 1px #b18b5020}.art{height:120px;background-color:#262628;background-image:none}.card.camo .art img{object-fit:cover}.badge{top:6px;left:6px;font-size:8px;letter-spacing:.4px;border-radius:0;background:#111113db;color:#b6b2a9;padding:4px 5px}.card-info{padding:10px}.card h3{font:12px/1.4 Arial,sans-serif;margin:0 0 8px;color:#e4e1da}.card-meta{font:9px Arial,sans-serif;color:#8c8b8c}.similarity{font-size:9px;color:#c6a66c}button{border-radius:0}.primary{background:linear-gradient(#d78228,#ae5416);border-color:#db8b38;color:#fff;text-transform:uppercase;font-size:10px}.primary:hover{background:linear-gradient(#e49a41,#c46b21);color:#fff;border-color:#eda14f}.text-button{font-size:10px;color:#a69c8b}.pagination{margin-top:18px}.pagination button{font-size:11px;padding:8px 12px}.pagination span{font-size:10px}footer{max-width:1920px;padding:18px 28px;font-size:9px;color:#6e6e73}dialog{background:#202023;border-color:#63533b;border-radius:0}dialog h2{font-family:'Arial Narrow',Arial,sans-serif}.detail-art{background:#28282b}.palette-buttons button{border-radius:0}#matchStatus{font-size:10px;color:#c3a87b}.drop.dragging{border-color:#d9ad6b;background:#c3892122}#error{border-radius:0}@media(min-width:1600px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}.art{height:140px}}@media(max-width:1200px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.workspace{grid-template-columns:180px 1fr;gap:18px}aside{padding-right:16px}}@media(max-width:700px){header{padding:0 16px;height:55px}main{padding:0 14px}.page-title{padding:20px 0 14px}.page-title span{font-size:8px}.workspace{display:flex;flex-direction:column;gap:16px;padding-top:15px}aside{padding:0 0 15px;border-bottom:1px solid var(--line)}aside h2{font-size:19px}.drop{margin-top:8px;display:flex;flex-direction:row;justify-content:center;padding:9px;gap:10px}.upload-icon{font-size:22px}.drop small{font-size:8px}.source-note{display:none}.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.art{height:95px}.card-info{padding:8px}.card h3{font-size:11px}.card-meta{font-size:8px}.badge{font-size:7px;padding:3px}.filters label{flex:1 1 100px}.filters{gap:7px}select{min-width:85px}.category-tabs button{padding:10px;font-size:10px}.count{font-size:9px}#searchForm{margin-top:12px}input[type=search]{font-size:11px}footer{padding:16px 14px}}@media(max-width:420px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-title{gap:10px}.page-title span{letter-spacing:.5px}.brand{font-size:21px}}/* Additional catalog controls retain the compact live-site layout. */
[hidden] { display: none !important; }
#searchForm > span { display: flex; align-items: center; }
#searchForm svg { width: 18px; height: 18px; }
.view-options { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.results-bar { flex-wrap: wrap; gap: 6px; padding: 7px 0; }
.view-options label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; }
.view-options select { width: auto; min-width: 90px; margin: 0; padding: 4px 6px; font-size: 10px; }
.density-button { display: flex; align-items: center; gap: 6px; padding: 5px 7px; background: transparent; color: #b6b5b1; font-size: 10px; }
.density-button svg { width: 11px; height: 11px; }
.density-button[aria-pressed=true] { color: #d9ad6b; border-color: #8e734a; background: #c3892111; }
.grid.compact { grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; }
.grid.compact .art { height: 90px; }
.grid.compact .card-info { padding: 8px; }
.grid.compact h3 { font-size: 11px; }
.card.camo .art, .detail-art.checkerboard { background-color: #343437; background-image: conic-gradient(#555559 25%,#343437 0 50%,#555559 0 75%,#343437 0); background-size: 18px 18px; }
.transparency-badge { position: absolute; bottom: 5px; right: 5px; z-index: 1; padding: 3px 5px; color: #e6d5b3; background: #161616e6; border: 1px solid #88734f; font-size: 8px; text-transform: uppercase; }
.grid.compact .transparency-badge { font-size: 7px; padding: 2px 3px; }
@media(min-width:1600px) { .grid.compact { grid-template-columns:repeat(8,minmax(0,1fr)); } }
@media(max-width:1200px) { .grid.compact { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media(max-width:1000px) { .grid.compact { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:700px) { .grid.compact { grid-template-columns:repeat(4,minmax(0,1fr)); } .grid.compact .art { height:80px; } .grid.compact .card-meta { font-size:8px; } .view-options { gap:7px; } }
@media(max-width:430px) { .grid.compact { grid-template-columns:repeat(3,minmax(0,1fr)); } .grid.compact .art { height:80px; } .grid.compact .card-info { padding:6px; } }
/* Image-search controls must wrap inside the compact catalog at narrow widths. */
.catalog { min-width: 0; }
.category-tabs { max-width: 100%; }
.view-options { max-width: 100%; flex-wrap: wrap; justify-content: flex-end; }

.dialog-header .copy-link { margin-left: auto; margin-right: 12px; padding: 7px 11px; font-size: 11px; line-height: 1.2; }