:root{--color-paper:#fff7ed;--color-panel:#ffffff;--color-type:#2b1a0e;--color-soft:#7a5a43;--color-brand:#c2410c;--color-second:#0369a1;--color-edge:#f6e3cf;--color-rad:4px;--color-measure:1140px;--color-heading:'Playfair Display',system-ui,sans-serif;--color-f2:'Lato',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(--color-paper);color:var(--color-type);font:16px/1.65 var(--color-f2)}
img{max-width:100%;height:auto} a{color:var(--color-brand);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(--color-heading);line-height:1.2;letter-spacing:-.01em;color:var(--color-type)}
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}
.pageWidth{max-width:var(--color-measure);margin:0 auto;padding:0 1rem} .articleArea{max-width:var(--color-measure);margin:0 auto;padding:1.2rem 1rem 3rem}
.toContent{position:absolute;left:-9999px} .toContent:focus{left:1rem;top:1rem;background:var(--color-panel);padding:.5rem;z-index:99}
.topbarRow{max-width:var(--color-measure);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--color-heading);color:var(--color-type);text-decoration:none}
.siteNav{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .siteNav a{color:var(--color-type);text-decoration:none;font-weight:600;font-size:.95rem}
.banner{background:var(--color-panel);border-bottom:1px solid var(--color-edge)}  
.headline{margin:1rem 0 1.4rem} .summary{font-size:1.12rem;max-width:46em;color:var(--color-soft)} .headline{text-align:center} .headline .summary{margin-left:auto;margin-right:auto}
.app{margin:1.4rem 0 2rem}
.tip{margin:1.4em 0;padding:.9em 1.1em;background:var(--color-panel);border-left:4px solid var(--color-second);border-radius:0 var(--color-rad) var(--color-rad) 0}
.formulaBox{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--color-panel);border:1px dashed var(--color-brand);border-radius:var(--color-rad);overflow-x:auto}
.gridWrap{margin:1.2em 0;overflow-x:auto;border:1px solid var(--color-edge);border-radius:var(--color-rad);background:var(--color-panel)}
.facts{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .facts th,.facts td{padding:.5em .75em;border-bottom:1px solid var(--color-edge);text-align:left}
.facts thead th{background:color-mix(in srgb,var(--color-edge) 60%,var(--color-panel))}
ol.numbered{padding-left:1.3em} ol.numbered>li{margin:.5em 0}
.graphic{margin:1.6em 0;text-align:center} .graphic img{width:100%;max-width:720px;border-radius:var(--color-rad);border:1px solid var(--color-edge);background:#fff} .graphic figcaption{font-size:.9em;color:var(--color-soft)}
.moreLinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.linkCard{display:block;padding:1.1rem;background:var(--color-panel);border-radius:var(--color-rad);border:1px solid var(--color-edge);color:var(--color-type);text-decoration:none}
.linkCard b{display:block;font-family:var(--color-heading);margin-bottom:.35rem} .linkCard span{color:var(--color-soft);font-size:.92rem} .linkCard:hover{border-color:var(--color-brand)}
.linkCard--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .linkCard--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--color-type) 14%,transparent)}
.cardImg{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .cardTxt{display:block;padding:1rem 1.1rem 1.1rem} .cardTxt>span{display:block}
.blist a,.brow,.postKicker{background:none!important}
.cardMeta{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--color-brand)}
.moreLinks--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .moreLinks--feat>.linkCard:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .moreLinks--feat>.linkCard:first-child b{font-size:1.35rem}
.blist{display:grid;gap:1rem;margin:1.2em 0} .brow{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--color-panel);border:1px solid var(--color-edge);border-radius:var(--color-rad);overflow:hidden;color:var(--color-type);text-decoration:none}
.brow .cardImg{height:100%;aspect-ratio:auto;min-height:126px} .brow b{display:block;font-family:var(--color-heading);font-size:1.12rem;margin-bottom:.3rem} .brow .cardTxt>span{color:var(--color-soft);font-size:.93rem} .brow:hover{border-color:var(--color-brand)}
.blist--min{list-style:none;padding:0;counter-reset:bl;gap:0} .blist--min li{counter-increment:bl;border-top:1px solid var(--color-edge)} .blist--min li:last-child{border-bottom:1px solid var(--color-edge)}
.blist--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--color-type);text-decoration:none} .blist--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--color-heading);color:var(--color-brand)}
.blist--min b{font-family:var(--color-heading);font-size:1.15rem} .blist--min span{color:var(--color-soft);font-size:.93rem} .blist--min a:hover b{color:var(--color-brand)}
.postHead--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--color-rad);overflow:hidden} .postHead--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.postOv{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .postOv h1,.postOv .postMeta,.postOv .postKicker{color:#fff}
.postHead--band{background:var(--color-brand);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--color-rad)} .postHead--band h1,.postHead--band .postMeta,.postHead--band .postKicker{color:#fff}
.postHead--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .postHead--split .postCover{margin:0}
.contents--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .contents--chips li{margin:0} .contents--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--color-edge);border-radius:999px;background:var(--color-paper);text-decoration:none;font-size:.88rem}
.contents--rail{background:none;border:0;border-left:3px solid var(--color-second);border-radius:0;padding:.2rem 0 .2rem 1rem}
.locale--globe summary{display:flex;align-items:center;gap:.35rem} .langpills{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .langpills a{padding:.25rem .7rem;border:1px solid var(--color-edge);border-radius:999px;text-decoration:none} .langpills a[aria-current]{background:var(--color-brand);border-color:var(--color-brand);color:#fff}
@media (max-width:700px){.moreLinks--feat{grid-template-columns:1fr} .moreLinks--feat>.linkCard:first-child{display:flex} .brow{grid-template-columns:1fr} .brow .cardImg{min-height:0;aspect-ratio:1200/630} .postHead--split{grid-template-columns:1fr} .postOv{position:static;background:var(--color-brand);padding:1.2rem} .postHead--overlay>img{min-height:0}}
.post{max-width:48rem;margin:0 auto} .postHead{margin:.6rem 0 1.2rem} .postHead h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.postKicker{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--color-brand);text-decoration:none}
.upd{color:var(--color-soft);font-size:.9rem;margin:2rem 0 0} .sign{font-style:italic;color:var(--color-soft)} .postMeta{color:var(--color-soft);font-size:.92rem;margin:0} .postCover{margin:0 0 1.6rem} .postCover img{display:block;width:100%;height:auto;border-radius:var(--color-rad)}
.post .summary{font-size:1.2rem;color:var(--color-type)} .post .summary::first-letter{font-family:var(--color-heading);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--color-brand)}
.post .contents--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--color-panel);border:1px solid var(--color-edge);border-left:4px solid var(--color-brand);border-radius:var(--color-rad);font-size:.95rem}
.contents--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .contents--post li{margin:.2rem 0}
.post h3{color:var(--color-brand)} .post blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--color-second);font-size:1.1em}
.faqGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem} .faqGrid>div{background:var(--color-panel);border:1px solid var(--color-edge);border-radius:var(--color-rad);padding:1rem} .help h3{margin-top:0;font-size:1rem}
.crumbNav{font-size:.88rem;color:var(--color-soft);margin:.4rem 0 1rem} .crumbNav a{color:var(--color-soft)}
.action{margin:2.4rem 0;padding:1.4rem;background:var(--color-panel);border-radius:var(--color-rad);border:1px solid var(--color-edge);text-align:center}
.actionLink{display:inline-block;padding:.7em 1.4em;background:var(--color-brand);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.bottom{border-top:1px solid var(--color-edge);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--color-soft);background:var(--color-panel)}
.bottom nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .bottom a{color:var(--color-soft)} .bottom{text-align:center} .bottom nav{justify-content:center}


