@font-face{font-family:"LK Itim";font-weight:400;font-display:swap;src:url("fonts/itim-400-thai.woff2") format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"LK Itim";font-weight:400;font-display:swap;src:url("fonts/itim-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"LK Sarabun";font-weight:400;font-display:swap;src:url("fonts/sarabun-400-thai.woff2") format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"LK Sarabun";font-weight:400;font-display:swap;src:url("fonts/sarabun-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"LK Sarabun";font-weight:600;font-display:swap;src:url("fonts/sarabun-600-thai.woff2") format("woff2");unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"LK Sarabun";font-weight:600;font-display:swap;src:url("fonts/sarabun-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ─────────────────────────────────────────────────────────────────────────────
   LearnKit "สมุดจดของพี่ปอนด์" (พี่ปอนด์สั่ง 23/09/2026 หน้าตาไม่ใช้แบบ FileKit FlowKit)
   กระดาษจุดแบบสมุดโน้ต , หมึกน้ำเงินเข้ม , ปากกาฟ้าเป็นสีเด่นสีเดียว , แดงแอปเปิ้ลใช้แค่ที่แอปเปิ้ล
   ธีมมืด = กระดานดำ หมึกชอล์ก , ของที่เพิ่มจากคลิป (ตัวนับ ประโยคตัวอย่าง) จางกว่าเนื้อหาของครูเสมอ
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  --paper:#f8fafd; --sheet:#ffffff; --dot:rgba(92,112,148,.22); --ink:#1d2a44; --mute:#5b6781; --faint:#7d879a; --line:#dde3ee;
  --pen:#2d6fe0; --pen-soft:#e7effd; --apple:#de4b3f; --apple-off:#f3d6d2; --leaf:#4a9d63; --leaf-off:#b9d9c3; --stem:#7a5a3a;
  --hand:"LK Itim","LK Sarabun","Leelawadee UI",Tahoma,sans-serif; --body:"LK Sarabun","Leelawadee UI",Tahoma,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#161d1a; --sheet:#1d2622; --dot:rgba(230,240,230,.07); --ink:#eef2ea; --mute:#b3bdb4; --faint:#9aa59c; --line:#2f3a35;
    --pen:#8fb8ff; --pen-soft:#223047; --apple:#f07a6e; --apple-off:#40302d; --leaf:#6cc28c; --leaf-off:#35483c; --stem:#b08a64; color-scheme:dark; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background-color:var(--paper); background-image:radial-gradient(var(--dot) 1.1px, transparent 1.4px); background-size:22px 22px;
  color:var(--ink); font:400 17px/1.7 var(--body); padding-inline:16px; min-height:100vh}
a{color:var(--pen); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--pen); outline-offset:3px; border-radius:6px}
.top{max-width:860px; margin:0 auto; padding-block:18px 4px}
.brand{display:inline-flex; align-items:center; gap:10px; font:400 22px/1 var(--hand); color:var(--ink); text-decoration:none}
.brand-mark{width:34px; height:34px; background:url("icon.svg") center/contain no-repeat}
.page{max-width:860px; margin:0 auto; padding-block:8px 40px}
h1,h2{font-family:var(--hand); font-weight:400; line-height:1.35; margin:0}
.foot{max-width:860px; margin:0 auto; padding-block:18px 32px; color:var(--faint); font-size:14px; border-top:1px dashed var(--line)}

/* ── หน้ารวม ── */
.intro{padding-block:26px 8px}
.intro h1{font-size:clamp(32px,6vw,48px)}
.hl{background:linear-gradient(transparent 62%, var(--pen-soft) 62%); padding-inline:4px}
.lede{color:var(--mute); max-width:34em; margin:10px 0 0}
.meta{color:var(--faint); font-size:15px; margin:6px 0 0}
.topic-group{margin-top:30px}
.topic-group h2{font-size:24px; color:var(--mute)}
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:22px; margin-top:14px}
.card{display:flex; flex-direction:column; gap:6px; background:var(--sheet); border:1px solid var(--line); border-radius:8px; padding:14px 16px 16px;
  color:var(--ink); text-decoration:none; box-shadow:0 1px 0 var(--line), 0 6px 18px rgba(30,50,90,.07); transform:rotate(-1deg); transition:transform .2s}
.card:nth-child(even){transform:rotate(1deg)}
.card:hover,.card:focus-visible{transform:rotate(0) translateY(-2px)}
.thumb{display:grid; gap:2px; padding-block:6px 10px; border-bottom:1px dashed var(--line); margin-bottom:6px}
.t-row{display:contents}   /* ทุกแถวใช้คอลัมน์ร่วมกัน คำยาวแค่ไหนรูปก็เริ่มแนวเดียวกัน (Everybody ทับรูป ภาพ l2-home.png) */
.thumb{grid-template-columns:max-content 1fr; column-gap:10px; align-items:center}
.t-word{font:400 14px/1 var(--hand); color:var(--mute)}
.thumb .apples{height:26px; width:auto; justify-self:start}
.c-title{font:400 19px/1.4 var(--hand)}
.c-by{font-size:14px; color:var(--faint)}

