:root{--bg:#f5f7fb;--card:#fff;--ink:#17243b;--sub:#5d6b82;--line:#dfe6f0;--accent:#2468d8;--accent-ink:#fff;--soft:#eaf1fd;--radius:14px}
@media (prefers-color-scheme:dark){:root{--bg:#10151f;--card:#18202e;--ink:#e8edf6;--sub:#9aa7bd;--line:#2a3447;--accent:#6aa2ff;--accent-ink:#0b1220;--soft:#1d2a44}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Noto Sans JP","Hiragino Sans",Meiryo,sans-serif;line-height:1.7}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
header.site{background:var(--card);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;flex-wrap:wrap}
.logo{font-weight:800;font-size:1.15rem;text-decoration:none;display:flex;align-items:center;gap:8px}
.logo svg{width:26px;height:26px;color:var(--accent)}
nav.top a{margin-left:16px;text-decoration:none;color:var(--sub);font-size:.92rem}
.hero{padding:36px 0 18px}
.hero h1{margin:0 0 6px;font-size:1.7rem}
.hero p{margin:0;color:var(--sub)}
.searchbar{display:flex;gap:10px;margin:18px 0 8px}
.searchbar input{flex:1;font:inherit;padding:13px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink)}
.searchbar input:focus,.ctl input:focus,.ctl select:focus{outline:2px solid var(--accent);outline-offset:1px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 22px}
.chip{padding:6px 14px;border:1px solid var(--line);border-radius:99px;background:var(--card);text-decoration:none;font-size:.88rem;color:var(--sub)}
.chip[aria-current=page]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.count{color:var(--sub);font-size:.9rem;margin:0 0 10px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;padding-bottom:40px}
.tile{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;transition:transform .12s,border-color .12s,box-shadow .12s}
.tile:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 18px #1a3a7014}
.tile svg{width:38px;height:38px;color:var(--ink)}
.tile span{font-size:.8rem;color:var(--sub);text-align:center;line-height:1.3}
.tile[hidden]{display:none}
.empty{display:none;text-align:center;color:var(--sub);padding:40px 0}
.crumbs{font-size:.84rem;color:var(--sub);padding:18px 0 4px}
.crumbs a{text-decoration:none}
h1.title{font-size:1.5rem;margin:6px 0 4px}
.lead{color:var(--sub);margin:0 0 20px}
.editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stage{position:sticky;top:12px}
.preview{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;width:100%;border-radius:10px;overflow:hidden;background-color:#fff;background-image:linear-gradient(45deg,#e6ebf3 25%,transparent 25%,transparent 75%,#e6ebf3 75%),linear-gradient(45deg,#e6ebf3 25%,transparent 25%,transparent 75%,#e6ebf3 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.preview{position:relative}
.preview svg{max-width:100%;height:auto}
.pvlabel{position:absolute;right:8px;bottom:6px;font-size:.75rem;color:var(--sub);background:#ffffffcc;padding:1px 8px;border-radius:99px}
.out{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn{font:inherit;font-weight:700;padding:11px 18px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer}
.btn.ghost{background:transparent;color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.toast{min-height:1.4em;margin:8px 0 0;font-size:.88rem;color:var(--sub)}
.group{border-top:1px solid var(--line);padding:14px 0 4px}
.group:first-child{border-top:0;padding-top:0}
.group[hidden],.row[hidden]{display:none}
.group h2{font-size:.82rem;color:var(--sub);margin:0 0 10px;letter-spacing:.04em}
.row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.row label{min-width:5.6em;font-size:.9rem}
.ctl input[type=range]{flex:1;min-width:120px;accent-color:var(--accent)}
.ctl input[type=color]{width:44px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:none}
.ctl select{font:inherit;padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.ctl output{min-width:3em;font-size:.84rem;color:var(--sub);text-align:right}
.swatches{display:flex;gap:6px}
.swatches button{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.code{width:100%;min-height:110px;font:12px/1.5 ui-monospace,Consolas,monospace;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);resize:vertical}
.related h2{font-size:1.1rem;margin:36px 0 12px}
.ad{margin:24px 0;text-align:center;color:var(--sub);font-size:.8rem}
.prose{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:30px 0}
.prose h2{font-size:1.05rem;margin:0 0 6px}
.prose p{margin:0;color:var(--sub);font-size:.92rem}
footer.site{border-top:1px solid var(--line);margin-top:40px;padding:24px 0;color:var(--sub);font-size:.85rem;text-align:center}
@media(max-width:820px){.editor{grid-template-columns:1fr}.stage{position:static}.preview{max-width:420px;margin:0 auto}.hero h1{font-size:1.4rem}nav.top a{margin-left:10px}}
@media(prefers-reduced-motion:reduce){.tile{transition:none}}
.row label.inl{min-width:0;display:flex;align-items:center;gap:4px;font-size:.84rem;color:var(--sub)}
.hero{background:linear-gradient(120deg,var(--soft),transparent 70%);border-radius:0 0 var(--radius) var(--radius);padding-left:16px;margin:0 -16px}
.tile svg{stroke-width:1.6}
.modes{background:var(--card);border-bottom:1px solid var(--line)}
.modes .wrap{display:flex;align-items:center;gap:12px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.modes span{font-size:.8rem;color:var(--sub)}
.modebar{display:flex;gap:6px;flex-wrap:wrap}
.modebar button{font:inherit;font-size:.86rem;padding:5px 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--sub);cursor:pointer}
.modebar button:hover{border-color:var(--accent);color:var(--accent)}
.modebar button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tile svg{box-sizing:content-box;padding:6px;transition:background .15s,color .15s,border-radius .15s}
[data-mode=cute] .tile svg{color:#ff5c8a;background:#ffe3ee;border-radius:50%;stroke-width:2.1;padding:8px}
[data-mode=cute] .tile [data-c],[data-mode=hand] .tile [data-c]{fill:currentColor;fill-opacity:.22}
[data-mode=stylish] .tile svg{color:#f2c14e;background:linear-gradient(135deg,#1b2540,#0b0f1c);border-radius:10px;stroke-width:1.3;stroke-linejoin:miter;stroke-linecap:butt;padding:8px}
[data-mode=stylish] .tile [data-c],[data-mode=glossy] .tile [data-c]{fill:currentColor;fill-opacity:.8}
[data-mode=hand] .tile svg{color:#3d3a52;background:#fff6df;border-radius:14px;stroke-width:1.9;padding:8px;filter:url(#rough-ui)}
[data-mode=glossy] .tile svg{color:#fff;background:linear-gradient(135deg,#7c5cff,#22c3f0);border-radius:12px;stroke-width:1.7;padding:8px;box-shadow:inset 0 2px 3px #ffffff80,0 5px 10px #5a4be655}
.hint{font-size:.78rem;color:var(--sub)}
.defs{position:absolute}
.illustration-thumb{width:100%;height:100%;object-fit:contain}
.tile .illustration-thumb{width:76px;height:60px}
.illustration-stage{max-width:850px;margin:20px auto}
.illustration-stage .preview{aspect-ratio:16/10;padding:24px}
.preview-notice{margin:0;padding:10px;text-align:center;background:#fff1cf;color:#624400}
.illustration-palette{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px}.illustration-palette h2{font-size:14px;margin:0;width:100%}.illustration-palette label{display:flex;align-items:center;gap:5px;font-size:13px}.illustration-palette input{width:42px;height:36px;border:1px solid var(--line);border-radius:7px;padding:2px;background:var(--card)}
.illustration-page .modes{display:none}

.part-editor{margin:14px 0;padding:14px;border:1px solid #d7e1ec;border-radius:12px;background:#f7f9fc;color:#263b53}.part-editor p{font-size:12px;line-height:1.7;margin:0 0 10px}.part-editor select{width:100%;max-width:100%;padding:9px;border:1px solid #c4d0df;border-radius:7px;background:white;color:#263b53}.part-colors{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}.part-colors label{display:flex;align-items:center;gap:7px;font-size:12px}.part-colors input[type=color]{width:42px;height:34px;border:1px solid #c4d0df;border-radius:6px;padding:2px;background:white}.part-colors span{font:11px monospace}.part-actions{display:flex;gap:8px;flex-wrap:wrap}.part-actions button{font-size:12px;padding:7px 10px}.part-editor [role=status]{display:block;margin-top:10px;font-size:12px}.part-stage{width:100%;min-height:190px}.pv:has(.part-stage){display:block}.part-stage>svg,.illustration-stage .preview>svg{width:100%;height:auto;max-height:440px;cursor:pointer}.part-stage>svg{min-height:190px}.part-actions button:disabled{opacity:.4;cursor:default}

.ad{width:100%;min-width:0;clear:both}.ad>p{font-size:12px;color:#666;margin:0 0 8px}.ad-preview{border:1px dashed #aab4c3;background:#f4f6f9;padding:36px 16px;box-sizing:border-box}