.locale{position:relative} .locale summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--color-edge);border-radius:999px;font-size:.85rem}
.localeList{position:absolute;right:0;top:120%;background:var(--color-panel);border:1px solid var(--color-edge);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.localeList a{padding:.3rem .5rem;text-decoration:none;color:var(--color-type)} .localeList a[aria-current]{font-weight:700;color:var(--color-brand)}
.codes{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .codes a{text-decoration:none;color:var(--color-soft);padding:.1rem .3rem;border-radius:4px} .codes a[aria-current]{color:var(--color-brand);background:color-mix(in srgb,var(--color-brand) 12%,transparent)}
[data-ad]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-ad]:empty{margin:0}
[data-ad="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--color-panel)}
[data-ad="sidebar_left"],[data-ad="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-ad="sidebar_left"]{left:12px} [data-ad="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-ad="sidebar_left"],[data-ad="sidebar_right"]{display:none}}
.adx{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--color-soft)}
.actionLink{border-radius:var(--color-rad);box-shadow:0 4px 0 color-mix(in srgb,var(--color-brand) 55%,#000)} .actionLink:active{transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--color-brand) 55%,#000)}
.gridWrap{border:0;border-top:3px solid var(--color-brand);border-radius:0;background:transparent} .facts thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.segment a:not(.actionLink):not(.linkCard){text-decoration:none;font-weight:600} .segment a:not(.actionLink):not(.linkCard):hover{text-decoration:underline}
@media (max-width:640px){.topbarRow{gap:.5rem} .siteNav{gap:.8rem}}

/* Name compatibility tool: letter tiles crossed out like a notebook game. Only site tokens (--t-*) for colour, radius, fonts. */
.nc-container {
    color: var(--color-type);
    font-family: var(--color-f2);
    color-scheme: inherit;
    line-height: 1.5;
    max-width: 100%;
    font-variant-numeric: tabular-nums;
}
.nc-container *, .nc-container *::before, .nc-container *::after { box-sizing: border-box; }
.nc-container [hidden] { display: none !important; }
.nc-container p { margin: 0; }
.nc-sr {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nc-h3 { font-family: var(--color-heading); font-size: 1.15rem; font-weight: 700; margin: 0 0 .75rem; color: var(--color-type); }

/* ---------- mode switch ---------- */
.nc-modes {
    display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; padding: .3rem;
    background: color-mix(in srgb, var(--color-brand) 7%, var(--color-panel)); border: 1px solid var(--color-edge); border-radius: var(--color-rad);
}
.nc-mode {
    flex: 1 1 10rem; min-height: 44px; padding: .5rem .9rem; font: inherit; font-weight: 700; cursor: pointer;
    color: var(--color-soft); background: transparent; border: 0; border-radius: var(--color-rad);
}
.nc-mode[aria-pressed="true"] { color: var(--color-panel); background: var(--color-brand); }

/* ---------- form ---------- */
.nc-form { display: grid; gap: .9rem; }
.nc-names { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .6rem; align-items: start; }
.nc-names-crush { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.nc-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.nc-label { font-size: .82rem; font-weight: 700; color: var(--color-soft); text-transform: uppercase; letter-spacing: .06em; }
.nc-input {
    width: 100%; min-height: 50px; padding: .6rem .8rem; font: inherit; font-size: 1.15rem;
    color: var(--color-type); background-color: var(--color-panel); border: 2px solid var(--color-edge); border-radius: var(--color-rad);
    color-scheme: inherit;
}
textarea.nc-input { font-size: 1.05rem; resize: vertical; min-height: 9rem; line-height: 1.45; }
.nc-input::placeholder { color: var(--color-soft); opacity: .75; }
.nc-input[aria-invalid="true"] { border-color: var(--color-second); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-second) 22%, transparent); }
.nc-err { min-height: 1.2em; font-size: .9rem; font-weight: 700; color: var(--color-second); }
.nc-swap {
    margin-top: 1.55rem; width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-brand); background: var(--color-panel); border: 2px solid var(--color-edge); border-radius: 50%; cursor: pointer;
}
.nc-swap:hover { border-color: var(--color-brand); }
.nc-hint { font-size: .9rem; color: var(--color-soft); }
.nc-options { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; }
.nc-opt { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.nc-legend { width: 100%; padding: 0; margin-bottom: .35rem; font-size: .82rem; font-weight: 700; color: var(--color-soft); text-transform: uppercase; letter-spacing: .06em; }
.nc-chip { position: relative; display: inline-flex; cursor: pointer; }
.nc-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nc-chip span {
    display: inline-flex; align-items: center; min-height: 44px; padding: .45rem .95rem; font-weight: 700; font-size: .95rem;
    color: var(--color-type); background: var(--color-panel); border: 2px solid var(--color-edge); border-radius: 999px;
}
.nc-chip input:checked + span { color: var(--color-brand); border-color: var(--color-brand); background: color-mix(in srgb, var(--color-brand) 10%, var(--color-panel)); }
.nc-chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--color-brand) 55%, transparent); outline-offset: 2px; }

