* { box-sizing: border-box; }
body { margin: 0; background: #f4efe5; color: #48513b; font-family: "Avenir Next", Avenir, ui-rounded, system-ui, sans-serif; font-size: 15px; line-height: 1.55; }
main { max-width: 430px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom)); }
.icon-preview { display: grid; justify-items: center; gap: 6px; margin-bottom: 22px; font-size: 12px; }
.icon-preview img { border-radius: 24px; box-shadow: 0 8px 20px #6c634626; }
h1 { margin: 0; text-align: center; font-size: 27px; line-height: 1.2; letter-spacing: -0.8px; }
.intro { text-align: center; color: #737963; margin: 12px 0 24px; }
ol { padding-left: 27px; margin: 0; }
li { padding-left: 5px; margin-bottom: 16px; }
li::marker { color: #727b4d; font-weight: 700; }
.profile-note { padding: 14px; border-radius: 14px; background: #e7e9d9; font-size: 13px; margin-top: 23px; }
details { border-top: 1px solid #d8dcc8; margin-top: 22px; padding-top: 10px; font-size: 13px; }
summary { min-height: 44px; cursor: pointer; padding: 10px 0; font-weight: 650; }
label { display: block; margin: 12px 0 5px; font-weight: 650; }
input { width: 100%; min-height: 44px; border: 1px solid #cbd1b8; background: #faf8f1; border-radius: 9px; color: inherit; padding: 10px; font: inherit; }
button { min-height: 44px; width: 100%; margin-top: 10px; border: 0; border-radius: 10px; background: #e7cc78; color: #414b31; cursor: pointer; font: inherit; font-weight: 650; }
#icon-copy-status { min-height: 20px; }
.back { display: block; width: fit-content; margin: 16px auto 0; min-height: 44px; padding: 10px; color: #616d45; font-size: 14px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid #69764c; outline-offset: 3px; }