:root{--paper:#f4f1e9;--ink:#183d35;--muted:#627168;--line:#d9dfd2;--lime:#d4f493;--salmon:#f4aa8f;--white:#fffef8;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif;color-scheme:light;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16px}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button{min-height:44px}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #99632c;outline-offset:4px}a{color:inherit;text-underline-offset:4px}button:disabled{cursor:not-allowed;opacity:.65}h1,h2,h3,p{margin:0}button{border:0}svg{flex-shrink:0}::selection{background:var(--salmon)}.skip{position:absolute;top:-80px;left:20px;background:var(--ink);color:white;padding:15px;z-index:100}.skip:focus{top:10px}
.masthead{max-width:1180px;margin:auto;padding:28px 32px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;font-size:17px;font-weight:800;line-height:1.05;letter-spacing:-.7px;text-decoration:none}.brand-mark{display:flex;align-items:center;letter-spacing:-7px;padding-right:7px;justify-content:center;width:49px;height:49px;background:var(--ink);color:var(--lime);border-radius:15px;font-family:var(--serif);font-size:37px;font-style:italic}.brand-mark span{color:white}.brand-dot{color:#a84228}.masthead-right{display:flex;gap:23px;align-items:center}.lab-link{font-size:10px;font-weight:800;letter-spacing:2px;text-decoration:none}.icon-button{width:44px;height:44px;border-radius:50%;background:transparent;font-size:22px;border:1px solid var(--line)}
#app{max-width:1180px;padding:0 32px;margin:auto}.hero{padding:42px 0 35px;display:flex;align-items:flex-end;justify-content:space-between;gap:25px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;line-height:1.5}.hero .eyebrow{display:block;margin-bottom:14px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#678432;margin-right:7px}.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(35px,4.2vw,58px);line-height:1.05;letter-spacing:-2px;max-width:680px}.hero h1 em{font-style:italic;position:relative}.hero h1 em:after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:var(--salmon);z-index:-1;transform:rotate(-2deg)}.hero-note{font-size:14px;max-width:240px;line-height:1.55;color:var(--muted);padding-bottom:4px}.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(275px,1fr);gap:26px;align-items:start}.main-column{min-width:0}.pattern-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px}.pattern{background:transparent;border:1px solid #bac6b6;border-radius:12px;padding:15px 8px;min-width:0}.pattern[aria-pressed=true]{background:var(--ink);color:var(--white);border-color:var(--ink)}.pattern .pattern-pair{font-size:20px;font-family:var(--serif);font-weight:600;white-space:nowrap}.pattern-pair span{font:14px var(--sans);opacity:.6;margin:0 3px}.pattern small{display:block;font-size:10px;margin-top:7px;opacity:.8;letter-spacing:.3px}.section-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-label .eyebrow{color:var(--muted)}.text-button{background:none;padding:7px 0;font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:44px}
.microscope{background:var(--white);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 5px 0 #e8eadf;scroll-margin-top:18px}.scope-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:21px 25px 0}.scope-number{font-family:var(--serif);font-size:23px;font-style:italic;color:var(--muted)}.chip{display:inline-flex;gap:5px;align-items:center;font-size:10px;font-weight:700;padding:7px 10px;border-radius:30px;background:#edf1e8;line-height:1.35}.chip.changes,.chip.fails,.chip.meaning{background:#ffe6d6}.scope-words{padding:27px 25px 0;text-align:center;min-height:145px}.language-label{display:block;font-size:9px;letter-spacing:2px;font-weight:800;color:var(--muted);margin-bottom:12px}.word-pieces{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;align-items:center}.piece{display:inline-block;min-height:48px;font-family:var(--serif);font-size:clamp(28px,3vw,43px);letter-spacing:-1.2px;line-height:1.15;border-radius:8px;background:transparent;padding:5px 7px 8px;position:relative;max-width:100%;overflow-wrap:anywhere}.piece.ending{background:var(--salmon)}.piece.base{background:#f0f0e9}.piece[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}.beat-dot{color:#9ba89a;font-size:24px}.piece-note{font-size:12px;line-height:1.6;color:var(--muted);padding:14px 15px 0;min-height:51px;text-align:center}.meaning-tabs{display:flex;padding:4px;border:1px solid var(--line);border-radius:9px;margin:13px auto 0;width:max-content;max-width:100%}.meaning-tabs button{font-size:11px;padding:7px 13px;background:transparent;border-radius:6px;min-height:35px}.meaning-tabs button[aria-pressed=true]{background:var(--ink);color:#fff}.reveal-area{text-align:center;padding:23px 25px 26px}.prompt{font-size:13px;color:var(--muted);margin-bottom:14px}.primary{background:var(--ink);color:#fff;border-radius:11px;min-height:49px;padding:13px 20px;font-weight:700;font-size:14px}.primary .arrow{margin-left:25px;font-size:18px;color:var(--lime)}.reveal-area>.primary{width:100%}.result{padding:22px 25px 26px;border-top:1px dashed var(--line);text-align:center;margin-top:24px;background:linear-gradient(180deg,#f4f9eb00,#f4f9eb)}.result .piece.ending{background:var(--lime)}.result .piece.base{background:transparent}.result .word-pieces{animation:arrive .38s ease-out}.transform-arrow{display:block;margin-top:17px;font-size:23px;color:#789d56}.result .explanation{font-size:14px;line-height:1.65;text-align:left;margin-top:19px}.example{font-family:var(--serif);font-size:17px;line-height:1.5;padding-top:16px;margin-top:17px;border-top:1px solid var(--line);text-align:left}.example small{display:block;font-family:var(--sans);font-size:11px;color:var(--muted);margin-top:4px;line-height:1.55}.result-actions{display:flex;gap:8px;margin-top:15px;justify-content:center;flex-wrap:wrap}.outline{background:var(--white);border:1px solid #c7d1c0;border-radius:8px;padding:9px 14px;font-size:12px;font-weight:600}.sound-status{font-size:11px;color:var(--muted);line-height:1.5;margin-top:8px}.entry-sources{font-size:11px;line-height:1.6;margin-top:16px;text-align:left}.entry-sources summary{cursor:pointer;min-height:30px}.entry-sources ul{padding-left:17px}.entry-sources a{overflow-wrap:anywhere}.next-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:18px 0 28px}.next-hint{font-size:11px;color:var(--muted)}.next-row button{min-width:135px}.source-tip{font-size:10px;line-height:1.6;color:var(--muted)}
.aside{display:grid;gap:18px}.try-card{background:#e7eddf;border-radius:18px;padding:25px}.try-card h2,.family-card h2{font:400 29px var(--serif);letter-spacing:-.7px;margin:9px 0}.try-card p{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:18px}.search-wrap{display:flex;border:1px solid #b5c4af;background:var(--white);border-radius:9px;padding:4px;gap:4px}.search-wrap input{min-width:0;width:100%;border:0;background:transparent;font-size:16px;padding:10px;color:var(--ink);outline-offset:0}.search-wrap button{border-radius:6px;background:var(--ink);color:var(--white);width:44px;flex-shrink:0;font-size:22px}.try-card label{display:block;font-size:11px;margin:0 0 8px;font-weight:700}.suggestions{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px}.suggestions button{background:transparent;border:1px solid #c0ccba;border-radius:25px;min-height:36px;padding:7px 12px;font-size:11px}.search-message{font-size:12px;line-height:1.6;margin-top:12px}.family-card{border:1px solid var(--line);border-radius:18px;padding:24px;background:var(--white)}.family-card>p{font-size:12px;color:var(--muted);line-height:1.6}.family-root{font-family:var(--serif);font-size:24px;display:inline-block;background:var(--salmon);border-radius:7px;padding:6px 10px;margin:15px 0 4px}.branch{display:block;text-decoration:none;width:100%;text-align:left;position:relative;background:transparent;border-top:1px solid var(--line);padding:13px 0;min-height:62px}.branch:first-child{border-top:0}.branch .branch-pair{font-family:var(--serif);font-size:19px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}.branch .branch-pair span{font-size:13px;color:#6e8268}.branch small{display:block;font-size:10px;color:var(--muted);line-height:1.6;margin-top:5px}.branch button{font-size:11px;background:transparent;text-decoration:underline;padding:0;margin-top:2px}.branch.picked{background:#f3f7ec;padding-left:10px;padding-right:10px;border-radius:8px}.family-caption{padding:12px 0 0;font-size:10px;line-height:1.6;color:var(--muted)}.claim-note{padding:20px 23px;border-radius:16px;background:#f5dfd3;position:relative}.claim-note .quote{font:italic 25px/1.2 var(--serif);margin:10px 0}.claim-note p{font-size:11px;line-height:1.6}.claim-note .text-button{font-size:11px}.collection{margin:20px 0 30px;padding-top:25px;border-top:1px solid var(--line)}.collection-top{display:flex;justify-content:space-between;align-items:start;gap:20px}.collection h2{font:400 30px var(--serif);letter-spacing:-.7px;margin:8px 0 6px}.collection-description{font-size:12px;line-height:1.7;color:var(--muted);max-width:650px}.collection-count{font-family:var(--serif);font-size:38px}.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.filter-row button{border:1px solid var(--line);border-radius:25px;background:transparent;padding:8px 14px;min-height:40px;font-size:11px}.filter-row button[aria-pressed=true]{background:var(--ink);color:white}.word-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.word-item{text-align:left;border:1px solid var(--line);background:var(--white);border-radius:10px;padding:15px;min-height:84px}.word-item .word-en{font:21px var(--serif);overflow-wrap:anywhere}.word-item small{display:block;font-size:11px;margin-top:7px;color:var(--muted)}.word-item[data-selected=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.word-item .tiny-dot{font-size:14px;margin-left:6px;color:#99632c}
footer{max-width:1116px;margin:0 auto;padding:25px 0 30px;border-top:1px solid var(--line);display:flex;align-items:center;gap:17px;flex-wrap:wrap;font-size:11px;color:var(--muted)}footer>span{font-family:var(--serif);font-style:italic;font-size:18px;margin-right:auto}footer small{flex-basis:100%;font-size:10px}footer button{font-size:11px;border:0;background:none;text-decoration:underline}dialog{border:1px solid var(--line);border-radius:20px;padding:26px;max-width:640px;width:calc(100% - 30px);max-height:85dvh;color:var(--ink);background:var(--white)}dialog::backdrop{background:#163b3380;backdrop-filter:blur(4px)}.dialog-top{display:flex;align-items:center;justify-content:space-between}dialog h2{font:34px var(--serif);margin:13px 0 22px}dialog h3{font-size:15px;margin:23px 0 9px}dialog p,dialog li{font-size:13px;line-height:1.75}dialog li{margin:9px 0}dialog a{overflow-wrap:anywhere}#toast{position:fixed;bottom:calc(22px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100% - 30px);border-radius:10px;color:white;background:var(--ink);padding:13px 20px;font-size:13px;opacity:0;pointer-events:none;z-index:99;transition:opacity .2s}#toast.show{opacity:1}#loading{padding:60px 0}#share-fallback{width:100%;margin-top:10px;padding:10px;font-size:16px;border:1px solid var(--line);border-radius:8px}.capture-claim,.capture-controls,.capture-brand,.capture-end{display:none}.data-error{padding:60px 0;line-height:1.6}.data-error button{margin-top:20px}@keyframes arrive{from{opacity:.2;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1400px){.hero{padding-top:50px}}
@media(max-width:760px){.masthead{padding:18px 20px}.brand{font-size:14px}.brand-mark{width:42px;height:42px;font-size:32px}.masthead-right{gap:12px}.lab-link{font-size:8px;letter-spacing:1.3px}#app{padding:0 20px}.hero{padding:25px 0 24px;display:block}.hero .eyebrow{font-size:8px;margin-bottom:11px;letter-spacing:1.4px}.hero h1{font-size:37px;letter-spacing:-1.35px;max-width:450px}.hero-note{font-size:12px;max-width:320px;margin-top:12px;line-height:1.55}.workspace{grid-template-columns:1fr;gap:0}.pattern-nav{gap:7px;margin-bottom:16px}.pattern{padding:12px 4px;border-radius:10px}.pattern .pattern-pair{font-size:20px}.pattern small{font-size:9px;margin-top:5px}.scope-top{padding:17px 18px 0}.scope-words{padding:22px 12px 0;min-height:125px}.piece{font-size:36px;padding:5px 6px 7px}.piece-note{font-size:12px;min-height:48px;padding:13px 5px 0}.meaning-tabs{margin-top:12px}.meaning-tabs button{min-height:38px}.reveal-area{padding:20px 18px}.result{padding:20px 18px}.result .explanation{font-size:13px}.next-row{margin:15px 0 24px}.aside{gap:16px}.try-card,.family-card{padding:22px}.word-list{grid-template-columns:repeat(2,minmax(0,1fr))}.collection{margin-top:28px}.collection h2{font-size:27px}.collection-count{font-size:32px}.word-item{padding:13px}.word-item .word-en{font-size:20px}footer{margin:0 20px;padding-bottom:calc(25px + env(safe-area-inset-bottom));gap:10px}footer>span{flex-basis:100%;margin-bottom:5px}.claim-note{order:3}.section-label{margin-bottom:8px}.section-label .eyebrow{font-size:9px}.next-hint{font-size:10px}}
@media(max-width:370px){#app{padding:0 16px}.masthead{padding:16px}.hero h1{font-size:34px}.pattern .pattern-pair{font-size:18px}.piece{font-size:32px}.chip{font-size:9px}.lab-link{display:none}}
/* Comfortable touch targets and readable explanatory copy. */
.meaning-tabs button,.suggestions button,.filter-row button{min-height:44px}.hero-note,.try-card p,.family-card>p{font-size:14px}.branch small,.family-caption,.claim-note p{font-size:12px}.piece-note{font-size:13px}.result .explanation{font-size:15px}.example small{font-size:12px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
body.capture{--capture-top:60px;--capture-bottom:107px;--capture-right:50px;--capture-left:20px;width:100%;min-height:100dvh;overflow-x:hidden}.capture .masthead,.capture footer,.capture .hero,.capture .pattern-nav,.capture .section-label,.capture .next-row,.capture .collection,.capture .aside,.capture .meaning-tabs,.capture .result-actions,.capture .example,.capture .entry-sources,.capture .sound-status{display:none}.capture #app{padding:var(--capture-top) var(--capture-right) var(--capture-bottom) var(--capture-left);max-width:none;min-height:100dvh}.capture .workspace{display:block}.capture .capture-brand{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:-.2px;margin-bottom:23px}.capture .capture-brand .brand-mark{width:28px;height:28px;font-size:24px;border-radius:8px}.capture .microscope{border-radius:18px;box-shadow:0 4px 0 #e0e5d7}.capture .scope-top{padding:14px 16px 0;gap:5px}.capture .scope-number{font-size:18px}.capture .chip{font-size:8px;padding:5px 8px}.capture .scope-words{padding:22px 10px 0;min-height:105px}.capture .language-label{font-size:8px;margin-bottom:10px}.capture .piece{font-size:30px;letter-spacing:-1px;padding:4px 5px 6px;min-height:42px}.capture .piece-note{font-size:10px;min-height:44px;line-height:1.5;padding:11px 0 0}.capture .reveal-area{padding:19px 15px}.capture .prompt{font-size:11px}.capture .primary{font-size:12px;min-height:45px}.capture .transform-arrow{font-size:20px;margin-top:12px}.capture .result{padding:18px 13px;margin-top:12px}.capture .result .explanation{font-size:11px;line-height:1.5;margin-top:16px}.capture .capture-claim{display:block}.capture-claim h1{font:42px/1.04 var(--serif);letter-spacing:-1.6px;margin:35px 0 22px}.capture-claim h1 em{background:var(--salmon);font-style:italic;box-decoration-break:clone}.capture-claim p{font-size:14px;line-height:1.7}.capture-claim .eyebrow{font-size:8px}.capture-claim .primary{margin-top:22px}.capture[data-stage=claim] .workspace,.capture[data-stage=family] .main-column,.capture[data-stage=end] .main-column{display:none}.capture:not([data-stage=claim]) .capture-claim{display:none}.capture[data-stage=family] .aside,.capture[data-stage=end] .aside{display:block}.capture[data-stage=family] .try-card,.capture[data-stage=family] .claim-note,.capture[data-stage=end] .family-card,.capture[data-stage=end] .claim-note{display:none}.capture[data-stage=family] .family-card{display:block;padding:17px}.capture[data-stage=family] .family-card h2{font-size:25px}.capture[data-stage=family] .family-card>p{font-size:10px}.capture[data-stage=family] .family-root{font-size:22px;margin:10px 0 4px}.capture[data-stage=family] .branch{padding:11px 0;min-height:48px}.capture[data-stage=family] .branch-pair{font-size:18px}.capture[data-stage=family] .branch small{font-size:9px;line-height:1.4}.capture[data-stage=family] .family-caption{font-size:8px}.capture[data-stage=end] .capture-end{display:block;font:42px/1.05 var(--serif);letter-spacing:-1.4px;margin:30px 0}.capture[data-stage=end] .try-card{padding:18px}.capture[data-stage=end] .try-card h2{font-size:26px}.capture[data-stage=end] .try-card p{font-size:11px}.capture[data-stage=end] .suggestions{display:none}.capture[data-stage=sounds] .meaning-tabs{display:flex}.capture.guides:after{content:'SAFE AREA · right 150 / top 180 / bottom 320';position:fixed;pointer-events:none;inset:var(--capture-top) var(--capture-right) var(--capture-bottom) var(--capture-left);border:1px dashed #bd4535;font-size:8px;padding:5px;z-index:50}.capture.guides:before{content:'YOUR FACE';position:fixed;left:20px;bottom:25px;width:90px;height:80px;border:1px dashed #bd4535;display:grid;place-items:center;font-size:9px;z-index:50;pointer-events:none}.capture.guides .capture-controls{display:flex;position:fixed;bottom:0;right:0;background:var(--paper);z-index:100;gap:2px}.capture-controls button{font-size:9px;background:var(--lime);padding:3px;min-height:30px}
/* Recording composition: the caption slot stays clear in both video versions. */
.capture .capture-brand{margin-bottom:55px}
.capture .capture-claim h1{margin-top:22px}
.capture .capture-claim .primary{margin-top:12px}
/* The filmed family beat keeps the actual branches and root control in frame;
   full explanations remain available in the normal mobile experience. */
.capture[data-stage=family] .family-card>p:first-of-type{display:none}
.capture[data-stage=family] .branch small,.capture[data-stage=family] .branch button{display:none}
.capture[data-stage=family] .branch{padding:14px 0;min-height:54px}
.capture[data-stage=family] .family-card h2{margin-top:12px}
.capture[data-stage=family] .family-caption{line-height:1.5;font-size:9px}
.capture[data-stage=family] #family-root-note{margin:8px 0}
.capture[data-stage=family] .branch{padding:9px 0;min-height:42px}
.capture[data-stage=family] .family-card{padding-bottom:13px}
.capture[data-stage=sounds] .result .explanation{display:none}
.capture[data-stage=sounds] .meaning-tabs{margin-top:6px}
.capture[data-stage=sounds] .scope-words{padding-top:16px}
.capture[data-stage=sounds] .piece-note{min-height:35px}