:root{--bg:oklch(var(--b1));--panel:oklch(var(--b2));--panel-hi:oklch(var(--b1));--panel2:oklch(var(--b3));--line:oklch(var(--bc) / .18);--ink:oklch(var(--bc));--ink-soft:oklch(var(--bc) / .86);--dim:oklch(var(--bc) / .62);--accent:oklch(var(--p));--good:oklch(var(--su));--bad:oklch(var(--er));--warn:oklch(var(--wa));--purple:oklch(var(--a));--code:oklch(var(--p));--shadow:0 0% 0%;--mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;--tamil:"Noto Sans Tamil","Latha","Tamil MN",serif;--slab:"Roboto Slab",ui-serif,Georgia,serif;--body:"Poppins",ui-sans-serif,system-ui,sans-serif}body{font-family:var(--body)}.wrap{max-width:680px;margin:0 auto;color:var(--ink)}.wide{max-width:1060px;margin:0 auto;color:var(--ink)}header{border-bottom:1px solid var(--line);padding-bottom:34px;margin-bottom:14px}.kicker{color:var(--accent);font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}.wrap h1,.wide h1{font-family:var(--slab);font-size:2.5rem;font-weight:700;margin:18px 0 14px;letter-spacing:-.025em;line-height:1.08;color:var(--ink)}@media (min-width:640px){.wrap h1,.wide h1{font-size:3rem}}.wrap h1 .ta,.wide h1 .ta{font-family:var(--tamil);color:var(--accent)}.standfirst{color:var(--dim);font-size:18px;line-height:1.6;max-width:680px}.byline{margin-top:18px;color:var(--dim);font:500 13px/1 var(--mono)}.wrap h2,.wide h2{font-family:var(--slab);font-size:1.875rem;font-weight:700;margin:56px 0 10px;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}.wrap h2 .num,.wide h2 .num{color:var(--accent);font-family:var(--mono);font-size:1rem;margin-right:12px;font-weight:600}.wrap h3,.wide h3{font-family:var(--slab);font-size:1.25rem;font-weight:600;margin:32px 0 8px;letter-spacing:-.01em;color:var(--ink)}.wrap p,.wide p{margin:0 0 17px;color:var(--ink-soft)}.wrap em,.wide em{color:var(--ink);font-style:italic}.wrap strong,.wide strong{color:var(--ink);font-weight:680}code{font-family:var(--mono);font-size:.86em;background:var(--panel2);padding:2px 6px;border-radius:4px;color:var(--code)}.ta{font-family:var(--tamil)}.wrap a,.wide a{color:var(--accent)}.wrap figure,.wide figure{margin:34px 0}.lede:first-letter{font-size:54px;float:left;line-height:.86;padding:6px 12px 0 0;color:var(--accent);font-weight:780}.aside{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:18px 20px;margin:26px 0;font-size:14.5px}.aside h4{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}.aside dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0}.aside dt{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:600}.aside dd{color:var(--dim);font-size:14px;margin:0}.aside dd .ta{color:var(--ink-soft)}.aside.tryit{border:1px solid oklch(var(--a) / .3);border-left:3px solid var(--purple);background:radial-gradient(130% 150% at 0% 0%,oklch(var(--a) / .16),transparent 52%),linear-gradient(180deg,var(--panel-hi),var(--panel));box-shadow:0 10px 34px oklch(var(--a) / .08);padding:20px 22px}.aside.tryit h4{display:inline-flex;align-items:center;gap:9px;color:var(--purple);margin-bottom:12px}.aside.tryit h4 .ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;flex:0 0 auto;background:oklch(var(--a) / .18);border:1px solid oklch(var(--a) / .38);color:var(--purple);font-size:10px;line-height:1}.aside.tryit p{color:var(--ink-soft)!important}.seg{font-family:var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:18px;margin:22px 0;font-size:14px;overflow-x:auto}.seg table{border-collapse:collapse;width:100%}.seg td{padding:7px 14px;border-bottom:1px solid var(--line);white-space:nowrap}.seg .role{color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.seg .ta{font-size:18px;color:var(--accent)}.seg .gl{color:var(--purple)}figure{margin:34px 0}figcaption{color:var(--dim);font-size:13px;text-align:center;margin-top:14px;font-style:italic}.callout{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin:28px 0}.callout p:last-child{margin-bottom:0}.callout .tag{font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--purple);margin-bottom:10px;display:block}table.data{width:100%;border-collapse:collapse;font-size:13px;margin:18px 0}table.data th,table.data td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}table.data th{color:var(--dim);font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}table.data td.m,table.data th.m{font-family:var(--mono);font-size:12px}table.data tr:hover td{background:oklch(var(--p) / .1)}.pill{font:600 11px/1 var(--mono);padding:4px 8px;border-radius:999px;display:inline-block}.ok{background:oklch(var(--su) / .18);color:var(--good)}.rej{background:oklch(var(--er) / .16);color:var(--bad)}.info{background:oklch(var(--p) / .2);color:var(--accent)}.toollist{list-style:none;margin:18px 0;padding:0}.toollist li{border:1px solid var(--line);border-radius:8px;padding:15px 18px;margin-bottom:10px;background:var(--panel)}.toollist .nm{font-family:var(--mono);color:var(--accent);font-weight:600;font-size:14px}.toollist .ds{color:var(--ink-soft);font-size:14.5px;margin-top:6px}.toollist .why{color:var(--dim);font-size:13.5px;margin-top:7px;border-top:1px dashed var(--line);padding-top:8px}.toollist .why b{color:var(--warn)}.react{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);font-size:13px;margin:8px 0 20px}.react .s{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px 13px}.react .a{color:var(--accent);font-weight:700}.catch{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--bad);border-radius:8px;overflow:hidden;margin:18px 0}.catch h4{font-size:15px;padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px}.catch h4 small{color:var(--dim);font:500 12px/1 var(--mono)}.catch .b{padding:16px 18px}pre{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px;font-family:var(--mono);font-size:12.5px;line-height:1.55;color:var(--ink-soft);overflow-x:auto;white-space:pre-wrap}pre .x{color:var(--bad)}pre .c{color:var(--good)}pre .t{color:var(--accent);font-family:var(--tamil)}.fix{margin-top:12px;color:var(--dim);font-size:13.5px}.fix b{color:var(--good)}.leg{display:flex;gap:18px;flex-wrap:wrap;margin:4px 0 14px;color:var(--dim);font-size:12px}.leg span{display:flex;align-items:center;gap:6px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.takeaway{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:10px;padding:24px 26px;margin-top:16px}.takeaway ul{margin:10px 0 0;padding-left:20px}.takeaway li{margin:11px 0;color:var(--ink-soft)}footer{margin-top:60px;padding-top:22px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}.src{font-family:var(--mono)}hr.sec{border:0;border-top:1px solid var(--line);margin:50px 0}.fn,.term{position:relative}.fnref{font-family:var(--mono);font-size:.72em;font-weight:600;vertical-align:super;line-height:0;color:var(--accent);background:none;border:0;padding:0 1px;cursor:pointer}.fnref:hover,.fnref:focus-visible{text-decoration:underline;outline:none}.term{color:var(--accent);font-weight:620;cursor:help;outline:none;border-bottom:1px dotted oklch(var(--p) / .5);-webkit-tap-highlight-color:transparent}.term:hover,.term:focus-visible{border-bottom-color:var(--accent)}.fnpop,.termpop{position:absolute;top:1.4em;left:50%;transform:translate(-50%) translateY(4px);width:min(340px,88vw);z-index:30;background:var(--panel-hi);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px #0000004d;padding:13px 15px;font:400 13.5px/1.6 var(--body);color:var(--ink-soft);text-align:left;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s,transform .14s}.fnpop em,.termpop em{color:var(--ink);font-style:italic}.termpop code{font-size:.84em}.fn:hover .fnpop,.fn:focus-within .fnpop,.term:hover .termpop,.term:focus-within .termpop{opacity:1;visibility:visible;transform:translate(-50%) translateY(0);pointer-events:auto}.series-nav{max-width:680px;margin:54px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:stretch;gap:14px;font-family:var(--mono)}.series-nav a{flex:1 1 0;min-width:0;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:13px 16px;transition:background .12s,border-color .12s}.series-nav a:hover{background:var(--panel2);border-color:var(--accent)}.series-nav a.next{text-align:right}.series-nav a.hub{flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:13px}.series-nav .dir{display:block;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}.series-nav .ttl{display:block;font-size:13.5px;line-height:1.35;color:var(--ink);white-space:normal}.series-nav a.disabled{visibility:hidden}@media (max-width:640px){.series-nav{flex-wrap:wrap}.series-nav a.hub{order:3;flex:1 1 100%}}.hub-list{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}.hub-card{display:block;text-decoration:none;color:var(--ink);background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:10px;padding:22px 24px;transition:border-color .14s,transform .14s,box-shadow .14s}.hub-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 10px 26px #0000002e}.hub-card .pt{font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}.hub-card h3{margin:11px 0 6px;font-size:20px;font-weight:720;color:var(--ink)}.hub-card p{margin:0;color:var(--dim);font-size:14.5px;max-width:none}.tw{cursor:pointer;border-radius:3px;transition:background .12s,box-shadow .12s;text-underline-offset:3px;text-decoration:underline;text-decoration-color:oklch(var(--p) / .45);text-decoration-thickness:1px}.tw:hover{background:oklch(var(--p) / .18);text-decoration-color:var(--accent)}.tw.playing{background:oklch(var(--p) / .22)}.tw .g{transition:opacity .14s ease,color .14s ease}.tw.playing .g{color:var(--accent)}.seg .tw,h1 .tw{text-decoration:none}.hint{position:fixed;left:50%;bottom:18px;transform:translate(-50%);background:var(--panel);border:1px solid var(--line);color:var(--ink);font:600 12px/1 var(--mono);padding:9px 15px;border-radius:999px;z-index:80;box-shadow:0 6px 22px #00000047;transition:opacity .4s;pointer-events:none}.pop-back{position:fixed;inset:0;z-index:90;background:rgb(0 0 0 / .25)}.pop{position:fixed;z-index:91;width:392px;max-width:calc(100vw - 24px);max-height:calc(100vh - 28px);overflow-y:auto;background:linear-gradient(180deg,var(--panel-hi),var(--panel));border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px #00000059;animation:pop .14s ease-out}@keyframes pop{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.pop .tw{text-decoration:none}.pop .ph{padding:16px 46px 17px;position:sticky;top:0;background:var(--panel-hi);z-index:1;text-align:center;box-shadow:0 1px 0 oklch(var(--bc) / .14)}.pop .ph .navg{position:absolute;top:14px;left:14px;display:flex;gap:5px}.pop .ph .flag{position:absolute;top:16px;right:16px;color:var(--dim);opacity:.45;font-size:14px;line-height:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pop .navb{width:25px;height:25px;border:1px solid transparent;background:transparent;border-radius:7px;color:var(--dim);font-size:15px;cursor:pointer;line-height:1;padding:0;transition:color .12s,background .12s}.pop .navb:hover:not(:disabled){color:var(--accent);background:oklch(var(--p) / .12)}.pop .navb:disabled{opacity:.28;cursor:default}.pop .pw{display:inline-block;font-family:var(--tamil);font-size:29px;color:var(--accent);cursor:pointer;line-height:1.18}.pop .pw:hover{filter:brightness(.94)}.pop .psub{margin-top:6px;font-size:14.5px;color:var(--ink);font-style:italic}.pop .pr{display:block;margin-top:6px;font-family:var(--mono);font-size:11.5px;color:var(--dim);letter-spacing:.02em}.pop .pb{padding:0 0 6px}.pop .sec{padding:16px 20px}.pop .sec+.sec{border-top:1px solid oklch(var(--bc) / .14)}.pop .seclabel{font:700 10px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin:0 0 13px}.pop .sec.segsec{background:oklch(var(--p) / .06)}.pop .pgrid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px 0}.pop .pmor{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 11px;cursor:pointer}.pop .pmor .ct{font-family:var(--tamil);font-size:22px;color:var(--accent);line-height:1.1;white-space:nowrap}.pop .pmor:hover .ct{filter:brightness(.92)}.pop .pmor .cg{font:600 10.5px/1 var(--mono);color:var(--dim);letter-spacing:.04em;padding-bottom:2px;border-bottom:1px solid oklch(var(--bc) / .3)}.pop .pplus{align-self:flex-start;color:var(--dim);opacity:.5;font-size:15px;padding:3px 6px 0}.pop .pd{color:var(--ink-soft);font-size:13.5px;line-height:1.68}.pop .pd em{color:var(--ink);font-style:italic}.pop .pd code{background:var(--panel2);color:var(--code)}.pop .brow{display:flex;gap:12px;align-items:baseline;padding:10px 2px;font-family:var(--mono);border-bottom:1px solid oklch(var(--bc) / .13)}.pop .brow:last-child{border-bottom:0}.pop .brow.cur{background:oklch(var(--p) / .13);margin:0 -20px;padding-left:20px;padding-right:20px;border-bottom:0}.pop .brow .bw{font-family:var(--tamil);font-size:16px;color:var(--accent);cursor:pointer;min-width:104px}.pop .brow .bw:hover{filter:brightness(.92)}.pop .brow .badd{font-size:11px;color:var(--purple);min-width:62px}.pop .brow .bm{font:400 12px/1.5 -apple-system,sans-serif;color:var(--dim);flex:1}.pop .brow .bs{font:700 9px/1 var(--mono);color:var(--good);align-self:center}.pop .pf{padding:12px 20px;color:var(--dim);font:600 10.5px/1.4 var(--mono);box-shadow:0 -1px 0 oklch(var(--bc) / .14);display:flex;justify-content:space-between;gap:10px;position:sticky;bottom:0;background:var(--panel-hi)}.pop .pf b{color:var(--good)}.minfo{position:fixed;z-index:95;width:248px;max-width:calc(100vw - 20px);background:var(--panel-hi);border:1px solid var(--line);border-radius:11px;box-shadow:0 14px 38px #00000059;padding:15px 17px;animation:pop .12s ease-out}.minfo .mw{font-family:var(--tamil);font-size:23px;color:var(--accent);cursor:pointer;line-height:1.1}.minfo .mw:hover{filter:brightness(.93)}.minfo .mg{display:inline-block;margin-left:9px;font:700 10px/1 var(--mono);letter-spacing:.09em;color:var(--purple);vertical-align:2px}.minfo .mt{margin-top:9px;font-size:13px;color:var(--ink);font-weight:680}.minfo .md{margin-top:5px;font-size:12px;line-height:1.6;color:var(--dim)}.minfo .md code{background:var(--panel2);color:var(--code);font-size:.92em}.minfo .md em{color:var(--ink);font-style:italic}.cardslot{margin:26px 0}.cardpair{display:flex;gap:24px;align-items:flex-start;justify-content:center;margin:28px 0;width:100%}.cardpair .cardslot{margin:0;flex:1 1 0;min-width:0}.cardpair .pop.inline{max-width:100%;margin:0}@media (min-width:1024px){.cardpair{width:800px;margin-left:50%;transform:translate(-50%)}}@media (min-width:1280px){.cardpair{width:1040px}}@media (max-width:720px){.cardpair{flex-direction:column;align-items:center}.cardpair .cardslot{width:100%;max-width:560px}}.pop.inline{display:block;position:static;width:auto;max-width:560px;margin:0 auto;max-height:none;overflow:hidden;animation:none}.pop.inline .ph,.pop.inline .pf{position:static}.pop.inline .ph{padding-left:20px;padding-right:20px}.pop .pw.en{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:25px;font-weight:760;letter-spacing:-.01em}.pop .pmor .ct.en{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:18px;font-weight:680}.pop .brow .bw.en,.minfo .mw.en{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.minfo .mw.en{font-size:19px;font-weight:720}@media (max-width:560px){.pop.inline{max-width:100%}.pop:not(.inline){inset:auto 0 0!important;width:100%;max-width:100%;max-height:82vh;border-radius:14px 14px 0 0;animation:sheet .2s ease-out}@keyframes sheet{0%{transform:translateY(100%)}to{transform:none}}}