.nc-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.nc-btn {
    min-height: 48px; padding: .6rem 1.3rem; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
    border-radius: var(--color-rad); border: 2px solid var(--color-brand);
}
.nc-btn-primary { color: var(--color-panel); background: var(--color-brand); }
.nc-btn-primary:hover { background: color-mix(in srgb, var(--color-brand) 86%, var(--color-type)); }
.nc-btn-ghost { color: var(--color-brand); background: transparent; }
.nc-btn-ghost:hover { background: color-mix(in srgb, var(--color-brand) 8%, transparent); }
.nc-container button:focus-visible, .nc-input:focus-visible, .nc-history-sum:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-brand) 55%, transparent); outline-offset: 2px;
}
.nc-empty {
    margin-top: 1.1rem !important; padding: 1rem 1.1rem; color: var(--color-soft); text-align: center;
    border: 2px dashed var(--color-edge); border-radius: var(--color-rad);
}

/* ---------- result hero ---------- */
.nc-result, .nc-crush { margin-top: 1.4rem; display: grid; gap: 1.1rem; }
.nc-counted { font-weight: 700; letter-spacing: .04em; color: var(--color-soft); overflow-wrap: anywhere; }
.nc-hero { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: .8rem; }
.nc-card {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    gap: .2rem; padding: 1rem .8rem; min-height: 11rem; background: var(--color-panel); border: 2px solid var(--color-edge); border-radius: var(--color-rad);
}
.nc-ring-box { position: relative; display: block; width: 128px; height: 128px; }
.nc-ring { display: block; width: 128px; height: 128px; }
.nc-ring-bg { stroke: color-mix(in srgb, var(--color-brand) 14%, var(--color-panel)); }
.nc-ring-fg { stroke: var(--color-brand); }
.nc-pct {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: var(--color-heading); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--color-type);
}
.nc-inf .nc-pct { font-size: 2.8rem; color: var(--color-brand); }
.nc-card-label, .nc-m-sys, .nc-fl-sub { font-size: .82rem; font-weight: 700; color: var(--color-soft); text-transform: uppercase; letter-spacing: .06em; }
.nc-fl-sub { text-transform: none; letter-spacing: 0; font-weight: 600; }
.nc-fl-letter {
    display: inline-flex; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem;
    font-family: var(--color-heading); font-weight: 700; font-size: 2.6rem; line-height: 1;
    color: var(--color-panel); background: var(--color-brand); border-radius: var(--color-rad); transform: rotate(-4deg);
}
.nc-flames-card[data-letter=""] .nc-fl-letter { color: var(--color-soft); background: color-mix(in srgb, var(--color-soft) 15%, var(--color-panel)); transform: none; }
.nc-fl-word { font-family: var(--color-heading); font-weight: 700; font-size: 1.35rem; }
.nc-m-pair { font-family: var(--color-heading); font-weight: 700; font-size: 1.9rem; line-height: 1.1; color: var(--color-second); }
.nc-m-level {
    display: inline-block; padding: .2rem .8rem; font-weight: 700; border-radius: 999px;
    color: var(--color-second); background: color-mix(in srgb, var(--color-second) 12%, var(--color-panel));
}
.nc-reading { font-size: 1.05rem; }
.nc-disclaimer {
    padding: .65rem .85rem; font-size: .9rem; color: var(--color-soft);
    border-left: 4px solid var(--color-second); background: color-mix(in srgb, var(--color-second) 6%, var(--color-panel)); border-radius: var(--color-rad);
}

