:root{--c-paper:#fbf6ee;--c-card:#ffffff;--c-fg:#0e141e;--c-muted:#55585c;--c-key:#1d3557;--c-accent:#e63946;--c-border:#dcd9d3;--c-corner:10px;--c-max:1140px;--c-heading:'Mochiy Pop One',system-ui,sans-serif;--c-font-body:'Nunito',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--c-paper);color:var(--c-fg);font:16px/1.65 var(--c-font-body)}
img{max-width:100%;height:auto} a{color:var(--c-key);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--c-heading);line-height:1.2;letter-spacing:-.01em;color:var(--c-fg)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.20em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1em}
.lay-page-width{max-width:var(--c-max);margin:0 auto;padding:0 1rem} .lay-main-col{max-width:var(--c-max);margin:0 auto;padding:1.2rem 1rem 3rem}
.lay-skip{position:absolute;left:-9999px} .lay-skip:focus{left:1rem;top:1rem;background:var(--c-card);padding:.5rem;z-index:99}
.lay-header__in{max-width:var(--c-max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.lay-wordmark{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--c-heading);color:var(--c-fg);text-decoration:none}
.lay-primary-nav{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .lay-primary-nav a{color:var(--c-fg);text-decoration:none;font-weight:600;font-size:.95rem}
.lay-header-bar{background:var(--c-card);border-bottom:1px solid var(--c-border)}  
.lay-intro{margin:1rem 0 1.4rem} .lay-summary{font-size:1.12rem;max-width:46em;color:var(--c-muted)} 
.lay-calc-area{margin:1.4rem 0 2rem}
.lay-tip{margin:1.4em 0;padding:.9em 1.1em;background:var(--c-card);border-left:4px solid var(--c-accent);border-radius:0 var(--c-corner) var(--c-corner) 0}
.lay-formula-box{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--c-card);border:1px dashed var(--c-key);border-radius:var(--c-corner);overflow-x:auto}
.lay-tbl-box{margin:1.2em 0;overflow-x:auto;border:1px solid var(--c-border);border-radius:var(--c-corner);background:var(--c-card)}
.lay-data-table{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .lay-data-table th,.lay-data-table td{padding:.5em .75em;border-bottom:1px solid var(--c-border);text-align:left}
.lay-data-table thead th{background:color-mix(in srgb,var(--c-border) 60%,var(--c-card))}
ol.lay-step-list{padding-left:1.3em} ol.lay-step-list>li{margin:.5em 0}
.lay-diagram{margin:1.6em 0;text-align:center} .lay-diagram img{width:100%;max-width:720px;border-radius:var(--c-corner);border:1px solid var(--c-border);background:#fff} .lay-diagram figcaption{font-size:.9em;color:var(--c-muted)}
.lay-more-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.lay-item{display:block;padding:1.1rem;background:var(--c-card);border-radius:var(--c-corner);box-shadow:0 6px 24px rgba(0,0,0,.09);border:1px solid transparent;color:var(--c-fg);text-decoration:none}
.lay-item b{display:block;font-family:var(--c-heading);margin-bottom:.35rem} .lay-item span{color:var(--c-muted);font-size:.92rem} .lay-item:hover{border-color:var(--c-key)}
.lay-item--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .lay-item--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--c-fg) 14%,transparent)}
.lay-link-card__img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .lay-tile__txt{display:block;padding:1rem 1.1rem 1.1rem} .lay-tile__txt>span{display:block}
.lay-tile__meta{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--c-key)}
.lay-more-links--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .lay-more-links--feat>.lay-item:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .lay-more-links--feat>.lay-item:first-child b{font-size:1.35rem}
.lay-blist{display:grid;gap:1rem;margin:1.2em 0} .lay-brow{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--c-corner);overflow:hidden;color:var(--c-fg);text-decoration:none}
.lay-blist a,.lay-brow,.lay-post__kicker{background:none}   /* 13.10: без !important — дизайнер сайта может дать карточкам фон */
.lay-brow .lay-link-card__img{height:100%;aspect-ratio:auto;min-height:126px} .lay-brow b{display:block;font-family:var(--c-heading);font-size:1.12rem;margin-bottom:.3rem} .lay-brow .lay-tile__txt>span{color:var(--c-muted);font-size:.93rem} .lay-brow:hover{border-color:var(--c-key)}
.lay-blist--min{list-style:none;padding:0;counter-reset:bl;gap:0} .lay-blist--min li{counter-increment:bl;border-top:1px solid var(--c-border)} .lay-blist--min li:last-child{border-bottom:1px solid var(--c-border)}
.lay-blist--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--c-fg);text-decoration:none} .lay-blist--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--c-heading);color:var(--c-key)}
.lay-blist--min b{font-family:var(--c-heading);font-size:1.15rem} .lay-blist--min span{color:var(--c-muted);font-size:.93rem} .lay-blist--min a:hover b{color:var(--c-key)}
.lay-post__head--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--c-corner);overflow:hidden} .lay-post__head--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.lay-post__ov{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .lay-post__ov h1,.lay-post__ov .lay-post__meta,.lay-post__ov .lay-post__kicker{color:#fff}
.lay-post__head--band{background:var(--c-key);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--c-corner)} .lay-post__head--band h1,.lay-post__head--band .lay-post__meta,.lay-post__head--band .lay-post__kicker{color:#fff}
.lay-post__head--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .lay-post__head--split .lay-post__cover{margin:0}
.lay-on-this-page--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .lay-on-this-page--chips li{margin:0} .lay-on-this-page--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--c-border);border-radius:999px;background:var(--c-paper);text-decoration:none;font-size:.88rem}
.lay-on-this-page--rail{background:none;border:0;border-left:3px solid var(--c-accent);border-radius:0;padding:.2rem 0 .2rem 1rem}
.lay-i18n--globe summary{display:flex;align-items:center;gap:.35rem} .lay-langpills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .lay-langpills a{padding:.25rem .7rem;border:1px solid var(--c-border);border-radius:999px;text-decoration:none} .lay-langpills a[aria-current]{background:var(--c-key);border-color:var(--c-key);color:#fff}
@media (max-width:700px){.lay-more-links--feat{grid-template-columns:1fr} .lay-more-links--feat>.lay-item:first-child{display:flex} .lay-brow{grid-template-columns:1fr} .lay-brow .lay-link-card__img{min-height:0;aspect-ratio:1200/630} .lay-post__head--split{grid-template-columns:1fr} .lay-post__ov{position:static;background:var(--c-key);padding:1.2rem} .lay-post__head--overlay>img{min-height:0}}
.lay-post{max-width:48rem;margin:0 auto} .lay-post__head{margin:.6rem 0 1.2rem} .lay-post__head h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.lay-post__kicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-key);text-decoration:none}
.lay-upd{color:var(--c-muted);font-size:.9rem;margin:2rem 0 0} .lay-sign{font-style:italic;color:var(--c-muted)} .lay-post__meta{color:var(--c-muted);font-size:.92rem;margin:0} .lay-post__cover{margin:0 0 1.6rem} .lay-post__cover img{display:block;width:100%;height:auto;border-radius:var(--c-corner)}
.lay-post .lay-summary{font-size:1.2rem;color:var(--c-fg)} .lay-post .lay-summary::first-letter{font-family:var(--c-heading);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--c-key)}
.lay-post .lay-on-this-page--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--c-card);border:1px solid var(--c-border);border-left:4px solid var(--c-key);border-radius:var(--c-corner);font-size:.95rem}
.lay-on-this-page--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .lay-on-this-page--post li{margin:.2rem 0}
.lay-post h3{color:var(--c-key)} .lay-post blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--c-accent);font-size:1.1em}
.lay-questions details{border-bottom:1px solid var(--c-border);padding:.7rem 0} .lay-questions summary{cursor:pointer;font-weight:700;font-family:var(--c-heading)}
.lay-where{font-size:.88rem;color:var(--c-muted);margin:.4rem 0 1rem} .lay-where a{color:var(--c-muted)}
.lay-action{margin:2.4rem 0;padding:1.4rem;background:var(--c-card);border-radius:var(--c-corner);box-shadow:0 6px 24px rgba(0,0,0,.09);border:1px solid transparent;text-align:center}
.lay-action-link{display:inline-block;padding:.7em 1.4em;background:var(--c-key);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.lay-bottom{border-top:1px solid var(--c-border);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--c-muted);background:var(--c-card)}
.lay-bottom nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .lay-bottom a{color:var(--c-muted)} .lay-footer__in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1.5rem} @media(max-width:700px){.lay-footer__in{grid-template-columns:1fr}} .lay-bottom nav{flex-direction:column}