/* ── หน้าบทเรียน ── */
.topic{margin:18px 0 0; color:var(--faint); font-size:15px}
#title{font-size:clamp(26px,4.6vw,38px); margin-top:4px}
.credit{margin:6px 0 18px; color:var(--mute); font-size:15.5px}
.sheet{background:var(--sheet); border:1px solid var(--line); border-radius:10px; padding:18px 22px 14px; box-shadow:0 8px 24px rgba(30,50,90,.07)}
.scene{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.row{display:grid; grid-template-columns:minmax(7.5em, 10em) auto 1fr; align-items:center; gap:4px 14px; padding-block:2px; opacity:.2; transition:opacity .45s}
.row.on{opacity:1}
.label{display:flex; flex-direction:column; line-height:1.2}
.word{font:400 34px/1.1 var(--hand)}
.row.now .word{color:var(--pen)}
.th{font-size:17px; color:var(--mute); margin-top:2px}
.apples{display:block; height:84px; width:auto; max-width:100%}
.count{justify-self:end; white-space:nowrap}
.added{color:var(--faint); font-size:15px}
.a-body{fill:var(--apple-off); transition:fill .4s}
.a-leaf{fill:var(--leaf-off)} .a-stem{fill:none; stroke:var(--stem); stroke-width:2.2; stroke-linecap:round}
.apple.in .a-body{fill:var(--apple)} .apple.in .a-leaf{fill:var(--leaf)}
/* คน: ตัวที่ถูกพูดถึงสีหมึก ตัวอื่นจาง */
.p-body{fill:var(--line); transition:fill .4s} .person.in .p-body{fill:var(--mute)}
.mark{fill:none; stroke:var(--pen); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .8s ease}
.row.on .mark,.t-row .mark{stroke-dashoffset:0}   /* ภาพย่อบนหน้ารวม = ฉากสุดท้าย เส้นครบเสมอ */
.say{text-align:center; margin:12px 0 0; font-size:18px; color:var(--mute)}
.say b{color:var(--pen); font-weight:600}
.ctl{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; flex-wrap:wrap}
.btn{font:600 16px var(--body); min-height:44px; padding:8px 18px; border-radius:999px; border:1px solid var(--line); background:var(--sheet); color:var(--ink); cursor:pointer; white-space:nowrap}
.btn.main{background:var(--ink); color:var(--sheet); border-color:var(--ink)}
.btn:disabled{opacity:.35; cursor:default}
/* ‼️ พื้นที่กดของจุดต้องไม่ทับกัน (เดิม ::after 44px บนจุดที่ห่าง 20px กดจุดแรกแล้วโดนจุดที่สอง เทสจับได้ 23/09/2026)
   ปุ่มจริง 30px ชิดกัน วงกลมที่เห็น 14px อยู่ตรงกลาง */
.dots{display:flex; gap:0}
.dot{width:30px; height:30px; padding:0; border:0; background:transparent; cursor:pointer; display:grid; place-items:center}
.dot::before{content:""; width:14px; height:14px; border-radius:50%; border:2px solid var(--pen); box-sizing:border-box}
.dot.done::before{background:var(--pen)}
.status{text-align:center; color:var(--faint); font-size:14px; margin:6px 0 0}
.examples{margin-top:22px; background:var(--sheet); border:1px solid var(--line); border-radius:10px; padding:0 18px}
.examples summary{cursor:pointer; padding:12px 0; font:400 19px/1.4 var(--hand); color:var(--ink); list-style-position:inside}
.examples summary::marker{color:var(--pen)}
.examples ul{margin:0 0 14px; padding-left:20px; color:var(--mute); font-size:17px; line-height:1.9}
.examples b{color:var(--pen); font-weight:600}

/* มือถือ: คำอยู่เหนือแถวแอปเปิ้ล ตัวนับอยู่ข้างคำ ตัวหนังสือไม่ย่อ */
@media (max-width:560px){
  .sheet{padding:14px 12px 10px}
  .row{grid-template-columns:1fr auto; grid-template-areas:"label count" "apples apples"}
  .label{grid-area:label; flex-direction:row; align-items:baseline; gap:10px}
  .count{grid-area:count}
  .row .apples{grid-area:apples; height:64px}
  .word{font-size:28px}
  .btn{padding:8px 14px; font-size:15px}
}
@media (prefers-reduced-motion: reduce){ .row, .mark, .a-body, .card{transition:none} }

/* แถบเว็บในเครือ: หน้าตาเดียวกับ FileKit FlowKit ทุกพิกเซล ตำแหน่งท้ายหน้าเหมือนกัน (พี่ปอนด์สั่ง 23/09/2026)
   ‼️ เป็นส่วนเดียวของ LearnKit ที่ไม่ใช่สมุดจด แก้ที่นี่ต้องแก้ FileKit/index.html , FlowKit/home.css , FlowKit/draw/draw.css ด้วย */
.network{background:linear-gradient(152deg,#1b2029,#12161d); border-top:3px solid #2b323d; padding:20px 16px 14px; margin-inline:-16px}
.sites{list-style:none; margin:0 auto; padding:0; max-width:1160px; display:flex; flex-wrap:wrap; justify-content:center; gap:4px}
.sites a{position:relative; display:inline-flex; align-items:baseline; gap:.28em; height:34px; padding:10px 16px; box-sizing:content-box;
  color:rgba(255,255,255,.64); text-decoration:none; font:400 15px/34px "LK Sarabun","Leelawadee UI",Tahoma,sans-serif; letter-spacing:.01em; white-space:nowrap; border-radius:6px}
.sites a span{font-weight:400} .sites a b{font-weight:700}
.sites a.self,.sites a:hover,.sites a:focus-visible{color:#fff}
.sites a:focus-visible{outline:2px solid #fff; outline-offset:2px}
.sites a .ico{width:17px; height:17px; flex:none; align-self:center; display:block}
.sites .ico-file{color:#8fa0ff} .sites .ico-flow{color:#b59dff} .sites .ico-learn{color:#ff8a7c}
.sites a span+b{margin-left:-.28em}   /* ชื่อติดกัน FileKit (พี่ปอนด์ 23/09/2026) ตัวบางกับตัวหนายังแยกน้ำหนัก */

@media (max-width:640px){ .sites a{padding-inline:12px} }