:root{font-family:'Yu Gothic','Meiryo',sans-serif;color:#504640;background:#f7f4ef;--accent:#6e816a;--line:#e4ddd3}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ae745c;outline-offset:4px}header{max-width:1240px;margin:auto;padding:23px 32px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{font-weight:700;font-size:16px;letter-spacing:1px}.brand span{color:#a18c75;margin-right:9px}header a{color:#847567;font-size:11px}main{max-width:1240px;margin:auto;padding:30px 32px 45px}.eyebrow{font-size:10px;letter-spacing:3px;color:#aa8f78}h1{font-size:27px;letter-spacing:1px;margin:12px 0 8px}.lead{font-size:12px;color:#8b8077;margin:0 0 28px;line-height:1.9}.layout{display:grid;grid-template-columns:435px 1fr;gap:35px;align-items:start}.preview-panel{position:sticky;top:20px;background:#fff;border:1px solid var(--line);border-radius:21px;padding:21px}.preview-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#a18b78;margin-bottom:15px;letter-spacing:1px}.pill{font-size:10px;background:#eaf0e5;border-radius:20px;padding:5px 10px;color:#6a8061}.pill.dark{background:#ede5f3;color:#8a719b}.artboard{aspect-ratio:1;border-radius:13px;overflow:hidden;background:#f1eddf;background-image:linear-gradient(45deg,#e7e2d8 25%,transparent 25%),linear-gradient(-45deg,#e7e2d8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e7e2d8 75%),linear-gradient(-45deg,transparent 75%,#e7e2d8 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.artboard canvas{width:100%;height:100%;display:block}.preview-caption{display:flex;justify-content:space-between;margin:13px 0 18px;font-size:12px}.preview-caption small{color:#96867b;font-size:10px}.segments{display:flex;border-radius:10px;padding:4px;background:#f0ede7;gap:4px}.segments button{flex:1;border:0;background:none;padding:10px 5px;border-radius:7px;font-size:12px}.segments button[aria-pressed=true]{background:white;box-shadow:0 2px 4px #44352b0c;color:#52674d;font-weight:700}.settings-line{display:flex;justify-content:space-between;align-items:center;margin:18px 0;font-size:11px}.settings-line label{display:flex;gap:7px;align-items:center}.settings-line span{font-size:10px;color:#a0958b}input{accent-color:#718469}.download{display:block;width:100%;border:0;border-radius:10px;padding:15px;background:#6e816a;color:white;font-size:13px;font-weight:700}.download:disabled{opacity:.55;cursor:wait}.hint{font-size:10px;color:#9c9187;line-height:1.8;margin:12px 0 0}.error{color:#a6534d}section.editor{padding-top:3px}h2{font-size:15px;margin:0 0 15px}h2 span{display:inline-grid;place-items:center;width:24px;height:24px;background:#ece8df;color:#a38c73;border-radius:50%;font-size:11px;margin-right:10px}.race-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.race-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:7px 6px 11px;font-size:12px;min-width:0}.race-card canvas{display:block;width:100%;height:101px;object-fit:contain}.race-card[aria-pressed=true]{background:#edf1e7;border:2px solid #829477;padding:6px 5px 10px}.race-card small{display:block;color:#a1978a;font-size:9px;margin-top:4px}.race-description{font-size:11px;color:#9a8a7d;margin:13px 0 24px;line-height:1.8;min-height:20px}.mode{max-width:310px;margin-bottom:14px}.mode button[data-mode=dark][aria-pressed=true]{color:#826292}.palette-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:17px 0 12px}.palette-head p{font-size:11px;color:#938579;margin:0}.palette-head span{font-size:10px;white-space:nowrap;color:#a8998d}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.swatch{position:relative;border:1px solid var(--line);border-radius:9px;background:#fff;padding:6px 3px 7px;font-size:9px}.swatch i{display:block;height:27px;margin:0 3px 6px;border-radius:5px;background:var(--skin);border:1px solid #00000008}.swatch[aria-pressed=true]{border:2px solid #7b906e;padding:5px 2px 6px;background:#f0f4e9}.swatch[aria-pressed=true]:after{content:'✓';position:absolute;right:7px;top:7px;color:#fff;text-shadow:0 1px 3px #0009;font-size:15px}.palette-note{font-size:10px;color:#a19083;line-height:1.8;margin:13px 0 22px}.bg-options{display:flex;gap:10px}.bg-options button{width:29px;height:29px;border-radius:50%;background:var(--bg);border:3px solid white;box-shadow:0 0 0 1px #ded6cb}.bg-options button[aria-pressed=true]{box-shadow:0 0 0 2px #7b906e}.research{margin-top:30px;background:#eeebe3;border-radius:12px;padding:16px 19px;font-size:11px;line-height:1.9;color:#918175}.research summary{cursor:pointer;color:#6e635a;font-weight:700}.research a{color:#64765f}.research p{margin:12px 0 0}.bottom-note{font-size:10px;color:#9e9389;line-height:1.9;margin:27px 0 0}.compare{margin-top:35px;border-top:1px solid var(--line);padding-top:25px}.compare>p{font-size:11px;color:#9c8d7f}.compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.compare-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;font-size:11px}.compare-card canvas{width:100%;display:block}.compare-card small{display:block;font-size:9px;color:#9b8f83;margin-top:5px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:10px;background:#51664e;color:#fff;font-size:12px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1}@media(max-width:1000px){.layout{grid-template-columns:minmax(280px,380px) 1fr;gap:22px}.swatches{grid-template-columns:repeat(4,1fr)}.race-card canvas{height:78px}.race-card small{font-size:8px}.compare-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){header{padding:20px}.layout{grid-template-columns:1fr}.preview-panel{position:static;max-width:430px;width:100%;margin:auto}.editor{margin-top:10px}.race-card canvas{height:108px}main{padding:22px 18px}.lead{font-size:11px}h1{font-size:23px}.swatches{grid-template-columns:repeat(6,1fr);gap:7px}.swatch{font-size:8px}.compare-grid{gap:8px}.compare-card{padding:6px;font-size:10px}.brand{font-size:13px}.race-grid{gap:8px}.compare-card small{font-size:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

[hidden]{display:none!important}.artboard{position:relative}.loading-cover{position:absolute;inset:0;display:grid;place-items:center;background:#faf5ebde;color:#786d60;font-size:13px}.race-grid{grid-template-columns:repeat(4,1fr)}.race-card canvas{height:auto;aspect-ratio:1}.race-card small{font-size:8px}.mode-row{display:flex;gap:15px;align-items:center;margin-bottom:22px}.mode-row .mode{width:230px;flex-shrink:0;margin:0}.mode-row small{font-size:10px;line-height:1.8;color:#938579}.edit-tabs{display:flex;border-bottom:1px solid var(--line);gap:5px}.edit-tabs button{flex:1;background:none;border:0;border-radius:9px 9px 0 0;padding:13px 10px;font-size:13px}.edit-tabs button[aria-selected=true]{background:#e8eddf;color:#53634c;font-weight:bold;box-shadow:inset 0 -3px #7d916d}.edit-panel{min-height:335px;padding:24px 0 10px}.edit-panel h2 small{font-weight:normal;font-size:10px;color:#a19387;margin-left:9px}.hair-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.hair-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:5px 5px 10px;font-size:12px}.hair-card canvas{display:block;width:100%;height:100px;object-fit:contain}.hair-card[aria-pressed=true]{background:#edf1e7;box-shadow:inset 0 0 0 2px #829477}.hair-card:disabled{opacity:.5;cursor:wait}.spaced{margin-top:28px}.sclera-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sclera-grid button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px;font-size:11px}.sclera-grid button[aria-pressed=true]{box-shadow:inset 0 0 0 2px #829477;background:#edf1e7}.sclera-grid i{display:inline-block;vertical-align:middle;margin-right:8px;width:25px;height:18px;background:var(--eye-white);border:1px solid #60544e;border-radius:50%;position:relative}.sclera-grid i:after{content:'';position:absolute;left:8px;top:2px;width:9px;height:12px;border-radius:50%;background:#967ab4}.palette-head h2{margin:0}.autosave{font-size:10px;color:#9a8a7d}.icon-check{border-top:1px solid var(--line);margin-top:18px;padding-top:15px;display:flex;gap:15px;align-items:center}.icon-check canvas{width:80px;height:80px;border-radius:15px;background:#eee9df}.icon-check p{font-size:11px;line-height:1.9;color:#8d8072}.icon-check span{font-size:10px;color:#a89b90}.compare-card{cursor:pointer;font:inherit;font-size:11px}.compare-card[aria-pressed=true]{border-color:#829477;background:#edf1e7}.compare-grid{grid-template-columns:repeat(4,1fr)}.research{margin-top:18px}.swatch{min-height:49px}.bg-options button{width:36px;height:36px}.error{color:#a6534d}@media(max-width:1000px) and (min-width:761px){.race-grid{grid-template-columns:repeat(2,1fr)}.race-card canvas{height:75px}.mode-row{display:block}.mode-row small{display:block;margin-top:8px}.hair-card canvas{height:75px}.sclera-grid button{padding:10px 3px;font-size:10px}}@media(max-width:760px){.race-grid{grid-template-columns:repeat(4,1fr)}.race-card canvas{height:auto}.race-card small{display:none}.editor{margin-top:15px}.preview-panel{padding:16px}.icon-check{display:none}.compare-grid{grid-template-columns:repeat(2,1fr)}.hair-card canvas{height:100px}.mode-row{gap:10px}.mode-row .mode{width:200px}.edit-panel{min-height:320px}.swatches{grid-template-columns:repeat(4,1fr)}}@media(max-width:430px){.race-grid{grid-template-columns:repeat(2,1fr)}.race-card canvas{height:78px}.mode-row .mode{width:185px}.hair-card canvas{height:85px}.sclera-grid button{padding:10px 3px;font-size:10px}}
.export-preview{font-size:11px;margin:12px 0;color:#786c60}.export-preview summary{cursor:pointer}.export-preview img{display:block;width:160px;max-width:100%;margin:10px auto;background:#f0ede7}.export-preview a{display:block;text-align:center;color:#586e51;text-decoration:underline;cursor:pointer}

.race-grid,.compare-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.race-card small{display:none}.hair-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.hair-card canvas{height:83px}.face-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.face-options button{border:1px solid var(--line);border-radius:10px;background:white;padding:14px 5px;font-size:11px}.face-options button[aria-pressed=true]{box-shadow:inset 0 0 0 2px #829477;background:#edf1e7}.face-options span{display:block;font-size:25px;margin-bottom:5px;color:#735e55}.face-options [data-eye-shape=soft] span{transform:scaleY(.88) rotate(4deg)}.face-options [data-eye-shape=cat] span{transform:scaleY(.8) rotate(-4deg)}#swatches .swatch{font-size:13px;font-weight:700}#swatches .swatch i{height:36px}.skin-warning{font-weight:600;color:#9b6c47}@media(max-width:1050px){.hair-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.race-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.race-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.compare-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.race-card{font-size:10px}.race-card canvas{height:auto}}@media(max-width:430px){.race-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.race-card canvas{height:70px}}

#swatches .swatch small{display:block;font-size:8px;font-weight:normal;color:#a18168;margin-top:2px}

.face-options canvas{display:block;max-width:100%;width:100px;height:46px;object-fit:contain;margin:0 auto 8px}.face-options [data-mouth] canvas{width:65px;height:43px}

.game-faces{grid-template-columns:repeat(4,minmax(0,1fr))}.game-faces button{padding:12px 3px}.game-faces canvas{width:100%;height:auto;aspect-ratio:240/127}.original-face{font-size:11px;color:#857467}.original-face summary{cursor:pointer}@media(max-width:430px){.game-faces{gap:6px}.game-faces button{font-size:10px}}
.face-options [data-eye-thumb]{width:100%;height:auto;aspect-ratio:1}.original-face[open]>summary{font-weight:bold;color:#504640}

.edit-actions,.save-row,.saved-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.edit-actions button,.save-row button,.saved-row button{border:1px solid var(--line);background:#fffdf8;color:#66584e;border-radius:8px;padding:9px 12px;font:inherit;font-size:12px;cursor:pointer}.edit-actions button:disabled,.save-row button:disabled{opacity:.4;cursor:default}.saved-looks{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:20px}.saved-looks summary{cursor:pointer;font-size:13px}.save-row input{min-width:0;flex:1;border:1px solid var(--line);border-radius:8px;padding:10px}.saved-row button:first-child{flex:1;text-align:left}

.two-tone-box{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13px}#swap-hair-colors{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px;margin-bottom:12px;color:inherit;cursor:pointer}

.proportion-study{padding:14px;border:1px solid var(--line);border-radius:12px;margin-top:16px;font-size:13px}.proportion-study summary{cursor:pointer}.proportion-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.proportion-grid figure{margin:0;background:#faf5eb;border-radius:12px;padding:8px;text-align:center}.proportion-grid img{width:100%;display:block}.proportion-grid figcaption{padding:8px;font-size:12px}

.hair-card small{display:block;font-size:9px;font-weight:normal;color:#8b7f70;margin-top:4px}.hair-filter{margin-bottom:14px}#hair-style-source{font-size:11px;color:#6b805b}.hair-card[hidden]{display:none}

.hair-search{display:flex;gap:8px;margin:12px 0}.hair-search input{flex:1;min-width:0;width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;color:inherit;font-size:12px}.hair-search button{flex-shrink:0;border:1px solid var(--line);border-radius:9px;background:#f0ede7;padding:8px;font-size:10px}.hair-card[hidden],.hair-search button[hidden]{display:none}

.accessory-options{flex-wrap:wrap}.costume-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.costume-grid button{padding:18px 10px;border:1px solid #d6d9cd;border-radius:12px;background:#fff;color:inherit}.costume-grid button[aria-pressed="true"]{background:#e5ecdd;outline:2px solid #8c9d7f}.edit-tabs{overflow-x:auto}.edit-tabs button{white-space:nowrap}

.costume-grid canvas{display:block;width:100%;max-width:150px;aspect-ratio:1;margin:0 auto 5px}.costume-grid button{padding:8px}