.lay-i18n{position:relative} .lay-i18n summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--c-border);border-radius:999px;font-size:.85rem}
.lay-locale__list{position:absolute;right:0;top:120%;background:var(--c-card);border:1px solid var(--c-border);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.lay-locale__list a{padding:.3rem .5rem;text-decoration:none;color:var(--c-fg)} .lay-locale__list a[aria-current]{font-weight:700;color:var(--c-key)}
.lay-codes{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .lay-codes a{text-decoration:none;color:var(--c-muted);padding:.1rem .3rem;border-radius:4px} .lay-codes a[aria-current]{color:var(--c-key);background:color-mix(in srgb,var(--c-key) 12%,transparent)}
[data-zone]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-zone]:empty{margin:0}
[data-zone="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--c-card)}
[data-zone="sidebar_left"],[data-zone="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-zone="sidebar_left"]{left:12px} [data-zone="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-zone="sidebar_left"],[data-zone="sidebar_right"]{display:none}}
.lay-adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--c-muted)}
.lay-action-link{border-radius:999px}
.lay-tbl-box{border:0;border-top:3px solid var(--c-key);border-radius:0;background:transparent} .lay-data-table thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.lay-chunk a:not(.lay-action-link):not(.lay-item){text-decoration:none;font-weight:600} .lay-chunk a:not(.lay-action-link):not(.lay-item):hover{text-decoration:underline}
.lay-intro--art{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;text-align:left} .lay-intro--art .lay-art{width:170px;height:170px;display:grid;place-items:center} .lay-art svg{width:100%;height:100%;filter:drop-shadow(0 12px 24px color-mix(in srgb,var(--c-key) 35%,transparent))} .lay-art--ring{border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c-accent) 30%,transparent) 0 38%,transparent 39% 52%,color-mix(in srgb,var(--c-key) 18%,transparent) 53% 66%,transparent 67%)} .lay-art--ring svg{width:56%;height:56%} @media(max-width:700px){.lay-intro--art{grid-template-columns:1fr} .lay-intro--art .lay-art{display:none}}
:root{--c-heading:'Mochiy Pop One',system-ui,sans-serif;--c-font-body:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif} body{font-size:18px;font-kerning:normal;font-optical-sizing:auto;text-rendering:optimizeLegibility} h1,h2,h3{font-weight:400;letter-spacing:0;text-wrap:balance} .lay-wordmark{font-weight:400} h1{font-size:clamp(1.85rem,4.6vw,1.95rem);line-height:1.08} h2{font-size:clamp(1.3rem,3vw,1.44rem);line-height:1.18} h3{font-size:1.20rem} .lay-post__head h1{font-size:clamp(1.95rem,5vw,2.07rem)} p,li{text-wrap:pretty} .lay-chunk>p,.lay-chunk>ul,.lay-chunk>ol,.lay-post p,.lay-post li{max-width:64ch} .lay-data-table,.lay-calc-area output,.lay-calc-area [class*=res],.lay-calc-area [class*=val]{font-variant-numeric:tabular-nums lining-nums}  h1,h2,h3,.lay-wordmark,.lay-item b,.lay-brow b,.lay-blist--min b{font-synthesis:none}
@media (max-width:640px){.lay-header__in{gap:.5rem} .lay-primary-nav{gap:.8rem}}

