@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#142044;background:#f4f6fc;font-synthesis:none}*{box-sizing:border-box}body{margin:0}.page{max-width:1220px;padding:0 48px;margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:30px 0;border-bottom:1px solid #dce1ef}.brand{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;font-size:19px;font-weight:700}.brand-icon{display:grid;place-items:center;background:#2943df;color:white;width:42px;height:42px;border-radius:12px;font-size:18px}.header-note{font-size:14px;color:#68718b}main{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;padding-top:64px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:#2943df}h1{font-family:Manrope,sans-serif;font-size:clamp(36px,4vw,52px);line-height:1.16;letter-spacing:-.045em;margin:20px 0}p{line-height:1.6}.intro{font-size:18px;color:#626b84;margin-bottom:36px}label{font-size:14px;font-weight:700;display:block;margin-bottom:10px}.input-line{display:flex;padding:6px;border:1px solid #cbd3ed;background:white;border-radius:16px;box-shadow:0 8px 24px #14204405}.input-line:focus-within{outline:3px solid #2943df25;border-color:#2943df}input{min-width:0;width:100%;font:600 30px Manrope,sans-serif;border:0;outline:none;padding:10px 12px;color:#142044;background:transparent}button{cursor:pointer;font-family:inherit}.input-line button{border:0;background:#2943df;color:white;border-radius:11px;white-space:nowrap;padding:0 19px;font-size:15px;font-weight:600}.input-line button span{margin-left:8px}button:hover{filter:brightness(.95)}button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #8c9bf4;outline-offset:3px}.muted{font-size:14px;color:#69718a}#error{font-size:14px;color:#b22f44;min-height:0;margin:6px 0}.examples{display:flex;align-items:center;gap:8px;margin-top:20px;font-size:14px;color:#69718a}.examples button{border:1px solid #dce1ef;border-radius:8px;padding:7px 12px;background:#fff;color:#485371}.result-area{min-width:0}.result-group{margin-bottom:26px}.result-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;gap:12px}.result-heading h2{font-size:16px;margin:0}.code{font-family:Manrope,sans-serif;color:#2943df;background:#e8edff;border-radius:8px;padding:6px 11px;font-weight:800}.part-label{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#6c7694}.word-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.word-card{background:white;border:1px solid #e0e5f1;border-radius:17px;padding:21px;position:relative;min-height:125px}.word-card.recommended{border-color:#2943df;background:#2943df;color:white;box-shadow:0 12px 26px #2943df20}.word-name{font-family:Manrope,sans-serif;font-weight:800;font-size:25px;overflow-wrap:anywhere;letter-spacing:-.025em;margin:0 0 14px;text-transform:capitalize}.sound-row{font-size:14px;display:flex;flex-wrap:wrap;gap:6px;color:#667390}.sound-chip{background:#f0f3fa;padding:4px 7px;border-radius:5px}.word-card.recommended .sound-chip{background:#ffffff1c;color:#e7ebff}.pick-label{font-size:12px;display:block;margin-bottom:9px;color:#cbd4ff}.group-note{color:#68718b;font-size:14px;margin:10px 0 15px}.other{margin-top:14px;font-size:14px}.other summary{cursor:pointer;color:#626c86;padding:7px 0}.other-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.other-word{padding:8px 12px;background:white;border:1px solid #dce1ef;border-radius:8px;color:#44506c}.sequence{border:1px solid #ccd5f2;background:#fff;border-radius:14px;padding:16px;margin:10px 0}.sequence strong{font-size:20px;color:#2943df;display:block;margin-bottom:8px}.sequence small{font-size:14px;color:#68718b}.mapping{grid-column:1/-1;border-top:1px solid #dce1ef;margin-top:16px;padding-top:30px}.mapping-head{display:flex;justify-content:space-between;align-items:center}.mapping h2{font-size:17px;margin:0}.mapping-head span{font-size:14px;color:#69718a}.key-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-top:20px}.key-item{display:flex;flex-direction:column;align-items:center;gap:9px;border:1px solid #dce1ef;border-radius:11px;padding:13px 5px;background:#fff}.key-item b{font-size:21px;color:#2943df}.key-item span{font-size:14px;color:#66718d}.key-item.active{background:#e8edff;border-color:#8394f2}.mapping p{font-size:14px;color:#69718a;max-width:900px}details summary{font-size:14px;font-weight:600;cursor:pointer}footer{margin-top:35px;padding:25px 0;display:flex;justify-content:space-between;border-top:1px solid #dce1ef;color:#7c849b;font-size:12px}footer a{color:inherit}@media(min-width:900px){.result-area{padding-top:5px}}@media(max-width:800px){.page{padding:0 24px}header{padding:22px 0}.header-note{display:none}main{grid-template-columns:1fr;gap:30px;padding-top:34px}h1{font-size:40px}.intro{margin-bottom:24px}.mapping{margin-top:0}.key-grid{grid-template-columns:repeat(5,1fr)}footer{gap:15px;flex-wrap:wrap}}@media(max-width:400px){.page{padding:0 16px}.input-line button{padding:0 12px}.word-card{padding:16px}.word-name{font-size:23px}.input-line button span{display:none}}