/* ---------- panels ---------- */
.nc-panel { padding: 1.1rem; background: var(--color-panel); border: 1px solid var(--color-edge); border-radius: var(--color-rad); min-width: 0; }

/* FLAMES board */
.nc-board { display: grid; gap: .7rem; padding: .9rem; border-radius: var(--color-rad);
    background: repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--color-second) 16%, transparent) 27px 28px), var(--color-paper); }
.nc-board-row { display: grid; gap: .3rem; }
.nc-row-name { font-size: .85rem; font-weight: 700; color: var(--color-soft); overflow-wrap: anywhere; }
.nc-tiles { display: flex; flex-wrap: wrap; gap: .3rem; }
.nc-tile, .nc-ft {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.4rem; font-family: var(--color-heading); font-weight: 700; font-size: 1.25rem;
    color: var(--color-type); background: var(--color-panel); border: 2px solid var(--color-edge); border-radius: var(--color-rad);
}
.nc-tile::after, .nc-ft::after {
    content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 3px; background: var(--color-brand);
    border-radius: 999px; transform: rotate(-18deg) scaleX(0); transform-origin: left center;
}
.nc-struck { color: var(--color-soft); background: color-mix(in srgb, var(--color-soft) 8%, var(--color-panel)); }
.nc-struck::after, .nc-ft-out::after { transform: rotate(-18deg) scaleX(1); }
.nc-flames-row { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .4rem; padding: 0; }
.nc-ft { width: 2.9rem; height: 3.1rem; font-size: 1.6rem; }
.nc-ft-out { color: var(--color-soft); opacity: .6; }
.nc-ft-win { color: var(--color-panel); background: var(--color-brand); border-color: var(--color-brand); }
.nc-flames-none .nc-ft { opacity: .45; }
.nc-steps { margin: .7rem 0 0; padding-left: 1.4rem; display: grid; gap: .2rem; color: var(--color-soft); }
.nc-step { opacity: .45; }
.nc-step-on { opacity: 1; color: var(--color-type); }
.nc-step-last.nc-step-on { font-weight: 700; color: var(--color-brand); }
.nc-board-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

/* LOVES pyramid */
.nc-loves-how { font-size: .92rem; color: var(--color-soft); margin-bottom: .7rem !important; }
.nc-pyramid { display: grid; gap: .25rem; justify-items: center; }
.nc-prow { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; max-width: 100%; }
.nc-pd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 2rem;
    font-weight: 700; font-size: 1.05rem; border-radius: var(--color-rad);
    background: color-mix(in srgb, var(--color-brand) 8%, var(--color-panel)); border: 1px solid var(--color-edge);
}
.nc-prow-head .nc-pd { background: transparent; border-color: transparent; font-family: var(--color-heading); color: var(--color-brand); }
.nc-prow-final .nc-pd { color: var(--color-panel); background: var(--color-brand); border-color: var(--color-brand); font-size: 1.25rem; }
.nc-prow-loop .nc-pd { color: var(--color-second); border: 2px dashed var(--color-second); background: color-mix(in srgb, var(--color-second) 8%, var(--color-panel)); }
.nc-loves-note { margin-top: .7rem !important; text-align: center; font-weight: 700; }

