.skn { --skn-ink: #243c36; --skn-accent: #825d30; box-sizing: border-box; max-width: 1080px; margin: 32px auto; padding: clamp(24px, 5vw, 64px); border: 1px solid #dedbd0; border-radius: 12px; background: #faf8f1; color: var(--skn-ink); font-family: system-ui, sans-serif; line-height: 1.7; }
.skn *, .skn *::before, .skn *::after { box-sizing: inherit; }
.skn .skn-brand { color: var(--skn-accent); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.skn h2 { margin: 18px 0; color: var(--skn-ink); font-family: Georgia, 'Yu Mincho', serif; font-size: clamp(30px, 5vw, 52px); line-height: 1.18; font-weight: 400; }
.skn h2 span { color: var(--skn-accent); }
.skn .skn-form { margin: 32px 0 20px; }
.skn label { display: block; margin-bottom: 8px; font-weight: 650; }
.skn .skn-input-row { display: flex; gap: 12px; }
.skn .skn-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.skn .skn-pronunciation-field { grid-column: 1 / -1; }
.skn .skn-optional { font-weight: 400; font-size: 12px; }
.skn select { width: 100%; min-height: 48px; padding: 10px; border: 1px solid #817e72; border-radius: 6px; background: #fff; color: #243c36; font: inherit; }
.skn select:focus-visible { outline: 3px solid #996d32; outline-offset: 3px; }
.skn .skn-result-disclaimer { border-top: 1px solid #dedbd0; margin-top: 24px; padding-top: 16px; font-size: 13px; font-weight: 600; }
.skn .skn-katakana, .skn .skn-caution { font-size: 13px; line-height: 1.7; }
.skn .skn-caution { border-top: 1px solid #e8e3d8; padding-top: 12px; color: #565e55; }
.skn .skn-unavailable { font-family: Georgia, serif; font-size: 23px; line-height: 1.4; margin: 26px 0; }
.skn input { min-width: 0; flex: 1; width: 100%; border: 1px solid #817e72; border-radius: 6px; padding: 14px; background: #fff; color: #243c36; font: inherit; }
.skn button { padding: 14px 24px; border: 1px solid #c85d4a; border-radius: 6px; background: #c85d4a; color: #fff; font: inherit; cursor: pointer; }
.skn button:hover { background: #ae4c3b; }
.skn button:disabled { opacity: .6; cursor: not-allowed; }
.skn .skn-consent { font-size: 13px; font-weight: 400; margin-bottom: 18px; }
.skn .skn-consent input[type="checkbox"] { width: auto; margin-right: 8px; padding: 0; }
/* Match theme input[type=text] specificity without affecting other forms. */
.skn input[type="text"] { border: 1px solid #817e72; border-radius: 6px; padding: 14px; background: #fff; color: #243c36; font: inherit; }
.skn input[type="text"]:focus-visible { outline: 3px solid #996d32; outline-offset: 3px; }
.skn input:focus-visible, .skn button:focus-visible { outline: 3px solid #996d32; outline-offset: 3px; }
.skn .skn-help { margin: 10px 0; color: #565e55; font-size: 13px; }
.skn .skn-notice { padding: 14px 18px; border-left: 3px solid #99703c; background: #efe9dc; font-size: 13px; }
.skn .skn-status { font-weight: 600; overflow-wrap: anywhere; }
.skn .skn-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.skn .skn-card { padding: 22px; border: 1px solid #dedbd0; border-radius: 8px; background: #fffefa; overflow-wrap: anywhere; }
.skn .skn-type { margin: 0; color: var(--skn-accent); font-size: 17px; }
.skn .skn-kanji { margin: 28px 0 20px; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: clamp(40px, 5vw, 56px); letter-spacing: .08em; line-height: 1.4; }
.skn .skn-reading { font-weight: 650; }
.skn .skn-meaning { font-size: 14px; }
@media (max-width: 760px) { .skn .skn-results, .skn .skn-options { grid-template-columns: 1fr; } .skn .skn-input-row { flex-direction: column; } .skn button { width: 100%; } .skn .skn-card { padding: 24px 20px; } .skn .skn-reading, .skn .skn-meaning { font-size: 15px; } }
.skn-local [hidden] { display: none !important; }
.skn-local .skn-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.skn-local .skn-kanji { font-size: clamp(28px, 4vw, 44px); overflow-wrap: anywhere; }
.skn-local .skn-confirm { padding: 20px; margin: 20px 0; border: 1px solid #c8c4b7; border-radius: 8px; background: #f0ede3; }
.skn-local .skn-form > label, .skn-local .skn-options label { margin-bottom: 18px; }
.skn-local .skn-consent { display: flex; align-items: center; gap: 8px; }
.skn-local .skn-consent input { flex: 0 0 auto; }
@media (max-width: 760px) { .skn-local .skn-results { grid-template-columns: 1fr; } }

/* Keep IPA guidance directly under its input, including on desktop. */
.skn-local .skn-options { grid-template-columns: minmax(0, 1fr); }
.skn-local .skn-language-help { display: block; font-weight: 400; }
.skn-local .skn-pronunciation-field label { margin-bottom: 0; }
.skn-local .skn-pronunciation-attention { color: #a32424; font-weight: 700; }

/* Introduction examples: four columns on desktop, two on mobile. */
.skn .skn-introduction h2 { max-width: 760px; }
.skn .skn-introduction h3 { margin: 40px 0 8px; font-family: Georgia, 'Yu Mincho', serif; font-size: 28px; font-weight: 400; line-height: 1.3; }
.skn .skn-example-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0; padding: 0; list-style: none; }
.skn .skn-example { min-width: 0; margin: 0; padding: 20px 10px; border: 1px solid #dedbd0; border-radius: 8px; background: #fffefa; text-align: center; }
.skn .skn-example-label { margin: 0; color: var(--skn-accent); font-size: 15px; font-weight: 650; }
.skn .skn-example-kanji { margin: 16px 0 10px; font-family: 'Yu Mincho', 'Hiragino Mincho ProN', serif; font-size: clamp(23px, 3vw, 32px); line-height: 1.5; overflow-wrap: anywhere; }
.skn .skn-example-reading { margin: 0; color: #565e55; font-size: 12px; overflow-wrap: anywhere; }
.skn .skn-example-set h4 { margin: 24px 0 0; font-size: 18px; font-weight: 650; }
@media (max-width: 760px) { .skn .skn-example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .skn .skn-example { padding: 18px 8px; } .skn .skn-example-kanji { font-size: clamp(21px, 5.5vw, 30px); } }

/* Shared SHIRUMICHI registration and the generator's email display gate. */
.skn [hidden] { display: none !important; }
.skn-local .skn-results.skn-results-locked { grid-template-columns: minmax(0, 1fr); gap: 0; }
.skn .skn-results-locked .skn-card { border: 0; border-bottom: 1px solid #dedbd0; border-radius: 0; background: transparent; }
.skn .skn-results-locked .skn-card:first-child { text-align: center; padding-bottom: 28px; }
.skn .skn-card-locked { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.skn .skn-card-locked .skn-type { margin: 0; }
.skn .skn-unlock { background: transparent; color: #a64030; border: 0; padding: 10px 0; font-size: 13px; }
.skn .skn-unlock::before { content: '\1F512'; margin-right: 8px; }
.skn .skn-unlock:hover { background: transparent; color: #8d3427; text-decoration: underline; }
.skn .skn-signup { margin: 28px 0; padding: 24px; background: #efe9dc; border-radius: 8px; }
.skn .skn-signup h3 { margin: 0 0 10px; }
.skn .skn-email-form, .skn .skn-site-email-form { margin: 20px 0; }
.skn .skn-email-status, .skn .skn-site-email-status { overflow-wrap: anywhere; }
.skn .skn-check-email, .skn .skn-site-email-check { background: transparent; color: #a64030; padding: 10px 14px; font-size: 14px; }
.skn .skn-check-email:hover, .skn .skn-site-email-check:hover { background: #f7e3dd; color: #8d3427; }
.skn .skn-registration-note { font-weight: 650; }
@media (max-width: 760px) { .skn .skn-card-locked { padding: 18px 8px; } .skn .skn-unlock { width: auto; flex-shrink: 0; } .skn .skn-signup { padding: 18px; } }

/* Use installed Japanese brush faces, with a readable serif fallback. */
.skn .skn-kanji, .skn .skn-example-kanji { font-family: 'HG行書体', 'HGS行書体', 'HGP行書体', 'YuKyokasho', 'Yu Mincho', serif; font-weight: 400; }
.skn .skn-image-tools { margin-top: 24px; padding-top: 18px; border-top: 1px solid #dedbd0; text-align: left; }
.skn .skn-image-tools label { font-size: 13px; }
.skn .skn-image-tools a { color: #a64030; overflow-wrap: anywhere; font-size: 13px; }
.skn .skn-download { width: 100%; margin-top: 10px; }

.skn .skn-reading-tools { margin: 12px 0; }
.skn .skn-reading-choices { min-width: 0; margin: 12px 0; padding: 12px 16px; border: 1px solid #817e72; border-radius: 6px; }
.skn .skn-reading-choices legend { font-size: 14px; font-weight: 650; }
.skn .skn-reading-options label { display: flex; gap: 8px; align-items: center; font-weight: 400; overflow-wrap: anywhere; }
.skn .skn-reading-options input[type="radio"] { flex: 0 0 auto; width: auto; min-height: 24px; padding: 0; }
.skn .skn-listen { padding: 10px 16px; background: transparent; color: #a64030; }
.skn .skn-listen:hover { background: #f7e3dd; }
.skn input[aria-invalid="true"] { border-color: #a32424; }
.skn .skn-name-feedback { margin: 24px 0; padding: 24px; border: 1px solid #d7cabb; border-radius: 8px; background: #f3eee3; }
.skn .skn-name-feedback h3 { margin-top: 0; }
.skn .skn-feedback-form { display: grid; gap: 14px; }
.skn .skn-feedback-form input { min-width: 0; width: 100%; box-sizing: border-box; }
.skn .skn-feedback-form p { margin: 0; }
.skn .skn-feedback-trap { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.skn .skn-feedback-status { overflow-wrap: anywhere; }
.skn .skn-used-reading { margin: 16px 0 8px; padding: 12px 16px; border-left: 3px solid #a47d40; }
.skn .skn-used-reading p { margin: 4px 0; overflow-wrap: anywhere; }
.skn .skn-suggest-reading, .skn .skn-feedback-close, .skn .skn-hear-reading { background: transparent; color: #a64030; padding: 10px 14px; font-size: 14px; }
@media (max-width: 760px) { .skn .skn-name-feedback { padding: 16px; } }

.skn .skn-paid-service { margin:48px 0 24px; padding:28px; border:1px solid #b99b6e; border-radius:10px; background:#f7f2e7; }
.skn .skn-paid-price { font-size:22px; color:#825d30; }
.skn .skn-paid-form fieldset { display:grid; gap:16px; min-width:0; padding:20px; margin-top:24px; border:1px solid #c8bcaa; border-radius:6px; }
.skn .skn-paid-form legend { padding:0 6px; font-weight:650; }
.skn .skn-paid-form textarea { display:block; width:100%; min-height:80px; box-sizing:border-box; padding:12px; border:1px solid #c8bcaa; border-radius:4px; background:white; color:#243c36; font:inherit; resize:vertical; }
.skn .skn-paid-form label { min-width:0; }
.skn .skn-paid-form input, .skn .skn-paid-form select { width:100%; min-width:0; box-sizing:border-box; }
.skn .skn-paid-consent { display:flex; align-items:flex-start; gap:10px; font-size:14px; font-weight:400; }
.skn .skn-paid-consent input { flex:0 0 auto; width:20px; min-height:20px; margin-top:3px; }
.skn .skn-paid-trap { position:absolute!important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.skn .skn-paid-status { overflow-wrap:anywhere; }
.skn .skn-paid-form fieldset[hidden] { display:none; }

/* Personalized KANJI offer: emphasize the person, uses and actual Canva samples. */
.skn .skn-paid-lead { font-size:clamp(18px,2.4vw,22px); line-height:1.6; }
.skn .skn-paid-uses { font-size:clamp(17px,2.2vw,20px); padding:16px 0; line-height:1.7; }
.skn .skn-paid-usd { display:inline-block; font-size:16px; font-weight:400; }
.skn .skn-paid-samples { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0 12px; }
.skn .skn-paid-samples figure { min-width:0; margin:0; padding:14px 8px; background:#fff; border:1px solid #dedbd0; border-radius:6px; text-align:center; }
.skn .skn-paid-samples img { display:block; width:100%; height:auto; }
.skn .skn-paid-samples figcaption { margin-top:8px; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.skn .skn-paid-sample-note { text-align:center; }
.skn .skn-purpose-other[hidden] { display:none; }
@media(max-width:480px) { .skn .skn-paid-service .skn-paid-samples { grid-template-columns:1fr; } .skn .skn-paid-service .skn-paid-samples figure { padding:16px; } .skn .skn-paid-service .skn-paid-samples img { max-width:440px; margin:auto; } }

@media(max-width:760px) { .skn .skn-paid-service { padding:18px; } .skn .skn-paid-form fieldset { padding:12px; } }