/* HENG WEB, restyled to match the Video Downloader site: warm paper, thick ink outlines, hard offset shadows, Kanit, lively motion.
   Layout is untouched: only colours, borders, shadows, type and motion are changed here. */
:root{
  --ink:#2A1608;--orange:#FF8A1F;--sun:#FFD36B;--paper:#FFF4DC;
  --bg:#FFF4DC;--fg:#2A1608;--muted:#6b4a2e;--soft:#FFE6B3;--line:#2A1608;--grid:transparent;--card:#FFFFFF;
  --btn:#FF8A1F;--btn-fg:#2A1608;--accent:#FF8A1F;--ok:#1b9a4a;
  --sans:'Kanit','Noto Sans Thai',ui-sans-serif,system-ui,sans-serif;
  --off:#2A1608;--shadow:4px 5px 0 var(--off);--bw:3px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1d1006;--fg:#FFF4DC;--muted:#d9b98f;--soft:#3a2110;--line:#FFE2A8;--card:#2c1809;
  --btn:#FF8A1F;--btn-fg:#2A1608;--off:#000;--shadow:4px 5px 0 #000}}
:root[data-theme="dark"]{
  --bg:#1d1006;--fg:#FFF4DC;--muted:#d9b98f;--soft:#3a2110;--line:#FFE2A8;--card:#2c1809;
  --btn:#FF8A1F;--btn-fg:#2A1608;--off:#000;--shadow:4px 5px 0 #000}

body{background-color:var(--bg);background-image:radial-gradient(color-mix(in srgb,var(--fg) 14%,transparent) 1.3px,transparent 1.4px);background-size:24px 24px;font-family:var(--sans);letter-spacing:0}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
h1,h2,h3{font-family:var(--sans);letter-spacing:0}
h1{font-weight:700}

/* scroll progress (browsers without scroll timelines simply do not show it) */
body::before{content:"";position:fixed;left:0;top:0;width:100%;height:6px;background:var(--orange);border-bottom:2px solid var(--ink);transform-origin:0 50%;transform:scaleX(0);z-index:90;animation:vdprog linear both;animation-timeline:scroll(root)}
@keyframes vdprog{to{transform:scaleX(1)}}

/* nav */
header.nav{background:color-mix(in srgb,var(--bg) 90%,transparent);border-bottom:var(--bw) solid var(--line)}
.logo{font-weight:700;letter-spacing:.01em}
.logo .mk{border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:var(--orange)}
.logo:hover .mk{transform:rotate(-10deg) scale(1.1)}
.links>a{color:var(--fg);font-weight:600;border-radius:999px;transition:transform .15s,background .15s}
.links>a:hover{background:var(--sun);color:var(--ink);transform:translateY(-2px) rotate(-1.5deg)}
.search{border:2px solid var(--line);background:var(--card);box-shadow:2px 3px 0 var(--off);color:var(--fg)}
.search kbd{border:2px solid var(--line);background:var(--soft);color:var(--fg)}
.sep{background:var(--line)}
.ico-btn{border-radius:10px;transition:transform .2s,background .2s}.ico-btn:hover{background:var(--sun);color:var(--ink);transform:rotate(18deg)}

/* hero */
.banner{border:var(--bw) solid var(--line);border-radius:18px;box-shadow:var(--shadow);background:#2A1608}
.banner canvas{filter:hue-rotate(172deg) saturate(1.4) brightness(1.1)}
.banner .bt span{color:var(--sun)}
.banner .bt b{text-shadow:3px 3px 0 #000;font-weight:700}
.banner::after{content:"";position:absolute;left:-30%;top:0;width:30%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,211,107,.35),transparent);transform:skewX(-14deg);animation:vdshine 6s ease-in-out infinite}
@keyframes vdshine{0%,55%{left:-40%}100%{left:130%}}
.avatar{border:4px solid var(--ink);box-shadow:3px 4px 0 var(--ink);background:var(--orange);animation:vdfloat 4s ease-in-out infinite}
@keyframes vdfloat{50%{transform:translateY(-5px) rotate(-2deg)}}
.clock{color:var(--muted)}.clock b{color:var(--fg)}
.dot{background:var(--ok)}
h1{background:linear-gradient(transparent 70%,color-mix(in srgb,var(--sun) 75%,transparent) 70% 92%,transparent 92%);width:fit-content;max-width:100%}
.role{color:var(--muted);font-weight:600}
.bio{color:var(--muted)}
.bio b{color:var(--fg)}

/* buttons */
.btn{border:var(--bw) solid var(--line);background:var(--card);color:var(--fg);font-weight:700;box-shadow:3px 4px 0 var(--off);border-radius:14px;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translate(-2px,-2px) rotate(-.6deg);box-shadow:5px 6px 0 var(--off)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--off)}
.btn.dark{background:var(--orange);color:var(--ink);border-color:var(--ink);box-shadow:3px 4px 0 var(--ink)}
.btn.dark:hover{box-shadow:5px 6px 0 var(--ink)}
.socials a{color:var(--fg);border:2px solid transparent;border-radius:12px;transition:transform .2s,background .2s,border-color .2s}
.socials a:hover{background:var(--sun);color:var(--ink);border-color:var(--ink);transform:translateY(-3px) rotate(-6deg)}

/* record player card */
.player{border:var(--bw) solid var(--line);background:var(--card);box-shadow:var(--shadow);border-radius:20px;transition:transform .25s}
.player:hover{transform:translate(-2px,-2px) rotate(-.3deg)}
.mp{background:var(--orange);color:var(--ink);border:3px solid var(--ink);box-shadow:2px 3px 0 var(--ink)}
.mp-t{border-color:var(--ink);background:#fff;color:var(--ink)}
.wave span{background:var(--ink)}.mp-time{color:var(--ink)}
.pmeta small,.pmeta span{color:var(--muted)}
.vf::after,.tile::after{background:var(--ink);color:var(--paper);border:2px solid var(--ink)}

/* section headings */
.kick{display:inline-block;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--ink);background:var(--orange);border:3px solid var(--ink);border-radius:999px;padding:1px 14px;box-shadow:2px 3px 0 var(--ink);transform:rotate(-2deg)}
h2{width:fit-content;max-width:100%;background:linear-gradient(transparent 66%,color-mix(in srgb,var(--sun) 80%,transparent) 66% 92%,transparent 92%)}
.pre{color:var(--muted)}

/* stack tiles */
.tile{border:3px solid var(--line);background:#fff;box-shadow:2px 3px 0 var(--off);border-radius:14px;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.tile:hover{transform:translateY(-6px) rotate(-6deg)}

/* packages */
.xp{border-bottom:3px dashed color-mix(in srgb,var(--line) 55%,transparent)}
.xp-ic{border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);border-radius:16px;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.xp:hover .xp-ic{transform:rotate(-8deg) scale(1.08)}
.xp-h h3{font-weight:700}
.xp-h .sub,.xp-h .r span,.xp ul{color:var(--muted)}
.chip{border:2px solid var(--line);background:var(--card);box-shadow:2px 2px 0 var(--off);border-radius:999px;font-weight:600;transition:transform .15s}
.chip:hover{transform:translateY(-2px) rotate(-2deg);background:var(--sun);color:var(--ink)}
.xp li::before{background:var(--orange);border:1px solid var(--ink);border-radius:50%;width:8px;height:8px;top:9px}

/* work cards */
.pj{border:var(--bw) solid var(--line);background:var(--card);box-shadow:var(--shadow);border-radius:20px;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
.pj:hover{transform:translate(-3px,-4px) rotate(-.7deg);box-shadow:8px 10px 0 var(--off)}
.shot{border-bottom:var(--bw) solid var(--line);background-color:var(--sun)}
.win{border:3px solid var(--ink);box-shadow:3px 4px 0 var(--ink)}
.mini span{background:var(--soft);color:var(--fg);border:2px solid var(--line);border-radius:999px;font-weight:500;white-space:nowrap;padding:1px 6px}.mini{flex-wrap:nowrap}
.pj-b p{color:var(--muted)}
.vd{border:2.5px solid var(--line);background:var(--orange);color:var(--ink);font-weight:600;white-space:nowrap;padding:5px 10px;border-radius:12px;box-shadow:2px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.vd:hover{background:var(--sun);transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--ink)}
.vd:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.note{color:var(--muted)}

/* process */
.act{border:var(--bw) solid var(--line);background:var(--card);box-shadow:var(--shadow);border-radius:20px}
.st .cells i{border:1.5px solid color-mix(in srgb,var(--line) 70%,transparent);background:color-mix(in srgb,var(--line) 10%,transparent);border-radius:4px}
.st b{font-weight:700}.st span,.st small,.legend{color:var(--muted)}

/* faq */
details{border:var(--bw) solid var(--line);background:var(--card);box-shadow:3px 4px 0 var(--off);border-radius:16px;transition:transform .2s,box-shadow .2s}
details:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--off)}
details[open]{background:color-mix(in srgb,var(--sun) 35%,var(--card))}
summary{font-weight:700}summary svg{color:var(--orange)}
details p{color:var(--muted)}

/* quote */
.quote{border:var(--bw) solid var(--line);background:var(--card);box-shadow:var(--shadow);border-radius:20px}
.quote .q .m{color:var(--orange);font-weight:700}
.quote .s{border-left:var(--bw) solid var(--line);background:var(--sun);color:var(--ink)}.quote .s b{color:var(--ink)}
.quote .q cite,.quote .q p{color:var(--fg)}

/* footer + main call to action */
footer{border-top:var(--bw) solid var(--line);background:var(--ink);color:var(--paper);margin-top:72px}
footer .ft p{color:var(--paper)}
.glow{height:48px;padding:0 24px;border:3px solid var(--ink);border-radius:14px;background:var(--orange);color:var(--ink);box-shadow:4px 5px 0 var(--ink);font-weight:800;font-size:16px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.glow::before{display:none}
.glow::after{inset:0;opacity:1;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 66%) -150% 0/250% 100% no-repeat,var(--orange);animation:vdglow 3.2s ease-in-out infinite}
@keyframes vdglow{0%,35%{background-position:150% 0,0 0}100%{background-position:-150% 0,0 0}}
.glow:hover{transform:translate(-2px,-3px) rotate(-1deg);box-shadow:6px 8px 0 var(--ink)}
.glow:active{transform:translate(2px,2px);box-shadow:1px 2px 0 var(--ink)}
.glow svg{filter:none}

/* overlays */
.palette{background:rgba(42,22,8,.55)}
.pbox{border:var(--bw) solid var(--line);box-shadow:6px 8px 0 var(--off);border-radius:18px;background:var(--card)}
.pbox input{border-bottom:var(--bw) solid var(--line);color:var(--fg)}
.pbox li a.sel,.pbox li a:hover{background:var(--sun);color:var(--ink)}
#mowgli-wake-hint{border:2px solid var(--line);background:var(--card);color:var(--fg)}

/* motion: sections pop in with a little bounce */
.rv{filter:none;transform:translateY(22px) scale(.97);transition:opacity .6s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
.rv.in{transform:none}
.grid2 .pj.rv:nth-child(2n){transition-delay:.08s}
.xp.rv:nth-child(2){transition-delay:.06s}.xp.rv:nth-child(3){transition-delay:.12s}

@media(max-width:760px){.quote .s{border-top:var(--bw) solid var(--line);border-left:0}}
@media(prefers-reduced-motion:reduce){body::before,.banner::after,.avatar,.glow::after{animation:none!important}}
/* the legend squares carry inline colours; match them to the orange shades used by the cells */
.legend em i:nth-of-type(1){background:#FFE3B0!important}.legend em i:nth-of-type(2){background:#FFC46B!important}.legend em i:nth-of-type(3){background:#FF9F3D!important}.legend em i:nth-of-type(4){background:#FF7A00!important}
.legend em i{border:1.5px solid var(--ink)}

/* language switch */
.langb{width:auto;padding:0 12px;height:34px;border:2.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--fg);font:700 13px var(--sans);box-shadow:2px 3px 0 var(--off);margin-right:4px;transition:transform .15s,background .15s}
.langb:hover{background:var(--sun);color:var(--ink);transform:translateY(-2px) rotate(-3deg)}

/* footer: a proper sticker card instead of a bare dark block */
footer{margin:72px 0 56px;padding:0;border:var(--bw) solid var(--line);border-radius:24px;background:var(--ink);color:var(--paper);box-shadow:7px 8px 0 var(--orange);position:relative;overflow:hidden}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(135deg,var(--orange) 0 14px,var(--sun) 14px 28px);background-size:40px 12px;animation:vdstripe 2.4s linear infinite}
footer::after{content:"";position:absolute;right:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,31,.35),transparent 65%);pointer-events:none}
@keyframes vdstripe{to{background-position:40px 0}}
footer .ft{padding:40px 30px 30px;gap:20px;position:relative;z-index:1}
footer .ft p{position:relative;padding-left:66px;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.5;color:var(--paper)}
footer .ft p::before{content:"";position:absolute;left:0;top:50%;width:50px;height:50px;margin-top:-25px;border-radius:50%;border:3px solid var(--orange);background:url(images/avatar.webp) center/cover,var(--orange);box-shadow:2px 3px 0 #000;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
footer:hover .ft p::before{transform:rotate(-12deg) scale(1.1)}
footer .glow{box-shadow:4px 5px 0 #000}
@media(prefers-reduced-motion:reduce){footer::before{animation:none}}