/* name numbers */
.nc-people { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; margin-bottom: .9rem; }
.nc-person { min-width: 0; display: grid; gap: .45rem; }
.nc-person-name { font-family: var(--color-heading); font-weight: 700; font-size: 1.1rem; overflow-wrap: anywhere; }
.nc-letters { display: flex; flex-wrap: wrap; gap: .2rem; }
.nc-lc { display: inline-grid; grid-template-rows: auto auto auto; min-width: 1.75rem; text-align: center; border: 1px solid var(--color-edge); border-radius: var(--color-rad); overflow: hidden; }
.nc-lc-l { padding: .1rem .2rem; font-family: var(--color-heading); background: color-mix(in srgb, var(--color-brand) 10%, var(--color-panel)); }
.nc-lc-p { font-size: .85rem; color: var(--color-brand); }
.nc-lc-c { font-size: .85rem; color: var(--color-second); border-top: 1px dashed var(--color-edge); }
.nc-sum { font-size: .92rem; overflow-wrap: anywhere; }
.nc-sum-k { font-weight: 700; }
.nc-sum-p .nc-sum-k { color: var(--color-brand); }
.nc-sum-c .nc-sum-k { color: var(--color-second); }
.nc-level-text { margin-bottom: .4rem !important; }
.nc-cmp-master, .nc-cmp-note, .nc-legend-line { font-size: .9rem; color: var(--color-soft); }
.nc-chart-wrap { margin: .6rem 0 .4rem; max-width: 100%; }
.nc-chart { border-collapse: separate; border-spacing: 2px; font-size: .85rem; margin: 0 auto; }
.nc-chart-cap { caption-side: top; text-align: left; font-size: .85rem; color: var(--color-soft); padding-bottom: .3rem; }
.nc-chart th, .nc-chart td { width: 1.85rem; height: 1.85rem; padding: 0; text-align: center; border-radius: var(--color-rad); }
.nc-chart th { color: var(--color-soft); font-weight: 700; }
.nc-chart th.nc-hl { color: var(--color-panel); background: var(--color-brand); }
.nc-cell { color: var(--color-soft); background: color-mix(in srgb, var(--color-edge) 45%, var(--color-panel)); }
.nc-c-natural { color: var(--color-brand); }
.nc-c-complementary { color: var(--color-second); }
.nc-cross { background: color-mix(in srgb, var(--color-brand) 12%, var(--color-panel)); }
.nc-pick { color: var(--color-panel); background: var(--color-brand); outline: 2px solid var(--color-type); outline-offset: -2px; }

/* crush list */
.nc-crush-wrap { max-width: 100%; overflow-x: auto; }
.nc-crush-table { width: 100%; border-collapse: collapse; background: var(--color-panel); }
.nc-crush-table th, .nc-crush-table td { padding: .5rem .55rem; text-align: left; border-bottom: 1px solid var(--color-edge); vertical-align: middle; }
.nc-crush-table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-soft); }
.nc-cr-name { font-weight: 700; overflow-wrap: anywhere; }
.nc-cr-pct { font-family: var(--color-heading); font-weight: 700; font-size: 1.15rem; color: var(--color-brand); white-space: nowrap; }
.nc-crush-body tr:first-child .nc-cr-pct { font-size: 1.35rem; }
.nc-cr-btn {
    min-height: 44px; padding: .3rem 0; font: inherit; font-weight: 700; text-align: left; cursor: pointer; overflow-wrap: anywhere;
    color: var(--color-brand); background: transparent; border: 0; text-decoration: underline; text-underline-offset: 3px;
}
.nc-crush-note { font-size: .9rem; color: var(--color-soft); }