/* Japanese Name Generator — tool styles. Only site tokens: --c-paper --c-card --c-fg --c-muted --c-key --c-accent --c-border --c-corner --c-heading --c-font-body.
   Look: washi-paper settings sheet, indigo action, cards with big kanji + furigana and a red hanko seal (archetype M, colour block). */
.jng {
    --jng-paper: color-mix(in srgb, var(--c-card) 92%, var(--c-accent) 8%);
    --jng-fiber: color-mix(in srgb, var(--c-fg) 5%, transparent);
    --jng-soft: color-mix(in srgb, var(--c-key) 10%, var(--c-card));
    --jng-ring: color-mix(in srgb, var(--c-key) 55%, transparent);
    color: var(--c-fg);
    font-family: var(--c-font-body);
    font-size: 16px;
    line-height: 1.5;
    color-scheme: inherit;
    position: relative;
    max-width: 1040px;
    margin: 0 auto;
}
.jng *, .jng *::before, .jng *::after { box-sizing: border-box; }
.jng p { margin: 0; }
.jng ul { margin: 0; padding: 0; list-style: none; }
.jng-vh, .jng .jng-vh {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.jng-off { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.jng-how {
    font-size: 1.02rem;
    color: var(--c-muted);
    margin: 0 0 14px !important;
    padding-left: 14px;
    border-left: 4px solid var(--c-accent);
}

/* ---------- settings: washi paper sheet ---------- */
.jng-set {
    position: relative;
    padding: 20px 22px 18px;
    border-radius: var(--c-corner);
    background-color: var(--jng-paper);
    background-image:
        repeating-linear-gradient(103deg, var(--jng-fiber) 0 1px, transparent 1px 23px),
        repeating-linear-gradient(17deg, var(--jng-fiber) 0 1px, transparent 1px 37px),
        radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--c-card) 70%, transparent) 0 18%, transparent 40%);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--c-fg) 8%, transparent), 0 14px 32px -24px color-mix(in srgb, var(--c-key) 70%, transparent);
    display: grid;
    gap: 16px;
}
.jng-f { border: 0; margin: 0; padding: 0; min-width: 0; }
.jng-lab {
    display: block;
    font-weight: 800;
    font-size: .95rem;
    color: var(--c-fg);
    margin: 0 0 6px;
    padding: 0;
}
.jng-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.jng-grid > * { min-width: 0; }
.jng-grid--opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jng-sel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 46px;
    padding: 8px 36px 8px 12px;
    font: inherit;
    font-size: 16px;
    color: var(--c-fg);
    background-color: var(--c-card);
    background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%), linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    border: 1.5px solid var(--c-border);
    border-radius: calc(var(--c-corner) * .6);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .18s ease, box-shadow .18s ease;
    cursor: pointer;
}
.jng-sel:hover { border-color: color-mix(in srgb, var(--c-key) 45%, var(--c-border)); }
.jng-sel:focus-visible { outline: none; border-color: var(--c-key); box-shadow: 0 0 0 3px var(--jng-ring); }

.jng-pills, .jng-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.jng-pill { position: relative; display: inline-flex; min-width: 0; cursor: pointer; }
.jng-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.jng-pill span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--c-border);
    background: var(--c-card);
    color: var(--c-fg);
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.jng-pill span b { font-weight: 400; color: var(--c-accent); }
.jng-pill:hover span { border-color: color-mix(in srgb, var(--c-key) 45%, var(--c-border)); }
.jng-pill input:checked + span { background: var(--c-key); border-color: var(--c-key); color: var(--c-card); }
.jng-pill input:checked + span b { color: inherit; }
.jng-pill input:focus-visible + span { box-shadow: 0 0 0 3px var(--jng-ring); }
.jng-pill:active span { transform: scale(.97); }
.jng-seg--num .jng-pill span { min-width: 48px; justify-content: center; padding: 8px 10px; }
.jng-f--gender .jng-pill span { padding: 8px 18px; font-size: 1rem; }
.jng-set[data-m="sur"] .jng-f--gender,
.jng-set[data-m="sur"] .jng-grid:first-of-type > .jng-f:nth-child(-n+2) { opacity: .45; }

.jng-go-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.jng-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 12px 30px;
    border: 0;
    border-radius: 999px;
    background: var(--c-key);
    color: var(--c-card);
    font-family: var(--c-heading);
    font-size: 1.12rem;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--c-key) 60%, var(--c-fg));
    transition: transform .12s ease, box-shadow .12s ease, background-color .18s ease;
}
.jng-go:hover { background: color-mix(in srgb, var(--c-key) 88%, var(--c-accent)); }
.jng-go:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c-key) 60%, var(--c-fg)); }
.jng-go:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.jng-keys { color: var(--c-muted); font-size: .88rem; }
.jng kbd {
    font-family: var(--c-font-body);
    font-size: .8rem;
    padding: 1px 6px;
    border: 1px solid var(--c-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--c-card);
    color: var(--c-fg);
}

/* ---------- results ---------- */
.jng-out { margin-top: 22px; }
.jng-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 12px; }
.jng-bar[hidden], .jng [hidden] { display: none !important; }
.jng-count { font-weight: 800; color: var(--c-muted); font-size: .95rem; }
.jng-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.jng-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-card);
    color: var(--c-fg);
    font: inherit;
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.jng-btn svg { color: var(--c-key); flex: none; }
.jng-btn:hover { border-color: var(--c-key); background: var(--jng-soft); }
.jng-btn:focus-visible, .jng-ib:focus-visible, .jng-chip:focus-visible, .jng-saved-head:focus-visible { outline: 3px solid var(--jng-ring); outline-offset: 2px; }
.jng-btn--warn { color: var(--c-accent); border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border)); }
.jng-btn--warn:hover { background: color-mix(in srgb, var(--c-accent) 10%, var(--c-card)); border-color: var(--c-accent); }

