@charset "UTF-8";
:root{font-family:"Yu Gothic UI","Meiryo",sans-serif;color:#392455;background:#faf7ff;font-synthesis:none;--blue:#8246cb;--muted:#77618b;--line:#d9c5ef}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,label,input,select{-webkit-tap-highlight-color:transparent}button,a,select,input{outline-offset:5px}button{cursor:pointer}a{color:var(--blue)}.mast{height:90px;padding:0 max(5vw,24px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;color:#452665;text-decoration:none;font-size:23px;font-weight:800}.mark{display:grid;place-items:center;background:var(--blue);color:white;border-radius:12px;width:38px;height:38px;font-size:28px}.brand-en{font-size:12px;letter-spacing:2px;margin-left:12px;color:var(--muted)}.allages{font-size:14px;color:var(--muted)}main{max-width:1230px;margin:0 auto;padding:46px 30px 36px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:800;color:var(--blue);margin:0 0 12px}h1{font-size:38px;letter-spacing:.03em;line-height:1.4;margin:0 0 10px}h2{font-size:23px;margin:0}.lead{color:var(--muted);margin:0;line-height:1.7}.edition{border-left:2px solid var(--blue);padding-left:18px;font-size:12px;letter-spacing:3px;color:var(--blue);line-height:1.6}.edition strong{font-size:28px;letter-spacing:2px}.data-banner{border:1px solid #dec9f2;background:#f4eaff;border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:14px;margin-bottom:26px}.data-banner>span{font-size:12px;font-weight:800;white-space:nowrap;color:#7140a5;border:1px solid #d8bcec;padding:4px 8px;border-radius:5px}.data-banner p{font-size:14px;color:#64467c;margin:0;line-height:1.7}.workspace{display:grid;grid-template-columns:325px 1fr;gap:32px;align-items:start}.filters{border:1px solid var(--line);border-radius:16px;background:white;padding:25px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.section-title h2{font-size:19px}.text-button{border:0;background:transparent;color:var(--muted);padding:6px;font-size:14px}.text-button:hover{color:var(--blue)}fieldset{padding:0;border:0;margin:0 0 28px;min-width:0}legend{font-weight:700;font-size:14px;margin-bottom:14px;display:flex;align-items:center;gap:9px}legend>span{font-size:12px;color:var(--blue)}.segmented{display:flex;background:#f5edfc;padding:4px;border-radius:9px}.segmented label{flex:1;position:relative;cursor:pointer}.segmented input{position:absolute;opacity:0}.segmented label span{display:block;text-align:center;padding:11px 4px;font-size:14px;border-radius:6px;color:var(--muted)}.segmented input:checked+span{background:#fff;color:var(--blue);box-shadow:0 1px 5px #39245512;font-weight:700}.segmented input:focus-visible+span{outline:2px solid var(--blue)}select{border:1px solid var(--line);padding:13px 12px;background:#fff;color:#392455;border-radius:8px;width:100%;font-size:14px}.hint{font-size:12px;color:var(--muted);margin:0 0 14px}.tags{display:flex;gap:8px;flex-wrap:wrap}.tag{border:1px solid var(--line);background:white;border-radius:7px;padding:8px 11px;color:#725386;font-size:14px}.tag:hover{border-color:var(--blue)}.tag[aria-pressed=true]{color:var(--blue);background:#f0dfff;border-color:#b58bdc}.primary{display:flex;justify-content:space-between;width:100%;border:0;color:white;background:var(--blue);padding:16px;border-radius:9px;font-weight:700;font-size:15px}.primary:hover{background:#6933aa}.filter-note{font-size:12px;color:var(--muted);line-height:1.7;margin:12px 0 0}.result-heading{display:flex;justify-content:space-between;align-items:center;margin:4px 0 12px}.result-heading .eyebrow{margin-bottom:6px}.sort-label{font-size:12px;color:var(--muted)}.summary{font-size:14px;color:var(--muted);margin:0 0 20px;line-height:1.7}.card{position:relative;display:grid;grid-template-columns:66px 1fr;gap:19px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:23px;margin-bottom:14px}.card.first{border:1px solid #b892df;box-shadow:0 5px 20px #8246cb08}.rank{background:#f5eaff;color:var(--blue);border-radius:9px;height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center}.rank small{font-size:10px;letter-spacing:1px}.rank strong{font-size:29px;line-height:1.2}.first .rank{background:var(--blue);color:#fff}.card h3{font-size:19px;line-height:1.6;margin:2px 0 6px;overflow-wrap:anywhere}.maker{font-size:13px;color:var(--muted);margin:0 0 13px}.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:17px}.card-tags span{font-size:12px;color:#755487;background:#faf7ff;padding:4px 8px;border-radius:4px}.card-tags span.matched{background:#f0dfff;color:var(--blue)}.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #eadcf6;padding-top:13px}.sales{font-size:12px;color:var(--muted)}.sales strong{font-size:23px;color:#452665;margin:0 4px 0 8px;font-variant-numeric:tabular-nums}.work-link{font-size:14px;text-decoration:none;font-weight:700}.sample-label{font-size:12px;color:#806790}.date{font-size:12px;margin:9px 0 0;color:var(--muted)}.ranking-note{font-size:12px;color:var(--muted);line-height:1.8;margin:18px 0}.empty{background:white;border:1px dashed #c9a5e5;border-radius:12px;text-align:center;padding:55px 22px;line-height:1.8}.empty h3{font-size:20px;margin:0 0 8px}.empty p{font-size:14px;color:var(--muted)}.manage{border-top:1px solid var(--line);margin-top:32px;padding-top:22px;font-size:14px}.manage summary{cursor:pointer;color:#684383}.manage-body{padding:10px 0;line-height:1.8;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.secondary,.upload{padding:10px 14px;background:white;border:1px solid #d1b4e7;border-radius:6px;font-size:14px;color:#62427e;text-decoration:none;cursor:pointer}.upload{position:relative;overflow:hidden}.upload input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.upload:focus-within{outline:2px solid var(--blue)}#import-status{color:#7140a5}footer{max-width:1170px;margin:0 auto;padding:22px 0 35px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:12px}footer>span{font-weight:800}footer p{margin:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.mobile{display:none}@media(max-width:900px){.workspace{grid-template-columns:280px 1fr;gap:20px}.filters{padding:20px}.card{grid-template-columns:45px 1fr;gap:12px;padding:18px}.rank{height:54px}.rank strong{font-size:23px}.card-bottom{flex-wrap:wrap}.brand-en{display:none}footer{margin:0 30px}}@media(max-width:680px){.mast{height:72px;padding:0 20px}.brand{font-size:20px}.allages{font-size:12px}.mark{width:32px;height:32px}main{padding:28px 18px}.intro{margin-bottom:24px}.edition{display:none}h1{font-size:30px}.mobile{display:block}.lead{font-size:14px}.data-banner{align-items:flex-start;flex-direction:column;gap:7px}.workspace{grid-template-columns:1fr}.filters{padding:22px}fieldset{margin-bottom:22px}.result-heading{margin-top:12px}.card h3{font-size:18px}.sales strong{font-size:22px}footer{margin:0 18px;gap:12px;flex-wrap:wrap}.sort-label{font-size:12px}.result-heading h2{font-size:21px}}@media(prefers-reduced-motion:no-preference){button,a{transition:background .15s,color .15s}}

/* Purple & white pixel theme. Shared by the selection page and guide. */
:root{font-family:"BIZ UDGothic","Yu Gothic UI","Meiryo",sans-serif;--pixel-shadow:#dfc8f2;--ink:#5b347d;--blue:#8246cb;--muted:#77618b;--line:#d9c5ef;background-color:#fcfaff;background-image:radial-gradient(#d9c2ef 1px,transparent 1px);background-size:12px 12px}
.mast{height:86px;border-bottom:3px solid #b58bdc;box-shadow:0 5px 0 #eee1f8;background:#fff}
.brand{letter-spacing:.06em;color:var(--ink)}
.mark{border-radius:0;border:2px solid #6933aa;background:#a574dc;box-shadow:3px 3px 0 #dec3f2;font-family:monospace}
.brand-en,.eyebrow,.edition,.rank{font-family:"Courier New",monospace}
.brand-en{color:#9369b5;font-weight:700}
.allages{color:#7b4c9f;background:#faf3ff;padding:8px 12px;border:1px dashed #c9a5e5}
.intro{padding:8px 0 6px}.intro h1{font-weight:900;color:#693a92;text-shadow:2px 2px 0 #ead9f7;letter-spacing:.06em}
.eyebrow{letter-spacing:2px;color:#8754b4;font-size:13px}.lead{color:#795990}
.edition{border:2px solid #bd92dc;border-radius:0;background:white;padding:12px 22px;box-shadow:4px 4px 0 var(--pixel-shadow);text-align:center;transform:rotate(3deg);color:#9562b9}.edition strong{color:#7945a6}
.data-banner{border:1px dashed #caa4e8;border-radius:0;background:#fbf7ff;box-shadow:3px 3px 0 #f0e5f9}
.data-banner>span{border:0;border-radius:0;color:#70438e;background:#efdefb}.data-banner p{color:#77548e}
.filters{position:relative;padding:47px 24px 24px;border:2px solid #bd96d8;border-radius:0;box-shadow:6px 6px 0 var(--pixel-shadow)}
.filters:before{content:"";position:absolute;left:0;right:0;top:0;height:23px;border-bottom:2px solid #bd96d8;background:repeating-linear-gradient(90deg,#ead9f7 0 6px,#f5ebfd 6px 12px)}
.filters:after{content:"";position:absolute;top:7px;right:10px;width:7px;height:7px;background:white;border:1px solid #b188d0;box-shadow:-13px 0 0 #fff,-26px 0 0 #fff}
.section-title h2{color:#704493}.section-title{margin-bottom:27px}legend{color:#694782}legend>span{display:grid;place-items:center;min-width:25px;height:23px;background:#f3e7fd;border:1px solid #e0c8f0;font-family:monospace}
.segmented{border:1px solid #e0c9f0;border-radius:0;background:#f8f0ff;gap:4px;padding:5px}.segmented label span{border-radius:0}.segmented input:checked+span{background:#9460ca;color:#fff;box-shadow:2px 2px 0 #d5b6ec}
select{border:2px solid #e0c9f0;border-radius:0;color:#654380;background:#fff}.tags{gap:9px}.tag{border-radius:0;border:1px solid #d9bdeb;background:#fff;box-shadow:2px 2px 0 #f1e5fa;color:#77528d;padding:8px 10px}.tag[aria-pressed=true]{color:white;background:#9a68cf;border-color:#8551bc;box-shadow:2px 2px 0 #d7b9ef}.tag:hover{background:#f3e7ff;border-color:#a779c9}.tag[aria-pressed=true]:hover{background:#8551bc}
.primary{background:#8d55c6;border:2px solid #713ba9;border-radius:0;box-shadow:4px 4px 0 #d7b9ef;min-height:54px;position:relative}.primary:hover{background:#7a43b5;transform:translate(-1px,-1px);box-shadow:5px 5px 0 #d7b9ef}.primary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #d7b9ef}.filter-note{margin-top:17px}
.result-heading h2{color:#684187}.sort-label{background:#fff;border:1px dashed #c6a4df;padding:6px 10px;color:#80549e}
.card,.card.first{border:2px solid #d2b0e9;border-radius:0;box-shadow:5px 5px 0 #ebdcf6;margin-bottom:19px;padding:23px;background:#fff}.card.first{border-color:#b18ad2;box-shadow:5px 5px 0 #ddc6ef}.card:after{content:"";position:absolute;right:9px;top:9px;width:4px;height:4px;background:#e4ccf4;box-shadow:-7px 0 0 #e4ccf4,0 7px 0 #e4ccf4}
.rank,.first .rank{border-radius:0;background:#f5e9fe;color:#8c56b7;border:1px solid #dfc4f1;box-shadow:3px 3px 0 #f1e6fa}.first .rank{background:#ab7cda;color:white;border-color:#9464c7}.rank small{font-size:12px}.rank strong{font-size:30px;letter-spacing:1px}.card h3{color:#604076}.card-tags span{border-radius:0;border:1px solid #edddf7;background:#faf5fe;color:#86639c}.card-tags span.matched{background:#ecdafa;color:#75419a;border-color:#d4afea}.card-bottom{border-top:2px dotted #e8d5f6}.sample-label{color:#866b99}
.empty{border:2px dashed #cca9e5;border-radius:0;box-shadow:5px 5px 0 #eddef8;color:#734a92}
.manage{padding:20px 22px;background:#ffffffd9;border:1px dashed #c9a3e3;margin-top:32px}.manage summary{font-weight:700;color:#80539f}.secondary,.upload{border-radius:0;border-color:#d4b3e9;box-shadow:2px 2px 0 #eddef8;color:#75518f}.secondary:hover,.upload:hover{background:#f9f0ff}
footer{border-top:2px dotted #c9a4e0;color:#8b6d9f}footer>span{color:#8555a5}
@media(max-width:900px){.filters{padding:44px 20px 22px}.card,.card.first{padding:18px}.rank strong{font-size:24px}}
@media(max-width:680px){.mast{height:75px;gap:12px;padding:0 18px}.brand{font-size:18px;gap:9px}.allages{max-width:105px;padding:5px 7px;line-height:1.6;text-align:center}.intro h1{font-size:30px}.filters{padding:45px 22px 23px}.workspace{gap:28px}.sort-label{font-size:12px;padding:5px 7px}.result-heading{gap:10px}.card,.card.first{padding:18px 15px;grid-template-columns:43px minmax(0,1fr)}.card h3{font-size:17px}.manage{padding:18px 15px}}