/* copy, status, history */
.nc-copy-box { width: 100%; min-height: 7rem; margin-top: 1rem; padding: .6rem; font: inherit; font-size: .9rem; color: var(--color-type); background: var(--color-panel); border: 2px solid var(--color-second); border-radius: var(--color-rad); }
.nc-toast {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.nc-toast.nc-toast-on {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
    margin-top: .8rem; padding: .55rem .9rem; font-weight: 700; color: var(--color-panel); background: var(--color-type); border-radius: var(--color-rad);
}
.nc-history { margin-top: 1.4rem; padding: .3rem .9rem; border: 1px solid var(--color-edge); border-radius: var(--color-rad); background: var(--color-panel); }
.nc-history-sum { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.nc-hist-list { list-style: none; margin: .3rem 0; padding: 0; display: grid; gap: .3rem; }
.nc-hist-btn {
    width: 100%; min-height: 44px; display: flex; justify-content: space-between; gap: .6rem; padding: .4rem .7rem; text-align: left;
    font: inherit; color: var(--color-type); background: var(--color-paper); border: 1px solid var(--color-edge); border-radius: var(--color-rad); cursor: pointer;
}
.nc-hist-names { overflow-wrap: anywhere; min-width: 0; }
.nc-hist-res { font-weight: 700; color: var(--color-brand); white-space: nowrap; }
.nc-hist-empty, .nc-hist-note { font-size: .9rem; color: var(--color-soft); margin: .3rem 0 !important; }
.nc-hist-clear { margin: .3rem 0 .6rem; }

/* ---------- motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .nc-tile::after, .nc-ft::after { transition: transform .28s ease-out; }
    .nc-tile, .nc-ft { transition: color .25s, background-color .25s, opacity .25s; }
    .nc-step { transition: opacity .25s; }
    .nc-ring-fg { transition: stroke-dashoffset .9s ease-out; }
    .nc-ft-win { animation: nc-pop .45s ease-out; }
    .nc-result:not([hidden]) .nc-hero { animation: nc-rise .35s ease-out; }
    @keyframes nc-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
    @keyframes nc-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
    .nc-names, .nc-names-crush { grid-template-columns: minmax(0, 1fr); }
    .nc-swap { margin: -.4rem auto 0; }
    .nc-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .nc-score { grid-column: 1 / -1; }
    .nc-people { grid-template-columns: minmax(0, 1fr); }
    .nc-crush-table { font-size: .9rem; }
    .nc-crush-table th, .nc-crush-table td { padding: .4rem .25rem; }
    .nc-cr-pct { font-size: 1rem; }
}
@media (max-width: 400px) {
    .nc-chart th, .nc-chart td { width: 1.6rem; height: 1.6rem; }
    .nc-tile { width: 1.85rem; height: 2.2rem; font-size: 1.1rem; }
    .nc-ft { width: 2.5rem; height: 2.8rem; }
}
@media print {
    .nc-modes, .nc-form, .nc-actions, .nc-board-actions, .nc-history, .nc-empty { display: none !important; }
}

/* design: sites/<d>/design/site.css */
/* Word-game night on a sunny kitchen table — name-compatibility.com */
:root{
 --nc-face:color-mix(in srgb,var(--color-edge) 86%,var(--color-soft));
 --nc-edge:color-mix(in srgb,var(--color-edge) 45%,var(--color-soft));
 --nc-ledge:color-mix(in srgb,var(--color-brand) 16%,var(--color-edge));
 --nc-ging:color-mix(in srgb,var(--color-brand) 4%,transparent);
 --nc-pencil:color-mix(in srgb,var(--color-second) 70%,transparent);
 --nc-rule:color-mix(in srgb,var(--color-second) 14%,transparent);
 --nc-pad:var(--color-panel);
}
/* gingham tablecloth in morning light */
body{background-color:var(--color-paper);background-image:
 radial-gradient(900px 420px at 50% -120px,color-mix(in srgb,var(--color-panel) 70%,transparent),transparent 70%),
 linear-gradient(90deg,var(--nc-ging) 50%,transparent 0),
 linear-gradient(var(--nc-ging) 50%,transparent 0);
 background-size:auto,34px 34px,34px 34px;background-repeat:no-repeat,repeat,repeat}
::selection{background:color-mix(in srgb,var(--color-second) 20%,transparent)}
:focus-visible{outline:2px solid var(--color-second);outline-offset:2px}

/* ---------- header: birch tile rack with a wooden ledge ---------- */
.banner{background:var(--color-panel);border-bottom:0;position:relative}
.banner::after{content:'';display:block;height:12px;background:
 linear-gradient(var(--nc-ledge) 0 5px,var(--nc-edge) 5px 7px,color-mix(in srgb,var(--nc-edge) 70%,var(--color-type)) 7px 9px,transparent 9px),
 transparent;box-shadow:none}
.topbarRow{padding:.75rem 1rem .55rem}
.logo{letter-spacing:-.01em}
.logo svg{flex:none;border-radius:7px;box-shadow:0 3px 0 color-mix(in srgb,var(--color-brand) 55%,var(--color-type))}
.siteNav{gap:1.15rem}
.siteNav>a{position:relative;padding:.25rem 0;color:var(--color-type)}
.siteNav>a:hover{color:var(--color-brand)}
.siteNav>a[aria-current]{background:linear-gradient(var(--nc-pencil),var(--nc-pencil)) left bottom/100% 2px no-repeat}
/* language codes stand on the rack as letter tiles */
.banner .codes{gap:.28rem;align-items:flex-end}
.banner .codes a{display:inline-block;min-width:1.85rem;padding:.32rem .25rem .26rem;text-align:center;font:700 .74rem/1 var(--color-f2);letter-spacing:.03em;color:var(--color-type);background:var(--nc-face);border-radius:4px;box-shadow:0 3px 0 var(--nc-edge);transition:transform .15s,box-shadow .15s}
.banner .codes a:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--nc-edge);color:var(--color-type)}
.banner .codes a[aria-current]{background:var(--color-brand);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--color-brand) 55%,var(--color-type))}

/* ---------- first screen: the FLAMES rack ---------- */
.headline{margin:1.8rem 0 1.2rem}
.headline h1{font-size:clamp(1.85rem,4.4vw,2.7rem);line-height:1.12;letter-spacing:-.015em;max-width:22em;margin-left:auto;margin-right:auto}
.headline .summary{color:var(--color-type);opacity:.86;font-size:1.08rem;line-height:1.65;max-width:42em}
.headline::after{content:'';display:block;width:min(420px,92%);aspect-ratio:480/124;margin:1.3rem auto 0;background:url(/assets/img/d-rack.svg) center/contain no-repeat}

/* ---------- tool on a gridded game board in a wooden frame ---------- */
.app{position:relative;padding:1.1rem;background-color:var(--color-panel);background-image:
 linear-gradient(color-mix(in srgb,var(--color-second) 5%,transparent) 1px,transparent 1px),
 linear-gradient(90deg,color-mix(in srgb,var(--color-second) 5%,transparent) 1px,transparent 1px);
 background-size:28px 28px;border:6px solid var(--nc-face);outline:1px solid var(--nc-edge);outline-offset:0;border-radius:10px;box-shadow:0 5px 0 var(--nc-edge),0 16px 30px -22px color-mix(in srgb,var(--color-type) 45%,transparent)}
@media (max-width:600px){.app{padding:.5rem;border-width:4px;border-radius:8px}}