.jng-note {
    margin: 0 0 12px !important;
    padding: 10px 14px;
    border-radius: calc(var(--c-corner) * .6);
    background: color-mix(in srgb, var(--c-accent) 10%, var(--c-card));
    border-left: 4px solid var(--c-accent);
    color: var(--c-fg);
    font-weight: 600;
}
.jng-empty { padding: 26px 18px; text-align: center; color: var(--c-muted); border: 2px dashed var(--c-border); border-radius: var(--c-corner); }
.jng-loading { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.jng-loading span {
    display: block;
    height: 150px;
    border-radius: var(--c-corner);
    background: linear-gradient(100deg, var(--jng-soft) 30%, var(--c-card) 50%, var(--jng-soft) 70%);
    background-size: 300% 100%;
    animation: jng-shimmer 1.2s linear infinite;
}
.jng-loading span:first-child { grid-column: 1 / -1; height: 220px; }
@keyframes jng-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* card */
.jng-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head seal" "bd bd" "acts acts";
    gap: 10px 14px;
    padding: 16px 16px 12px;
    background: var(--c-card);
    border-radius: var(--c-corner);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--c-fg) 10%, transparent), 0 10px 24px -20px color-mix(in srgb, var(--c-fg) 60%, transparent);
    min-width: 0;
    transition: box-shadow .2s ease, transform .2s ease;
}
.jng-card:hover { box-shadow: 0 1px 0 color-mix(in srgb, var(--c-fg) 10%, transparent), 0 16px 30px -20px color-mix(in srgb, var(--c-key) 70%, transparent); }
.jng-card-head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.jng-card--feat .jng-card-head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 4px 18px; }
.jng-kj {
    font-family: var(--c-heading);
    font-size: 2rem;
    line-height: 1.25;
    color: var(--c-fg);
    margin: 0;
    word-break: keep-all;
}
.jng-kj ruby { ruby-position: over; }
.jng-kj rt {
    font-family: var(--c-font-body);
    font-size: .38em;
    font-weight: 700;
    color: var(--c-accent);
    letter-spacing: .04em;
}
.jng-gap { display: inline-block; width: .35em; }
.jng-info { min-width: 0; }
.jng-rom { font-weight: 800; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.jng-kana { color: var(--c-muted); font-size: .9rem; }
.jng-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; font-size: .82rem; }
.jng-meta > span { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; font-weight: 700; }
.jng-gw { background: var(--jng-soft); color: var(--c-key); }
.jng-style { background: color-mix(in srgb, var(--c-muted) 12%, var(--c-card)); color: var(--c-fg); }
.jng-badge { cursor: help; border: 1.5px solid currentColor; }
.jng-badge--c { color: var(--c-key); }
.jng-badge--u { color: color-mix(in srgb, var(--c-key) 50%, var(--c-accent)); }
.jng-badge--r { color: var(--c-accent); }

.jng-seal { grid-area: seal; width: 58px; height: 58px; transform: rotate(-7deg); align-self: start; overflow: visible; }
.jng-seal-bg { fill: var(--c-accent); }
.jng-seal-frame { fill: none; stroke: var(--c-card); stroke-width: 2.5; opacity: .85; }
.jng-seal-t { fill: var(--c-card); font-family: var(--c-heading); }

.jng-bd { grid-area: bd; display: grid; gap: 8px; min-width: 0; }
.jng-bd-g { min-width: 0; }
.jng-bd-h { font-size: .84rem; font-weight: 800; color: var(--c-muted); margin-bottom: 4px !important; overflow-wrap: anywhere; }
.jng-bd-l { display: flex; flex-wrap: wrap; gap: 6px; }
.jng-bd-i {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px 4px 6px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--c-paper) 70%, var(--c-card));
    border: 1px solid var(--c-border);
    font-size: .86rem;
    line-height: 1.3;
}
.jng-bd-k { font-family: var(--c-heading); font-size: 1.15rem; color: var(--c-key); }
.jng-bd-r { font-weight: 800; color: var(--c-accent); }
.jng-bd-m { color: var(--c-fg); overflow-wrap: anywhere; }
.jng-bd-m--snd { color: var(--c-muted); font-style: italic; }
.jng-bd-note { font-size: .82rem; color: var(--c-muted); margin-top: 4px !important; }

.jng-acts { grid-area: acts; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px dashed var(--c-border); padding-top: 8px; }
.jng-ib {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--c-muted);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.jng-ib:hover { background: var(--jng-soft); color: var(--c-key); }
.jng-ib:active { transform: scale(.92); }
.jng-ib--fav svg path { fill: transparent; stroke: currentColor; stroke-width: 2; transition: fill .2s ease; }
.jng-ib--fav[aria-pressed="true"] { color: var(--c-accent); }
.jng-ib--fav[aria-pressed="true"] svg path { fill: currentColor; }
.jng-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--c-key);
    font: inherit;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease;
}
.jng-chip svg { width: 16px; height: 16px; }
.jng-chip:hover { background: var(--jng-soft); }

/* featured card: the first name, large */
.jng-feat { margin-bottom: 14px; }
.jng-card--feat {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "head head seal" "bd bd bd" "acts acts acts";
    padding: 22px 22px 14px;
    background:
        linear-gradient(90deg, var(--c-key) 0 8px, transparent 8px),
        var(--c-card);
    padding-left: 30px;
}
.jng-card--feat .jng-kj { font-size: clamp(2.6rem, 8vw, 3.6rem); }
.jng-card--feat .jng-rom { font-size: 1.5rem; font-family: var(--c-heading); font-weight: 400; }
.jng-card--feat .jng-seal { width: 86px; height: 86px; }
.jng-card--feat .jng-bd-i { font-size: .94rem; }
.jng-card--feat .jng-bd-k { font-size: 1.35rem; }

