:root{--ink:#1f302c;--text:#2c433a;--secondary:#5d7468;--accent:#2c6f59;--accent-deep:#1d5544;--gold:#b37e53;--bg:#f5f6f1;--paper:#ffffff;--line:#dbe4db;--sage:#eaf1ea;--cream:#fbf3e9;--dark:#16342e;--shadow:0 8px 32px rgba(21,51,38,.08)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:system-ui,-apple-system,'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;background:var(--bg);color:var(--ink);margin:0;font-size:15px;line-height:1.6}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}a{color:#226e58;text-underline-offset:3px}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #d49c64;outline-offset:2px}button,.btn{transition:background .15s,box-shadow .15s,transform .1s}button:active{transform:translateY(1px)}[hidden]{display:none!important}.skip{position:absolute;left:12px;top:-60px;background:white;padding:10px;z-index:100}.skip:focus{top:12px}.wrap{width:min(1190px,calc(100% - 36px));margin:auto}.header{background:linear-gradient(117deg,#102b27,#1d483d 66%,#356452);color:white}.topnav{display:flex;align-items:center;gap:18px;border-bottom:1px solid #ffffff26;padding:18px 0}.mark{background:#ffffff1a;border:1px solid #ffffff4f;border-radius:11px;width:40px;height:40px;display:grid;place-items:center;font-family:Georgia,serif;font-weight:700;letter-spacing:.05em}.wordmark{font-weight:800;font-size:13px;letter-spacing:.14em}.navlinks{margin-left:auto;display:flex;align-items:center;gap:22px}.navlinks a{text-decoration:none;color:#d8e9df;font-size:12.5px}.outline-light{background:#ffffff13;color:#fff;border:1px solid #afcfc0;border-radius:8px;padding:7px 12px;font-size:12px}.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.66fr);gap:50px;align-items:center;padding:55px 0 72px}.caps{font-size:11px;letter-spacing:.2em;font-weight:800;color:#96cabc}.hero h1{line-height:1.22;font-size:clamp(32px,4.4vw,55px);letter-spacing:-.045em;max-width:760px;margin:15px 0}.hero p{font-size:14px;line-height:1.85;color:#c5ded2;max-width:635px}.hero-flow{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px;align-items:center}.hero-flow span{border:1px solid #719d8b;color:#d7eee1;background:#ffffff0b;font-size:12px;padding:7px 10px;border-radius:50px}.hero-flow b{color:#bed7c9;font-size:16px}.hero-aside{background:#ffffff0d;border:1px solid #ffffff26;border-radius:15px;padding:24px 22px}.hero-aside strong{font-size:15px;display:block;margin-bottom:13px}.hero-aside p{font-size:13px;color:#cfe2d7;margin:0;line-height:1.9}.hero-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 0;padding-top:15px;border-top:1px solid #ffffff30}.hero-numbers span{display:block;font-size:10px;color:#bed4c8}.hero-numbers b{font-size:23px;color:#fff}.main{padding-bottom:70px}.section{scroll-margin-top:22px;padding:44px 0 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.section-head h2{font-size:clamp(24px,3vw,34px);margin:7px 0 7px;letter-spacing:-.04em;line-height:1.26}.section-head p{font-size:13.5px;color:var(--secondary);max-width:775px;margin:0}.section-step{color:#377964;font-size:11px;font-weight:850;letter-spacing:.17em}.helper{color:#658276;font-size:12px}.starter{position:relative;z-index:1;background:#fff;border-radius:18px;box-shadow:var(--shadow);border:1px solid var(--line);padding:23px 24px;margin-top:-30px}.starter h2{font-size:21px;letter-spacing:-.035em;margin:0 0 7px}.starter p{font-size:13px;color:var(--secondary);margin:0 0 19px}.goal-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.goal{border:1px solid #d9e4d9;background:#fbfdfb;border-radius:12px;padding:15px 13px;text-align:left;min-height:125px}.goal .goal-emoji{display:block;font-size:23px;margin-bottom:8px;line-height:1}.goal strong{display:block;font-size:14px;margin-bottom:4px}.goal small{font-size:11px;color:#697e72;line-height:1.55;display:block}.goal.is-active{background:#e6f2e9;border:2px solid #31715a;padding:14px 12px;box-shadow:0 5px 16px #24644915}.starter-note{margin:15px 0 0!important;background:#f3f8f3;border-left:3px solid #98bda6;border-radius:6px;padding:10px 12px;line-height:1.65}.workhead{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px}.toolbar{border:1px solid var(--line);background:#fff;border-radius:13px;padding:14px;display:grid;grid-template-columns:minmax(140px,1.1fr) minmax(160px,1fr) minmax(165px,1fr);gap:10px;align-items:end;margin:17px 0 13px}.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field label{font-size:12px;color:#526d60;font-weight:750}.field input,.field select,.input{width:100%;min-width:0;border:1px solid #d4e1d7;background:#fff;border-radius:8px;padding:10px 11px;font-size:13px;color:#28473b}.focusbar{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0 14px}.pill{border:1px solid #d7e4db;background:#fff;color:#48695a;border-radius:50px;font-size:12px;padding:7px 12px;white-space:nowrap}.pill.active{background:var(--accent-deep);color:white;border-color:var(--accent-deep)}.gallery-caption{font-size:12px;color:#6e8275;margin:0 0 14px}.clothes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.clothing-card{overflow:hidden;border:1px solid var(--line);background:var(--paper);border-radius:14px;display:flex;flex-direction:column;min-width:0;box-shadow:0 2px 8px #203b2a08}.clothing-card:hover{border-color:#a6c6b4}.clothing-card.selected{border:2px solid #40846c;box-shadow:0 5px 18px #205f4521}.card-top{display:flex;gap:11px;padding:15px 15px 10px;align-items:center}.card-visual{position:relative;background:linear-gradient(138deg,#edf2eb,#dce8dc);width:113px;height:143px;border-radius:9px;overflow:hidden;flex:none}.card-visual svg{display:block;width:100%;height:100%}.card-visual .type-stamp{position:absolute;bottom:5px;right:5px;background:#ffffffdc;border-radius:4px;padding:1px 5px;font-size:9px;color:#5c7d6e}.card-meta{min-width:0;flex:1}.card-code{font-size:10px;color:#42806a;font-weight:800;letter-spacing:.06em}.card-meta h3{font-size:17px;line-height:1.37;margin:5px 0 4px;letter-spacing:-.02em}.card-meta .english{font-size:11px;color:#7c9285;margin:0}.card-meta .one-liner{font-size:12px;color:#566e62;margin:7px 0 0;line-height:1.65}.card-story{font-size:12px;line-height:1.65;color:#486757;padding:0 16px 11px;margin:0}.card-story b{color:#335d4e}.character-peek{border-top:1px solid #eef1e9;padding:11px 16px;margin-top:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:11px;color:#688174}.person-pill{background:#f0f5ee;color:#396c56;border-radius:15px;padding:3px 8px}.card-actions{display:flex;gap:7px;padding:0 15px 15px}.primary{background:#226a55;color:white;border:1px solid #226a55;border-radius:9px;padding:10px 13px;font-size:12px;font-weight:800}.primary:hover{background:#185543}.secondary{background:#fff;color:#27644f;border:1px solid #c2d8ca;border-radius:9px;padding:10px 13px;font-weight:750;font-size:12px}.secondary:hover{background:#f0f7f1}.card-actions .primary{flex:1}.card-actions .secondary{flex:none}.more-wrap{text-align:center;margin:23px 0}.more-wrap p{margin:7px;color:#6b8273;font-size:12px}.empty{background:#fff;border:1px dashed #cbdad0;border-radius:12px;padding:28px;text-align:center;color:#61806c}.design-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.design-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;min-width:0}.detail-row{display:grid;grid-template-columns:42% 1fr;gap:17px;padding:19px}.detail-visual{min-width:0;min-height:265px;border-radius:11px;background:linear-gradient(140deg,#ecf1e9,#dce8dd);position:relative;overflow:hidden;display:grid;place-items:center}.detail-visual svg{width:100%;height:100%;min-height:265px}.detail-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#eff3ee;opacity:0;transition:opacity .2s}.detail-visual img.loaded{opacity:1}.illus-label{position:absolute;bottom:9px;left:9px;background:#fffdf6e9;color:#617966;border-radius:4px;font-size:10px;padding:2px 6px;z-index:1}.detail-info{min-width:0}.detail-info h3{font-size:23px;letter-spacing:-.035em;line-height:1.25;margin:4px 0 5px}.detail-info .en{font-size:12px;color:#789083}.detail-summary{color:#4d6a58;font-size:13px;line-height:1.75;margin:12px 0}.kv-title{font-size:11px;color:#6b8978;font-weight:800;margin:15px 0 7px;letter-spacing:.06em}.tagrow{display:flex;gap:5px;flex-wrap:wrap}.tag{font-size:11px;line-height:1.45;background:#edf3ed;color:#406754;border-radius:5px;padding:4px 7px}.tag.gold{background:#f8f1e8;color:#95683d}.detail-small{font-size:11.5px;color:#748579;margin:7px 0}.detail-buttons{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.mini-note{border-top:1px solid var(--line);background:#fafbf8;padding:14px 18px}.mini-note h4{font-size:13px;margin:0 0 8px}.mini-note p{font-size:12px;color:#577267;line-height:1.7;margin:6px 0}.compare-card{padding:18px}.compare-top{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:12px}.compare-top h3{font-size:18px;margin:0 0 5px;line-height:1.32}.compare-top p{margin:0;font-size:12px;color:#6c8176;line-height:1.6}.select-game{border:1px solid #d5e1d8;border-radius:7px;background:#fff;padding:8px 10px;color:#315f4c;font-size:11px;max-width:150px}.character-list{display:flex;flex-direction:column;gap:10px;min-height:250px}.match{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:stretch;border:1px solid #e4ebe3;border-radius:10px;padding:8px;background:#fcfdfb}.match-img{width:92px;height:121px;background:linear-gradient(140deg,#ebf0ea,#d9e6db);border-radius:7px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;color:#657c6f;font-size:12px}.match-img img{width:100%;height:100%;object-fit:contain}.match-note{min-width:0}.match-note .identity{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.match-note h4{font-size:14px;margin:0}.quality-type{background:#e8f3eb;color:#2f775a;padding:2px 6px;font-size:10px;border-radius:5px}.quality-type.weak{background:#f8f0e6;color:#a1754c}.match-note .game{font-size:10.5px;color:#829386;margin:4px 0}.match-note p{font-size:11.5px;color:#526a5b;line-height:1.6;margin:7px 0}.match-note button{padding:0;border:0;color:#266b54;background:transparent;text-decoration:underline;font-size:11.5px}.method{margin-top:16px;border-radius:12px;border:1px solid #d5e6d8;background:#f1f7f1;padding:16px 19px}.method h3{font-size:15px;margin:0 0 10px}.method-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.method-grid b{display:block;font-size:13px;color:#275e47}.method-grid p{font-size:12px;line-height:1.7;color:#4a6958;margin:4px 0}.method-grid small{color:#809387;font-size:11px}.warn{color:#8b6b43;font-size:11px;line-height:1.7;background:#fbf6ed;padding:8px 10px;border-radius:6px;margin-top:11px}.board{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 21px}.board-header{display:flex;justify-content:space-between;align-items:center;gap:10px}.board-header h3{margin:0 0 6px;font-size:19px}.board-header p{margin:0;font-size:12px;color:#697f71}.board-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:18px 0}.slot{border-radius:9px;padding:12px 12px;background:#f5f8f3;min-height:92px;border:1px dashed #bfd0c1}.slot.has{border-style:solid;border-color:#aacbb4;background:#eff6ef}.slot small{font-size:11px;color:#698476;display:block}.slot strong{font-size:14px;display:block;margin:7px 0 0;line-height:1.4}.slot button{float:right;border:0;background:transparent;color:#98755c;font-size:12px;padding:0}.board-controls{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:end}.board-controls label{display:block;font-size:12px;color:#516e5c;font-weight:700;margin-bottom:7px}.board-controls textarea{border-radius:8px;min-height:66px;border:1px solid #d9e4da;padding:10px 12px;width:100%;resize:vertical;font-size:12px}.board-controls .buttons{display:flex;gap:8px;flex-wrap:wrap}.board-output{font-size:12px;line-height:1.9;padding:14px;background:#f7f9f5;margin-top:14px;border-radius:8px;color:#526a5b;white-space:pre-line}.library-panel{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px 19px}.library-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:transparent;border:0;text-align:left;color:inherit;padding:0}.library-toggle strong{font-size:18px}.library-toggle small{display:block;font-size:12px;color:#708479;margin-top:4px;font-weight:400}.library-toggle .chevron{font-size:19px;color:#2b7155}.library-tools{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:10px;margin:20px 0 15px}.library-tools label{font-size:11.5px;color:#58705e;font-weight:700}.library-tools input,.library-tools select{margin-top:5px;width:100%;padding:10px;border:1px solid #d5dfd5;border-radius:8px;font-size:12px;color:#315443}.roster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.roster-card{border:1px solid #e2e9de;border-radius:10px;background:#fbfdfa;min-width:0;overflow:hidden}.roster-card .thumb{height:auto;aspect-ratio:3/4;background:linear-gradient(135deg,#e8eee7,#d8e4db);display:flex;align-items:center;justify-content:center;overflow:hidden;color:#6d887b;text-align:center;padding:8px}.roster-card img{width:100%;height:100%;object-fit:contain}.roster-content{padding:11px}.roster-content h4{font-size:14px;margin:0}.roster-content p{font-size:10.5px;color:#71887a;margin:2px 0 8px}.roster-content .tagrow{margin-bottom:11px;min-height:30px}.roster-content button{width:100%;padding:8px}.library-status{margin:12px 0 0;color:#698373;font-size:12px}.faq{background:#eaf0e9;border-radius:14px;padding:22px;margin-top:24px}.faq h3{margin:0 0 15px;font-size:18px}.faq details{border-top:1px solid #d5e0d5;padding:12px 0}.faq summary{cursor:pointer;color:#2a624c;font-weight:750;font-size:13px}.faq p{font-size:12px;color:#506d5d;line-height:1.8}.footer{font-size:11px;color:#7b9183;text-align:center;padding:35px 0}.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);color:#fff;background:#204c3c;padding:10px 15px;border-radius:9px;font-size:12px;box-shadow:0 5px 20px #0002;opacity:0;pointer-events:none;z-index:70;max-width:92%;text-align:center}.toast.show{opacity:1}.dialog{width:min(720px,calc(100% - 24px));max-height:min(90vh,850px);padding:0;border:1px solid #c5d9cb;border-radius:16px;box-shadow:0 26px 100px #10271c88;color:var(--ink)}.dialog::backdrop{background:#112b24c2;backdrop-filter:blur(2px)}.dialog-head{background:#f0f5ee;padding:17px 20px;display:flex;justify-content:space-between;align-items:start;gap:12px;position:sticky;top:0;z-index:2}.dialog-head h3{margin:0;font-size:20px}.dialog-head p{margin:3px 0 0;color:#697e70;font-size:11px}.close{border:1px solid #bdd2c1;border-radius:7px;background:#fff;padding:6px 11px;font-size:13px}.dialog-body{display:grid;grid-template-columns:37% 1fr;gap:17px;padding:18px}.dialog-cover{background:#e6efe5;border-radius:10px;min-height:280px;max-height:480px;display:grid;place-items:center;overflow:hidden;color:#658172;font-size:12px;text-align:center;padding:10px}.dialog-cover img{height:100%;width:100%;max-height:470px;object-fit:contain}.dialog-text h4{font-size:13px;margin:7px 0 6px}.dialog-text p{font-size:12px;color:#526e5d;line-height:1.7;margin:6px 0}.dialog-text .ref-actions{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.dialog-text .ref-actions a{display:inline-flex;align-items:center;text-decoration:none}.glossary{border-top:1px solid #d4e1d5;padding:15px;margin-top:20px}.glossary-term{padding:10px 0;border-bottom:1px solid #e6ece4}.glossary-term b{font-size:12px}.glossary-term p{font-size:11.5px;color:#627d69;margin:4px 0}.dock{position:fixed;right:16px;bottom:15px;border-radius:22px;background:#1d5e49;color:white;border:1px solid #15412e;box-shadow:0 5px 25px #0d2a1c33;font-size:12px;font-weight:750;padding:12px 16px;z-index:30;display:none}.dock:focus-visible{outline-color:#f2b88d}
@media(max-width:1000px){.goal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.clothes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.roster{grid-template-columns:repeat(3,minmax(0,1fr))}.design-grid{grid-template-columns:1fr}.detail-row{grid-template-columns:35% 1fr}.method-grid{gap:8px}}
@media(max-width:720px){.wrap{width:calc(100% - 26px)}.header .topnav{padding:12px 0}.mark{width:34px;height:34px;font-size:12px}.wordmark{font-size:11px}.navlinks{gap:8px}.navlinks a{display:none}.hero{grid-template-columns:1fr;padding:27px 0 41px;gap:11px}.hero h1{font-size:35px;margin:12px 0}.hero p{font-size:12.5px;margin:12px 0}.hero-aside{display:none}.hero-aside p{font-size:12px}.hero-aside strong{font-size:12.5px;margin-bottom:7px}.hero-numbers{margin:8px 0 0;padding-top:7px}.hero-numbers b{font-size:18px}.hero-flow span{font-size:10px;padding:5px 9px}.hero-flow{gap:5px;margin-top:15px}.starter{padding:16px 13px;margin-top:-18px}.starter h2{font-size:18px}.goal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.goal{padding:12px;min-height:109px}.goal.is-active{padding:11px}.goal strong{font-size:13px}.goal small{font-size:10px}.goal .goal-emoji{font-size:19px;margin-bottom:5px}.section{padding-top:37px}.section-head h2{font-size:25px}.section-head p{font-size:12px}.section-head{align-items:start}.toolbar{grid-template-columns:1fr 1fr;padding:11px;gap:8px}.toolbar .field:first-child{grid-column:1/-1}.clothes-grid{grid-template-columns:1fr;gap:10px}.card-visual{width:107px;height:132px}.card-top{padding:12px}.card-meta h3{font-size:16px}.card-story{padding:0 12px 8px}.character-peek{padding:10px 12px}.card-actions{padding:0 12px 12px}.detail-row{grid-template-columns:1fr;gap:12px;padding:12px}.detail-visual{min-height:230px;max-height:285px}.detail-visual svg{min-height:220px}.detail-info h3{font-size:20px}.detail-info{padding:0 4px}.compare-card{padding:13px}.match{grid-template-columns:80px 1fr;gap:9px}.match-img{height:111px;width:80px}.match-note p{font-size:11px}.method{padding:14px}.method-grid{grid-template-columns:1fr;gap:9px}.method-grid>div{padding-bottom:8px;border-bottom:1px solid #dbe8dd}.board{padding:14px}.board-slots{grid-template-columns:repeat(2,minmax(0,1fr))}.board-controls{grid-template-columns:1fr}.library-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.library-tools label:first-child{grid-column:1/-1}.roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.roster-content{padding:8px}.roster-content h4{font-size:12px}.roster-content p{font-size:10px}.dialog{width:calc(100% - 14px)}.dialog-head{padding:12px}.dialog-body{grid-template-columns:1fr;padding:11px}.dialog-cover{min-height:190px;max-height:300px}.dialog-cover img{max-height:280px}.dock{display:block;bottom:10px;right:10px;padding:10px 12px}.footer{padding-bottom:85px}}
@media(max-width:350px){.roster{grid-template-columns:1fr 1fr}.goal{min-height:122px}.match{grid-template-columns:70px 1fr}.match-img{width:70px;height:108px}.card-meta h3{font-size:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button,.btn{transition:none}}

/* v14 usability: show real garments before diagrams, touch carousel, directly connected reference results. */
:root{--greenstrong:#23664d}
.clothes-grid{align-items:stretch}
.clothing-card{min-width:0}
.card-top{display:block;padding:0}
.card-visual{width:100%;height:226px;border-radius:0;position:relative;flex:none;background:#f4f5f0}
.card-meta{padding:14px 15px 8px}
.card-meta h3{font-size:18px}
.card-meta .one-liner{line-height:1.55}
.card-story{padding:5px 15px 12px}
.character-peek{margin-top:auto}
.card-actions{padding:12px 14px 6px;gap:8px;align-items:stretch}
.card-actions button{min-height:39px}
.card-actions .secondary.chosen{border-color:#2e866a;color:#17674a;background:#edf7ef}
.photo-credit{padding:0 14px 13px;font-size:10.5px;line-height:1.5;color:#637a70}
.photo-credit a{color:#526d61;text-decoration:none}
.photo-credit a:hover{text-decoration:underline}
.real-image-holder{width:100%;height:100%;position:relative;display:grid;place-items:center;overflow:hidden}
.real-image-holder .real-img{display:block;position:absolute;inset:0;height:100%;width:100%;object-fit:contain;background:#fbfcfa;z-index:1}
.real-img.failed{display:none!important}
.image-underlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#698375;font-size:11px;text-align:center}
.image-underlay svg{width:135px;max-width:75%;max-height:85%;opacity:.75}
.real-image-holder.has-image .image-underlay{display:none}
.real-image-holder.image-failed .image-underlay>span{display:none}
.real-stamp{position:absolute;bottom:8px;left:8px;z-index:2;background:#164a39e8;color:#fff;font-size:10px;border-radius:6px;padding:4px 8px;letter-spacing:.02em}
.image-failed .real-stamp{display:none}
.photo-error{position:absolute;bottom:8px;right:8px;z-index:3;max-width:70%;background:#ffffffed;border:1px solid #cedccf;border-radius:7px;padding:7px 9px;font-size:10.5px;display:flex;flex-direction:column;gap:3px;text-align:right}
.photo-error[hidden],.img-fallback[hidden]{display:none!important}
.photo-error a{color:#256b4c;text-decoration:underline}
.detail-visual .real-img{object-fit:contain;z-index:2;background:#f9fbf7;opacity:1}
.detail-visual .real-img:not(.loaded){opacity:0}
.detail-visual .real-img.loaded{opacity:1}
.detail-visual .illus-label{z-index:3}
.detail-visual #detailSvg{width:100%;height:100%;display:grid;place-items:center}
.detail-visual #detailSvg svg{height:100%;width:100%}
.compare-card{min-width:0;overflow:hidden}
.carousel-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 10px}
.carousel-controls span{font-size:11px;color:#678173}
.carousel-buttons{display:flex;gap:6px;flex:none}
.carousel-buttons button{width:39px;height:37px;border-radius:9px;border:1px solid #b9d0bf;background:#fff;font-size:18px;color:#2d6c52;touch-action:manipulation}
.carousel-buttons button:disabled{opacity:.38}
.reference-scroller{display:flex;flex-direction:row;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 3px 13px;scroll-behavior:smooth;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#a2bdab transparent;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;min-height:320px;max-width:100%;align-items:stretch}
.reference-scroller:focus-visible{outline:2px solid #43775c;outline-offset:2px}
.reference-scroller .match{min-width:228px;width:228px;max-width:228px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:stretch;padding:9px;gap:7px;min-height:320px}
.reference-scroller .match-img{width:100%;height:210px;min-height:210px;max-height:210px;border-radius:8px;background:#e9efe9}
.reference-scroller .match-img img{object-fit:contain;width:100%;height:100%}
.reference-scroller .match-note{min-width:0;display:flex;flex-direction:column;flex:1}
.reference-scroller .match-note .identity{display:flex;align-items:start;gap:6px;flex-wrap:wrap}
.reference-scroller .match-note h4{font-size:13.5px}
.reference-scroller .match-note .reference-desc{line-height:1.55;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;font-size:11px}
.reference-scroller .match-note button{margin-top:auto;text-align:left;min-height:28px;font-weight:700}
.reference-scroller .empty{min-width:100%;display:grid;align-items:center}
.quality-type.unknown{background:#edf0ec;color:#64756a}
.image-wrap{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#ebefe8,#d8e7dc)}
.image-wrap>.char-img{height:100%;width:100%;object-fit:contain;display:block}
.img-fallback{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:10px;text-align:center;font-size:12px;background:linear-gradient(140deg,#e9eee9,#dae7dc);color:#4d745f}
.img-fallback strong{font-size:13px}
.img-fallback small{font-size:10px;color:#6b8074}
.img-fallback a{font-size:10px;text-decoration:underline;color:#1c694d}
.image-failed .img-fallback{display:flex}
.roster-card .thumb{padding:0}
.combo-section{scroll-margin-top:20px}
.combo-selection{margin:20px 0 17px;padding:17px 20px;background:#fff;border:1px solid #dce9dd;border-radius:13px}
.combo-selection-top{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.combo-selection-top strong{font-size:15px}
.combo-selection-top strong span{font-size:12px;font-weight:500;color:#6a8071}
.combo-actions{display:flex;gap:7px;flex-wrap:wrap}
.combo-actions .secondary{font-size:12px;padding:8px 12px}
.combo-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:35px;margin-top:13px}
.combo-chip{display:inline-flex;align-items:center;gap:7px;background:#e9f4ed;color:#245f45;border:1px solid #b9d9c2;border-radius:100px;padding:7px 8px 7px 13px;font-size:12px;font-weight:700}
.combo-chip button{display:grid;place-items:center;border:0;background:#fff;color:#2d6951;border-radius:50%;height:24px;width:24px;line-height:1;font-size:17px}
.combo-reference-title{display:flex;justify-content:space-between;align-items:end;gap:15px;margin:22px 0 12px}
.combo-reference-title h3{font-size:20px;margin:0 0 5px}
.combo-reference-title p{font-size:12px;color:#6c8073;line-height:1.7;margin:0;max-width:700px}
.combo-reference-title select{min-width:180px;max-width:245px;border:1px solid #ccdfd0;border-radius:8px;padding:9px;background:#fff;font-size:12px;color:#3b6851}
.combo-reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;align-items:stretch}
.combo-role{min-width:0;border:1px solid #dce6dc;background:#fff;border-radius:13px;overflow:hidden;display:flex;flex-direction:column}
.combo-role-image{height:210px;background:#edf2ec;border-radius:0;display:grid;place-items:center}
.combo-role-image img{width:100%;height:100%;object-fit:contain}
.combo-role-content{padding:12px 13px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.combo-role-content .role-title{display:flex;align-items:start;gap:7px;justify-content:space-between;flex-wrap:wrap}
.combo-role-content h4{font-size:16px;margin:0}
.combo-role-content .game{font-size:11px;color:#7d9080;margin:0}
.combo-role-content .role-notes{font-size:11.5px;line-height:1.65;color:#405e4f;margin:1px 0;flex:1;overflow-wrap:anywhere}
.combo-role-content .role-kind{display:flex;gap:5px;flex-wrap:wrap;margin:3px 0 8px}
.combo-role-content button{margin-top:auto;padding:9px 8px;font-size:12px}
.combo-more-wrap{grid-column:1/-1;text-align:center;margin-top:9px}
.combo-disclaimer{font-size:11px;color:#758677;line-height:1.8;padding:11px 0;margin:8px 0 0}
.combo-empty{grid-column:1/-1;min-height:115px;display:grid;place-items:center}
@media(max-width:1000px){.combo-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-scroller .match{width:235px;min-width:235px;max-width:235px}}
@media(max-width:720px){
 .card-top{padding:0}.card-visual{height:215px;width:100%}.card-meta{padding:13px 13px 8px}.card-meta h3{font-size:17px}.card-story{padding:4px 13px 9px}.photo-credit{padding:0 13px 12px}
 .detail-row{display:grid;grid-template-columns:1fr}.detail-visual{height:270px;max-height:unset}.detail-visual svg{min-height:230px}
 .reference-scroller{gap:10px}.reference-scroller .match{min-width:218px;width:218px;max-width:218px}.reference-scroller .match-img{height:205px;min-height:205px}
 .combo-reference-grid{grid-template-columns:1fr;gap:11px}.combo-role{display:grid;grid-template-columns:118px 1fr}.combo-role-image{width:118px;height:100%;min-height:215px}.combo-role-content h4{font-size:14px}.combo-role-content{padding:11px}.combo-role-content .role-notes{font-size:11px}.combo-role-content button{font-size:11px}
 .combo-reference-title{display:block}.combo-reference-title select{margin-top:10px;width:100%;max-width:none}.combo-selection{padding:13px}.combo-actions{width:100%}.combo-actions button{flex:1}.carousel-controls{align-items:center}
}
@media(max-width:380px){.combo-role{grid-template-columns:100px 1fr}.combo-role-image{width:100px}.reference-scroller .match{min-width:205px;width:205px;max-width:205px}}

/* v15 / Document 2B and 2C: source-first garment-to-character paired references */
.doc-brief{margin-top:20px;border:1px solid #d3e2d7;background:#f8fbf7;border-radius:16px;padding:19px 22px 14px}
.doc-brief-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.doc-brief-label{font-size:10px;color:#43816b;letter-spacing:.12em;font-weight:850;text-transform:uppercase;white-space:nowrap}
.doc-brief h2{font-size:20px;letter-spacing:-.025em;margin:0}
.doc-brief h2 span{font-size:15px;color:#6d8576;font-weight:500}
.doc-brief-top>p{font-size:12px;color:#627869;margin:4px 0 7px;line-height:1.6;flex-basis:100%}
.doc-brief-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.doc-brief-cards>div{border:1px solid #e0eae0;background:#fff;border-radius:10px;padding:12px 14px;min-width:0}
.doc-brief-cards small{display:block;color:#659078;font-size:10px;font-weight:800}
.doc-brief-cards strong{display:block;font-size:14px;color:#254f3e;margin:5px 0 2px}
.doc-brief-cards p{font-size:11px;color:#728779;margin:0;line-height:1.55}
.doc-brief-extra{border-top:1px solid #dce7dc;margin:13px 0 0;padding-top:10px}
.doc-brief-extra summary{font-size:12px;color:#357258;cursor:pointer;font-weight:700}
.doc-brief-extra p{margin:8px 0 2px;font-size:12px;line-height:1.75;color:#5b7866}
.starter{margin-top:18px}
.goal-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.goal{min-height:113px;padding:12px 11px}
.goal.is-active{padding:11px 10px}
.pair-section{scroll-margin-top:16px}
.pair-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.pair-toolbar strong{font-size:15px;color:#2d5845}
.pair-toolbar strong span{font-weight:600;color:#678873;font-size:12px}
.pair-toolbar p{font-size:11.5px;color:#7a887e;margin:3px 0 0}
.pair-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pair-tools select{max-width:290px;background:white;border:1px solid #cfe0d4;padding:9px;border-radius:8px;color:#2e5e47;font-size:12px}
.pair-selected{margin:10px 0 15px;min-height:28px}
.pair-row{background:#fff;border:1px solid #d9e6dc;border-radius:15px;padding:17px 18px;margin:14px 0;box-shadow:0 4px 18px #1638290b}
.pair-row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #eaf0e9;padding-bottom:10px;margin-bottom:14px}
.pair-row-head>span{font-size:12px;color:#4c785e;font-weight:800;letter-spacing:.02em}
.pair-remove{font-size:11px;background:none;border:none;color:#87685a;white-space:nowrap;text-decoration:underline;padding:5px}
.pair-row-grid{display:grid;grid-template-columns:minmax(245px,.33fr) minmax(0,.67fr);gap:18px;align-items:stretch}
.pair-garment{border:1px solid #e3ebe0;border-radius:10px;background:#fbfcf9;min-width:0;padding-bottom:12px;overflow:hidden}
.pair-garment-photo{height:224px;background:#f2f5f0}
.pair-garment-copy{padding:12px 13px 0}
.pair-garment-copy h3{font-size:18px;line-height:1.25;margin:0 0 2px}
.pair-garment-en{font-size:11px!important;color:#839486!important;margin:0 0 9px!important}
.pair-garment-copy>p:not(.pair-garment-en){font-size:12px;color:#4f6957;line-height:1.62;margin:4px 0 8px}
.pair-feature-list{display:flex;gap:5px;flex-wrap:wrap;margin:9px 0}
.pair-feature-list span{background:#e9f2ea;color:#436a51;font-size:10px;border-radius:5px;padding:4px 6px}
.pair-garment-copy .pair-use{font-size:11.5px!important;background:#f1f5ee;padding:9px;border-radius:7px;margin-top:8px!important}
.pair-garment-copy .pair-use b{color:#275f42}
.pair-photo-link{display:inline-block;margin:6px 13px 0;font-size:11px;color:#397357;line-height:1.5}
.pair-side{min-width:0;overflow:hidden;display:flex;flex-direction:column}
.pair-side-top{display:flex;justify-content:space-between;align-items:start;gap:12px;margin:2px 0 10px}
.pair-side-top h4{font-size:16px;line-height:1.25;margin:0 0 6px}
.pair-side-top p{font-size:11px;line-height:1.55;color:#718679;margin:0}
.pair-arrows{display:flex;gap:6px;flex:none}
.pair-arrows button{font-size:22px;color:#316d53;line-height:1;width:35px;height:35px;background:#fff;border:1px solid #bed5c4;border-radius:8px;touch-action:manipulation}
.pair-rail{display:flex;overflow-x:auto;overflow-y:hidden;gap:10px;align-items:stretch;max-width:100%;padding:0 2px 13px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#a5c3ad transparent;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.pair-rail:focus-visible{outline:3px solid #73b893;outline-offset:-3px}
.pair-character{min-width:202px;max-width:202px;width:202px;flex:none;scroll-snap-align:start;display:flex;flex-direction:column;border:1px solid #dae6d9;border-radius:9px;background:#fff;overflow:hidden}
.pair-character.is-picked{border:2px solid #37785b;background:#f7fcf7}
.pair-character-image{display:grid;place-items:center;height:172px;min-height:172px;background:#e9efe9;border-radius:0}
.pair-character-image img{height:100%;width:100%;object-fit:contain}
.pair-character-copy{display:flex;flex:1;flex-direction:column;gap:4px;padding:10px 10px 11px;min-width:0}
.pair-character-title{display:flex;align-items:start;justify-content:space-between;gap:5px;flex-wrap:wrap}
.pair-character-title strong{font-size:13px;line-height:1.35}
.pair-character-title .quality-type{font-size:9px;line-height:1.3}
.pair-game{font-size:10px;color:#7a8b7d;margin:0;line-height:1.45}
.pair-reason{font-size:10.5px;line-height:1.65;color:#5d7263;margin:3px 0 9px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1;min-height:48px}
.pair-character-actions{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.pair-character-actions button{min-width:0;padding:7px 6px;font-size:10.5px;text-align:center;border-radius:6px}
.pair-pick{background:#e8f2eb;border:1px solid #a8d0b6;color:#2b7150;font-weight:750}
.pair-pick.is-picked{background:#286647;color:#fff;border-color:#286647}
.pair-no-refs{padding:35px 18px;background:#f4f7f3;color:#63806c;min-width:100%;border:1px dashed #c5d7c6;border-radius:9px;font-size:12px;line-height:1.7}
.pair-row-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #e5eee6;margin-top:11px;padding-top:11px}
.pair-row-bottom p{font-size:11px;color:#668273;line-height:1.6;margin:0;min-width:0}
.pair-row-bottom button{flex:none;font-size:10.5px;padding:8px 10px}
.pair-warning{font-size:11px;line-height:1.7;color:#758676;margin:17px 0 0}
.doc-export{background:#ebf2ed;border:1px solid #d6e6da;border-radius:12px;padding:20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:22px}
.doc-export-eyebrow{font-size:10px;font-weight:800;letter-spacing:.13em;color:#508065}
.doc-export h3{font-size:17px;margin:5px 0}
.doc-export p{font-size:12px;color:#5e7765;line-height:1.7;max-width:760px;margin:0}
.doc-export-actions{display:flex;gap:8px;flex-wrap:wrap}
.doc-copy-preview{width:100%}
.doc-copy-preview pre{white-space:pre-wrap;word-break:break-word;max-height:370px;overflow:auto;background:#fff;border:1px solid #cfe0d2;border-radius:8px;padding:14px 15px;color:#4c6655;font-size:11.5px;line-height:1.85}
@media(max-width:1080px){.goal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pair-row-grid{grid-template-columns:minmax(220px,.36fr) minmax(0,.64fr)}.pair-character{width:200px;min-width:200px;max-width:200px}}
@media(max-width:850px){.pair-row-grid{grid-template-columns:1fr;gap:12px}.pair-garment{display:grid;grid-template-columns:170px 1fr;gap:0;align-items:start}.pair-garment-photo{height:210px;grid-row:1 / span 2}.pair-garment-copy{padding:12px 13px 0}.pair-photo-link{margin:4px 13px 13px;align-self:end}.pair-rail{padding-bottom:16px}.pair-character{width:205px;min-width:205px;max-width:205px}.doc-brief-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.doc-brief{padding:13px 14px 11px;margin-top:12px}.doc-brief h2{font-size:18px}.doc-brief h2 span{font-size:12px}.doc-brief-cards{display:grid;grid-template-columns:1fr;gap:7px}.doc-brief-cards>div{padding:9px 11px}.doc-brief-cards strong{font-size:12.5px}.doc-brief-cards p{font-size:10.5px}.starter{margin-top:12px}.goal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pair-toolbar{padding:12px;display:block}.pair-tools{margin-top:10px;display:flex}.pair-tools select{max-width:none;flex:1 1 195px}.pair-tools button{flex:0 0 auto}.pair-row{padding:12px 11px;margin:11px 0}.pair-row-head{margin-bottom:11px}.pair-row-head>span{font-size:11px}.pair-garment{display:grid;grid-template-columns:115px minmax(0,1fr)}.pair-garment-photo{height:175px}.pair-garment-copy{padding:10px 9px 0}.pair-garment-copy h3{font-size:15px}.pair-garment-copy>p:not(.pair-garment-en){font-size:11px;line-height:1.5}.pair-garment-copy .pair-use{font-size:10.5px!important;padding:7px}.pair-feature-list span{font-size:9px}.pair-photo-link{font-size:10px;margin:4px 8px 8px}.pair-side-top h4{font-size:14px}.pair-side-top p{font-size:10.5px}.pair-character{width:194px;min-width:194px;max-width:194px}.pair-character-image{height:166px;min-height:166px}.pair-row-bottom{align-items:stretch;flex-direction:column;gap:7px}.pair-row-bottom button{width:100%}.doc-export{padding:15px 13px}.doc-export h3{font-size:15px}.doc-export-actions{width:100%}.doc-export-actions button{flex:1}.pair-selected{margin:10px 0}.gallery-caption{font-size:11px}}
@media(prefers-reduced-motion:reduce){.pair-rail{scroll-behavior:auto}}
/* Always show useful image placeholders while an external host is still responding. */
.real-image-holder .real-img:not(.loaded){opacity:0}
.real-image-holder .real-img.loaded{opacity:1}
.real-image-holder .real-stamp{opacity:0;transition:opacity .15s}
.real-image-holder.has-image .real-stamp{opacity:1}
.image-wrap:not(.has-image) .img-fallback{display:flex!important}
.image-wrap.has-image .img-fallback{display:none!important}
.image-wrap:not(.has-image)>.char-img{opacity:0}
.image-wrap.has-image>.char-img{opacity:1}
@media(max-width:600px){
 /* Show the work first: on small devices the optional document and direction panels occupy one row each. */
 .doc-brief-cards{display:flex;overflow-x:auto;overflow-y:hidden;gap:8px;scroll-snap-type:x proximity;scrollbar-width:thin;-webkit-overflow-scrolling:touch;padding-bottom:7px}
 .doc-brief-cards>div{min-width:230px;width:230px;max-width:230px;flex:none;scroll-snap-align:start}
 .goal-grid{display:flex;overflow-x:auto;overflow-y:hidden;gap:8px;scrollbar-width:thin;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 1px 9px}
 .goal,.goal.is-active{flex:0 0 158px;width:158px;min-width:158px;min-height:96px;padding:10px 10px}
 .goal .goal-emoji{font-size:17px;margin-bottom:3px}
 .starter-note{font-size:11px!important;padding:8px 10px}
}
.hero-direct{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:9px;background:#f1f9f2;color:#225943;padding:10px 15px;text-decoration:none;font-size:13px;font-weight:800;margin-top:17px}
.hero-direct:hover{background:#fff;color:#174733}
.pair-dock{position:fixed;right:18px;bottom:16px;z-index:25;border:1px solid #17402d;background:#236b4c;color:#fff;box-shadow:0 6px 23px #08291840;font-size:12px;font-weight:800;border-radius:20px;padding:13px 16px}
@media(max-width:600px){.hero-direct{margin-top:12px;width:100%;font-size:12px}.pair-dock{right:12px;bottom:12px;padding:11px 14px;box-shadow:0 4px 15px #173e2d40}}


/* v16 / common atlas: optional document context and one independent character-candidate rail */
.universal-lookup{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin:11px 0 0;border:1px solid #d8e7db;border-radius:10px;background:#fff}
.universal-lookup label{display:flex;flex-direction:column;gap:3px;flex:1 1 220px}
.universal-lookup label strong{font-size:12px;color:#325f4c}
.universal-lookup label small{font-size:10px;color:#819087}
.universal-lookup select{border:1px solid #bcd6c7;border-radius:8px;background:#fbfffc;color:#2e6246;padding:10px 12px;font-size:12px;flex:0 1 285px;max-width:100%;min-width:0}
.doc-target-hint{font-size:10px;line-height:1.4;color:#59876e;flex:1 1 200px}
.candidate-section{border:1px solid #cee4d4;border-radius:14px;background:#f5faf5;margin:24px 0 0;padding:18px 17px;scroll-margin-top:20px}
.candidate-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.candidate-eyebrow{font-size:10px;letter-spacing:.1em;font-weight:800;color:#48846a}
.candidate-head h3{font-size:22px;color:#264d38;margin:6px 0}
.candidate-head h3 span{font-size:12px;font-weight:650;color:#58846e}
.candidate-head p{font-size:12px;color:#667d6d;line-height:1.6;max-width:750px;margin:0}
.candidate-tools{display:flex;align-items:center;gap:6px;flex:none}
.candidate-tools button{border:1px solid #b9d5c1;background:#fff;color:#326a4f;border-radius:8px;min-width:36px;height:35px;font-size:20px;line-height:1}
.candidate-tools .candidate-clear{font-size:11px;padding:0 11px;white-space:nowrap}
.candidate-rail{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;max-width:100%;gap:13px;padding:15px 2px 13px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#9abbad transparent;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.candidate-rail:focus-visible{outline:2px solid #76b991;outline-offset:-3px}
.candidate-empty{width:100%;padding:35px 20px;text-align:center;font-size:12px;line-height:1.7;color:#718878;border:1px dashed #bdd7c3;background:#fff;border-radius:9px}
.candidate-card{display:flex;flex-direction:column;width:235px;min-width:235px;flex:0 0 235px;scroll-snap-align:start;background:#fff;border:1px solid #d4e5d8;border-radius:11px;overflow:hidden;box-shadow:0 3px 8px #294a3510}
.candidate-image{height:255px;min-height:255px;width:100%;background:#eaf0eb;position:relative}
.candidate-image .char-img{width:100%;height:100%;object-fit:contain}
.candidate-info{display:flex;flex-direction:column;flex:1;padding:12px 13px;gap:4px}
.candidate-info strong{font-size:16px;color:#254f39}
.candidate-info small{font-size:11px;color:#698272}
.candidate-origin{font-size:10px;color:#397359;background:#e8f3ec;padding:5px 7px;border-radius:5px;align-self:start}
.candidate-info p{font-size:11px;line-height:1.6;color:#688070;margin:6px 0 9px;min-height:36px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.candidate-card-actions{display:flex;gap:6px;align-items:center;margin-top:auto}
.candidate-card-actions button{flex:1;min-width:0;padding:8px 6px;font-size:11px;border-radius:7px}
.candidate-remove{border:1px solid #e5c5bb;color:#926b60;background:#fff}
.candidate-context{font-size:11px;color:#738779;margin:0;line-height:1.65}
.reference-save{font-size:11px;cursor:pointer;border:1px solid #bad9c2;background:#edf7f0;color:#346a4d;padding:8px 9px;border-radius:7px;font-weight:750}
.reference-save.is-picked{background:#246343;color:white;border-color:#246343}
.reference-desc + button + .reference-save{margin-top:6px;width:100%}
.roster-actions{display:flex;flex-direction:column;gap:6px}
.roster-actions .reference-save{width:100%}
.ref-actions .reference-save{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:600px){.universal-lookup{gap:8px;padding:10px}.universal-lookup select{flex:1 1 100%;width:100%}.universal-lookup label{flex-basis:100%}.doc-target-hint{flex:1 1 100%}.candidate-section{padding:12px 11px;margin-top:17px}.candidate-head h3{font-size:19px}.candidate-head p{font-size:11px}.candidate-tools button{height:32px;min-width:32px}.candidate-card{width:210px;min-width:210px;flex-basis:210px}.candidate-image{height:213px;min-height:213px}.candidate-info{padding:10px}.candidate-info strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){.candidate-rail{scroll-behavior:auto}}

/* v17 general audience */
.doc-brief{scroll-margin-top:24px}
.doc-brief-top p{max-width:850px}

/* v18 rendering optimization; visually identical and responsive */
.pair-row{content-visibility:auto;contain-intrinsic-size:auto 500px}
@media(max-width:700px){.pair-row{contain-intrinsic-size:auto 680px}}
@media print{.pair-row{content-visibility:visible}}

/* v19: explicit evidence tiers, reusable role facets, resilient preview hints */
.roster-content .roster-tag-group button{width:auto;flex:0 0 auto;max-width:100%;padding:3px 6px;white-space:nowrap}
.roster-content .roster-tag-group{align-items:flex-start;justify-content:flex-start}
.roster-content .roster-actions button{width:100%}

.tag-filter-panel{margin:0 0 20px;padding:15px 16px;border:1px solid #d6e3d6;border-radius:12px;background:#f8fbf7}
.tag-filter-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tag-filter-head strong{font-size:14px;color:#2b614b}.tag-filter-head span{font-size:11px;color:#637966}
.tag-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.tag-filter-grid label{font-size:11px;color:#52705e;font-weight:700}
.tag-filter-grid select{display:block;width:100%;margin-top:6px;padding:9px;border:1px solid #cdded0;background:white;border-radius:8px;color:#304f3f;font-size:12px;min-width:0}
.tag-filter-foot{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px;font-size:11px;color:#51705d}
.tag-filter-foot button{background:white;border:1px solid #bfd6c4;color:#286549;border-radius:7px;padding:7px 12px;cursor:pointer}
.tag-filter-warning{margin:10px 0 0;font-size:11px;color:#947046}
.clickable-tag{border:1px solid #cfe2d0;cursor:pointer;text-align:left;font:inherit;transition:background .15s}
.clickable-tag:hover,.clickable-tag:focus-visible{background:#dcecdf;outline-offset:2px}
.roster-content .roster-tag-group{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0}
.roster-content .roster-tag-group button{font-size:10px;padding:3px 6px}
.roster-tag-group button[data-kind="style"]{background:#f5f0e6;color:#7c6035}
.roster-tag-group button[data-kind="detail"]{background:#eef0fa;color:#536590}
.roster-tag-group button[data-kind="hair"]{background:#f7edf5;color:#95577e}
.ref-mode-label{font-size:11px;font-weight:700;color:#47755c;margin-left:5px;display:flex;align-items:center;gap:5px}
.ref-mode-label select{border:1px solid #cadccc;border-radius:8px;font-size:11px;padding:8px;max-width:200px;background:white}
.compare-top{flex-wrap:wrap}
.real-suggestion-box{border:1px solid #dce7d8;padding:11px;margin:12px 0;border-radius:10px;background:#fbfdf9}
.real-suggestion-box>h4{margin:0 0 6px;color:#2b6650}.real-suggestion-note{font-size:11.5px!important;color:#6d8274!important}
.real-suggestion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:9px}
.real-suggestion{display:flex;gap:9px;align-items:center;text-align:left;padding:7px;background:#fff;border:1px solid #d6e2d9;border-radius:8px;cursor:pointer;color:#365d49}
.real-suggestion:hover{border-color:#69a783;background:#f1f8f1}
.real-suggestion-photo{height:78px;width:71px;flex:0 0 71px;overflow:hidden;border-radius:6px;background:#e7eee9;position:relative}
.real-suggestion-photo img{width:100%;height:100%;object-fit:contain}
.real-suggestion-info{display:block;min-width:0;font-size:11px;line-height:1.5}
.real-suggestion-info strong{display:block;font-size:12px;line-height:1.4;margin-bottom:2px}
.real-suggestion-info small{color:#647a6e;font-size:10px;display:block}
.real-suggestion img{min-height:0!important}
.preview-retry{font-size:10px;border:1px solid #c8dccd;padding:5px 8px;border-radius:6px;background:#f9fffa;color:#3b7455;cursor:pointer}
.download-action{background:#e4f0e8!important;color:#286646!important;text-decoration:none!important}
@media(max-width:950px){.tag-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.tag-filter-panel{padding:12px}.ref-mode-label{width:100%;margin:6px 0}.real-suggestion-grid{grid-template-columns:1fr}.tag-filter-head{display:block}.tag-filter-head span{display:block;margin-top:3px}}

/* v20 expanded taxonomy and preview repair controls */
.tag-filter-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.v20-taxonomy-hint{font-size:12px;color:#6b806b}
.clothing-card .new-type-marker{font-size:10px;background:#eaf3e9;color:#517c60;padding:3px 6px;border-radius:5px;margin-left:5px}
.image-source-note{font-size:10px;opacity:.83;display:block}
.photo-error a{word-break:break-word}
.photo-error .photo-pending{font-size:11px;color:#725d42}
.roster-tag-group.module-row button{background:#e6eee9;color:#2e6a53;font-size:10px}
.match.ref-item .quality-type.assisted,.pair-character .quality-type.assisted{background:#f0f2df;color:#6a643d}
#activeTagHint{min-height:17px}
.img-fallback .source-editor{display:block;margin-top:8px}
.preview-progress{font-size:10px;color:#526b55}
@media(max-width:900px){.tag-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.tag-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.image-wrap:not(.has-image):not(.image-failed) .img-fallback{display:none!important}.preview-loading-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#6f8176;font-size:11px;pointer-events:none}.image-wrap.has-image .preview-loading-hint,.image-wrap.image-failed .preview-loading-hint{display:none}

/* Keep language switching available at every screen size. */
.topnav { flex-wrap:wrap; gap:12px; }
.language-toggle { flex:0 0 auto; min-width:48px; min-height:40px; font-weight:700; }
.language-notice { margin:0; padding:0 0 16px; color:#c5ded2; font-size:12px; }
html[lang="en"] .navlinks { flex-wrap:wrap; gap:12px; }
html[lang="en"] button,html[lang="en"] .field,html[lang="en"] .real-suggestion-info { overflow-wrap:anywhere; }
@media(max-width:720px) {
 .topnav .wordmark { flex:1 1 180px; }
 .topnav .navlinks { margin-left:0; }
 .topnav .language-toggle { margin-left:auto; }
}


/* An image-led reference archive: warm paper, ink and restrained olive accents. */
:root{--ink:#292b25;--text:#45473e;--secondary:#74766c;--accent:#4e5b41;--accent-deep:#35432c;--gold:#9e7554;--bg:#f7f6f2;--paper:#fff;--line:#ddded5;--sage:#eeefe8;--cream:#f1eee7;--dark:#292b25;--shadow:none}
body{background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
a{color:#4e5b41}button,a,input,select{touch-action:manipulation}
.wrap{width:min(1240px,calc(100% - 80px))}
.header{background:transparent;color:var(--ink);border-bottom:1px solid var(--line)}
.topnav{min-height:88px;border-bottom:1px solid var(--line);gap:24px;padding:19px 0;flex-wrap:nowrap}
.wordmark{font-family:Arial,Helvetica,system-ui,sans-serif;font-size:28px;font-weight:700;letter-spacing:.025em;font-variant-numeric:lining-nums;line-height:1.1;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark-caption{display:block;margin-top:7px;font-family:system-ui,sans-serif;font-size:10px;font-weight:400;letter-spacing:.18em;color:var(--secondary)}
.navlinks{margin-left:auto;gap:26px}
.navlinks a{font-size:13px;color:var(--text)}
.outline-light,.language-toggle{color:var(--ink);border:1px solid #d3d5c9;background:transparent;border-radius:3px;padding:8px 12px;min-height:36px;font-weight:500}
.language-toggle{min-width:45px}
.hero{display:flex;justify-content:space-between;align-items:center;gap:48px;padding:46px 0 42px}
.caps,.section-step{color:#777b6b;font-size:10px;font-weight:500;letter-spacing:.16em}
.hero h1{font-family:Georgia,'Noto Serif TC','PMingLiU',serif;font-size:clamp(32px,3.8vw,48px);line-height:1.25;letter-spacing:-.035em;font-weight:400;margin:13px 0}
.hero p{font-size:13px;color:var(--secondary);margin:0;line-height:1.7}
.hero-numbers{display:flex;flex:0 0 auto;gap:35px;margin:0;padding:0;border:0}
.hero-numbers>div{text-align:left;min-width:48px}
.hero-numbers b{font-family:Georgia,serif;font-size:29px;font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-numbers span{font-size:11px;color:var(--secondary);margin-top:4px}
.starter{margin:0;padding:23px 0 0;background:transparent;border:0;border-radius:0;box-shadow:none}
.starter h2{font-size:11px;font-weight:500;color:var(--secondary);margin:0 0 10px}
.goal-grid{display:flex;flex-wrap:wrap;gap:7px;padding:0}
.goal,.goal.is-active{flex:0 0 auto;width:auto;min-width:0;min-height:0;padding:7px 12px;border:1px solid var(--line);border-radius:3px;background:transparent;box-shadow:none}
.goal strong{font-size:12px;font-weight:400;margin:0}.goal small,.goal .goal-emoji{display:none}
.goal.is-active{border-color:var(--accent);color:var(--accent);background:#e9ece2}
.section{padding-top:42px;scroll-margin-top:18px}
.section-head{align-items:center;margin-bottom:22px}
.section-head h2{font-size:27px;font-weight:500;letter-spacing:-.04em;margin:7px 0 0}
.section-head p,.section-index{font-size:12px;color:var(--secondary)}
.toolbar{grid-template-columns:minmax(0,2fr) minmax(220px,1fr);padding:16px 0;background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;gap:20px}
.field label,.library-tools label,.tag-filter-grid label{font-size:11px;font-weight:500;color:var(--secondary)}
.field input,.field select,.library-tools input,.library-tools select,.tag-filter-grid select,.select-game,.pair-tools select,.ref-mode-label select{border:1px solid #d8dbd0;border-radius:3px;background:#fff;color:var(--ink);padding:10px 11px;box-shadow:none;min-width:0}
.field input:focus,.library-tools input:focus{border-color:var(--accent)}
.focusbar{gap:8px;padding:17px 0 8px}
.pill{border:0;border-radius:2px;background:transparent;padding:7px 10px;color:var(--secondary);font-size:12px}
.pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.gallery-caption{font-size:11px;color:#85877e;margin:0 0 24px}
.clothes-grid{gap:32px 26px;grid-template-columns:repeat(3,minmax(0,1fr))}
.clothing-card,.clothing-card.selected{border:0;background:transparent;border-radius:0;box-shadow:none;overflow:visible;min-width:0}
.card-top{display:block;padding:0}.card-visual{height:270px;width:100%;border:1px solid #e7e7df;border-radius:2px;background:#eeeee7;overflow:hidden}
.real-image-holder .real-img{background:#efeee9;mix-blend-mode:normal}
.card-meta{padding:15px 0 12px}.card-code{font-size:10px;letter-spacing:.06em;color:#86897a}
.card-meta h3{font-size:18px;font-weight:500;letter-spacing:-.03em;margin:7px 0 3px}
.card-meta .english{font-size:11px;color:var(--secondary);margin:0}.card-meta .one-liner{display:none}
.card-actions{padding:0;display:flex;gap:8px}.card-actions button{min-height:36px;font-size:12px;border-radius:3px;font-weight:500;box-shadow:none}
.primary{background:var(--accent);border:1px solid var(--accent);color:white;border-radius:3px;box-shadow:none;font-weight:500}
.primary:hover{background:var(--accent-deep)}
.secondary,.reference-save,.candidate-tools button,.pair-tools button,.carousel-buttons button{border:1px solid #d1d6c7;border-radius:3px;background:transparent;color:var(--accent);box-shadow:none;font-weight:500}
.photo-credit{padding:10px 0 0;font-size:10px;opacity:.75}
.photo-error{background:#ffffffdf;border:1px solid #dedfd6;border-radius:3px;box-shadow:none;font-size:10px}
.real-image-holder svg{opacity:.55}.real-stamp{font-size:9px;letter-spacing:.04em}.preview-loading-hint{color:#8c8e82}
.more-wrap{margin-top:26px}.more-wrap>button{padding:10px 20px}
#compareSection,#pairSection,#librarySection{margin-top:46px;border-top:1px solid var(--line)}
.design-card{border:1px solid var(--line);border-radius:3px;box-shadow:none;background:#fff}
.detail-visual{background:#f0f0e9;border-radius:2px}.mini-note{background:#f4f4ee;border-radius:0}
.compare-card{background:transparent}.compare-top h3,.detail-info h3{font-weight:500}
.match.ref-item,.pair-character,.candidate-card,.roster-card{border:1px solid var(--line);border-radius:3px;box-shadow:none;background:#fff}
.match.ref-item .match-img,.pair-character-image,.candidate-image,.roster-card .thumb{background:#eeefe7;border-radius:0}
.reference-scroller{gap:14px}.match-note h4,.roster-content h4,.candidate-info strong{font-weight:500}
.tag{border-radius:2px;background:#f0f2eb;color:#68715b;font-weight:400}
.pair-toolbar,.pair-row,.candidate-section,.doc-export,.tag-filter-panel,.library-panel,.faq{background:transparent;border-color:var(--line);border-radius:3px;box-shadow:none}
.pair-toolbar{padding:16px 0;border:0;border-bottom:1px solid var(--line)}
.pair-row{padding:20px;margin:20px 0;background:#fff}.pair-garment{border-color:var(--line);border-radius:2px}.pair-garment-photo{background:#f1f1eb}
.candidate-section{padding:20px 0;border:0;border-top:1px solid var(--line)}
.candidate-eyebrow,.doc-export-eyebrow{font-size:9px;font-weight:500;color:var(--secondary);letter-spacing:.13em}
.candidate-head h3,.doc-export h3{font-weight:500}.candidate-origin{background:#f2f3ed;color:var(--secondary);border-radius:2px}
.doc-export{padding:22px 0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.doc-export h3{margin-top:5px}.doc-export p{font-size:12px}.pair-warning{font-size:11px;color:var(--secondary)}
.library-toggle{background:transparent;padding:20px;color:var(--ink)}
.library-toggle strong{font-weight:500}.library-toggle small{font-size:12px;color:var(--secondary)}
#libraryContent{padding:18px}.tag-filter-panel{padding:16px;background:#f0f1e9}
.roster{gap:16px}.roster-content .roster-tag-group button{border-radius:2px}
.faq{padding:0;margin:40px 0 0;border:0}.faq details{border-color:var(--line);padding:16px 0}
.faq summary{font-weight:400;font-size:12px;color:var(--secondary)}
.footer{display:flex;justify-content:space-between;text-align:left;padding:24px 0;font-size:11px;color:#858779;border-top:1px solid var(--line)}
.footer>span:first-child{font-family:Georgia,serif;font-size:15px;letter-spacing:-.3px;color:var(--ink)}
.language-notice{font-size:11px;color:var(--secondary);padding:12px 0}
.pair-dock{background:var(--ink);border:0;border-radius:3px;box-shadow:0 2px 10px #2023191a;font-weight:400;padding:12px 16px}
.dialog{border-radius:4px;border-color:var(--line);box-shadow:0 10px 60px #0002}.dialog-head{background:#f3f3ed}.dialog::backdrop{background:#22251ec2}
.toast{background:var(--ink);border-radius:3px;font-weight:400}
@media(min-width:1500px){.card-visual{height:310px}}
@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.clothes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{gap:24px}.hero-numbers{gap:24px}.navlinks{gap:18px}.topnav{gap:16px}}
@media(max-width:720px){
 .wrap{width:calc(100% - 32px)}.topnav{min-height:72px;flex-wrap:wrap;padding:18px 0!important;gap:12px}.topnav .wordmark{flex:1 1 auto;font-size:25px}.wordmark-caption{font-size:9px}.topnav .navlinks{margin-left:0;order:3;flex:1 1 100%;justify-content:space-between;gap:12px;flex-wrap:nowrap}.navlinks a{display:block;font-size:12px}.navlinks #comboJump{font-size:11px;padding:6px 9px;min-height:32px}.topnav .language-toggle{order:2;margin-left:auto}
 .hero{display:block;padding:23px 0 22px}.hero h1{font-size:33px;margin:10px 0 12px}.hero p{font-size:12px;margin:0}.hero-numbers{display:flex;margin:20px 0 0;gap:38px}.hero-numbers b{font-size:25px}.hero-numbers span{font-size:10px}
 .starter{padding:19px 0 0;margin:0}.goal-grid{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;gap:6px}.goal,.goal.is-active{flex:0 0 auto;min-height:0;width:auto;min-width:0;padding:7px 11px}.goal strong{font-size:11px}
 .section{padding-top:27px}.section-head{gap:12px;margin-bottom:16px;align-items:center}.section-head h2{font-size:23px}.section-index{font-size:10px;text-align:right}.section-head p{font-size:10px;max-width:150px}
 .toolbar{grid-template-columns:minmax(0,1fr) 120px;padding:14px 0;gap:12px}.toolbar .field:first-child{grid-column:auto}.toolbar .helper{font-size:11px}.focusbar{display:flex;flex-wrap:nowrap;overflow-x:auto;padding:12px 0 8px}.pill{white-space:nowrap;flex:0 0 auto;font-size:11px}.gallery-caption{font-size:10px;margin:5px 0 18px}
 .clothes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 14px}.card-visual{height:195px;width:100%}.card-meta{padding:10px 0}.card-code{font-size:9px;letter-spacing:0}.card-meta h3{font-size:15px;line-height:1.45;margin:5px 0 3px}.card-meta .english{font-size:10px;line-height:1.4}.card-actions{flex-direction:column;gap:6px}.card-actions button{padding:7px 5px;min-height:34px;font-size:11px}.photo-credit{font-size:9px;padding-top:8px}.photo-error{max-width:95%;font-size:9px;padding:5px}.photo-error strong{font-size:9px}.photo-error a{font-size:9px}
 #compareSection,#pairSection,#librarySection{margin-top:30px}.pair-row{padding:12px}.candidate-section{padding:18px 0}.doc-export{padding:20px 0}.library-toggle{padding:15px}.library-toggle strong{font-size:14px}.library-toggle small{font-size:11px}#libraryContent{padding:12px}.roster{gap:12px}.footer{gap:12px;align-items:center;padding:22px 0 72px;font-size:9px}.footer>span:first-child{font-size:14px}.pair-dock{font-size:11px;padding:10px 12px}
}
@media(max-width:360px){.wrap{width:calc(100% - 24px)}.card-visual{height:175px}.hero h1{font-size:29px}.hero-numbers{gap:30px}}


/* Stable comparison controls: selected game, result text and card actions have separate tracks. */
.site-title{margin:0;line-height:1;flex:0 1 auto;font-weight:400;font-size:inherit}
.design-grid{min-width:0}.design-grid>*,.compare-card{min-width:0}
.compare-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,220px);align-items:start;gap:16px}
.compare-top>div{min-width:0}.compare-top h3{margin:0 0 6px;font-size:18px}
.compare-top #referenceHint{font-size:11px;line-height:1.6;margin:0;color:var(--secondary)}
.reference-game-field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:11px;color:var(--secondary)}
.reference-game-field .select-game{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.carousel-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;min-height:60px}
#refCount{display:block;min-height:3.2em;line-height:1.6;align-content:center;overflow-wrap:anywhere}
.reference-scroller .match{flex-shrink:0;scroll-margin:0}
.reference-scroller .match-note .identity{min-height:38px}
.reference-scroller .match-note .game{min-height:30px;line-height:1.5}
.reference-scroller .match-note .reference-desc{height:5em;min-height:5em;-webkit-line-clamp:3;line-height:1.6}
.reference-scroller .match-note>button{width:100%;min-height:40px;box-sizing:border-box;flex-shrink:0}
#pairSection{overflow-anchor:none}
@media(max-width:720px){.site-title{flex:1 1 auto}.compare-top{grid-template-columns:minmax(0,1fr);gap:14px}.reference-game-field{max-width:none}.carousel-controls{min-height:66px}.compare-top h3{font-size:17px}}


/* A compact, single-row clothing gallery and three navigation views. */
.header{position:sticky;top:0;z-index:40;background:var(--bg)}
.topnav{min-height:78px}.navlinks [aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
#comboJump[aria-pressed="true"]{border-color:var(--accent);background:var(--sage)}
#goalSection,#garmentSection,#compareSection,#librarySection,#pairSection{scroll-margin-top:calc(var(--header-h,145px) + 12px)}
.garment-gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 12px}
#garmentCount{font-size:12px;color:var(--secondary);margin:0;min-height:1.6em}
.gallery-arrows{display:flex;gap:6px}.gallery-arrows button{min-width:88px;width:auto;min-height:42px;padding:8px 14px;font-size:12px}
#garmentGrid.clothes-grid{display:flex;flex-direction:row;flex-wrap:nowrap;gap:22px;overflow-x:auto;overflow-y:hidden;padding:0 0 8px;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#89927d #e6e8df;cursor:grab;min-height:398px;align-items:stretch;overscroll-behavior-x:contain;position:relative;max-width:100%;touch-action:pan-x pan-y}
#garmentGrid .clothing-card{flex:0 0 268px;width:268px;max-width:268px;scroll-snap-align:start;display:flex;flex-direction:column}
#garmentGrid .card-visual{height:225px;flex:none}#garmentGrid .card-meta{padding:12px 0;min-height:86px;box-sizing:border-box}#garmentGrid .card-meta h3{font-size:17px}#garmentGrid .card-actions{margin-top:auto;flex-direction:row}#garmentGrid .card-actions button{flex:1;min-width:0;min-height:36px;font-size:11px;padding:7px}
#garmentGrid .photo-credit{min-height:28px}#garmentGrid .empty{flex:1 0 100%;min-height:260px;display:grid;place-items:center}
#garmentGrid.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}#garmentGrid img{user-select:none;-webkit-user-drag:none}
.garment-position{display:flex;align-items:center;gap:14px;font-size:10px;color:var(--secondary);padding:6px 0 0}.garment-position span{flex:none}.garment-position input{width:100%;min-width:0;accent-color:var(--accent);cursor:ew-resize;height:20px;margin:0}
#pairSection,#librarySection{margin-top:0;border-top:0}.pair-dock{z-index:30}
@media(max-width:720px){.topnav{min-height:70px}.navlinks{align-items:center}#garmentGrid.clothes-grid{gap:16px;min-height:365px}#garmentGrid .clothing-card{flex-basis:226px;width:226px;max-width:226px}#garmentGrid .card-visual{height:200px}#garmentGrid .card-meta{min-height:82px}#garmentGrid .card-meta h3{font-size:16px}.garment-gallery-controls{margin-bottom:10px}#garmentCount{font-size:11px}.garment-position{gap:10px}}


/* Detail-only views of one documented garment; no added gallery height. */
.garment-views{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding:2px 2px 5px;max-width:100%}
.garment-views[hidden],.garment-photo-caption[hidden]{display:none}
.garment-view{flex:0 0 78px;display:grid;gap:5px;padding:5px;border:1px solid #d8d9cf;border-radius:3px;background:transparent;color:inherit;cursor:pointer;font:inherit;font-size:11px;text-align:center}
.garment-view img{display:block;width:66px;height:51px;object-fit:contain;background:#eeeee7;pointer-events:none}
.garment-view[aria-pressed="true"]{border-color:#536348;box-shadow:0 0 0 1px #536348;background:#f0f2e9}
.garment-view:focus-visible{outline:2px solid #536348;outline-offset:3px}
.garment-photo-caption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:11px;color:#62695c}
.garment-photo-caption a{color:inherit;text-underline-offset:3px}
.detail-row>div:first-child{min-width:0}
.detail-visual.has-image #detailSvg{visibility:hidden}
@media(prefers-reduced-motion:reduce){.detail-visual img{transition:none}}

/* Page-specific visibility also applies before scripts finish loading. */
html[data-page="library"] #goalSection,html[data-page="library"] #garmentSection,html[data-page="library"] #compareSection,html[data-page="library"] #pairSection,
html[data-page="collection"] #goalSection,html[data-page="collection"] #garmentSection,html[data-page="collection"] #compareSection,html[data-page="collection"] #librarySection,
html[data-page="garments"] #librarySection,html[data-page="garments"] #pairSection{display:none}
html[data-page="library"] #libraryToggle{display:none}
html[data-page="library"] #librarySection,html[data-page="collection"] #pairSection{padding-top:30px}
.navlinks a.outline-light{display:inline-flex;align-items:center}

/* A reference sheet is shown only after the user selects it. */
.reference-filter{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-size:12px;width:fit-content;cursor:pointer}
.reference-filter input{width:16px;height:16px;min-height:16px;margin:0;padding:0;accent-color:#536348}
.character-view-controls,.character-panel-controls{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.character-panel-controls{margin:10px 0 0}
.character-panel-controls[hidden],.character-reference-caption[hidden]{display:none}
.character-view-controls button,.character-panel-controls button{font:inherit;font-size:12px;color:inherit;background:transparent;border:1px solid #d5d8cc;border-radius:3px;padding:8px 10px;cursor:pointer}
.character-view-controls button[aria-pressed="true"],.character-panel-controls button[aria-pressed="true"]{background:#536348;border-color:#536348;color:white}
.character-view-controls button:focus-visible,.character-panel-controls button:focus-visible{outline:2px solid #536348;outline-offset:3px}
.dialog.showing-reference .dialog-body{grid-template-columns:minmax(0,1fr)}
#dialogImage{min-width:0}
.character-reference-frame.real-image-holder{width:100%;height:auto;aspect-ratio:var(--reference-ratio,20/9);max-height:60vh;min-height:120px;position:relative;margin:auto;overflow:hidden;background:#eeeee7;border-radius:2px}
.character-reference-frame.real-image-holder .real-img{object-fit:contain;mix-blend-mode:normal}
.character-reference-frame.real-image-holder.is-cropped{aspect-ratio:var(--panel-ratio);width:min(100%,calc(60vh * var(--panel-ratio)));min-height:0}
.character-reference-frame.real-image-holder.is-cropped .real-img{max-width:none;object-fit:fill}
.reference-image-pending{position:absolute;inset:0;display:grid;place-items:center;color:#64705a;font-size:12px}
.character-reference-frame.has-image .reference-image-pending,.character-reference-frame.image-failed .reference-image-pending{display:none}
.character-reference-frame .photo-error{position:absolute;inset:10px;transform:none;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:#f4f4ee;color:#535c4a}
.character-reference-frame .photo-error[hidden]{display:none}
.character-reference-caption{font-size:11px;line-height:1.6;color:#64705a;margin-top:8px}
.character-reference-caption p{margin:4px 0}
.character-reference-caption .ref-actions{margin-top:6px}

.reference-filters{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 14px}.reference-filters .reference-filter{margin:0}
.character-view-controls[hidden]{display:none}
.outfit-navigation{margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid #dedfd4}
.outfit-navigation>span{display:block;margin-bottom:8px;font-size:12px;color:#64705a}
.outfit-navigation .tagrow{display:flex;flex-wrap:wrap;gap:6px}
.outfit-navigation button{max-width:100%;white-space:normal;text-align:left;overflow-wrap:anywhere}
.outfit-navigation button[aria-current="true"]{background:#59654e;color:#fff;border-color:#59654e}
.dialog-head>div{min-width:0}
.dialog-head .close{flex-shrink:0;white-space:nowrap}
.usage-link{display:inline-block;margin:4px 0 10px;font-size:12px;color:var(--accent)}
.usage-page{max-width:850px;padding-top:32px}
.usage-page h2{font-size:clamp(24px,4vw,34px);line-height:1.3}
.usage-intro{color:var(--secondary)}
.usage-index{display:flex;flex-wrap:wrap;gap:8px 20px;padding:15px 0;border-bottom:1px solid var(--line)}
.usage-page section{padding:22px 0;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.usage-page h3{font-size:19px;margin:0 0 14px}
.usage-page ol{padding-left:25px}.usage-page li{margin-bottom:12px;line-height:1.8}
.usage-page p{font-size:14px;line-height:1.8}.usage-example{display:inline-block;margin:6px 0;font-size:14px}
.download-message{flex:1 1 100%;font-size:12px;line-height:1.7;color:var(--secondary);overflow-wrap:anywhere;margin:7px 0 0}
.download-message a{display:inline-block;margin-left:8px}


/* Character finder: one search box, a tag picker with live counts, removable conditions. */
html[data-page="library"] .library-panel{background:transparent;border:0;border-radius:0;padding:0}
html[data-page="library"] #libraryContent{padding:0}
.finder{display:grid;gap:16px;padding:0 0 22px;margin:0 0 26px;border-bottom:1px solid var(--line);min-width:0}
.finder-label{font-size:12px;font-weight:500;color:var(--secondary);margin-bottom:-8px}
#librarySearch{width:100%;box-sizing:border-box;min-width:0;font:inherit;font-size:16px;padding:12px 14px;border:1px solid #cfd2c6;border-radius:3px;background:#fff;color:var(--ink)}
#librarySearch:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.finder-picker{min-width:0}
.finder-tabs{display:flex;flex-wrap:wrap;gap:2px 4px;margin:0 0 10px;border-bottom:1px solid var(--line)}
.finder-tabs button{font:inherit;font-size:13px;min-height:38px;padding:6px 12px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;color:var(--secondary);cursor:pointer}
.finder-tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:600}
.finder-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.finder-tag{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:13px;min-height:34px;padding:4px 10px;border:1px solid #d5d8cc;border-radius:3px;background:#fff;color:var(--ink);cursor:pointer;white-space:nowrap}
.finder-tag small{font-size:11px;color:var(--secondary);font-variant-numeric:tabular-nums}
.finder-tag:not(:disabled):hover{border-color:var(--accent)}
.finder-tag[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.finder-tag[aria-pressed="true"] small{color:#e3e8dc}
.finder-tag:disabled{opacity:.4;cursor:default}
.finder-facet-note{margin:8px 0 0;font-size:11px;color:var(--secondary)}
.finder-facet-note[hidden],.finder-notice[hidden],#finderRule[hidden]{display:none}
.finder-options{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-end;min-width:0}
.finder-options>label:not(.reference-filter){display:grid;gap:4px;font-size:11px;font-weight:500;color:var(--secondary);min-width:0}
.finder-options select{font:inherit;font-size:13px;min-height:38px;max-width:100%;padding:6px 10px;border:1px solid #d8dbd0;border-radius:3px;background:#fff;color:var(--ink)}
.finder-options .reference-filter{margin:0;min-height:38px;font-size:13px}
.finder-status{display:grid;gap:8px;min-width:0}
.finder-active{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:34px}
.finder-chip{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 5px;max-width:100%;padding:2px 2px 2px 10px;border:1px solid var(--accent);border-radius:3px;background:#eef0e7;font-size:13px;color:var(--ink)}
.chip-kind{font-size:11px;color:var(--secondary);margin-right:2px}
.chip-or{font-size:11px;color:var(--secondary)}
.finder-chip button{width:30px;height:30px;border:0;border-radius:2px;background:none;font-size:17px;line-height:1;color:var(--secondary);cursor:pointer}
.finder-chip button:hover,.finder-chip button:focus-visible{background:#dfe3d6;color:var(--ink)}
.finder-chip.is-unsupported{border-color:#c9a77f;background:#f8f1e7}
.finder-clear{font:inherit;font-size:12px;min-height:32px;padding:0 6px;border:0;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.finder-empty-hint{font-size:12px;color:var(--secondary)}
.finder-count{margin:0;font-size:13px;color:var(--secondary)}
.finder-count strong{color:var(--ink);font-weight:600}
.finder-notice{display:grid;gap:3px;margin:0;padding:8px 10px;border-left:3px solid #c9a77f;background:#f8f1e7;font-size:12px;color:#5c4a33}
.finder-foot{margin-top:30px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--secondary)}
.finder-foot>p{margin:0 0 10px}
#finderGlossary summary{cursor:pointer;min-height:32px;display:flex;align-items:center}
#finderGlossary dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px 20px;margin:10px 0 0}
#finderGlossary dl div{min-width:0}#finderGlossary dt{color:var(--ink);overflow-wrap:anywhere}#finderGlossary dd{margin:0}

/* Image-first results: each card keeps its image proportion (clamped), so rows stay even
   and wide design sheets get room instead of a tall frame with empty bands. */
#rosterGrid.roster{--row:300px;display:flex;flex-wrap:wrap;gap:30px 18px;grid-template-columns:none}
#rosterGrid.roster::after{content:"";flex:1000 1 0}
#rosterGrid .roster-card{flex:var(--ar) 1 calc(var(--ar) * var(--row));min-width:0;max-width:100%;display:flex;flex-direction:column;border:0;border-radius:0;background:transparent;overflow:visible}
/* A row may stretch a little to fill the width, but never into oversized cards. */
#rosterGrid .roster-card{max-width:min(100%,calc(var(--ar) * var(--row) * 1.3))}
.roster-media{position:relative;cursor:zoom-in;border:1px solid #e3e3db;border-radius:2px;overflow:hidden;background:#efeee8}
#rosterGrid .roster-card .thumb{width:100%;height:auto;aspect-ratio:var(--ar);padding:0;border-radius:0;background:#efeee8}
#rosterGrid .image-wrap,.dialog-stage .image-wrap{background:#efeee8}
#rosterGrid .img-fallback,.dialog-stage .img-fallback{background:#efeee8;color:#5d6652}
#rosterGrid .img-fallback .preview-retry{font-size:11px}
.media-badge{position:absolute;left:6px;top:6px;padding:2px 6px;border-radius:2px;background:#fffffff0;color:var(--text);font-size:10px;pointer-events:none}
#rosterGrid .roster-content{display:flex;flex-direction:column;gap:6px;flex:1;padding:10px 0 0;min-width:0}
#rosterGrid .roster-content h4{margin:0;font-size:14px;line-height:1.4;font-weight:600;overflow-wrap:anywhere}
.roster-name{display:block}.roster-outfit{display:block;margin-top:1px;font-size:12px;font-weight:400;color:var(--text)}
.roster-meta{margin:0;font-size:11px;color:var(--secondary)}
.roster-tags{display:flex;flex-wrap:wrap;gap:4px}
.roster-tags span{padding:2px 6px;border-radius:2px;background:#f0f1ea;color:#5f6655;font-size:11px}
.roster-tags span.is-match{background:var(--accent);color:#fff}
#rosterGrid .roster-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center;margin-top:auto;padding-top:4px}
#rosterGrid .roster-actions>*{width:auto;flex:0 1 auto;min-height:36px;margin:0;padding:6px 8px;font:inherit;font-size:12px;border-radius:3px;text-align:center;white-space:nowrap}
.roster-view{border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer}
.roster-view:hover{background:var(--accent-deep)}
.roster-original{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid #d1d6c7;color:var(--accent);text-decoration:none}
.reference-save[data-compact]{border:1px solid #d1d6c7;border-radius:3px;background:transparent;color:var(--accent);font-weight:500}
.reference-save[data-compact].is-picked{border-color:var(--accent);background:#e7ebdf;color:var(--accent-deep)}
#rosterGrid>.empty{flex:1 1 100%}
.finder-no-results{display:grid;gap:12px;justify-items:center;padding:30px 20px;border:1px dashed #cfd2c6;border-radius:3px;background:#fff;color:var(--text)}
.finder-no-results p{margin:0;font-size:13px}
.finder-undo{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.finder-undo button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:5px 12px;border:1px solid #d1d6c7;border-radius:3px;background:#fff;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.finder-undo button small{color:var(--secondary)}
.toast.has-action{pointer-events:auto}
.toast button{margin-left:8px;padding:3px 10px;border:1px solid #ffffff8c;border-radius:3px;background:none;color:#fff;font:inherit;cursor:pointer}

/* Detail view: large image first, then saving, the original file and outfit switching. */
#characterDialog.dialog{width:min(1180px,calc(100% - 24px));max-height:calc(100dvh - 24px)}
#characterDialog .dialog-body{grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:24px;padding:20px;align-items:start}
#characterDialog.is-wide .dialog-body{grid-template-columns:minmax(0,1fr)}
#characterDialog .dialog-stage .dialog-cover{width:min(100%,var(--stage-width,100%));height:var(--stage-height,74vh);max-height:74vh;min-height:0;padding:0;margin-inline:auto;border-radius:2px}
#characterDialog .dialog-stage .dialog-cover>.char-img{width:100%;height:100%;max-height:none;object-fit:contain}
#characterDialog .character-reference-frame.real-image-holder{max-height:74vh}
.stage-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:10px;font-size:12px}
.stage-tools [hidden]{display:none}
.stage-tools button{min-height:34px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer}
.stage-tools a{color:var(--accent);text-underline-offset:3px}
.character-reference-caption .ref-actions{display:flex;flex-wrap:wrap;gap:4px 16px}
.detail-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.detail-actions>a,.detail-actions>button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:7px 13px;font:inherit;font-size:13px;text-decoration:none;cursor:pointer;box-sizing:border-box}
.detail-tags{display:grid;gap:10px;margin:0 0 14px}
.detail-tag-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;align-items:start}
.detail-tag-label{padding-top:5px;font-size:12px;color:var(--secondary)}
.dialog-text .detail-tag-row .tagrow{margin:0;min-height:0}
.dialog-text .detail-tag-row .tag{font-size:12px;padding:4px 8px}
.dialog-text .detail-tag-note{margin:2px 0 0;font-size:11px;color:var(--secondary)}
.detail-more{border-top:1px solid var(--line);padding:4px 0}
.detail-more summary{display:flex;align-items:center;min-height:38px;cursor:pointer;font-size:13px;color:var(--text)}
.detail-more[open]{padding-bottom:12px}
.detail-module .tag{margin:0 4px 4px 0}
@media(max-width:860px){#characterDialog .dialog-body{grid-template-columns:minmax(0,1fr);padding:14px;gap:16px}#characterDialog .dialog-stage .dialog-cover,#characterDialog .character-reference-frame.real-image-holder{max-height:62vh}}
@media(max-width:720px){
 #rosterGrid.roster{--row:230px;gap:24px 12px}
 .finder{gap:14px}
 .finder-chips{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);justify-content:start;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
 .finder-tabs{flex-wrap:nowrap;overflow-x:auto}
 .finder-tabs button{flex:0 0 auto;padding:6px 10px}
 .finder-options{gap:10px 14px}
 .finder-options>label:not(.reference-filter){flex:1 1 140px}
 .finder-options select{width:100%}
}
@media(max-width:430px){
 #rosterGrid.roster{--row:180px;gap:22px 10px}
 #rosterGrid .roster-content h4{font-size:13px}
 #rosterGrid .roster-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px}
 #rosterGrid .roster-actions .roster-view{grid-column:1 / -1}
 #rosterGrid .roster-actions>*{padding:5px 4px;font-size:11px}
 .detail-actions>a,.detail-actions>button{flex:1 1 auto}
}

/* Source-backed character groups stay separate from clothing facets. */
.group-coverage{margin:12px 0;border-top:1px solid var(--line,#ddd8ce);font-size:13px}
.group-coverage summary{padding:12px 0;cursor:pointer;width:fit-content}
.group-coverage p{max-width:78ch;line-height:1.7;color:#625f54}
.group-coverage ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:8px 24px}
.group-coverage li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border-bottom:1px solid #e7e3da;padding:9px 0;min-width:0}
.group-coverage li button{background:none;border:0;padding:4px 0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:inherit;font:inherit}
.group-coverage li a{font-size:11px;margin-left:auto;color:#626951}
.group-coverage li small{flex-basis:100%;line-height:1.6;color:#716d63}
.group-state{font-size:11px;color:#626951}.group-state.pending{color:#85663c}


/* Find the picture first: search and game in one bar, tags in one scrolling row, rarer filters folded. */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.finder{gap:12px;padding-bottom:18px;margin-bottom:22px}
.finder-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;min-width:0}
.finder-bar select{font:inherit;font-size:14px;min-height:48px;max-width:210px;padding:6px 10px;border:1px solid #cfd2c6;border-radius:3px;background:#fff;color:var(--ink)}
.finder-tabs{margin-bottom:8px}
#finderChips.finder-chips{display:flex;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
#finderChips .finder-tag{flex:0 0 auto}
.finder-more{min-width:0}
.finder-more>summary{display:inline-flex;align-items:center;min-height:36px;cursor:pointer;font-size:13px;color:var(--text)}
.finder-more[open]>summary{margin-bottom:8px}
.finder-status{gap:6px}

/* Cards: the picture and name lead; save, download and original are quiet text actions. */
.roster-title{display:block;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.roster-title:hover .roster-name{text-decoration:underline;text-underline-offset:3px}
.roster-title:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.link-button{display:inline-flex;align-items:center;min-height:32px;padding:4px 2px;border:0;background:none;font:inherit;font-size:12px;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#rosterGrid .roster-actions{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:center;padding-top:2px}
#rosterGrid .roster-actions>.link-button{flex:0 0 auto;min-height:32px;padding:4px 2px;border:0;background:none}
#rosterGrid .roster-actions>.reference-save{flex:0 0 auto;min-height:32px;padding:4px 10px}
#rosterGrid .img-fallback{gap:6px;padding:8px}
#rosterGrid .img-fallback small{font-size:11px;line-height:1.4;max-width:16em}
#rosterGrid .roster-content{gap:4px}

/* Detail: a fixed image stage with the version switcher above it, so switching never moves the page. */
#characterDialog .dialog-body,#characterDialog.is-wide .dialog-body{grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:24px;padding:18px 20px 22px;align-items:start}
.view-switch{display:flex;gap:6px;min-height:44px;overflow-x:auto;padding:0 0 8px;scrollbar-width:thin}
.view-switch button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid #d5d8cc;border-radius:3px;background:#fff;font:inherit;font-size:13px;color:var(--ink);cursor:pointer}
.view-switch button small{font-size:11px;color:var(--secondary)}
.view-switch button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.view-switch button[aria-pressed="true"] small{color:#d8dad0}
.view-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#characterDialog .view-stage{position:relative;display:grid;place-items:center;height:clamp(300px,calc(100vh - 250px),760px);overflow:hidden;border-radius:2px;background:#efeee8}
#characterDialog .view-stage>.dialog-stage,#characterDialog .view-stage>.character-reference-frame{width:100%;height:100%;max-height:none;min-height:0;aspect-ratio:auto;margin:0}
#characterDialog .view-stage .dialog-cover{width:100%;height:100%;max-height:none;min-height:0;aspect-ratio:auto;padding:0;margin:0;border-radius:0;background:#efeee8}
#characterDialog .view-stage .dialog-cover>.char-img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain}
#characterDialog .view-stage>.character-reference-frame.is-cropped{width:auto;max-width:100%;height:100%;aspect-ratio:var(--panel-ratio)}
.view-stage-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;min-height:42px;padding-top:6px}
.view-stage-foot .character-panel-controls{margin:0}
.view-current{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 12px;font-size:12px;color:var(--secondary)}
.view-current strong{font-size:17px;font-weight:600;color:var(--ink)}
.detail-actions-wrap{margin:0 0 16px}
.detail-actions-wrap .detail-actions{margin:0}
.detail-actions-wrap .download-message{margin:8px 0 0;font-size:12px;color:var(--text)}
.outfit-navigation button small{margin-right:2px;font-size:10px;color:var(--secondary)}
.outfit-navigation button[aria-current="true"] small{color:#dfe2d7}
.review-list{display:grid;gap:10px;margin:8px 0 4px;padding:0;list-style:none}
.review-list li{display:grid;gap:2px;font-size:12px;color:var(--text)}
.review-list small{color:var(--secondary)}
.review-state{font-size:11px;color:#7a5a2e}
@media(max-width:860px){
 #characterDialog .dialog-body,#characterDialog.is-wide .dialog-body{grid-template-columns:minmax(0,1fr);padding:12px 14px 18px;gap:14px}
 #characterDialog .view-stage{height:56vh}
}
@media(max-width:720px){
 .finder-bar select{max-width:118px;font-size:13px}
 #finderChips.finder-chips{display:flex;grid-auto-flow:unset;grid-template-rows:none}
}
@media(max-width:430px){
 #rosterGrid .roster-actions{display:flex;gap:2px 10px}
 #rosterGrid .roster-actions>*{font-size:12px}
}

/* Character page: a compact heading so the first row of pictures shows sooner. */
html[data-page="library"] #librarySection{padding-top:18px}
html[data-page="library"] #librarySection .section-step{display:none}
html[data-page="library"] #librarySection .section-head{margin-bottom:12px;align-items:baseline}
html[data-page="library"] #librarySection .section-head h2{margin:0;font-size:24px}
.group-coverage>details>summary{min-height:32px;display:inline-flex;align-items:center;cursor:pointer;font-size:13px}
.finder{grid-template-columns:auto minmax(0,1fr);column-gap:24px}
.finder>*{grid-column:1/-1}
.finder>.finder-more,.finder>#groupCoverage{grid-column:auto}
.finder>.finder-more[open]{grid-column:1/-1}
.finder>#groupCoverage{margin:0;padding:0;border:0;align-self:start}
@media(max-width:720px){
 html[data-page="library"] #librarySection .section-head{display:block}
 html[data-page="library"] #librarySection .section-index{display:block;margin-top:4px;text-align:left}
 html[data-page="library"] #librarySection .section-head h2{font-size:22px}
 .finder>.finder-more,.finder>#groupCoverage{grid-column:1/-1}
}
@media(max-width:430px){
 #rosterGrid.roster{--row:136px;gap:20px 10px}
 .finder-bar select{max-width:104px}
}
#rosterGrid .roster-content .roster-title{padding:0;min-height:0;width:100%;border:0;background:none}
.compared-view{display:inline-block;margin:2px 0;font-size:11px;color:var(--secondary);border:1px solid var(--line);border-radius:3px;padding:1px 6px;background:var(--paper)}
.archived-note{font-size:12px;line-height:1.6;color:#7a5b3c;background:#f6f0e6;border-left:3px solid var(--gold);border-radius:3px;padding:7px 9px;margin:6px 0}

/* Character-reference count on each garment card, pending garment list, clickable reference images. */
.clothing-card .ref-count{display:inline;font-size:10px;color:var(--accent);font-weight:800;margin-left:6px;white-space:nowrap}
.pending-types{margin:14px 0 0;border-top:1px solid var(--line);padding-top:10px;font-size:12px;color:var(--secondary)}
.pending-types summary{cursor:pointer;font-weight:700;color:var(--ink)}
.pending-types p{margin:8px 0}
.pending-types .tag[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:1px}
.match-media{cursor:pointer}
#garmentGrid .empty p,#characterMatches .empty p{margin:0 0 10px}
/* The header's collection button already shows these counts; the floating dock covered the bar's buttons. */
#pairDock{display:none!important}
/* One-line photo credit so long product names never push a card's buttons out of line. */
#garmentGrid .photo-credit{min-height:0;height:28px;overflow:hidden}
#garmentGrid .photo-credit a{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#garmentGrid .card-actions button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Second-level tag groups: a tab opens on one short group instead of one long row. */
.finder-groups{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.finder-groups[hidden]{display:none}
.finder-groups button{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;min-height:32px;padding:4px 10px;border:1px solid #d5d8cc;border-radius:16px;background:#f7f7f2;color:var(--secondary);cursor:pointer}
.finder-groups button small{font-size:10px;font-variant-numeric:tabular-nums}
.finder-groups button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.finder-groups button.has-picked:not([aria-pressed="true"]){border-color:var(--accent);color:var(--accent);font-weight:600}
#finderChips.finder-chips{display:flex;flex-wrap:wrap;overflow:visible;grid-auto-flow:unset;grid-template-rows:none}
.finder-tag .tag-code{font-size:10px;color:var(--secondary)}
@media(max-width:720px){.finder-groups{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.finder-groups button{flex:0 0 auto}}
.garment-feature-filter{padding:8px 0 15px;border-bottom:1px solid var(--line);margin-bottom:12px}
.garment-feature-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px 14px;margin-bottom:9px;font-size:12px}
.garment-feature-hint{font-size:11px;color:var(--secondary)}
.garment-feature-tags{display:flex;flex-wrap:wrap;gap:6px}
.garment-feature,.garment-feature-more{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:5px 10px;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--ink);font:inherit;font-size:12px}
.garment-feature small{font-size:10px;font-variant-numeric:tabular-nums;color:var(--secondary)}
.garment-feature.active{background:var(--ink);border-color:var(--ink);color:white}
.garment-feature.active small{color:inherit;opacity:.8}
.garment-feature-more{border-color:transparent;text-decoration:underline;text-underline-offset:3px;color:var(--secondary)}
.garment-feature-extra{margin-top:9px;max-height:180px;overflow-y:auto;padding:4px 3px 6px}
.garment-empty-filters{justify-content:center;margin:0 0 14px}
@media(max-width:720px){.garment-feature-filter{padding-top:5px}.garment-feature-head{gap:4px}.garment-feature-hint{flex-basis:100%}.garment-feature{min-height:36px}}