*{box-sizing:border-box}
body{font:16px/1.4 -apple-system,system-ui,sans-serif;margin:0;padding:env(safe-area-inset-top) 16px 24px;background:#f4f4f6;color:#111}
main{max-width:420px;margin:0 auto}
h1{font-size:1.5rem;margin:24px 0 12px}
label{display:block;margin:12px 0 4px;font-size:.85rem;color:#555}
input,select{width:100%;padding:10px;font-size:16px;border:1px solid #ccc;border-radius:8px;background:#fff}
.row{display:flex;gap:10px}.row>*{flex:1}
button,.btn{display:block;width:100%;margin-top:20px;padding:12px;font-size:16px;border:0;border-radius:10px;background:#111;color:#fff;text-align:center;text-decoration:none}
.card{background:#fff;border-radius:16px;padding:16px;margin-top:24px;text-align:center}
canvas{width:100%;max-width:340px;height:auto;image-rendering:pixelated}
.name{font-size:1.3rem;font-weight:600;margin:8px 0 0}
.hint{background:#fff8e1;border-radius:10px;padding:10px;font-size:.85rem;margin-top:16px;display:none}
.err{color:#b00020}
h2{font-size:1.1rem;margin:24px 0 0}
.look{display:flex;gap:14px;align-items:flex-start;margin-top:8px}

.opts{flex:1}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{margin:0;width:42px;height:42px;padding:0;border-radius:50%;border:2px solid #ccc;position:relative}
.swatches button::after{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--fg)}
.swatches button.on{border-color:#111;box-shadow:0 0 0 2px #fff inset}
.seg{display:flex}
.seg button{margin:0;padding:8px 4px;font-size:14px;background:#fff;color:#111;border:1px solid #ccc;border-radius:0}
.seg button:first-child{border-radius:8px 0 0 8px}.seg button:last-child{border-radius:0 8px 8px 0}
.seg button.on{background:#111;color:#fff;border-color:#111}
details{margin-top:12px}summary{font-size:.9rem;color:#555}

input[type=color]{height:44px;padding:2px}
.cardpage{--fg:#111;--bg:#fff;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:0;background:var(--bg);color:var(--fg)}
.cardpage .stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:520px;padding:24px;padding-top:max(24px,env(safe-area-inset-top))}
.cardpage canvas{width:min(100%,440px);border-radius:28px}
.cardpage .name{font-size:1.6rem;font-weight:700;letter-spacing:-.01em;margin-top:20px;text-align:center}
.cardpage footer{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 24px calc(20px + env(safe-area-inset-bottom))}
.cardpage .hint{margin:0;background:none;padding:0;font-size:.8rem;opacity:.6}
.cardpage .again{font-size:.8rem;color:var(--fg);opacity:.7;text-decoration:none;border:1px solid currentColor;border-radius:999px;padding:6px 14px}
.look canvas{width:130px;height:130px;flex:none;border-radius:10px}
.opts{flex:1}
.indexpage{--fg:#111;--bg:#fff;min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--fg);transition:background .25s,color .25s}
.indexpage label,.indexpage h1,.indexpage h2,.indexpage summary{color:var(--fg)}
.indexpage label{opacity:.75}
.indexpage .look canvas{border:0;border-radius:14px}
.indexpage .swatches button.on{border-color:var(--fg)}
.indexpage button:not(.swatches button):not(.seg button){background:var(--fg);color:var(--bg)}
.indexpage .seg button{border-color:var(--fg);background:transparent;color:var(--fg)}
.indexpage .seg button.on{background:var(--fg);color:var(--bg)}
.indexpage input{border-color:color-mix(in srgb,var(--fg) 35%,transparent)}