.jng-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.jng-src { margin-top: 14px !important; font-size: .82rem; color: var(--c-muted); }
.jng-src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- saved names ---------- */
.jng-saved { margin-top: 22px; border-top: 2px solid var(--c-border); padding-top: 10px; }
.jng-saved-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 8px 4px;
    border: 0;
    background: transparent;
    color: var(--c-fg);
    font-family: var(--c-heading);
    font-size: 1.1rem;
    text-align: left;
    cursor: pointer;
}
.jng-saved-head > svg:first-child { color: var(--c-accent); }
.jng-chev { margin-left: auto; color: var(--c-muted); transition: transform .2s ease; }
.jng-saved-head[aria-expanded="true"] .jng-chev { transform: rotate(180deg); }
.jng-saved-body { padding: 6px 0 4px; }
.jng-saved-empty { color: var(--c-muted); padding: 6px 4px; }
.jng-saved-list { display: grid; gap: 6px; }
.jng-sv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 6px 6px 14px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: calc(var(--c-corner) * .7);
    min-width: 0;
}
.jng-sv-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-width: 0; }
.jng-sv-k { font-family: var(--c-heading); font-size: 1.2rem; }
.jng-sv-r { font-weight: 800; overflow-wrap: anywhere; }
.jng-sv-x { font-size: .8rem; color: var(--c-muted); }
.jng-sv-a { display: flex; flex: none; }
.jng-saved-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.jng-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: calc(var(--c-corner) * .6);
    background: color-mix(in srgb, var(--c-accent) 9%, var(--c-card));
}
.jng-confirm p { font-weight: 700; margin-right: auto !important; }