/* ---------- section headings: one blank tile + pencil underline ---------- */
.segment{position:relative}
.segment>h2{position:relative;padding:0 0 .55rem 2.6rem;margin-top:2.6em;letter-spacing:-.012em;background:url(/assets/img/d-pencil.svg) left bottom/min(15rem,70%) 8px no-repeat}
.segment>h2::before{content:'';position:absolute;left:0;top:.02em;width:1.75rem;height:1.75rem;border-radius:5px;background:
 linear-gradient(135deg,transparent calc(50% - 1.6px),var(--nc-pencil) calc(50% - 1.6px) calc(50% + 1.6px),transparent calc(50% + 1.6px)) center/72% 72% no-repeat,
 linear-gradient(160deg,color-mix(in srgb,var(--color-panel) 45%,transparent),transparent 55%),var(--nc-face);
 box-shadow:0 3px 0 var(--nc-edge);transform:rotate(-4deg)}
.segment:nth-of-type(3n+2)>h2::before{transform:rotate(3deg)}
.segment:nth-of-type(3n)>h2::before{transform:rotate(-1deg)}
.segment h3{color:var(--color-type)}
.segment>p,.segment>ul,.segment>ol:not(.blist){max-width:47rem}
.segment ul:not([class])>li::marker{color:var(--color-brand)}
.segment strong{color:var(--color-type)}

/* steps: numbered letter tiles */
ol.numbered{list-style:none;counter-reset:st;padding-left:0}
ol.numbered>li{counter-increment:st;position:relative;padding-left:2.7rem;margin:.75em 0;min-height:1.9rem}
ol.numbered>li::before{content:counter(st);position:absolute;left:0;top:-.05em;width:1.85rem;height:1.85rem;display:grid;place-items:center;font:700 .9rem/1 var(--color-f2);color:var(--color-type);background:var(--nc-face);border-radius:5px;box-shadow:0 3px 0 var(--nc-edge)}