.sequence.recommended{background:#2943df;border-color:#2943df;color:white;box-shadow:0 8px 20px #2943df20}.sequence.recommended strong,.sequence.recommended small{color:white}.sequence .pick-label{color:#65718d}.sequence.recommended .pick-label{color:#cbd4ff}.sequence-choice{display:block;width:100%;text-align:left;font-family:inherit}.sequence strong{overflow-wrap:anywhere;text-transform:capitalize;line-height:1.6}.chunk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.chunk-box{padding:16px;background:white;border:1px solid #dce1ef;border-radius:14px}.chunk-heading{font-size:14px;font-weight:700;margin-bottom:12px}.chunk-options{display:flex;flex-wrap:wrap;gap:7px}.chunk-option{border:1px solid #dce1ef;background:#f4f6fc;border-radius:7px;padding:7px 10px;font-size:14px;color:#485371}.chunk-option.selected{background:#2943df;border-color:#2943df;color:white}.examples{flex-wrap:wrap}.code{overflow-wrap:anywhere;max-width:65%}input{font-size:clamp(20px,2.5vw,30px)}@media(max-width:400px){.chunk-grid{grid-template-columns:1fr}}
/* Keep the recommendation together before the alternative choices. */
main{grid-template-columns:1fr;gap:30px;padding-top:42px}.finder{max-width:760px}h1{font-size:clamp(34px,4.5vw,52px);margin:0 0 12px}.intro{margin:0 0 24px}.finder form{max-width:620px}.result-area{padding-top:0}.suggested-heading{font-size:18px;margin:0 0 16px}.suggested-row{display:grid;grid-template-columns:1fr;gap:12px}.suggested-row.decimal-row{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);align-items:stretch}.top-picture{background:#2943df;color:white;border-radius:20px;padding:26px 30px;min-width:0;box-shadow:0 12px 28px #2943df1c}.top-picture .part-label{color:#cbd4ff;font-size:14px;letter-spacing:0;text-transform:none;margin-bottom:8px}.top-code{display:block;font-size:22px;font-weight:700;overflow-wrap:anywhere;margin-bottom:25px}.top-picture .pick-label{margin-bottom:7px}.top-word{font-family:Manrope,sans-serif;font-size:clamp(26px,3.3vw,42px);line-height:1.3;letter-spacing:-.025em;text-transform:capitalize;margin:0 0 20px;overflow-wrap:anywhere}.decimal-mark{display:flex;align-items:center;justify-content:center;font-size:60px;font-weight:800;color:#2943df;padding-bottom:25px}.top-sounds{display:flex;flex-wrap:wrap;gap:10px}.sound-piece{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font-size:14px}.sound-word{text-transform:capitalize;color:#dbe1ff}.top-picture .sound-chip{background:#ffffff20;color:white}.alternative-columns{display:grid;grid-template-columns:1fr;gap:30px;margin-top:32px}.alternative-columns.two-parts{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px}.alternative-heading{font-size:17px;margin:0 0 8px}.alternative-code{font-size:14px;color:#66718d;display:block;margin-bottom:16px}.picture-options{display:flex;flex-wrap:wrap;gap:9px}.picture-option{background:white;border:1px solid #dce1ef;border-radius:11px;color:#243154;font-size:17px;padding:13px 18px;text-transform:capitalize}.picture-option:hover{border-color:#2943df;color:#2943df}.alternative-group{min-width:0}.alternative-group .sequence strong{font-size:18px}.mapping{margin-top:4px}.header-note{font-size:14px}@media(max-width:800px){main{padding-top:30px;gap:28px}.header-note{display:block;max-width:145px;text-align:right;font-size:12px}.brand{font-size:16px}.top-picture{padding:22px 18px}.suggested-row.decimal-row{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:6px}.decimal-mark{font-size:42px}.top-word{font-size:26px}.top-code{font-size:20px;margin-bottom:20px}.alternative-columns.two-parts{gap:22px}.alternative-group .chunk-grid{grid-template-columns:1fr}}@media(max-width:480px){.top-picture{padding:18px 13px;border-radius:15px}.top-word{font-size:24px}.top-picture .part-label{font-size:13px}.top-sounds{gap:8px}.sound-piece{font-size:12px}.top-picture .sound-chip{padding:4px 5px;font-size:12px}.top-picture .sound-word{display:none}.alternative-columns.two-parts{grid-template-columns:1fr}.picture-option{font-size:16px;padding:11px 14px}.top-picture .pick-label{font-size:12px;line-height:1.5}h1{font-size:36px}}
.mode-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:0 0 24px}.mode-toggle{display:flex;background:#e5eafa;border:1px solid #d3dbf0;border-radius:12px;padding:4px;gap:4px}.mode-toggle button{border:0;border-radius:8px;padding:11px 22px;font-size:16px;font-weight:600;color:#56627e;background:transparent}.mode-toggle button[aria-pressed="true"]{background:#2943df;color:white;box-shadow:0 3px 9px #2943df20}#mode-help{font-size:14px;color:#66718d;margin:0}input::placeholder{font-size:20px;font-weight:400;color:#7b849b}.brand-icon{display:block}[hidden]{display:none!important}@media(max-width:480px){.mode-row{gap:12px}.mode-toggle button{padding:10px 20px}input::placeholder{font-size:16px}.input-line button{padding:0 12px}}