/* ---------- toast ---------- */
.jng-toast {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 50;
    max-width: calc(100vw - 32px);
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--c-fg);
    color: var(--c-paper);
    font-weight: 700;
    font-size: .95rem;
    box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--c-fg) 70%, transparent);
    transform: translate(-50%, 0);
    pointer-events: none;
}
.jng-toast.is-on { animation: jng-toast .28s cubic-bezier(.2,.8,.2,1); }
@keyframes jng-toast { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes jng-ink { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
.jng-card--feat .jng-kj { animation: jng-ink .6s ease-out both; }

/* ---------- wide screens: featured kanji written vertically, like a name card ---------- */
@media (min-width: 760px) {
    .jng-card--feat { grid-template-areas: "head head seal" "bd bd bd" "acts acts acts"; }
    .jng-card--feat .jng-card-head { flex-wrap: nowrap; align-items: stretch; gap: 26px; }
    .jng-card--feat .jng-kj { writing-mode: vertical-rl; text-orientation: upright; max-height: 300px; padding: 4px 0; }
    .jng-card--feat .jng-kj rt { font-size: .32em; }
    .jng-card--feat .jng-gap { width: auto; height: .45em; }
    .jng-card--feat .jng-info { align-self: center; }
    .jng-card--feat .jng-bd { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
    .jng-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .jng-grid--opts { grid-template-columns: minmax(0, 1fr); }   /* QA 13.10: "Japonais : nom…" / "Occidentale: prima il nome" were cut in a half-width Name order select */
    .jng-grid:first-of-type > .jng-f:last-child { grid-column: 1 / -1; }
    .jng-list, .jng-loading { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .jng-set { padding: 16px 14px; }
    .jng-set { gap: 12px; }
    .jng-grid, .jng-grid--opts { grid-template-columns: minmax(0, 1fr); }   /* QA 13.10: "Beliebige Bedeutung" was cut in two-column selects on iPhone */
    .jng-pill span { padding: 8px 12px; font-size: .9rem; }
    .jng-f--gender .jng-pill span { padding: 8px 12px; }
    .jng-go { width: 100%; }
    .jng-card { padding: 14px 12px 10px; }
    .jng-card--feat { padding: 18px 14px 12px 24px; }
    .jng-kj { font-size: 1.75rem; }
    .jng-seal { width: 48px; height: 48px; }
    .jng-card--feat .jng-seal { width: 64px; height: 64px; }
    .jng-tools .jng-btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
    .jng-bd-i { font-size: .82rem; }
}
@media (max-width: 360px) {
    .jng-sel { padding-left: 10px; padding-right: 28px; }
    .jng-sel { background-position: calc(100% - 15px) 52%, calc(100% - 9px) 52%; }
}

@media (prefers-reduced-motion: reduce) {
    .jng *, .jng *::before, .jng *::after { animation: none !important; transition: none !important; }
}

@media print {
    .jng-set, .jng-bar, .jng-acts, .jng-saved, .jng-toast, .jng-how, .jng-note { display: none !important; }
    .jng-card { box-shadow: none; border: 1px solid var(--c-border); break-inside: avoid; }
    .jng-list { grid-template-columns: 1fr 1fr; }
}

/* design: sites/<d>/design/site.css */
/* japanese-name-generator.org — [M] colour block in two inks: indigo (ai-zome) top block with the H1 and a name written
   top-to-bottom + red hanko seal; washi paper block below with the settings sheet and name cards. Mochiy Pop One for headings
   (drawn for Japanese, so kanji in headings sit naturally), Nunito for reading text.
   Full-bleed bands use border-image outset (ink overflow: paints to the window edges without horizontal scroll). */
:root{
 --jx-ai:var(--c-key);
 --jx-ai2:color-mix(in srgb,var(--c-key) 82%,#000);
 --jx-paper:var(--c-paper);
 --jx-on:#fbf6ee;
 --jx-on2:color-mix(in srgb,#fbf6ee 80%,var(--c-key));
 --jx-wash:color-mix(in srgb,var(--c-key) 9%,#fff);
 --jx-shu:var(--c-accent);
 --jx-shu-ink:color-mix(in srgb,var(--c-accent) 78%,#000);
 --jx-fiber:color-mix(in srgb,var(--c-fg) 4%,transparent);
}
body{background:var(--c-paper);color:var(--c-fg);line-height:1.7}
h1,h2,h3{letter-spacing:0;color:var(--c-fg)}
a{color:var(--c-key);text-decoration-color:color-mix(in srgb,var(--c-accent) 70%,transparent);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{color:var(--jx-shu-ink);text-decoration-color:var(--c-accent)}

/* ---------- header: the top of the indigo block ---------- */
.lay-header-bar{background:var(--jx-ai);border:0;box-shadow:none;color:var(--jx-on)}
.lay-header__in{min-height:72px;padding-top:12px;padding-bottom:12px}
.lay-header-bar .lay-wordmark{gap:12px;font-size:1.2rem;color:var(--jx-on);text-decoration:none}
.lay-wordmark svg{width:44px;height:44px;flex:0 0 44px;transform:rotate(-8deg);transition:transform .2s ease;
 filter:drop-shadow(0 2px 0 color-mix(in srgb,#000 30%,transparent))}
.lay-wordmark svg circle{fill:var(--jx-shu)}
.lay-wordmark svg path{stroke:var(--jx-on);stroke-width:2.4}
.lay-wordmark:hover svg{transform:rotate(4deg)}
.lay-header-bar .lay-primary-nav{gap:4px 6px;align-items:center}
.lay-header-bar .lay-primary-nav>a{color:var(--jx-on);font-weight:700;font-size:1rem;letter-spacing:0;text-transform:none;min-height:44px;padding:8px 14px;
 display:inline-flex;align-items:center;border-radius:999px;text-decoration:none}
.lay-header-bar .lay-primary-nav>a:hover{background:color-mix(in srgb,var(--jx-on) 12%,transparent);color:var(--jx-on)}
.lay-header-bar .lay-primary-nav>a[aria-current]{box-shadow:inset 0 -3px 0 var(--jx-shu);border-radius:0}
.lay-header-bar .lay-codes{gap:2px;margin-left:8px;padding:3px;border-radius:999px;background:var(--jx-ai2)}
.lay-header-bar .lay-codes a{color:var(--jx-on);font-size:.84rem;font-weight:800;min-width:40px;min-height:40px;padding:0 6px;display:inline-grid;
 place-items:center;border-radius:999px;text-decoration:none;background:none}
.lay-header-bar .lay-codes a:hover{background:color-mix(in srgb,var(--jx-on) 14%,transparent);color:var(--jx-on)}
.lay-header-bar .lay-codes a[aria-current]{background:var(--jx-on);color:var(--jx-ai)}
.lay-header-bar .lay-locale__list a{color:var(--c-fg)}

/* ---------- first screen, ink 1: indigo block with H1 + vertical name and seal ---------- */
.lay-main-col:has(>.lay-intro:first-child){padding-top:0}
.lay-intro{position:relative;margin:0 0 0;padding:26px 0 34px;background:var(--jx-ai);color:var(--jx-on);
 border-image:conic-gradient(var(--jx-ai) 0 0) fill 0/ /0 100vmax}
.lay-intro::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:var(--jx-shu);
 border-image:conic-gradient(var(--jx-shu) 0 0) fill 0/ /0 100vmax}
.lay-intro::before{content:"";position:absolute;top:0;bottom:0;right:0;width:48%;pointer-events:none;
 background:url(/assets/img/d-seigaiha.svg) 0 0/40px 20px repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 75%);mask-image:linear-gradient(90deg,transparent,#000 75%)}
.lay-intro>*{position:relative;z-index:1}
.lay-intro h1{font-size:44px;line-height:1.2;color:var(--jx-on);margin:0 0 12px;max-width:20em}
.lay-intro .lay-summary{font-size:1.14rem;line-height:1.6;color:var(--jx-on2);max-width:40em;margin:0}
.lay-intro--art{grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center}
.lay-intro .lay-art{width:auto;height:auto;display:flex;flex-direction:row;align-items:flex-end;gap:10px;margin-right:12px}
/* the name itself, written top to bottom like a name card: kanji + kana reading beside it (decorative, aria-hidden container) */
.lay-intro .lay-art::before{content:"佐藤陽翔";order:2;writing-mode:vertical-rl;text-orientation:upright;font-family:var(--c-heading);font-size:40px;
 line-height:1;letter-spacing:.08em;color:var(--jx-on);white-space:nowrap}
.lay-intro .lay-art::after{content:"さとうはると";order:3;writing-mode:vertical-rl;text-orientation:upright;font-family:var(--c-font-body);font-weight:700;
 font-size:13px;line-height:1;letter-spacing:.18em;color:var(--jx-on2);white-space:nowrap;align-self:flex-start;padding-top:2px}
.lay-intro .lay-art svg{order:1;width:58px;height:58px;filter:none;transform:rotate(-10deg);margin-bottom:-4px}
.lay-intro .lay-art svg circle{fill:var(--jx-shu)}
.lay-intro .lay-art svg path{stroke:var(--jx-on);stroke-width:2.2}

/* ---------- ink 2: washi paper block with the tool, centred ---------- */
.lay-calc-area{margin:0;padding:34px 0 30px;background-color:var(--jx-paper);
 background-image:repeating-linear-gradient(103deg,var(--jx-fiber) 0 1px,transparent 1px 29px),repeating-linear-gradient(13deg,var(--jx-fiber) 0 1px,transparent 1px 41px);
 border-image:conic-gradient(var(--jx-paper) 0 0) fill 0/ /0 100vmax}
.lay-calc-area>*{margin-left:auto;margin-right:auto}

/* ---------- reading sections: paper and a pale indigo wash, alternating ---------- */
.lay-chunk{position:relative;padding:34px 0 22px}
.lay-chunk:nth-of-type(odd):not(.lay-questions){background:var(--jx-wash);border-image:conic-gradient(var(--jx-wash) 0 0) fill 0/ /0 100vmax}
.lay-chunk>h2{margin:0 0 .7em;font-size:clamp(1.35rem,3vw,1.62rem);line-height:1.3;max-width:28em}
.lay-chunk>h2::before,.lay-questions>h2::before{content:"";display:inline-block;width:.6em;height:.6em;margin:0 .5em .08em 0;vertical-align:middle;
 background:var(--jx-shu);border-radius:3px;transform:rotate(-8deg);box-shadow:inset 0 0 0 2px color-mix(in srgb,#fff 35%,transparent)}
.lay-chunk h3{font-size:1.18rem;margin:1.4em 0 .4em}
:where(.lay-chunk,.lay-post) p{max-width:66ch}
:where(.lay-chunk,.lay-post) li{max-width:64ch;margin:.3em 0}
:where(.lay-chunk,.lay-post) ul{padding-left:1.2em}
:where(.lay-chunk,.lay-post) ul>li::marker{color:var(--jx-shu);font-size:1.1em}
:where(.lay-chunk,.lay-post) strong{font-weight:800;color:var(--c-fg)}
.lay-chunk a:not(.lay-item):not(.lay-action-link){font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--c-accent) 55%,transparent)}
.lay-chunk a:not(.lay-item):not(.lay-action-link):hover{text-decoration-color:var(--c-accent)}
.lay-main-col>.lay-calc-area~p:first-of-type{font-size:1.12rem;line-height:1.7;max-width:66ch}

/* worked example as numbered seal steps */
.lay-step-list{list-style:none;padding:0;counter-reset:jx}
.lay-step-list>li{counter-increment:jx;position:relative;padding:4px 0 4px 46px;margin:.7em 0}
.lay-step-list>li::before{content:counter(jx);position:absolute;left:0;top:3px;width:32px;height:32px;display:grid;place-items:center;
 background:var(--jx-ai);color:var(--jx-on);font-family:var(--c-heading);font-size:.95rem;border-radius:8px;transform:rotate(-4deg)}

/* figures: diagrams on a white sheet */
.lay-diagram{margin:1.8em 0}
.lay-diagram img{border:0;border-radius:var(--c-corner);box-shadow:0 1px 0 color-mix(in srgb,var(--c-fg) 10%,transparent),0 14px 30px -22px color-mix(in srgb,var(--c-key) 70%,transparent)}
.lay-diagram figcaption{margin-top:.6em;font-size:.95rem;color:var(--c-muted)}

/* tables: indigo header row */
.lay-tbl-box{border:0;border-radius:var(--c-corner);background:var(--c-card);box-shadow:0 1px 0 color-mix(in srgb,var(--c-fg) 10%,transparent),0 12px 26px -22px color-mix(in srgb,var(--c-key) 70%,transparent)}
.lay-data-table{font-size:.98rem}
.lay-data-table caption{caption-side:top;text-align:left;padding:12px 16px 10px;font-weight:800;color:var(--c-fg);background:var(--c-card)}
.lay-data-table thead th{background:var(--jx-ai);color:var(--jx-on);font-weight:800;text-align:left;border:0;padding:.65em .9em}
.lay-data-table td{padding:.6em .9em;border-top:1px solid var(--c-border);vertical-align:top}
.lay-data-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--c-key) 4%,var(--c-card))}
.lay-data-table caption a{color:var(--c-key)}

/* ---------- guides: cards like name cards with a seal corner ---------- */
.lay-more-links{gap:20px}
.lay-item{border:0;border-radius:var(--c-corner);background:var(--c-card);color:var(--c-fg);
 box-shadow:0 1px 0 color-mix(in srgb,var(--c-fg) 10%,transparent),0 14px 30px -22px color-mix(in srgb,var(--c-key) 75%,transparent)}
.lay-item--img{position:relative}
.lay-item--img:hover{transform:translateY(-3px);box-shadow:0 1px 0 color-mix(in srgb,var(--c-fg) 10%,transparent),0 20px 34px -22px color-mix(in srgb,var(--c-key) 85%,transparent)}
.lay-tile__txt{padding:16px 18px 18px;display:block}
.lay-item b{font-size:1.12rem;line-height:1.35;color:var(--c-fg);font-weight:400}
.lay-tile__txt>span{display:block;color:var(--c-muted);font-size:.98rem;line-height:1.55}
.lay-tile__meta{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--c-key);font-weight:800;font-size:.88rem}
.lay-tile__meta::before{content:"";width:9px;height:9px;background:var(--jx-shu);border-radius:2px;transform:rotate(-8deg)}
.lay-link-card__img{border-bottom:5px solid var(--jx-ai)}
.lay-more-links--feat>.lay-item:first-child{border-left:8px solid var(--jx-ai)}
.lay-more-links--feat>.lay-item:first-child .lay-link-card__img{border-bottom:0}
.lay-more-links--feat>.lay-item:first-child .lay-tile__txt{padding:22px 26px}

/* ---------- FAQ: answers open under a red-ringed marker ---------- */
.lay-questions{padding:34px 0 10px}
.lay-questions>h2{margin:0 0 .6em}
.lay-questions details{border:0;border-bottom:1px solid color-mix(in srgb,var(--c-key) 16%,transparent);padding:0}
.lay-questions summary{list-style:none;position:relative;display:block;padding:16px 8px 16px 46px;min-height:44px;font-size:1.06rem;line-height:1.45;cursor:pointer;color:var(--c-fg)}
.lay-questions summary::-webkit-details-marker{display:none}
.lay-questions summary::before{content:"";position:absolute;left:6px;top:15px;width:24px;height:24px;border-radius:50%;
 box-shadow:inset 0 0 0 2.5px var(--jx-shu);background:linear-gradient(var(--jx-shu),var(--jx-shu)) center/10px 2.5px no-repeat,
 linear-gradient(var(--jx-shu),var(--jx-shu)) center/2.5px 10px no-repeat;transition:transform .2s ease}
.lay-questions details[open]>summary::before{background:linear-gradient(var(--jx-on),var(--jx-on)) center/10px 2.5px no-repeat,var(--jx-shu);transform:rotate(180deg)}
.lay-questions summary:hover{color:var(--c-key)}
.lay-questions details>p{margin:0 0 18px 46px;max-width:64ch;color:var(--c-fg)}

/* ---------- breadcrumbs, call to action ---------- */
.lay-where{font-size:.92rem;margin:18px 0 14px;color:var(--c-muted)}
.lay-where a{color:var(--c-key);font-weight:700;text-decoration:none}
.lay-where a:hover{text-decoration:underline}
.lay-action{background:var(--jx-ai);color:var(--jx-on);box-shadow:none;border:0;padding:28px 22px;border-radius:var(--c-corner);position:relative;overflow:hidden}
.lay-action::after{content:"";position:absolute;right:22px;top:50%;width:46px;height:46px;margin-top:-23px;background:var(--jx-shu);border-radius:8px;transform:rotate(-10deg);
 box-shadow:inset 0 0 0 4px var(--jx-shu),inset 0 0 0 6px color-mix(in srgb,#fff 70%,transparent)}
.lay-action-link{background:var(--jx-on);color:var(--jx-ai);font-weight:800;min-height:48px;padding:.75em 1.6em;display:inline-flex;align-items:center;text-decoration:none}
.lay-action-link:hover{background:#fff;color:var(--jx-ai)}

/* ---------- hub ---------- */
.lay-main-col>h1{font-size:40px;line-height:1.2;margin:.2em 0 .3em}
.lay-main-col>h1+.lay-summary{color:var(--c-fg);font-size:1.14rem;max-width:44em}

/* ---------- article: starts under an indigo band ---------- */
.lay-post__head--band{position:relative;background:var(--jx-ai);border-radius:var(--c-corner);padding:32px 34px 30px 40px;overflow:hidden;
 box-shadow:inset 8px 0 0 var(--jx-shu)}
.lay-post__head--band::after{content:"";position:absolute;right:-30px;bottom:-30px;width:150px;height:150px;border-radius:50%;
 border:14px solid color-mix(in srgb,var(--jx-on) 8%,transparent)}
.lay-post__head--band h1{font-size:clamp(1.8rem,4.4vw,2.4rem);line-height:1.25;margin:.25em 0 .4em;color:var(--jx-on);position:relative;z-index:1}
.lay-post__head--band .lay-post__kicker{display:inline-block;color:var(--jx-ai);background:var(--jx-on);padding:4px 12px;border-radius:999px;font-weight:800;font-size:.88rem;text-decoration:none}
.lay-post__head--band .lay-post__meta{color:var(--jx-on2);font-size:.95rem}
.lay-post .lay-on-this-page--post{background:var(--c-card);border:0;border-left:5px solid var(--jx-shu);box-shadow:0 12px 26px -22px color-mix(in srgb,var(--c-key) 70%,transparent)}
.lay-post .lay-on-this-page--post strong{font-family:var(--c-heading);font-weight:400;color:var(--c-fg)}
.lay-on-this-page--chips a{background:var(--jx-wash);border-color:transparent;color:var(--c-key);font-weight:700;min-height:36px;display:inline-flex;align-items:center}
.lay-on-this-page--chips a:hover{background:var(--jx-ai);color:var(--jx-on)}
.lay-post .lay-summary{font-size:1.2rem;line-height:1.65}
.lay-post .lay-summary::first-letter{color:var(--jx-shu-ink)}
.lay-post .lay-chunk{padding:26px 0 8px}
.lay-post .lay-chunk:nth-of-type(odd):not(.lay-questions){background:none;border-image:none}
.lay-post .lay-chunk>h2{font-size:clamp(1.3rem,3vw,1.5rem)}
.lay-post blockquote{margin:1.4em 0;padding:14px 20px;background:var(--c-card);border-left:5px solid var(--jx-ai);border-radius:0 var(--c-corner) var(--c-corner) 0}

/* ---------- footer: indigo again, closing the page ---------- */
.lay-bottom{background:url(/assets/img/d-seigaiha.svg) 0 0/40px 20px repeat,var(--jx-ai);color:var(--jx-on2);border-top:6px solid var(--jx-shu);margin-top:40px;padding:34px 0 40px;font-size:.98rem}
.lay-bottom strong{font-family:var(--c-heading);font-weight:400;font-size:1.15rem;color:var(--jx-on)}
.lay-bottom a{color:var(--jx-on);text-decoration:none;min-height:32px;display:inline-flex;align-items:center}
.lay-bottom a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--jx-shu)}
.lay-bottom p{color:var(--jx-on2)}
.lay-bottom .lay-langpills a{border-color:color-mix(in srgb,var(--jx-on) 35%,transparent);color:var(--jx-on)}
.lay-bottom .lay-langpills a[aria-current]{background:var(--jx-on);color:var(--jx-ai);border-color:var(--jx-on)}

/* ---------- phones ---------- */
@media (max-width:700px){
 .lay-header__in{min-height:0;padding-top:10px;padding-bottom:10px;gap:6px 10px}
 .lay-header-bar .lay-wordmark{font-size:1.05rem}
 .lay-wordmark svg{width:38px;height:38px;flex-basis:38px}
 .lay-header-bar .lay-primary-nav>a{padding:6px 10px;font-size:.95rem}
 .lay-header-bar .lay-codes{margin-left:0}
 .lay-header-bar .lay-codes a{min-width:36px}
 .lay-intro{padding:18px 0 24px}
 .lay-intro h1{font-size:30px;margin-bottom:8px}
 .lay-intro .lay-summary{font-size:1.02rem}
 .lay-intro--art{grid-template-columns:minmax(0,1fr) auto;gap:12px}
 .lay-intro .lay-art{display:flex;margin-right:0;gap:6px}
 .lay-intro .lay-art::before{font-size:26px}
 .lay-intro .lay-art::after{font-size:10px}
 .lay-intro .lay-art svg{width:38px;height:38px}
 .lay-calc-area{padding:22px 0 20px}
 .lay-chunk{padding:26px 0 14px}
 .lay-main-col>h1{font-size:30px}
 .lay-post__head--band{padding:24px 20px 22px 26px}
 .lay-questions summary{padding-left:40px}
 .lay-questions details>p{margin-left:0}
 .lay-action{padding:24px 16px 80px}
 .lay-action::after{top:auto;bottom:18px;right:50%;margin:0 -23px 0 0}
 .lay-data-table{min-width:0}
}
@media (min-width:701px) and (max-width:900px){
 .lay-intro .lay-art::before{font-size:32px}
 .lay-intro h1{font-size:36px}
}
@media (prefers-reduced-motion:reduce){
 .lay-wordmark svg,.lay-item--img,.lay-questions summary::before{transition:none}
}
@media print{
 .lay-header-bar,.lay-intro,.lay-bottom{background:none;color:var(--c-fg);border-image:none}
 .lay-intro h1,.lay-intro .lay-summary{color:var(--c-fg)}
}