:root{color-scheme:light;--ink:#24202a;--muted:#726b79;--pink:#f52687;--yellow:#ffe600;--blue:#00b9ed}
.heading,nav{flex-wrap:wrap}
select{font:inherit;max-width:145px;padding:9px 8px;border:1px solid #dedbe2;border-radius:7px;color:var(--ink);background:#fff}select:focus-visible{outline:3px solid var(--blue);outline-offset:2px}.controls{gap:10px!important}@media(max-width:900px){header{flex-wrap:wrap}.controls{margin-left:auto}}@media(max-width:600px){.controls{width:100%;display:grid!important;grid-template-columns:1fr 1fr}.controls label,.controls select{width:100%;max-width:none}.controls .primary{grid-column:1/-1;justify-self:end}}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#fafafa;font:14px "Yu Gothic","Meiryo",sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #008fdf;outline-offset:4px}button:disabled{cursor:default;opacity:.4}input{accent-color:#f52687}
header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:24px;max-width:1200px;margin:auto;padding:20px 24px;background:#fafafaf5;backdrop-filter:blur(8px);border-bottom:1px solid #e5e2e8}.heading{display:flex;align-items:center;gap:24px}h1{margin:0;font-size:24px;font-weight:900;white-space:nowrap}h1 span{color:var(--pink)}nav{display:flex;gap:16px;font-size:11px;color:var(--muted)}.controls{display:flex;align-items:center;gap:24px}.controls label{font-size:12px;display:flex;align-items:center;gap:6px;white-space:nowrap}.primary{display:flex;align-items:center;justify-content:center;gap:22px;border:2px solid var(--ink);background:var(--yellow);border-radius:10px;padding:11px 18px;font-size:13px;font-weight:800;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}.primary:hover{translate:-1px -1px;box-shadow:4px 4px 0 var(--ink)}.primary:active{translate:2px 2px;box-shadow:1px 1px 0 var(--ink)}.primary span{font-size:20px;line-height:1}
main{max-width:1200px;padding:20px 24px 28px;margin:auto}.face-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.face-card{min-width:0;padding:10px 12px;background:#fff;border:1px solid #dedbe2;border-radius:12px;transition:border-color .15s,box-shadow .15s}.face-card.is-pinned{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}.card-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;min-height:24px}.face-number{font:700 11px Consolas,monospace;color:var(--muted);margin-right:auto}.pin-label{display:flex;align-items:center;gap:4px;font-size:11px;cursor:pointer}.pin-label input{margin:0}.icon-button{display:grid;place-items:center;width:26px;height:26px;border:1px solid #e4e0e8;border-radius:6px;background:#fff;color:var(--ink);font-size:18px;line-height:1}.icon-button:hover{background:#fff9c9;border-color:var(--ink)}.portrait-button{display:block;padding:0;border:0;background:transparent;position:relative;width:min(100%,160px);margin:auto;border-radius:7px;overflow:hidden;cursor:zoom-in}.portrait-button svg{display:block;width:100%;height:auto}.portrait-button:after{content:"＋";position:absolute;bottom:6px;right:6px;border-radius:5px;background:#ffffffdb;color:var(--ink);font-size:12px;width:20px;height:20px;display:grid;place-items:center;opacity:0;transition:opacity .15s}.portrait-button:hover:after,.portrait-button:focus-visible:after{opacity:1}.eye-label{text-align:center;margin:8px 0 0;font-size:11px;color:#615a69;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.portrait-button.is-new{animation:faceArrival .18s ease-out}
dialog{width:min(760px,calc(100% - 32px));max-height:calc(100svh - 32px);border:2px solid var(--ink);border-radius:16px;padding:22px;box-shadow:8px 8px 0 #ffe600;overflow:auto}dialog::backdrop{background:#24202a88;backdrop-filter:blur(3px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}.dialog-heading h2{font-size:18px;margin:0}.dialog-heading .icon-button{width:32px;height:32px;font-size:23px}.detail-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}#detailPortrait svg{width:100%;height:auto;display:block;border-radius:9px}dl{margin:0;display:grid;grid-template-columns:75px minmax(0,1fr);gap:0;font-size:12px}dt,dd{margin:0;padding:7px 0;border-bottom:1px solid #efecf1}dt{color:var(--muted)}dd{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}.color-swatch{width:14px;height:14px;border-radius:3px;border:1px solid #24202a25;flex:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes faceArrival{from{opacity:.5;transform:scale(.97)}to{opacity:1;transform:none}}
@media(min-width:901px) and (max-height:900px){.portrait-button{width:min(100%,160px,calc((100svh - 420px)/3 * .857))}}
@media(max-width:900px){header{padding:16px;gap:16px}.heading{gap:14px}nav{gap:10px}.controls{gap:14px}.face-grid{grid-template-columns:repeat(3,minmax(0,1fr))}main{padding:16px}.face-card{padding:10px}}
@media(max-width:600px){header{align-items:stretch;flex-direction:column;gap:14px}.heading{justify-content:space-between}h1{font-size:22px}.controls{justify-content:space-between}.primary{padding:9px 14px;gap:14px;font-size:12px}.face-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.face-card{padding:9px}.portrait-button{width:100%}.card-top{gap:5px}.eye-label{font-size:10px}.detail-layout{grid-template-columns:1fr}#detailPortrait{width:min(260px,100%);margin:auto}dialog{padding:18px}.detail-layout{gap:18px}dl{font-size:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.photo-label{font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif!important;font-size:14px!important;white-space:nowrap;margin-top:7px!important}.portrait-button.is-new .emoji-layer{animation:emojiPartIn .32s cubic-bezier(.2,1.4,.3,1) both}.portrait-button.is-new [data-emoji-part="eyes"]{animation-delay:.04s}.portrait-button.is-new [data-emoji-part="mouth"]{animation-delay:.08s}.portrait-button.is-new [data-emoji-part="body"]{animation-delay:.04s}@keyframes emojiPartIn{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
.portrait-button{aspect-ratio:6/7;background:#f0edf2}.portrait-button:disabled{opacity:1;cursor:default}.photo-label{text-align:center;margin:8px 0 0;font:10px Consolas,monospace;color:#726b79}.is-loading .portrait-button{opacity:.5}.is-loading .portrait-button:before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(110deg,transparent 25%,#ffffffb0 50%,transparent 75%);background-size:200% 100%;animation:photoLoading 1s linear infinite}.result-status{margin:0 auto 12px;padding:0 24px;max-width:1200px;color:#b71867;font-size:12px;text-align:center}.result-status:empty{display:none}footer{max-width:1200px;margin:0 auto 14px;padding:0 24px;font-size:10px;color:var(--muted)}.original-photo{display:inline-block;margin-top:20px;font-size:12px}@keyframes photoLoading{from{background-position:150% 0}to{background-position:-50% 0}}@media(max-width:600px){.controls{justify-content:flex-end}} 

/* Match the joke card’s paper-and-ink styling. */
body{background:#fff;background-image:radial-gradient(#24202a12 1px,transparent 1.5px);background-size:18px 18px}header{background:#fffffff5;border-bottom:3px solid var(--ink)}.face-card{border:2px solid var(--ink);box-shadow:3px 3px 0 #ffe600;border-radius:10px}.face-card.is-pinned{border-color:var(--pink);box-shadow:3px 3px 0 var(--pink)}