/* notes: a torn score-pad slip with blue rules */
.tip{position:relative;margin:1.8em 0;padding:1.15em 1.3em .75em 1.6em;line-height:1.65;background-color:var(--nc-pad);background-image:
 linear-gradient(90deg,transparent 1.05em,color-mix(in srgb,var(--color-brand) 45%,transparent) 1.05em calc(1.05em + 1.5px),transparent 0),
 repeating-linear-gradient(transparent 0 1.6em,var(--nc-rule) 1.6em 1.65em);
 background-position:0 0,0 1.2em;border:0;border-radius:2px;box-shadow:0 1px 0 var(--color-edge),0 8px 18px -14px color-mix(in srgb,var(--color-type) 50%,transparent);color:var(--color-type);
 -webkit-mask:linear-gradient(#000,#000) 0 7px/100% calc(100% - 7px) no-repeat,radial-gradient(4px at 50% 100%,#000 96%,transparent) 0 0/10px 7px repeat-x;
 mask:linear-gradient(#000,#000) 0 7px/100% calc(100% - 7px) no-repeat,radial-gradient(4px at 50% 100%,#000 96%,transparent) 0 0/10px 7px repeat-x}

/* formulas: written on a tile rack */
.formulaBox{background:var(--nc-face);border:0;border-radius:6px;box-shadow:0 4px 0 var(--nc-edge);color:var(--color-type)}

/* tables: the score pad, ruled columns and a double total rule */
.gridWrap{background:var(--color-panel);border:0;border-top:3px double var(--color-type);border-bottom:3px double var(--color-type);border-radius:0;box-shadow:0 8px 18px -16px color-mix(in srgb,var(--color-type) 45%,transparent)}
.facts caption{padding:.55em .75em .35em;font:600 .9rem/1.3 var(--color-heading);color:var(--color-soft);text-align:left}
.facts thead th{background:transparent;color:var(--color-type);border-bottom:2px solid var(--color-type);font-size:.74rem}
.facts th+th,.facts td+td{border-left:1px solid color-mix(in srgb,var(--color-brand) 22%,transparent)}
.facts td{border-bottom:1px solid var(--nc-rule)}
.facts tbody tr:hover{background:color-mix(in srgb,var(--color-second) 5%,transparent)}
.graphic img{border:0;box-shadow:0 0 0 1px var(--color-edge),0 10px 22px -18px color-mix(in srgb,var(--color-type) 50%,transparent)}

/* buttons have a tile's thickness */
.actionLink{border-radius:6px;letter-spacing:.01em;transition:transform .12s,box-shadow .12s}
.actionLink:hover{transform:translateY(-1px)}

/* ---------- FAQ: tiles that lift when touched ---------- */
.faqGrid{gap:1.1rem}
.faqGrid>div{background:var(--color-panel);border:1px solid var(--color-edge);border-radius:8px;box-shadow:0 4px 0 var(--nc-face),0 5px 0 var(--nc-edge);padding:1.05rem 1.1rem .9rem;transition:transform .15s,box-shadow .15s}
.faqGrid>div:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--nc-face),0 7px 0 var(--nc-edge)}
.help h3{font-size:1.02rem;line-height:1.3;padding-bottom:.45rem;margin-bottom:.5rem;background:url(/assets/img/d-pencil.svg) left bottom/5rem 6px no-repeat}
.faqGrid p{margin-bottom:.3em}

/* ---------- guides: numbered tiles in a list ---------- */
.blist--min li{border-top:1px dashed color-mix(in srgb,var(--color-brand) 30%,transparent)}
.blist--min li:last-child{border-bottom:1px dashed color-mix(in srgb,var(--color-brand) 30%,transparent)}
.blist--min a{grid-template-columns:3.4rem 1fr;align-items:start;padding:1.15rem .2rem}
.blist--min a::before{width:2.9rem;height:2.9rem;display:grid;place-items:center;font:700 1.1rem/1 var(--color-f2);color:var(--color-type);background:var(--nc-face);border-radius:6px;box-shadow:0 4px 0 var(--nc-edge);transition:transform .15s,background-color .15s,color .15s}
.blist--min a:hover::before{transform:translateY(-3px) rotate(-3deg);background:var(--color-brand);color:#fff}
.blist--min b{line-height:1.3}
.blist--min span{display:block;margin-top:.25rem}
.action{background:var(--color-panel);border:1px solid var(--color-edge);border-radius:10px;box-shadow:0 5px 0 var(--nc-face),0 6px 0 var(--nc-edge)}

/* ---------- breadcrumbs ---------- */
.crumbNav{font-size:.86rem;margin:.6rem 0 1.1rem}
.crumbNav a{text-decoration-color:color-mix(in srgb,var(--color-second) 40%,transparent)}

/* ---------- article ---------- */
.postHead--split{padding-bottom:1.3rem;background:url(/assets/img/d-pencil.svg) left bottom/100% 8px no-repeat}
.postKicker{padding:.4rem .6rem .34rem;color:var(--color-type);border-radius:5px;box-shadow:0 3px 0 var(--nc-edge),inset 0 0 0 100px var(--nc-face);letter-spacing:.12em}
.postKicker:hover{color:var(--color-brand)}
.postHead h1{margin-top:.45em}
.postCover img{border-radius:10px;box-shadow:0 5px 0 var(--nc-face),0 6px 0 var(--nc-edge)}
.post .contents--post{background-color:var(--nc-pad);background-image:
 linear-gradient(90deg,transparent 1.05em,color-mix(in srgb,var(--color-brand) 45%,transparent) 1.05em calc(1.05em + 1.5px),transparent 0),
 repeating-linear-gradient(transparent 0 1.7em,var(--nc-rule) 1.7em calc(1.7em + 1px));
 background-position:0 0,0 .55em;border:0;border-radius:2px;padding:1rem 1.2rem 1rem 1.9rem;box-shadow:0 1px 0 var(--color-edge),0 8px 18px -14px color-mix(in srgb,var(--color-type) 50%,transparent)}
.contents--post strong{font-family:var(--color-heading);font-size:1.02rem}
.contents--post ol{padding-left:1.4rem}
.contents--post li::marker{color:var(--color-brand);font-weight:700}
.contents--post a{text-decoration:none;color:var(--color-type);background:linear-gradient(var(--nc-pencil),var(--nc-pencil)) left bottom/0 1.5px no-repeat;transition:background-size .2s}
.contents--post a:hover{color:var(--color-brand);background-size:100% 1.5px}
.post .summary::first-letter{color:#fff;background:var(--color-brand);font-size:2.4em;line-height:1;padding:.08em .14em .12em;margin:.12em .16em 0 0;border-radius:6px;box-shadow:0 3px 0 color-mix(in srgb,var(--color-brand) 55%,var(--color-type))}
.post blockquote{border-left:0;padding:.2em 0 .2em 1.2em;background:linear-gradient(var(--nc-pencil),var(--nc-pencil)) left top/3px 100% no-repeat;font-family:var(--color-heading)}

/* ---------- footer: the box lid with spare tiles ---------- */
.bottom{position:relative;margin-top:3.4rem;padding:2.6rem 0 2.6rem;background:var(--nc-face);border-top:0;color:var(--color-type)}
.bottom::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px;background:linear-gradient(transparent 0 3px,color-mix(in srgb,var(--nc-edge) 70%,var(--color-type)) 3px 5px,var(--nc-edge) 5px 7px,var(--nc-ledge) 7px)}
.bottom::after{content:'';display:block;width:200px;height:40px;margin:1.3rem auto 0;background:url(/assets/img/d-tiles.svg) center/contain no-repeat}
.bottom p{color:var(--color-type);font-family:var(--color-heading);font-size:1rem}
.bottom a{color:var(--color-type);text-decoration-color:color-mix(in srgb,var(--color-brand) 50%,transparent)}
.bottom a:hover{color:var(--color-brand)}

@media (max-width:640px){
 .topbarRow{padding:.6rem .9rem .5rem}
 .banner .codes{gap:.22rem}
 .banner .codes a{min-width:1.6rem;padding:.3rem .2rem .24rem}
 .headline{margin-top:1.2rem}
 .headline::after{width:min(320px,94%)}
 .segment>h2{padding-left:2.25rem}
 .segment>h2::before{width:1.5rem;height:1.5rem}
 .tip{padding-left:1.45em}
}
@media (prefers-reduced-motion:reduce){
 .banner .codes a,.faqGrid>div,.blist--min a::before,.actionLink,.contents--post a{transition:none}
}